@yuzhouu/canvas-kit 0.1.2

package/_vendor/canvas-product-react/runtime/CanvasProductRoot.tsx

@@ -0,0 +1,250 @@
+import { useEffect, useState } from "react";
+import { Canvas, EditorContext } from "@land/canvas-react";
+import { createCanvasPluginHostRuntime } from "@land/canvas-react/host";
+import type { AssetId, ContextMenuOpenSnapshot, Editor } from "@land/canvas-core";
+import type { CanvasPluginHostRuntime } from "@land/canvas-react/host";
+import type {
+  ProductApiRegistry,
+  ProductApiRegistryRuntime,
+} from "../api/apiRegistry";
+import { createProductApiRegistry } from "../api/apiRegistry";
+import type { CanvasProductDefinition } from "./productDefinition";
+import type {
+  ProductAssetResolverService,
+  ProductServiceRegistry,
+  ProductServiceRegistryRuntime,
+} from "./productServices";
+import { createProductServiceRegistry } from "./productServices";
+
+export function CanvasProductRoot({
+  product,
+}: {
+  product: CanvasProductDefinition;
+}) {
+  const [runtime, setRuntime] = useState<CanvasProductRuntime | null>(null);
+  const [contextMenuOpenSnapshot, setContextMenuOpenSnapshot] =
+    useState<ContextMenuOpenSnapshot | null>(null);
+  const activeRuntime = runtime?.product === product ? runtime : null;
+
+  useEffect(() => {
+    const nextRuntime = createCanvasProductRuntime(product);
+    setRuntime(nextRuntime);
+    setContextMenuOpenSnapshot(null);
+
+    return () => {
+      nextRuntime.services.dispose();
+    };
+  }, [product]);
+
+  const shouldRestoreStoredSnapshots =
+    activeRuntime &&
+    !!product.persistence?.restore &&
+    !activeRuntime.pluginHostRuntime.disablePersistence &&
+    !activeRuntime.pluginHostRuntime.ignoreStoredSnapshots &&
+    !(product.shouldSkipStoredSnapshots?.() ?? false);
+  const [hasHandledStoredSnapshots, setHasHandledStoredSnapshots] =
+    useState(false);
+
+  useEffect(() => {
+    if (!activeRuntime) {
+      setHasHandledStoredSnapshots(false);
+      return;
+    }
+
+    const { editor, pluginHostRuntime, services } = activeRuntime;
+
+    if (pluginHostRuntime.disablePersistence) {
+      setHasHandledStoredSnapshots(true);
+      return;
+    }
+
+    const persistence = product.persistence;
+    let cancelled = false;
+    let stopPersistence: (() => void) | null = null;
+    const startPersistence = () => {
+      if (!cancelled && persistence?.start) {
+        stopPersistence = persistence.start(editor);
+      }
+    };
+
+    if (!shouldRestoreStoredSnapshots) {
+      setHasHandledStoredSnapshots(true);
+      startPersistence();
+      return () => {
+        cancelled = true;
+        stopPersistence?.();
+      };
+    }
+
+    setHasHandledStoredSnapshots(false);
+    void persistence?.restore?.(editor)
+      .then(() => preloadProductAssets({ editor, product, services }))
+      .then(() => cleanupProductAssetsAfterRestore({ editor, product, services }))
+      .then(() => {
+        if (cancelled) {
+          return;
+        }
+        setHasHandledStoredSnapshots(true);
+        startPersistence();
+      })
+      .catch((error: unknown) => {
+        console.warn("Could not restore persisted canvas snapshot.", error);
+        setHasHandledStoredSnapshots(true);
+        startPersistence();
+      });
+
+    return () => {
+      cancelled = true;
+      stopPersistence?.();
+    };
+  }, [activeRuntime, product, shouldRestoreStoredSnapshots]);
+
+  if (!activeRuntime) {
+    return null;
+  }
+
+  const { apiRegistry, editor, pluginHostRuntime, services } = activeRuntime;
+  const ProductShell = product.Shell;
+  const canvas = hasHandledStoredSnapshots ? (
+    <Canvas
+      canvasComponents={pluginHostRuntime.canvasComponents}
+      canvasProviders={pluginHostRuntime.canvasProviders}
+      domEventGuardRegistry={pluginHostRuntime.domEventGuardRegistry}
+      onContextMenuRequest={setContextMenuOpenSnapshot}
+      rendererRegistry={pluginHostRuntime.rendererRegistry}
+    />
+  ) : null;
+
+  return (
+    <EditorContext.Provider value={editor}>
+      <ProductShell
+        product={product}
+        editor={editor}
+        pluginHostRuntime={pluginHostRuntime}
+        apiRegistry={apiRegistry}
+        services={services}
+        canvas={canvas}
+        contextMenuOpenSnapshot={contextMenuOpenSnapshot}
+        onContextMenuOpenChange={setContextMenuOpenSnapshot}
+        isReady={hasHandledStoredSnapshots}
+      />
+    </EditorContext.Provider>
+  );
+}
+
+interface CanvasProductRuntime {
+  product: CanvasProductDefinition;
+  editor: Editor;
+  apiRegistry: ProductApiRegistryRuntime;
+  pluginHostRuntime: CanvasPluginHostRuntime;
+  services: ProductServiceRegistryRuntime;
+}
+
+function createCanvasProductRuntime(
+  product: CanvasProductDefinition,
+): CanvasProductRuntime {
+  const services = createProductServiceRegistry({
+    factories: product.services ?? [],
+    productId: product.id,
+  });
+  const apiRegistry = createProductApiRegistry();
+  const pluginHostRuntime = createCanvasPluginHostRuntime(product.extensions);
+
+  let currentEditor: Editor | null = null;
+  const editor = product.createEditor({
+    corePlugins: pluginHostRuntime.corePlugins,
+    resolveAssetUrl(assetId) {
+      return currentEditor
+        ? resolveProductAssetUrl({
+            assetId,
+            editor: currentEditor,
+            product,
+            services,
+          })
+        : null;
+    },
+  });
+  currentEditor = editor;
+
+  for (const setupRuntime of product.runtimeSetups ?? []) {
+    setupRuntime({
+      productId: product.id,
+      apiRegistry,
+      editor,
+      pluginHostRuntime,
+      services,
+    });
+  }
+
+  return {
+    product,
+    apiRegistry,
+    editor,
+    pluginHostRuntime,
+    services,
+  };
+}
+
+function getAssetResolverServices({
+  product,
+  services,
+}: {
+  product: CanvasProductDefinition;
+  services: ProductServiceRegistry;
+}): ProductAssetResolverService[] {
+  return (product.assetResolverTokens ?? [])
+    .map((token) => services.get(token))
+    .filter((service): service is ProductAssetResolverService => !!service);
+}
+
+function resolveProductAssetUrl({
+  assetId,
+  editor,
+  product,
+  services,
+}: {
+  assetId: AssetId;
+  editor: Editor;
+  product: CanvasProductDefinition;
+  services: ProductServiceRegistry;
+}): string | null {
+  for (const resolver of getAssetResolverServices({ product, services })) {
+    const url = resolver.resolveAssetUrl(editor, assetId);
+    if (url) {
+      return url;
+    }
+  }
+  return null;
+}
+
+async function preloadProductAssets({
+  editor,
+  product,
+  services,
+}: {
+  editor: Editor;
+  product: CanvasProductDefinition;
+  services: ProductServiceRegistry;
+}): Promise<void> {
+  await Promise.all(
+    getAssetResolverServices({ product, services }).map((resolver) =>
+      resolver.preloadForEditor?.(editor),
+    ),
+  );
+}
+
+async function cleanupProductAssetsAfterRestore({
+  editor,
+  product,
+  services,
+}: {
+  editor: Editor;
+  product: CanvasProductDefinition;
+  services: ProductServiceRegistry;
+}): Promise<void> {
+  await Promise.all(
+    getAssetResolverServices({ product, services }).map((resolver) =>
+      resolver.cleanupAfterRestore?.(editor),
+    ),
+  );
+}

package/_vendor/canvas-product-react/runtime/productDefinition.ts

@@ -0,0 +1,72 @@
+import type { ComponentType, ReactNode } from "react";
+import type {
+  AssetId,
+  ContextMenuOpenSnapshot,
+  Editor,
+  LandCorePlugin,
+} from "@land/canvas-core";
+import type { LandExtension } from "@land/canvas-plugin-api";
+import type { CanvasPluginHostRuntime } from "@land/canvas-react/host";
+import type {
+  ProductApiRegistry,
+  ProductApiRegistryRuntime,
+} from "../api/apiRegistry";
+import type {
+  ProductAssetResolverService,
+  ProductServiceFactory,
+  ProductServiceRegistry,
+  ProductServiceRegistryRuntime,
+  ProductServiceToken,
+} from "./productServices";
+
+export interface ProductPersistenceAdapter {
+  restore?(editor: Editor): Promise<void>;
+  start?(editor: Editor): () => void;
+}
+
+export interface CreateCanvasProductEditorOptions {
+  corePlugins: readonly LandCorePlugin[];
+  resolveAssetUrl?: (assetId: AssetId) => string | null;
+}
+
+export interface CanvasProductRuntimeSetupContext {
+  productId: string;
+  apiRegistry: ProductApiRegistryRuntime;
+  editor: Editor;
+  pluginHostRuntime: CanvasPluginHostRuntime;
+  services: ProductServiceRegistryRuntime;
+}
+
+export type CanvasProductRuntimeSetup = (
+  context: CanvasProductRuntimeSetupContext,
+) => void;
+
+export interface CanvasProductShellProps {
+  product: CanvasProductDefinition;
+  editor: Editor;
+  pluginHostRuntime: CanvasPluginHostRuntime;
+  apiRegistry: ProductApiRegistry;
+  services: ProductServiceRegistry;
+  canvas: ReactNode | null;
+  contextMenuOpenSnapshot: ContextMenuOpenSnapshot | null;
+  onContextMenuOpenChange: (snapshot: ContextMenuOpenSnapshot | null) => void;
+  isReady: boolean;
+}
+
+export interface CanvasProductDefinition {
+  id: string;
+  extensions: readonly LandExtension[];
+  createEditor(options: CreateCanvasProductEditorOptions): Editor;
+  Shell: ComponentType<CanvasProductShellProps>;
+  runtimeSetups?: readonly CanvasProductRuntimeSetup[];
+  services?: readonly ProductServiceFactory<unknown>[];
+  assetResolverTokens?: readonly ProductServiceToken<ProductAssetResolverService>[];
+  persistence?: ProductPersistenceAdapter | null;
+  shouldSkipStoredSnapshots?: () => boolean;
+}
+
+export function defineCanvasProduct(
+  definition: CanvasProductDefinition,
+): CanvasProductDefinition {
+  return definition;
+}

package/_vendor/canvas-product-react/runtime/productServices.ts

@@ -0,0 +1,96 @@
+import type { AssetId, Editor } from "@land/canvas-core";
+
+export interface ProductServiceToken<TService> {
+  readonly id: string;
+  readonly __service?: TService;
+}
+
+export interface ProductServiceFactoryContext {
+  productId: string;
+}
+
+export interface ProductServiceFactory<TService> {
+  token: ProductServiceToken<TService>;
+  create(context: ProductServiceFactoryContext): TService;
+  dispose?(service: TService): void;
+}
+
+export interface ProductServiceRegistry {
+  get<TService>(token: ProductServiceToken<TService>): TService | null;
+}
+
+export interface ProductServiceRegistryRuntime extends ProductServiceRegistry {
+  register<TService>(
+    factory: ProductServiceFactory<TService>,
+    context: ProductServiceFactoryContext,
+  ): TService;
+  dispose(): void;
+}
+
+export interface ProductAssetResolverService {
+  resolveAssetUrl(editor: Editor, assetId: AssetId): string | null;
+  preloadForEditor?(editor: Editor): Promise<void>;
+  cleanupAfterRestore?(editor: Editor): Promise<void> | void;
+}
+
+export function createProductServiceToken<TService>(
+  id: string,
+): ProductServiceToken<TService> {
+  return { id };
+}
+
+export function createProductServiceRegistry({
+  factories,
+  productId,
+}: {
+  factories: readonly ProductServiceFactory<unknown>[];
+  productId: string;
+}): ProductServiceRegistryRuntime {
+  const services = new Map<string, unknown>();
+  const disposers: Array<() => void> = [];
+
+  const register = <TService>(
+    factory: ProductServiceFactory<TService>,
+    context: ProductServiceFactoryContext,
+  ): TService => {
+    const existing = services.get(factory.token.id) as TService | undefined;
+    if (existing) {
+      return existing;
+    }
+
+    const service = factory.create(context);
+    services.set(factory.token.id, service);
+    if (factory.dispose) {
+      disposers.push(() => factory.dispose?.(service));
+    }
+    return service;
+  };
+
+  for (const factory of factories) {
+    register(factory, { productId });
+  }
+
+  return {
+    register,
+    get<TService>(token: ProductServiceToken<TService>): TService | null {
+      return (services.get(token.id) as TService | undefined) ?? null;
+    },
+    dispose() {
+      for (const dispose of [...disposers].reverse()) {
+        dispose();
+      }
+      services.clear();
+    },
+  };
+}
+
+export function requireProductService<TService>(
+  services: ProductServiceRegistry,
+  token: ProductServiceToken<TService>,
+): TService {
+  const service = services.get(token);
+  if (!service) {
+    throw new Error(`Missing product service: ${token.id}`);
+  }
+  return service;
+}