Vanilla scripting support

editor/components/app-runner/vanilla-dedicated-preview-renderer.tsx

@@ -4,6 +4,7 @@ import { ScenePreviewData } from "core/states";
 import { VanillaESBuildAppRunner } from "components/app-runner";
 
 export function VanillaDedicatedPreviewRenderer({
+  widgetKey,
   loader,
   componentName,
   source,
@@ -15,6 +16,7 @@ export function VanillaDedicatedPreviewRenderer({
     <>
       {loader === "vanilla-esbuild-template" ? (
         <VanillaESBuildAppRunner
+          key={widgetKey.id}
           componentName={componentName}
           doc={{
             html: source.html,
@@ -23,7 +25,7 @@ export function VanillaDedicatedPreviewRenderer({
         />
       ) : (
         <VanillaRunner
-          key={source}
+          key={widgetKey.id}
           style={{
             borderRadius: 4,
             boxShadow: "0px 0px 48px #00000020",

editor/config/index.ts

@@ -0,0 +1 @@
+export * from "./scripting-enabled-frameworks";

editor/config/scripting-enabled-frameworks.ts

@@ -0,0 +1,46 @@
+import type { FrameworkConfig } from "@designto/config";
+
+type Framework = FrameworkConfig["framework"];
+
+interface FrameworkEditorSciprtingPreviewConfig {
+  nativePreview: boolean;
+  nativeScripting: boolean;
+  enabled: boolean;
+}
+
+/**
+ * a config map by frameworks containing supported scripting and preview features.
+ */
+export const scripting_and_preview_framework_config: {
+  [key in Framework]: FrameworkEditorSciprtingPreviewConfig;
+} = {
+  vanilla: {
+    nativePreview: true,
+    nativeScripting: true,
+    enabled: true,
+  },
+  react: {
+    nativePreview: true,
+    nativeScripting: true,
+    enabled: true,
+  },
+  "react-native": {
+    nativePreview: false,
+    nativeScripting: false,
+    enabled: false,
+  },
+  flutter: {
+    nativePreview: false,
+    nativeScripting: false,
+    enabled: false,
+  },
+  preview: null,
+} as const;
+
+export function supportsScripting(framework: Framework) {
+  return scripting_and_preview_framework_config[framework].nativeScripting;
+}
+
+export function supportsPreview(framework: Framework) {
+  return scripting_and_preview_framework_config[framework].nativePreview;
+}

editor/scaffolds/code/index.tsx

@@ -18,6 +18,7 @@ import { RemoteImageRepositories } from "@design-sdk/figma-remote/lib/asset-repo
 import { useTargetContainer } from "hooks/use-target-node";
 import assert from "assert";
 import { debounce } from "utils/debounce";
+import { supportsScripting } from "config";
 
 export function CodeSegment() {
   const router = useRouter();
@@ -117,7 +118,9 @@ export function CodeSegment() {
     if (!targetted) {
       return;
     }
-    if (framework_config.framework === "react") {
+
+    // currently react and vanilla are supported
+    if (supportsScripting(framework_config.framework)) {
       dispatch({
         type: "code-editor-edit-component-code",
         framework: framework_config.framework,

editor/scaffolds/editor/editor-preview-provider.tsx

@@ -9,6 +9,7 @@ import assert from "assert";
 import { useDispatch } from "core/dispatch";
 import { useTargetContainer } from "hooks";
 import { WidgetKey } from "@reflect-ui/core";
+import { supportsPreview } from "config";
 
 const esbuild_base_html_code = `<div id="root"></div>`;
 
@@ -40,7 +41,7 @@ export function EditorPreviewDataProvider({
     [dispatch]
   );
 
-  const onVanillaPreviewResult = useCallback(
+  const onInitialVanillaPreviewResult = useCallback(
     (result: Result, isAssetUpdate?: boolean) => {
       dispatch({
         type: "preview-set",
@@ -68,6 +69,41 @@ export function EditorPreviewDataProvider({
     [dispatch]
   );
 
+  const onVanillaPreviewResult = useCallback(
+    ({
+      key,
+      initialSize,
+      raw,
+      componentName,
+    }: {
+      key: WidgetKey;
+      initialSize: { width: number; height: number };
+      raw: string;
+      componentName: string;
+    }) => {
+      dispatch({
+        type: "preview-set",
+        data: {
+          loader: "vanilla-html",
+          viewtype: "unknown",
+          widgetKey: key,
+          componentName: componentName,
+          fallbackSource: raw,
+          source: raw,
+          initialSize: initialSize,
+          isBuilding: false,
+          meta: {
+            bundler: "vanilla",
+            framework: "vanilla",
+            reason: "update",
+          },
+          updatedAt: Date.now(),
+        },
+      });
+    },
+    [dispatch]
+  );
+
   const onEsbuildReactPreviewResult = useCallback(
     ({
       key,
@@ -158,7 +194,7 @@ export function EditorPreviewDataProvider({
         },
       },
     })
-      .then(onVanillaPreviewResult)
+      .then(onInitialVanillaPreviewResult)
       .catch(console.error);
 
     if (!MainImageRepository.instance.empty) {
@@ -170,7 +206,7 @@ export function EditorPreviewDataProvider({
         asset_config: { asset_repository: MainImageRepository.instance },
       })
         .then((r) => {
-          onVanillaPreviewResult(r, true);
+          onInitialVanillaPreviewResult(r, true);
         })
         .catch(console.error)
         .finally(() => {
@@ -182,45 +218,61 @@ export function EditorPreviewDataProvider({
   //   // ------------------------
   //   // ------ for esbuild -----
   useEffect(() => {
-    if (
-      !state.editingModule ||
-      // now only react is supported.
-      state.editingModule.framework !== "react"
-    ) {
+    if (!state.editingModule) {
       return;
     }
 
-    const { raw, componentName } = state.editingModule;
-    assert(componentName, "component name is required");
-    assert(raw, "raw input code is required");
-    updateBuildingState(true);
-    bundler(transform(raw, componentName), "tsx")
-      .then((d) => {
-        if (d.err == null) {
-          if (d.code) {
-            onEsbuildReactPreviewResult({
-              key: new WidgetKey({
-                originName: target.name,
-                id: target.id,
-              }),
-              initialSize: {
-                width: target.width,
-                height: target.height,
-              },
-              bundledjs: d.code,
-              componentName: componentName,
+    if (supportsPreview(state.editingModule.framework)) {
+      const { raw, componentName } = state.editingModule;
+      assert(componentName, "component name is required");
+      assert(raw, "raw input code is required");
+      updateBuildingState(true);
+
+      const wkey = new WidgetKey({
+        originName: target.name,
+        id: target.id,
+      });
+
+      const initialSize = {
+        width: target.width,
+        height: target.height,
+      };
+
+      switch (state.editingModule.framework) {
+        case "react": {
+          bundler(transform(raw, componentName), "tsx")
+            .then((d) => {
+              if (d.err == null) {
+                if (d.code) {
+                  onEsbuildReactPreviewResult({
+                    key: wkey,
+                    initialSize: initialSize,
+                    bundledjs: d.code,
+                    componentName: componentName,
+                  });
+                }
+              } else {
+                consoleLog({ ...d.err });
+              }
+            })
+            .catch((e) => {
+              consoleLog({ method: "error", data: [e.message] });
+            })
+            .finally(() => {
+              updateBuildingState(false);
             });
-          }
-        } else {
-          consoleLog({ ...d.err });
+          break;
         }
-      })
-      .catch((e) => {
-        consoleLog({ method: "error", data: [e.message] });
-      })
-      .finally(() => {
-        updateBuildingState(false);
-      });
+        case "vanilla": {
+          onVanillaPreviewResult({
+            key: wkey,
+            initialSize,
+            componentName,
+            raw: state.editingModule.raw,
+          });
+        }
+      }
+    }
   }, [state.editingModule?.framework, state.editingModule?.raw]);
 
   return <>{children}</>;