feat: add lynx frame examples

.changeset/tidy-pigs-shop.md

@@ -0,0 +1,5 @@
+---
+"@lynx-example/frame": minor
+---
+
+Feature: Add lynx frame example.

examples/frame/README.md

@@ -0,0 +1,21 @@
+## Rspeedy project
+
+This is a ReactLynx project bootstrapped with `create-rspeedy`.
+
+## Getting Started
+
+First, install the dependencies:
+
+```bash
+pnpm install
+```
+
+Then, run the development server:
+
+```bash
+pnpm run dev
+```
+
+Scan the QRCode in the terminal with your LynxExplorer App to see the result.
+
+You can start editing the page by modifying `src/App.tsx`. The page auto-updates as you edit the file.

examples/frame/lynx.config.ts

@@ -0,0 +1,22 @@
+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";
+
+export default defineConfig({
+  source: {
+    entry: {
+      frame: "./src/frame/index.tsx",
+      in_frame: "./src/in_frame/index.tsx",
+    },
+  },
+  plugins: [
+    pluginQRCode(),
+    pluginReactLynx(),
+    pluginTypeCheck(),
+  ],
+  output: {
+    assetPrefix: "https://lynxjs.org/lynx-examples/frame/dist",
+  },
+});

examples/frame/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@lynx-example/frame",
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "build": "rspeedy build",
+    "dev": "rspeedy dev",
+    "preview": "rspeedy preview"
+  },
+  "dependencies": {
+    "@lynx-js/react": "^0.112.5"
+  },
+  "devDependencies": {
+    "@lynx-js/preact-devtools": "^5.0.1-6664329",
+    "@lynx-js/qrcode-rsbuild-plugin": "^0.4.1",
+    "@lynx-js/react-rsbuild-plugin": "^0.10.13",
+    "@lynx-js/rspeedy": "^0.11.0",
+    "@lynx-js/types": "3.4.11",
+    "@rsbuild/plugin-type-check": "1.2.4",
+    "@types/react": "^18.3.23",
+    "typescript": "~5.9.2"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

examples/frame/src/frame/index.tsx

@@ -0,0 +1,30 @@
+// Copyright 2025 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 "@lynx-js/preact-devtools";
+import "@lynx-js/react/debug";
+import { root } from "@lynx-js/react";
+
+const App = () => {
+  return (
+    <view>
+      <text style={{ fontSize: "20px", color: "black", padding: "10px" }}>
+        Below is the inline text example in frame page.
+      </text>
+      {/* @ts-ignore */}
+      <frame
+        style={{ width: "100%", height: "300px", border: "3px solid red" }}
+        src="https://lynxjs.org/lynx-examples/text/dist/inline_text.lynx.bundle"
+      >
+        {/* @ts-ignore */}
+      </frame>
+    </view>
+  );
+};
+
+root.render(<App />);
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept();
+}

examples/frame/src/in_frame/index.tsx

@@ -0,0 +1,30 @@
+// Copyright 2025 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 "@lynx-js/preact-devtools";
+import "@lynx-js/react/debug";
+import { root } from "@lynx-js/react";
+
+const App = () => {
+  return (
+    <view>
+      <text
+        style={{
+          fontSize: "20px",
+          color: "black",
+          padding: "10px",
+          border: "3px solid red",
+        }}
+      >
+        Hello I'm in frame page!
+      </text>
+    </view>
+  );
+};
+
+root.render(<App />);
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept();
+}

examples/frame/src/rspeedy-env.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="@lynx-js/rspeedy/client" />
+
+declare module "@lynx-js/types" {
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  interface GlobalProps {
+    /**
+     * Define your global properties in this interface.
+     * These types will be accessible through `lynx.__globalProps`.
+     */
+  }
+}
+
+// This export makes the file a module
+export {};

examples/frame/src/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+
+    "jsx": "react-jsx",
+    "jsxImportSource": "@lynx-js/react",
+
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+
+    "noEmit": true,
+  },
+  "include": ["./**/*.ts", "./**/*.tsx"],
+}

examples/frame/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+  },
+  "references": [
+    { "path": "./tsconfig.node.json" },
+    { "path": "./src" },
+  ],
+  "files": [],
+}

examples/frame/tsconfig.node.json

@@ -0,0 +1,18 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+
+    // Rspeedy uses Node.js's module resolution
+    "module": "node16",
+    "moduleResolution": "node16",
+    "erasableSyntaxOnly": true,
+
+    // Node.js 18+
+    "lib": ["es2023"],
+    "target": "es2022",
+
+    "noEmit": true
+  },
+  "include": ["./lynx.config.ts"]
+}