diff --git a/.changeset/large-lilies-serve.md b/.changeset/large-lilies-serve.md new file mode 100644 index 0000000..a77ccdc --- /dev/null +++ b/.changeset/large-lilies-serve.md @@ -0,0 +1,5 @@ +--- +"@lynx-js/skill-vanilla-lynx": patch +--- + +Add separate Element PAPI tree examples for non-scrollable and scrollable containers, including fixed-height `__CreateScrollView` usage. diff --git a/packages/skills/vanilla-lynx/references/main-thread.md b/packages/skills/vanilla-lynx/references/main-thread.md index 32c944c..0e65774 100644 --- a/packages/skills/vanilla-lynx/references/main-thread.md +++ b/packages/skills/vanilla-lynx/references/main-thread.md @@ -23,6 +23,7 @@ Recommended APIs: - `__CreatePage`: create the page root. - `__GetElementUniqueID`: get the root element id for child creation. - `__CreateView`: create a container node. +- `__CreateScrollView`: create a scrollable container node. - `__CreateText`: create a text node. - `__CreateRawText`: create text content for a text node. - `__CreateImage`: create an image node. @@ -54,7 +55,10 @@ Do not use `__AddEvent` to bind UI events. Use `__AddEventListener` and remove t ## Build the Tree -Create the page root once, then create and append child nodes. Keep node references that need later updates in module scope. +Create the page root once, then create and append child nodes. Keep node +references that need later updates in module scope. + +### Non-Scrollable Container ```javascript const page = __CreatePage("0", 0); @@ -84,6 +88,24 @@ __SetAttribute(image, "src", "https://example.com/image.png"); __AppendElement(container, image); ``` +### Scrollable Container + +Use `__CreateScrollView` for a scrollable container and give it a fixed height. + +```javascript +const page = __CreatePage("0", 0); +const pageId = __GetElementUniqueID(page); +__SetClasses(page, "page"); + +const scrollView = __CreateScrollView(pageId); +__SetAttribute(scrollView, "scroll-orientation", "vertical"); +__SetInlineStyles(scrollView, "height: 500px;"); +__AppendElement(page, scrollView); + +const scrollContent = __CreateView(pageId); +__AppendElement(scrollView, scrollContent); +``` + ## Bind Element Events Bind Element PAPI node events directly on the main thread. Keep the handler lightweight when the event only mutates UI state. If the event needs heavier business logic, async work, timers, or native calls, bind the UI event on the main thread and dispatch a serializable task to the background thread.