Hook up components

sdui/server/server/region.js

@@ -53,13 +53,15 @@ async function renderApp(res, returnValue, formState) {
   // const m = require('../src/App.js');
   const m = await import('../src/App.js')
 
-  const moduleMap = {
+  let moduleMap = {}
-    Text: {
+  for (let id of Object.keys(await import('../src/client.js'))) {
-      id: 'Text',
+    moduleMap[id] = {
+      id,
       name: 'default',
       chunks: ['main'],
-    },
+    }
   }
+
   const App = m.default.default || m.default
   const root = React.createElement(
     React.Fragment,

sdui/server/src/App.js

@@ -1,9 +1,13 @@
 import * as React from 'react'
 
-import {Text} from './client.js'
+import {Label, Stack} from './client.js'
 
 export default async function App() {
-  return <Text>hello</Text>
+  return (
+    <Stack gap={10}>
+      <Label size={36} lineHeight={1.2} weight="bold" text="Hello, world!" />
+    </Stack>
+  )
 }
 
 // TODO

sdui/server/src/client.js

@@ -1,4 +1,16 @@
-export const Text = {
+export const Text = createClientReference('Text')
-  $$typeof: Symbol.for('react.client.reference'),
+export const ActorLabel = createClientReference('ActorLabel')
-  $$id: 'Text',
+export const Avatar = createClientReference('Avatar')
+export const Box = createClientReference('Box')
+export const Embed = createClientReference('Embed')
+export const Expandable = createClientReference('Expandable')
+export const Label = createClientReference('Label')
+export const Stack = createClientReference('Stack')
+export const Tabs = createClientReference('Tabs')
+
+function createClientReference(id) {
+  return {
+    $$typeof: Symbol.for('react.client.reference'),
+    $$id: id,
+  }
 }

src/components/appcom/AppComponent.tsx

@@ -1,3 +1,4 @@
+import React, {Suspense} from 'react'
 import {useQuery} from '@tanstack/react-query'
 // @ts-ignore
 import {createFromFetch} from 'react-server-dom-webpack/client'
@@ -23,5 +24,6 @@ export function AppComponent({origin}: {origin: string}) {
   if (!data) {
     return null // TODO
   }
-  return data.root
+
+  return <Suspense fallback={null /* TODO */}>{data.root}</Suspense>
 }