Skip to content

Conversation

@pull
Copy link

@pull pull bot commented May 15, 2025

See Commits and Changes for more details.


Created by pull[bot] (v2.0.0-alpha.1)

Can you help keep this open source service alive? 💖 Please sponsor : )

PupilTong and others added 3 commits May 15, 2025 07:01
generate temp files for SSR.

use v8 hint for CSR & SSR
[https://v8.dev/blog/explicit-compile-hints](vscode-file://vscode-app/usr/share/code/resources/app/out/vs/code/electron-sandbox/workbench/workbench.html)

---------

Signed-off-by: PupilTong <12288479+PupilTong@users.noreply.github.com>
<!--
  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.
-->

## Summary

fix: #763

We move the deleting from `compiler.hooks.emit` to
`compilation.hooks.processAssets` to avoid having inlined JS chunks in
manifest generated by `rspack-manifest-plugin`.

Here is the new timeline:

- `processAssets`
  - stage `PROCESS_ASSETS_STAGE_OPTIMIZE_HASH`: generate `.lynx.bundle`
- stage `PROCESS_ASSETS_STAGE_REPORT`: upload source-map or assets map
(see: #179)
- stage `PROCESS_ASSETS_STAGE_REPORT` + 1: delete inlined assets
(`main-thread.js`, `background.[hash].js`)
  - stage `Inifity`: generating manifest (see: #763)

<!-- Can you explain the reasoning behind implementing this change? What
problem or issue does this pull request resolve? -->

<!-- It would be helpful if you could provide any relevant context, such
as GitHub issues or related discussions. -->

## Checklist

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

- [x] Tests updated (or not required).
- [ ] Documentation updated (or not required).
We're going to implement Lynx Web Platform's SSR based on the
`shadowrootmode`.


`https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement/shadowRootMode`

(chrome 111, firefox 123, safari 16.4)

This means those modern browsers are able to show the correct layout
before the web components are defined.

To make this work, we have to split the shadowroot template string into
a new package `@lynx-js/web-elements-template`.

---------

Signed-off-by: PupilTong <12288479+PupilTong@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
@pull pull bot requested a review from PupilTong as a code owner May 15, 2025 08:53
@pull pull bot added the ⤵️ pull label May 15, 2025
@pull pull bot merged commit ae9652a into PupilTong:main May 15, 2025
pull bot pushed 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 lynx-family#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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants