feat: intergrate the LinearContainer Compat plugin#2100
feat: intergrate the LinearContainer Compat plugin#2100PupilTong merged 2 commits intolynx-family:mainfrom
Conversation
🦋 Changeset detectedLatest commit: 0cabea7 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 |
📝 WalkthroughWalkthroughIntegrates the LinearContainer compat plugin and conditionally exports it, reorganizes CSS imports to per-element files, removes legacy linear CSS and some package exports, refactors Component event handling, adds event tests/fixtures, and updates E2E tests to single-thread mode while removing swipe/drag utilities. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~50 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 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 |
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
packages/web-platform/web-core-wasm-e2e/tests/web-core.test.ts (1)
368-397: Variable scoping bug:successis not shared between contexts.The
successvariable declared on line 372 exists in the Node.js test context, but the event listener on line 379 runs in the browser context wheresuccessis undefined. The assignmentsuccess = truecreates/modifies a different variable in the browser's global scope. Lines 393-395 try to read this browser-globalsuccess, which was never declared withlet.🐛 Proposed fix using window property
test('event-i18n-resources-missed', async ({ page, browserName }) => { // firefox dose not support this. test.skip(browserName === 'firefox'); await goto(page); - let success = false; await page.evaluate(() => { + (window as any).i18nTestSuccess = false; (document.querySelector('lynx-view') as LynxViewElement).addEventListener( 'i18nResourceMissed', (event) => { // @ts-expect-error if (event.detail.channel === '2') { - success = true; + (window as any).i18nTestSuccess = true; } }, ); }); await page.evaluate(() => { globalThis.runtime.renderPage = () => {}; globalThis.runtime._I18nResourceTranslation({ locale: 'en', channel: '2', fallback_url: '', }); }); await wait(500); - success = await page.evaluate<boolean>(() => { - return success; - }); + const success = await page.evaluate<boolean>(() => { + return (window as any).i18nTestSuccess; + }); expect(success).toBeTruthy(); });packages/web-platform/web-elements/src/element-reactive/component.ts (1)
327-345: Listener count not decremented when > 1, causing count drift.When
currentListenerCount > 1, the code does nothing—the WeakMap value is never decremented, anddisableEventis never called. This creates a count mismatch:
addEventListener('click', fn)→ count=1, WeakMap: fn→1addEventListener('click', fn)→ count=2, WeakMap: fn→2removeEventListener('click', fn)→ currentListenerCount=2, no decrement, count stays 2- Subsequent removes also do nothing
The count will only decrease when
currentListenerCount === 1, but it can never reach 1 if it was incremented past that.Proposed fix
override removeEventListener( type: string, listener: EventListener, options?: AddEventListenerOptions | boolean, ): void { super.removeEventListener(type, listener, options); const capture = typeof options === 'object' ? options.capture : options; const targetEventInfo = this.#eventListenerMap[type]; if (targetEventInfo && targetEventInfo.count > 0) { const targetMap = capture ? targetEventInfo.captureListenerCount : targetEventInfo.listenerCount; const currentListenerCount = targetMap.get(listener); - if (currentListenerCount === 1) { - targetMap.delete(listener); - this.disableEvent(type); + if (currentListenerCount !== undefined) { + if (currentListenerCount === 1) { + targetMap.delete(listener); + } else { + targetMap.set(listener, currentListenerCount - 1); + } + this.disableEvent(type); } } }
🤖 Fix all issues with AI agents
In @.changeset/wide-views-admire.md:
- Line 9: The sentence in the changeset has grammar and spelling mistakes and an
inconsistent component name: replace "Not we intergrated the `LinearCompat` in
the @lynx-js/web-elements. Developers could safely remove the following
imports:" with a corrected version such as "Now we integrated the
`LinearContainer` into `@lynx-js/web-elements`. Developers can safely remove the
following imports:" — correct "Not" → "Now", "intergrated" → "integrated",
update `LinearCompat` → `LinearContainer` for consistency, and change "could" →
"can" for present-tense clarity.
- Line 5: Replace the misspelled word in the changelog header: update the entry
"feat: intergrate the LinearContainer Compat plugin" by changing "intergrate" to
"integrate" so it reads "feat: integrate the LinearContainer Compat plugin".
In
@packages/web-platform/web-elements/src/compat/LinearContainer/linear-compat.css:
- Around line 104-123: The selectors for the vertical and horizontal reverse
cases are missing the child combinator and currently apply align-self to the
container rather than its children; update the selectors so every option targets
children consistently (e.g., change
[lynx-computed-display="linear"][lynx-linear-orientation="vertical-reverse"] to
[lynx-computed-display="linear"][lynx-linear-orientation="vertical-reverse"] > *
and likewise change
[lynx-computed-display="linear"][lynx-linear-orientation="horizontal-reverse"]
to
[lynx-computed-display="linear"][lynx-linear-orientation="horizontal-reverse"] >
*) so that align-self: var(--align-self-column) and align-self:
var(--align-self-row) apply to child elements (including the lynx-wrapper > *
variants) rather than the container.
🧹 Nitpick comments (2)
packages/web-platform/web-elements/tests/fixtures/component-event-test.html (1)
14-74: Remove exploratory dead code.Lines 14-74 contain unused classes (
EventTracker,EventTrackerImpl) and lengthy inline comments explaining decorator mechanics. While helpful during development, this adds noise to the test fixture. Consider removing or moving to a separate documentation file.♻️ Simplified fixture without exploratory code
const { Component, registerEventEnableStatusChangeHandler } = globalThis; - class EventTracker { - static observedAttributes = []; - } - // Apply decorator manually since we are in potentially non-transpiled JS or simpler env - // But decorators usually need transpilation. - // Actually, since this is running in browser via simple script tag, we can't use TS decorators directly unless we use the return value of registerEventEnableStatusChangeHandler as a function wrapper if it supports it, OR we just use the prototype manipulation if the decorator helper is available. - // Wait, the previous code used TS decorators. - // `registerEventEnableStatusChangeHandler` is a function that returns a decorator. - - // Let's check how registerEventEnableStatusChangeHandler is implemented. - // distinct from the TS decorator, we might need to apply it manually. - - // Let's implement it in a way that works in browser JS (if the build supports it). - // Since main.js is built from shell-project.ts which includes the libs. - - // The decorator implementation: - // export const registerEventEnableStatusChangeHandler = generateRegister<...>(...); - // generateRegister returns a decorator function (target, context) => ... - - // In TS 5.0 decorators are functions. In legacy experiment decorators they are also functions. - - // However, writing raw ES classes in HTML script tag means no TS compilation. - // We can simulate what the decorator does or just define the reactive class structure manually if we know it. - - // Looking at `component.ts`: - // `Component` takes (tag, attributeReactiveClassesOptional, template). - // `AttributeReactiveClass` expects `observedAttributes`, `eventStatusChangedHandler` etc. - - // So we can define the class directly without decorators if we construct the metadata manually. - - class EventTrackerImpl { - static observedAttributes = []; - static eventStatusChangedHandler = { - 'custom-event': function(status, type) { - if (!window.eventEvents) { - window.eventEvents = []; - } - window.eventEvents.push({ type, status }); - }, - }; - } - - // Logic from `registerEventStatusChangedHandler.ts` -> `generateRegister` - // It basically registers the handler to a static `eventStatusChangedHandler` map or similar? - // Actually `generateRegister` creates a method decorator. - - // If we look at `component.ts`: - // export type AttributeReactiveObject = { - // eventStatusChangedHandler?: Record<string, EventStatusChangeHandler>; - // ... - // } - - // And `Component` uses `new oneClass(this)`. - - // So the instances of `EventTracker` need to have `eventStatusChangedHandler`. - // Or the class `EventTracker` needs to have the static metadata if `Component` reads it from static? - - // `component.ts`: - // 296: const handler = oneReactive.eventStatusChangedHandler?.[type]; - - // So `oneReactive` (instance of AttributeReactiveClass) must have `eventStatusChangedHandler` property. - + // EventTrackerManual provides the eventStatusChangedHandler for testing + // event enable/disable status tracking class EventTrackerManual {packages/web-platform/web-elements/tests/component-event.spec.ts (1)
3-8: Use proper PlaywrightPagetype instead ofany.The
pageparameter is typed asany, losing type safety. Import and use thePagetype from Playwright.♻️ Proposed fix
import { test, expect } from '@lynx-js/playwright-fixtures'; +import type { Page } from '@playwright/test'; -const gotoWebComponentPage = async (page: any, testname: string) => { +const gotoWebComponentPage = async (page: Page, testname: string) => { await page.goto(`/tests/fixtures/${testname}.html`, { waitUntil: 'load', }); await page.evaluate(() => document.fonts.ready); };
ecf66fa to
522d08e
Compare
There was a problem hiding this comment.
Actionable comments posted: 4
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
packages/web-platform/web-core-wasm-e2e/tests/web-core.test.ts (1)
368-397: Bug:successvariable scope issue in page context.There's a variable scoping issue in this test:
successis declared in the test context (line 372)- In
page.evaluateat line 373,successis captured but assigning to it inside the callback won't update the outer variable- At lines 393-395,
page.evaluate<boolean>(() => { return success; })tries to readsuccessfrom the page context, but it doesn't exist thereThis test will always fail or throw a ReferenceError.
🐛 Suggested fix using page-level variable
test('event-i18n-resources-missed', async ({ page, browserName }) => { // firefox dose not support this. test.skip(browserName === 'firefox'); await goto(page); - let success = false; await page.evaluate(() => { + (window as any).__testSuccess = false; (document.querySelector('lynx-view') as LynxViewElement).addEventListener( 'i18nResourceMissed', (event) => { // @ts-expect-error if (event.detail.channel === '2') { - success = true; + (window as any).__testSuccess = true; } }, ); }); await page.evaluate(() => { globalThis.runtime.renderPage = () => {}; globalThis.runtime._I18nResourceTranslation({ locale: 'en', channel: '2', fallback_url: '', }); }); await wait(500); - success = await page.evaluate<boolean>(() => { - return success; - }); + const success = await page.evaluate<boolean>(() => { + return (window as any).__testSuccess; + }); expect(success).toBeTruthy(); });packages/web-platform/web-elements/src/element-reactive/component.ts (1)
311-345: Fix critical event listener counting mismatch.The current implementation has a logic error in
removeEventListenerthat breaks the symmetry withaddEventListener:The bug:
addEventListeneralways callsenableEvent(incrementing the global count) and always increments the per-listener countremoveEventListeneronly callsdisableEventwhencurrentListenerCount === 1, and never decrements the per-listener count otherwiseImpact:
This causes a counting mismatch where if the same listener is added twice:
- Global count becomes 2, per-listener count becomes 2
- First removal: per-listener count is 2 (not 1), so
disableEventis not called- Second removal: per-listener count is still 2 (never decremented), so
disableEventis still not called- Result:
eventStatusChangedHandlernever gets called withfalse, event tracking is never disabled, and memory leaks occur🐛 Proposed fix for the counting logic
override removeEventListener( type: string, listener: EventListener, options?: AddEventListenerOptions | boolean, ): void { super.removeEventListener(type, listener, options); const capture = typeof options === 'object' ? options.capture : options; const targetEventInfo = this.#eventListenerMap[type]; if (targetEventInfo && targetEventInfo.count > 0) { const targetMap = capture ? targetEventInfo.captureListenerCount : targetEventInfo.listenerCount; const currentListenerCount = targetMap.get(listener); - if (currentListenerCount === 1) { + if (currentListenerCount && currentListenerCount > 0) { + if (currentListenerCount === 1) { + targetMap.delete(listener); + } else { + targetMap.set(listener, currentListenerCount - 1); + } - targetMap.delete(listener); this.disableEvent(type); + } } }This fix ensures:
- Per-listener count is always decremented when > 1
disableEventis called for everyremoveEventListener, balancing theenableEventcalls fromaddEventListener
🤖 Fix all issues with AI agents
In @.changeset/wide-views-admire.md:
- Line 5: Correct the spelling in the changeset title: replace the word
"intergrate" with "integrate" in the line that currently reads "feat: intergrate
the LinearContainer Compat plugin" so it becomes "feat: integrate the
LinearContainer Compat plugin".
- Line 9: Fix the grammar on the sentence that currently reads "Not we
intergrated the `LinearCompat` in the @lynx-js/web-elements. Developers could
safely remove the following imports:" by replacing it with a corrected version
such as "Now we integrated the `LinearCompat` into @lynx-js/web-elements.
Developers can safely remove the following imports:" — update the text in
.changeset/wide-views-admire.md where that string appears, correcting
"Not"→"Now", "intergrated"→"integrated", "in"→"into", and "could"→"can".
In
@packages/web-platform/web-elements/src/compat/LinearContainer/linear-compat.css:
- Around line 104-123: The CSS selectors for reverse orientations are missing
the child combinator and thus target the container instead of its children;
update the selectors
[lynx-computed-display="linear"][lynx-linear-orientation="vertical-reverse"] and
[lynx-computed-display="linear"][lynx-linear-orientation="horizontal-reverse"]
to include " > *" (i.e., change them to
[lynx-computed-display="linear"][lynx-linear-orientation="vertical-reverse"] >
*, and
[lynx-computed-display="linear"][lynx-linear-orientation="horizontal-reverse"] >
*) so the align-self declarations apply to child elements rather than the
container.
In @packages/web-platform/web-elements/tests/fixtures/component-event-test.html:
- Around line 14-75: Remove the unused EventTracker and EventTrackerImpl classes
and all explanatory comments, and replace them with a minimal setup: initialize
window.eventEvents = []; define a single small EventTracker class with static
observedAttributes = [] and an eventStatusChangedHandler (either static or on
the prototype/instance) that handles 'custom-event' by pushing {type, status}
into window.eventEvents so that Component's lookup
(oneReactive.eventStatusChangedHandler?.[type]) finds the handler; keep the
fixture concise and only include these necessary pieces.
🧹 Nitpick comments (5)
.changeset/wide-views-admire.md (1)
7-7: Consider using a proper heading instead of bold text.The markdown linter suggests using a heading (e.g.,
## This is a BREAKING CHANGE) instead of bold emphasis for better semantic structure.♻️ Optional refactor
-**This is a BREAKING CHANGE** +## BREAKING CHANGEpackages/web-platform/web-elements/src/compat/LinearContainer/LinearContainer.ts (1)
71-75: Consider improving type safety forcssPropertyChangedHandler.The
@ts-expect-errorcomment suggests a type mismatch when assigningcssPropertyChangedHandler. While this works at runtime, consider defining a proper interface or type assertion to improve maintainability and catch future type errors.packages/web-platform/web-core-wasm-e2e/tests/web-core.test.ts (1)
21-26: Remove unusedtitleparameter.The
titleparameter is declared but never used in the function body. Consider removing it to avoid confusion.♻️ Suggested fix
-const goto = async (page: Page, title?: string) => { +const goto = async (page: Page) => { await page.goto('/?resourceName=web-core.main-thread.json', { waitUntil: 'load', }); await wait(500); };packages/web-platform/web-elements/tests/fixtures/shell-project.ts (1)
5-10: Remove unusedregisterEventEnableStatusChangeHandlerexport.The
registerEventEnableStatusChangeHandleris exposed onglobalThisbut is never used incomponent-event-test.html. The fixture manually constructs the event handler structure instead of using this decorator function.♻️ Simplify by removing unused export
-import { Component } from '../../src/element-reactive/component.js'; -import { registerEventEnableStatusChangeHandler } from '../../src/element-reactive/registerEventStatusChangedHandler.js'; +import { Component } from '../../src/element-reactive/component.js'; (globalThis as any).Component = Component; -(globalThis as any).registerEventEnableStatusChangeHandler = - registerEventEnableStatusChangeHandler;packages/web-platform/web-elements/tests/fixtures/component-event-test.html (1)
11-12: Remove unusedregisterEventEnableStatusChangeHandlervariable.The
registerEventEnableStatusChangeHandleris destructured fromglobalThisbut never used in this fixture.♻️ Simplify destructuring
- const { Component, registerEventEnableStatusChangeHandler } = - globalThis; + const { Component } = globalThis;
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (31)
.changeset/wide-views-admire.mdpackages/web-platform/web-core-wasm-e2e/tests/utils.tspackages/web-platform/web-core-wasm-e2e/tests/web-core.test.tspackages/web-platform/web-core-wasm/css/in_shadow.csspackages/web-platform/web-core-wasm/css/linear.csspackages/web-platform/web-elements/elements.csspackages/web-platform/web-elements/index.csspackages/web-platform/web-elements/package.jsonpackages/web-platform/web-elements/src/compat/LinearContainer/LinearContainer.tspackages/web-platform/web-elements/src/compat/LinearContainer/linear-compat.csspackages/web-platform/web-elements/src/compat/index.tspackages/web-platform/web-elements/src/element-reactive/component.tspackages/web-platform/web-elements/src/elements/ScrollView/ScrollView.tspackages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewHeaderNg.tspackages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewNg.tspackages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewSlotDragNg.tspackages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewSlotNg.tspackages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewToolbarNg.tspackages/web-platform/web-elements/src/elements/XRefreshView/XRefreshFooter.tspackages/web-platform/web-elements/src/elements/XRefreshView/XRefreshHeader.tspackages/web-platform/web-elements/src/elements/XRefreshView/XRefreshView.tspackages/web-platform/web-elements/src/elements/XSwiper/SwiperItem.tspackages/web-platform/web-elements/src/elements/XView/XView.tspackages/web-platform/web-elements/src/elements/XViewpagerNg/XViewpagerItemNg.tspackages/web-platform/web-elements/src/elements/XViewpagerNg/XViewpagerNg.tspackages/web-platform/web-elements/src/elements/common-css/linear.csspackages/web-platform/web-elements/tests/component-event.spec.tspackages/web-platform/web-elements/tests/fixtures/component-event-test.htmlpackages/web-platform/web-elements/tests/fixtures/shell-project.tspackages/web-platform/web-tests/shell-project/lynx-view.tspackages/web-platform/web-tests/shell-project/web-core.ts
💤 Files with no reviewable changes (7)
- packages/web-platform/web-elements/package.json
- packages/web-platform/web-elements/src/elements/common-css/linear.css
- packages/web-platform/web-tests/shell-project/web-core.ts
- packages/web-platform/web-core-wasm-e2e/tests/utils.ts
- packages/web-platform/web-elements/elements.css
- packages/web-platform/web-tests/shell-project/lynx-view.ts
- packages/web-platform/web-core-wasm/css/linear.css
🚧 Files skipped from review as they are similar to previous changes (11)
- packages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewHeaderNg.ts
- packages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewToolbarNg.ts
- packages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewSlotDragNg.ts
- packages/web-platform/web-elements/src/elements/XSwiper/SwiperItem.ts
- packages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewNg.ts
- packages/web-platform/web-elements/src/elements/XViewpagerNg/XViewpagerNg.ts
- packages/web-platform/web-elements/tests/component-event.spec.ts
- packages/web-platform/web-elements/src/elements/XRefreshView/XRefreshFooter.ts
- packages/web-platform/web-elements/index.css
- packages/web-platform/web-elements/src/elements/XViewpagerNg/XViewpagerItemNg.ts
- packages/web-platform/web-elements/src/elements/ScrollView/ScrollView.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/compat/index.tspackages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewSlotNg.tspackages/web-platform/web-elements/src/elements/XRefreshView/XRefreshView.tspackages/web-platform/web-core-wasm-e2e/tests/web-core.test.tspackages/web-platform/web-elements/src/compat/LinearContainer/LinearContainer.tspackages/web-platform/web-elements/src/element-reactive/component.tspackages/web-platform/web-elements/src/elements/XRefreshView/XRefreshHeader.tspackages/web-platform/web-elements/tests/fixtures/shell-project.tspackages/web-platform/web-elements/src/elements/XView/XView.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/compat/index.tspackages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewSlotNg.tspackages/web-platform/web-elements/src/elements/XRefreshView/XRefreshView.tspackages/web-platform/web-core-wasm-e2e/tests/web-core.test.tspackages/web-platform/web-elements/src/compat/LinearContainer/LinearContainer.tspackages/web-platform/web-elements/src/element-reactive/component.tspackages/web-platform/web-elements/src/elements/XRefreshView/XRefreshHeader.tspackages/web-platform/web-elements/tests/fixtures/shell-project.tspackages/web-platform/web-elements/src/elements/XView/XView.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: When creating new elements, inherit fromElementviaComponentdecorator and use reactive utilities provided byelement-reactive
UseboostedQueueMicrotaskfor DOM reads/writes to avoid synchronous layout thrashing when accurate layout info isn't immediately needed
Do NOT implement attribute handlers decorated with@registerAttributeHandlerdirectly on the main Element class decorated with@Component. Create a separate Attribute Class implementingAttributeReactiveClasslogic and pass it as the second argument to the@Componentdecorator
Add boolean-like attributes that should not be filtered when set to 'false' string to thestatic readonly notToFilterFalseAttributesSet in the component class
UsegenDomGetterto safely access internal elements within the Shadow DOM
When implementing a new web element, use PascalCase for class names (e.g.,MyElement) and kebab-case for tag names, prefixing single-word names withx-(e.g.,x-view,scroll-view)
Minimize heavy computation inattributeChangedCallbackas these elements run on the main thread
Group DOM updates to minimize layout thrashing in web component implementations
Files:
packages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewSlotNg.tspackages/web-platform/web-elements/src/elements/XRefreshView/XRefreshView.tspackages/web-platform/web-elements/src/elements/XRefreshView/XRefreshHeader.tspackages/web-platform/web-elements/src/elements/XView/XView.ts
packages/web-platform/web-elements/src/**/*.css
📄 CodeRabbit inference engine (packages/web-platform/web-elements/AGENTS.md)
packages/web-platform/web-elements/src/**/*.css: Respect existing polyfills insrc/compatand check browser support before using bleeding-edge CSS features
Use custom CSS properties to control linear layout behavior:--lynx-display: linear,--lynx-linear-orientation,--lynx-linear-weight,--lynx-linear-weight-sum, and--lynx-linear-weight-basis
Files:
packages/web-platform/web-elements/src/compat/LinearContainer/linear-compat.css
packages/web-platform/web-elements/tests/fixtures/**/*.html
📄 CodeRabbit inference engine (packages/web-platform/web-elements/AGENTS.md)
Use HTML files for test fixtures and define a helper function
goto(page, fixtureName)to handle navigation and waiting for resources likedocument.fonts.ready
Files:
packages/web-platform/web-elements/tests/fixtures/component-event-test.html
🧠 Learnings (55)
📓 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-29T11:26:09.502Z
Learning: Applies to packages/web-platform/web-elements/src/**/*.css : Use custom CSS properties to control linear layout behavior: `--lynx-display: linear`, `--lynx-linear-orientation`, `--lynx-linear-weight`, `--lynx-linear-weight-sum`, and `--lynx-linear-weight-basis`
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
Learning: Applies to packages/web-platform/web-elements/src/**/*.css : Respect existing polyfills in `src/compat` and check browser support before using bleeding-edge CSS features
📚 Learning: 2025-12-29T11:26:09.502Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
Learning: Applies to packages/web-platform/web-elements/src/elements/all.ts : Export new components in `src/elements/all.ts` and add export configuration to `package.json` under `exports` for both types and default
Applied to files:
packages/web-platform/web-elements/src/compat/index.tspackages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewSlotNg.tspackages/web-platform/web-elements/src/elements/XRefreshView/XRefreshView.tspackages/web-platform/web-elements/src/compat/LinearContainer/LinearContainer.tspackages/web-platform/web-elements/src/element-reactive/component.tspackages/web-platform/web-elements/src/elements/XRefreshView/XRefreshHeader.tspackages/web-platform/web-elements/tests/fixtures/component-event-test.htmlpackages/web-platform/web-elements/tests/fixtures/shell-project.tspackages/web-platform/web-elements/src/elements/XView/XView.ts
📚 Learning: 2025-12-29T11:26:09.502Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
Learning: Applies to packages/web-platform/web-elements/src/**/*.css : Use custom CSS properties to control linear layout behavior: `--lynx-display: linear`, `--lynx-linear-orientation`, `--lynx-linear-weight`, `--lynx-linear-weight-sum`, and `--lynx-linear-weight-basis`
Applied to files:
packages/web-platform/web-elements/src/compat/index.ts.changeset/wide-views-admire.mdpackages/web-platform/web-elements/src/compat/LinearContainer/LinearContainer.tspackages/web-platform/web-core-wasm/css/in_shadow.csspackages/web-platform/web-elements/src/compat/LinearContainer/linear-compat.csspackages/web-platform/web-elements/src/elements/XView/XView.ts
📚 Learning: 2025-12-29T11:26:09.502Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
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/compat/index.tspackages/web-platform/web-elements/src/elements/XRefreshView/XRefreshView.tspackages/web-platform/web-elements/src/compat/LinearContainer/LinearContainer.tspackages/web-platform/web-elements/src/element-reactive/component.tspackages/web-platform/web-elements/src/elements/XRefreshView/XRefreshHeader.tspackages/web-platform/web-elements/tests/fixtures/component-event-test.htmlpackages/web-platform/web-elements/tests/fixtures/shell-project.tspackages/web-platform/web-elements/src/elements/XView/XView.ts
📚 Learning: 2025-12-29T11:26:09.502Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
Learning: Applies to packages/web-platform/web-elements/src/**/*.css : Respect existing polyfills in `src/compat` and check browser support before using bleeding-edge CSS features
Applied to files:
packages/web-platform/web-elements/src/compat/index.tspackages/web-platform/web-elements/src/compat/LinearContainer/LinearContainer.tspackages/web-platform/web-core-wasm/css/in_shadow.csspackages/web-platform/web-elements/src/compat/LinearContainer/linear-compat.css
📚 Learning: 2025-12-29T11:26:09.502Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
Learning: Applies to packages/web-platform/web-elements/src/elements/**/*.ts : When creating new elements, inherit from `Element` via `Component` decorator and use reactive utilities provided by `element-reactive`
Applied to files:
packages/web-platform/web-elements/src/compat/index.tspackages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewSlotNg.tspackages/web-platform/web-elements/src/elements/XRefreshView/XRefreshView.tspackages/web-platform/web-elements/src/compat/LinearContainer/LinearContainer.tspackages/web-platform/web-elements/src/element-reactive/component.tspackages/web-platform/web-elements/src/elements/XRefreshView/XRefreshHeader.tspackages/web-platform/web-elements/tests/fixtures/component-event-test.htmlpackages/web-platform/web-elements/tests/fixtures/shell-project.tspackages/web-platform/web-elements/src/elements/XView/XView.ts
📚 Learning: 2025-12-29T11:26:09.502Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
Learning: Applies to packages/web-platform/web-elements/src/elements/**/*.ts : Group DOM updates to minimize layout thrashing in web component implementations
Applied to files:
packages/web-platform/web-elements/src/compat/index.tspackages/web-platform/web-elements/src/elements/XRefreshView/XRefreshView.tspackages/web-platform/web-core-wasm-e2e/tests/web-core.test.tspackages/web-platform/web-elements/src/compat/LinearContainer/LinearContainer.tspackages/web-platform/web-elements/src/compat/LinearContainer/linear-compat.csspackages/web-platform/web-elements/src/element-reactive/component.tspackages/web-platform/web-elements/src/elements/XRefreshView/XRefreshHeader.tspackages/web-platform/web-elements/tests/fixtures/component-event-test.htmlpackages/web-platform/web-elements/tests/fixtures/shell-project.tspackages/web-platform/web-elements/src/elements/XView/XView.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, 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/wide-views-admire.mdpackages/web-platform/web-core-wasm/css/in_shadow.css
📚 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/wide-views-admire.md
📚 Learning: 2025-12-29T11:26:09.502Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
Learning: The `web-elements` package provides a Native UI implementation for the LynxJS Web Platform using Web Components built on the `element-reactive` reactive framework
Applied to files:
.changeset/wide-views-admire.mdpackages/web-platform/web-elements/src/compat/LinearContainer/LinearContainer.tspackages/web-platform/web-core-wasm/css/in_shadow.csspackages/web-platform/web-elements/tests/fixtures/shell-project.ts
📚 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/wide-views-admire.md
📚 Learning: 2025-08-14T12:54:51.143Z
Learnt from: upupming
Repo: lynx-family/lynx-stack PR: 1370
File: .changeset/brave-melons-add.md:1-7
Timestamp: 2025-08-14T12:54:51.143Z
Learning: In the lynx-family/lynx-stack repository, packages use 0.x.x versioning where minor version bumps indicate breaking changes (not major bumps), following pre-1.0 semantic versioning conventions.
Applied to files:
.changeset/wide-views-admire.md
📚 Learning: 2025-08-19T11:25:36.127Z
Learnt from: colinaaa
Repo: lynx-family/lynx-stack PR: 1558
File: .changeset/solid-squids-fall.md:2-2
Timestamp: 2025-08-19T11:25:36.127Z
Learning: In the lynx-family/lynx-stack repository, changesets should use the exact package name from package.json#name, not generic or unscoped names. Each package has its own specific scoped name (e.g., "lynx-js/react-transform" for packages/react/transform).
Applied to files:
.changeset/wide-views-admire.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/wide-views-admire.md
📚 Learning: 2025-08-13T11:36:12.075Z
Learnt from: colinaaa
Repo: lynx-family/lynx-stack PR: 1523
File: vitest.config.ts:52-72
Timestamp: 2025-08-13T11:36:12.075Z
Learning: The lynx-stack project requires Node.js >=22 as specified in package.json engines, so Node.js compatibility fallbacks for features introduced before v22 are unnecessary.
Applied to files:
.changeset/wide-views-admire.md
📚 Learning: 2025-09-18T04:43:54.426Z
Learnt from: gaoachao
Repo: lynx-family/lynx-stack PR: 1771
File: packages/react/transform/tests/__swc_snapshots__/src/swc_plugin_snapshot/mod.rs/basic_component_with_static_sibling.js:2-2
Timestamp: 2025-09-18T04:43:54.426Z
Learning: In the lynx-family/lynx-stack repository, the `add_pure_comment` function in packages/react/transform/src/swc_plugin_compat/mod.rs (around lines 478-482) is specifically for `wrapWithLynxComponent` calls, not `createSnapshot` calls. The PURE comment injection for `createSnapshot` is handled separately in swc_plugin_snapshot/mod.rs.
Applied to files:
.changeset/wide-views-admire.md
📚 Learning: 2025-12-29T11:26:09.502Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
Learning: Applies to packages/web-platform/web-elements/tests/**/*.spec.ts : Create a separate spec file for new components (e.g., `tests/x-webview.spec.ts`) instead of adding to the monolithic `web-elements.spec.ts`
Applied to files:
packages/web-platform/web-elements/src/elements/XRefreshView/XRefreshView.tspackages/web-platform/web-core-wasm-e2e/tests/web-core.test.tspackages/web-platform/web-elements/tests/fixtures/component-event-test.htmlpackages/web-platform/web-elements/tests/fixtures/shell-project.tspackages/web-platform/web-elements/src/elements/XView/XView.ts
📚 Learning: 2025-12-29T11:26:09.502Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
Learning: Applies to packages/web-platform/web-elements/src/elements/**/*.ts : Do NOT implement attribute handlers decorated with `registerAttributeHandler` directly on the main Element class decorated with `Component`. Create a separate Attribute Class implementing `AttributeReactiveClass` logic and pass it as the second argument to the `Component` decorator
Applied to files:
packages/web-platform/web-elements/src/elements/XRefreshView/XRefreshView.tspackages/web-platform/web-elements/src/compat/LinearContainer/LinearContainer.tspackages/web-platform/web-elements/src/element-reactive/component.tspackages/web-platform/web-elements/tests/fixtures/component-event-test.htmlpackages/web-platform/web-elements/tests/fixtures/shell-project.ts
📚 Learning: 2025-12-29T11:26:09.502Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
Learning: Applies to packages/web-platform/web-elements/src/elements/**/*.ts : Minimize heavy computation in `attributeChangedCallback` as these elements run on the main thread
Applied to files:
packages/web-platform/web-elements/src/elements/XRefreshView/XRefreshView.tspackages/web-platform/web-elements/src/compat/LinearContainer/LinearContainer.tspackages/web-platform/web-elements/src/element-reactive/component.tspackages/web-platform/web-elements/src/elements/XRefreshView/XRefreshHeader.tspackages/web-platform/web-elements/tests/fixtures/component-event-test.htmlpackages/web-platform/web-elements/tests/fixtures/shell-project.ts
📚 Learning: 2025-12-29T11:26:09.502Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
Learning: Applies to packages/web-platform/web-elements/src/elements/{x-input,x-textarea,x-image}/**/*.ts : For `x-input`, `x-textarea`, and `x-image` elements, control styling properties like placeholders and blur radii via attributes (e.g., `placeholder-color`, `blur-radius`) which internally map to CSS variables
Applied to files:
packages/web-platform/web-elements/src/elements/XRefreshView/XRefreshView.tspackages/web-platform/web-elements/src/compat/LinearContainer/LinearContainer.tspackages/web-platform/web-core-wasm/css/in_shadow.csspackages/web-platform/web-elements/src/compat/LinearContainer/linear-compat.css
📚 Learning: 2025-12-29T11:26:09.502Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
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()`, `expect(locator).toHaveCSS()`, and `diffScreenShot` for screenshot comparisons
Applied to files:
packages/web-platform/web-core-wasm-e2e/tests/web-core.test.tspackages/web-platform/web-elements/tests/fixtures/component-event-test.htmlpackages/web-platform/web-elements/tests/fixtures/shell-project.ts
📚 Learning: 2025-12-26T05:10:01.608Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-26T05:10:01.608Z
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-core-wasm-e2e/tests/web-core.test.tspackages/web-platform/web-elements/tests/fixtures/shell-project.ts
📚 Learning: 2025-12-29T11:26:09.502Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
Learning: Applies to packages/web-platform/web-elements/tests/fixtures/**/*.html : Use HTML files for test fixtures and define a helper function `goto(page, fixtureName)` to handle navigation and waiting for resources like `document.fonts.ready`
Applied to files:
packages/web-platform/web-core-wasm-e2e/tests/web-core.test.tspackages/web-platform/web-elements/tests/fixtures/component-event-test.htmlpackages/web-platform/web-elements/tests/fixtures/shell-project.ts
📚 Learning: 2025-12-29T11:26:09.502Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
Learning: Applies to packages/web-platform/web-elements/tests/**/*.spec.ts : When a component makes external requests (e.g., via `iframe` or `fetch`), mock them using `page.route` in Playwright tests to ensure tests are hermetic and fast
Applied to files:
packages/web-platform/web-core-wasm-e2e/tests/web-core.test.tspackages/web-platform/web-elements/tests/fixtures/component-event-test.htmlpackages/web-platform/web-elements/tests/fixtures/shell-project.ts
📚 Learning: 2026-01-04T11:17:23.990Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-core-wasm/AGENTS.md:0-0
Timestamp: 2026-01-04T11:17:23.990Z
Learning: When modifying Rust core logic in src/main_thread, ALWAYS add corresponding tests in tests/element-apis.spec.ts to verify the JS-side behavior
Applied to files:
packages/web-platform/web-core-wasm-e2e/tests/web-core.test.ts
📚 Learning: 2025-12-29T11:26:09.502Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
Learning: Applies to packages/web-platform/web-elements/tests/**/*.spec.ts : In Playwright tests, access Shadow DOM explicitly using `.shadowRoot` when using `evaluate` or `waitForFunction`, as document.querySelector fails to directly access shadow DOM elements
Applied to files:
packages/web-platform/web-core-wasm-e2e/tests/web-core.test.tspackages/web-platform/web-elements/tests/fixtures/shell-project.ts
📚 Learning: 2025-12-29T11:26:09.502Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
Learning: Applies to packages/web-platform/web-elements/src/elements/**/*.ts : Use `boostedQueueMicrotask` for DOM reads/writes to avoid synchronous layout thrashing when accurate layout info isn't immediately needed
Applied to files:
packages/web-platform/web-core-wasm-e2e/tests/web-core.test.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-core-wasm-e2e/tests/web-core.test.ts
📚 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-core-wasm-e2e/tests/web-core.test.ts
📚 Learning: 2025-09-10T10:27:32.903Z
Learnt from: PupilTong
Repo: lynx-family/lynx-stack PR: 1706
File: .github/workflows/test.yml:0-0
Timestamp: 2025-09-10T10:27:32.903Z
Learning: MULTI_THREAD×SSR combination is NYI (Not Yet Implemented) in the Playwright test configuration, which is why it's excluded from the test matrix in .github/workflows/test.yml.
Applied to files:
packages/web-platform/web-core-wasm-e2e/tests/web-core.test.ts
📚 Learning: 2025-08-11T05:57:18.212Z
Learnt from: upupming
Repo: lynx-family/lynx-stack PR: 1305
File: packages/testing-library/testing-environment/src/index.ts:255-258
Timestamp: 2025-08-11T05:57:18.212Z
Learning: In the ReactLynx testing environment (`packages/testing-library/testing-environment/src/index.ts`), the dual assignment pattern `target.console.method = console.method = () => {}` is required for rstest compatibility. This is because rstest provides `console` in an IIFE (Immediately Invoked Function Expression), and both the target and global console need to have these methods defined for proper test execution.
Applied to files:
packages/web-platform/web-core-wasm-e2e/tests/web-core.test.tspackages/web-platform/web-elements/tests/fixtures/component-event-test.html
📚 Learning: 2025-08-21T08:46:54.494Z
Learnt from: upupming
Repo: lynx-family/lynx-stack PR: 1370
File: packages/webpack/cache-events-webpack-plugin/src/LynxCacheEventsRuntimeModule.ts:23-27
Timestamp: 2025-08-21T08:46:54.494Z
Learning: In Lynx webpack runtime modules, the team prioritizes performance and simplicity over defensive runtime error handling. They prefer relying on compile-time type safety (TypeScript) rather than adding runtime checks like try-catch blocks or type validation, especially for performance-critical code like cache event setup/cleanup functions.
Applied to files:
packages/web-platform/web-core-wasm-e2e/tests/web-core.test.ts
📚 Learning: 2025-09-28T07:52:03.601Z
Learnt from: Sherry-hue
Repo: lynx-family/lynx-stack PR: 1837
File: packages/web-platform/web-worker-runtime/src/backgroundThread/background-apis/createNativeApp.ts:151-154
Timestamp: 2025-09-28T07:52:03.601Z
Learning: There are two different registerUpdateDataHandler functions in the lynx-stack codebase:
1. Main thread version in packages/web-platform/web-worker-runtime/src/mainThread/crossThreadHandlers/registerUpdateDataHandler.ts takes (mainThreadRpc: Rpc, backgroundThreadRpc: Rpc, runtime: MainThreadGlobalThis)
2. Background thread version in packages/web-platform/web-worker-runtime/src/backgroundThread/background-apis/crossThreadHandlers/registerUpdateDataHandler.ts takes only (rpc: Rpc, tt: any)
Applied to files:
packages/web-platform/web-core-wasm-e2e/tests/web-core.test.ts
📚 Learning: 2025-09-28T07:52:03.601Z
Learnt from: Sherry-hue
Repo: lynx-family/lynx-stack PR: 1837
File: packages/web-platform/web-worker-runtime/src/backgroundThread/background-apis/createNativeApp.ts:151-154
Timestamp: 2025-09-28T07:52:03.601Z
Learning: There are two different registerUpdateDataHandler functions in the lynx-stack codebase:
1. Main thread version in packages/web-platform/web-worker-runtime/src/mainThread/crossThreadHandlers/registerUpdateDataHandler.ts takes (mainThreadRpc: Rpc, backgroundThreadRpc: Rpc, runtime: MainThreadGlobalThis)
2. Background thread version in packages/web-platform/web-worker-runtime/src/backgroundThread/background-apis/crossThreadHandlers/registerUpdateDataHandler.ts takes only (rpc: Rpc, tt: NativeTTObject)
Applied to files:
packages/web-platform/web-core-wasm-e2e/tests/web-core.test.ts
📚 Learning: 2025-08-12T09:32:01.512Z
Learnt from: upupming
Repo: lynx-family/lynx-stack PR: 1370
File: packages/rspeedy/plugin-react/src/entry.ts:237-240
Timestamp: 2025-08-12T09:32:01.512Z
Learning: The events-cache.js functionality for caching events until background threads are ready is manually tested due to the complexity of constructing automated runtime test cases that involve timing, chunk loading, and browser runtime behavior.
Applied to files:
packages/web-platform/web-core-wasm-e2e/tests/web-core.test.tspackages/web-platform/web-elements/tests/fixtures/component-event-test.html
📚 Learning: 2025-09-25T14:03:25.576Z
Learnt from: PupilTong
Repo: lynx-family/lynx-stack PR: 1834
File: packages/web-platform/web-worker-runtime/src/backgroundThread/background-apis/createChunkLoading.ts:162-171
Timestamp: 2025-09-25T14:03:25.576Z
Learning: In the lynx-stack codebase, for loadScriptAsync implementations in createChunkLoading.ts, unhandled promise rejections from readScriptAsync are intentionally not caught - the caller is expected to handle errors rather than the loadScriptAsync method itself invoking the callback with error messages.
Applied to files:
packages/web-platform/web-core-wasm-e2e/tests/web-core.test.ts
📚 Learning: 2025-11-06T01:19:23.670Z
Learnt from: colinaaa
Repo: lynx-family/lynx-stack PR: 1917
File: packages/mcp-servers/devtool-mcp-server/tsconfig.json:8-8
Timestamp: 2025-11-06T01:19:23.670Z
Learning: The lynx-js/devtool-mcp-server package in lynx-family/lynx-stack targets Node.js >=18.19 (specified in its package.json engines), which is different from the root project's requirement of Node.js ^22 || ^24. The package uses "lib": ["ES2024.Promise"] in its tsconfig.json because it manually includes polyfills for Promise.withResolvers while maintaining compatibility with Node.js v18.
Applied to files:
packages/web-platform/web-core-wasm-e2e/tests/web-core.test.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-core-wasm-e2e/tests/web-core.test.tspackages/web-platform/web-core-wasm/css/in_shadow.css
📚 Learning: 2025-09-28T08:46:43.177Z
Learnt from: f0rdream
Repo: lynx-family/lynx-stack PR: 1835
File: packages/react/worklet-runtime/src/workletRuntime.ts:52-55
Timestamp: 2025-09-28T08:46:43.177Z
Learning: The legacy worklet path with `_lepusWorkletHash` in `packages/react/worklet-runtime/src/workletRuntime.ts` is preserved for compatibility with MTS (Mini-app Threading Service) that doesn't support Initial Frame Rendering. This path will not be touched in current implementations.
Applied to files:
packages/web-platform/web-core-wasm-e2e/tests/web-core.test.ts
📚 Learning: 2025-08-27T11:37:38.587Z
Learnt from: PupilTong
Repo: lynx-family/lynx-stack PR: 1589
File: packages/web-platform/web-worker-runtime/src/mainThread/startMainThread.ts:36-49
Timestamp: 2025-08-27T11:37:38.587Z
Learning: In web worker script loading (loadScript function), the pattern of calling fetch() before importScripts() is intentional for caching benefits, not redundant networking. The fetch() ensures HTTP caching is utilized before the synchronous importScripts() call.
Applied to files:
packages/web-platform/web-core-wasm-e2e/tests/web-core.test.ts
📚 Learning: 2025-08-29T16:59:22.060Z
Learnt from: PupilTong
Repo: lynx-family/lynx-stack PR: 1235
File: packages/web-platform/web-mainthread-apis/src/crossThreadHandlers/createQueryComponent.ts:33-38
Timestamp: 2025-08-29T16:59:22.060Z
Learning: The processEvalResult method in MainThreadGlobalThis interface should return the processed evaluation result rather than void, as it's used to transform lepusRootChunkExport in the lazy component loading flow.
Applied to files:
packages/web-platform/web-core-wasm-e2e/tests/web-core.test.ts
📚 Learning: 2025-09-23T08:54:39.966Z
Learnt from: upupming
Repo: lynx-family/lynx-stack PR: 1670
File: packages/webpack/css-extract-webpack-plugin/test/hotCases/hot/hot-update-json/dual-thread/__snapshot__/index.css:6-8
Timestamp: 2025-09-23T08:54:39.966Z
Learning: In the lynx-stack CSS extract webpack plugin tests, many test fixture CSS files intentionally use invalid CSS syntax like `color: 'red';` with quoted values. The snapshots correctly reflect this invalid CSS from the source fixtures. To fix CSS validation issues, the source fixture files should be updated first, then snapshots regenerated, rather than manually editing snapshots.
Applied to files:
packages/web-platform/web-core-wasm-e2e/tests/web-core.test.tspackages/web-platform/web-elements/src/compat/LinearContainer/linear-compat.css
📚 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/compat/LinearContainer/LinearContainer.tspackages/web-platform/web-core-wasm/css/in_shadow.csspackages/web-platform/web-elements/src/compat/LinearContainer/linear-compat.css
📚 Learning: 2025-12-29T11:26:09.502Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
Learning: Applies to packages/web-platform/web-elements/src/elements/**/*.ts : Add boolean-like attributes that should not be filtered when set to 'false' string to the `static readonly notToFilterFalseAttributes` Set in the component class
Applied to files:
packages/web-platform/web-elements/src/compat/LinearContainer/LinearContainer.tspackages/web-platform/web-elements/src/element-reactive/component.ts
📚 Learning: 2025-12-29T11:26:09.502Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
Learning: Applies to packages/web-platform/web-elements/src/elements/**/*.css : Write element-specific CSS in the element's directory with filename pattern `element-name.css` and import it in `elements.css`
Applied to files:
packages/web-platform/web-core-wasm/css/in_shadow.csspackages/web-platform/web-elements/src/compat/LinearContainer/linear-compat.css
📚 Learning: 2025-12-29T11:26:09.502Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
Learning: Use extensive CSS variables (e.g., `--lynx-display`) to drive layout and style from the Lynx engine
Applied to files:
packages/web-platform/web-core-wasm/css/in_shadow.csspackages/web-platform/web-elements/src/compat/LinearContainer/linear-compat.css
📚 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-core-wasm/css/in_shadow.css
📚 Learning: 2025-07-16T06:25:41.055Z
Learnt from: PupilTong
Repo: lynx-family/lynx-stack PR: 1029
File: packages/web-platform/web-mainthread-apis/src/createMainThreadGlobalThis.ts:214-217
Timestamp: 2025-07-16T06:25:41.055Z
Learning: In the lynx-stack codebase, CSS strings produced by `genCssContent` are considered trusted developer input, so additional sanitization/escaping is not required.
Applied to files:
packages/web-platform/web-core-wasm/css/in_shadow.css
📚 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/compat/LinearContainer/linear-compat.css
📚 Learning: 2025-12-26T05:10:01.608Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-26T05:10:01.608Z
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/src/element-reactive/component.tspackages/web-platform/web-elements/tests/fixtures/shell-project.ts
📚 Learning: 2025-12-29T11:26:09.502Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
Learning: Applies to packages/web-platform/web-elements/src/elements/**/*.ts : When implementing a new web element, use PascalCase for class names (e.g., `MyElement`) and kebab-case for tag names, prefixing single-word names with `x-` (e.g., `x-view`, `scroll-view`)
Applied to files:
packages/web-platform/web-elements/src/element-reactive/component.ts
📚 Learning: 2025-12-30T10:02:35.055Z
Learnt from: upupming
Repo: lynx-family/lynx-stack PR: 2081
File: packages/react/runtime/src/alog/elementPAPICall.ts:109-112
Timestamp: 2025-12-30T10:02:35.055Z
Learning: In packages/react/runtime/src/alog/elementPAPICall.ts, the helper APIs `__GetTag` and `__GetElementUniqueID` should always exist when instrumenting FiberElement PAPIs, so defensive checks for their existence are unnecessary.
Applied to files:
packages/web-platform/web-elements/src/element-reactive/component.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/component-event-test.html
📚 Learning: 2025-12-26T05:10:01.608Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-26T05:10:01.608Z
Learning: Applies to packages/react/**/*.{ts,tsx} : Use JSX syntax and ReactLynx components in React component files within packages/react/
Applied to files:
packages/web-platform/web-elements/tests/fixtures/shell-project.ts
📚 Learning: 2025-08-13T09:20:00.936Z
Learnt from: upupming
Repo: lynx-family/lynx-stack PR: 1502
File: packages/react/testing-library/types/entry.d.ts:71-71
Timestamp: 2025-08-13T09:20:00.936Z
Learning: In lynx-js/react testing library, wrapper components must have children as a required prop because they are always called with `h(WrapperComponent, null, innerElement)` where innerElement is passed as children. The type `React.JSXElementConstructor<{ children: React.ReactNode }>` correctly requires children to be mandatory.
Applied to files:
packages/web-platform/web-elements/tests/fixtures/shell-project.ts
🧬 Code graph analysis (4)
packages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewSlotNg.ts (3)
packages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewHeaderNg.ts (1)
Component(12-35)packages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewSlotDragNg.ts (1)
Component(10-14)packages/web-platform/web-elements/src/compat/LinearContainer/LinearContainer.ts (1)
LinearContainer(89-91)
packages/web-platform/web-elements/src/elements/XRefreshView/XRefreshView.ts (5)
packages/web-platform/web-elements/src/elements/XRefreshView/XRefreshFooter.ts (1)
Component(11-23)packages/web-platform/web-elements/src/elements/XSwiper/SwiperItem.ts (1)
Component(10-14)packages/web-platform/web-elements/src/elements/XView/XView.ts (1)
Component(14-39)packages/web-platform/web-elements/src/elements/XViewpagerNg/XViewpagerNg.ts (1)
Component(16-62)packages/web-platform/web-elements/src/compat/LinearContainer/LinearContainer.ts (1)
LinearContainer(89-91)
packages/web-platform/web-elements/src/elements/XRefreshView/XRefreshHeader.ts (6)
packages/web-platform/web-elements/src/elements/XRefreshView/XRefreshFooter.ts (1)
Component(11-23)packages/web-platform/web-elements/src/elements/XRefreshView/XRefreshView.ts (1)
Component(13-73)packages/web-platform/web-elements/src/elements/XSwiper/SwiperItem.ts (1)
Component(10-14)packages/web-platform/web-elements/src/elements/XViewpagerNg/XViewpagerNg.ts (1)
Component(16-62)packages/web-platform/web-elements/src/compat/LinearContainer/LinearContainer.ts (1)
LinearContainer(89-91)packages/web-platform/web-elements/src/compat/index.ts (1)
LinearContainer(1-1)
packages/web-platform/web-elements/tests/fixtures/shell-project.ts (1)
packages/web-platform/web-elements/src/element-reactive/component.ts (1)
Component(65-352)
🪛 LanguageTool
.changeset/wide-views-admire.md
[grammar] ~5-~5: Ensure spelling is correct
Context: ...lynx-js/web-elements": minor --- feat: intergrate the LinearContainer Compat plugin **Th...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
[grammar] ~9-~9: Ensure spelling is correct
Context: ... This is a BREAKING CHANGE Not we intergrated the LinearCompat in the @lynx-js/web-...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
🪛 markdownlint-cli2 (0.18.1)
.changeset/wide-views-admire.md
7-7: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
522d08e to
3168843
Compare
**This is a BREAKING CHANGE** Not we intergrated the `LinearCompat` in the @lynx-js/web-elements. Developers could safely remove the following imports: ```js import '@lynx-js/web-elements/compat/LinearContainer'; ``` ```js import '@lynx-js/web-elements-compat/LinearContainer'; ```
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
packages/web-platform/web-core-wasm-e2e/tests/web-core.test.ts (1)
368-397: Variable scope bug:successis not accessible across evaluation contexts.The test has a critical scope issue. The
successvariable is declared in the Node.js test context (line 372), but line 379 attempts to assign to it from withinpage.evaluate(), which runs in the browser context. Variables from the Node.js context are not accessible insidepage.evaluate(), and assignments there create local variables that are lost when the evaluation completes.Line 393-395 attempts to read
successfrom the browser context, but no browser-scopedsuccessvariable was properly initialized.🐛 Proposed fix
test('event-i18n-resources-missed', async ({ page, browserName }) => { // firefox dose not support this. test.skip(browserName === 'firefox'); await goto(page); - let success = false; await page.evaluate(() => { + (window as any).testSuccess = false; (document.querySelector('lynx-view') as LynxViewElement).addEventListener( 'i18nResourceMissed', (event) => { - // @ts-expect-error if (event.detail.channel === '2') { - success = true; + (window as any).testSuccess = true; } }, ); }); await page.evaluate(() => { globalThis.runtime.renderPage = () => {}; globalThis.runtime._I18nResourceTranslation({ locale: 'en', channel: '2', fallback_url: '', }); }); await wait(500); - success = await page.evaluate<boolean>(() => { - return success; - }); + const success = await page.evaluate<boolean>(() => { + return (window as any).testSuccess; + }); expect(success).toBeTruthy(); });packages/web-platform/web-elements/src/element-reactive/component.ts (1)
327-345: Critical bug: removeEventListener fails to handle listeners added multiple times.When a listener is added multiple times (e.g.,
addEventListener('click', handler)called twice), the weak map correctly trackscurrentListenerCount = 2. However,removeEventListeneronly handles the case wherecurrentListenerCount === 1:
- It doesn't decrement the weak map count when
currentListenerCount > 1- It doesn't call
disableEvent(type)whencurrentListenerCount > 1This causes:
- The event count to never decrease, preventing handlers from being notified when listeners are removed
- The weak map to retain stale counts
- Memory leaks and incorrect event status notifications
🐛 Proposed fix
override removeEventListener( type: string, listener: EventListener, options?: AddEventListenerOptions | boolean, ): void { super.removeEventListener(type, listener, options); const capture = typeof options === 'object' ? options.capture : options; const targetEventInfo = this.#eventListenerMap[type]; if (targetEventInfo && targetEventInfo.count > 0) { const targetMap = capture ? targetEventInfo.captureListenerCount : targetEventInfo.listenerCount; const currentListenerCount = targetMap.get(listener); - if (currentListenerCount === 1) { - targetMap.delete(listener); - this.disableEvent(type); + if (currentListenerCount) { + if (currentListenerCount === 1) { + targetMap.delete(listener); + } else { + targetMap.set(listener, currentListenerCount - 1); + } + this.disableEvent(type); } } }
🤖 Fix all issues with AI agents
In @.changeset/wide-views-admire.md:
- Line 5: Fix the two spelling errors in the changeset by replacing "intergrate"
with "integrate" (occurs in the heading "feat: intergrate the LinearContainer
Compat plugin") and replacing "Not we intergrated" with "Now we integrated"
(occurs on the later line flagged, also line 9); update both occurrences so the
changeset reads correctly.
In
@packages/web-platform/web-elements/src/compat/LinearContainer/linear-compat.css:
- Around line 104-123: The align-self rules are targeting the container because
two selector variants are missing the child combinator; update the selectors
that currently read
[lynx-computed-display="linear"][lynx-linear-orientation="vertical-reverse"] and
[lynx-computed-display="linear"][lynx-linear-orientation="horizontal-reverse"]
so they include the child selector like > * (matching the other lines that use >
* and > lynx-wrapper > *), ensuring align-self applies to the flex children
rather than the container itself.
In @packages/web-platform/web-elements/tests/fixtures/component-event-test.html:
- Around line 14-90: Remove the dead scaffolding and exploratory comments and
the two unused classes (EventTracker and EventTrackerImpl); keep only the
concrete implementation EventTrackerManual (including its instance property
eventStatusChangedHandler and the static observedAttributes assignment) so the
test fixture is minimal and functional, and ensure any references to
window.eventEvents remain in EventTrackerManual's handler for test assertions.
🧹 Nitpick comments (8)
.github/workflows/workflow-test.yml (1)
101-101: Consider adding a space for consistency.While both
${{ inputs.web-report-path}}and${{ inputs.web-report-path }}are valid, the latter matches the style used on line 100 (${{ inputs.web-report-name }}).✨ Suggested formatting fix
- path: ${{ inputs.web-report-path}} + path: ${{ inputs.web-report-path }}packages/web-platform/web-core-wasm-e2e/tests/web-core.test.ts (6)
77-77: Consider using specific callback types instead ofunknown.The callback parameters have been changed to
unknown, which reduces type safety. While the tests perform runtime checks, using proper types (e.g.,(ids: string[]) =>or(err: Error | null, exports: string) =>) would catch type mismatches at compile time.Example for Line 77
- (ids: unknown) => { + (ids: string[]) => { - if (Array.isArray(ids) && ids[0] === '0-13826000') { + if (ids[0] === '0-13826000') { resolve(true); }Also applies to: 102-102, 125-125, 131-131, 155-155
267-272: Message checks are now less strict.The change from exact equality (
message.text() === 'green') to substring matching (message.text().includes('green')) could match unintended messages. If possible, use exact string matching or more specific patterns to reduce false positives.Also applies to: 298-303
416-443: Avoidas anycasts; use proper typing or optional chaining.Using
as anycompletely disables type checking and could hide runtime errors ifquerySelectorreturnsnullor if the element doesn't have the expected methods. Consider using optional chaining or proper type guards.♻️ Proposed refactor
await page.evaluate(() => { - (document.querySelector('lynx-view') as any)?.updateI18nResources([ + const lynxView = document.querySelector('lynx-view') as LynxViewElement | null; + lynxView?.updateI18nResources([ { options: { locale: 'en',If
LynxViewElementdoesn't have theupdateI18nResourcesmethod in its type definition, consider updating the type definition rather than usingas any.Also applies to: 503-530, 599-626
344-345: Consider casting toLynxViewElementfor consistency.While the optional chaining handles the null case correctly, casting to
HTMLElementinstead ofLynxViewElementloses the specific element type. For consistency with other parts of the test, consider usingLynxViewElement.- (document.querySelector('lynx-view') as HTMLElement)?.click(); + (document.querySelector('lynx-view') as LynxViewElement)?.click();
69-69: Consider replacing arbitrary waits with Playwright's built-in waiting mechanisms.The test contains several
wait()calls with arbitrary durations (e.g.,wait(200),wait(500)). These can make tests slower and more flaky. Consider using Playwright's built-in mechanisms likewaitForFunction(),waitForEvent(), orwaitForTimeout()with appropriate conditions instead of fixed delays.Based on learnings: As per coding guidelines, Playwright tests should use standard assertions and waiting mechanisms.
Also applies to: 314-314, 322-322, 392-392
374-382: Consider defining a proper event type instead of suppressing the error.The
@ts-expect-errorcomment at line 377 suggests that the event type doesn't include thedetailproperty. Consider defining a properCustomEventtype for thei18nResourceMissedevent with a typeddetailproperty.interface I18nResourceMissedEvent extends CustomEvent { detail: { channel: string; /* other properties */ }; }Then the event listener can be properly typed without suppressing errors.
packages/web-platform/web-elements/tests/component-event.spec.ts (1)
3-8: Consider extracting the navigation helper to a shared utility.The
gotoWebComponentPagehelper duplicates navigation logic that may benefit from centralization. If multiple test files need this pattern, consider extracting it to a shared test utilities module.📝 Example shared utility structure
Create a shared utilities file such as
tests/utils/navigation.ts:export const gotoWebComponentPage = async (page: any, testname: string) => { await page.goto(`/tests/fixtures/${testname}.html`, { waitUntil: 'load', }); await page.evaluate(() => document.fonts.ready); };Then import and use it across test files.
3168843 to
7506b88
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
packages/web-platform/web-core-wasm-e2e/tests/web-core.test.ts (1)
368-397: Critical: Variable scope error prevents test from working correctly.The
successvariable is declared in the Node.js context (line 372) but the code attempts to set it from withinpage.evaluate()on line 379, which runs in the browser context. These are separate execution contexts, so the assignment on line 379 won't affect the Node.js variable. Additionally, lines 393-395 attempt to read asuccessvariable from the browser context, but no such variable exists there (the assignment on line 379 would have failed).This test will not work as intended.
🐛 Proposed fix using proper context handling
test('event-i18n-resources-missed', async ({ page, browserName }) => { // firefox dose not support this. test.skip(browserName === 'firefox'); await goto(page); - let success = false; await page.evaluate(() => { + (window as any).success = false; (document.querySelector('lynx-view') as LynxViewElement).addEventListener( 'i18nResourceMissed', (event) => { - // @ts-expect-error if (event.detail.channel === '2') { - success = true; + (window as any).success = true; } }, ); }); await page.evaluate(() => { globalThis.runtime.renderPage = () => {}; globalThis.runtime._I18nResourceTranslation({ locale: 'en', channel: '2', fallback_url: '', }); }); await wait(500); - success = await page.evaluate<boolean>(() => { - return success; - }); + const success = await page.evaluate<boolean>(() => { + return (window as any).success; + }); expect(success).toBeTruthy(); });Alternatively, use a more robust pattern with CustomEvent detail typing:
const success = await page.evaluate(() => { return new Promise<boolean>((resolve) => { const timeout = setTimeout(() => resolve(false), 1000); (document.querySelector('lynx-view') as LynxViewElement).addEventListener( 'i18nResourceMissed', (event: any) => { if (event.detail.channel === '2') { clearTimeout(timeout); resolve(true); } }, { once: true } ); globalThis.runtime.renderPage = () => {}; globalThis.runtime._I18nResourceTranslation({ locale: 'en', channel: '2', fallback_url: '', }); }); }); expect(success).toBeTruthy();packages/web-platform/web-elements/src/element-reactive/component.ts (1)
327-345: Critical bug: Missing per-listener count decrement in removeEventListener.The
removeEventListenermethod only handles the case whencurrentListenerCount === 1(lines 340-343), but never decrements the count when it's greater than 1. This causes several issues:
- Count mismatch:
addEventListenerincrements counts on every call, butremoveEventListeneronly decrements when count is exactly 1- Stuck handlers: Event status handlers never receive the
falsestate becausedisableEventis never called- Memory leak: WeakMap entries are never cleaned up for listeners registered multiple times
Example scenario:
element.addEventListener('click', handler); // count: 1 element.addEventListener('click', handler); // count: 2, per-listener: 2 element.removeEventListener('click', handler); // per-listener still 2, no decrement! element.removeEventListener('click', handler); // per-listener still 2, never calls disableEvent🐛 Proposed fix
override removeEventListener( type: string, listener: EventListener, options?: AddEventListenerOptions | boolean, ): void { super.removeEventListener(type, listener, options); const capture = typeof options === 'object' ? options.capture : options; const targetEventInfo = this.#eventListenerMap[type]; if (targetEventInfo && targetEventInfo.count > 0) { const targetMap = capture ? targetEventInfo.captureListenerCount : targetEventInfo.listenerCount; const currentListenerCount = targetMap.get(listener); - if (currentListenerCount === 1) { - targetMap.delete(listener); - this.disableEvent(type); + if (currentListenerCount && currentListenerCount > 0) { + const newCount = currentListenerCount - 1; + if (newCount === 0) { + targetMap.delete(listener); + this.disableEvent(type); + } else { + targetMap.set(listener, newCount); + } } } }
🤖 Fix all issues with AI agents
In @.changeset/wide-views-admire.md:
- Line 5: Update the changeset text to correct the typos: replace "intergrate"
with "integrate" and change "Not we intergrated" to "Now we integrated" in the
.changeset/wide-views-admire.md content so release notes read correctly; search
for the exact misspelled tokens "intergrate" and "intergrated" to locate and
update them in the file.
🧹 Nitpick comments (5)
packages/web-platform/web-elements/tests/fixtures/component-event-test.html (2)
10-12: Remove unused destructured variable.
registerEventEnableStatusChangeHandleris destructured fromglobalThisbut never used in this file.♻️ Suggested fix
- const { Component, registerEventEnableStatusChangeHandler } = - globalThis; + const { Component } = globalThis;
14-75: Remove unused classes and development notes.
EventTracker(lines 14-16) andEventTrackerImpl(lines 44-54) are defined but never used. The extensive comments (lines 17-43, 56-75) read like development notes rather than documentation. Consider keeping only a brief comment explaining the manual decorator simulation approach, and remove the unused code.♻️ Suggested cleanup
const { Component } = globalThis; - class EventTracker { - static observedAttributes = []; - } - // Apply decorator manually since we are in potentially non-transpiled JS or simpler env - // But decorators usually need transpilation. - // Actually, since this is running in browser via simple script tag, we can't use TS decorators directly unless we use the return value of registerEventEnableStatusChangeHandler as a function wrapper if it supports it, OR we just use the prototype manipulation if the decorator helper is available. - // Wait, the previous code used TS decorators. - // `registerEventEnableStatusChangeHandler` is a function that returns a decorator. - - // Let's check how registerEventEnableStatusChangeHandler is implemented. - // distinct from the TS decorator, we might need to apply it manually. - - // Let's implement it in a way that works in browser JS (if the build supports it). - // Since main.js is built from shell-project.ts which includes the libs. - - // The decorator implementation: - // export const registerEventEnableStatusChangeHandler = generateRegister<...>(...); - // generateRegister returns a decorator function (target, context) => ... - - // In TS 5.0 decorators are functions. In legacy experiment decorators they are also functions. - - // However, writing raw ES classes in HTML script tag means no TS compilation. - // We can simulate what the decorator does or just define the reactive class structure manually if we know it. - - // Looking at `component.ts`: - // `Component` takes (tag, attributeReactiveClassesOptional, template). - // `AttributeReactiveClass` expects `observedAttributes`, `eventStatusChangedHandler` etc. - - // So we can define the class directly without decorators if we construct the metadata manually. - - class EventTrackerImpl { - static observedAttributes = []; - static eventStatusChangedHandler = { - 'custom-event': function(status, type) { - if (!window.eventEvents) { - window.eventEvents = []; - } - window.eventEvents.push({ type, status }); - }, - }; - } - - // Logic from `registerEventStatusChangedHandler.ts` -> `generateRegister` - // It basically registers the handler to a static `eventStatusChangedHandler` map or similar? - // Actually `generateRegister` creates a method decorator. - - // If we look at `component.ts`: - // export type AttributeReactiveObject = { - // eventStatusChangedHandler?: Record<string, EventStatusChangeHandler>; - // ... - // } - - // And `Component` uses `new oneClass(this)`. - - // So the instances of `EventTracker` need to have `eventStatusChangedHandler`. - // Or the class `EventTracker` needs to have the static metadata if `Component` reads it from static? - - // `component.ts`: - // 296: const handler = oneReactive.eventStatusChangedHandler?.[type]; - - // So `oneReactive` (instance of AttributeReactiveClass) must have `eventStatusChangedHandler` property. - + // Manually construct the reactive class to simulate decorator behavior in non-transpiled JS class EventTrackerManual {packages/web-platform/web-core-wasm-e2e/tests/web-core.test.ts (2)
267-267: Consider using strict equality for console message assertions.The change from
message.text() === 'green'tomessage.text().includes('green')reduces assertion precision and could cause false positives if unrelated messages contain these substrings. Unless the message format varies (e.g., includes prefixes or additional formatting), strict equality checks are more reliable for test assertions.Consider reverting to strict equality if message format is consistent
-if (message.text().includes('green')) { +if (message.text() === 'green') { successCallback = true; } -if (message.text().includes('LYNX-VIEW')) { +if (message.text() === 'LYNX-VIEW') { successCallback2 = true; }Also applies to: 270-270, 298-301
276-277: Consider defining types for dynamic runtime properties.The
@ts-expect-errorsuppressions for accessing dynamicnapiLoaderOnRT${id}properties are acceptable for runtime-injected values, but consider defining a proper interface extension forglobalThisto avoid type suppressions and improve IDE support.Example type definition to avoid suppressions
declare global { interface Window { [key: `napiLoaderOnRT${string}`]: { load: (module: string) => any; }; } }Also applies to: 307-308, 336-339
.changeset/wide-views-admire.md (1)
7-7: Consider using a proper heading instead of bold emphasis.Line 7 uses bold text for "This is a BREAKING CHANGE" instead of a proper Markdown heading. While this works, using a heading (e.g.,
## This is a BREAKING CHANGE) would be more semantically correct.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (31)
.changeset/wide-views-admire.mdpackages/web-platform/web-core-wasm-e2e/tests/utils.tspackages/web-platform/web-core-wasm-e2e/tests/web-core.test.tspackages/web-platform/web-core-wasm/css/in_shadow.csspackages/web-platform/web-core-wasm/css/linear.csspackages/web-platform/web-elements/elements.csspackages/web-platform/web-elements/index.csspackages/web-platform/web-elements/package.jsonpackages/web-platform/web-elements/src/compat/LinearContainer/LinearContainer.tspackages/web-platform/web-elements/src/compat/LinearContainer/linear-compat.csspackages/web-platform/web-elements/src/compat/index.tspackages/web-platform/web-elements/src/element-reactive/component.tspackages/web-platform/web-elements/src/elements/ScrollView/ScrollView.tspackages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewHeaderNg.tspackages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewNg.tspackages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewSlotDragNg.tspackages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewSlotNg.tspackages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewToolbarNg.tspackages/web-platform/web-elements/src/elements/XRefreshView/XRefreshFooter.tspackages/web-platform/web-elements/src/elements/XRefreshView/XRefreshHeader.tspackages/web-platform/web-elements/src/elements/XRefreshView/XRefreshView.tspackages/web-platform/web-elements/src/elements/XSwiper/SwiperItem.tspackages/web-platform/web-elements/src/elements/XView/XView.tspackages/web-platform/web-elements/src/elements/XViewpagerNg/XViewpagerItemNg.tspackages/web-platform/web-elements/src/elements/XViewpagerNg/XViewpagerNg.tspackages/web-platform/web-elements/src/elements/common-css/linear.csspackages/web-platform/web-elements/tests/component-event.spec.tspackages/web-platform/web-elements/tests/fixtures/component-event-test.htmlpackages/web-platform/web-elements/tests/fixtures/shell-project.tspackages/web-platform/web-tests/shell-project/lynx-view.tspackages/web-platform/web-tests/shell-project/web-core.ts
💤 Files with no reviewable changes (7)
- packages/web-platform/web-elements/package.json
- packages/web-platform/web-elements/src/elements/common-css/linear.css
- packages/web-platform/web-tests/shell-project/web-core.ts
- packages/web-platform/web-core-wasm-e2e/tests/utils.ts
- packages/web-platform/web-core-wasm/css/linear.css
- packages/web-platform/web-elements/elements.css
- packages/web-platform/web-tests/shell-project/lynx-view.ts
🚧 Files skipped from review as they are similar to previous changes (12)
- packages/web-platform/web-elements/src/elements/XViewpagerNg/XViewpagerNg.ts
- packages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewNg.ts
- packages/web-platform/web-elements/src/elements/XSwiper/SwiperItem.ts
- packages/web-platform/web-elements/src/compat/index.ts
- packages/web-platform/web-core-wasm/css/in_shadow.css
- packages/web-platform/web-elements/src/elements/XViewpagerNg/XViewpagerItemNg.ts
- packages/web-platform/web-elements/tests/component-event.spec.ts
- packages/web-platform/web-elements/index.css
- packages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewSlotNg.ts
- packages/web-platform/web-elements/tests/fixtures/shell-project.ts
- packages/web-platform/web-elements/src/elements/ScrollView/ScrollView.ts
- packages/web-platform/web-elements/src/elements/XView/XView.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/XRefreshView/XRefreshFooter.tspackages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewToolbarNg.tspackages/web-platform/web-elements/src/compat/LinearContainer/LinearContainer.tspackages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewSlotDragNg.tspackages/web-platform/web-elements/src/elements/XRefreshView/XRefreshView.tspackages/web-platform/web-elements/src/elements/XRefreshView/XRefreshHeader.tspackages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewHeaderNg.tspackages/web-platform/web-core-wasm-e2e/tests/web-core.test.tspackages/web-platform/web-elements/src/element-reactive/component.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/XRefreshView/XRefreshFooter.tspackages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewToolbarNg.tspackages/web-platform/web-elements/src/compat/LinearContainer/LinearContainer.tspackages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewSlotDragNg.tspackages/web-platform/web-elements/src/elements/XRefreshView/XRefreshView.tspackages/web-platform/web-elements/src/elements/XRefreshView/XRefreshHeader.tspackages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewHeaderNg.tspackages/web-platform/web-core-wasm-e2e/tests/web-core.test.tspackages/web-platform/web-elements/src/element-reactive/component.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: When creating new elements, inherit fromElementviaComponentdecorator and use reactive utilities provided byelement-reactive
UseboostedQueueMicrotaskfor DOM reads/writes to avoid synchronous layout thrashing when accurate layout info isn't immediately needed
Do NOT implement attribute handlers decorated with@registerAttributeHandlerdirectly on the main Element class decorated with@Component. Create a separate Attribute Class implementingAttributeReactiveClasslogic and pass it as the second argument to the@Componentdecorator
Add boolean-like attributes that should not be filtered when set to 'false' string to thestatic readonly notToFilterFalseAttributesSet in the component class
UsegenDomGetterto safely access internal elements within the Shadow DOM
When implementing a new web element, use PascalCase for class names (e.g.,MyElement) and kebab-case for tag names, prefixing single-word names withx-(e.g.,x-view,scroll-view)
Minimize heavy computation inattributeChangedCallbackas these elements run on the main thread
Group DOM updates to minimize layout thrashing in web component implementations
Files:
packages/web-platform/web-elements/src/elements/XRefreshView/XRefreshFooter.tspackages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewToolbarNg.tspackages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewSlotDragNg.tspackages/web-platform/web-elements/src/elements/XRefreshView/XRefreshView.tspackages/web-platform/web-elements/src/elements/XRefreshView/XRefreshHeader.tspackages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewHeaderNg.ts
packages/web-platform/web-elements/src/**/*.css
📄 CodeRabbit inference engine (packages/web-platform/web-elements/AGENTS.md)
packages/web-platform/web-elements/src/**/*.css: Respect existing polyfills insrc/compatand check browser support before using bleeding-edge CSS features
Use custom CSS properties to control linear layout behavior:--lynx-display: linear,--lynx-linear-orientation,--lynx-linear-weight,--lynx-linear-weight-sum, and--lynx-linear-weight-basis
Files:
packages/web-platform/web-elements/src/compat/LinearContainer/linear-compat.css
packages/web-platform/web-elements/tests/fixtures/**/*.html
📄 CodeRabbit inference engine (packages/web-platform/web-elements/AGENTS.md)
Use HTML files for test fixtures and define a helper function
goto(page, fixtureName)to handle navigation and waiting for resources likedocument.fonts.ready
Files:
packages/web-platform/web-elements/tests/fixtures/component-event-test.html
🧠 Learnings (50)
📓 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-29T11:26:09.502Z
Learning: Applies to packages/web-platform/web-elements/src/**/*.css : Use custom CSS properties to control linear layout behavior: `--lynx-display: linear`, `--lynx-linear-orientation`, `--lynx-linear-weight`, `--lynx-linear-weight-sum`, and `--lynx-linear-weight-basis`
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
Learning: The `web-elements` package provides a Native UI implementation for the LynxJS Web Platform using Web Components built on the `element-reactive` reactive framework
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
Learning: Applies to packages/web-platform/web-elements/src/**/*.css : Respect existing polyfills in `src/compat` and check browser support before using bleeding-edge CSS features
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
Learning: Applies to packages/web-platform/web-elements/src/elements/**/*.ts : Group DOM updates to minimize layout thrashing in web component implementations
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
Learning: Applies to packages/web-platform/web-elements/tests/**/*.spec.ts : Create a separate spec file for new components (e.g., `tests/x-webview.spec.ts`) instead of adding to the monolithic `web-elements.spec.ts`
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
Learning: Applies to packages/web-platform/web-elements/src/elements/**/*.ts : When creating new elements, inherit from `Element` via `Component` decorator and use reactive utilities provided by `element-reactive`
📚 Learning: 2025-12-29T11:26:09.502Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
Learning: Applies to packages/web-platform/web-elements/src/elements/**/*.ts : When creating new elements, inherit from `Element` via `Component` decorator and use reactive utilities provided by `element-reactive`
Applied to files:
packages/web-platform/web-elements/src/elements/XRefreshView/XRefreshFooter.tspackages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewToolbarNg.tspackages/web-platform/web-elements/src/compat/LinearContainer/LinearContainer.tspackages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewSlotDragNg.tspackages/web-platform/web-elements/src/elements/XRefreshView/XRefreshView.tspackages/web-platform/web-elements/src/elements/XRefreshView/XRefreshHeader.tspackages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewHeaderNg.tspackages/web-platform/web-elements/tests/fixtures/component-event-test.htmlpackages/web-platform/web-elements/src/element-reactive/component.ts
📚 Learning: 2025-12-29T11:26:09.502Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
Learning: Applies to packages/web-platform/web-elements/src/elements/all.ts : Export new components in `src/elements/all.ts` and add export configuration to `package.json` under `exports` for both types and default
Applied to files:
packages/web-platform/web-elements/src/elements/XRefreshView/XRefreshFooter.tspackages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewToolbarNg.tspackages/web-platform/web-elements/src/compat/LinearContainer/LinearContainer.tspackages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewSlotDragNg.tspackages/web-platform/web-elements/src/elements/XRefreshView/XRefreshView.tspackages/web-platform/web-elements/src/elements/XRefreshView/XRefreshHeader.tspackages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewHeaderNg.tspackages/web-platform/web-elements/tests/fixtures/component-event-test.htmlpackages/web-platform/web-elements/src/element-reactive/component.ts
📚 Learning: 2025-12-29T11:26:09.502Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
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/XRefreshView/XRefreshFooter.tspackages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewToolbarNg.tspackages/web-platform/web-elements/src/compat/LinearContainer/LinearContainer.tspackages/web-platform/web-elements/src/elements/XRefreshView/XRefreshView.tspackages/web-platform/web-elements/src/elements/XRefreshView/XRefreshHeader.tspackages/web-platform/web-elements/tests/fixtures/component-event-test.html.changeset/wide-views-admire.md
📚 Learning: 2025-12-29T11:26:09.502Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
Learning: Applies to packages/web-platform/web-elements/src/elements/**/*.ts : Group DOM updates to minimize layout thrashing in web component implementations
Applied to files:
packages/web-platform/web-elements/src/elements/XRefreshView/XRefreshFooter.tspackages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewToolbarNg.tspackages/web-platform/web-elements/src/compat/LinearContainer/LinearContainer.tspackages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewSlotDragNg.tspackages/web-platform/web-elements/src/elements/XRefreshView/XRefreshView.tspackages/web-platform/web-elements/src/elements/XRefreshView/XRefreshHeader.tspackages/web-platform/web-elements/src/compat/LinearContainer/linear-compat.csspackages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewHeaderNg.tspackages/web-platform/web-elements/tests/fixtures/component-event-test.htmlpackages/web-platform/web-core-wasm-e2e/tests/web-core.test.tspackages/web-platform/web-elements/src/element-reactive/component.ts
📚 Learning: 2025-12-29T11:26:09.502Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
Learning: Applies to packages/web-platform/web-elements/src/elements/**/*.ts : Minimize heavy computation in `attributeChangedCallback` as these elements run on the main thread
Applied to files:
packages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewToolbarNg.tspackages/web-platform/web-elements/src/compat/LinearContainer/LinearContainer.tspackages/web-platform/web-elements/src/elements/XRefreshView/XRefreshView.tspackages/web-platform/web-elements/src/elements/XRefreshView/XRefreshHeader.tspackages/web-platform/web-elements/tests/fixtures/component-event-test.htmlpackages/web-platform/web-elements/src/element-reactive/component.ts
📚 Learning: 2025-12-29T11:26:09.502Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
Learning: Applies to packages/web-platform/web-elements/src/**/*.css : Use custom CSS properties to control linear layout behavior: `--lynx-display: linear`, `--lynx-linear-orientation`, `--lynx-linear-weight`, `--lynx-linear-weight-sum`, and `--lynx-linear-weight-basis`
Applied to files:
packages/web-platform/web-elements/src/compat/LinearContainer/LinearContainer.tspackages/web-platform/web-elements/src/compat/LinearContainer/linear-compat.css.changeset/wide-views-admire.md
📚 Learning: 2025-12-29T11:26:09.502Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
Learning: Applies to packages/web-platform/web-elements/src/**/*.css : Respect existing polyfills in `src/compat` and check browser support before using bleeding-edge CSS features
Applied to files:
packages/web-platform/web-elements/src/compat/LinearContainer/LinearContainer.tspackages/web-platform/web-elements/src/compat/LinearContainer/linear-compat.css
📚 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/compat/LinearContainer/LinearContainer.tspackages/web-platform/web-elements/src/compat/LinearContainer/linear-compat.css
📚 Learning: 2025-12-29T11:26:09.502Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
Learning: Applies to packages/web-platform/web-elements/src/elements/{x-input,x-textarea,x-image}/**/*.ts : For `x-input`, `x-textarea`, and `x-image` elements, control styling properties like placeholders and blur radii via attributes (e.g., `placeholder-color`, `blur-radius`) which internally map to CSS variables
Applied to files:
packages/web-platform/web-elements/src/compat/LinearContainer/LinearContainer.tspackages/web-platform/web-elements/src/elements/XRefreshView/XRefreshView.ts
📚 Learning: 2025-12-29T11:26:09.502Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
Learning: Applies to packages/web-platform/web-elements/src/elements/**/*.ts : Use `boostedQueueMicrotask` for DOM reads/writes to avoid synchronous layout thrashing when accurate layout info isn't immediately needed
Applied to files:
packages/web-platform/web-elements/src/compat/LinearContainer/LinearContainer.tspackages/web-platform/web-core-wasm-e2e/tests/web-core.test.ts
📚 Learning: 2025-12-29T11:26:09.502Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
Learning: Applies to packages/web-platform/web-elements/tests/**/*.spec.ts : Create a separate spec file for new components (e.g., `tests/x-webview.spec.ts`) instead of adding to the monolithic `web-elements.spec.ts`
Applied to files:
packages/web-platform/web-elements/src/compat/LinearContainer/LinearContainer.tspackages/web-platform/web-elements/src/elements/XRefreshView/XRefreshView.tspackages/web-platform/web-elements/tests/fixtures/component-event-test.htmlpackages/web-platform/web-core-wasm-e2e/tests/web-core.test.ts
📚 Learning: 2025-12-29T11:26:09.502Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
Learning: Applies to packages/web-platform/web-elements/src/elements/**/*.ts : Do NOT implement attribute handlers decorated with `registerAttributeHandler` directly on the main Element class decorated with `Component`. Create a separate Attribute Class implementing `AttributeReactiveClass` logic and pass it as the second argument to the `Component` decorator
Applied to files:
packages/web-platform/web-elements/src/compat/LinearContainer/LinearContainer.tspackages/web-platform/web-elements/src/elements/XRefreshView/XRefreshView.tspackages/web-platform/web-elements/tests/fixtures/component-event-test.htmlpackages/web-platform/web-elements/src/element-reactive/component.ts
📚 Learning: 2025-12-29T11:26:09.502Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
Learning: The `web-elements` package provides a Native UI implementation for the LynxJS Web Platform using Web Components built on the `element-reactive` reactive framework
Applied to files:
packages/web-platform/web-elements/src/compat/LinearContainer/LinearContainer.ts.changeset/wide-views-admire.md
📚 Learning: 2025-12-29T11:26:09.502Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
Learning: Applies to packages/web-platform/web-elements/src/elements/**/*.ts : Add boolean-like attributes that should not be filtered when set to 'false' string to the `static readonly notToFilterFalseAttributes` Set in the component class
Applied to files:
packages/web-platform/web-elements/src/compat/LinearContainer/LinearContainer.tspackages/web-platform/web-elements/src/element-reactive/component.ts
📚 Learning: 2025-12-29T11:26:09.502Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
Learning: Use extensive CSS variables (e.g., `--lynx-display`) to drive layout and style from the Lynx engine
Applied to files:
packages/web-platform/web-elements/src/compat/LinearContainer/linear-compat.css
📚 Learning: 2025-12-29T11:26:09.502Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
Learning: Applies to packages/web-platform/web-elements/src/elements/**/*.css : Write element-specific CSS in the element's directory with filename pattern `element-name.css` and import it in `elements.css`
Applied to files:
packages/web-platform/web-elements/src/compat/LinearContainer/linear-compat.css
📚 Learning: 2025-09-23T08:54:39.966Z
Learnt from: upupming
Repo: lynx-family/lynx-stack PR: 1670
File: packages/webpack/css-extract-webpack-plugin/test/hotCases/hot/hot-update-json/dual-thread/__snapshot__/index.css:6-8
Timestamp: 2025-09-23T08:54:39.966Z
Learning: In the lynx-stack CSS extract webpack plugin tests, many test fixture CSS files intentionally use invalid CSS syntax like `color: 'red';` with quoted values. The snapshots correctly reflect this invalid CSS from the source fixtures. To fix CSS validation issues, the source fixture files should be updated first, then snapshots regenerated, rather than manually editing snapshots.
Applied to files:
packages/web-platform/web-elements/src/compat/LinearContainer/linear-compat.csspackages/web-platform/web-core-wasm-e2e/tests/web-core.test.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/compat/LinearContainer/linear-compat.css
📚 Learning: 2025-12-29T11:26:09.502Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
Learning: Applies to packages/web-platform/web-elements/tests/fixtures/**/*.html : Use HTML files for test fixtures and define a helper function `goto(page, fixtureName)` to handle navigation and waiting for resources like `document.fonts.ready`
Applied to files:
packages/web-platform/web-elements/tests/fixtures/component-event-test.htmlpackages/web-platform/web-core-wasm-e2e/tests/web-core.test.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/component-event-test.html
📚 Learning: 2025-12-29T11:26:09.502Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
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()`, `expect(locator).toHaveCSS()`, and `diffScreenShot` for screenshot comparisons
Applied to files:
packages/web-platform/web-elements/tests/fixtures/component-event-test.htmlpackages/web-platform/web-core-wasm-e2e/tests/web-core.test.ts
📚 Learning: 2025-12-29T11:26:09.502Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
Learning: Applies to packages/web-platform/web-elements/tests/**/*.spec.ts : When a component makes external requests (e.g., via `iframe` or `fetch`), mock them using `page.route` in Playwright tests to ensure tests are hermetic and fast
Applied to files:
packages/web-platform/web-elements/tests/fixtures/component-event-test.htmlpackages/web-platform/web-core-wasm-e2e/tests/web-core.test.ts
📚 Learning: 2025-08-12T09:32:01.512Z
Learnt from: upupming
Repo: lynx-family/lynx-stack PR: 1370
File: packages/rspeedy/plugin-react/src/entry.ts:237-240
Timestamp: 2025-08-12T09:32:01.512Z
Learning: The events-cache.js functionality for caching events until background threads are ready is manually tested due to the complexity of constructing automated runtime test cases that involve timing, chunk loading, and browser runtime behavior.
Applied to files:
packages/web-platform/web-elements/tests/fixtures/component-event-test.htmlpackages/web-platform/web-core-wasm-e2e/tests/web-core.test.ts
📚 Learning: 2025-12-30T10:02:35.055Z
Learnt from: upupming
Repo: lynx-family/lynx-stack PR: 2081
File: packages/react/runtime/src/alog/elementPAPICall.ts:109-112
Timestamp: 2025-12-30T10:02:35.055Z
Learning: In packages/react/runtime/src/alog/elementPAPICall.ts, the helper APIs `__GetTag` and `__GetElementUniqueID` should always exist when instrumenting FiberElement PAPIs, so defensive checks for their existence are unnecessary.
Applied to files:
packages/web-platform/web-elements/tests/fixtures/component-event-test.html
📚 Learning: 2025-08-11T05:57:18.212Z
Learnt from: upupming
Repo: lynx-family/lynx-stack PR: 1305
File: packages/testing-library/testing-environment/src/index.ts:255-258
Timestamp: 2025-08-11T05:57:18.212Z
Learning: In the ReactLynx testing environment (`packages/testing-library/testing-environment/src/index.ts`), the dual assignment pattern `target.console.method = console.method = () => {}` is required for rstest compatibility. This is because rstest provides `console` in an IIFE (Immediately Invoked Function Expression), and both the target and global console need to have these methods defined for proper test execution.
Applied to files:
packages/web-platform/web-elements/tests/fixtures/component-event-test.htmlpackages/web-platform/web-core-wasm-e2e/tests/web-core.test.ts
📚 Learning: 2025-12-26T05:10:01.608Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-26T05:10:01.608Z
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-core-wasm-e2e/tests/web-core.test.ts
📚 Learning: 2026-01-04T11:17:23.990Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-core-wasm/AGENTS.md:0-0
Timestamp: 2026-01-04T11:17:23.990Z
Learning: When modifying Rust core logic in src/main_thread, ALWAYS add corresponding tests in tests/element-apis.spec.ts to verify the JS-side behavior
Applied to files:
packages/web-platform/web-core-wasm-e2e/tests/web-core.test.ts
📚 Learning: 2025-12-29T11:26:09.502Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
Learning: Applies to packages/web-platform/web-elements/tests/**/*.spec.ts : In Playwright tests, access Shadow DOM explicitly using `.shadowRoot` when using `evaluate` or `waitForFunction`, as document.querySelector fails to directly access shadow DOM elements
Applied to files:
packages/web-platform/web-core-wasm-e2e/tests/web-core.test.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-core-wasm-e2e/tests/web-core.test.ts
📚 Learning: 2025-09-10T10:27:32.903Z
Learnt from: PupilTong
Repo: lynx-family/lynx-stack PR: 1706
File: .github/workflows/test.yml:0-0
Timestamp: 2025-09-10T10:27:32.903Z
Learning: MULTI_THREAD×SSR combination is NYI (Not Yet Implemented) in the Playwright test configuration, which is why it's excluded from the test matrix in .github/workflows/test.yml.
Applied to files:
packages/web-platform/web-core-wasm-e2e/tests/web-core.test.ts
📚 Learning: 2025-08-21T08:46:54.494Z
Learnt from: upupming
Repo: lynx-family/lynx-stack PR: 1370
File: packages/webpack/cache-events-webpack-plugin/src/LynxCacheEventsRuntimeModule.ts:23-27
Timestamp: 2025-08-21T08:46:54.494Z
Learning: In Lynx webpack runtime modules, the team prioritizes performance and simplicity over defensive runtime error handling. They prefer relying on compile-time type safety (TypeScript) rather than adding runtime checks like try-catch blocks or type validation, especially for performance-critical code like cache event setup/cleanup functions.
Applied to files:
packages/web-platform/web-core-wasm-e2e/tests/web-core.test.ts
📚 Learning: 2025-09-28T07:52:03.601Z
Learnt from: Sherry-hue
Repo: lynx-family/lynx-stack PR: 1837
File: packages/web-platform/web-worker-runtime/src/backgroundThread/background-apis/createNativeApp.ts:151-154
Timestamp: 2025-09-28T07:52:03.601Z
Learning: There are two different registerUpdateDataHandler functions in the lynx-stack codebase:
1. Main thread version in packages/web-platform/web-worker-runtime/src/mainThread/crossThreadHandlers/registerUpdateDataHandler.ts takes (mainThreadRpc: Rpc, backgroundThreadRpc: Rpc, runtime: MainThreadGlobalThis)
2. Background thread version in packages/web-platform/web-worker-runtime/src/backgroundThread/background-apis/crossThreadHandlers/registerUpdateDataHandler.ts takes only (rpc: Rpc, tt: any)
Applied to files:
packages/web-platform/web-core-wasm-e2e/tests/web-core.test.ts
📚 Learning: 2025-09-28T07:52:03.601Z
Learnt from: Sherry-hue
Repo: lynx-family/lynx-stack PR: 1837
File: packages/web-platform/web-worker-runtime/src/backgroundThread/background-apis/createNativeApp.ts:151-154
Timestamp: 2025-09-28T07:52:03.601Z
Learning: There are two different registerUpdateDataHandler functions in the lynx-stack codebase:
1. Main thread version in packages/web-platform/web-worker-runtime/src/mainThread/crossThreadHandlers/registerUpdateDataHandler.ts takes (mainThreadRpc: Rpc, backgroundThreadRpc: Rpc, runtime: MainThreadGlobalThis)
2. Background thread version in packages/web-platform/web-worker-runtime/src/backgroundThread/background-apis/crossThreadHandlers/registerUpdateDataHandler.ts takes only (rpc: Rpc, tt: NativeTTObject)
Applied to files:
packages/web-platform/web-core-wasm-e2e/tests/web-core.test.ts
📚 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-core-wasm-e2e/tests/web-core.test.ts
📚 Learning: 2025-09-25T14:03:25.576Z
Learnt from: PupilTong
Repo: lynx-family/lynx-stack PR: 1834
File: packages/web-platform/web-worker-runtime/src/backgroundThread/background-apis/createChunkLoading.ts:162-171
Timestamp: 2025-09-25T14:03:25.576Z
Learning: In the lynx-stack codebase, for loadScriptAsync implementations in createChunkLoading.ts, unhandled promise rejections from readScriptAsync are intentionally not caught - the caller is expected to handle errors rather than the loadScriptAsync method itself invoking the callback with error messages.
Applied to files:
packages/web-platform/web-core-wasm-e2e/tests/web-core.test.ts
📚 Learning: 2025-11-06T01:19:23.670Z
Learnt from: colinaaa
Repo: lynx-family/lynx-stack PR: 1917
File: packages/mcp-servers/devtool-mcp-server/tsconfig.json:8-8
Timestamp: 2025-11-06T01:19:23.670Z
Learning: The lynx-js/devtool-mcp-server package in lynx-family/lynx-stack targets Node.js >=18.19 (specified in its package.json engines), which is different from the root project's requirement of Node.js ^22 || ^24. The package uses "lib": ["ES2024.Promise"] in its tsconfig.json because it manually includes polyfills for Promise.withResolvers while maintaining compatibility with Node.js v18.
Applied to files:
packages/web-platform/web-core-wasm-e2e/tests/web-core.test.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-core-wasm-e2e/tests/web-core.test.ts
📚 Learning: 2025-09-28T08:46:43.177Z
Learnt from: f0rdream
Repo: lynx-family/lynx-stack PR: 1835
File: packages/react/worklet-runtime/src/workletRuntime.ts:52-55
Timestamp: 2025-09-28T08:46:43.177Z
Learning: The legacy worklet path with `_lepusWorkletHash` in `packages/react/worklet-runtime/src/workletRuntime.ts` is preserved for compatibility with MTS (Mini-app Threading Service) that doesn't support Initial Frame Rendering. This path will not be touched in current implementations.
Applied to files:
packages/web-platform/web-core-wasm-e2e/tests/web-core.test.ts
📚 Learning: 2025-08-27T11:37:38.587Z
Learnt from: PupilTong
Repo: lynx-family/lynx-stack PR: 1589
File: packages/web-platform/web-worker-runtime/src/mainThread/startMainThread.ts:36-49
Timestamp: 2025-08-27T11:37:38.587Z
Learning: In web worker script loading (loadScript function), the pattern of calling fetch() before importScripts() is intentional for caching benefits, not redundant networking. The fetch() ensures HTTP caching is utilized before the synchronous importScripts() call.
Applied to files:
packages/web-platform/web-core-wasm-e2e/tests/web-core.test.ts
📚 Learning: 2025-08-29T16:59:22.060Z
Learnt from: PupilTong
Repo: lynx-family/lynx-stack PR: 1235
File: packages/web-platform/web-mainthread-apis/src/crossThreadHandlers/createQueryComponent.ts:33-38
Timestamp: 2025-08-29T16:59:22.060Z
Learning: The processEvalResult method in MainThreadGlobalThis interface should return the processed evaluation result rather than void, as it's used to transform lepusRootChunkExport in the lazy component loading flow.
Applied to files:
packages/web-platform/web-core-wasm-e2e/tests/web-core.test.ts
📚 Learning: 2025-12-26T05:10:01.608Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-26T05:10:01.608Z
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/src/element-reactive/component.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/wide-views-admire.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/wide-views-admire.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/wide-views-admire.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/wide-views-admire.md
📚 Learning: 2025-08-14T12:54:51.143Z
Learnt from: upupming
Repo: lynx-family/lynx-stack PR: 1370
File: .changeset/brave-melons-add.md:1-7
Timestamp: 2025-08-14T12:54:51.143Z
Learning: In the lynx-family/lynx-stack repository, packages use 0.x.x versioning where minor version bumps indicate breaking changes (not major bumps), following pre-1.0 semantic versioning conventions.
Applied to files:
.changeset/wide-views-admire.md
📚 Learning: 2025-12-26T05:10:01.608Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-26T05:10:01.608Z
Learning: Use changeset tool with `pnpm changeset` to document changes before contribution
Applied to files:
.changeset/wide-views-admire.md
📚 Learning: 2025-08-19T11:25:36.127Z
Learnt from: colinaaa
Repo: lynx-family/lynx-stack PR: 1558
File: .changeset/solid-squids-fall.md:2-2
Timestamp: 2025-08-19T11:25:36.127Z
Learning: In the lynx-family/lynx-stack repository, changesets should use the exact package name from package.json#name, not generic or unscoped names. Each package has its own specific scoped name (e.g., "lynx-js/react-transform" for packages/react/transform).
Applied to files:
.changeset/wide-views-admire.md
📚 Learning: 2025-08-13T11:36:12.075Z
Learnt from: colinaaa
Repo: lynx-family/lynx-stack PR: 1523
File: vitest.config.ts:52-72
Timestamp: 2025-08-13T11:36:12.075Z
Learning: The lynx-stack project requires Node.js >=22 as specified in package.json engines, so Node.js compatibility fallbacks for features introduced before v22 are unnecessary.
Applied to files:
.changeset/wide-views-admire.md
🧬 Code graph analysis (3)
packages/web-platform/web-elements/src/compat/LinearContainer/LinearContainer.ts (1)
packages/web-platform/web-elements/src/compat/index.ts (1)
LinearContainer(1-1)
packages/web-platform/web-elements/src/elements/XRefreshView/XRefreshHeader.ts (9)
packages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewNg.ts (1)
Component(18-79)packages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewSlotNg.ts (1)
Component(12-26)packages/web-platform/web-elements/src/elements/XRefreshView/XRefreshFooter.ts (1)
Component(11-23)packages/web-platform/web-elements/src/elements/XRefreshView/XRefreshView.ts (1)
Component(13-73)packages/web-platform/web-elements/src/elements/XSwiper/SwiperItem.ts (1)
Component(10-14)packages/web-platform/web-elements/src/elements/XView/XView.ts (1)
Component(14-39)packages/web-platform/web-elements/src/elements/XViewpagerNg/XViewpagerNg.ts (1)
Component(16-62)packages/web-platform/web-elements/src/compat/LinearContainer/LinearContainer.ts (1)
LinearContainer(89-91)packages/web-platform/web-elements/src/compat/index.ts (1)
LinearContainer(1-1)
packages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewHeaderNg.ts (10)
packages/web-platform/web-elements/src/elements/ScrollView/ScrollView.ts (1)
Component(16-116)packages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewSlotNg.ts (1)
Component(12-26)packages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewToolbarNg.ts (1)
Component(12-32)packages/web-platform/web-elements/src/elements/XRefreshView/XRefreshFooter.ts (1)
Component(11-23)packages/web-platform/web-elements/src/elements/XRefreshView/XRefreshHeader.ts (1)
Component(11-23)packages/web-platform/web-elements/src/elements/XSwiper/SwiperItem.ts (1)
Component(10-14)packages/web-platform/web-elements/src/elements/XView/XView.ts (1)
Component(14-39)packages/web-platform/web-elements/src/elements/XViewpagerNg/XViewpagerNg.ts (1)
Component(16-62)packages/web-platform/web-elements/src/compat/LinearContainer/LinearContainer.ts (1)
LinearContainer(89-91)packages/web-platform/web-elements/src/compat/index.ts (1)
LinearContainer(1-1)
🪛 LanguageTool
.changeset/wide-views-admire.md
[grammar] ~5-~5: Ensure spelling is correct
Context: ...lynx-js/web-elements": minor --- feat: intergrate the LinearContainer Compat plugin **Th...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
[grammar] ~9-~9: Ensure spelling is correct
Context: ... This is a BREAKING CHANGE Not we intergrated the LinearCompat in the @lynx-js/web-...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
🪛 markdownlint-cli2 (0.18.1)
.changeset/wide-views-admire.md
7-7: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: build / Build (Ubuntu)
- GitHub Check: build / Build (Windows)
- GitHub Check: test-rust / Test (Ubuntu)
- GitHub Check: test-rust / rustfmt
- GitHub Check: test-rust / clippy
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
CodSpeed Performance ReportMerging this PR will not alter performanceComparing Summary
Footnotes
|
Web Explorer#7096 Bundle Size — 383.14KiB (+0.83%).0cabea7(current) vs afef4ba main#7092(baseline) Bundle metrics
Bundle size by type
Bundle analysis report Branch PupilTong:p/hw/interigrate-web-e... Project dashboard Generated by RelativeCI Documentation Report issue |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In @.changeset/wide-views-admire.md:
- Line 7: Replace the bold emphasis line "**This is a BREAKING CHANGE**" with a
proper Markdown heading like "### This is a BREAKING CHANGE" so the linter
accepts it; locate the exact bold string in the .changeset entry (the line
containing **This is a BREAKING CHANGE**) and change it to a heading level
(e.g., prepend ### and remove the surrounding **).
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
.changeset/wide-views-admire.md
🧰 Additional context used
🧠 Learnings (12)
📓 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-29T11:26:09.502Z
Learning: Applies to packages/web-platform/web-elements/src/**/*.css : Use custom CSS properties to control linear layout behavior: `--lynx-display: linear`, `--lynx-linear-orientation`, `--lynx-linear-weight`, `--lynx-linear-weight-sum`, and `--lynx-linear-weight-basis`
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
Learning: Applies to packages/web-platform/web-elements/src/elements/**/*.ts : Group DOM updates to minimize layout thrashing in web component implementations
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-26T05:10:01.608Z
Learning: Applies to packages/react/components/**/*.{ts,tsx} : Optimize component library in packages/react/components/ using ReactLynx syntax
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
Learning: Applies to packages/web-platform/web-elements/src/**/*.css : Respect existing polyfills in `src/compat` and check browser support before using bleeding-edge CSS features
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
Learning: Applies to packages/web-platform/web-elements/src/elements/all.ts : Export new components in `src/elements/all.ts` and add export configuration to `package.json` under `exports` for both types and default
📚 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/wide-views-admire.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, 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/wide-views-admire.md
📚 Learning: 2025-12-29T11:26:09.502Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
Learning: Applies to packages/web-platform/web-elements/src/**/*.css : Use custom CSS properties to control linear layout behavior: `--lynx-display: linear`, `--lynx-linear-orientation`, `--lynx-linear-weight`, `--lynx-linear-weight-sum`, and `--lynx-linear-weight-basis`
Applied to files:
.changeset/wide-views-admire.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/wide-views-admire.md
📚 Learning: 2025-12-29T11:26:09.502Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: packages/web-platform/web-elements/AGENTS.md:0-0
Timestamp: 2025-12-29T11:26:09.502Z
Learning: The `web-elements` package provides a Native UI implementation for the LynxJS Web Platform using Web Components built on the `element-reactive` reactive framework
Applied to files:
.changeset/wide-views-admire.md
📚 Learning: 2025-08-14T12:54:51.143Z
Learnt from: upupming
Repo: lynx-family/lynx-stack PR: 1370
File: .changeset/brave-melons-add.md:1-7
Timestamp: 2025-08-14T12:54:51.143Z
Learning: In the lynx-family/lynx-stack repository, packages use 0.x.x versioning where minor version bumps indicate breaking changes (not major bumps), following pre-1.0 semantic versioning conventions.
Applied to files:
.changeset/wide-views-admire.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/wide-views-admire.md
📚 Learning: 2025-12-26T05:10:01.608Z
Learnt from: CR
Repo: lynx-family/lynx-stack PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-26T05:10:01.608Z
Learning: Use changeset tool with `pnpm changeset` to document changes before contribution
Applied to files:
.changeset/wide-views-admire.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/wide-views-admire.md
📚 Learning: 2025-08-19T11:25:36.127Z
Learnt from: colinaaa
Repo: lynx-family/lynx-stack PR: 1558
File: .changeset/solid-squids-fall.md:2-2
Timestamp: 2025-08-19T11:25:36.127Z
Learning: In the lynx-family/lynx-stack repository, changesets should use the exact package name from package.json#name, not generic or unscoped names. Each package has its own specific scoped name (e.g., "lynx-js/react-transform" for packages/react/transform).
Applied to files:
.changeset/wide-views-admire.md
📚 Learning: 2025-08-13T11:36:12.075Z
Learnt from: colinaaa
Repo: lynx-family/lynx-stack PR: 1523
File: vitest.config.ts:52-72
Timestamp: 2025-08-13T11:36:12.075Z
Learning: The lynx-stack project requires Node.js >=22 as specified in package.json engines, so Node.js compatibility fallbacks for features introduced before v22 are unnecessary.
Applied to files:
.changeset/wide-views-admire.md
🪛 markdownlint-cli2 (0.18.1)
.changeset/wide-views-admire.md
7-7: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: build / Build (Ubuntu)
- GitHub Check: build / Build (Windows)
- GitHub Check: test-rust / Test (Ubuntu)
🔇 Additional comments (1)
.changeset/wide-views-admire.md (1)
1-17: Changeset format and content are appropriate for this breaking change.The changeset correctly documents the feature integration, marks the breaking change, uses the exact scoped package name (@lynx-js/web-elements), and specifies a minor version bump consistent with 0.x.x versioning conventions for breaking changes. The migration guidance for developers is clear and actionable.
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/rspeedy@0.13.0 ### Minor Changes - Bump Rsbuild v1.7.1 with Rspack v1.7.0. ([#2088](#2088)) - **BREAKING CHANGE**: Remove the CLI version selector and the `--unmanaged` flag. ([#2093](#2093)) Rspeedy will no longer automatically attempt to use the locally installed version when the CLI is invoked. Please uninstall your globally installed version of Rspeedy: ```bash npm uninstall -g @lynx-js/rspeedy ``` ### Patch Changes - Updated dependencies \[]: - @lynx-js/web-rsbuild-server-middleware@0.19.5 ## @lynx-js/web-elements@0.11.0 ### Minor Changes - feat: integrate the LinearContainer Compat plugin ([#2100](#2100)) **This is a BREAKING CHANGE** Now we integrated the `LinearCompat` into @lynx-js/web-elements. Developers can safely remove the following imports: ```js import "@lynx-js/web-elements/compat/LinearContainer"; ``` ```js import "@lynx-js/web-elements-compat/LinearContainer"; ``` ### Patch Changes - fix: list-item `contain` property changes from `size` to `layout paint`, because the size of the `list-item` can be expanded by its children. ([#2043](#2043)) - Use the scoped `@lynx-js/source-field` for source build resolution. ([#2096](#2096)) ## @lynx-js/react@0.115.4 ### Patch Changes - fix: unable to access `MainThreadRef` in some scenarios ([#1996](#1996)) - Add `getComputedStyleProperty` for `MainThread.Element` to retrieve computed style values synchronously. ([#2005](#2005)) **Requires Lynx SDK >= 3.5** ```typescript function getStyle(ele: MainThread.Element) { "main thread"; const width = ele.getComputedStyleProperty("width"); // Returns 300px const transformMatrix = ele.getComputedStyleProperty("transform"); // Returns matrix(2, 0, 0, 2, 200, 400) } ``` ## @lynx-js/config-rsbuild-plugin@0.0.1 ### Patch Changes - Init `@lynx-js/config-rsbuild-plugin` for configuring Lynx Configs that are not exposed by DSL plugins. ([#2052](#2052)) For example: ```ts // lynx.config.ts import { pluginLynxConfig } from "@lynx-js/config-rsbuild-plugin"; import { defineConfig } from "@lynx-js/rspeedy"; export default defineConfig({ plugins: [ pluginLynxConfig({ enableCheckExposureOptimize: false, }), ], }); ``` ## @lynx-js/react-rsbuild-plugin@0.12.5 ### Patch Changes - Support reading config from `pluginLynxConfig`. ([#2054](#2054)) - Updated dependencies \[]: - @lynx-js/react-alias-rsbuild-plugin@0.12.5 - @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/web-constants@0.19.5 ### Patch Changes - Updated dependencies \[[`a91173c`](a91173c)]: - @lynx-js/web-worker-rpc@0.19.5 ## @lynx-js/web-core@0.19.5 ### Patch Changes - fix: pixelWidth and pixelHeight use client instead of screen ([#2055](#2055)) - Updated dependencies \[[`a91173c`](a91173c)]: - @lynx-js/web-worker-rpc@0.19.5 - @lynx-js/web-constants@0.19.5 - @lynx-js/web-worker-runtime@0.19.5 - @lynx-js/web-mainthread-apis@0.19.5 ## @lynx-js/web-explorer@0.0.16 ### Patch Changes - fix: add web bundle check && toast error ([#2101](#2101)) - fix: list-item `contain` property changes from `size` to `layout paint`, because the size of the `list-item` can be expanded by its children. ([#2043](#2043)) - fix: pixelWidth and pixelHeight use client instead of screen ([#2055](#2055)) ## @lynx-js/web-mainthread-apis@0.19.5 ### Patch Changes - Updated dependencies \[]: - @lynx-js/web-constants@0.19.5 ## @lynx-js/web-worker-rpc@0.19.5 ### Patch Changes - Use the scoped `@lynx-js/source-field` for source build resolution. ([#2096](#2096)) ## @lynx-js/web-worker-runtime@0.19.5 ### Patch Changes - Updated dependencies \[[`a91173c`](a91173c)]: - @lynx-js/web-worker-rpc@0.19.5 - @lynx-js/web-constants@0.19.5 - @lynx-js/web-mainthread-apis@0.19.5 ## create-rspeedy@0.13.0 ## @lynx-js/react-alias-rsbuild-plugin@0.12.5 ## upgrade-rspeedy@0.13.0 ## @lynx-js/web-core-server@0.19.5 ## @lynx-js/web-rsbuild-server-middleware@0.19.5 Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
This is a BREAKING CHANGE
Not we intergrated the
LinearCompatin the @lynx-js/web-elements. Developers could safely remove the following imports:Summary by CodeRabbit
Breaking Changes
New Features
Improvements
Tests
✏️ Tip: You can customize this high-level summary in your review settings.
Checklist