Merge pull request #4165 from easyops-cn/steve/v3-preview-inject

feat(preview): support _preview_only_inject
easyops-cn · May 10, 2024 · fde1f37 · fde1f37
2 parents a89c16f + 2dd3226
commit fde1f37
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 10 deletions.
diff --git a/packages/brick-playground/src/index.ts b/packages/brick-playground/src/index.ts
@@ -251,7 +251,7 @@ async function main() {
   let previewWin: PreviewWindow;
   const iframeReady = new Promise<void>((resolve, reject) => {
     iframe.addEventListener("load", () => {
-      previewWin = iframe.contentWindow as unknown as PreviewWindow;
+      previewWin = iframe.contentWindow as PreviewWindow;
       resolve();
     });
     iframe.addEventListener("error", (reason) => {

diff --git a/packages/preview/package.json b/packages/preview/package.json
@@ -11,7 +11,7 @@
   "typings": "index.d.ts",
   "files": [
     "dist",
-    "index.d.ts"
+    "types.d.ts"
   ],
   "exports": {
     "./types": {
@@ -28,6 +28,7 @@
   "devDependencies": {
     "@next-core/build-next-bricks": "^1.20.8",
     "@next-core/http": "^1.2.1",
+    "@next-core/loader": "^1.5.7",
     "@next-core/runtime": "^1.41.1",
     "@next-core/test-next": "^1.1.0",
     "@next-core/theme": "^1.5.0",

diff --git a/packages/preview/src/bootstrap.ts b/packages/preview/src/bootstrap.ts
@@ -6,6 +6,7 @@ import {
   unstable_createRoot,
 } from "@next-core/runtime";
 import { http, HttpRequestConfig } from "@next-core/http";
+import { loadBricksImperatively } from "@next-core/loader";
 import type {
   BootstrapData,
   BrickConf,
@@ -104,18 +105,26 @@ const bootstrap = http
 let rendering = false;
 let nextRequest: RenderRequest;
 
-(window as unknown as PreviewWindow)._preview_only_render = (
-  type,
-  sources,
-  options
-) => {
+(window as PreviewWindow)._preview_only_render = (type, sources, options) => {
   if (rendering) {
     nextRequest = { type, sources, options };
   } else {
     queuedRender({ type, sources, options });
   }
 };
 
+(window as PreviewWindow)._preview_only_inject = async (
+  brick,
+  pkg,
+  options
+) => {
+  await loadBricksImperatively([brick], [pkg]);
+  const element = document.createElement(brick) as HTMLElement & {
+    resolve: (options: unknown) => Promise<void>;
+  };
+  await element.resolve(options);
+};
+
 async function queuedRender(request: RenderRequest) {
   rendering = true;
   try {

diff --git a/packages/preview/types.d.ts b/packages/preview/types.d.ts
@@ -1,4 +1,4 @@
-import type { MicroApp } from "@next-core/types";
+import type { BrickPackage, MicroApp } from "@next-core/types";
 
 export type RenderType = "html" | "yaml";
 
@@ -20,10 +20,15 @@ export interface RenderOptions {
   templatesAreArrayOfYaml?: boolean;
 }
 
-export interface PreviewWindow {
-  _preview_only_render(
+export interface PreviewWindow extends Window {
+  _preview_only_render?(
     type: RenderType,
     files: Sources,
     options?: RenderOptions
   ): unknown;
+  _preview_only_inject?(
+    brick: string,
+    pkg: BrickPackage,
+    options?: unknown
+  ): Promise<void>;
 }