Skip to content

feat: add compiler only version of addComponentElement#15

Merged
colinaaa merged 1 commit intolynx-family:mainfrom
upupming:feat/addComponentElement-compilerOnly
Mar 4, 2025
Merged

feat: add compiler only version of addComponentElement#15
colinaaa merged 1 commit intolynx-family:mainfrom
upupming:feat/addComponentElement-compilerOnly

Conversation

@upupming
Copy link
Collaborator

@upupming upupming commented Mar 4, 2025

Summary

Checklist

  • Tests updated (or not required).
  • Documentation updated (or not required).

@changeset-bot
Copy link

changeset-bot bot commented Mar 4, 2025

🦋 Changeset detected

Latest commit: 6547d46

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@lynx-js/react Patch

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

@CLAassistant
Copy link

CLAassistant commented Mar 4, 2025

CLA assistant check
All committers have signed the CLA.

@upupming upupming force-pushed the feat/addComponentElement-compilerOnly branch from 9951da9 to 6547d46 Compare March 4, 2025 11:04
@colinaaa colinaaa enabled auto-merge (squash) March 4, 2025 11:43
@colinaaa colinaaa merged commit 2fd5a66 into lynx-family:main Mar 4, 2025
11 checks passed
colinaaa pushed a commit that referenced this pull request Mar 9, 2025
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/web-elements@0.3.0

### Minor Changes

- feat: support `justify-content`, `align-self` in linear container
([#37](#37))

    Now these two properties could work in a linear container.

We don't transforms the `justify-content` and `align-self` to css vars
any more.

The previous version of `@lynx-js/web-core` won't work with current
`@lynx-js/web-core` after this change.

### Patch Changes

- Support NPM provenance.
([#30](#30))

- Updated dependencies
\[[`c617453`](c617453)]:
    -   @lynx-js/web-elements-reactive@0.1.1

## @lynx-js/react@0.105.1

### Patch Changes

- Support NPM provenance.
([#30](#30))

- feat: add compiler only version of addComponentElement, it does not
support spread props but have no runtime overhead, use it by:
([#15](#15))

    ```js
    pluginReactLynx({
      compat: {
        addComponentElement: {
          compilerOnly: true,
        },
      },
    });
    ```

- Fix error `createRef is not a function`
([#16](#16))

- Support `MIXED` target for worklet, it will be used by unit testing
frameworks, etc.
([#27](#27))

- Support return value for `runOnBackground()` and `runOnMainThread()`.
([#119](#119))

Now you can get the return value from `runOnBackground()` and
`runOnMainThread()`, which enables more flexible data flow between the
main thread and the background thread.

    ```js
    import { runOnBackground } from "@lynx-js/react";

    const onTap = async () => {
      "main thread";
      const text = await runOnBackground(() => {
        "background only";
        return "Hello, world!";
      })();
      console.log(text);
    };
    ```

## @lynx-js/rspeedy@0.8.3

### Patch Changes

- Support NPM provenance.
([#30](#30))

- Fix error "'wmic' is not recognized as an internal or external
command" ([#91](#91))

- Bump Rsbuild v1.2.15 with Rspack v1.2.7.
([#44](#44))

- Updated dependencies
\[[`c617453`](c617453)]:
    -   @lynx-js/chunk-loading-webpack-plugin@0.1.7
    -   @lynx-js/webpack-dev-transport@0.1.1
    -   @lynx-js/websocket@0.0.4

## create-rspeedy@0.8.3

### Patch Changes

- Support NPM provenance.
([#30](#30))

- Changing filename of index.jsx to index.js because rspeedy requires
index.js. Then edit index.js import statement to make it import App.jsx
instead of App.js since App.jsx is present in the template. This
resolves "Module not found" error.
([#106](#106))

## @lynx-js/qrcode-rsbuild-plugin@0.3.4

### Patch Changes

- Support NPM provenance.
([#30](#30))

## @lynx-js/react-rsbuild-plugin@0.9.1

### Patch Changes

- Support NPM provenance.
([#30](#30))

- fix(rspeedy/plugin-react): mkdir main:background fails in windows
([#76](#76))

- fix(rspeedy/plugin-react): use path.posix.join for backgroundName to
ensure consistent path separators across platforms.
([#122](#122))

- Updated dependencies
\[[`c617453`](c617453),
[`870106f`](870106f),
[`ea82ef6`](ea82ef6)]:
    -   @lynx-js/runtime-wrapper-webpack-plugin@0.0.8
    -   @lynx-js/react-refresh-webpack-plugin@0.3.2
    -   @lynx-js/css-extract-webpack-plugin@0.5.1
    -   @lynx-js/template-webpack-plugin@0.6.4
    -   @lynx-js/react-webpack-plugin@0.6.7
    -   @lynx-js/react-alias-rsbuild-plugin@0.9.1
    -   @lynx-js/web-webpack-plugin@0.6.2

## @lynx-js/react-alias-rsbuild-plugin@0.9.1

### Patch Changes

- Support NPM provenance.
([#30](#30))

## @lynx-js/websocket@0.0.4

### Patch Changes

- Support NPM provenance.
([#30](#30))

## @lynx-js/tailwind-preset@0.0.2

### Patch Changes

- Support NPM provenance.
([#30](#30))

## @lynx-js/css-serializer@0.1.2

### Patch Changes

- Support NPM provenance.
([#30](#30))

## @lynx-js/web-constants@0.7.1

### Patch Changes

- Support NPM provenance.
([#30](#30))

- fix: some valus should be updateable by global scope
([#130](#130))

Now we add an allowlist to allow some identifiers could be updated by
globalThis.

    For those values in the allowlist:

        globalThis.foo = 'xx';
        console.log(foo); //'xx'

- refractor: improve some internal logic for element creating in MTS
([#71](#71))

- Updated dependencies
\[[`c617453`](c617453)]:
    -   @lynx-js/web-worker-rpc@0.7.1

## @lynx-js/web-core@0.7.1

### Patch Changes

- Support NPM provenance.
([#30](#30))

- fix: some valus should be updateable by global scope
([#130](#130))

Now we add an allowlist to allow some identifiers could be updated by
globalThis.

    For those values in the allowlist:

        globalThis.foo = 'xx';
        console.log(foo); //'xx'

- refactor: isolate the globalThis in mts
([#90](#90))

After this commit, developers' mts code won't be able to access the
globalThis

    The following usage will NOT work

        globalThis.foo = () =>{};
        foo();//crash

- refractor: improve some internal logic for element creating in MTS
([#71](#71))

- Updated dependencies
\[[`c617453`](c617453),
[`2044571`](2044571),
[`7da7601`](7da7601)]:
    -   @lynx-js/web-worker-runtime@0.7.1
    -   @lynx-js/web-worker-rpc@0.7.1
    -   @lynx-js/web-constants@0.7.1

## @lynx-js/web-elements-compat@0.2.3

### Patch Changes

- Support NPM provenance.
([#30](#30))

- feat: support `justify-content`, `align-self` in linear container
([#37](#37))

    Now these two properties could work in a linear container.

We don't transforms the `justify-content` and `align-self` to css vars
any more.

The previous version of `@lynx-js/web-core` won't work with current
`@lynx-js/web-core` after this change.

## @lynx-js/web-elements-reactive@0.1.1

### Patch Changes

- Support NPM provenance.
([#30](#30))

## @lynx-js/web-explorer@0.0.2

### Patch Changes

- Support NPM provenance.
([#30](#30))

## @lynx-js/web-mainthread-apis@0.7.1

### Patch Changes

- Support NPM provenance.
([#30](#30))

- fix: some valus should be updateable by global scope
([#130](#130))

Now we add an allowlist to allow some identifiers could be updated by
globalThis.

    For those values in the allowlist:

        globalThis.foo = 'xx';
        console.log(foo); //'xx'

- refactor: isolate the globalThis in mts
([#90](#90))

After this commit, developers' mts code won't be able to access the
globalThis

    The following usage will NOT work

        globalThis.foo = () =>{};
        foo();//crash

- refractor: improve some internal logic for element creating in MTS
([#71](#71))

- Updated dependencies
\[[`c617453`](c617453),
[`2044571`](2044571),
[`399a6d9`](399a6d9),
[`7da7601`](7da7601)]:
    -   @lynx-js/web-style-transformer@0.2.2
    -   @lynx-js/web-constants@0.7.1

## @lynx-js/web-style-transformer@0.2.2

### Patch Changes

- Support NPM provenance.
([#30](#30))

- feat: support `justify-content`, `align-self` in linear container
([#37](#37))

    Now these two properties could work in a linear container.

We don't transforms the `justify-content` and `align-self` to css vars
any more.

The previous version of `@lynx-js/web-core` won't work with current
`@lynx-js/web-core` after this change.

## @lynx-js/web-worker-rpc@0.7.1

### Patch Changes

- Support NPM provenance.
([#30](#30))

## @lynx-js/web-worker-runtime@0.7.1

### Patch Changes

- Support NPM provenance.
([#30](#30))

- Updated dependencies
\[[`c617453`](c617453),
[`2044571`](2044571),
[`82285ce`](82285ce),
[`7da7601`](7da7601)]:
    -   @lynx-js/web-mainthread-apis@0.7.1
    -   @lynx-js/web-worker-rpc@0.7.1
    -   @lynx-js/web-constants@0.7.1

## @lynx-js/chunk-loading-webpack-plugin@0.1.7

### Patch Changes

- Support NPM provenance.
([#30](#30))

- Updated dependencies
\[[`c617453`](c617453)]:
    -   @lynx-js/webpack-runtime-globals@0.0.5

## @lynx-js/css-extract-webpack-plugin@0.5.1

### Patch Changes

- Support NPM provenance.
([#30](#30))

## @lynx-js/react-refresh-webpack-plugin@0.3.2

### Patch Changes

- Support NPM provenance.
([#30](#30))

## @lynx-js/react-webpack-plugin@0.6.7

### Patch Changes

- Support NPM provenance.
([#30](#30))

- Updated dependencies
\[[`c617453`](c617453)]:
    -   @lynx-js/webpack-runtime-globals@0.0.5

## @lynx-js/runtime-wrapper-webpack-plugin@0.0.8

### Patch Changes

- Support NPM provenance.
([#30](#30))

- Updated dependencies
\[[`c617453`](c617453)]:
    -   @lynx-js/webpack-runtime-globals@0.0.5

## @lynx-js/template-webpack-plugin@0.6.4

### Patch Changes

- Support NPM provenance.
([#30](#30))

- Use WASM when NAPI is not available.
([#138](#138))

- Add `defaultOverflowVisible` option to `LynxTemplatePlugin`.
([#78](#78))

    ```js
import { LynxTemplatePlugin } from "@lynx-js/template-webpack-plugin";

    new LynxTemplatePlugin({
      defaultOverflowVisible: false,
    });
    ```

- Updated dependencies
\[[`c617453`](c617453)]:
    -   @lynx-js/webpack-runtime-globals@0.0.5
    -   @lynx-js/css-serializer@0.1.2

## @lynx-js/web-webpack-plugin@0.6.2

### Patch Changes

- Support NPM provenance.
([#30](#30))

- Updated dependencies
\[[`c617453`](c617453),
[`399a6d9`](399a6d9)]:
    -   @lynx-js/web-style-transformer@0.2.2

## @lynx-js/webpack-dev-transport@0.1.1

### Patch Changes

- Support NPM provenance.
([#30](#30))

## @lynx-js/webpack-runtime-globals@0.0.5

### Patch Changes

- Support NPM provenance.
([#30](#30))

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
upupming added a commit that referenced this pull request Jan 4, 2026
<!--
  Thank you for submitting a pull request!

We appreciate the time and effort you have invested in making these
changes. Please ensure that you provide enough information to allow
others to review your pull request.

Upon submission, your pull request will be automatically assigned with
reviewers.

If you want to learn more about contributing to this project, please
visit:
https://github.com/lynx-family/lynx-stack/blob/main/CONTRIBUTING.md.
-->

<!-- The AI summary below will be auto-generated - feel free to replace
it with your own. -->

Solves #2045

An example log from our examples/react package is as below.

First screen:

<details>

```log
[BackgroundThread Component Render] name: Fragment, uniqID: undefined, __id: undefined
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #1: __CreatePage("0", 0) => page#10
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #2: __GetElementUniqueID(page#10) => 10
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #3: __SetCSSId([page#10], 0)
main-thread.js:3460 [MainThread Component Render] name: App
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #4: __CreateView(10) => view#11
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #5: __CreateView(10) => view#12
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #6: __SetClasses(view#12, "Background")
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #7: __AppendElement(view#11, view#12) => view#12
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #8: __CreateView(10) => view#13
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #9: __SetClasses(view#13, "App")
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #10: __AppendElement(view#11, view#13) => view#13
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #11: __CreateView(10) => view#14
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #12: __SetClasses(view#14, "Banner")
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #13: __AppendElement(view#13, view#14) => view#14
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #14: __CreateWrapperElement(10) => wrapper#15
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #15: __AppendElement(view#14, wrapper#15) => wrapper#15
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #16: __CreateText(10) => text#16
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #17: __SetClasses(text#16, "Title")
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #18: __SetAttribute(text#16, "text", "React")
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #19: __AppendElement(view#14, text#16) => text#16
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #20: __CreateText(10) => text#17
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #21: __SetClasses(text#17, "Subtitle")
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #22: __SetAttribute(text#17, "text", "on Lynx")
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #23: __AppendElement(view#14, text#17) => text#17
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #24: __CreateView(10) => view#18
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #25: __SetClasses(view#18, "Content")
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #26: __AppendElement(view#13, view#18) => view#18
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #27: __CreateImage(10) => image#19
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #28: __SetClasses(image#19, "Arrow")
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #29: __AppendElement(view#18, image#19) => image#19
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #30: __CreateText(10) => text#20
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #31: __SetClasses(text#20, "Description")
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #32: __SetAttribute(text#20, "text", "Tap the logo and have fun!")
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #33: __AppendElement(view#18, text#20) => text#20
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #34: __CreateText(10) => text#21
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #35: __SetClasses(text#21, "Hint")
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #36: __AppendElement(view#18, text#21) => text#21
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #37: __CreateRawText("Edit") => raw-text#22
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #38: __AppendElement(text#21, raw-text#22) => raw-text#22
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #39: __CreateWrapperElement(10) => wrapper#23
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #40: __AppendElement(text#21, wrapper#23) => wrapper#23
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #41: __CreateRawText("to see updates!") => raw-text#24
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #42: __AppendElement(text#21, raw-text#24) => raw-text#24
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #43: __CreateView(10) => view#25
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #44: __SetInlineStyles(view#25, "flex:1")
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #45: __AppendElement(view#13, view#25) => view#25
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #46: __AppendElement(page#10, view#11) => view#11
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #47: __SetAttribute(image#19, "src", "http://1.1.1.1:3000/static/image/arrow.aee54ba7.png")
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #48: __CreateView(10) => view#26
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #49: __SetClasses(view#26, "Logo")
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #50: __ReplaceElement(view#26, wrapper#15)
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #51: __AddEvent(view#26, "bindEvent", "tap", "-3:0:")
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #52: __CreateImage(10) => image#27
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #53: __SetClasses(image#27, "Logo--lynx")
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #54: __AppendElement(view#26, image#27) => image#27
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #55: __SetAttribute(image#27, "src", "http://1.1.1.1:3000/static/image/lynx-logo.620eb8d1.png")
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #56: __CreateText(10) => text#28
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #57: __SetInlineStyles(text#28, "font-style:italic;color:rgba(255, 255, 255, 0.85)")
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #58: __ReplaceElement(text#28, wrapper#23)
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #59: __CreateRawText("") => raw-text#29
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #60: __SetAttribute(raw-text#29, "text", " src/App.tsx ")
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #61: __AppendElement(text#28, raw-text#29) => raw-text#29
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #62: __OnLifecycleEvent(["rLynxFirstScreen", {"root":"{\"id\":-1,\"type\":\"root\",\"children\":[{\"id\":-5,\"type\":\"__snapshot_835da_b8ae7_1\",\"values\":[\"http://1.1.1.1:3000/static/image/arrow.aee54ba7.png\"],\"children\":[{\"id\":-3,\"type\":\"__snapshot_835da_b8ae7_2\",\"values\":[\"-3:0:\"],\"children\":[{\"id\":-2,\"type\":\"__snapshot_835da_b8ae7_4\",\"values\":[\"http://1.1.1.1:3000/static/image/lynx-logo.620eb8d1.png\"]}]},{\"id\":-4,\"type\":\"__snapshot_835da_b8ae7_5\",\"children\":[{\"id\":-6,\"type\":null,\"values\":[\" src/App.tsx \"]}]}]}]}","jsReadyEventIdSwap":{}}])
background.js:11351 [rspeedy-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay disabled.
background.js:3564 [HMR] Waiting for update signal from WDS...
background.js:4476 [BackgroundThread Component Render] name: App, uniqID: __snapshot_835da_b8ae7_1, __id: 2
background.js:4476 [BackgroundThread Component Render] name: Fragment, uniqID: __snapshot_835da_b8ae7_1, __id: 2
background.js:214 Hello, ReactLynx
background.js:8011 [ReactLynxDebug] MTS -> BTS OnLifecycleEvent:
{
  "root": {
    "id": -1,
    "type": "root",
    "children": [
      {
        "id": -5,
        "type": "__snapshot_835da_b8ae7_1",
        "values": [
          "http://1.1.1.1:3000/static/image/arrow.aee54ba7.png"
        ],
        "children": [
          {
            "id": -3,
            "type": "__snapshot_835da_b8ae7_2",
            "values": [
              "-3:0:"
            ],
            "children": [
              {
                "id": -2,
                "type": "__snapshot_835da_b8ae7_4",
                "values": [
                  "http://1.1.1.1:3000/static/image/lynx-logo.620eb8d1.png"
                ]
              }
            ]
          },
          {
            "id": -4,
            "type": "__snapshot_835da_b8ae7_5",
            "children": [
              {
                "id": -6,
                "type": null,
                "values": [
                  " src/App.tsx "
                ]
              }
            ]
          }
        ]
      }
    ]
  },
  "jsReadyEventIdSwap": {}
}
main-thread.js:5801 [ReactLynxDebug] BTS -> MTS updateMainThread:
{
  "data": {
    "patchList": [
      {
        "snapshotPatch": [],
        "id": 2
      }
    ]
  },
  "patchOptions": {
    "isHydration": true,
    "reloadVersion": 0,
    "pipelineOptions": {
      "pipelineID": "0x16c567000_29",
      "needTimestamps": true,
      "pipelineOrigin": "reactLynxHydrate",
      "dsl": "reactLynx",
      "stage": "hydrate"
    }
  }
}
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #63: __FlushElementTree(page#10, {"pipelineOptions":{"pipelineID":"0x16c567000_29","needTimestamps":true,"pipelineOrigin":"reactLynxHydrate","dsl":"reactLynx","stage":"hydrate"}})

```

</details>

Next update:

<details>

```log
[BackgroundThread Component Render] name: App, uniqID: __snapshot_835da_b8ae7_1, __id: -5
main-thread.js:5801 [ReactLynxDebug] BTS -> MTS updateMainThread:
{
  "data": {
    "patchList": [
      {
        "id": 3,
        "snapshotPatch": [
          {
            "op": "RemoveChild",
            "parentId": -3,
            "childId": -2
          },
          {
            "op": "CreateElement",
            "type": "__snapshot_835da_b8ae7_3",
            "id": 7
          },
          {
            "op": "SetAttributes",
            "id": 7,
            "values": [
              "http://1.1.1.1:3000/static/image/react-logo.75eb3837.png"
            ]
          },
          {
            "op": "InsertBefore",
            "parentId": -3,
            "childId": 7,
            "beforeId": null
          }
        ]
      }
    ]
  },
  "patchOptions": {
    "reloadVersion": 0,
    "pipelineOptions": {
      "pipelineID": "0x16c567000_30",
      "needTimestamps": false,
      "pipelineOrigin": "updateTriggeredByBts",
      "dsl": "reactLynx",
      "stage": "update"
    }
  }
}
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #64: __RemoveElement(view#26, image#27) => image#27
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #65: __CreateImage(10) => image#30
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #66: __SetClasses(image#30, "Logo--react")
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #67: __SetAttribute(image#30, "src", "http://1.1.1.1:3000/static/image/react-logo.75eb3837.png")
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #68: __AppendElement(view#26, image#30) => image#30
main-thread.js:3421 [ReactLynxDebug] FiberElement API call #69: __FlushElementTree(page#10, {"pipelineOptions":{"pipelineID":"0x16c567000_30","needTimestamps":false,"pipelineOrigin":"updateTriggeredByBts","dsl":"reactLynx","stage":"update"}})
```

</details>

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Enhanced debug logging: structured, dual-thread API-call, lifecycle
and hydration traces when debug mode is enabled.
* **Tests**
* Added and expanded tests and snapshots to validate richer logging,
API-call sequences, and hydration traces.
* **Chores**
* Development-only error messages now include a troubleshooting hint
recommending the debug-mode option for easier diagnosis.

<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

## Checklist

<!--- Check and mark with an "x" -->

- [x] Tests updated (or not required).
- [ ] Documentation updated (or not required).
- [x] Changeset added, and when a BREAKING CHANGE occurs, it needs to be
clearly marked (or not required).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants