Use official remote-dom library

.changeset/twelve-steaks-lie.md

@@ -0,0 +1,9 @@
+---
+'@watching/thread-render': patch
+'@watching/clips-preact': patch
+'@watching/clips-svelte': patch
+'@watching/clips-react': patch
+'@watching/clips': patch
+---
+
+Upgrade to real remote-dom library

app/package.json

@@ -27,14 +27,14 @@
     "@lemon/css": "workspace:*",
     "@lemon/zest": "workspace:*",
     "@lemonmade/graphql-live": "^0.4.3",
-    "@lemonmade/remote-ui": "^0.3.3",
-    "@lemonmade/remote-ui-preact": "^0.4.1",
-    "@lemonmade/remote-ui-react": "^0.3.1",
     "@quilted/graphql": "^3.0.1",
     "@quilted/graphql-tools": "^0.2.0",
     "@quilted/localize": "^0.2.0",
     "@quilted/quilt": "^0.6.8",
     "@quilted/react-query": "^0.3.1",
+    "@remote-dom/core": "^0.1.0",
+    "@remote-dom/preact": "^0.1.0",
+    "@remote-dom/react": "^0.1.0",
     "@simplewebauthn/browser": "^6.2.0",
     "@simplewebauthn/server": "^6.2.0",
     "@stripe/stripe-js": "^1.46.0",

app/shared/clips/Clip/Clip.tsx

@@ -1,6 +1,6 @@
 import {ComponentType, useEffect, useRef} from 'react';
 import {type ExtensionPoint} from '@watching/clips';
-import {RemoteRootRenderer} from '@lemonmade/remote-ui-preact/host';
+import {RemoteRootRenderer} from '@remote-dom/preact/host';
 import {
   Style,
   Popover,

app/shared/clips/components.ts

@@ -1,5 +1,5 @@
-import {RemoteFragmentRenderer} from '@lemonmade/remote-ui-preact/host';
-import {type RemoteComponentRendererMap} from '@lemonmade/remote-ui-react/host';
+import {RemoteFragmentRenderer} from '@remote-dom/preact/host';
+import {type RemoteComponentRendererMap} from '@remote-dom/react/host';
 
 import {Action} from './components/Action.tsx';
 import {BlockGrid} from './components/BlockGrid.tsx';

app/shared/clips/components/shared.ts

@@ -4,14 +4,13 @@ import {
   type ForwardRefExoticComponent,
   type ForwardRefRenderFunction,
 } from 'react';
-import {type Elements} from '@watching/clips';
-import {type RemoteElement} from '@lemonmade/remote-ui/elements';
-import {createRemoteComponentRenderer} from '@lemonmade/remote-ui-preact/host';
+import {ElementConstructors, type Elements} from '@watching/clips';
+import {createRemoteComponentRenderer} from '@remote-dom/preact/host';
 import {
-  type RemoteComponentType,
-  type RemoteComponentProps,
   type RemoteComponentRendererProps,
-} from '@lemonmade/remote-ui-react/host';
+  type RemoteComponentTypeFromElementConstructor,
+  type RemoteComponentPropsFromElementConstructor,
+} from '@remote-dom/react/host';
 import {signal, type Signal} from '@quilted/quilt/signals';
 import {
   isThreadSignal,
@@ -20,14 +19,10 @@ import {
 } from '@quilted/quilt/threads';
 
 export type ReactComponentPropsForClipsElement<Element extends keyof Elements> =
-  Elements[Element] extends RemoteElement<infer Properties, infer Slots>
-    ? RemoteComponentProps<Properties, Slots>
-    : never;
+  RemoteComponentPropsFromElementConstructor<ElementConstructors[Element]>;
 
 export type ReactComponentTypeForClipsElement<Element extends keyof Elements> =
-  Elements[Element] extends RemoteElement<infer Properties, infer Slots>
-    ? RemoteComponentType<Properties, Slots>
-    : never;
+  RemoteComponentTypeFromElementConstructor<ElementConstructors[Element]>;
 
 export function createClipsComponent<Element extends keyof Elements>(
   element: Element,
@@ -36,7 +31,7 @@ export function createClipsComponent<Element extends keyof Elements>(
     ReactComponentPropsForClipsElement<Element>
   >,
 ): ForwardRefExoticComponent<RemoteComponentRendererProps> {
-  return createRemoteComponentRenderer(Component, {
+  return createRemoteComponentRenderer(Component as any, {
     name: `Clips(${element})`,
   }) as any;
 }

app/shared/clips/extension-points.ts

@@ -5,7 +5,7 @@ import {
   type SharedGraphQLApi,
   type GraphQLApiForExtensionPoint,
 } from '@watching/clips';
-import type {RemoteComponentRendererMap} from '@lemonmade/remote-ui-react/host';
+import type {RemoteComponentRendererMap} from '@remote-dom/react/host';
 import {
   type GraphQLLiveResolverCreateHelper,
   type GraphQLLiveResolverObject,

app/shared/clips/extension.ts

@@ -1,7 +1,7 @@
 import {type Signal} from '@quilted/quilt/signals';
 import {type ThreadCallable} from '@quilted/quilt/threads';
 import {type ThreadRenderer} from '@watching/thread-render';
-import {type RemoteComponentRendererMap} from '@lemonmade/remote-ui-react/host';
+import {type RemoteComponentRendererMap} from '@remote-dom/react/host';
 
 import {type Version, type ExtensionPoint, type Api} from '@watching/clips';
 

app/shared/clips/manager.ts

@@ -182,7 +182,7 @@ export function createClipsManager(
           mutate: mutate as any,
         };
 
-        await sandbox.render(options.target, receiver.receive, api as any);
+        await sandbox.render(options.target, receiver.connection, api as any);
       },
     });
 
@@ -248,7 +248,7 @@ export function createClipsManager(
           mutate: mutate as any,
         };
 
-        await sandbox.render(options.target, receiver.receive, api as any);
+        await sandbox.render(options.target, receiver.connection, api as any);
       },
     });
 

app/shared/clips/sandbox/sandbox.ts

@@ -4,7 +4,7 @@ import {
   createBasicEncoder,
   createThreadFromWebWorker,
 } from '@quilted/quilt/threads';
-import {type RemoteMutationCallback} from '@lemonmade/remote-ui';
+import {type RemoteConnection} from '@remote-dom/core';
 
 import type {
   Api,
@@ -71,14 +71,14 @@ export async function load(script: string, _: Version) {
 
 export async function render<T extends ExtensionPoint>(
   id: T,
-  callback: RemoteMutationCallback,
+  connection: RemoteConnection,
   api: Api<T>,
 ) {
-  retain(callback);
+  retain(connection);
   retain(api);
 
   // @ts-expect-error I can’t get TypeScript to understand the union types going on here...
-  return runExtensionPoint(id, callback, api);
+  return runExtensionPoint(id, connection, api);
 }
 
 type ArgumentsForExtensionPoint<T extends ExtensionPoint> = Parameters<

packages/clips-preact/package.json

@@ -22,9 +22,9 @@
     "build": "rollup --config configuration/rollup.config.js"
   },
   "dependencies": {
-    "@lemonmade/remote-ui": "^0.3.3",
-    "@lemonmade/remote-ui-preact": "^0.4.1",
-    "@preact/signals-core": "^1.5.0"
+    "@preact/signals-core": "^1.5.0",
+    "@remote-dom/core": "^0.1.0",
+    "@remote-dom/preact": "^0.1.0"
   },
   "peerDependencies": {
     "@watching/clips": "workspace:^",

packages/clips-preact/source/components/Action.tsx

@@ -1,4 +1,4 @@
-import {createRemoteComponent} from '@lemonmade/remote-ui-preact';
+import {createRemoteComponent} from '@remote-dom/preact';
 import {Action as ActionElement} from '@watching/clips/elements';
 
 export const Action = createRemoteComponent('ui-action', ActionElement);

packages/clips-preact/source/components/BlockGrid.tsx

@@ -1,4 +1,4 @@
-import {createRemoteComponent} from '@lemonmade/remote-ui-preact';
+import {createRemoteComponent} from '@remote-dom/preact';
 import {BlockGrid as BlockGridElement} from '@watching/clips/elements';
 
 export const BlockGrid = createRemoteComponent(

packages/clips-preact/source/components/BlockStack.tsx

@@ -1,4 +1,4 @@
-import {createRemoteComponent} from '@lemonmade/remote-ui-preact';
+import {createRemoteComponent} from '@remote-dom/preact';
 import {BlockStack as BlockStackElement} from '@watching/clips/elements';
 
 export const BlockStack = createRemoteComponent(

packages/clips-preact/source/components/Disclosure.tsx

@@ -1,4 +1,4 @@
-import {createRemoteComponent} from '@lemonmade/remote-ui-preact';
+import {createRemoteComponent} from '@remote-dom/preact';
 import {Disclosure as DisclosureElement} from '@watching/clips/elements';
 
 export const Disclosure = createRemoteComponent(

packages/clips-preact/source/components/Footer.tsx

@@ -1,4 +1,4 @@
-import {createRemoteComponent} from '@lemonmade/remote-ui-preact';
+import {createRemoteComponent} from '@remote-dom/preact';
 import {Footer as FooterElement} from '@watching/clips/elements';
 
 export const Footer = createRemoteComponent('ui-footer', FooterElement);

packages/clips-preact/source/components/Grid.tsx

@@ -1,4 +1,4 @@
-import {createRemoteComponent} from '@lemonmade/remote-ui-preact';
+import {createRemoteComponent} from '@remote-dom/preact';
 import {Grid as GridElement} from '@watching/clips/elements';
 
 export const Grid = createRemoteComponent('ui-grid', GridElement);

packages/clips-preact/source/components/Header.tsx

@@ -1,4 +1,4 @@
-import {createRemoteComponent} from '@lemonmade/remote-ui-preact';
+import {createRemoteComponent} from '@remote-dom/preact';
 import {Header as HeaderElement} from '@watching/clips/elements';
 
 export const Header = createRemoteComponent('ui-header', HeaderElement);

packages/clips-preact/source/components/Heading.tsx

@@ -1,4 +1,4 @@
-import {createRemoteComponent} from '@lemonmade/remote-ui-preact';
+import {createRemoteComponent} from '@remote-dom/preact';
 import {Heading as HeadingElement} from '@watching/clips/elements';
 
 export const Heading = createRemoteComponent('ui-heading', HeadingElement);

packages/clips-preact/source/components/Image.tsx

@@ -1,4 +1,4 @@
-import {createRemoteComponent} from '@lemonmade/remote-ui-preact';
+import {createRemoteComponent} from '@remote-dom/preact';
 import {Image as ImageElement} from '@watching/clips/elements';
 
 export const Image = createRemoteComponent('ui-image', ImageElement);

packages/clips-preact/source/components/InlineGrid.tsx

@@ -1,4 +1,4 @@
-import {createRemoteComponent} from '@lemonmade/remote-ui-preact';
+import {createRemoteComponent} from '@remote-dom/preact';
 import {InlineGrid as InlineGridElement} from '@watching/clips/elements';
 
 export const InlineGrid = createRemoteComponent(

packages/clips-preact/source/components/InlineStack.tsx

@@ -1,4 +1,4 @@
-import {createRemoteComponent} from '@lemonmade/remote-ui-preact';
+import {createRemoteComponent} from '@remote-dom/preact';
 import {InlineStack as InlineStackElement} from '@watching/clips/elements';
 
 export const InlineStack = createRemoteComponent(

packages/clips-preact/source/components/Modal.tsx

@@ -1,4 +1,4 @@
-import {createRemoteComponent} from '@lemonmade/remote-ui-preact';
+import {createRemoteComponent} from '@remote-dom/preact';
 import {Modal as ModalElement} from '@watching/clips/elements';
 
 export const Modal = createRemoteComponent('ui-modal', ModalElement);

packages/clips-preact/source/components/Popover.tsx

@@ -1,4 +1,4 @@
-import {createRemoteComponent} from '@lemonmade/remote-ui-preact';
+import {createRemoteComponent} from '@remote-dom/preact';
 import {Popover as PopoverElement} from '@watching/clips/elements';
 
 export const Popover = createRemoteComponent('ui-popover', PopoverElement);

packages/clips-preact/source/components/Section.tsx

@@ -1,4 +1,4 @@
-import {createRemoteComponent} from '@lemonmade/remote-ui-preact';
+import {createRemoteComponent} from '@remote-dom/preact';
 import {Section as SectionElement} from '@watching/clips/elements';
 
 export const Section = createRemoteComponent('ui-section', SectionElement);

packages/clips-preact/source/components/Stack.tsx

@@ -1,4 +1,4 @@
-import {createRemoteComponent} from '@lemonmade/remote-ui-preact';
+import {createRemoteComponent} from '@remote-dom/preact';
 import {Stack as StackElement} from '@watching/clips/elements';
 
 export const Stack = createRemoteComponent('ui-stack', StackElement);

packages/clips-preact/source/components/Text.tsx

@@ -1,4 +1,4 @@
-import {createRemoteComponent} from '@lemonmade/remote-ui-preact';
+import {createRemoteComponent} from '@remote-dom/preact';
 import {Text as TextElement} from '@watching/clips/elements';
 
 export const Text = createRemoteComponent('ui-text', TextElement);

packages/clips-preact/source/components/TextBlock.tsx

@@ -1,4 +1,4 @@
-import {createRemoteComponent} from '@lemonmade/remote-ui-preact';
+import {createRemoteComponent} from '@remote-dom/preact';
 import {TextBlock as TextBlockElement} from '@watching/clips/elements';
 
 export const TextBlock = createRemoteComponent(

packages/clips-preact/source/components/TextField.tsx

@@ -1,4 +1,4 @@
-import {createRemoteComponent} from '@lemonmade/remote-ui-preact';
+import {createRemoteComponent} from '@remote-dom/preact';
 import {TextField as TextFieldElement} from '@watching/clips/elements';
 
 export const TextField = createRemoteComponent(

packages/clips-preact/source/components/View.tsx

@@ -1,4 +1,4 @@
-import {createRemoteComponent} from '@lemonmade/remote-ui-preact';
+import {createRemoteComponent} from '@remote-dom/preact';
 import {View as ViewElement} from '@watching/clips/elements';
 
 export const View = createRemoteComponent('ui-view', ViewElement);

packages/clips-preact/source/context.ts

@@ -5,7 +5,7 @@ import {
   type ExtensionPoint,
   type WithThreadSignals,
 } from '@watching/clips';
-import {type RemoteRootElement} from '@lemonmade/remote-ui/elements';
+import {type RemoteRootElement} from '@remote-dom/core/elements';
 
 export interface ClipRenderDetails<
   Point extends ExtensionPoint = ExtensionPoint,

packages/clips-preact/source/index.ts

@@ -1,6 +1,6 @@
 export * from '@watching/clips';
 export * from '@preact/signals-core';
-export {html} from '@lemonmade/remote-ui-preact/html';
+export {html} from '@remote-dom/preact/html';
 
 export {extension} from './extension.tsx';
 export {

packages/clips-react/package.json

@@ -21,9 +21,9 @@
     "build": "rollup --config configuration/rollup.config.js"
   },
   "dependencies": {
-    "@lemonmade/remote-ui": "^0.3.3",
-    "@lemonmade/remote-ui-react": "^0.3.1",
     "@preact/signals-core": "^1.5.0",
+    "@remote-dom/core": "^0.1.0",
+    "@remote-dom/react": "^0.1.0",
     "@types/react": "^18.2.39",
     "@types/react-dom": "^18.2.0"
   },

packages/clips-react/source/components/Action.tsx

@@ -1,4 +1,4 @@
-import {createRemoteComponent} from '@lemonmade/remote-ui-react';
+import {createRemoteComponent} from '@remote-dom/react';
 import {Action as ActionElement} from '@watching/clips/elements';
 
 export const Action = createRemoteComponent('ui-action', ActionElement);

packages/clips-react/source/components/BlockGrid.tsx

@@ -1,4 +1,4 @@
-import {createRemoteComponent} from '@lemonmade/remote-ui-react';
+import {createRemoteComponent} from '@remote-dom/react';
 import {BlockGrid as BlockGridElement} from '@watching/clips/elements';
 
 export const BlockGrid = createRemoteComponent(

packages/clips-react/source/components/BlockStack.tsx

@@ -1,4 +1,4 @@
-import {createRemoteComponent} from '@lemonmade/remote-ui-react';
+import {createRemoteComponent} from '@remote-dom/react';
 import {BlockStack as BlockStackElement} from '@watching/clips/elements';
 
 export const BlockStack = createRemoteComponent(

packages/clips-react/source/components/Disclosure.tsx

@@ -1,4 +1,4 @@
-import {createRemoteComponent} from '@lemonmade/remote-ui-react';
+import {createRemoteComponent} from '@remote-dom/react';
 import {Disclosure as DisclosureElement} from '@watching/clips/elements';
 
 export const Disclosure = createRemoteComponent(

packages/clips-react/source/components/Footer.tsx

@@ -1,4 +1,4 @@
-import {createRemoteComponent} from '@lemonmade/remote-ui-react';
+import {createRemoteComponent} from '@remote-dom/react';
 import {Footer as FooterElement} from '@watching/clips/elements';
 
 export const Footer = createRemoteComponent('ui-footer', FooterElement);

packages/clips-react/source/components/Grid.tsx

@@ -1,4 +1,4 @@
-import {createRemoteComponent} from '@lemonmade/remote-ui-react';
+import {createRemoteComponent} from '@remote-dom/react';
 import {Grid as GridElement} from '@watching/clips/elements';
 
 export const Grid = createRemoteComponent('ui-grid', GridElement);

packages/clips-react/source/components/Header.tsx

@@ -1,4 +1,4 @@
-import {createRemoteComponent} from '@lemonmade/remote-ui-react';
+import {createRemoteComponent} from '@remote-dom/react';
 import {Header as HeaderElement} from '@watching/clips/elements';
 
 export const Header = createRemoteComponent('ui-header', HeaderElement);

packages/clips-react/source/components/Heading.tsx

@@ -1,4 +1,4 @@
-import {createRemoteComponent} from '@lemonmade/remote-ui-react';
+import {createRemoteComponent} from '@remote-dom/react';
 import {Heading as HeadingElement} from '@watching/clips/elements';
 
 export const Heading = createRemoteComponent('ui-heading', HeadingElement);

packages/clips-react/source/components/Image.tsx

@@ -1,4 +1,4 @@
-import {createRemoteComponent} from '@lemonmade/remote-ui-react';
+import {createRemoteComponent} from '@remote-dom/react';
 import {Image as ImageElement} from '@watching/clips/elements';
 
 export const Image = createRemoteComponent('ui-image', ImageElement);

packages/clips-react/source/components/InlineGrid.tsx

@@ -1,4 +1,4 @@
-import {createRemoteComponent} from '@lemonmade/remote-ui-react';
+import {createRemoteComponent} from '@remote-dom/react';
 import {InlineGrid as InlineGridElement} from '@watching/clips/elements';
 
 export const InlineGrid = createRemoteComponent(

packages/clips-react/source/components/InlineStack.tsx

@@ -1,4 +1,4 @@
-import {createRemoteComponent} from '@lemonmade/remote-ui-react';
+import {createRemoteComponent} from '@remote-dom/react';
 import {InlineStack as InlineStackElement} from '@watching/clips/elements';
 
 export const InlineStack = createRemoteComponent(

packages/clips-react/source/components/Modal.tsx

@@ -1,4 +1,4 @@
-import {createRemoteComponent} from '@lemonmade/remote-ui-react';
+import {createRemoteComponent} from '@remote-dom/react';
 import {Modal as ModalElement} from '@watching/clips/elements';
 
 export const Modal = createRemoteComponent('ui-modal', ModalElement);

packages/clips-react/source/components/Popover.tsx

@@ -1,4 +1,4 @@
-import {createRemoteComponent} from '@lemonmade/remote-ui-react';
+import {createRemoteComponent} from '@remote-dom/react';
 import {Popover as PopoverElement} from '@watching/clips/elements';
 
 export const Popover = createRemoteComponent('ui-popover', PopoverElement);

packages/clips-react/source/components/Section.tsx

@@ -1,4 +1,4 @@
-import {createRemoteComponent} from '@lemonmade/remote-ui-react';
+import {createRemoteComponent} from '@remote-dom/react';
 import {Section as SectionElement} from '@watching/clips/elements';
 
 export const Section = createRemoteComponent('ui-section', SectionElement);

packages/clips-react/source/components/Stack.tsx

@@ -1,4 +1,4 @@
-import {createRemoteComponent} from '@lemonmade/remote-ui-react';
+import {createRemoteComponent} from '@remote-dom/react';
 import {Stack as StackElement} from '@watching/clips/elements';
 
 export const Stack = createRemoteComponent('ui-stack', StackElement);