Hook up requests

package.json

@@ -194,6 +194,7 @@
     "react-native-web-webview": "^1.0.2",
     "react-native-webview": "13.10.2",
     "react-responsive": "^9.0.2",
+    "react-server-dom-webpack": "19.0.0-rc-f38c22b244-20240704",
     "react-textarea-autosize": "^8.5.3",
     "rn-fetch-blob": "^0.12.0",
     "rn-tourguide": "bluesky-social/rn-tourguide",

sdui/server/package.json

@@ -15,9 +15,9 @@
     "busboy": "^1.6.0",
     "compression": "^1.7.4",
     "nodemon": "^2.0.19",
-    "react": "^19.0.0-rc-f38c22b244-20240704",
-    "react-dom": "^19.0.0-rc-f38c22b244-20240704",
-    "react-server-dom-webpack": "^19.0.0-rc-f38c22b244-20240704",
+    "react": "19.0.0-rc-f38c22b244-20240704",
+    "react-dom": "19.0.0-rc-f38c22b244-20240704",
+    "react-server-dom-webpack": "19.0.0-rc-f38c22b244-20240704",
     "undici": "^5.20.0"
   },
   "scripts": {

sdui/server/server/region.js

@@ -37,6 +37,11 @@ const compress = require('compression')
 
 app.use(compress())
 
+app.use((req, res, next) => {
+  res.header('Access-Control-Allow-Origin', '*')
+  next()
+})
+
 // Application
 
 const React = require('react')

src/components/appcom/vocabulary/index.tsx

@@ -1,5 +1,9 @@
 import React from 'react'
+import {useQuery} from '@tanstack/react-query'
+// @ts-ignore
+import {createFromFetch} from 'react-server-dom-webpack/client'
 
+import {STALE} from 'state/queries'
 import {Text} from '#/components/Typography'
 import {ActorLabel} from './ActorLabel'
 import {Avatar} from './Avatar'
@@ -23,6 +27,24 @@ export const VOCAB: Record<string, React.ComponentType<any>> = {
 }
 
 export function AppComponent({origin}: {origin: string}) {
-  // TODO
-  return <Text>{origin}</Text>
+  const {data} = useQuery({
+    queryKey: ['sdui', origin],
+    queryFn: async () => {
+      const {root} = await createFromFetch(
+        fetch(origin, {
+          headers: {
+            Accept: 'text/x-component',
+          },
+        }),
+      )
+      return {root}
+    },
+    staleTime: STALE.INFINITY,
+  })
+
+  console.log(data)
+  if (!data) {
+    return null // TODO
+  }
+  return <Text>{data.root}</Text>
 }

yarn.lock

@@ -8613,6 +8613,13 @@ acorn-jsx@^5.3.2:
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
+acorn-loose@^8.3.0:
+  version "8.4.0"
+  resolved "https://registry.yarnpkg.com/acorn-loose/-/acorn-loose-8.4.0.tgz#26d3e219756d1e180d006f5bcc8d261a28530f55"
+  integrity sha512-M0EUka6rb+QC4l9Z3T0nJEzNOO7JcoJlYMrBlyBCiFSXRyxjLKayd4TbQs2FDRWQU1h9FR7QVNHt+PEaoNL5rQ==
+  dependencies:
+    acorn "^8.11.0"
+
 acorn-walk@^7.1.1:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
@@ -8643,6 +8650,11 @@ acorn@^8.1.0, acorn@^8.2.4, acorn@^8.4.1, acorn@^8.7.1, acorn@^8.8.1, acorn@^8.8
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.10.0.tgz#8be5b3907a67221a81ab23c7889c4c5526b62ec5"
   integrity sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==
 
+acorn@^8.11.0:
+  version "8.12.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.12.1.tgz#71616bdccbe25e27a54439e0046e89ca76df2248"
+  integrity sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==
+
 address@^1.0.1, address@^1.1.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/address/-/address-1.2.2.tgz#2b5248dac5485a6390532c6a517fda2e3faac89e"
@@ -16705,7 +16717,7 @@ negotiator@0.6.3:
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.3.tgz#58e323a72fedc0d6f9cd4d31fe49f51479590ccd"
   integrity sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==
 
-neo-async@^2.5.0, neo-async@^2.6.2:
+neo-async@^2.5.0, neo-async@^2.6.1, neo-async@^2.6.2:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
@@ -19199,6 +19211,14 @@ react-scripts@^5.0.1:
   optionalDependencies:
     fsevents "^2.3.2"
 
+react-server-dom-webpack@19.0.0-rc-f38c22b244-20240704:
+  version "19.0.0-rc-f38c22b244-20240704"
+  resolved "https://registry.yarnpkg.com/react-server-dom-webpack/-/react-server-dom-webpack-19.0.0-rc-f38c22b244-20240704.tgz#d016db76ff9537d7fd042fcdd5ade8cea95166ce"
+  integrity sha512-AQ+3BkhxqUkmwXDDvf5uMrsfb5h0SpQv/bfO7dfwrkjwMJreKwan1fMXEPckCtGALoTUtHbuQoJbeudNttk5sQ==
+  dependencies:
+    acorn-loose "^8.3.0"
+    neo-async "^2.6.1"
+
 react-shallow-renderer@^16.15.0:
   version "16.15.0"
   resolved "https://registry.yarnpkg.com/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz#48fb2cf9b23d23cde96708fe5273a7d3446f4457"