feat: Implement the x-webview component with its attributes, styles, …#2061
Conversation
🦋 Changeset detectedLatest commit: 5201d87 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
📝 WalkthroughWalkthroughAdds a new x-webview component (element + attribute class), templates, styles, package export, test fixtures, Playwright E2E tests, and updates developer guidance and a changeset documenting the release. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
packages/web-platform/web-elements/src/elements/XWebView/x-webview.css (1)
1-5: Consider removingflex-direction: columnor making layout configurable.The hardcoded
flex-direction: columnmay be unnecessarily restrictive. Consider:
- Removing it to allow natural iframe sizing
- Or supporting CSS variables like
--lynx-linear-orientationfor consistency with other elementsBased on learnings, other elements in this package use CSS variables extensively (e.g.,
--lynx-display,--lynx-linear-orientation) to drive layout from the Lynx engine.🔎 Optional refactor to remove flex-direction constraint
x-webview { display: flex; - flex-direction: column; overflow: hidden; }packages/web-platform/web-elements/tests/x-webview.spec.ts (1)
1-92: Test coverage looks good, but consider testing the reload() method.The tests appropriately cover attribute changes (src, html), rendering, and event handling (bindload, bindmessage). The use of Playwright patterns and the goto helper function align with coding guidelines.
Consider adding test coverage for the
reload()method to ensure comprehensive coverage of the public API:💡 Suggested test for reload() method
test('should reload the iframe', async ({ page }) => { await goto(page, 'x-webview/basics'); const webview = page.locator('x-webview'); // Set initial src await webview.evaluate(el => el.setAttribute('src', 'about:blank')); // Call reload method await webview.evaluate(el => (el as any).reload()); // Verify that load event fires again await page.waitForFunction(() => window._reload_count > 1); });As per coding guidelines: "Ensure test coverage includes attribute changes, style updates, and event handling."
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (13)
.changeset/brave-cats-jump.mdpackages/web-platform/web-elements/AGENTS.mdpackages/web-platform/web-elements/elements.csspackages/web-platform/web-elements/package.jsonpackages/web-platform/web-elements/src/elements/XWebView/XWebView.tspackages/web-platform/web-elements/src/elements/XWebView/XWebViewAttribute.tspackages/web-platform/web-elements/src/elements/XWebView/index.tspackages/web-platform/web-elements/src/elements/XWebView/x-webview.csspackages/web-platform/web-elements/src/elements/all.tspackages/web-platform/web-elements/src/elements/htmlTemplates.tspackages/web-platform/web-elements/tests/fixtures/shell-project.tspackages/web-platform/web-elements/tests/fixtures/x-webview/basics.htmlpackages/web-platform/web-elements/tests/x-webview.spec.ts
🧰 Additional context used
📓 Path-based instructions (12)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript in strict mode with the configuration specified in tsconfig.json
Files:
packages/web-platform/web-elements/src/elements/htmlTemplates.tspackages/web-platform/web-elements/src/elements/all.tspackages/web-platform/web-elements/tests/x-webview.spec.tspackages/web-platform/web-elements/src/elements/XWebView/XWebViewAttribute.tspackages/web-platform/web-elements/src/elements/XWebView/index.tspackages/web-platform/web-elements/src/elements/XWebView/XWebView.tspackages/web-platform/web-elements/tests/fixtures/shell-project.ts
**/*.{js,ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{js,ts,tsx}: Follow eslint rules as configured in eslint.config.js including React and TypeScript specific rules
Follow code formatting rules specified in .dprint.jsonc and biome.jsonc
Files:
packages/web-platform/web-elements/src/elements/htmlTemplates.tspackages/web-platform/web-elements/src/elements/all.tspackages/web-platform/web-elements/tests/x-webview.spec.tspackages/web-platform/web-elements/src/elements/XWebView/XWebViewAttribute.tspackages/web-platform/web-elements/src/elements/XWebView/index.tspackages/web-platform/web-elements/src/elements/XWebView/XWebView.tspackages/web-platform/web-elements/tests/fixtures/shell-project.ts
packages/web-platform/web-elements/**/*.ts
📄 CodeRabbit inference engine (packages/web-platform/web-elements/AGENTS.md)
packages/web-platform/web-elements/**/*.ts: Useelement-reactivepatterns: inherit fromElement(viaComponentdecorator) and use reactive utilities when creating new elements
Avoid synchronous layout thrashing by usingboostedQueueMicrotaskfor DOM reads/writes when accurate layout info isn't immediately needed
Use CSS variables extensively (e.g.,--lynx-display,--lynx-linear-orientation) to drive layout and style from the Lynx engine
Files:
packages/web-platform/web-elements/src/elements/htmlTemplates.tspackages/web-platform/web-elements/src/elements/all.tspackages/web-platform/web-elements/tests/x-webview.spec.tspackages/web-platform/web-elements/src/elements/XWebView/XWebViewAttribute.tspackages/web-platform/web-elements/src/elements/XWebView/index.tspackages/web-platform/web-elements/src/elements/XWebView/XWebView.tspackages/web-platform/web-elements/tests/fixtures/shell-project.ts
packages/web-platform/web-elements/src/elements/**/*.ts
📄 CodeRabbit inference engine (packages/web-platform/web-elements/AGENTS.md)
packages/web-platform/web-elements/src/elements/**/*.ts: Define shadow DOM templates insrc/elements/htmlTemplates.tsrather than inline within element files
Tag names must use kebab-case; single-word names should be prefixed withx-(e.g.,x-view,scroll-view)
Minimize heavy computation inattributeChangedCallbackto keep main thread responsive
Files:
packages/web-platform/web-elements/src/elements/htmlTemplates.tspackages/web-platform/web-elements/src/elements/all.tspackages/web-platform/web-elements/src/elements/XWebView/XWebViewAttribute.tspackages/web-platform/web-elements/src/elements/XWebView/index.tspackages/web-platform/web-elements/src/elements/XWebView/XWebView.ts
packages/web-platform/web-elements/src/elements/**/!(index).ts
📄 CodeRabbit inference engine (packages/web-platform/web-elements/AGENTS.md)
Use PascalCase for class names (e.g.,
MyElement)
Files:
packages/web-platform/web-elements/src/elements/htmlTemplates.tspackages/web-platform/web-elements/src/elements/all.tspackages/web-platform/web-elements/src/elements/XWebView/XWebViewAttribute.tspackages/web-platform/web-elements/src/elements/XWebView/XWebView.ts
packages/web-platform/web-elements/src/elements/**/*.css
📄 CodeRabbit inference engine (packages/web-platform/web-elements/AGENTS.md)
Write CSS in
<element-name>.cssin the element's directory and ensure it's imported inelements.css
Files:
packages/web-platform/web-elements/src/elements/XWebView/x-webview.css
packages/web-platform/web-elements/**/*.css
📄 CodeRabbit inference engine (packages/web-platform/web-elements/AGENTS.md)
For
x-input,x-textarea, andx-imageelements, control styling properties like placeholder colors or blur radii via attributes (e.g.,placeholder-color,blur-radius) that internally map to CSS variables
Files:
packages/web-platform/web-elements/src/elements/XWebView/x-webview.csspackages/web-platform/web-elements/elements.css
packages/web-platform/web-elements/src/elements/all.ts
📄 CodeRabbit inference engine (packages/web-platform/web-elements/AGENTS.md)
Export all new components in
src/elements/all.tsto ensure they are registered
Files:
packages/web-platform/web-elements/src/elements/all.ts
packages/web-platform/web-elements/**/package.json
📄 CodeRabbit inference engine (packages/web-platform/web-elements/AGENTS.md)
Add export configuration under
"exports"field for newly implemented components (types and default)
Files:
packages/web-platform/web-elements/package.json
packages/web-platform/web-elements/tests/**/*.spec.ts
📄 CodeRabbit inference engine (packages/web-platform/web-elements/AGENTS.md)
packages/web-platform/web-elements/tests/**/*.spec.ts: Use Playwright for all E2E and functional tests with standard assertions likeexpect(locator).toBeVisible()andexpect(locator).toHaveCSS()
Create a helper functiongoto(page, fixtureName)to handle navigation and waiting for resources likedocument.fonts.readyin Playwright tests
Ensure test coverage includes attribute changes, style updates, and event handling
Files:
packages/web-platform/web-elements/tests/x-webview.spec.ts
packages/web-platform/web-elements/src/elements/**/index.ts
📄 CodeRabbit inference engine (packages/web-platform/web-elements/AGENTS.md)
Ensure
index.tsfiles and complex logic have clear, descriptive comments matching the implementation
Files:
packages/web-platform/web-elements/src/elements/XWebView/index.ts
packages/web-platform/web-elements/tests/fixtures/**/*.html
📄 CodeRabbit inference engine (packages/web-platform/web-elements/AGENTS.md)
Use HTML files for test case fixtures with one HTML file per test case/feature (Atomic Testing approach)
Files:
packages/web-platform/web-elements/tests/fixtures/x-webview/basics.html
🧠 Learnings (42)
📓 Common learnings
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-26T07:42:21.745Z
Learning: The `web-elements` package provides Native UI implementation using Web Components built on the `element-reactive` lightweight reactive framework for performance
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-26T07:42:21.745Z
Learning: Applies to packages/web-platform/web-elements/**/*.ts : Use CSS variables extensively (e.g., `--lynx-display`, `--lynx-linear-orientation`) to drive layout and style from the Lynx engine
📚 Learning: 2025-12-26T07:42:21.745Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-26T07:42:21.745Z
Learning: Applies to packages/web-platform/web-elements/src/elements/**/*.ts : Define shadow DOM templates in `src/elements/htmlTemplates.ts` rather than inline within element files
Applied to files:
packages/web-platform/web-elements/src/elements/htmlTemplates.tspackages/web-platform/web-elements/src/elements/XWebView/x-webview.csspackages/web-platform/web-elements/src/elements/all.tspackages/web-platform/web-elements/package.jsonpackages/web-platform/web-elements/tests/x-webview.spec.tspackages/web-platform/web-elements/elements.csspackages/web-platform/web-elements/src/elements/XWebView/XWebViewAttribute.tspackages/web-platform/web-elements/src/elements/XWebView/index.tspackages/web-platform/web-elements/src/elements/XWebView/XWebView.tspackages/web-platform/web-elements/tests/fixtures/shell-project.tspackages/web-platform/web-elements/AGENTS.md
📚 Learning: 2025-12-26T07:42:21.745Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-26T07:42:21.745Z
Learning: Applies to packages/web-platform/web-elements/**/*.ts : Use `element-reactive` patterns: inherit from `Element` (via `Component` decorator) and use reactive utilities when creating new elements
Applied to files:
packages/web-platform/web-elements/src/elements/htmlTemplates.tspackages/web-platform/web-elements/src/elements/all.tspackages/web-platform/web-elements/package.jsonpackages/web-platform/web-elements/elements.csspackages/web-platform/web-elements/src/elements/XWebView/XWebViewAttribute.tspackages/web-platform/web-elements/src/elements/XWebView/index.tspackages/web-platform/web-elements/src/elements/XWebView/XWebView.tspackages/web-platform/web-elements/AGENTS.md
📚 Learning: 2025-12-26T07:42:21.745Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-26T07:42:21.745Z
Learning: Applies to packages/web-platform/web-elements/src/elements/**/index.ts : Ensure `index.ts` files and complex logic have clear, descriptive comments matching the implementation
Applied to files:
packages/web-platform/web-elements/src/elements/htmlTemplates.tspackages/web-platform/web-elements/src/elements/all.tspackages/web-platform/web-elements/package.jsonpackages/web-platform/web-elements/src/elements/XWebView/XWebViewAttribute.tspackages/web-platform/web-elements/src/elements/XWebView/index.tspackages/web-platform/web-elements/src/elements/XWebView/XWebView.tspackages/web-platform/web-elements/tests/fixtures/shell-project.tspackages/web-platform/web-elements/AGENTS.md
📚 Learning: 2025-12-26T07:42:21.745Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-26T07:42:21.745Z
Learning: Applies to packages/web-platform/web-elements/**/*.ts : Use CSS variables extensively (e.g., `--lynx-display`, `--lynx-linear-orientation`) to drive layout and style from the Lynx engine
Applied to files:
packages/web-platform/web-elements/src/elements/htmlTemplates.tspackages/web-platform/web-elements/src/elements/XWebView/x-webview.csspackages/web-platform/web-elements/src/elements/all.tspackages/web-platform/web-elements/package.json.changeset/brave-cats-jump.mdpackages/web-platform/web-elements/elements.csspackages/web-platform/web-elements/src/elements/XWebView/XWebViewAttribute.tspackages/web-platform/web-elements/src/elements/XWebView/index.tspackages/web-platform/web-elements/src/elements/XWebView/XWebView.tspackages/web-platform/web-elements/tests/fixtures/shell-project.ts
📚 Learning: 2025-12-26T07:42:21.745Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-26T07:42:21.745Z
Learning: Applies to packages/web-platform/web-elements/src/elements/**/*.ts : Tag names must use kebab-case; single-word names should be prefixed with `x-` (e.g., `x-view`, `scroll-view`)
Applied to files:
packages/web-platform/web-elements/src/elements/htmlTemplates.tspackages/web-platform/web-elements/src/elements/all.tspackages/web-platform/web-elements/package.jsonpackages/web-platform/web-elements/src/elements/XWebView/XWebViewAttribute.tspackages/web-platform/web-elements/src/elements/XWebView/index.tspackages/web-platform/web-elements/src/elements/XWebView/XWebView.tspackages/web-platform/web-elements/AGENTS.md
📚 Learning: 2025-12-26T07:42:21.745Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-26T07:42:21.745Z
Learning: Applies to packages/web-platform/web-elements/**/package.json : Add export configuration under `"exports"` field for newly implemented components (types and default)
Applied to files:
packages/web-platform/web-elements/src/elements/htmlTemplates.tspackages/web-platform/web-elements/src/elements/all.tspackages/web-platform/web-elements/package.json.changeset/brave-cats-jump.mdpackages/web-platform/web-elements/elements.csspackages/web-platform/web-elements/src/elements/XWebView/XWebViewAttribute.tspackages/web-platform/web-elements/src/elements/XWebView/index.tspackages/web-platform/web-elements/src/elements/XWebView/XWebView.tspackages/web-platform/web-elements/tests/fixtures/shell-project.tspackages/web-platform/web-elements/AGENTS.md
📚 Learning: 2025-12-26T07:42:21.745Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-26T07:42:21.745Z
Learning: Applies to packages/web-platform/web-elements/src/elements/all.ts : Export all new components in `src/elements/all.ts` to ensure they are registered
Applied to files:
packages/web-platform/web-elements/src/elements/htmlTemplates.tspackages/web-platform/web-elements/src/elements/all.tspackages/web-platform/web-elements/package.jsonpackages/web-platform/web-elements/elements.csspackages/web-platform/web-elements/src/elements/XWebView/index.tspackages/web-platform/web-elements/src/elements/XWebView/XWebView.tspackages/web-platform/web-elements/tests/fixtures/shell-project.tspackages/web-platform/web-elements/AGENTS.md
📚 Learning: 2025-12-26T07:42:21.745Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-26T07:42:21.745Z
Learning: Applies to packages/web-platform/web-elements/src/elements/**/*.css : Write CSS in `<element-name>.css` in the element's directory and ensure it's imported in `elements.css`
Applied to files:
packages/web-platform/web-elements/src/elements/XWebView/x-webview.csspackages/web-platform/web-elements/src/elements/all.tspackages/web-platform/web-elements/package.jsonpackages/web-platform/web-elements/elements.csspackages/web-platform/web-elements/tests/fixtures/shell-project.ts
📚 Learning: 2025-12-26T07:42:21.745Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-26T07:42:21.745Z
Learning: Applies to packages/web-platform/web-elements/**/*.css : For `x-input`, `x-textarea`, and `x-image` elements, control styling properties like placeholder colors or blur radii via attributes (e.g., `placeholder-color`, `blur-radius`) that internally map to CSS variables
Applied to files:
packages/web-platform/web-elements/src/elements/XWebView/x-webview.csspackages/web-platform/web-elements/elements.csspackages/web-platform/web-elements/src/elements/XWebView/XWebViewAttribute.ts
📚 Learning: 2025-09-18T08:12:56.802Z
Learnt from: Sherry-hue
Repo: lynx-family/lynx-stack PR: 1770
File: packages/web-platform/web-mainthread-apis/src/utils/processStyleInfo.ts:316-318
Timestamp: 2025-09-18T08:12:56.802Z
Learning: In packages/web-platform/web-mainthread-apis/src/utils/processStyleInfo.ts, the current implementation uses cardStyleElement.textContent += for lazy component styles. While this could theoretically invalidate rule indices by reparsing the stylesheet, Sherry-hue indicated that UIDs don't repeat for the same element, making this approach acceptable for now. A future optimization to use separate style elements per entry was discussed but deferred to a separate PR to keep the current lazy bundle PR focused.
Applied to files:
packages/web-platform/web-elements/src/elements/XWebView/x-webview.csspackages/web-platform/web-elements/elements.css
📚 Learning: 2025-12-26T07:42:21.745Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-26T07:42:21.745Z
Learning: Applies to packages/web-platform/web-elements/tests/**/*.spec.ts : Ensure test coverage includes attribute changes, style updates, and event handling
Applied to files:
packages/web-platform/web-elements/src/elements/all.tspackages/web-platform/web-elements/tests/x-webview.spec.tspackages/web-platform/web-elements/src/elements/XWebView/XWebViewAttribute.tspackages/web-platform/web-elements/tests/fixtures/x-webview/basics.htmlpackages/web-platform/web-elements/tests/fixtures/shell-project.tspackages/web-platform/web-elements/AGENTS.md
📚 Learning: 2025-12-26T07:42:21.745Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-26T07:42:21.745Z
Learning: Applies to packages/web-platform/web-elements/src/elements/**/*.ts : Minimize heavy computation in `attributeChangedCallback` to keep main thread responsive
Applied to files:
packages/web-platform/web-elements/src/elements/all.tspackages/web-platform/web-elements/src/elements/XWebView/XWebViewAttribute.tspackages/web-platform/web-elements/src/elements/XWebView/index.tspackages/web-platform/web-elements/src/elements/XWebView/XWebView.tspackages/web-platform/web-elements/AGENTS.md
📚 Learning: 2025-10-10T08:22:12.051Z
Learnt from: Sherry-hue
Repo: lynx-family/lynx-stack PR: 1837
File: packages/web-platform/web-mainthread-apis/src/prepareMainThreadAPIs.ts:266-266
Timestamp: 2025-10-10T08:22:12.051Z
Learning: In packages/web-platform/web-mainthread-apis, the handleUpdatedData function returned from prepareMainThreadAPIs is internal-only, used to serve web-core. It does not require public documentation, type exports, or SSR support.
Applied to files:
packages/web-platform/web-elements/package.jsonpackages/web-platform/web-elements/src/elements/XWebView/index.ts
📚 Learning: 2025-12-26T05:10:16.728Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-core-wasm/AGENTS.md:0-0
Timestamp: 2025-12-26T05:10:16.728Z
Learning: Applies to packages/web-platform/web-core-wasm/**/AGENTS.md : Check if `AGENTS.md` needs to be updated to reflect your changes (e.g., new feature flags, structural changes, new dependencies).
Applied to files:
packages/web-platform/web-elements/package.jsonpackages/web-platform/web-elements/AGENTS.md
📚 Learning: 2025-12-26T07:42:21.745Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-26T07:42:21.745Z
Learning: The `web-elements` package provides Native UI implementation using Web Components built on the `element-reactive` lightweight reactive framework for performance
Applied to files:
packages/web-platform/web-elements/package.json.changeset/brave-cats-jump.md
📚 Learning: 2025-12-26T07:42:21.745Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-26T07:42:21.745Z
Learning: Applies to packages/web-platform/web-elements/src/elements/**/!(index).ts : Use PascalCase for class names (e.g., `MyElement`)
Applied to files:
packages/web-platform/web-elements/package.jsonpackages/web-platform/web-elements/src/elements/XWebView/index.ts
📚 Learning: 2025-12-26T07:42:21.745Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-26T07:42:21.745Z
Learning: Applies to packages/web-platform/web-elements/tests/**/*.spec.ts : Use Playwright for all E2E and functional tests with standard assertions like `expect(locator).toBeVisible()` and `expect(locator).toHaveCSS()`
Applied to files:
packages/web-platform/web-elements/tests/x-webview.spec.tspackages/web-platform/web-elements/tests/fixtures/x-webview/basics.htmlpackages/web-platform/web-elements/tests/fixtures/shell-project.tspackages/web-platform/web-elements/AGENTS.md
📚 Learning: 2025-12-26T05:10:01.595Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-26T05:10:01.595Z
Learning: Applies to packages/web-platform/web-tests/**/*.{ts,tsx,js} : Use Playwright for E2E tests in packages/web-platform/web-tests/
Applied to files:
packages/web-platform/web-elements/tests/x-webview.spec.tspackages/web-platform/web-elements/tests/fixtures/shell-project.tspackages/web-platform/web-elements/AGENTS.md
📚 Learning: 2025-12-26T05:10:16.728Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-core-wasm/AGENTS.md:0-0
Timestamp: 2025-12-26T05:10:16.728Z
Learning: Applies to packages/web-platform/web-core-wasm/**/*.rs : Ensure that tests cover edge cases and verify the correctness of the logic.
Applied to files:
packages/web-platform/web-elements/tests/x-webview.spec.tspackages/web-platform/web-elements/tests/fixtures/x-webview/basics.htmlpackages/web-platform/web-elements/AGENTS.md
📚 Learning: 2025-12-26T07:42:21.745Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-26T07:42:21.745Z
Learning: Applies to packages/web-platform/web-elements/tests/fixtures/**/*.html : Use HTML files for test case fixtures with one HTML file per test case/feature (Atomic Testing approach)
Applied to files:
packages/web-platform/web-elements/tests/x-webview.spec.tspackages/web-platform/web-elements/tests/fixtures/x-webview/basics.htmlpackages/web-platform/web-elements/tests/fixtures/shell-project.tspackages/web-platform/web-elements/AGENTS.md
📚 Learning: 2025-12-26T05:10:16.728Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-core-wasm/AGENTS.md:0-0
Timestamp: 2025-12-26T05:10:16.728Z
Learning: Applies to packages/web-platform/web-core-wasm/**/*.rs : Use descriptive test names that explain what is being tested (e.g., `test_transform_rpx_case_insensitive`).
Applied to files:
packages/web-platform/web-elements/tests/x-webview.spec.tspackages/web-platform/web-elements/tests/fixtures/x-webview/basics.html
📚 Learning: 2025-12-26T05:10:16.728Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-core-wasm/AGENTS.md:0-0
Timestamp: 2025-12-26T05:10:16.728Z
Learning: Applies to packages/web-platform/web-core-wasm/**/*.rs : All new features and bug fixes must be accompanied by unit tests.
Applied to files:
packages/web-platform/web-elements/tests/x-webview.spec.tspackages/web-platform/web-elements/tests/fixtures/x-webview/basics.htmlpackages/web-platform/web-elements/AGENTS.md
📚 Learning: 2025-12-26T07:42:21.745Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-26T07:42:21.745Z
Learning: Applies to packages/web-platform/web-elements/tests/**/*.spec.ts : Create a helper function `goto(page, fixtureName)` to handle navigation and waiting for resources like `document.fonts.ready` in Playwright tests
Applied to files:
packages/web-platform/web-elements/tests/x-webview.spec.tspackages/web-platform/web-elements/tests/fixtures/x-webview/basics.htmlpackages/web-platform/web-elements/AGENTS.md
📚 Learning: 2025-12-26T05:10:16.728Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-core-wasm/AGENTS.md:0-0
Timestamp: 2025-12-26T05:10:16.728Z
Learning: Applies to packages/web-platform/web-core-wasm/**/*.rs : Check if the comments in the code need to be updated to reflect your changes.
Applied to files:
packages/web-platform/web-elements/tests/x-webview.spec.tspackages/web-platform/web-elements/elements.csspackages/web-platform/web-elements/tests/fixtures/shell-project.ts
📚 Learning: 2025-12-26T05:10:16.728Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-core-wasm/AGENTS.md:0-0
Timestamp: 2025-12-26T05:10:16.728Z
Learning: Applies to packages/web-platform/web-core-wasm/**/*.rs : Run `cargo test --all-features` to execute unit tests. Tests are co-located with the source code using `#[cfg(test)]`.
Applied to files:
packages/web-platform/web-elements/tests/x-webview.spec.ts
📚 Learning: 2025-12-26T05:10:16.728Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-core-wasm/AGENTS.md:0-0
Timestamp: 2025-12-26T05:10:16.728Z
Learning: Applies to packages/web-platform/web-core-wasm/**/*.rs : Verify that the implementation matches the comments and the intended behavior.
Applied to files:
packages/web-platform/web-elements/tests/x-webview.spec.ts
📚 Learning: 2025-08-27T12:42:01.095Z
Learnt from: upupming
Repo: lynx-family/lynx-stack PR: 1616
File: packages/webpack/cache-events-webpack-plugin/test/cases/not-cache-events/lazy-bundle/index.js:3-3
Timestamp: 2025-08-27T12:42:01.095Z
Learning: In webpack, properties like __webpack_require__.lynx_ce are injected during compilation/build time when webpack processes modules and generates bundles, not at runtime when dynamic imports execute. Tests for such properties don't need to wait for dynamic imports to complete.
Applied to files:
packages/web-platform/web-elements/tests/x-webview.spec.tspackages/web-platform/web-elements/tests/fixtures/shell-project.ts
📚 Learning: 2025-09-12T09:43:04.847Z
Learnt from: gaoachao
Repo: lynx-family/lynx-stack PR: 1736
File: .changeset/spotty-experts-smoke.md:1-3
Timestamp: 2025-09-12T09:43:04.847Z
Learning: In the lynx-family/lynx-stack repository, empty changeset files (containing only `---\n\n---`) are used for internal changes that modify src/** files but don't require meaningful release notes, such as private package changes or testing-only modifications. This satisfies CI requirements without generating user-facing release notes.
Applied to files:
.changeset/brave-cats-jump.md
📚 Learning: 2025-07-22T09:23:07.797Z
Learnt from: colinaaa
Repo: lynx-family/lynx-stack PR: 1330
File: .changeset/olive-animals-attend.md:1-3
Timestamp: 2025-07-22T09:23:07.797Z
Learning: In the lynx-family/lynx-stack repository, changesets are only required for meaningful changes to end-users such as bugfixes and features. Internal/development changes like chores, refactoring, or removing debug info do not need changeset entries.
Applied to files:
.changeset/brave-cats-jump.md
📚 Learning: 2025-07-22T09:26:16.722Z
Learnt from: colinaaa
Repo: lynx-family/lynx-stack PR: 1330
File: .changeset/olive-animals-attend.md:1-3
Timestamp: 2025-07-22T09:26:16.722Z
Learning: In the lynx-family/lynx-stack repository, CI checks require changesets when files matching the pattern "src/**" are modified (as configured in .changeset/config.json). For internal changes that don't need meaningful changesets, an empty changeset file is used to satisfy the CI requirement while not generating any release notes.
Applied to files:
.changeset/brave-cats-jump.md
📚 Learning: 2025-09-12T09:43:04.847Z
Learnt from: gaoachao
Repo: lynx-family/lynx-stack PR: 1736
File: .changeset/spotty-experts-smoke.md:1-3
Timestamp: 2025-09-12T09:43:04.847Z
Learning: In the lynx-family/lynx-stack repository, private packages (marked with "private": true in package.json) like lynx-js/react-transform don't require meaningful changeset entries even when their public APIs change, since they are not published externally and only affect internal development.
Applied to files:
.changeset/brave-cats-jump.md
📚 Learning: 2025-08-07T04:00:59.645Z
Learnt from: colinaaa
Repo: lynx-family/lynx-stack PR: 1454
File: pnpm-workspace.yaml:46-46
Timestamp: 2025-08-07T04:00:59.645Z
Learning: In the lynx-family/lynx-stack repository, the webpack patch (patches/webpack5.101.0.patch) was created to fix issues with webpack5.99.9 but only takes effect on webpack5.100.0 and later versions. The patchedDependencies entry should use "webpack@^5.100.0" to ensure the patch applies to the correct version range.
Applied to files:
.changeset/brave-cats-jump.md
📚 Learning: 2025-11-03T08:44:10.706Z
Learnt from: Sherry-hue
Repo: lynx-family/lynx-stack PR: 1911
File: packages/web-platform/web-elements/src/XList/ListItemAttributes.ts:24-29
Timestamp: 2025-11-03T08:44:10.706Z
Learning: In packages/web-platform/web-elements/src/XList/ListItemAttributes.ts, the `estimated-main-axis-size-px` attribute handler does not need to validate or guard against invalid/NaN values when parsing - data correctness verification is not required for this attribute.
Applied to files:
packages/web-platform/web-elements/src/elements/XWebView/XWebViewAttribute.tspackages/web-platform/web-elements/AGENTS.md
📚 Learning: 2025-12-26T07:42:21.745Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-26T07:42:21.745Z
Learning: Applies to packages/web-platform/web-elements/**/*.ts : Avoid synchronous layout thrashing by using `boostedQueueMicrotask` for DOM reads/writes when accurate layout info isn't immediately needed
Applied to files:
packages/web-platform/web-elements/src/elements/XWebView/XWebView.ts
📚 Learning: 2025-10-11T06:16:12.517Z
Learnt from: Sherry-hue
Repo: lynx-family/lynx-stack PR: 1820
File: packages/web-platform/web-tests/tests/react.spec.ts:834-856
Timestamp: 2025-10-11T06:16:12.517Z
Learning: In packages/web-platform/web-tests/tests/react.spec.ts, the tests `basic-bindmouse` and `basic-mts-bindtouchstart` are NOT duplicates despite having similar test structures. They test different event types: `basic-bindmouse` validates mouse events (mousedown, mouseup, mousemove) with mouse-specific properties (button, buttons, x, y, pageX, pageY, clientX, clientY), while `basic-mts-bindtouchstart` validates touch events (touchstart) with touch arrays (touches, targetTouches, changedTouches). The similar test structure is coincidental and follows testing conventions.
Applied to files:
packages/web-platform/web-elements/tests/fixtures/x-webview/basics.htmlpackages/web-platform/web-elements/AGENTS.md
📚 Learning: 2025-11-11T08:05:14.163Z
Learnt from: Sherry-hue
Repo: lynx-family/lynx-stack PR: 1932
File: packages/web-platform/web-tests/tests/react/basic-element-x-input-ng-bindinput/index.jsx:10-26
Timestamp: 2025-11-11T08:05:14.163Z
Learning: In packages/web-platform/web-tests/tests/react/basic-element-x-input-ng-bindinput/index.jsx, the test intentionally uses selectionStart twice in the result string (instead of selectionStart and selectionEnd) because it prioritizes testing whether x-input-ng works functionally, rather than validating the correctness of selection values.
Applied to files:
packages/web-platform/web-elements/tests/fixtures/x-webview/basics.html
📚 Learning: 2025-12-26T05:10:01.595Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-26T05:10:01.595Z
Learning: Applies to packages/react/components/**/*.{ts,tsx} : Optimize component library in packages/react/components/ using ReactLynx syntax
Applied to files:
packages/web-platform/web-elements/tests/fixtures/shell-project.ts
📚 Learning: 2025-07-16T06:28:26.463Z
Learnt from: PupilTong
Repo: lynx-family/lynx-stack PR: 1029
File: packages/web-platform/web-core/src/uiThread/createRenderAllOnUI.ts:95-99
Timestamp: 2025-07-16T06:28:26.463Z
Learning: In the lynx-stack codebase, CSS selectors in SSR hydration are generated by their own packages, ensuring a predictable format that makes simple string manipulation safe and preferable over regex for performance reasons.
Applied to files:
packages/web-platform/web-elements/tests/fixtures/shell-project.ts
📚 Learning: 2025-08-13T11:46:43.737Z
Learnt from: colinaaa
Repo: lynx-family/lynx-stack PR: 1523
File: vitest.config.ts:5-6
Timestamp: 2025-08-13T11:46:43.737Z
Learning: In the lynx-stack codebase, default imports are consistently used for Node.js built-in modules (e.g., `import os from 'node:os'`, `import fs from 'node:fs'`). The TypeScript configuration supports esModuleInterop and allowSyntheticDefaultImports, making default imports the preferred pattern over namespace imports for Node.js built-ins.
Applied to files:
packages/web-platform/web-elements/tests/fixtures/shell-project.ts
📚 Learning: 2025-08-06T13:28:57.182Z
Learnt from: colinaaa
Repo: lynx-family/lynx-stack PR: 1453
File: vitest.config.ts:49-61
Timestamp: 2025-08-06T13:28:57.182Z
Learning: In the lynx-family/lynx-stack repository, the file `packages/react/testing-library/src/vitest.config.js` is source code for the testing library that gets exported for users, not a test configuration that should be included in the main vitest projects array.
Applied to files:
packages/web-platform/web-elements/tests/fixtures/shell-project.ts
📚 Learning: 2025-12-26T05:10:01.595Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-26T05:10:01.595Z
Learning: Applies to **/__test__/**/*.{ts,tsx,js} : Use vitest-based unit tests as configured in vitest.config.ts
Applied to files:
packages/web-platform/web-elements/AGENTS.md
🧬 Code graph analysis (2)
packages/web-platform/web-elements/src/elements/XWebView/XWebViewAttribute.ts (1)
packages/web-platform/web-core-wasm/src/main_thread/element_apis/element_template_apis.rs (1)
dom(157-157)
packages/web-platform/web-elements/src/elements/XWebView/XWebView.ts (3)
packages/web-platform/web-elements/src/elements/XWebView/index.ts (1)
XWebView(22-22)packages/web-platform/web-elements/src/elements/XWebView/XWebViewAttribute.ts (1)
XWebViewAttribute(13-33)packages/web-platform/web-elements/src/elements/htmlTemplates.ts (1)
templateXWebView(345-352)
🔇 Additional comments (13)
packages/web-platform/web-elements/AGENTS.md (1)
111-166: Excellent documentation updates for the new component pattern.The additions provide critical guidance on:
- Attribute handling pattern (avoiding a common pitfall with @registerAttributeHandler)
- Test structure best practices (separate spec files, network mocking)
- Shadow DOM access strategies in Playwright
These documentation updates are comprehensive and will help prevent common mistakes.
.changeset/brave-cats-jump.md (1)
1-5: LGTM!The changeset correctly documents this as a patch release for the new x-webview component feature.
packages/web-platform/web-elements/elements.css (1)
19-19: LGTM!The CSS import follows the established pattern and correctly references the new x-webview.css file.
packages/web-platform/web-elements/src/elements/htmlTemplates.ts (1)
345-352: LGTM!The template follows the established pattern with:
- Proper iframe styling (fills container, no border)
id="webview"for internal access viagenDomGetterpart="webview"for external styling via::part()The structure is consistent with other templates in this file.
packages/web-platform/web-elements/src/elements/all.ts (1)
18-18: LGTM!The import correctly registers the XWebView component following the established pattern.
packages/web-platform/web-elements/tests/fixtures/shell-project.ts (1)
1-5: LGTM!The change to local source imports ensures test fixtures use the current local build rather than the published package, which is appropriate for hermetic testing.
packages/web-platform/web-elements/tests/fixtures/x-webview/basics.html (1)
1-33: Fixture is correct and properly mocked in test spec.The x-webview fixture correctly sets up the element with event listeners for
bindloadandbindmessage. The external URLhttps://example.comis properly mocked inx-webview.spec.tswithpage.route('https://example.com', ...)returning a valid HTML response.packages/web-platform/web-elements/src/elements/XWebView/index.ts (1)
1-22: LGTM! Well-documented public API.The module documentation is clear and comprehensive, covering attributes, events, and methods. The re-export follows the established pattern for web-elements.
packages/web-platform/web-elements/package.json (1)
109-113: LGTM! Export configuration is correct.The XWebView export entry follows the established pattern with proper source, types, and default fields.
packages/web-platform/web-elements/src/elements/XWebView/XWebViewAttribute.ts (1)
1-33: LGTM! Clean attribute handling implementation.The implementation correctly follows element-reactive patterns with decorators and minimal computation in attribute handlers. The mapping of
srcto iframe'ssrcandhtmlto iframe'ssrcdocis appropriate.Based on coding guidelines: "Use
element-reactivepatterns: inherit fromElement(viaComponentdecorator) and use reactive utilities when creating new elements" and "Minimize heavy computation inattributeChangedCallbackto keep main thread responsive."packages/web-platform/web-elements/src/elements/XWebView/XWebView.ts (3)
100-110: LGTM! Proper lifecycle management with one minor observation.The
connectedCallbackanddisconnectedCallbackproperly register and clean up event listeners. The message listener onwindowis appropriate since iframe postMessage events bubble to the window, and the source check in#handleMessage(line 76) ensures only messages from the correct iframe are processed.Note: Multiple x-webview instances will each process all postMessage events on the window, though the source check filters them correctly. This is the standard pattern for iframe communication.
27-46: LGTM! Comprehensive event handling implementation.The event handlers correctly:
- Emit both standard events ('load', 'error', 'message') and bind-prefixed events for compatibility
- Include appropriate detail payloads
- Set
bubbles: trueandcomposed: truefor proper event propagation- Filter messages by source (line 76) to prevent cross-iframe message leakage
Also applies to: 51-70, 75-98
112-139: LGTM! Property accessors and reload method are correctly implemented.The
srcandhtmlgetters/setters properly delegate to attributes, and thereload()method correctly triggers a reload by reassigning the iframe's src. The eslint-disable comment is appropriate since self-assignment is intentional here.
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
CodSpeed Performance ReportMerging #2061 will not alter performanceComparing Summary
Footnotes
|
Web Explorer#6875 Bundle Size — 379.1KiB (+0.72%).5201d87(current) vs f0317a3 main#6867(baseline) Bundle metrics
|
| Current #6875 |
Baseline #6867 |
|
|---|---|---|
 Initial JS |
152.52KiB(+1.76%) |
149.87KiB |
| Initial CSS |
32.46KiB(+0.18%) |
32.4KiB |
 Cache Invalidation |
48.43% |
0% |
 Chunks |
8 |
8 |
| Assets |
8 |
8 |
| Modules |
236(+2.16%) |
231 |
| Duplicate Modules |
16 |
16 |
| Duplicate Code |
3.03%(-2.88%) |
3.12% |
| Packages |
4 |
4 |
| Duplicate Packages |
0 |
0 |
Bundle size by type 2 changes 2 regressions
| Current #6875 |
Baseline #6867 |
|
|---|---|---|
| JS |
249.66KiB (+1.07%) |
247.01KiB |
| Other |
96.98KiB |
96.98KiB |
| CSS |
32.46KiB (+0.18%) |
32.4KiB |
Bundle analysis report Branch PupilTong:p/hw/implement-x-webvi... Project dashboard
Generated by RelativeCI Documentation Report issue
React Example#6715 Bundle Size — 237.01KiB (0%).5201d87(current) vs f0317a3 main#6707(baseline) Bundle metrics
|
| Current #6715 |
Baseline #6707 |
|
|---|---|---|
| Initial JS |
0B |
0B |
| Initial CSS |
0B |
0B |
| Cache Invalidation |
0% |
0% |
| Chunks |
0 |
0 |
| Assets |
4 |
4 |
| Modules |
162 |
162 |
| Duplicate Modules |
65 |
65 |
| Duplicate Code |
46.75% |
46.75% |
| Packages |
2 |
2 |
| Duplicate Packages |
0 |
0 |
Bundle size by type no changes
| Current #6715 |
Baseline #6707 |
|
|---|---|---|
| IMG |
145.76KiB |
145.76KiB |
| Other |
91.25KiB |
91.25KiB |
Bundle analysis report Branch PupilTong:p/hw/implement-x-webvi... Project dashboard
Generated by RelativeCI Documentation Report issue
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
packages/web-platform/web-elements/src/elements/XWebView/XWebView.ts (3)
25-96: Consider documenting the dual event pattern.Each handler dispatches two events (e.g., 'load'/'bindload', 'error'/'binderror'). While the inline comment on line 82 hints at compatibility concerns for the message event, documenting why both event types are dispatched would improve maintainability.
💡 Optional: Add JSDoc explaining the dual dispatch pattern
/** * @internal + * Dispatches 'load' and 'bindload' events when the iframe loads. + * Both events are provided for API compatibility. */ readonly #handleLoad = () => {
134-137: LGTM! Clean reload implementation.The self-assignment technique is a standard approach to force iframe reload. The eslint-disable comment is appropriate.
💡 Optional: Add JSDoc for public API
+ /** + * Reloads the current content in the webview. + */ reload() { // eslint-disable-next-line no-self-assign this.#getWebView().src = this.#getWebView().src; }
98-108: Window-level message listener creates multiple global listeners per instance—consider delegating to a single listener.The
window.addEventListener('message', ...)on line 101 means each x-webview instance registers its own global listener. While the#handleMessagefilter (line 74) correctly prevents cross-instance interference by checkinge.source !== this.#getWebView().contentWindow, this pattern causes every message event on the page to trigger all registered handlers unnecessarily. For pages with multiple x-webview instances, a single delegated listener with instance routing would be more performant.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/web-platform/web-elements/src/elements/XWebView/XWebView.ts
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript in strict mode with the configuration specified in tsconfig.json
Files:
packages/web-platform/web-elements/src/elements/XWebView/XWebView.ts
**/*.{js,ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{js,ts,tsx}: Follow eslint rules as configured in eslint.config.js including React and TypeScript specific rules
Follow code formatting rules specified in .dprint.jsonc and biome.jsonc
Files:
packages/web-platform/web-elements/src/elements/XWebView/XWebView.ts
packages/web-platform/web-elements/**/*.ts
📄 CodeRabbit inference engine (packages/web-platform/web-elements/AGENTS.md)
packages/web-platform/web-elements/**/*.ts: Useelement-reactivepatterns: inherit fromElement(viaComponentdecorator) and use reactive utilities when creating new elements
Avoid synchronous layout thrashing by usingboostedQueueMicrotaskfor DOM reads/writes when accurate layout info isn't immediately needed
Use CSS variables extensively (e.g.,--lynx-display,--lynx-linear-orientation) to drive layout and style from the Lynx engine
Files:
packages/web-platform/web-elements/src/elements/XWebView/XWebView.ts
packages/web-platform/web-elements/src/elements/**/*.ts
📄 CodeRabbit inference engine (packages/web-platform/web-elements/AGENTS.md)
packages/web-platform/web-elements/src/elements/**/*.ts: Define shadow DOM templates insrc/elements/htmlTemplates.tsrather than inline within element files
Tag names must use kebab-case; single-word names should be prefixed withx-(e.g.,x-view,scroll-view)
Minimize heavy computation inattributeChangedCallbackto keep main thread responsive
Files:
packages/web-platform/web-elements/src/elements/XWebView/XWebView.ts
packages/web-platform/web-elements/src/elements/**/!(index).ts
📄 CodeRabbit inference engine (packages/web-platform/web-elements/AGENTS.md)
Use PascalCase for class names (e.g.,
MyElement)
Files:
packages/web-platform/web-elements/src/elements/XWebView/XWebView.ts
🧠 Learnings (15)
📓 Common learnings
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-26T07:42:21.745Z
Learning: Applies to packages/web-platform/web-elements/**/*.ts : Use CSS variables extensively (e.g., `--lynx-display`, `--lynx-linear-orientation`) to drive layout and style from the Lynx engine
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-26T07:42:21.745Z
Learning: Applies to packages/web-platform/web-elements/**/package.json : Add export configuration under `"exports"` field for newly implemented components (types and default)
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-26T07:42:21.745Z
Learning: The `web-elements` package provides Native UI implementation using Web Components built on the `element-reactive` lightweight reactive framework for performance
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-26T05:10:01.595Z
Learning: Applies to packages/web-platform/web-tests/**/*.{ts,tsx,js} : Use Playwright for E2E tests in packages/web-platform/web-tests/
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-core-wasm/AGENTS.md:0-0
Timestamp: 2025-12-26T05:10:16.728Z
Learning: Applies to packages/web-platform/web-core-wasm/**/*.rs : All new features and bug fixes must be accompanied by unit tests.
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-26T07:42:21.745Z
Learning: Applies to packages/web-platform/web-elements/tests/**/*.spec.ts : Use Playwright for all E2E and functional tests with standard assertions like `expect(locator).toBeVisible()` and `expect(locator).toHaveCSS()`
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-26T07:42:21.745Z
Learning: Applies to packages/web-platform/web-elements/tests/**/*.spec.ts : Ensure test coverage includes attribute changes, style updates, and event handling
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-26T07:42:21.745Z
Learning: Applies to packages/web-platform/web-elements/src/elements/all.ts : Export all new components in `src/elements/all.ts` to ensure they are registered
📚 Learning: 2025-12-26T07:42:21.745Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-26T07:42:21.745Z
Learning: Applies to packages/web-platform/web-elements/**/*.ts : Use `element-reactive` patterns: inherit from `Element` (via `Component` decorator) and use reactive utilities when creating new elements
Applied to files:
packages/web-platform/web-elements/src/elements/XWebView/XWebView.ts
📚 Learning: 2025-12-26T07:42:21.745Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-26T07:42:21.745Z
Learning: Applies to packages/web-platform/web-elements/src/elements/**/*.ts : Define shadow DOM templates in `src/elements/htmlTemplates.ts` rather than inline within element files
Applied to files:
packages/web-platform/web-elements/src/elements/XWebView/XWebView.ts
📚 Learning: 2025-12-26T07:42:21.745Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-26T07:42:21.745Z
Learning: Applies to packages/web-platform/web-elements/src/elements/**/index.ts : Ensure `index.ts` files and complex logic have clear, descriptive comments matching the implementation
Applied to files:
packages/web-platform/web-elements/src/elements/XWebView/XWebView.ts
📚 Learning: 2025-12-26T07:42:21.745Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-26T07:42:21.745Z
Learning: Applies to packages/web-platform/web-elements/src/elements/**/*.ts : Minimize heavy computation in `attributeChangedCallback` to keep main thread responsive
Applied to files:
packages/web-platform/web-elements/src/elements/XWebView/XWebView.ts
📚 Learning: 2025-12-26T07:42:21.745Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-26T07:42:21.745Z
Learning: Applies to packages/web-platform/web-elements/src/elements/**/*.ts : Tag names must use kebab-case; single-word names should be prefixed with `x-` (e.g., `x-view`, `scroll-view`)
Applied to files:
packages/web-platform/web-elements/src/elements/XWebView/XWebView.ts
📚 Learning: 2025-12-26T07:42:21.745Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-26T07:42:21.745Z
Learning: Applies to packages/web-platform/web-elements/**/*.ts : Use CSS variables extensively (e.g., `--lynx-display`, `--lynx-linear-orientation`) to drive layout and style from the Lynx engine
Applied to files:
packages/web-platform/web-elements/src/elements/XWebView/XWebView.ts
📚 Learning: 2025-12-26T07:42:21.745Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-26T07:42:21.745Z
Learning: Applies to packages/web-platform/web-elements/**/*.ts : Avoid synchronous layout thrashing by using `boostedQueueMicrotask` for DOM reads/writes when accurate layout info isn't immediately needed
Applied to files:
packages/web-platform/web-elements/src/elements/XWebView/XWebView.ts
📚 Learning: 2025-12-26T07:42:21.745Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-26T07:42:21.745Z
Learning: Applies to packages/web-platform/web-elements/tests/**/*.spec.ts : Ensure test coverage includes attribute changes, style updates, and event handling
Applied to files:
packages/web-platform/web-elements/src/elements/XWebView/XWebView.ts
📚 Learning: 2025-12-26T07:42:21.745Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-26T07:42:21.745Z
Learning: Applies to packages/web-platform/web-elements/**/package.json : Add export configuration under `"exports"` field for newly implemented components (types and default)
Applied to files:
packages/web-platform/web-elements/src/elements/XWebView/XWebView.ts
📚 Learning: 2025-12-26T07:42:21.745Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-26T07:42:21.745Z
Learning: Applies to packages/web-platform/web-elements/src/elements/all.ts : Export all new components in `src/elements/all.ts` to ensure they are registered
Applied to files:
packages/web-platform/web-elements/src/elements/XWebView/XWebView.ts
📚 Learning: 2025-11-03T08:44:10.706Z
Learnt from: Sherry-hue
Repo: lynx-family/lynx-stack PR: 1911
File: packages/web-platform/web-elements/src/XList/ListItemAttributes.ts:24-29
Timestamp: 2025-11-03T08:44:10.706Z
Learning: In packages/web-platform/web-elements/src/XList/ListItemAttributes.ts, the `estimated-main-axis-size-px` attribute handler does not need to validate or guard against invalid/NaN values when parsing - data correctness verification is not required for this attribute.
Applied to files:
packages/web-platform/web-elements/src/elements/XWebView/XWebView.ts
📚 Learning: 2025-12-26T05:10:16.728Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-core-wasm/AGENTS.md:0-0
Timestamp: 2025-12-26T05:10:16.728Z
Learning: Applies to packages/web-platform/web-core-wasm/**/*.rs : Check if the comments in the code need to be updated to reflect your changes.
Applied to files:
packages/web-platform/web-elements/src/elements/XWebView/XWebView.ts
📚 Learning: 2025-12-26T05:10:16.728Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-core-wasm/AGENTS.md:0-0
Timestamp: 2025-12-26T05:10:16.728Z
Learning: Applies to packages/web-platform/web-core-wasm/**/AGENTS.md : Check if `AGENTS.md` needs to be updated to reflect your changes (e.g., new feature flags, structural changes, new dependencies).
Applied to files:
packages/web-platform/web-elements/src/elements/XWebView/XWebView.ts
📚 Learning: 2025-09-18T08:12:56.802Z
Learnt from: Sherry-hue
Repo: lynx-family/lynx-stack PR: 1770
File: packages/web-platform/web-mainthread-apis/src/utils/processStyleInfo.ts:316-318
Timestamp: 2025-09-18T08:12:56.802Z
Learning: In packages/web-platform/web-mainthread-apis/src/utils/processStyleInfo.ts, the current implementation uses cardStyleElement.textContent += for lazy component styles. While this could theoretically invalidate rule indices by reparsing the stylesheet, Sherry-hue indicated that UIDs don't repeat for the same element, making this approach acceptable for now. A future optimization to use separate style elements per entry was discussed but deferred to a separate PR to keep the current lazy bundle PR focused.
Applied to files:
packages/web-platform/web-elements/src/elements/XWebView/XWebView.ts
🔇 Additional comments (3)
packages/web-platform/web-elements/src/elements/XWebView/XWebView.ts (3)
1-15: LGTM! Clean component setup.The component follows element-reactive patterns correctly, uses proper tag naming (x-webview), and composes the necessary mixins. Import paths and decorator usage are correct.
17-20: LGTM! Proper DOM getter pattern.The use of
genDomGetterwith proper typing follows the element-reactive pattern for accessing shadow DOM elements.
110-132: LGTM! Standard attribute reflection pattern.The src and html properties correctly reflect their attributes with proper null handling. Note that these properties accept arbitrary URLs and HTML without validation, which places security responsibility on the component user—this is typical for webview/iframe wrappers.
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @lynx-js/gesture-runtime@2.1.1 ### Patch Changes - Add `NativeGesture` ([#2076](#2076)) ## @lynx-js/react@0.115.3 ### Patch Changes - Add dual-thread commutation logs for troubleshooting when `REACT_ALOG=true` or global define `__ALOG__` is set. ([#2081](#2081)) - Use error cause to simplify the error msg of lazy bundle loading. User can catch the error cause to get the original result: ([#2056](#2056)) ```ts const LazyComponent = lazy(async () => { try { const mod = await import("./lazy-bundle"); return mod.default; } catch (error) { console.error(`Lazy Bundle load failed message: ${error.message}`); // User can catch the error cause to get the original result console.error(`Lazy Bundle load failed result: ${error.cause}`); throw error; } }); ``` ## @lynx-js/rspeedy@0.12.5 ### Patch Changes - Updated dependencies \[]: - @lynx-js/web-rsbuild-server-middleware@0.19.4 ## @lynx-js/react-rsbuild-plugin@0.12.4 ### Patch Changes - ([#2051](#2051)) - Updated dependencies \[]: - @lynx-js/react-alias-rsbuild-plugin@0.12.4 - @lynx-js/use-sync-external-store@1.5.0 - @lynx-js/react-refresh-webpack-plugin@0.3.4 - @lynx-js/react-webpack-plugin@0.7.3 ## @lynx-js/testing-environment@0.1.9 ### Patch Changes - Fix duplicated `<page />` elements on body when multiple `__CreatePage` called. ([#2065](#2065)) ## @lynx-js/web-constants@0.19.4 ### Patch Changes - Updated dependencies \[[`bba05e2`](bba05e2)]: - @lynx-js/web-worker-rpc@0.19.4 ## @lynx-js/web-core@0.19.4 ### Patch Changes - Updated dependencies \[[`bba05e2`](bba05e2)]: - @lynx-js/web-worker-rpc@0.19.4 - @lynx-js/web-constants@0.19.4 - @lynx-js/web-worker-runtime@0.19.4 - @lynx-js/web-mainthread-apis@0.19.4 ## @lynx-js/web-elements@0.10.1 ### Patch Changes - feat: implement x-webview component ([#2061](#2061)) - feat: support `recyclable="false"` on `list-item` and enable overflow visibility ([#2069](#2069)) ## @lynx-js/web-mainthread-apis@0.19.4 ### Patch Changes - Updated dependencies \[]: - @lynx-js/web-constants@0.19.4 ## @lynx-js/web-worker-rpc@0.19.4 ### Patch Changes - Ensure the `default` export entry is last in the package exports map. ([#2075](#2075)) ## @lynx-js/web-worker-runtime@0.19.4 ### Patch Changes - Updated dependencies \[[`bba05e2`](bba05e2)]: - @lynx-js/web-worker-rpc@0.19.4 - @lynx-js/web-constants@0.19.4 - @lynx-js/web-mainthread-apis@0.19.4 ## create-rspeedy@0.12.5 ## @lynx-js/react-alias-rsbuild-plugin@0.12.4 ## upgrade-rspeedy@0.12.5 ## @lynx-js/web-core-server@0.19.4 ## @lynx-js/web-rsbuild-server-middleware@0.19.4 Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
2 participants
…and tests.
Summary by CodeRabbit
New Features
Documentation
Style
Tests
Chores
✏️ Tip: You can customize this high-level summary in your review settings.
Checklist