Skip to content

Conversation

@pull
Copy link

@pull pull bot commented Apr 28, 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 : )

…JSX StringLiteral (#654)

<!--
  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

<!-- 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" -->

- [ ] Tests updated (or not required).
- [ ] Documentation updated (or not required).
@pull pull bot added the ⤵️ pull label Apr 28, 2025
@pull pull bot merged commit 25d384c into PupilTong:main Apr 28, 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.

1 participant