Lynx

https://lynxjs.org/4.0
Admin
Lynx is an open-source cross-platform framework that empowers developers to use web skills like...
Tokens:716,260
Snippets:7,743
Trust Score:8.7
Update:1 month ago
Show doc for...
Tokens:
Raw
### Router Implementation Example

Source: https://lynxjs.org/4.0/react/routing/tanstack-router

A consolidated example of initializing the router and providing it to the application.

```typescript
import { createMemoryHistory, createRouter, RouterProvider } from "@tanstack/react-router";

import { routeTree } from "./routeTree.gen.js";

const memoryHistory = createMemoryHistory({
  initialEntries: ["/"],
});

const router = createRouter({ routeTree, history: memoryHistory, isServer: false });

export function App() {
  return <RouterProvider router={router} />;
}
```

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

### grid-column-start Syntax Examples

Source: https://lynxjs.org/4.0/api/css/properties/grid-column-start

Basic syntax examples for numeric and span-based grid-column-start values.

```css
/* <number> values */
grid-column-start: 1;
grid-column-start: 2;

/* span  <number> values*/
grid-column-start: span 1;
```

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

### Install @lynx-js/motion

Source: https://lynxjs.org/4.0/ui/motion-mini

Installation commands for various package managers.

```bash
npm install @lynx-js/motion
```

```bash
yarn add @lynx-js/motion
```

```bash
pnpm add @lynx-js/motion
```

```bash
bun add @lynx-js/motion
```

```bash
deno add npm:@lynx-js/motion
```

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

### InitDataProvider Usage Example

Source: https://lynxjs.org/4.0/api/react/Function.InitDataProvider.html

Example showing how to wrap an application with InitDataProvider to provide data to InitDataConsumer.

```javascript
import { root } from "@lynx-js/react"

function App() {
  return (
    <InitDataConsumer children={(initData) => <view>...</view>}/>
  )
}

root.render(
  <InitDataProvider>
     <App/>
  </InitDataProvider>
);
```

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

### Install lynx-ui package

Source: https://lynxjs.org/4.0/ui/index.html

Use npm to install the lynx-ui library in your project.

```bash
npm i @lynx-js/lynx-ui
```

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

### Making HTTP Requests with Fetch

Source: https://lynxjs.org/4.0/guide/interaction/networking

Examples of performing basic GET requests and customized POST requests with headers and body content.

```javascript
fetch('https://jsonplaceholder.typicode.com/todos/1');
```

```javascript
fetch('https://jsonplaceholder.typicode.com/todos/1', {
  method: 'POST',
  headers: {
    'some-header': 'header',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  }),
});
```

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

### performance.profileStart()

Source: https://lynxjs.org/4.0/api/rspeedy/rspeedy.performance.profile.html

Starts a performance recording session.

```APIDOC
## performance.profileStart()

### Description
Starts the performance profiling recording.

### Method
Function call

### Parameters
None
```

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

### Install Valtio

Source: https://lynxjs.org/4.0/react/state-management/valtio

Commands to install the valtio package using different package managers.

```bash
npm install valtio
```

```bash
yarn add valtio
```

```bash
pnpm add valtio
```

```bash
bun add valtio
```

```bash
deno add npm:valtio
```

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

### CSS Syntax Examples

Source: https://lynxjs.org/4.0/api/css/properties/transition-delay

Basic syntax examples for setting the transition-delay property using seconds and milliseconds.

```css
transition-delay: 2s;
transition-delay: 300ms;
```

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

### lynx.performance.profileStart()

Source: https://lynxjs.org/4.0/api/lynx-api/lynx/lynx-performance

Starts a performance profiling session.

```APIDOC
## lynx.performance.profileStart()

### Description
Starts a performance profiling session.
```

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

### Usage Examples for __AddDataset

Source: https://lynxjs.org/4.0/api/engine/element-api/__AddDataset

Examples showing the render directive format and the corresponding JavaScript implementation.

```html
<view src="xxx" data-key="value" />
```

```javascript
// main-thread.js
let element = __CreateElement('view', 0, {});
__AddDataset(element, 'key', 'value');
```

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

### performance.profileStart()

Source: https://lynxjs.org/4.0/api/rspeedy/rspeedy.performance.chunksplit

Starts a performance profiling session.

```APIDOC
## performance.profileStart()

### Description
Starts recording performance profile data.

### Method
Function call

### Parameters
None
```

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

### Combinator Examples

Source: https://lynxjs.org/4.0/api/lynx-api/selector-query/selector-query-select

Examples of using child and descendant combinators.

```javascript
// '.the-parent > .the-child'
<view className="the-parent">
  <view className="the-child" />
</view>
```

```javascript
// GOOD: '.the-ancestor   .the-descendant'
// BAD:  '.the-ancestor > .the-descendant'
<view className="the-ancestor">
  <view>
    <view className="the-descendant" />
  </view>
</view>
```

```css
#id1, #id2;
```

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

### CSS Opacity Syntax Examples

Source: https://lynxjs.org/4.0/api/css/properties/opacity

Basic syntax examples showing valid numeric values for the opacity property.

```css
opacity: 1;
opacity: 0.5;
opacity: 0;
```

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

### installLynxTestingEnv()

Source: https://lynxjs.org/4.0/api/lynx-testing-environment/Class.LynxTestingEnv.html

Installs the Lynx testing environment.

```APIDOC
## installLynxTestingEnv()

### Description
Sets up and installs the necessary testing environment configurations for Lynx.

### Method
Function

### Parameters
None
```

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

### Trace Event Usage Examples

Source: https://lynxjs.org/4.0/api/lynx-native-api/trace-event

Demonstrates wrapping code blocks with beginSection and endSection, including examples with custom arguments.

```objective-c
[LynxTraceEvent beginSection:@"render" withName:@"measure-layout"];
// ... your code ...
[LynxTraceEvent endSection:@"render" withName:@"measure-layout"];

// With custom arguments
[LynxTraceEvent beginSection:@"render" withName:@"draw-image" debugInfo:@{@"component": @"Image", @"size": @"large"}];
// ... your code ...
[LynxTraceEvent endSection:@"render" withName:@"draw-image"];
```

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

### Instant Trace Event Usage Examples

Source: https://lynxjs.org/4.0/api/lynx-native-api/trace-event

Examples of recording instant events with and without custom arguments.

```typescript
TraceEvent.instant(TraceCategory.Other, "request-started");

// With custom arguments
const args: Record<string, string> = {
  "url": "https://example.com",
  "method": "GET"
}
TraceEvent.instant(TraceCategory.Other, "request-finished", args);
```

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

### Install Dependencies

Source: https://lynxjs.org/4.0/react/routing/tanstack-router

Install the core TanStack Router package and the required URLSearchParams polyfill.

```bash
npm install @tanstack/react-router url-search-params-polyfill
```

```bash
yarn add @tanstack/react-router url-search-params-polyfill
```

```bash
pnpm add @tanstack/react-router url-search-params-polyfill
```

```bash
bun add @tanstack/react-router url-search-params-polyfill
```

```bash
deno add npm:@tanstack/react-router npm:url-search-params-polyfill
```

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

### Install i18next-resources-to-backend

Source: https://lynxjs.org/4.0/guide/inclusion/internationalization

Commands to install the required backend package for lazy loading translations.

```bash
npm install i18next-resources-to-backend
```

```bash
yarn add i18next-resources-to-backend
```

```bash
pnpm add i18next-resources-to-backend
```

```bash
bun add i18next-resources-to-backend
```

```bash
deno add npm:i18next-resources-to-backend
```

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

### Install React Router v6

Source: https://lynxjs.org/4.0/react/routing/react-router

Commands to install the compatible version of react-router for ReactLynx.

```bash
npm install react-router@6
```

```bash
yarn add react-router@6
```

```bash
pnpm add react-router@6
```

```bash
bun add react-router@6
```

```bash
deno add npm:react-router@6
```

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

### Lynx Image Component Examples

Source: https://lynxjs.org/4.0/api/elements/built-in/image.html

A comprehensive example demonstrating auto-sizing, basic scaling modes, styling with border-radius, image filters, and event handling for image loading.

```typescript
// Copyright 2024 The Lynx Authors. All rights reserved.
// Licensed under the Apache License Version 2.0 that can be found in the
// LICENSE file in the root directory of this source tree.

import type { ErrorEvent, LoadEvent } from "@lynx-js/types";

import LynxIcon from "@assets/image/lynxicon.png?inline";
import DoctorIcon from "@assets/image/rsdoctor.png?inline";
import LibIcon from "@assets/image/rslib.png?inline";
import SpeedyIcon from "@assets/image/rspeedy.png?inline";

import "./App.css";

interface ExampleProps {
  url: string;
}

const ImageAutoSizeExample = ({ url }: ExampleProps) => {
  return (
    <view className="linear" style="linear-layout-gravity:left">
      <text className="sub-title">Image AutoSize Examples</text>
      <text>auto-size with no width</text>
      <image className="no-width" src={url} auto-size={true} />
      <text>auto-size with no height</text>
      <image className="no-height" src={url} auto-size={true} />
    </view>
  );
};

const ImageBasicExample = ({ url }: ExampleProps) => {
  return (
    <view className="linear">
      <text className="sub-title">Image Basic Examples</text>
      <text>scaleToFill</text>
      <image src={url} style="width:200px;height:100px" />
      <text>aspectFit</text>
      <image src={url} mode="aspectFit" style="width:200px;height:100px" />
      <text>aspectFill</text>
      <image src={url} mode="aspectFill" style="width:200px;height:100px" />
    </view>
  );
};

const ImageStyledExample = ({ url }: ExampleProps) => {
  return (
    <view className="linear">
      <text className="sub-title">Image Styled Examples</text>
      <text>aspectFit</text>
      <image
        className="mode-image"
        mode="aspectFit"
        src={url}
        style="border-radius: 10px"
      />

      <text>aspectFill</text>
      <image
        className="mode-image"
        mode="aspectFill"
        src={url}
        style="border-radius:50% "
      />

      <text>scaleToFill</text>
      <image
        className="mode-image"
        mode="scaleToFill"
        src={url}
        style="border-radius: 20px 30px 40px 10px"
      />
    </view>
  );
};

const ImageFilterExample = ({ url }: ExampleProps) => {
  return (
    <view className="linear">
      <text className="sub-title">Image Filter Examples</text>
      <text>origin pic</text>
      <image className="filter-image" src={url} />

      <text>blur pic</text>
      <image className="filter-image" src={url} blur-radius="5px" />

      <text>tint pic</text>
      <image className="filter-image" src={url} tint-color="#123aff" />
    </view>
  );
};

const ImageEventExample = ({ url }: ExampleProps) => {
  const handleImageLoad = (event: LoadEvent) => {
    console.log("Image loaded success:", JSON.stringify(event));
  };
  const handleImageError = (event: ErrorEvent) => {
    console.log("Image loaded error:", JSON.stringify(event));
  };
  return (
    <view className="linear">
      <text className="sub-title">Image Event Examples</text>
      <text>load event</text>
      <image className="filter-image" src={url} bindload={handleImageLoad} />
      <text>error event</text>
      <image
        className="filter-image"
        src={"error url"}
        binderror={handleImageError}
      />
    </view>
  );
};

const ImageExample = ({ type, url }: ExampleProps & { type: string }) => {
  switch (type) {
    case "auto-size":
      return <ImageAutoSizeExample url={url} />;
    case "styled":
      return <ImageStyledExample url={url} />;
    case "filter":
      return <ImageFilterExample url={url} />;
    case "event":
      return <ImageEventExample url={url} />;
    default:
      return <ImageBasicExample url={url} />;
  }
};

export const App = () => {
  const examples = [
    { type: "auto-size", url: LynxIcon },
    { type: "basic", url: SpeedyIcon },
    { type: "styled", url: LibIcon },
    { type: "filter", url: DoctorIcon },
    { type: "event", url: SpeedyIcon },
  ];

  return (
    <scroll-view scroll-orientation="vertical" style="padding:5px;width:100%; height:100%;">
      <text className="title">Image Examples</text>
      {examples.map((example, index) => <ImageExample type={example.type} url={example.url} />)}
    </scroll-view>
  );
};
```

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

### flex-shrink syntax examples

Source: https://lynxjs.org/4.0/api/css/properties/flex-shrink

Basic usage examples showing numeric values for the flex-shrink property.

```css
/* <number> values */
flex-shrink: 2;
flex-shrink: 0;
```

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

### Usage examples for profileStart()

Source: https://lynxjs.org/4.0/api/lynx-api/lynx/lynx-performance/profile-start

Demonstrates various ways to initiate trace events, including basic naming, custom arguments, and flow ID integration.

```javascript
// Start a trace event with only a name
lynx.performance.profileStart('DataFetch');

// Start a trace event with custom arguments
lynx.performance.profileStart('DataFetch', {
  args: { url: 'https://api.example.com/data', method: 'GET' },
});

// Start a trace event with a flow id
const flowId = lynx.performance.profileFlowId();
lynx.performance.profileStart('UserAction', { flowId });

// Start a duration event with both arguments and flow ID
lynx.performance.profileStart('ComplexProcess', {
  args: { step: 'start' },
  flowId,
});
```

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

### Define Conic Gradients

Source: https://lynxjs.org/4.0/api/css/data-type/gradient

Examples of various conic-gradient configurations including starting angles and center positions.

```css
/* Starting from 0deg (default), center at 50% 50% (default) */
conic-gradient(red, blue);
/* Starting from 45deg */
conic-gradient(from 45deg, red, blue);
/* Center at top left */
conic-gradient(at top left, red, blue);
/* Starting from 90deg, center at 20% 30% */
conic-gradient(from 90deg at 20% 30%, red 0%, blue 50%, green 100%);
```

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

### Implement Touch Event Listeners

Source: https://lynxjs.org/4.0/learn/product-detail.html

Initial setup for tracking touch start and move events to calculate movement delta.

```typescript
function Swiper() {
  const touchStartXRef = useRef<number>(0);

  function handleTouchStart(e: TouchEvent) {
    touchStartXRef.current = e.touches[0].clientX;
  }

  function handleTouchMove(e: TouchEvent) {
    const delta = e.touches[0].clientX - touchStartXRef.current;
  }

  return (
    <view
      class="swiper-container"
      bindtouchstart={handleTouchStart}
      bindtouchmove={handleTouchMove}
    >
      {/* ... */}
    </view>
  );
}
```

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

### Common grid-row syntax examples

Source: https://lynxjs.org/4.0/api/css/properties/grid-row

Examples demonstrating the use of numbers and span keywords to define grid row placement.

```css
/* <number> values */
grid-row: 1;
grid-row: 1 / 2;
grid-row: 1 / -1;

/* span <number> values */
grid-row: span 2;
grid-row: span 2 / 4;
grid-row: 1 / span 3;
```

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

### Scroll Coordinator Implementation

Source: https://lynxjs.org/4.0/api/elements/built-in/scroll-coordinator

A complete example showing the setup of a scroll-coordinator with a header and content, including the logic to handle refresh completion.

```typescript
// Copyright 2024 The Lynx Authors. All rights reserved.
// Licensed under the Apache License Version 2.0 that can be found in the
// LICENSE file in the root directory of this source tree.

import { root, useRef, useState } from "@lynx-js/react";
import type { NodesRef } from "@lynx-js/types";

import loadingGif from "../assets/bg_flower.gif";
import image0 from "../assets/item_0.jpg";
import image1 from "../assets/item_1.jpg";
import image2 from "../assets/item_2.jpg";

const App = () => {
  const refreshRefs = useRef<Record<string, NodesRef | null>>({});
  const [currentPage, setCurrentPage] = useState(0);
  const coverImages = [image0, image1, image2];
  const tabs = ["Featured", "Nearby", "Saved"];
  const listPages = ["A", "B", "C"];
  const listItems = Array.from({ length: 24 }, (_, index) => {
    return {
      image: coverImages[index % coverImages.length],
      title: `Scenic stop ${index + 1}`,
      subtitle: index % 2 === 0 ? "Quiet path with a wide lookout" : "Short trail near the water",
      tag: index % 3 === 0 ? "Fresh" : (index % 3 === 1 ? "Calm" : "Open"),
    };
  });

  const onStartRefresh = (page: string) => {
    setTimeout(() => {
      refreshRefs.current[page]?.invoke({
        method: "finishRefresh",
      }).exec();
    }, 2000);
  };

  return (
    <view
      style={{
        width: "100%",
        height: "100%",
        flexDirection: "column",
        display: "flex",
        padding: "24px",
        backgroundColor: "#F6F7F9",
        boxSizing: "border-box",
      }}
    >
      <text style={{ fontSize: "32px", fontWeight: "700", color: "#202124" }}>Scroll Coordinator</text>
      <scroll-coordinator
        bounces={false}
        refresh-mode="page"
        style={{
          marginTop: "24px",
          width: "100%",
          height: "100%",
          flex: "1",
          display: "flex",
          flexDirection: "column",
          position: "relative",
          overflow: "hidden",
          backgroundColor: "#EDEFF2",
        }}
      >
        {
          /*
          Required, it can be scrolled in scroll coordinator without affecting the layout,
          so it is recommended to set position: absolute.
          No need to place scroll-view or list inside.
        */
        }
        <scroll-coordinator-header
          style={{
            position: "absolute",
            width: "100%",
            height: "360rpx",
          }}
        >
          <view
            style={{
              width: "100%",
              height: "360rpx",
              overflow: "hidden",
            }}
          >
            <image
              mode="aspectFill"
              src={image0}
              style={{
                width: "100%",
                height: "360rpx",
              }}
            />
            <view
              style={{
                position: "absolute",
                left: "0",
                bottom: "0",
                width: "100%",
                padding: "24rpx",
                backgroundColor: "#00000066",
                boxSizing: "border-box",
              }}
            >
              <text style={{ fontSize: "34rpx", fontWeight: "700", color: "#FFFFFF" }}>Forest Ridge</text>
              <text style={{ marginTop: "8rpx", fontSize: "22rpx", color: "#FFFFFF" }}>
                Sunrise views, shaded paths, and easy waypoints.
              </text>
            </view>
          </view>
        </scroll-coordinator-header>
```

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

### Syntax Examples

Source: https://lynxjs.org/4.0/api/css/properties/relative-align-inline-start

Common usage patterns for the relative-align-inline-start property.

```css
relative-align-inline-start: parent;
relative-align-inline-start: none;

relative-align-inline-start: 1;
relative-align-inline-start: 2;
```

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

### Start Development Server

Source: https://lynxjs.org/4.0/guide/start/quick-start

Launch the development server to enable hot reloading and debugging.

```npm
npm run dev
```

```yarn
yarn run dev
```

```pnpm
pnpm run dev
```

```bun
bun run dev
```

```deno
deno run npm:dev
```

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

### Install DevDependencies

Source: https://lynxjs.org/4.0/react/routing/tanstack-router

Install the TanStack router plugin for Rspack/Rspeedy integration.

```bash
npm install @tanstack/router-plugin -D
```

```bash
yarn add @tanstack/router-plugin -D
```

```bash
pnpm add @tanstack/router-plugin -D
```

```bash
bun add @tanstack/router-plugin -D
```

```bash
deno add npm:@tanstack/router-plugin -D
```

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

### Implement OnPageStart on Desktop (C++)

Source: https://lynxjs.org/4.0/api/lynx-native-api/lynx-view-client/on-page-start

Override the OnPageStart method within a class inheriting from lynx::pub::LynxViewClient to handle page load events on Desktop.

```cpp
class YourViewClient : public lynx::pub::LynxViewClient {
 public:
  void OnPageStart(const char* url) override;
};
```

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

### Hello World Component Example

Source: https://lynxjs.org/4.0/guide/start/quick-start

A basic React component for Lynx demonstrating state management and event handling.

```tsx
import { useCallback, useEffect, useState } from "@lynx-js/react";

import "./App.css";
import arrow from "./assets/arrow.png";
import lynxLogo from "./assets/lynx-logo.png";
import reactLynxLogo from "./assets/react-logo.png";

export function App() {
  const [alterLogo, setAlterLogo] = useState(false);

  useEffect(() => {
    console.info("Hello, ReactLynx");
  }, []);

  const onTap = useCallback(() => {
    "background-only";
    setAlterLogo(!alterLogo);
  }, [alterLogo]);

  return (
    <page>
      <view className="Background" />
      <view className="App">
        <view className="Banner">
          <view className="Logo" bindtap={onTap}>
            {alterLogo
              ? <image src={reactLynxLogo} className="Logo--react" />
              : <image src={lynxLogo} className="Logo--lynx" />}
          </view>
          <text className="Title">React</text>
          <text className="Subtitle">on Lynx</text>
        </view>
        <view className="Content">
          <image src={arrow} className="Arrow" />
          <text className="Description">Tap the logo and have fun!</text>
          <text className="Hint">
            Edit<text style={{ fontStyle: "italic", color: "rgba(255, 255, 255, 0.85)" }}>{" src/App.tsx "}</text>
            to see updates!
          </text>
        </view>
        <view style={{ flex: 1 }}></view>
      </view>
    </page>
  );
}
```

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

### Install lynx-ui skill

Source: https://lynxjs.org/4.0/ai/skills/lynx-ui.html

Command to install the lynx-ui skill for coding agents.

```bash
npx skills add lynx-community/skills -s lynx-ui
```

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

### Navigate to project directory

Source: https://lynxjs.org/4.0/guide/start/integrate-with-existing-apps.html?platform=ios

Command to enter the newly created web project directory.

```bash
cd <web-project-name>
```

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

### Create Lynx Start Timestamp

Source: https://lynxjs.org/4.0/api/lynx-api/performance-api/performance-entry/load-bundle-entry

Represents the start time of creating the LynxView.

```typescript
createLynxStart: number;
```

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

### Example Usage of __SetConfig

Source: https://lynxjs.org/4.0/api/engine/element-api/__SetConfig

Demonstrates how to create an element and apply a configuration object in the main thread.

```xml
<view src="xxx" bindtap="onTap" />
```

```javascript
// main-thread.js
let element = __CreateElement('view', 0, {});
__SetAttribute(element, 'src', 'xx');

__SetConfig(element, { anyConfig: {} });
```

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

### Usage Example

Source: https://lynxjs.org/4.0/api/engine/element-api/__SetAttribute

Demonstrates how to create an element and set its attributes using __SetAttribute.

```xml
<view src="xxx" />
```

```javascript
// main-thread.js
let element = __CreateElement('view', 0, {});
__SetAttribute(element, 'src', 'xx');
```

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

### Container Initialization Start Timestamp

Source: https://lynxjs.org/4.0/api/lynx-api/performance-api/performance-entry/load-bundle-entry

Represents the start time of container initialization.

```typescript
containerInitStart?: number;
```

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

### CSS Selector Examples

Source: https://lynxjs.org/4.0/api/lynx-api/selector-query/selector-query-select

Examples of various CSS selectors supported by the select method.

```javascript
// '#my-id'
<view id="my-id" />
```

```javascript
// '.class1'
<view className="class1" />
```

```javascript
// 'view'
<view />
```

```javascript
// '[src]'
// '[src=xxx]'
// '[data-x]'
// '[data-x=xxx]'
<image src="xxx" data-x="xxx" />
```

```javascript
// 'image#my-id[src=xxx].class1.class2'
<image id="my-id" className="class1 class2" src="xxx" data-x="xxx" />
```

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

### inset-inline-start Syntax Examples

Source: https://lynxjs.org/4.0/api/css/properties/inset-inline-start

Common syntax patterns for defining inset-inline-start using lengths, percentages, keywords, and calculations.

```css
/* <length> values */
inset-inline-start: 3px;
inset-inline-start: 2rpx;
inset-inline-start: 2.4em;
inset-inline-start: 3rem;

inset-inline-start: 10%;

/* Keyword value */
inset-inline-start: auto;

/* calc */
inset-inline-start: calc(1px + 1px);
```

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

### Frontend Tag Example

Source: https://lynxjs.org/4.0/api/engine/element-api/__CreateElement

An example of a standard input tag that can be processed into a render directive.

```html
<input />
```

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

### CSS background-size Syntax Examples

Source: https://lynxjs.org/4.0/api/css/properties/background-size

Demonstrates various ways to define background-size using keywords, percentages, and length units.

```css
background-size: contain;

background-size: 50%;
background-size: 3em;

background-size: auto 1em;
background-size: 50% 25%;
```

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

### Install Lynx Tailwind Preset

Source: https://lynxjs.org/4.0/rspeedy/styling

Install the @lynx-js/tailwind-preset package to ensure compatibility with Lynx.

```bash
npm install -D @lynx-js/tailwind-preset
```

```bash
yarn add -D @lynx-js/tailwind-preset
```

```bash
pnpm add -D @lynx-js/tailwind-preset
```

```bash
bun add -D @lynx-js/tailwind-preset
```

```bash
deno add -D npm:@lynx-js/tailwind-preset
```

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

### Example usage of __AddConfig

Source: https://lynxjs.org/4.0/api/engine/element-api/__AddConfig

Demonstrates creating an element and adding a custom configuration key to it.

```html
<view src="xxx" bindtap="onTap" />
```

```javascript
// main-thread.js
let element = __CreateElement('view', 0, {});
__SetAttribute(element, 'src', 'xx');

__AddConfig(element, 'anyConfig', {});
```

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

### Install Stylus Plugin

Source: https://lynxjs.org/4.0/rspeedy/styling

Install the @rsbuild/plugin-stylus package using your preferred package manager.

```bash
npm install -D @rsbuild/plugin-stylus
```

```bash
yarn add -D @rsbuild/plugin-stylus
```

```bash
pnpm add -D @rsbuild/plugin-stylus
```

```bash
bun add -D @rsbuild/plugin-stylus
```

```bash
deno add -D npm:@rsbuild/plugin-stylus
```

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

### Defining a catalog with components and functions

Source: https://lynxjs.org/4.0/api/genui/a2ui/functions/defineCatalog

Example showing how to register components, manifests, and functions into a catalog.

```typescript
import { Text, Button } from '@lynx-js/genui/a2ui';
import { defineCatalog, defineFunction } from '@lynx-js/genui/a2ui';
import { required } from '@lynx-js/genui/a2ui/functions';
import textManifest from '@lynx-js/genui/a2ui/catalog/Text/catalog.json'
  with { type: 'json' };

const catalog = defineCatalog([
  [Text, textManifest],
  Button,
  defineFunction(required),
]);
```

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

### Install Less Plugin

Source: https://lynxjs.org/4.0/rspeedy/styling

Install the @rsbuild/plugin-less package using your preferred package manager.

```bash
npm install -D @rsbuild/plugin-less
```

```bash
yarn add -D @rsbuild/plugin-less
```

```bash
pnpm add -D @rsbuild/plugin-less
```

```bash
bun add -D @rsbuild/plugin-less
```

```bash
deno add -D npm:@rsbuild/plugin-less
```

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

### Install Sass Plugin

Source: https://lynxjs.org/4.0/rspeedy/styling

Install the @rsbuild/plugin-sass package using your preferred package manager.

```bash
npm install -D @rsbuild/plugin-sass
```

```bash
yarn add -D @rsbuild/plugin-sass
```

```bash
pnpm add -D @rsbuild/plugin-sass
```

```bash
bun add -D @rsbuild/plugin-sass
```

```bash
deno add -D npm:@rsbuild/plugin-sass
```

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

### Install Rsdoctor plugin

Source: https://lynxjs.org/4.0/rspeedy/use-rsdoctor

Install the @rsdoctor/rspack-plugin package using your preferred package manager.

```bash
npm add @rsdoctor/rspack-plugin -D
```

```bash
yarn add @rsdoctor/rspack-plugin -D
```

```bash
pnpm add @rsdoctor/rspack-plugin -D
```

```bash
bun add @rsdoctor/rspack-plugin -D
```

```bash
deno add npm:@rsdoctor/rspack-plugin -D
```

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

### Install Jotai

Source: https://lynxjs.org/4.0/react/state-management/jotai

Commands to install the Jotai package using various package managers.

```bash
npm install jotai
```

```bash
yarn add jotai
```

```bash
pnpm add jotai
```

```bash
bun add jotai
```

```bash
deno add npm:jotai
```

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

### Example Output Directory Structure

Source: https://lynxjs.org/4.0/rspeedy/external-bundle

The expected output directory structure after a successful build.

```text
├── dist-external-bundle
│   └── comp-lib.template.js
```

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

### Install Zustand

Source: https://lynxjs.org/4.0/react/state-management/zustand

Commands to install the Zustand library using different package managers.

```bash
npm install zustand
```

```bash
yarn add zustand
```

```bash
pnpm add zustand
```

```bash
bun add zustand
```

```bash
deno add npm:zustand
```

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

### Initialize a ThemeContext

Source: https://lynxjs.org/4.0/api/react/Function.createContext.html

Demonstrates importing createContext and initializing a context with a string default value.

```javascript
import { createContext } from 'react';

const ThemeContext = createContext('light');
```

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

### Usage examples for profileMark()

Source: https://lynxjs.org/4.0/api/lynx-api/lynx/lynx-performance/profile-mark

Demonstrates various ways to invoke profileMark, including simple name-only calls, custom arguments, and flow ID integration.

```javascript
// Mark an instant event with only a name
lynx.performance.profileMark('FetchStarted');

// Mark an instant event with custom arguments
lynx.performance.profileMark('FetchStarted', {
  args: { status: 'initiated' },
});

// Mark an instant event with a flow id
const flowId = lynx.performance.profileFlowId();
lynx.performance.profileMark('ActionCheckpoint', { flowId });

// Mark an instant event with both arguments and flow id
lynx.performance.profileMark('ProcessMidpoint', {
  args: { step: 'middle' },
  flowId,
});
```

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

### Using GlobalPropsProvider in an Application

Source: https://lynxjs.org/4.0/api/react/Function.GlobalPropsProvider.html

Example showing how to wrap an application with GlobalPropsProvider and consume properties using GlobalPropsConsumer.

```javascript
import { root } from "@lynx-js/react"

function App() {
  return (
    <GlobalPropsConsumer children={(globalProps) => <view>...</view>}/>
  )
}

root.render(
  <GlobalPropsProvider>
     <App/>
  </GlobalPropsProvider>
);
```

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

### CSS Syntax Examples

Source: https://lynxjs.org/4.0/api/css/properties/border-top

Illustrates the shorthand syntax and how unspecified values default to standard defaults.

```css
.border {
  border-top: 1px;
}
```

```css
.border {
  border-top: 1px solid black;
}
```

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

### Install Library Package

Source: https://lynxjs.org/4.0/guide/autolink

Command to install a Lynx library package via npm.

```bash
npm install @example/lynx-button
```

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

### Prepare Template Start Timestamp

Source: https://lynxjs.org/4.0/api/lynx-api/performance-api/performance-entry/load-bundle-entry

Represents the time when the container starts preparing the TemplateBundle.

```typescript
prepareTemplateStart?: number;
```

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

### Define padding-inline-start syntax

Source: https://lynxjs.org/4.0/api/css/properties/padding-inline-start

Examples of valid length and percentage values for the padding-inline-start property.

```css
/* <length> values */
padding-inline-start: 0.5em;
padding-inline-start: 0px;
padding-inline-start: 2rpx;

/* <percentage> value */
padding-inline-start: 10%;
```

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

### Implement LynxHttpService in Desktop C++

Source: https://lynxjs.org/4.0/api/lynx-native-api/lynx-service

Create a concrete service class by overriding the appropriate abstract entrypoints.

```cpp
#include "lynx/platform/embedder/public/lynx_http_service.h"

class YourHttpService : public lynx::pub::LynxHttpService {
 public:
  void Request(std::shared_ptr<lynx::pub::LynxHttpRequest> request,
               std::shared_ptr<lynx::pub::LynxHttpResponse> response) override {
    response->SetStatusCode(200);
    response->SetStatusText("OK");
    response->Complete();
  }
};
```

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

### Text Overflow and Alignment Examples

Source: https://lynxjs.org/4.0/api/elements/built-in/text.html

Provides examples for text overflow handling and alignment configurations.

```tsx
// Copyright 2024 The Lynx Authors. All rights reserved.
// Licensed under the Apache License Version 2.0 that can be found in the
// LICENSE file in the root directory of this source tree.

import { root } from "@lynx-js/react";
import "./index.scss";
import ExclamationCircle from "@assets/image/exclamationcircle.png?inline";

const AlignContent = () => {
  const examples = [
    { type: "text-overflow" },
    { type: "text-vertical-align" },
    { type: "text-decoration" },
    { type: "text-shadow" },
    { type: "text-direction-rtl" },
  ];

  const TextOverflowExample = () => {
    return (
      <view className="fixed_area">
        <text
          style={{
            fontSize: "20px",
          }}
        >
          text overflow:
        </text>
        <view
          style={{
            width: "100%",
            flexDirection: "column" as const,
          }}
        >
          <text className="item clip" text-maxline="1">
            Hello World Hello World Hello World
          </text>
          <text className="item ellipsis" text-maxline="1">
            Hello World Hello World Hello World
          </text>
        </view>
      </view>
    );
  };
```

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

### Frontend Tag Compilation Example

Source: https://lynxjs.org/4.0/api/engine/element-api/__SetInlineStyles

Example of how a view tag with style attributes is represented in the framework.

```html
<view
  src="xxx"
  style={{ top: '10px', left: '10px', right: '10px', bottom: '10px' }}
/>
```

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

### Retrieve Element Configuration

Source: https://lynxjs.org/4.0/api/engine/element-api/__GetConfig

Demonstrates how to create an element, set a configuration, and retrieve it using __GetConfig.

```javascript
// main-thread.js
let element = __CreateElement('view', 0, {});
__SetConfig(element, { anyConfig: {} });

let listener = __GetConfig(element);
```

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

### Frontend Render Directive Example

Source: https://lynxjs.org/4.0/api/engine/element-api/__AddEvent

Example of how a frontend framework generates a render directive for an event.

```xml
<view src="xxx" bindtap="onTap" />
```

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

### Install ReactLynx Best Practices Skill

Source: https://lynxjs.org/4.0/ai/skills/reactlynx-best-practices

Command to add the ReactLynx best practices skill to a project for automated coding agent support.

```bash
npx skills add lynx-community/skills -s reactlynx-best-practices
```

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

### Fetch usage example

Source: https://lynxjs.org/4.0/api/lynx-api/global/fetch

Demonstrates creating a Request object and fetching it, followed by parsing the JSON response.

```javascript
const request = new Request('https://jsonplaceholder.typicode.com/todos/1');
const response = await fetch(request);
console.log(await response.json());
```

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

### Radial Gradient Examples

Source: https://lynxjs.org/4.0/api/css/data-type/gradient

Examples of radial-gradient() usage with different shapes, positions, and color stops.

```css
radial-gradient(#e66465, #9198e5);

radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);

radial-gradient(circle at 100%, #333, #333 50%, #eee 75%, #333 75%);

radial-gradient(ellipse at top, #e66465, transparent);
```

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

### Retrieve Element Classes

Source: https://lynxjs.org/4.0/api/engine/element-api/__GetClasses

Example showing how to create an element, set its classes, and retrieve them using __GetClasses.

```javascript
// main-thread.js
let element = __CreateElement('view', 0, {});
__SetAttribute(element, 'src', 'xx');
__SetClasses(element, 'A B C');

let classNames = __GetClasses(element);
```

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

### Linear Gradient Examples

Source: https://lynxjs.org/4.0/api/css/data-type/gradient

Examples of linear-gradient() usage with various angles, directions, and color stops.

```css
/* A gradient tilted 45 degrees, starting blue and finishing red */
linear-gradient(45deg, blue, red);
/* A gradient going from the bottom right to the top left corner, starting blue and finishing red */
linear-gradient(to left top, blue, red);
/* Color stop: A gradient going from the bottom to top, starting blue, turning green at 40% of its length, and finishing red */
linear-gradient(0deg, blue, green 40%, red);
```

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

### Display rspeedy build help

Source: https://lynxjs.org/4.0/rspeedy/cli

View the available options and usage instructions for the production build command.

```bash
➜ rspeedy build --help

Usage: rspeedy build [options]

Build the project in production mode

Options:
  --environment <name...>  specify the name of environment to build
  --watch                  Enable watch mode to automatically rebuild on file changes
  -c --config <config>     specify the configuration file, can be a relative or absolute path
  --env-mode <mode>        specify the env mode to load the .env.[mode] file
  --no-env                 disable loading `.env` files"
  -m --mode <mode>         specify the build mode, can be `development`, `production` or `none`
  -h, --help               display help for command
```

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

### Install Rspeedy globally

Source: https://lynxjs.org/4.0/rspeedy/cli

Use this command to install the Rspeedy CLI globally to your shell PATH.

```bash
# Install the Rspeedy globally
npm install --global @lynx-js/rspeedy
```

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

### CSS offset-path Syntax Examples

Source: https://lynxjs.org/4.0/api/css/properties/offset-path

Demonstrates various basic shape functions used to define an offset path.

```css
/* Keyword values */
offset-path: '';

/* <basic-shape> values */
offset-path: inset(30px 50px 45px 20px round 24px 8px 32px 14px);
offset-path: circle(50px at 0 100px);
offset-path: path(
  'M50,10 L90.45,34.55 L73.39,80.45 L26.61,80.45 L9.55,34.55 Z'
);
/* iOS: `ellipse()` is not supported */
offset-path: ellipse(70px 45px at 90px 70px);
```

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

### Install React Compiler runtime dependency

Source: https://lynxjs.org/4.0/react/react-compiler

Install the required runtime package for the React Compiler.

```npm
npm install react-compiler-runtime@rc
```

```yarn
yarn add react-compiler-runtime@rc
```

```pnpm
pnpm add react-compiler-runtime@rc
```

```bun
bun add react-compiler-runtime@rc
```

```deno
deno add npm:react-compiler-runtime@rc
```

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

### border-width syntax example

Source: https://lynxjs.org/4.0/api/css/properties/border-width

Shows the basic shorthand syntax for defining border widths.

```css
border-width: thin medium thick 10px;
```

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

### Install Project Dependencies

Source: https://lynxjs.org/4.0/guide/start/quick-start

Install required NPM dependencies using your preferred package manager.

```npm
npm install
```

```yarn
yarn install
```

```pnpm
pnpm install
```

```bun
bun install
```

```deno
deno install
```

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

### Load Template on HarmonyOS

Source: https://lynxjs.org/4.0/api/lynx-native-api/lynx-view/load-template

Example of initializing a LynxView in HarmonyOS using URL, buffer, and metadata.

```typescript
@Entry
@Component
struct Index {
  private url: string = 'playground/main.lynx.bundle';
  private buffer: ArrayBuffer = getTemplateBuffer();
  private metaData = new MetaData(
    new TemplateData('{"text":"TD"}'),
    new TemplateData({ "theme": "Light" }));

  build() {
    Column() {
      LynxView({
        url: this.url,
        buffer: this.buffer,
        metadata: this.metaData,
      }).width('100%').height('100%');
    }
    .size({ width: '100%', height: '100%' })
  }
}
```

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

### Install i18next-cli

Source: https://lynxjs.org/4.0/guide/inclusion/internationalization

Commands to install the i18next-cli development dependency using various package managers.

```bash
npm install i18next-cli -D
```

```bash
yarn add i18next-cli -D
```

```bash
pnpm add i18next-cli -D
```

```bash
bun add i18next-cli -D
```

```bash
deno add npm:i18next-cli -D
```

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

### Install i18next

Source: https://lynxjs.org/4.0/guide/inclusion/internationalization

Commands to install i18next version 23.16.8 using various package managers.

```bash
npm install i18next@^23.16.8
```

```bash
yarn add i18next@^23.16.8
```

```bash
pnpm add i18next@^23.16.8
```

```bash
bun add i18next@^23.16.8
```

```bash
deno add npm:i18next@^23.16.8
```

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

### grid-row-start Syntax Examples

Source: https://lynxjs.org/4.0/api/css/properties/grid-row-start

Common syntax patterns for defining grid-row-start values.

```css
/* <number> values */
grid-row-start: 1;
grid-row-start: 2;

/* span  <number> values*/
grid-row-start: span 1;
```

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

### Frontend tag compilation example

Source: https://lynxjs.org/4.0/api/engine/element-api/__SetClasses

Example of a frontend view tag that would be compiled into render instructions.

```html
<view src="xxx" class="A B C" />
```

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

### lynx.performance.createObserver

Source: https://lynxjs.org/4.0/api/lynx-api/performance-api/performance-entry/pipeline-entry

Demonstrates how to create a performance observer and listen for 'pipeline' entry types to capture PipelineEntry data.

```APIDOC
## lynx.performance.createObserver

### Description
Creates a performance observer to monitor performance entries. By observing the 'pipeline' entry type, developers can capture PipelineEntry data generated during the Lynx rendering process.

### Usage
```typescript
const observer = lynx.performance.createObserver((entry: PerformanceEntry) => {
  if (entry.entryType == "pipeline") {
    const pipelineEntry = entry as PipelineEntry;
    // Access pipelineEntry properties
  }
});

observer.observe(["pipeline"]);
```

### PipelineEntry Properties
- **identifier** (string) - The identifier associated with the pipeline, corresponding to the `__lynx_timing_flag` attribute on a view.
```

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

### Text Content Examples

Source: https://lynxjs.org/4.0/api/css/properties/direction

Examples showing how text content influences alignment when using the normal value.

```html
<text> abc 1234 </text>
```

```html
<text> العاشر ليونيكود 1234</text>
```

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

### Syntax for profileStart()

Source: https://lynxjs.org/4.0/api/lynx-api/lynx/lynx-performance/profile-start

Defines the function signature for starting a trace event.

```typescript
profileStart(name: string, option?: { flowId: number, arg?:  Record<string, string>}): void;
```

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

### Initialize a new Lynx project

Source: https://lynxjs.org/4.0/guide/start/quick-start

Run the appropriate command for your package manager to scaffold a new project with Rspeedy.

```npm
npm create rspeedy@latest
```

```yarn
yarn create rspeedy
```

```pnpm
pnpm create rspeedy@latest
```

```bun
bun create rspeedy@latest
```

```deno
deno init --npm rspeedy@latest
```

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

### Install TanStack Query Dependencies

Source: https://lynxjs.org/4.0/react/data-fetching

Commands to install the @tanstack/react-query package using various package managers.

```bash
npm install @tanstack/react-query
```

```bash
yarn add @tanstack/react-query
```

```bash
pnpm add @tanstack/react-query
```

```bash
bun add @tanstack/react-query
```

```bash
deno add npm:@tanstack/react-query
```

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

### Configure Routes

Source: https://lynxjs.org/4.0/react/routing/react-router

Setup routing using MemoryRouter, Routes, and Route components.

```javascript
import { root } from '@lynx-js/react';
import { MemoryRouter, Routes, Route } from 'react-router';

import { App } from './App.jsx';
import { Home } from './Home.jsx';

root.render(
  <MemoryRouter>
    <Routes>
      <Route path="/" element={<App />} />
      <Route path="/home" element={<Home />} />
    </Routes>
  </MemoryRouter>,
);

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

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

### Install translation dedupe package

Source: https://lynxjs.org/4.0/guide/inclusion/internationalization

Install the deduplication package to avoid bundling translations multiple times.

```bash
npm install @lynx-js/i18next-translation-dedupe -D
```

```bash
yarn add @lynx-js/i18next-translation-dedupe -D
```

```bash
pnpm add @lynx-js/i18next-translation-dedupe -D
```

```bash
bun add @lynx-js/i18next-translation-dedupe -D
```

```bash
deno add npm:@lynx-js/i18next-translation-dedupe -D
```

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

### Install Lynx Agent Skills

Source: https://lynxjs.org/4.0/blog/lynx-3-7.html

Use this command to install specific agent skills into your Lynx project.

```bash
npx skills add lynx-community/skills -s <skill-name>
```
Tokens:
Raw