feat(): support app preview

Author: weareoutman

etc/runtime.api.md

@@ -74,6 +74,7 @@ declare namespace __secret_internals {
         RenderUseBrickResult,
         MountUseBrickResult,
         updateSnippetPreviewSettings,
+        getBrickPackages,
         setRealTimeDataInspectRoot,
         addRealTimeDataInspectHook,
         legacyDoTransform,
@@ -195,6 +196,9 @@ export function getAuth(): object | undefined;
 // @public
 export function getBasePath(): string;
 
+// @public (undocumented)
+function getBrickPackages(): BrickPackage[];
+
 // @public (undocumented)
 function getBrickPackagesById(id: string): BrickPackage | undefined;
 

packages/brick-container/src/bootstrap.ts

@@ -7,6 +7,7 @@ import {
   resetReloadForError,
   __secret_internals,
   isNetworkError,
+  getHistory,
 } from "@next-core/runtime";
 import { HttpRequestConfig, http } from "@next-core/http";
 import { i18n, initializeI18n } from "@next-core/i18n";
@@ -20,6 +21,7 @@ import {
   analytics,
 } from "@next-core/easyops-runtime";
 import "@next-core/theme";
+import type { BootstrapData, Storyboard } from "@next-core/types";
 import "./XMLHttpRequest.js";
 import { loadCheckLogin } from "./loadCheckLogin.js";
 import { fulfilStoryboard, loadBootstrapData } from "./loadBootstrapData.js";
@@ -30,6 +32,10 @@ import { getMock } from "./mocks.js";
 import { NS, K, locales } from "./i18n.js";
 import { DefaultError } from "./DefaultError.js";
 
+const isAppPreview = !!new URLSearchParams(window.location.search).get(
+  "_experimental_app_preview_"
+);
+
 customElements.define("easyops-default-error", DefaultError);
 
 analytics.initialize(
@@ -115,61 +121,126 @@ const requestEnd = (): void => {
 window.addEventListener("request.start", requestStart);
 window.addEventListener("request.end", requestEnd);
 
-const runtime = createRuntime({
-  hooks: {
-    auth,
-    fulfilStoryboard,
-    checkPermissions,
-    flowApi,
-    checkInstalledApps,
-    menu,
-    images: { imagesFactory, widgetImagesFactory },
-    messageDispatcher,
-    pageView: analytics.pageView,
-  },
-});
+function doCreateRuntime() {
+  return createRuntime({
+    hooks: {
+      auth,
+      checkPermissions,
+      flowApi,
+      checkInstalledApps,
+      menu,
+      images: { imagesFactory, widgetImagesFactory },
+      messageDispatcher,
+      ...(isAppPreview
+        ? null
+        : {
+            fulfilStoryboard,
+            pageView: analytics.pageView,
+          }),
+    },
+  });
+}
 
 initializeI18n(NS, locales);
 
+interface PreviewWindow extends Window {
+  _preview_only_appPreviewer?: AppPreviewer;
+}
+
+class AppPreviewer {
+  #setupCalled = false;
+
+  async setup(data: BootstrapData, url: string) {
+    try {
+      if (this.#setupCalled) {
+        throw new Error(
+          "_preview_only_setupAppPreview can only be called once"
+        );
+      }
+      this.#setupCalled = true;
+      history.replaceState(null, "", url);
+      const runtime = doCreateRuntime();
+      await loadCheckLogin();
+      await runtime.bootstrap(data);
+    } catch (error) {
+      handleError(error);
+    }
+    requestEnd();
+  }
+
+  async update(appId: string, storyboard: Partial<Storyboard>) {
+    __secret_internals.updateStoryboard(appId, storyboard);
+  }
+
+  reload() {
+    getHistory().reload();
+  }
+
+  push(url: string) {
+    getHistory().push(url);
+  }
+
+  replace(url: string) {
+    getHistory().replace(url);
+  }
+
+  goBack() {
+    getHistory().goBack();
+  }
+
+  goForward() {
+    getHistory().goForward();
+  }
+}
+
 async function main() {
   try {
-    const [, bootstrapData] = await Promise.all([
-      loadCheckLogin(),
-      loadBootstrapData(),
-    ]);
-    await runtime.bootstrap(bootstrapData);
-    resetReloadForError();
+    if (isAppPreview) {
+      requestStart();
+      (window as PreviewWindow)._preview_only_appPreviewer = new AppPreviewer();
+      return "ok";
+    } else {
+      const runtime = doCreateRuntime();
+      const [, bootstrapData] = await Promise.all([
+        loadCheckLogin(),
+        loadBootstrapData(),
+      ]);
+      await runtime.bootstrap(bootstrapData);
+      resetReloadForError();
+    }
     return "ok";
   } catch (error) {
-    // eslint-disable-next-line no-console
-    console.error("bootstrap failed:", error);
-
-    if (shouldReloadForError(error)) {
-      location.reload();
-      return "failed";
-    }
+    handleError(error);
+    return "failed";
+  }
+}
 
-    // `.bootstrap-error` makes loading-bar invisible.
-    document.body.classList.add("bootstrap-error");
-
-    const errorElement = document.createElement(
-      "easyops-default-error"
-    ) as DefaultError;
-    errorElement.errorTitle = isNetworkError(error)
-      ? i18n.t(`${NS}:${K.NETWORK_ERROR}`)
-      : i18n.t(`${NS}:${K.BOOTSTRAP_ERROR}`);
-    errorElement.textContent = httpErrorToString(error);
-    const linkElement = document.createElement("a");
-    linkElement.slot = "link";
-    linkElement.href = location.href;
-    linkElement.textContent = i18n.t(`${NS}:${K.RELOAD}`);
-    errorElement.appendChild(linkElement);
-
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    document.querySelector("#main-mount-point")!.replaceChildren(errorElement);
+function handleError(error: unknown) {
+  // eslint-disable-next-line no-console
+  console.error("bootstrap failed:", error);
 
+  if (shouldReloadForError(error)) {
+    location.reload();
     return "failed";
   }
+
+  // `.bootstrap-error` makes loading-bar invisible.
+  document.body.classList.add("bootstrap-error");
+
+  const errorElement = document.createElement(
+    "easyops-default-error"
+  ) as DefaultError;
+  errorElement.errorTitle = isNetworkError(error)
+    ? i18n.t(`${NS}:${K.NETWORK_ERROR}`)
+    : i18n.t(`${NS}:${K.BOOTSTRAP_ERROR}`);
+  errorElement.textContent = httpErrorToString(error);
+  const linkElement = document.createElement("a");
+  linkElement.slot = "link";
+  linkElement.href = location.href;
+  linkElement.textContent = i18n.t(`${NS}:${K.RELOAD}`);
+  errorElement.appendChild(linkElement);
+
+  document.querySelector("#main-mount-point")!.replaceChildren(errorElement);
 }
 
 const bootstrapStatus = main();

packages/runtime/src/internal/secret_internals.ts

@@ -365,6 +365,8 @@ export function getAllContextValues({
   return runtimeContext.ctxStore.getAllValues();
 }
 
+export { getBrickPackages };
+
 export function getBrickPackagesById(id: string) {
   return getBrickPackages().find((pkg) =>
     pkg.id ? pkg.id === id : pkg.filePath.startsWith(`${id}/`)