Improve static rendering (#346)

lemonmade · Sep 23, 2024 · 65666e4 · 65666e4
1 parent a764f6d
commit 65666e4
Show file tree

Hide file tree

Showing 24 changed files with 625 additions and 337 deletions.
diff --git a/.changeset/perfect-pets-sing.md b/.changeset/perfect-pets-sing.md
@@ -0,0 +1,6 @@
+---
+'@watching/design': patch
+'@watching/clips': patch
+---
+
+Add basic support for `action` attribute on button
diff --git a/.changeset/pretty-games-grab.md b/.changeset/pretty-games-grab.md
@@ -0,0 +1,6 @@
+---
+'@watching/tools': patch
+'@watching/cli': patch
+---
+
+Update clip static content uploading
diff --git a/app/server/graphql/resolvers/apps/ClipsExtension.ts b/app/server/graphql/resolvers/apps/ClipsExtension.ts
@@ -338,6 +338,7 @@ export const ClipsExtensionVersion = createResolverWithGid(
  assets: ({scriptUrl}) => (scriptUrl ? [{source: scriptUrl}] : []),
  translations: ({translations}) =>
  translations ? JSON.stringify(translations) : null,
+ // Database needs to store the exact right shapes in its JSON fields
  extends: ({extends: supports}) => (supports as any) ?? [],
  settings: ({settings}) => (settings as any) ?? {fields: []},
  },
@@ -435,13 +436,10 @@ export const ClipsExtensionInstallation = createResolverWithGid(
 
  if (loading == null) return null;
 
- const {parseLoadingHtml} = await import('@watching/tools/loading');
-
  return {
  ui: loading?.ui
  ? {
  html: loading.ui,
- tree: JSON.stringify(parseLoadingHtml(loading.ui)),
  }
  : null,
  };
@@ -528,6 +526,30 @@ export const WatchThrough = createResolver('WatchThrough', {
  },
 });
 
+async function parseExtensionPointTarget(extensionPoint: string) {
+ const {validateExtensionPoint} = await import('@watching/tools/extension');
+
+ if (!validateExtensionPoint(extensionPoint)) {
+ throw new Error(`Unsupported extension point: ${extensionPoint}`);
+ }
+
+ return extensionPoint;
+}
+
+async function parseLiveQuery(liveQuery: string) {
+ const {validateAndNormalizeLiveQuery} = await import(
+ '@watching/tools/extension'
+ );
+ return validateAndNormalizeLiveQuery(liveQuery);
+}
+
+async function parseLoadingUI(loadingUI: string) {
+ const {validateAndNormalizeLoadingUI} = await import(
+ '@watching/tools/extension'
+ );
+ return validateAndNormalizeLoadingUI(loadingUI);
+}
+
 async function createStagedClipsVersion({
  code,
  appId,
@@ -580,45 +602,53 @@ async function createStagedClipsVersion({
  translations: translations && JSON.parse(translations),
  extends: supports
  ? await Promise.all(
- supports.map(async ({target, liveQuery, loading, conditions}) => {
- return {
- target,
- liveQuery: liveQuery
- ? await (async () => {
- const [
- {parse},
- {toGraphQLOperation, cleanGraphQLDocument},
- ] = await Promise.all([
- import('graphql'),
- import('@quilted/graphql-tools'),
- ]);
-
- return toGraphQLOperation(
- cleanGraphQLDocument(parse(liveQuery)),
- ).source;
- })()
- : undefined,
- loading: loading?.ui
- ? {
- ui: await (async () => {
- const {parseLoadingHtml, serializeLoadingHtml} =
- await import('@watching/tools/loading');
-
- return serializeLoadingHtml(
- parseLoadingHtml(loading.ui!),
- );
- })(),
+ supports.map(
+ async ({target, modules, liveQuery, loading, conditions}) => {
+ const [
+ parsedTarget,
+ parsedModules,
+ parsedLiveQuery,
+ parsedLoadingUI,
+ ] = await Promise.all([
+ parseExtensionPointTarget(target),
+ Promise.all(
+ (modules ?? []).map(
+ async ({content, contentType = 'HTML'}) => {
+ if (content.length > 10_000) {
+ throw new Error(
+ `Clip module content for ${target} is too long`,
+ );
+ }
+
+ // TODO: validate HTML content
+
+ return {content, contentType};
+ },
+ ),
+ ),
+ liveQuery ? parseLiveQuery(liveQuery) : undefined,
+ loading?.ui ? parseLoadingUI(loading.ui) : undefined,
+ ]);
+
+ return {
+ target: parsedTarget,
+ modules: parsedModules,
+ liveQuery: parsedLiveQuery,
+ loading: parsedLoadingUI
+ ? {
+ ui: parsedLoadingUI,
+ }
+ : undefined,
+ conditions: conditions?.map((condition) => {
+ if (condition?.series?.handle == null) {
+ throw new Error(`Unknown condition: ${condition}`);
  }
- : undefined,
- conditions: conditions?.map((condition) => {
- if (condition?.series?.handle == null) {
- throw new Error(`Unknown condition: ${condition}`);
- }
-
- return condition;
- }),
- };
- }) as any,
+
+ return condition;
+ }),
+ };
+ },
+ ) as any,
  )
  : [],
  settings: settings?.fields

diff --git a/app/server/graphql/schema.d.ts.map b/app/server/graphql/schema.d.ts.map
diff --git a/app/shared/clips/Clip/Clip.tsx b/app/shared/clips/Clip/Clip.tsx
@@ -1,13 +1,10 @@
-import type {ComponentType} from 'preact';
 import {useEffect, useRef} from 'preact/hooks';
 
 import {type ExtensionPoint} from '@watching/clips';
 import {RemoteRootRenderer} from '@remote-dom/preact/host';
 import {
  Style,
  Popover,
- Stack,
- InlineStack,
  BlockStack,
  InlineGrid,
  View,
@@ -17,25 +14,22 @@ import {
  Icon,
  Button,
  Section,
- SkeletonButton,
- SkeletonText,
- SkeletonTextBlock,
- SkeletonView,
 } from '@lemon/zest';
 import {classes} from '@lemon/css';
 import type {ThreadRendererInstance} from '@watching/thread-render';
 
 import {useGraphQLMutation} from '~/shared/graphql.ts';
 
+import {ClipsExtensionPointBeingRenderedContext} from '../context.ts';
 import {useClipsManager} from '../react.tsx';
 import {
  type ClipsExtensionPoint,
  type ClipsExtensionPointInstance,
  type ClipsExtensionPointInstanceContext,
- type ClipsExtensionPointInstanceLoadingElement,
 } from '../extension.ts';
 
 import {ClipSettings} from './ClipSettings.tsx';
+import {ClipStaticRenderer} from './ClipStaticRenderer.tsx';
 
 import styles from './Clip.module.css';
 import uninstallClipsExtensionFromClipMutation from './graphql/UninstallClipsExtensionFromClipMutation.graphql';
@@ -57,56 +51,58 @@ export function Clip<Point extends ExtensionPoint>({
  const renderer = local ?? installed;
 
  return (
- <Section>
- <BlockStack spacing>
- <ContentAction
- overlay={
- <Popover inlineAttachment="start">
- {installed?.instance.value && (
- <Section padding>
- <ClipSettings
- id={extension.id}
- instance={installed.instance.value}
- />
- </Section>
- )}
- <Menu>
- <ViewAppAction />
- {renderer && <RestartClipButton instance={renderer} />}
- {extension.installed && (
- <UninstallClipButton extension={extension} />
+ <ClipsExtensionPointBeingRenderedContext.Provider value={extension}>
+ <Section>
+ <BlockStack spacing>
+ <ContentAction
+ overlay={
+ <Popover inlineAttachment="start">
+ {installed?.instance.value && (
+ <Section padding>
+ <ClipSettings
+ id={extension.id}
+ instance={installed.instance.value}
+ />
+ </Section>
  )}
- {extension.installed && <ReportIssueButton />}
- </Menu>
- </Popover>
- }
- >
- <InlineGrid sizes={['auto', 'fill']} spacing="small">
- <View
- display="inlineFlex"
- background="emphasized"
- border="subdued"
- cornerRadius
- alignment="center"
- blockSize={Style.css`2.5rem`}
- inlineSize={Style.css`2.5rem`}
- >
- <Icon source="app" />
- </View>
- <BlockStack>
- <Text emphasis accessibilityRole="heading">
- {name}
- </Text>
- <Text emphasis="subdued" size="small">
- from app <Text emphasis>{app.name}</Text>
- </Text>
- </BlockStack>
- </InlineGrid>
- </ContentAction>
-
- {renderer && <ClipInstanceRenderer renderer={renderer} />}
- </BlockStack>
- </Section>
+ <Menu>
+ <ViewAppAction />
+ {renderer && <RestartClipButton instance={renderer} />}
+ {extension.installed && (
+ <UninstallClipButton extension={extension} />
+ )}
+ {extension.installed && <ReportIssueButton />}
+ </Menu>
+ </Popover>
+ }
+ >
+ <InlineGrid sizes={['auto', 'fill']} spacing="small">
+ <View
+ display="inlineFlex"
+ background="emphasized"
+ border="subdued"
+ cornerRadius
+ alignment="center"
+ blockSize={Style.css`2.5rem`}
+ inlineSize={Style.css`2.5rem`}
+ >
+ <Icon source="app" />
+ </View>
+ <BlockStack>
+ <Text emphasis accessibilityRole="heading">
+ {name}
+ </Text>
+ <Text emphasis="subdued" size="small">
+ from app <Text emphasis>{app.name}</Text>
+ </Text>
+ </BlockStack>
+ </InlineGrid>
+ </ContentAction>
+
+ {renderer && <ClipInstanceRenderer renderer={renderer} />}
+ </BlockStack>
+ </Section>
+ </ClipsExtensionPointBeingRenderedContext.Provider>
  );
 }
 
@@ -215,16 +211,6 @@ function ClipInstanceRenderer<Point extends ExtensionPoint>({
  );
 }
 
-const LOADING_COMPONENT_MAP = new Map<string, ComponentType<any>>([
- ['ui-stack', Stack],
- ['ui-block-stack', BlockStack],
- ['ui-inline-stack', InlineStack],
- ['ui-skeleton-button', SkeletonButton],
- ['ui-skeleton-text', SkeletonText],
- ['ui-skeleton-text-block', SkeletonTextBlock],
- ['ui-skeleton-view', SkeletonView],
-]);
-
 function ClipsInstanceRendererLoading<Point extends ExtensionPoint>({
  instance,
 }: {
@@ -234,28 +220,5 @@ function ClipsInstanceRendererLoading<Point extends ExtensionPoint>({
 
  if (loadingUi == null) return null;
 
- const renderNode = (
- child: ClipsExtensionPointInstanceLoadingElement['children'][number],
- index: number,
- ) => {
- if (typeof child === 'string') {
- return <>{child}</>;
- }
-
- const {type, properties, children} = child;
-
- const Component = LOADING_COMPONENT_MAP.get(type);
-
- if (Component == null) {
- throw new Error(`Unknown loading component: ${type}`);
- }
-
- return (
- <Component key={index} {...properties}>
- {children.map(renderNode)}
- </Component>
- );
- };
-
- return <>{loadingUi.map(renderNode)}</>;
+ return <ClipStaticRenderer content={loadingUi} />;
 }