open-index/open-npm huggingface dataset:
npm package: @lynx-js/web-constants
Description: A common dependency library that defines constants for the Lynx3 Web Platform.
Latest version: 0.19.9

# @lynx-js/web-constants

A common dependency library that defines constants for the Lynx3 Web Platform.

## Usage

```javascript
import  { cardIdAttribute, lynxViewRootDomId }'@lynx-js/web-constants';
```
npm package: @lynx-js/web-constants-canary
Description: A common dependency library that defines constants for the Lynx3 Web Platform.
Latest version: 0.19.9

# @lynx-js/web-constants

A common dependency library that defines constants for the Lynx3 Web Platform.

## Usage

```javascript
import  { cardIdAttribute, lynxViewRootDomId }'@lynx-js/web-constants';
```
npm package: @lynx-js/web-core
Description: This is an internal experimental package, do not use
Latest version: 0.20.1

# @lynx-js/web-core

Lynx3 Web Platform runtime core

## Usage

### use an open CDN

#### unpkg

```html
<script src="https://app.unpkg.com/@lynx-js/web-core/files/dist/client_prod/static/js/client.js" type="module"></script>
<link rel="stylesheet" href="https://app.unpkg.com/@lynx-js/web-core/files/dist/client_prod/static/css/client.css">
```

#### jsdelivr

```html
<script src="https://cdn.jsdelivr.net/npm/@lynx-js/web-core/dist/client_prod/static/js/client.js" type="module"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lynx-js/web-core/dist/client_prod/static/css/client.css">
```

### bundle with your project

```javascript
import '@lynx-js/web-core/client';

document.body.innerHTML = `
<lynx-view 
  style="height:100vh; width:100vw;" 
  url="http://localhost:3000/main/main-thread.js"
>
</lynx-view>`;
```

## Document

See our website for more information.
npm package: @lynx-js/web-core-canary
Description: This is an internal experimental package, do not use
Latest version: 0.20.1

# @lynx-js/web-core

Lynx3 Web Platform runtime core

## Usage

### use an open CDN

#### unpkg

```html
<script src="https://app.unpkg.com/@lynx-js/web-core/files/dist/client_prod/static/js/client.js" type="module"></script>
<link rel="stylesheet" href="https://app.unpkg.com/@lynx-js/web-core/files/dist/client_prod/static/css/client.css">
```

#### jsdelivr

```html
<script src="https://cdn.jsdelivr.net/npm/@lynx-js/web-core/dist/client_prod/static/js/client.js" type="module"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lynx-js/web-core/dist/client_prod/static/css/client.css">
```

### bundle with your project

```javascript
import '@lynx-js/web-core/client';

document.body.innerHTML = `
<lynx-view 
  style="height:100vh; width:100vw;" 
  url="http://localhost:3000/main/main-thread.js"
>
</lynx-view>`;
```

## Document

See our website for more information.
npm package: @lynx-js/web-elements
Description: It provides the custom-element implementation of Lynx Elements in Web.
Latest version: 0.12.0

# @lynx-js/web-elements

It provides the custom-element implementation of Lynx Elements in Web.

So far, support compared to Lynx Elements on the client:

| Elements       | Whether support | Details      |
| -------------- | --------------- | ------------ |
| Elements       |                 |              |
| image          | ✅              | Full Support |
| list           | ✅              | Full Support |
| scroll-view    | ✅              | Full Support |
| text           | ✅              | Full Support |
| view           | ✅              | Full Support |
| X-Elements     |                 |              |
| svg            | ✅              | Full Support |
| x-blur-view    | ✅              | Full Support |
| x-input        | ✅              | Full Support |
| x-textarea     | ✅              | Full Support |
| x-swiper       | ✅              | Full Support |
| x-viewpager-ng | ✅              | Full Support |
| x-foldview-ng  | ✅              | Full Support |
| x-refresh-view | ✅              | Full Support |
| x-overlay-ng   | ✅              | Full Support |
| x-audio-tt     | ✅              | Full Support |

## Usage

```javascript
import '@lynx-js/web-elements/all';
import '@lynx-js/web-elements/index.css';

document.body.innerHTML = `
<x-text style="font-size: 24px;font-weight: bold">
  Hello lynx.
</x-text>
`;
```

## Document

See our website for more information.
npm package: @lynx-js/web-elements-canary
Description: It provides the custom-element implementation of Lynx Elements in Web.
Latest version: 0.12.0

# @lynx-js/web-elements

It provides the custom-element implementation of Lynx Elements in Web.

So far, support compared to Lynx Elements on the client:

| Elements       | Whether support | Details      |
| -------------- | --------------- | ------------ |
| Elements       |                 |              |
| image          | ✅              | Full Support |
| list           | ✅              | Full Support |
| scroll-view    | ✅              | Full Support |
| text           | ✅              | Full Support |
| view           | ✅              | Full Support |
| X-Elements     |                 |              |
| svg            | ✅              | Full Support |
| x-blur-view    | ✅              | Full Support |
| x-input        | ✅              | Full Support |
| x-textarea     | ✅              | Full Support |
| x-swiper       | ✅              | Full Support |
| x-viewpager-ng | ✅              | Full Support |
| x-foldview-ng  | ✅              | Full Support |
| x-refresh-view | ✅              | Full Support |
| x-overlay-ng   | ✅              | Full Support |
| x-audio-tt     | ✅              | Full Support |

## Usage

```javascript
import '@lynx-js/web-elements/all';
import '@lynx-js/web-elements/index.css';

document.body.innerHTML = `
<x-text style="font-size: 24px;font-weight: bold">
  Hello lynx.
</x-text>
`;
```

## Document

See our website for more information.
npm package: @lynx-js/web-elements-compat
Description: A compatibility plugin for linear layout and color.
Latest version: 0.2.4

# @lynx-js/web-elements-compat

A compatibility plugin for linear layout and color.

If you want your product to run on chrome < 118, safari < 18 browsers, then you need to use it.

## Usage

```javascript
import '@lynx-js/web-elements-compat/LinearContainer';
```
npm package: @lynx-js/web-elements-compat-canary
Description: A compatibility plugin for linear layout and color.
Latest version: 0.2.5-canary-20251226-f0317a32

# @lynx-js/web-elements-compat

A compatibility plugin for linear layout and color.

If you want your product to run on chrome < 118, safari < 18 browsers, then you need to use it.

## Usage

```javascript
import '@lynx-js/web-elements-compat/LinearContainer';
```
npm package: @lynx-js/web-elements-template
Description: It provides the custom-element implementation of Lynx Elements in Web.
Latest version: 0.9.0

# @lynx-js/web-elements

It provides the custom-element implementation of Lynx Elements in Web.

So far, support compared to Lynx Elements on the client:

| Elements       | Whether support | Details      |
| -------------- | --------------- | ------------ |
| Elements       |                 |              |
| image          | ✅              | Full Support |
| list           | ✅              | Full Support |
| scroll-view    | ✅              | Full Support |
| text           | ✅              | Full Support |
| view           | ✅              | Full Support |
| X-Elements     |                 |              |
| svg            | ✅              | Full Support |
| x-blur-view    | ✅              | Full Support |
| x-input        | ✅              | Full Support |
| x-textarea     | ✅              | Full Support |
| x-swiper       | ✅              | Full Support |
| x-viewpager-ng | ✅              | Full Support |
| x-foldview-ng  | ✅              | Full Support |
| x-refresh-view | ✅              | Full Support |
| x-overlay-ng   | ✅              | Full Support |
| x-audio-tt     | ✅              | Full Support |

## Usage

```javascript
import '@lynx-js/web-elements/all';
import '@lynx-js/web-elements/index.css';

document.body.innerHTML = `
<x-text style="font-size: 24px;font-weight: bold">
  Hello lynx.
</x-text>
`;
```

## Document

See our website for more information.
npm package: @lynx-js/web-elements-template-canary
Description: It provides the custom-element implementation of Lynx Elements in Web.
Latest version: 0.9.1-canary-20251226-f0317a32

# @lynx-js/web-elements

It provides the custom-element implementation of Lynx Elements in Web.

So far, support compared to Lynx Elements on the client:

| Elements       | Whether support | Details      |
| -------------- | --------------- | ------------ |
| Elements       |                 |              |
| image          | ✅              | Full Support |
| list           | ✅              | Full Support |
| scroll-view    | ✅              | Full Support |
| text           | ✅              | Full Support |
| view           | ✅              | Full Support |
| X-Elements     |                 |              |
| svg            | ✅              | Full Support |
| x-blur-view    | ✅              | Full Support |
| x-input        | ✅              | Full Support |
| x-textarea     | ✅              | Full Support |
| x-swiper       | ✅              | Full Support |
| x-viewpager-ng | ✅              | Full Support |
| x-foldview-ng  | ✅              | Full Support |
| x-refresh-view | ✅              | Full Support |
| x-overlay-ng   | ✅              | Full Support |
| x-audio-tt     | ✅              | Full Support |

## Usage

```javascript
import '@lynx-js/web-elements/all';
import '@lynx-js/web-elements/index.css';

document.body.innerHTML = `
<x-text style="font-size: 24px;font-weight: bold">
  Hello lynx.
</x-text>
`;
```

## Document

See our website for more information.
npm package: @lynx-js/web-platform-rsbuild-plugin
Description: A rsbuild plugin for Web projects in Lynx Web Platform
Latest version: 0.1.2

# @lynx-js/web-platform-rsbuild-plugin

Lynx3 Web Platform rsbuild plugin

## Usage

```ts
import { pluginWebPlatform } from '@lynx-js/web-platform-rsbuild-plugin';
import { defineConfig } from '@rsbuild/core';

export default defineConfig({
  plugins: [pluginWebPlatform({
    // replace with your actual native-modules file path
    nativeModulesPath: path.resolve(__dirname, './index.native-modules.ts'),
    // replace with your actual napi-modules file path
    napiModulesPath: path.resolve(__dirname, './index.napi-modules.ts'),
  })],
});
```

## Options

```ts
{
  /**
   * Whether to polyfill the packages about Lynx Web Platform.
   *
   * If it is true, @lynx-js will be compiled and polyfills will be added.
   *
   * @default true
   */
  polyfill?: boolean;
  /**
   * The absolute path of the native-modules file.
   *
   * If you use it, you don't need to pass nativeModulesMap in the lynx-view tag, otherwise it will cause duplicate packaging.
   *
   * When enabled, nativeModules will be packaged directly into the worker chunk instead of being transferred through Blob.
   */
  nativeModulesPath?: string;
  /**
   * The absolute path of the native-modules file.
   *
   * If you use it, you don't need to pass napiModulesMap in the lynx-view tag, otherwise it will cause duplicate packaging.
   *
   * When enabled, napiModulesMap will be packaged directly into the worker chunk instead of being transferred through Blob.
   */
  napiModulesPath?: string;
}
```

### nativeModulesPath

`native-modules.ts` example:

```ts
// index.native-modules.ts
export default {
  CustomModule: function(NativeModules, NativeModulesCall) {
    return {
      async getColor(data, callback) {
        const color = await NativeModulesCall('getColor', data);
        callback(color);
      },
    };
  },
};
```

### napiModulesPath

`napi-modules.ts` example:

```ts
// index.napi-modules.ts
export default {
  custom_module: function(NapiModules, NapiModulesCall) {
    return {
      async test(name) {
        console.log('CustomModule', NapiModules, NapiModulesCall);
      },
    };
  },
};
```
npm package: @lynx-js/web-platform-rsbuild-plugin-canary
Description: A rsbuild plugin for Web projects in Lynx Web Platform
Latest version: 0.1.2

# @lynx-js/web-platform-rsbuild-plugin

Lynx3 Web Platform rsbuild plugin

## Usage

```ts
import { pluginWebPlatform } from '@lynx-js/web-platform-rsbuild-plugin';
import { defineConfig } from '@rsbuild/core';

export default defineConfig({
  plugins: [pluginWebPlatform({
    // replace with your actual native-modules file path
    nativeModulesPath: path.resolve(__dirname, './index.native-modules.ts'),
    // replace with your actual napi-modules file path
    napiModulesPath: path.resolve(__dirname, './index.napi-modules.ts'),
  })],
});
```

## Options

```ts
{
  /**
   * Whether to polyfill the packages about Lynx Web Platform.
   *
   * If it is true, @lynx-js will be compiled and polyfills will be added.
   *
   * @default true
   */
  polyfill?: boolean;
  /**
   * The absolute path of the native-modules file.
   *
   * If you use it, you don't need to pass nativeModulesMap in the lynx-view tag, otherwise it will cause duplicate packaging.
   *
   * When enabled, nativeModules will be packaged directly into the worker chunk instead of being transferred through Blob.
   */
  nativeModulesPath?: string;
  /**
   * The absolute path of the native-modules file.
   *
   * If you use it, you don't need to pass napiModulesMap in the lynx-view tag, otherwise it will cause duplicate packaging.
   *
   * When enabled, napiModulesMap will be packaged directly into the worker chunk instead of being transferred through Blob.
   */
  napiModulesPath?: string;
}
```

### nativeModulesPath

`native-modules.ts` example:

```ts
// index.native-modules.ts
export default {
  CustomModule: function(NativeModules, NativeModulesCall) {
    return {
      async getColor(data, callback) {
        const color = await NativeModulesCall('getColor', data);
        callback(color);
      },
    };
  },
};
```

### napiModulesPath

`napi-modules.ts` example:

```ts
// index.napi-modules.ts
export default {
  custom_module: function(NapiModules, NapiModulesCall) {
    return {
      async test(name) {
        console.log('CustomModule', NapiModules, NapiModulesCall);
      },
    };
  },
};
```
npm package: @lynx-js/webpack-dev-transport
Description: A webpack dev-server transport implementation for Lynx
Author: Qingyu Wang
Latest version: 0.2.0

<h2 align="center">@lynx-js/webpack-dev-transport</h2>

A webpack devServer transport implementation for Lynx.

### Client

The client transport can be used in the
[`devServer.client.webSocketTransport`](https://webpack.js.org/configuration/dev-server/#websockettransport)
configuration of `webpack.config.js`.

```js
// 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 { createRequire } from 'node:module';

const require = createRequire(import.meta.url);
export default {
  devServer: {
    client: {
      webSocketTransport: require.resolve(
        '@lynx-js/webpack-dev-transport/client',
      ),
    },
  },
};
```

### Server

The server transport can be used in the
[`devServer.webSocketServer`](https://webpack.js.org/configuration/dev-server/#devserverwebsocketserver)
configuration of `webpack.config.js`.

```js
// 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 { LynxTransportServer } from '@lynx-js/webpack-dev-transport';

export default {
  devServer: {
    allowedHosts: 'all', // disable host checks, which Lynx does not support
    webSocketServer: LynxTransportServer,
  },
};
```
npm package: @lynx-js/webpack-dev-transport-canary
Description: A webpack dev-server transport implementation for Lynx
Author: Qingyu Wang
Latest version: 0.2.0

<h2 align="center">@lynx-js/webpack-dev-transport</h2>

A webpack devServer transport implementation for Lynx.

### Client

The client transport can be used in the
[`devServer.client.webSocketTransport`](https://webpack.js.org/configuration/dev-server/#websockettransport)
configuration of `webpack.config.js`.

```js
// 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 { createRequire } from 'node:module';

const require = createRequire(import.meta.url);
export default {
  devServer: {
    client: {
      webSocketTransport: require.resolve(
        '@lynx-js/webpack-dev-transport/client',
      ),
    },
  },
};
```

### Server

The server transport can be used in the
[`devServer.webSocketServer`](https://webpack.js.org/configuration/dev-server/#devserverwebsocketserver)
configuration of `webpack.config.js`.

```js
// 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 { LynxTransportServer } from '@lynx-js/webpack-dev-transport';

export default {
  devServer: {
    allowedHosts: 'all', // disable host checks, which Lynx does not support
    webSocketServer: LynxTransportServer,
  },
};
```