### Install and Run Project Dependencies

Source: https://github.com/lynx-family/lynx-examples/blob/main/examples/7guis/README.md

Installs project dependencies and starts the development server. Use this to get the project running locally.

```bash
pnpm install
pnpm run dev
```

--------------------------------

### Run a Specific Example

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/README.md

Navigate to an example directory and start the development server.

```bash
cd examples/hello-world
pnpm run dev
```

--------------------------------

### Run Desktop Example

Source: https://github.com/lynx-family/lynx-examples/blob/main/examples/desktop/README.md

Run the desktop example using pnpm with the specified filter. This will start the development server.

```bash
pnpm --filter @lynx-example/desktop run dev
```

--------------------------------

### Install Dependencies and Run Project

Source: https://github.com/lynx-family/lynx-examples/blob/main/README.md

Enable pnpm using corepack, then install project dependencies and start the development server.

```bash
# Use corepack to enable pnpm
corepack enable
pnpm i
pnpm run dev
```

--------------------------------

### Navigate to Example Directory

Source: https://github.com/lynx-family/lynx-examples/blob/main/README.md

Change into the specific example directory you wish to use, such as the image example.

```bash
cd examples/image
```

--------------------------------

### Build Configuration: TypeScript Example

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/SUMMARY.md

Shows an example of TypeScript configuration within the Lynx build setup.

```json
{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}
```

--------------------------------

### Install Dependencies and Run Lynx Website

Source: https://github.com/lynx-family/lynx-examples/blob/main/README.md

After updating dependencies, install them in the Lynx website root and start the project.

```bash
pnpm i
pnpm run dev
```

--------------------------------

### Build Configuration: Package.json Setup

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/SUMMARY.md

Example of how to set up the package.json file for Lynx projects, including build scripts.

```json
{
  "name": "my-lynx-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "@lynx-js/core": "^1.0.0"
  },
  "devDependencies": {
    "vite": "^4.0.0",
    "@vitejs/plugin-react": "^3.0.0",
    "typescript": "^4.9.3"
  }
}
```

--------------------------------

### Run CSS Example

Source: https://github.com/lynx-family/lynx-examples/blob/main/CONTRIBUTING.md

Example command to run the 'css' example in development mode.

```shell
pnpm --filter css run dev
```

--------------------------------

### Start Development Server

Source: https://github.com/lynx-family/lynx-examples/blob/main/examples/web-platform/packages/react-container/README.md

Start the development server to view your application locally during development.

```bash
pnpm dev
```

--------------------------------

### Build Configuration: Basic Example

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/SUMMARY.md

A fundamental build configuration example, likely including entry points and basic output settings.

```javascript
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [],
  source: {
    entry: './src/main.js'
  },
  output: {
    target: 'browser'
  }
});
```

--------------------------------

### Use Lynx Example Component in MDX

Source: https://github.com/lynx-family/lynx-examples/blob/main/README.md

Import and use the Go component in your MDX files to display a Lynx example. Ensure you replace 'xxx' with your actual example details.

```jsx
import { Go } from "@lynx";

<Go
  example="xxx"
  defaultFile="src/App.tsx"
  img="xxx-example-preview.png"
/>;
```

--------------------------------

### Build Specific Example

Source: https://github.com/lynx-family/lynx-examples/blob/main/CONTRIBUTING.md

Build a single example project by specifying its name using the --filter flag.

```shell
pnpm --filter <example-name> build
```

--------------------------------

### Clone Lynx Examples Repository

Source: https://github.com/lynx-family/lynx-examples/blob/main/README.md

Use this command to clone the Lynx examples repository to your local machine.

```bash
git clone git@github.com:lynx-family/lynx-examples.git
```

--------------------------------

### Install Dependencies

Source: https://github.com/lynx-family/lynx-examples/blob/main/examples/accessibility/README.md

Installs the necessary project dependencies using pnpm.

```bash
pnpm install
```

--------------------------------

### Clone and Install Dependencies

Source: https://github.com/lynx-family/lynx-examples/blob/main/CONTRIBUTING.md

Clone the repository and install project dependencies using pnpm.

```shell
git clone https://github.com/lynx-family/lynx-examples.git
cd lynx-examples
pnpm install
```

--------------------------------

### Run Specific Example in Development

Source: https://github.com/lynx-family/lynx-examples/blob/main/CONTRIBUTING.md

Run a specific example project in development mode using the --filter flag.

```shell
pnpm --filter <example-name> run dev
```

--------------------------------

### React Core API: root.render() Example

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/SUMMARY.md

Demonstrates the usage of the root.render() function for rendering React components in Lynx. Includes full signature and examples.

```javascript
root.render(App, '#app', {
  // options
});
```

--------------------------------

### Build Configuration: Multi-entry with SASS

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/SUMMARY.md

Configuration example for handling multiple entry points and SASS preprocessing.

```javascript
import { defineConfig } from 'vite';
import sass from 'vite-plugin-sass';

export default defineConfig({
  plugins: [sass()],
  source: {
    entry: {
      main: './src/main.js',
      admin: './src/admin.js'
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        // additionalData: `@import "./src/variables.scss";`
      }
    }
  }
});
```

--------------------------------

### Multi-Entry Configuration

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/README.md

Configure multiple entry points for an example. Each entry point can be a separate application or module within the example.

```typescript
export default defineConfig({
  source: {
    entry: {
      counter: "./src/counter/index.tsx",
      timer: "./src/timer/index.tsx",
      crud: "./src/crud/index.tsx",
      // ... more entries
    },
  },
  plugins: [pluginQRCode(), pluginReactLynx(), pluginTypeCheck()],
  environments: {
    web: {},
    lynx: {},
  },
});
```

--------------------------------

### AnimationConfig Example

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/types.md

Provides an example of how to configure an animation using the AnimationConfig type.

```typescript
import type { AnimationConfig } from "@lynx-js/types";

const config: AnimationConfig = {
  keyframes: [
    { opacity: 0, transform: "translateY(20px)" },
    { opacity: 1, transform: "translateY(0)" },
  ],
  duration: 300,
  easing: "ease-out",
  fill: "forwards",
};
```

--------------------------------

### Install Dependencies with pnpm

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/README.md

Commands to enable corepack and install project dependencies using pnpm.

```bash
corepack enable
pnpm install
```

--------------------------------

### Run Development Server

Source: https://github.com/lynx-family/lynx-examples/blob/main/examples/accessibility/README.md

Starts the development server for the Rspeedy project.

```bash
pnpm run dev
```

--------------------------------

### Lynx Website Integration Component

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/README.md

Use the `<Go/>` component in MDX files to integrate published examples into the Lynx website. This requires the example package to be published to npm.

```jsx
import { Go } from "@lynx";

<Go
  example="my-example"
  defaultFile="src/App.tsx"
  img="my-example-preview.png"
/>
```

--------------------------------

### Build Configuration: Production with CDN

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/SUMMARY.md

Example configuration for a production build, including settings for CDN asset prefix.

```javascript
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    target: 'esnext',
    outDir: 'dist',
    assetsDir: 'assets',
    sourcemap: true,
    minify: 'terser',
    cssCodeSplit: true,
    assetsInclude: ['**/*.{png,jpg,gif,svg}']
  },
  // For CDN deployment:
  // base: 'https://your-cdn-domain.com/path/to/assets/'
  // Or using assetPrefix:
  // build: {
  //   assetPrefix: 'https://your-cdn-domain.com'
  // }
});
```

--------------------------------

### Package.json Configuration for Publishable Lynx Examples

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/api-reference/build-configuration.md

Required fields in package.json for creating publishable Lynx examples, including name, version, type, dependencies, devDependencies, and engine specifications.

```json
{
  "name": "@lynx-example/my-example",
  "version": "0.6.0",
  "type": "module",
  "description": "My example description",
  "files": ["dist", "src", "lynx.config.ts"],
  "scripts": {
    "dev": "rspeedy dev",
    "build": "rspeedy build",
    "preview": "rspeedy preview"
  },
  "dependencies": {
    "@lynx-js/react": "catalog:"
  },
  "devDependencies": {
    "@lynx-js/rspeedy": "catalog:",
    "@lynx-js/react-rsbuild-plugin": "catalog:",
    "@lynx-js/qrcode-rsbuild-plugin": "catalog:",
    "@lynx-js/types": "catalog:",
    "@types/react": "^18.3.28",
    "@rsbuild/plugin-type-check": "1.3.4",
    "typescript": "~5.9.3"
  },
  "engines": {
    "node": ">=18"
  }
}
```

--------------------------------

### Handle Tap Event Example

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/types.md

Example of how to handle a tap event and access touch coordinates. Requires a TouchEvent object.

```typescript
const handleTap = (event: TouchEvent) => {
  const touch = event.touches[0];
  console.log(`Tapped at ${touch.clientX}, ${touch.clientY}`);
};
```

--------------------------------

### Asset Prefix Configuration

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/README.md

Configure the asset prefix for published examples. This is used to specify the base URL for static assets when the example is deployed.

```typescript
export default defineConfig({
  output: {
    assetPrefix: "https://lynxjs.org/lynx-examples/my-example/dist",
    filename: "[name].[platform].bundle",
  },
  // ...
});
```

--------------------------------

### SelectorQuery Example

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/types.md

Demonstrates how to use SelectorQuery to select elements, chain methods like boundingClientRect and scrollOffset, and execute queries with a callback.

```typescript
const query = lynx.createSelectorQuery();

query
  .select("#header")
  .boundingClientRect()
  .select(".item")
  .scrollOffset()
  .exec((results) => {
    console.log("Header:", results[0]);
    console.log("Items:", results[1]);
  });
```

--------------------------------

### Update Lynx Website Dependencies

Source: https://github.com/lynx-family/lynx-examples/blob/main/README.md

Modify the package.json file in the 'packages/lynx-example-packages' directory to include your example package.

```json
"dependencies": {
    "@lynx-example/xxx": "xxx",
}
```

--------------------------------

### Handle Layout Change Event Example

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/types.md

Example of how to handle a layout change event and access the element's position and dimensions. Requires a LayoutChangeEvent object.

```typescript
const handleLayout = (event: LayoutChangeEvent) => {
  const { x, y, width, height } = event.detail;
  console.log(`Element at (${x}, ${y}) size ${width}×${height}`);
};
```

--------------------------------

### Basic Page Usage

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/api-reference/jsx-elements.md

Example of using the `<page>` element as the root container with basic styling and nested content.

```typescript
<page style={{ backgroundColor: "#fff" }}>
  <view style={{ padding: "20px" }}>
    <text>Page content</text>
  </view>
</page>
```

--------------------------------

### Global Lynx API: Performance Observer

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/SUMMARY.md

Example of creating a performance observer to monitor performance metrics using lynx.performance.createObserver().

```javascript
const observer = lynx.performance.createObserver(['resource'], (entries) => {
  entries.forEach(entry => {
    console.log('Performance entry:', entry.name, entry.duration);
  });
});

observer.observe({
  entryTypes: ['resource']
});
```

--------------------------------

### Counter Component Example

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/api-reference/react-api.md

An example of a simple counter component using the Component base class. It demonstrates state management with setState and basic rendering.

```typescript
import { Component } from "@lynx-js/react";

export class Counter extends Component<{}, { count: number }> {
  constructor(props: {}) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return (
      <view>
        <text>{this.state.count}</text>
        <view bindtap={() => this.setState({ count: this.state.count + 1 })}>
          <text>+</text>
        </view>
      </view>
    );
  }
}
```

--------------------------------

### Configure Output Filename

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/api-reference/build-configuration.md

Define the naming convention for your output bundle files. This example shows a simple naming pattern.

```typescript
output: {
  filename: "[name].bundle",
}
```

--------------------------------

### MainThread Import Example

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/types.md

Demonstrates how to import the MainThread type from the @lynx-js/types package.

```typescript
import { MainThread } from "@lynx-js/types";
```

--------------------------------

### View Element Layout Example

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/api-reference/jsx-elements.md

Demonstrates using the `<view>` element with flexbox properties to create a row layout with two columns.

```typescript
<view style={{
  display: "flex",
  flexDirection: "row",
  gap: "12px",
  padding: "20px"
}}>
  <view style={{ flex: 1 }}>Left</view>
  <view style={{ flex: 1 }}>Right</view>
</view>
```

--------------------------------

### IntersectionObserver Example

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/types.md

Shows how to create an IntersectionObserver, observe an element by its ID, and handle visibility changes.

```typescript
const observer = lynx.createIntersectionObserver(
  { componentId: "" },
  { thresholds: [0.5] }
);

const element = lynx.getElementById("lazy-load");
if (element) {
  observer.observe(element);
}
```

--------------------------------

### JSX Elements: Form Elements

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/SUMMARY.md

Examples of input and textarea elements for user input.

```jsx
<input type="text" placeholder="Enter text" />
<textarea placeholder="Enter a longer message"></textarea>
```

--------------------------------

### NPM Package Publishing Configuration

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/configuration.md

Configure package.json fields for publishing examples to the lynx-website. Ensure the package name follows the '@lynx-example/*' format and specify files to be included in the published package.

```json
{
  "name": "@lynx-example/my-example",
  "version": "0.6.0",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/lynx-family/lynx-examples.git",
    "directory": "examples/my-example"
  },
  "files": [
    "dist/",
    "src/",
    "lynx.config.ts"
  ],
  "publishConfig": {
    "registry": "https://registry.npmjs.org/"
  }
}
```

--------------------------------

### Build lynx-project with pnpm

Source: https://github.com/lynx-family/lynx-examples/blob/main/examples/web-platform/README.md

Builds the lynx-project within the pnpm workspace. This command is used after dependencies are installed.

```bash
pnpm run build
```

--------------------------------

### Motion API: Mini Motion Library

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/SUMMARY.md

Example of using the lightweight animate() function from the mini motion library, including easing options.

```javascript
import { animate } from 'motion';

const element = document.getElementById('animated-element');

animate(element, {
  opacity: [0, 1],
  scale: [0.5, 1]
}, {
  duration: 0.8,
  easing: 'ease-out'
});
```

--------------------------------

### Development Commands in package.json

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/api-reference/build-configuration.md

Standard npm/pnpm scripts for managing Lynx development workflows, including starting the dev server, building for production, and previewing builds.

```json
{
  "scripts": {
    "dev": "rspeedy dev",
    "build": "rspeedy build",
    "preview": "rspeedy preview"
  }
}
```

--------------------------------

### CSSProperties Example

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/types.md

Demonstrates how to use the CSSProperties type to define styles for a container element, including layout, spacing, and appearance.

```typescript
import type { CSSProperties } from "@lynx-js/types";

const containerStyle: CSSProperties = {
  display: "flex",
  flexDirection: "column",
  gap: "12px",
  padding: "20px",
  backgroundColor: "#fff",
  borderRadius: "8px",
};
```

--------------------------------

### Usage of Path Aliases in Code

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/configuration.md

Provides an example of how to use configured path aliases for importing modules, contrasting it with the traditional relative path method.

```typescript
// Before
import Button from "../../components/Button";
import { useWindowSize } from "../../hooks/useWindowSize";

// After (with aliases)
import Button from "@components/Button";
import { useWindowSize } from "@hooks/useWindowSize";
```

--------------------------------

### Configure Plugins in Rsbuild

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/api-reference/build-configuration.md

Specify an array of rsbuild plugins to be used in your build process. This example includes common plugins for React, Sass, QR code generation, and type checking.

```typescript
import { defineConfig } from "@lynx-js/rspeedy";
import { pluginQRCode } from "@lynx-js/qrcode-rsbuild-plugin";
import { pluginReactLynx } from "@lynx-js/react-rsbuild-plugin";
import { pluginTypeCheck } from "@rsbuild/plugin-type-check";
import { pluginSass } from "@rsbuild/plugin-sass";

export default defineConfig({
  plugins: [
    pluginReactLynx(),
    pluginSass(),
    pluginQRCode(),
    pluginTypeCheck(),
  ],
});
```

--------------------------------

### Render List with Items and Unique Keys

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/api-reference/jsx-elements.md

Example of rendering items within a `<list>` using `<list-item>` components. The `item-key` prop is crucial for Lynx to manage list items efficiently.

```typescript
<list>
  {data.map((item) => (
    <list-item key={item.id} item-key={item.id.toString()}>
      <view><text>{item.title}</text></view>
    </list-item>
  ))}
</list>
```

--------------------------------

### Displaying Local and Remote Images

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/api-reference/jsx-elements.md

Examples of using the `<image>` element to display local assets via require and remote images from URLs. Dimensions and scaling modes can be specified.

```typescript
<image
  src={require("./logo.png")}
  style={{ width: "100px", height: "100px" }}
  mode="aspectFit"
/>

<image
  src="https://example.com/photo.jpg"
  style={{ width: "100%", height: "300px" }}
  mode="aspectFill"
  blur-radius="10px"
/>
```

--------------------------------

### Configure Asset Prefix for CDN Hosting

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/api-reference/build-configuration.md

Set an asset prefix to specify a base path for all assets, commonly used for hosting assets on a CDN. This example configures a CDN URL.

```typescript
output: {
  assetPrefix: "https://cdn.example.com/assets/",
  filename: "[name].[platform].bundle",
}
```

--------------------------------

### Lynx Performance API - Observe Performance Metrics

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/api-reference/global-lynx-api.md

Creates a performance observer to log custom measurements and paint metrics. Custom measurements require marks to define start and end points.

```typescript
const observer = lynx.performance.createObserver((entry) => {
  console.log(`${entry.name}: ${entry.duration}ms`);
});

observer.observe({
  entryTypes: ["measure", "paint"],
});

// Custom measurement
lynx.performance.mark("operation-start");
// ... do work
lynx.performance.mark("operation-end");
lynx.performance.measure(
  "operation",
  "operation-start",
  "operation-end"
);
```

--------------------------------

### File Organization Structure

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/00_START_HERE.md

Illustrates the directory structure of the lynx-examples repository, showing the location of the main documentation files and API reference subdirectories.

```bash
output/
├── 00_START_HERE.md               ← You are here
├── README.md                      ← Project overview
├── SUMMARY.md                     ← Documentation summary
├── DOCUMENTATION_INDEX.md         ← Complete index
├── types.md                       ← Type definitions
├── errors.md                      ← Error handling
├── configuration.md               ← Setup & config
└── api-reference/                 ← API Documentation
    ├── react-api.md
    ├── global-lynx-api.md
    ├── jsx-elements.md
    ├── motion-api.md
    └── build-configuration.md
```

--------------------------------

### Scroll-view Usage Example

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/api-reference/jsx-elements.md

Example of a vertical scrollable view with a fixed height and a large content area to demonstrate scrolling.

```typescript
<scroll-view
  scroll-orientation="vertical"
  style={{ width: "100%", height: "500px" }}
  bounces={true}
>
  <view style={{ height: "2000px" }}>
    <text>Scrollable content</text>
  </view>
</scroll-view>
```

--------------------------------

### Lynx Project: Multiple Entry Points Configuration

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/configuration.md

Shows how to configure multiple entry points for bundling in Lynx projects by specifying them in the 'source.entry' configuration.

```typescript
source: {
  entry: {
    main: "./src/main/index.tsx",
    counter: "./src/counter/index.tsx",
    timer: "./src/timer/index.tsx",
    crud: "./src/crud/index.tsx",
  },
}
```

--------------------------------

### Lynx Fetch API - Basic GET Request

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/api-reference/global-lynx-api.md

Performs a basic HTTP GET request to the specified URL and retrieves the response as JSON.

```typescript
// Basic GET request
const response = await lynx.fetch("https://api.example.com/data");
const json = await response.json();
```

--------------------------------

### Lynx Project: Single Entry Point Configuration

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/configuration.md

Demonstrates how to configure a single entry point for Lynx projects, which is typically auto-detected from src/index.tsx.

```typescript
// lynx.config.ts
export default defineConfig({
  // Auto-detects src/index.tsx as entry
});
```

--------------------------------

### root.render()

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/api-reference/react-api.md

Initializes the Lynx application and renders the root component. Mounts the React component tree to the Lynx page. This is typically called once at application startup from the entry point file.

```APIDOC
## root.render()

### Description
Initializes the Lynx application and renders the root component.

### Method
N/A (Function Call)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **element** (ReactElement) - Required - Root React component to render
- **callback** (() => void) - Optional - Called after render completes

### Request Example
```typescript
import { root } from "@lynx-js/react";
import { App } from "./App";

root.render(<App />);

if (import.meta.webpackHot) {
  import.meta.webpackHot.accept();
}
```

### Response
#### Success Response
void

#### Response Example
None
```

--------------------------------

### Build Configuration: defineConfig()

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/SUMMARY.md

Shows the basic structure of using defineConfig() for configuring the build process in Lynx.

```javascript
import { defineConfig } from 'vite';

export default defineConfig({
  // configuration options
});
```

--------------------------------

### Build for Production

Source: https://github.com/lynx-family/lynx-examples/blob/main/examples/web-platform/packages/react-container/README.md

Build the application for production deployment. This command optimizes your code for performance and size.

```bash
pnpm build
```

--------------------------------

### Build All Projects

Source: https://github.com/lynx-family/lynx-examples/blob/main/CONTRIBUTING.md

Build all projects within the workspace using Turbo.

```shell
pnpm turbo build
```

--------------------------------

### Preview Production Build

Source: https://github.com/lynx-family/lynx-examples/blob/main/examples/web-platform/packages/react-container/README.md

Locally preview the production build to test how your application will perform in a production environment before deploying.

```bash
pnpm preview
```

--------------------------------

### Get Element by ID

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/api-reference/global-lynx-api.md

Retrieves an element by its ID. Returns null if the element does not exist.

```typescript
const element = lynx.getElementById("my-view");
if (element) {
  element.style.backgroundColor = "red";
}
```

--------------------------------

### Build System Commands

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/README.md

Common commands for the Lynx development server, production build, and preview.

```bash
pnpm run dev
pnpm run build
pnpm run preview
```

--------------------------------

### Configure Source File Include/Exclude Patterns

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/configuration.md

Demonstrates how to specify which files should be included or excluded during the build process using 'source.include' and 'source.exclude' patterns.

```typescript
source: {
  include: ["src/**/*.{ts,tsx,js,jsx}"],
  exclude: ["**/*.test.ts", "**/*.spec.ts", "node_modules"],
}
```

--------------------------------

### JSX Elements: Text Elements

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/SUMMARY.md

Examples of using text and inline-text elements for displaying text content.

```jsx
<text>This is a block of text.</text>
<inline-text>This text is inline.</inline-text>
```

--------------------------------

### Configure Path Aliases in Lynx

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/configuration.md

Illustrates how to set up path aliases in the 'source.alias' configuration for cleaner import paths within Lynx projects.

```typescript
source: {
  alias: {
    "@": "./src",
    "@components": "./src/components",
    "@hooks": "./src/hooks",
    "@utils": "./src/utils",
    "@types": "./src/types",
  },
}
```

--------------------------------

### animate

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/api-reference/motion-api.md

Lightweight animation function that animates a value from a starting point to an ending point with configurable options.

```APIDOC
## animate()

### Description
Lightweight animation function.

### Signature
```typescript
function animate(from: number, to: number, options?: AnimateOptions): void
```

### Parameters
#### Path Parameters
- **from** (number) - Required - Starting value
- **to** (number) - Required - Ending value
- **options** (AnimateOptions) - Optional - Animation config

### AnimateOptions
#### Path Parameters
- **duration** (number) - Optional - Default: 300 - Duration in ms
- **delay** (number) - Optional - Default: 0 - Delay in ms
- **easing** (EasingFunction) - Optional - Default: "easeOut" - Easing function
- **onUpdate** ((value: number) => void) - Optional - Called each frame
- **onComplete** (() => void) - Optional - Called when done

### Easing Functions
- "linear"
- "easeIn"
- "easeOut"
- "easeInOut"
- Custom function: `(t: number) => number`

### Example
```typescript
import { animate } from "@lynx-js/motion";
import { useState } from "@lynx-js/react";

export function Counter() {
  const [count, setCount] = useState(0);

  const animateCount = (target: number) => {
    animate(count, target, {
      duration: 300,
      easing: "easeOut",
      onUpdate: (value) => {
        setCount(Math.round(value));
      },
    });
  };

  return (
    <>
      <text style={{ fontSize: "48px" }}>{count}</text>
      <view bindtap={() => animateCount(100)}>
        <text>Animate to 100</text>
      </view>
    </>
  );
}
```

### Source
`@lynx-js/motion`
```

--------------------------------

### JSX Elements: Paged Elements

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/SUMMARY.md

Examples for paged navigation elements including viewpager, viewpager-item, refresh, and refresh-header.

```jsx
<viewpager>
  <viewpager-item>Page 1</viewpager-item>
  <viewpager-item>Page 2</viewpager-item>
</viewpager>

<refresh>
  <refresh-header>
    Pull to refresh...
  </refresh-header>
</refresh>
```

--------------------------------

### React Class Component: Component

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/SUMMARY.md

Example of using the Component class API for creating React components in Lynx.

```javascript
import React, { Component } from 'react';

class MyClassComponent extends Component {
  render() {
    return <div>Hello from Class Component</div>;
  }
}
```

--------------------------------

### lynx.getNativeApp()

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/api-reference/global-lynx-api.md

Gets the native application bridge object, allowing interaction with native device functionalities and platform-specific methods.

```APIDOC
## lynx.getNativeApp()

### Description
Gets the native application bridge object, allowing interaction with native device functionalities and platform-specific methods.

### Returns
NativeApp object for native interaction.

**NativeApp Methods**:
- **callLepusMethod** (methodName: string, params?: any) => any - Call native method.
- **callPageMethod** (methodName: string, params?: any) => any - Call page method.

### Example
```typescript
const nativeApp = lynx.getNativeApp();

nativeApp.callLepusMethod("updatePage", {
  title: "New Title",
  data: { /* ... */ }
});

nativeApp.callPageMethod("refresh");
```
```

--------------------------------

### Initialize and Render Root Component

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/api-reference/react-api.md

Initializes the Lynx application and renders the root React component. This is typically called once at application startup.

```typescript
import { root } from "@lynx-js/react";
import { App } from "./App";

root.render(<App />);

if (import.meta.webpackHot) {
  import.meta.webpackHot.accept();
}
```

--------------------------------

### Build Application with npm

Source: https://github.com/lynx-family/lynx-examples/blob/main/examples/with-solidjs/README.md

This command builds the SolidJS application configured with Lynx. It assumes an 'npm run build' script is defined in the project's package.json.

```sh
$ npm run build
```

--------------------------------

### Global Lynx API: Intersection Observer

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/SUMMARY.md

Example of creating and using an Intersection Observer with observe, unobserve, and disconnect methods.

```javascript
const observer = lynx.createIntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Element is visible');
    }
  });
}, {
  threshold: 0.5
});

const targetElement = document.getElementById('target');
observer.observe(targetElement);

// To stop observing a specific element:
// observer.unobserve(targetElement);

// To disconnect the observer entirely:
// observer.disconnect();
```

--------------------------------

### lynx.performance.createObserver()

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/api-reference/global-lynx-api.md

Creates a PerformanceObserver to monitor various performance metrics. Allows for custom callbacks when performance entries are recorded.

```APIDOC
## lynx.performance.createObserver(callback)

### Description
Creates a PerformanceObserver to monitor various performance metrics. Allows for custom callbacks when performance entries are recorded.

### Parameters
#### Path Parameters
- **callback** (PerformanceEntry => void) - Required - Function to be called when a performance entry is recorded.

### Response
**PerformanceObserver**:
- **observe** (options: { entryTypes: string[] }) => void - Start observing metrics.
- **disconnect** () => void - Stop observing.

**Entry Types** (entryTypes):
- "measure" - Custom measurements
- "mark" - Custom marks
- "navigation" - Page navigation
- "resource" - Resource loading
- "paint" - First paint metrics
- "initLynxView" - Lynx view initialization
- "initContainer" - Container initialization
- Other custom entry types

### Example
```typescript
const observer = lynx.performance.createObserver((entry) => {
  console.log(`${entry.name}: ${entry.duration}ms`);
});

observer.observe({
  entryTypes: ["measure", "paint"],
});

// Custom measurement
lynx.performance.mark("operation-start");
// ... do work
lynx.performance.mark("operation-end");
lynx.performance.measure(
  "operation",
  "operation-start",
  "operation-end"
);
```
```

--------------------------------

### Environment Configuration

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/api-reference/build-configuration.md

Define platform-specific build configurations for web and Lynx environments. Each environment can have its own output and source settings.

```typescript
environments: {
  web?: EnvironmentConfig;
  lynx?: EnvironmentConfig;
  [key: string]: EnvironmentConfig;
}
```

```typescript
{
  output?: OutputConfig;
  source?: SourceConfig;
  tools?: ToolsConfig;
  // ... other rsbuild configs
}
```

```typescript
environments: {
  web: {
    output: {
      target: "web",
    },
  },
  lynx: {
    output: {
      target: "lynx-runtime",
    },
  },
}
```

--------------------------------

### JSX Elements: Container Elements

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/SUMMARY.md

Usage examples for container JSX elements like page, view, scroll-view, list, and list-item.

```jsx
<page>
  <view>
    <text>Hello, Lynx!</text>
    <scroll-view>
      <list-item>Item 1</list-item>
      <list-item>Item 2</list-item>
    </scroll-view>
  </view>
</page>
```

--------------------------------

### AnimatedBox Component Example

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/types.md

React component demonstrating how to use ElementRef to animate a view element. Requires importing useRef and ElementRef.

```typescript
import { useRef } from "@lynx-js/react";
import type { ElementRef } from "@lynx-js/type-element-api";

export function AnimatedBox() {
  const boxRef = useRef<ElementRef>(null);

  const handleAnimate = () => {
    boxRef.current?.animate({
      keyframes: [{ opacity: 0 }, { opacity: 1 }],
      duration: 300,
    });
  };

  return <view ref={boxRef} bindtap={handleAnimate}><text>Tap</text></view>;
}
```

--------------------------------

### InitLynxviewEntry

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/types.md

Lynx view initialization metrics. A specific type of PerformanceEntry for tracking Lynx view initialization.

```APIDOC
## InitLynxviewEntry

### Description
Lynx view initialization metrics. A specific type of PerformanceEntry for tracking Lynx view initialization.

### Type Definition
```typescript
type InitLynxviewEntry = PerformanceEntry & {
  entryType: "initLynxview";
  name: string;
};
```
```

--------------------------------

### lynx.getElementById()

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/api-reference/global-lynx-api.md

Retrieves an element by its ID. Gets a direct reference to an element by its id attribute. Returns null if element doesn't exist.

```APIDOC
## lynx.getElementById()

### Description
Retrieves an element by its ID. Gets a direct reference to an element by its id attribute. Returns null if element doesn't exist.

### Method
N/A (JavaScript method)

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```javascript
const element = lynx.getElementById("my-view");
if (element) {
  element.style.backgroundColor = "red";
}
```

### Response
#### Success Response
- **HTMLElement** or **null**: The found HTMLElement or null if not found.

#### Response Example
```json
{
  "example": "HTMLElement or null"
}
```
```

--------------------------------

### Global Lynx API: Network Fetch

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/SUMMARY.md

Illustrates making network requests using lynx.fetch(), including options for FetchOptions and handling streaming responses.

```javascript
async function fetchData() {
  try {
    const response = await lynx.fetch('/api/data', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ key: 'value' })
    });

    if (response.ok) {
      const data = await response.json();
      console.log(data);
    } else {
      console.error('Fetch failed:', response.statusText);
    }
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}
```

--------------------------------

### Create Intersection Observer for Visibility

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/api-reference/global-lynx-api.md

Creates an observer to track element visibility. Use `observe` to start tracking and `disconnect` to stop all observations.

```typescript
const observer = lynx.createIntersectionObserver(
  { componentId: "" },
  { thresholds: [0.5] }
);

const element = lynx.getElementById("lazy-load");
if (element) {
  observer.observe(element);
}

// In component cleanup
observer.disconnect();
```

--------------------------------

### Configure pluginQRCode

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/api-reference/build-configuration.md

Integrate the QR code plugin to automatically generate and display a QR code in the terminal during development server startup for mobile preview.

```typescript
import { pluginQRCode } from "@lynx-js/qrcode-rsbuild-plugin";

export default defineConfig({
  plugins: [pluginQRCode()],
});
```

```typescript
pluginQRCode({
  // options
})
```

--------------------------------

### forwardRef

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/api-reference/react-api.md

Forwards a ref to a child component, allowing parent components to get direct access to a child's DOM node via ref.

```APIDOC
## forwardRef()

### Description
Forwards a ref to a child component.

### Signature
```typescript
function forwardRef<P, T>(render: (props: P, ref: Ref<T>) => ReactElement): (props: P & { ref?: Ref<T> }) => ReactElement
```

### Parameters
#### Function Parameter
- **render** (Function) - Required - Component render function

### Returns
Component that accepts ref prop

### Example
```typescript
import { forwardRef } from "@lynx-js/react";

const TextInput = forwardRef((props, ref) => {
  return <input ref={ref} {...props} />;
});

// Parent component
import { useRef } from "@lynx-js/react";

export function Parent() {
  const inputRef = useRef<any>(null);

  const focus = () => {
    inputRef.current?.focus?.();
  };

  return (
    <>
      <TextInput ref={inputRef} />
      <view bindtap={focus}><text>Focus</text></view>
    </>
  );
}
```
```

--------------------------------

### Project File Structure

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/SUMMARY.md

Overview of the directory structure for the Lynx project output, indicating the purpose of each main file and directory.

```bash
/workspace/home/output/
├── README.md                              # Project overview
├── DOCUMENTATION_INDEX.md                 # Navigation guide
├── SUMMARY.md                             # This file
├── types.md                               # TypeScript definitions
├── errors.md                              # Error handling
├── configuration.md                       # Runtime configuration
└── api-reference/
    ├── react-api.md                       # React integration
    ├── global-lynx-api.md                 # Platform APIs
    ├── jsx-elements.md                    # JSX components
    ├── motion-api.md                      # Animation APIs
    └── build-configuration.md             # Build system

```

--------------------------------

### Basic Text Input Field

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/api-reference/jsx-elements.md

Example of a basic text input field using the `<input>` element. It demonstrates binding input values to state and applying basic styling.

```typescript
const [text, setText] = useState("");

<input
  type="text"
  placeholder="Enter text..."
  value={text}
  bindinput={(e) => setText(e.detail.value)}
  style={{ padding: "8px", fontSize: "16px" }}
/>
```

--------------------------------

### useInitData()

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/api-reference/react-api.md

Retrieves initial data passed from the native platform to the JavaScript layer during application initialization.

```APIDOC
## useInitData()

### Description
Accesses initial data passed to the application. Retrieves data passed from the native platform to the JavaScript layer during initialization.

### Signature
```typescript
function useInitData(): any
```

### Returns
- **any** - Initial data object passed to the app

### Example
```typescript
import { useInitData } from "@lynx-js/react";

export function App() {
  const initData = useInitData();

  return <text>{initData?.title || "Default title"}</text>;
}
```
```

--------------------------------

### Render Scrollable List with Items

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/api-reference/jsx-elements.md

Example of rendering a vertical scrollable list using the `<list>` element and mapping data to `<list-item>` components. Ensure items have unique keys.

```typescript
<list scroll-orientation="vertical" style={{ height: "100%" }}>
  {items.map((item, index) => (
    <list-item key={index} item-key={index.toString()}>
      <view style={{ padding: "12px" }}>
        <text>{item.name}</text>
      </view>
    </list-item>
  ))}
</list>
```

--------------------------------

### Implement React Error Boundary

Source: https://github.com/lynx-family/lynx-examples/blob/main/_autodocs/errors.md

React error boundaries catch JavaScript errors anywhere in their child component tree. This example shows a basic class component implementation.

```typescript
class ErrorBoundary extends Component {
  state = { hasError: false, error: null };

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    console.error("Error caught:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <text>Something went wrong: {this.state.error?.message}</text>;
    }
    return this.props.children;
  }
}

export function App() {
  return (
    <ErrorBoundary>
      <MainComponent />
    </ErrorBoundary>
  );
}
```