refactor(solid): replace render with createRoot

Author: limwa

packages/solid/README.md

@@ -30,9 +30,11 @@ preload = ["@opentui/solid/preload"]
 3. Add render function to index.tsx:
 
 ```tsx
+import { createCliRenderer } from "@opentui/core"
 import { render } from "@opentui/solid"
 
-render(() => <text>Hello, World!</text>)
+const renderer = await createCliRenderer()
+createRoot(renderer).render(() => <text>Hello, World!</text>)
 ```
 
 4. Run with `bun index.tsx`.

packages/solid/examples/index.tsx

@@ -1,17 +1,18 @@
-import { render } from "@opentui/solid"
-import { ConsolePosition } from "@opentui/core"
+import { createRoot, render } from "@opentui/solid"
+import { ConsolePosition, createCliRenderer } from "@opentui/core"
 import ExampleSelector from "./components/ExampleSelector"
 
 // Uncomment to debug solidjs reconciler
 // process.env.DEBUG = "true"
 
-const App = () => <ExampleSelector />
-
-render(App, {
+const renderer = await createCliRenderer({
   targetFps: 30,
   consoleOptions: {
     position: ConsolePosition.BOTTOM,
     maxStoredLogs: 1000,
     sizePercent: 40,
   },
 })
+
+const App = () => <ExampleSelector />
+createRoot(renderer).render(App)

packages/solid/examples/repro-empty-styled-text.tsx

@@ -1,6 +1,6 @@
 import { createSignal, Show } from "solid-js"
-import { render, useKeyboard, useRenderer } from "@opentui/solid"
-import { t } from "@opentui/core"
+import { createRoot, useKeyboard, useRenderer } from "@opentui/solid"
+import { createCliRenderer, t } from "@opentui/core"
 
 process.env.DEBUG = "true"
 
@@ -42,4 +42,5 @@ const EmptyStyledTextTest = () => {
   )
 }
 
-render(EmptyStyledTextTest)
+const renderer = await createCliRenderer()
+createRoot(renderer).render(EmptyStyledTextTest)

packages/solid/examples/repro-filter-list.tsx

@@ -1,5 +1,6 @@
 import { createSignal, For } from "solid-js"
-import { render, useRenderer } from "@opentui/solid"
+import { createRoot, render, useRenderer } from "@opentui/solid"
+import { createCliRenderer } from "@opentui/core"
 
 process.env.DEBUG = "true"
 
@@ -37,4 +38,5 @@ const FilterListTest = () => {
   )
 }
 
-render(FilterListTest)
+const renderer = await createCliRenderer()
+createRoot(renderer).render(FilterListTest)

packages/solid/examples/repro-onSubmit.tsx

@@ -1,5 +1,6 @@
 import { createSignal, Match, Show, Switch } from "solid-js"
-import { render, useKeyboard, useRenderer } from "@opentui/solid"
+import { createRoot, render, useKeyboard, useRenderer } from "@opentui/solid"
+import { createCliRenderer } from "@opentui/core"
 
 process.env.DEBUG = "true"
 
@@ -67,4 +68,5 @@ const InputTest = () => {
   )
 }
 
-render(InputTest)
+const renderer = await createCliRenderer()
+createRoot(renderer).render(InputTest)

packages/solid/index.ts

@@ -4,29 +4,49 @@ import type { JSX } from "./jsx-runtime"
 import { RendererContext } from "./src/elements"
 import { _render as renderInternal, createComponent } from "./src/reconciler"
 
+/**
+ * @deprecated Use `createRoot(renderer).render(() => element)` instead
+ */
 export const render = async (
   node: () => JSX.Element,
   renderConfig: CliRendererConfig = {},
 ): Promise<{ renderer: CliRenderer }> => {
   const renderer = await createCliRenderer(renderConfig)
-  engine.attach(renderer)
-
-  renderInternal(
-    () =>
-      createComponent(RendererContext.Provider, {
-        get value() {
-          return renderer
-        },
-        get children() {
-          return createComponent(node, {})
-        },
-      }),
-    renderer.root,
-  )
+  createRoot(renderer).render(node)
 
   return { renderer }
 }
 
+/**
+ * Creates a root for rendering a Solid tree with the given CLI renderer.
+ * @param renderer The CLI renderer to use
+ * @returns A root object with a `render` method
+ * @example
+ * ```tsx
+ * const renderer = await createCliRenderer()
+ * createRoot(renderer).render(() => <App />)
+ * ```
+ */
+export const createRoot = (renderer: CliRenderer): { render: (node: () => JSX.Element) => void } => {
+  return {
+    render: (node) => {
+      engine.attach(renderer)
+      renderInternal(
+        () =>
+          createComponent(RendererContext.Provider, {
+            get value() {
+              return renderer
+            },
+            get children() {
+              return createComponent(node, {})
+            },
+          }),
+        renderer.root,
+      )
+    },
+  }
+}
+
 export const testRender = async (node: () => JSX.Element, renderConfig: TestRendererOptions = {}) => {
   const testSetup = await createTestRenderer(renderConfig)
   engine.attach(testSetup.renderer)