### Start LynxJS Development Server
Source: https://lynxjs.org/rspeedy/start/quick-start
Starts the development server for your LynxJS project. This command compiles your code and makes it available for live preview on your device or simulator.
```bash
```
--------------------------------
### Create a New Lynx Project using create-rspeedy
Source: https://lynxjs.org/rspeedy/start/quick-start
This command initializes a new Lynx project using the create-rspeedy tool, which is a Rspack-based Lynx build tool. It automates the setup process, creating a project folder with the specified name. No external dependencies are explicitly mentioned beyond having a package manager like npm or yarn installed.
```bash
npx create-rspeedy@latest
```
--------------------------------
### Install NPM Dependencies (Package Manager)
Source: https://lynxjs.org/react/start/quick-start
Installs all necessary Node Package Manager (NPM) dependencies for your LynxJS project. This command is executed using your chosen package manager (npm, yarn, or pnpm).
```bash
npm install
yarn install
pnpm install
```
--------------------------------
### Example UI Update Placeholder (TypeScript/React)
Source: https://lynxjs.org/react/start/quick-start
This is a placeholder for the main application file where developers make changes to see live updates. It represents the entry point for UI modifications in a LynxJS application using React.
```typescript
// src/App.tsx
// Make your changes here to see live updates in the Lynx Explorer.
```
--------------------------------
### Install Lynx Explorer on Harmony Simulator
Source: https://lynxjs.org/guide/start/quick-start
Install the Lynx Explorer application package (.hap) onto a Harmony simulator using the hdc (Harmony Development Tools) command-line interface. This is for testing Lynx applications on Harmony OS.
```bash
hdc install lynx_explorer-default-unsigned.hap
```
--------------------------------
### Download and Extract Lynx Explorer for iOS Simulator (macOS Intel)
Source: https://lynxjs.org/guide/start/quick-start
Download the Lynx Explorer application bundle for macOS Intel architecture, extract it, and then install it onto the iOS simulator. Requires Xcode and an active iOS simulator.
```bash
mkdir -p LynxExplorer-x86_64.app/
tar -zxf LynxExplorer-x86_64.app.tar.gz -C LynxExplorer-x86_64.app/
```
--------------------------------
### Download and Extract Lynx Explorer for macOS Intel Simulator
Source: https://lynxjs.org/react/start/quick-start
Bash commands to download and extract the Lynx Explorer application for macOS Intel architecture, intended for use with the iOS simulator. Requires Xcode and the iOS simulator to be installed.
```bash
mkdir -p LynxExplorer-x86_64.app/
tar -zxf LynxExplorer-x86_64.app.tar.gz -C LynxExplorer-x86_64.app/
```
--------------------------------
### Download and Extract Lynx Explorer for iOS Simulator (macOS ARM64)
Source: https://lynxjs.org/guide/start/quick-start
Download the Lynx Explorer application bundle for macOS ARM64 architecture, extract it, and then install it onto the iOS simulator. Requires Xcode and an active iOS simulator.
```bash
mkdir -p LynxExplorer-arm64.app/
tar -zxf LynxExplorer-arm64.app.tar.gz -C LynxExplorer-arm64.app/
```
--------------------------------
### Start Development Server (Package Manager)
Source: https://lynxjs.org/react/start/quick-start
Starts the development server for your LynxJS project, enabling hot-reloading and live preview. This command is executed using your chosen package manager.
```bash
npm run dev
yarn dev
pnpm dev
```
--------------------------------
### Download and Extract Lynx Explorer for macOS ARM64 Simulator
Source: https://lynxjs.org/react/start/quick-start
Bash commands to download and extract the Lynx Explorer application for macOS ARM64 architecture, intended for use with the iOS simulator. Requires Xcode and the iOS simulator to be installed.
```bash
mkdir -p LynxExplorer-arm64.app/
tar -zxf LynxExplorer-arm64.app.tar.gz -C LynxExplorer-arm64.app/
```
--------------------------------
### Install NPM Dependencies with Package Manager
Source: https://lynxjs.org/rspeedy/start/quick-start
Installs all necessary Node.js package manager (NPM) dependencies for your LynxJS project. This command ensures all required libraries are available for development.
```bash
```
--------------------------------
### Example Usage: Generating AndroidHostPlatformTiming (Go)
Source: https://lynxjs.org/api/lynx-api/performance-api/host-platform-timing/android-host-platform-timing
This example demonstrates how to generate and obtain AndroidHostPlatformTiming data using the Go component within the Lynx framework. It specifies the performance-api example, the default bundle file, and the entry point for the host platform timing functionality.
```go
import {
Go
} from '@lynx';
```
--------------------------------
### Basic Textarea Usage Example (Go)
Source: https://lynxjs.org/api/elements/built-in/textarea
Demonstrates the fundamental implementation of the Textarea component for basic multi-line text input. It serves as a starting point for integrating the component into applications.
```go
go example("textarea")
defaultFile("src/base/index.tsx")
img("https://lf-lynx.tiktok-cdns.com/obj/lynx-artifacts-oss-sg/plugin/static/textarea_basic.PNG")
highlight("{13-21}")
```
--------------------------------
### Modify App Entry Point
Source: https://lynxjs.org/rspeedy/start/quick-start
This snippet indicates the file to edit for making your first UI changes. Modifying `src/App.tsx` will trigger automatic updates in the development preview.
```typescript
src/App.tsx
```
--------------------------------
### PipelineEntry Example Usage - TypeScript
Source: https://lynxjs.org/api/lynx-api/performance-api/performance-entry/pipeline-entry
Demonstrates how to generate and retrieve PipelineEntry instances. It utilizes the Go component for example integration, specifying default files and entry points for the performance API example.
```typescript
import { Go } from '@lynx';
```
--------------------------------
### LynxJS Go Component Example
Source: https://lynxjs.org/api/css/properties/font-optical-sizing
An example of the LynxJS 'Go' component, likely used for rendering or managing application components. This snippet references a specific example related to 'css-api' and the 'font-optical-sizing' CSS property, including default files and entry points.
```javascript
import { Go } from '@lynx';
```
--------------------------------
### TypeScript Example: Retrieving InitBackgroundRuntimeEntry
Source: https://lynxjs.org/api/lynx-api/performance-api/performance-entry/init-background-runtime-entry
This example demonstrates how to retrieve InitBackgroundRuntimeEntry instances. It utilizes the 'Go' component from '@lynx' and specifies the performance entry and bundle files.
```tsx
import { Go } from '@lynx';
```
--------------------------------
### Custom Wrapper Example - TypeScript
Source: https://lynxjs.org/api/reactlynx-testing-library/Interface.RenderOptions
Illustrates creating a custom render function that includes a common set of providers (e.g., ThemeProvider, TranslationProvider) via the wrapper option. This promotes reusable test setups.
```typescript
import { render } from '@lynx-js/react/testing-library'
import { ThemeProvider } from 'my-ui-lib'
import { TranslationProvider } from 'my-i18n-lib'
import defaultStrings from 'i18n/en-x-default'
const AllTheProviders = ({children}) => {
return (
{children}
)
}
const customRender = (ui, options) =>
render(ui, { wrapper: AllTheProviders, ...options })
// re-export everything
export * from '@lynx-js/react/testing-library'
// override render method
export { customRender as render }
```
--------------------------------
### LynxJS Example Component Integration
Source: https://lynxjs.org/api/css/properties/text-indent
Demonstrates how to import and use the Go component in a LynxJS application, specifying example type, default file, image, and entry points.
```jsx
import { Go } from '@lynx';
```
--------------------------------
### LynxJS Example Component Usage
Source: https://lynxjs.org/api/css/properties/left
An example of how the Go component might be used in a LynxJS application, likely to render a specific example related to CSS APIs. It includes properties for 'example', 'defaultFile', 'img', 'entry', and 'defaultEntryFile'.
```jsx
import { Go } from '@lynx';
```
--------------------------------
### LynxJS Go Component Example
Source: https://lynxjs.org/api/css/properties/font-size
Example of using the Go component in LynxJS, likely for rendering examples or application previews. It includes parameters for specifying example type, default files, images, and entry points.
```javascript
import { Go } from '@lynx';
```
--------------------------------
### Initialize LynxEnv in Android Application (Kotlin)
Source: https://lynxjs.org/guide/start/integrate-with-existing-apps
Provides a Kotlin example for initializing LynxEnv in an Android Application's onCreate method. It utilizes LynxEnv.inst().init() with the application context, ensuring proper setup before other Lynx Engine operations.
```kotlin
import com.lynx.tasm.LynxEnv
class YourApplication : Application() {
override fun onCreate() {
super.onCreate()
initLynxService()
initLynxEnv()
}
private fun initLynxEnv() {
LynxEnv.inst().init(
this,
null,
null,
null
)
}
}
```
--------------------------------
### Install Valtio with Package Manager
Source: https://lynxjs.org/react/state-management/valtio
Installs the Valtio library using the appropriate package manager. This is a prerequisite for using Valtio in your project. No specific input or output is detailed beyond the command execution.
```bash
npm install valtio
or
```
```bash
yarn add valtio
or
```
```bash
pnpm add valtio
```
--------------------------------
### PerformanceObserver Example (TypeScript)
Source: https://lynxjs.org/api/lynx-api/lynx/lynx-performance/create-observer
An example demonstrating how to create and use a PerformanceObserver to watch for specific performance entries like 'metric.fcp' and 'pipeline'. It imports necessary components from '@lynx'.
```typescript
import { Go } from '@lynx';
```
--------------------------------
### CSS background-size Examples
Source: https://lynxjs.org/api/css/properties/background-size
Demonstrates different ways to use the `background-size` CSS property, including keyword values, percentages, and lengths. These examples illustrate how to control the scaling of background images.
```css
background-size: contain;
background-size: 50%;
background-size: 3em;
background-size: auto 1em;
background-size: 50% 25%;
```
--------------------------------
### LynxJS Component for CSS API Example
Source: https://lynxjs.org/api/css/properties/position
Illustrates the usage of the 'Go' component from '@lynx' to showcase a CSS API example. This component likely helps in rendering or managing frontend components for demonstration purposes.
```jsx
import { Go } from '@lynx';
```
--------------------------------
### Get Pixel Ratio - iOS and Android
Source: https://lynxjs.org/api/lynx-api/global/system-info
Code examples for retrieving the screen's pixel ratio on iOS and Android. iOS uses Objective-C to get the scale from `UIScreen.mainScreen.scale`. Android retrieves the density from `DisplayMetrics`.
```objectivec
const CGFloat pixelRatio = [UIScreen mainScreen].scale;
```
```java
DisplayMetrics dm = context.getResources().getDisplayMetrics();
// highlight-next-line
float pixelRatio = dm.density;
```
--------------------------------
### Create Lynx Project with Rspeedy
Source: https://lynxjs.org/guide/start/quick-start
Use the create-rspeedy command-line tool to initialize a new LynxJS project. This tool sets up the project structure and necessary configurations automatically.
```bash
npm create rspeedy@latest
```
--------------------------------
### Get Bounding Client Rect of Text Node - React (TSX)
Source: https://lynxjs.org/api/lynx-api/nodes-ref
This example demonstrates how to use NodesRef to select a text node by its ID and invoke the 'boundingClientRect' method to get its position and size. It includes success and fail handlers for the asynchronous operation.
```tsx
class Page extends Component {
componentDidMount() {
lynx
.createSelectorQuery() // create SelectorQuery
.select('#my-id') // Specify the selector of the target node
.invoke({
// Specify the operation for the target node
method: 'boundingClientRect',
success: function (res) {
console.log(res);
},
fail: function (res) {
console.log(res.code, res.data);
},
})
.exec(); // Execute the query
}
render() {
return (
...
);
}
}
```
--------------------------------
### LynxJS Example Usage for CSS API
Source: https://lynxjs.org/api/css/properties/padding-right
Demonstrates how to import and use a 'Go' component from '@lynx' in a LynxJS application. This example specifically points to a CSS API usage, with configuration for default files and images.
```javascript
import { Go } from '@lynx';
```
--------------------------------
### Example: Get Bounding Client Rect (TSX)
Source: https://lynxjs.org/api/lynx-api/selector-query/selector-query-exec
This example demonstrates how to use SelectorQuery's exec() method in a TSX context to retrieve the bounding client rectangle of an element with the ID '#my-id'. It utilizes the 'boundingClientRect' method and includes success and fail callbacks.
```tsx
lynx
.createSelectorQuery()
.select('#my-id')
.invoke({
method: 'boundingClientRect',
success: function (res) {
console.log(res);
},
fail: function (res) {
console.log(res.code, res.data);
},
})
.exec();
```
--------------------------------
### Basic CSS Variable Syntax
Source: https://lynxjs.org/api/css/properties/css-variable
Provides examples of the basic syntax for declaring CSS variables, which are custom properties starting with two hyphens.
```css
--somekeyword: left;
--somecolor: #0000ff;
```
--------------------------------
### Navigate to Project Directory (Bash)
Source: https://lynxjs.org/react/start/quick-start
Changes the current directory to the root of your newly created LynxJS project. This is the first step after project generation to access project files.
```bash
cd
```
--------------------------------
### Input Component Methods Example
Source: https://lynxjs.org/api/elements/built-in/input
Illustrates how to programmatically control the `` component using its available methods, such as focusing, blurring, getting, setting the value, and setting the cursor position.
```typescript
import { Input } from '@lynx';
import { SelectorQuery } from '@lynx';
function App() {
const inputRef = SelectorQuery.create();
const focusInput = () => {
inputRef.select('.my-input').focus();
};
const getValue = () => {
inputRef.select('.my-input').getValue({
success: (res) => console.log('Current value:', res.value)
});
};
const setValue = () => {
inputRef.select('.my-input').setValue({ value: 'New text' });
};
return (
<>
);
}
```
--------------------------------
### Lynx.js Example: CSS align-content API
Source: https://lynxjs.org/api/css/properties/align-content
Demonstrates the usage of the align-content CSS property within a Lynx.js application using the Go component. It specifies the default file, image, and entry points for the example.
```html
```
--------------------------------
### Start Lynx Development Server
Source: https://lynxjs.org/react/start/integrate-with-existing-apps
Starts the development server for your Lynx.js application. This command compiles your project and makes it available at a local URL, typically `http://localhost:3000`, allowing you to view and test your application in real-time.
```bash
npm run dev
# or
yarn run dev
```
--------------------------------
### Import using TypeScript Path Alias
Source: https://lynxjs.org/rspeedy/typescript
Demonstrates how to import a module using a configured path alias. This example shows importing the 'get' function from a module aliased as '@common/request.js', which is equivalent to importing from the actual relative path './common/request.js'.
```js
import { get } from '@common/request.js'; // The same as './common/request.js'
```
--------------------------------
### Retrieve InitLynxviewEntry Example (TypeScript)
Source: https://lynxjs.org/api/lynx-api/performance-api/performance-entry/init-lynxview-entry
This code snippet demonstrates how to retrieve InitLynxviewEntry data using the Go component from the @lynx library. It specifies default files for bundling and entry points, and highlights specific lines for visual reference.
```tsx
import { Go } from '@lynx';
```
--------------------------------
### Register Android DevTool Service (Kotlin)
Source: https://lynxjs.org/guide/start/integrate-lynx-devtool
Register the `LynxDevToolService.INSTANCE` via the `LynxServiceCenter` within your `YourApplication.kt` file. This enables the DevTool service for your application's functionalities.
```kotlin
private fun initLynxService() {
// ...
```
--------------------------------
### Initialize and Configure Lynx Environment
Source: https://lynxjs.org/guide/start/integrate-lynx-devtool
This Java snippet demonstrates how to initialize the Lynx environment, enabling debug mode, the DevTool, and the LogBox. It requires a context object for initialization.
```java
public initLynxEnv() {
LynxEnv.initialize(this.context);
// Enable Lynx Debug
LynxEnv.enableLynxDebug(true);
// Enable Lynx DevTool
LynxEnv.enableDevtool(true);
// Enable Lynx LogBox
LynxEnv.setLogBoxEnabled(true);
}
```
--------------------------------
### Initialize Lynx Testing Environment
Source: https://lynxjs.org/api/lynx-testing-environment/index
Demonstrates the basic instantiation of the LynxTestingEnv class, which is the primary entry point for using the testing environment. This setup is crucial for any testing scenario involving the Lynx environment.
```javascript
import { LynxTestingEnv } from '@lynx-js/testing-environment';
const lynxTestingEnv = new LynxTestingEnv();
```
--------------------------------
### Basic Rendering Example with Wrapper Component
Source: https://lynxjs.org/react/reactlynx-testing-library
This snippet illustrates basic component rendering using the `render` function from ReactLynx Testing Library. It shows how to use a `wrapper` component and asserts the presence and structure of rendered elements, including inline styles.
```jsx
import '@testing-library/jest-dom';
import { expect, it } from 'vitest';
import { render } from '@lynx-js/react/testing-library';
it('basic render', () => {
const WrapperComponent = ({ children }) => (
{children}
);
const Comp = () => {
return ;
};
const { container, getByTestId } = render(, {
wrapper: WrapperComponent,
});
expect(getByTestId('wrapper')).toBeInTheDocument();
expect(container.firstChild).toMatchInlineSnapshot(
``
);
});
```
--------------------------------
### CSS Transition Syntax Examples
Source: https://lynxjs.org/api/css/properties/transition
Demonstrates various ways to use the 'transition' CSS property, including applying it to a single property with duration, delay, and easing functions, applying to multiple properties, and clearing transitions.
```css
/* Apply to 1 property */
/* property name | duration */
transition: background-color 4s;
/* property name | duration | delay */
transition: opacity 4s 1s;
/* property name | duration | easing function */
transition: background-color 4s ease-in-out;
/* property name | duration | easing function | delay */
transition: background-color 4s ease-in-out 1s;
/* Apply to 2 properties */
transition:
background-color 4s,
opacity 4s;
/* Apply to all changed properties */
transition: all 0.5s ease-out;
/* Clear all transition animation.*/
transition: none;
```
--------------------------------
### Register Android DevTool Service (Java)
Source: https://lynxjs.org/guide/start/integrate-lynx-devtool
In your `YourApplication.java` file, register the `LynxDevToolService.INSTANCE` with the `LynxServiceCenter`. This action makes the DevTool service available for use within your application.
```java
private void initLynxService() {
// ...
// register DevTool service
LynxServiceCenter.inst().registerService(LynxDevToolService.INSTANCE);
}
```
--------------------------------
### CSS Animation Delay Syntax Examples
Source: https://lynxjs.org/api/css/properties/animation-delay
Demonstrates the syntax for the CSS 'animation-delay' property. It specifies the time delay before an animation starts, accepting values in seconds or milliseconds. Lynx generally requires units for clarity and predictable behavior.
```css
animation-delay: 3s;
animation-delay: 2s, 4ms;
```
```css
/* default value: 0s */
animation-delay: