add dynamic vanilla preview renderer

Author: softmarshmallow

editor/components/app-runner/index.ts

@@ -4,3 +4,4 @@ export * from "./flutter-app-runner";
 export * from "./react-app-runner";
 export * from "./loading-indicator";
 export * from "./vanilla-esbuild-app-runner";
+export * from "./vanilla-dedicated-preview-renderer";

editor/components/app-runner/vanilla-app-runner.tsx

@@ -2,15 +2,15 @@ import React, { ReactEventHandler, useEffect, useRef } from "react";
 
 export const VanillaRunner = React.forwardRef(function (
   {
-    width,
-    height,
+    width = "100%",
+    height = "100%",
     source,
     onLoad,
     enableInspector = true,
     style,
   }: {
-    width: string;
-    height: string;
+    width?: React.CSSProperties["width"];
+    height?: React.CSSProperties["height"];
     source: string;
     onLoad?: ReactEventHandler<HTMLIFrameElement>;
     componentName: string;

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

@@ -0,0 +1,34 @@
+import React from "react";
+import { VanillaRunner } from "components/app-runner/vanilla-app-runner";
+import { ScenePreviewData } from "core/states";
+import { VanillaESBuildAppRunner } from "components/app-runner";
+
+export function VanillaDedicatedPreviewRenderer({
+  loader,
+  componentName,
+  source,
+}: ScenePreviewData) {
+  return (
+    <>
+      {loader === "vanilla-esbuild-template" ? (
+        <VanillaESBuildAppRunner
+          componentName={componentName}
+          doc={{
+            html: source.html,
+            javascript: source.javascript,
+          }}
+        />
+      ) : (
+        <VanillaRunner
+          key={source}
+          style={{
+            borderRadius: 4,
+            boxShadow: "0px 0px 48px #00000020",
+          }}
+          source={source}
+          componentName={componentName}
+        />
+      )}
+    </>
+  );
+}

editor/components/app-runner/vanilla-esbuild-app-runner.tsx

@@ -3,7 +3,9 @@ import { VanillaRunner } from "components/app-runner/vanilla-app-runner";
 
 export function VanillaESBuildAppRunner({
   doc,
+  componentName,
 }: {
+  componentName: string;
   doc?: {
     html: string;
     css?: string;
@@ -39,7 +41,7 @@ export function VanillaESBuildAppRunner({
       source={_html}
       width="100%"
       height="100%"
-      componentName={"preview"}
+      componentName={componentName}
     />
   );
 }