From 0c4cae014864496f055de7e6524a9525a92a031d Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Sat, 6 Jul 2024 06:10:42 +0100 Subject: [PATCH] Hello world --- package.json | 2 +- sdui/server/package.json | 6 +-- sdui/server/server/region.js | 2 + sdui/server/yarn.lock | 34 +++++++-------- src/components/appcom/AppCom.tsx | 6 ++- src/components/appcom/AppComponent.tsx | 27 ++++++++++++ src/components/appcom/modules.js | 21 +++++++++ src/components/appcom/vocabulary/index.tsx | 50 +++++----------------- yarn.lock | 8 ++-- 9 files changed, 89 insertions(+), 67 deletions(-) create mode 100644 src/components/appcom/AppComponent.tsx create mode 100644 src/components/appcom/modules.js diff --git a/package.json b/package.json index 3cab6c6e1d..ff808d0ed3 100644 --- a/package.json +++ b/package.json @@ -194,7 +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-server-dom-webpack": "19.0.0-canary-adb717393-20240411", "react-textarea-autosize": "^8.5.3", "rn-fetch-blob": "^0.12.0", "rn-tourguide": "bluesky-social/rn-tourguide", diff --git a/sdui/server/package.json b/sdui/server/package.json index 6be8b39509..0a6b56514e 100644 --- a/sdui/server/package.json +++ b/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-canary-adb717393-20240411", + "react-dom": "19.0.0-canary-adb717393-20240411", + "react-server-dom-webpack": "19.0.0-canary-adb717393-20240411", "undici": "^5.20.0" }, "scripts": { diff --git a/sdui/server/server/region.js b/sdui/server/server/region.js index 33fa247ef1..7aca24f10c 100644 --- a/sdui/server/server/region.js +++ b/sdui/server/server/region.js @@ -56,6 +56,8 @@ async function renderApp(res, returnValue, formState) { const moduleMap = { Text: { id: 'Text', + name: 'default', + chunks: ['main'], }, } const App = m.default.default || m.default diff --git a/sdui/server/yarn.lock b/sdui/server/yarn.lock index 7360918093..e6251f3e8f 100644 --- a/sdui/server/yarn.lock +++ b/sdui/server/yarn.lock @@ -2243,25 +2243,25 @@ raw-body@2.5.1: iconv-lite "0.4.24" unpipe "1.0.0" -react-dom@^19.0.0-rc-f38c22b244-20240704: - version "19.0.0-rc-f38c22b244-20240704" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-19.0.0-rc-f38c22b244-20240704.tgz#da4a9835999bc3992bf74cf5a595b01e7e536d6b" - integrity sha512-g89q2pf3irdpKFUMgCQgtxgqo3TSV1k1J6Sc8God4FwfxuNmAOOthkijENe5XZe6VeV1tor9DPzpjdTD9EyvNw== +react-dom@19.0.0-canary-adb717393-20240411: + version "19.0.0-canary-adb717393-20240411" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-19.0.0-canary-adb717393-20240411.tgz#b597e0dacd6cd79e89ffa3959e298251fd354138" + integrity sha512-zkJnxTJXN5sr7XJ7qq82S6UJJ81PZrZv3Y9Z4iY9Mx9fHAFTORnk7/5oWafrpfW544rLCSMWuxrKVYtXSyOQJA== dependencies: - scheduler "0.25.0-rc-f38c22b244-20240704" + scheduler "0.25.0-canary-adb717393-20240411" -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== +react-server-dom-webpack@19.0.0-canary-adb717393-20240411: + version "19.0.0-canary-adb717393-20240411" + resolved "https://registry.yarnpkg.com/react-server-dom-webpack/-/react-server-dom-webpack-19.0.0-canary-adb717393-20240411.tgz#49256e2d83378e2a39be5074f3d4bb7d5bb6a4dc" + integrity sha512-qbOEljTas1QIUGQsiwn1TvCeaAjZiiarmHJQjCXMpDI2uliURhbDalzquR4M5/gWw2m79iWKcnumA7azz4UZDg== dependencies: acorn-loose "^8.3.0" neo-async "^2.6.1" -react@^19.0.0-rc-f38c22b244-20240704: - version "19.0.0-rc-f38c22b244-20240704" - resolved "https://registry.yarnpkg.com/react/-/react-19.0.0-rc-f38c22b244-20240704.tgz#f8f213a8a5ea78c8757d603f1d1cdb8024185a45" - integrity sha512-OP8O6Oc1rdR9IdIKJRKaL1PYd4eGkn6f88VqiygWyyG4P4RmPPix5pp7MatqSt9TnBOcVT+lBMGoVxRgUFeudQ== +react@19.0.0-canary-adb717393-20240411: + version "19.0.0-canary-adb717393-20240411" + resolved "https://registry.yarnpkg.com/react/-/react-19.0.0-canary-adb717393-20240411.tgz#7f9d5332b9edd355e3469f4f9e3b6770e2614b62" + integrity sha512-vizYCKbfm3G8X4EOoGPtk5kmnwEz65AaBE5FhPgsU83pApj94zoYExeVr1SAoxK1DrWVGdZh0XKR1iOUxbFOZw== readdirp@~3.6.0: version "3.6.0" @@ -2409,10 +2409,10 @@ safe-buffer@5.1.2, safe-buffer@~5.1.1: version "2.1.2" resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a" -scheduler@0.25.0-rc-f38c22b244-20240704: - version "0.25.0-rc-f38c22b244-20240704" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.25.0-rc-f38c22b244-20240704.tgz#8eb138f35c5e600ea1db457182eafd003895cf97" - integrity sha512-uAELK9fHhvg7kDQhk29+uO8FUMWUpkg9WpzkNXFP+BJy5HEtqnajde3CxuSgh202WH9TqoaiWT1mdA3DvUu6cQ== +scheduler@0.25.0-canary-adb717393-20240411: + version "0.25.0-canary-adb717393-20240411" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.25.0-canary-adb717393-20240411.tgz#326381866e989de9227419d1177d9d3e44d5b48d" + integrity sha512-b8a8LYUgcGU22/QkOjvFaNW+OXAmuRp4IoHxM1Ve/aT2F/nO0fHpsIyAuik+g4SvOOnV3khW90mqNDG7nsjh/w== semver@^5.6.0: version "5.7.2" diff --git a/src/components/appcom/AppCom.tsx b/src/components/appcom/AppCom.tsx index 1bac9ee1eb..9a0a106342 100644 --- a/src/components/appcom/AppCom.tsx +++ b/src/components/appcom/AppCom.tsx @@ -1,11 +1,13 @@ +import './vocabulary' + import React from 'react' import {View} from 'react-native' import {ErrorBoundary} from 'react-error-boundary' import {ZodError} from 'zod' import {atoms as a, useTheme} from '#/alf' -import {Text} from '../Typography' -import {AppComponent} from './vocabulary' +import {Text} from '#/components/Typography' +import {AppComponent} from './AppComponent' export function AppComponentRegion({origin}: {origin: string}) { const t = useTheme() diff --git a/src/components/appcom/AppComponent.tsx b/src/components/appcom/AppComponent.tsx new file mode 100644 index 0000000000..7247c8a386 --- /dev/null +++ b/src/components/appcom/AppComponent.tsx @@ -0,0 +1,27 @@ +import {useQuery} from '@tanstack/react-query' +// @ts-ignore +import {createFromFetch} from 'react-server-dom-webpack/client' + +import {STALE} from 'state/queries' + +export function AppComponent({origin}: {origin: string}) { + const {data} = useQuery({ + queryKey: ['sdui', origin], + queryFn: async () => { + const {root} = await createFromFetch( + fetch(origin, { + headers: { + Accept: 'text/x-component', + }, + }), + ) + return {root} + }, + staleTime: STALE.INFINITY, + }) + + if (!data) { + return null // TODO + } + return data.root +} diff --git a/src/components/appcom/modules.js b/src/components/appcom/modules.js new file mode 100644 index 0000000000..7af6a11aea --- /dev/null +++ b/src/components/appcom/modules.js @@ -0,0 +1,21 @@ +/* global __bsky_require__ */ +/* global __bsky_chunk_load__ */ + +const map = new Map() + +export function register(id, moduleExport) { + map.set(id, {default: moduleExport}) +} + +global.__bsky_require__ = function (id) { + return map.get(id) +} +global.__bsky_require__.u = function () {} + +global.__bsky_chunk_load__ = function () { + return { + then(cb) { + cb() + }, + } +} diff --git a/src/components/appcom/vocabulary/index.tsx b/src/components/appcom/vocabulary/index.tsx index fcf52d8f07..714d1cd8c7 100644 --- a/src/components/appcom/vocabulary/index.tsx +++ b/src/components/appcom/vocabulary/index.tsx @@ -1,10 +1,5 @@ -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 {register} from '../modules' import {ActorLabel} from './ActorLabel' import {Avatar} from './Avatar' import {Box} from './Box' @@ -14,37 +9,12 @@ import {Label} from './Label' import {Stack} from './Stack' import {Tabs} from './Tabs' -// TODO -export const VOCAB: Record> = { - ActorLabel, - Avatar, - Box, - Embed, - Expandable, - Label, - Stack, - Tabs, -} - -export function AppComponent({origin}: {origin: string}) { - 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 {data.root} -} +register('Text', Text) +register('ActorLabel', ActorLabel) +register('Avatar', Avatar) +register('Box', Box) +register('Embed', Embed) +register('Expandable', Expandable) +register('Label', Label) +register('Stack', Stack) +register('Tabs', Tabs) diff --git a/yarn.lock b/yarn.lock index 53bf926a19..17519b40cc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -19211,10 +19211,10 @@ 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== +react-server-dom-webpack@19.0.0-canary-adb717393-20240411: + version "19.0.0-canary-adb717393-20240411" + resolved "https://registry.yarnpkg.com/react-server-dom-webpack/-/react-server-dom-webpack-19.0.0-canary-adb717393-20240411.tgz#49256e2d83378e2a39be5074f3d4bb7d5bb6a4dc" + integrity sha512-qbOEljTas1QIUGQsiwn1TvCeaAjZiiarmHJQjCXMpDI2uliURhbDalzquR4M5/gWw2m79iWKcnumA7azz4UZDg== dependencies: acorn-loose "^8.3.0" neo-async "^2.6.1"