feat: add framework-react-lynx-web (experimental)#461
Open
Conversation
Add a new Storybook framework package `storybook-react-lynx-web-rsbuild` that enables developing ReactLynx Web components in Storybook with full HMR support (JS state-preserving HMR + CSS hot reload). Key features: - Proxy rspeedy dev server for Lynx bundle serving with HMR polyfill injection - SSE-based CSS rebuild detection for shadow DOM style reload - `updateGlobalProps()` bridge for Storybook controls without state loss - Custom `renderToCanvas` to preserve `<lynx-view>` across args changes - Production build support with static bundle copying Includes a `react-lynx-web` sandbox with a Button component for testing.
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 3b88010f70
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
- Add shell: true on Windows for execFileSync/spawn('npx') calls
- Fix Button import extension from .jsx to .tsx
- Guard HMR EventSource behind import.meta.webpackHot check
Replace import.meta.webpackHot check (TS2339) with process.env.NODE_ENV !== 'production', which Rsbuild replaces at build time for proper dead-code elimination.
fi3ework
changed the title
The `.web.bundle` embeds asset references as relative paths like
`static/image/foo.png`. web-core hands those strings to the shadow DOM
unchanged, so the browser resolves them against `iframe.html` —
producing root-level `/static/image/foo.png` requests. Previously we
copied them under `/lynx-bundles/static/image/`, which 404ed once
`storybook-static/` was deployed behind a plain static server.
- Build: `output.copy` now writes `static/**` to the output root
(alongside storybook's own `static/{js,css,wasm}`, which don't
overlap with lynx's `static/{image,font,svg}`).
- Dev: proxy `/static/{image,font,svg}` to rspeedy so the same
resolution works through the in-process dev server.
Also splits `preview.ts` into a sync render entry and an async
`preview-runtime.ts` side-effect entry. `@lynx-js/web-core` uses
top-level await (WASM init), which promotes the importing module to
async — and Storybook's `composeConfigs` reads `render` synchronously
via `__webpack_require__`, yielding a Promise whose `.render` is
undefined. The framework's render then loses to the web-components
default and the story renders as "component annotation is missing".
Keeping the render export in a sync module preserves the fields.
fi3ework
force-pushed
the
feat/framework-react-lynx-web
branch
from
954b588 to
1f3b650
Compare
Replace the per-component bridge-entry model with a single dispatcher
entry. Users write one `.storybook/lynx-preview.tsx` that registers
components via `createLynxStorybook({ components })`, and stories
reference them by name via `parameters.lynx.component`. The `entry:`
and `url:` forms remain as escape hatches.
- Add `src/runtime.ts` exporting `createLynxStorybook` (runs inside
the Lynx bundle, not in Storybook's preview iframe)
- Wire `./runtime` subpath export (build-config + package.json exports
+ bundler.entries)
- Preset auto-detects `.storybook/lynx-preview.*` and injects it as a
synthetic `__storybook__` rspeedy entry alongside user entries
- Preview resolves `url → entry → component` with distinct error paths
- Migrate sandbox to dispatcher model, add Card component + story,
make lynx.config.ts a proper app config with `source.entry`
fi3ework
force-pushed
the
feat/framework-react-lynx-web
branch
from
a077c34 to
df0649e
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
storybook-react-lynx-web-rsbuildframework package for developing ReactLynx Web components in StorybookrequireModuleAsyncpolyfill injection into Lynx bundles<lynx-view>URL refresh)<lynx-view>.updateGlobalProps()without component state lossrenderToCanvasto preserve<lynx-view>DOM across args changesreact-lynx-websandbox with Button component for testingArchitecture
Test plan
pnpm storybookinsandboxes/react-lynx-webrenders Button storyButton.tsx→ JS HMR preserves counter stateButton.css→ CSS reload updates stylespnpm build:storybookin sandbox produces working static buildpnpm buildpassespnpm lintpassespnpm checkpasses