Fix Embedded Page

pedrozadotdev · Nov 9, 2023 · 285138b · 285138b
1 parent 792371e
commit 285138b
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 21 deletions.
diff --git a/client/packages/openblocks/embedded.html b/client/packages/openblocks/embedded.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>PocketBlocks Embedded</title>
+    <script type="module" crossorigin src="/js/proxy.js"></script>
+    <style>
+      .demo-title {
+        text-align: center;
+      }
+      .demo {
+        overflow: auto;
+        padding: 10px;
+      }
+      .ops {
+        padding: 10px;
+      }
+      .ops button {
+        margin-right: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1 class="demo-title">PocketBlocks Embedded</h1>
+    <div id="app" class="demo"></div>
+    <script type="module" src="/src/embedded.ts"></script>
+    <script>
+      window.onload = async function () {
+        const url = new URL(location.href);
+        const appId = url.searchParams.get("appId");
+        const baseUrl = url.searchParams.get("baseUrl") || location.origin;
+        if (!appId) {
+          return;
+        }
+        const instance = await $pbl.bootstrapAppAt(
+          appId,
+          document.querySelector("#app"),
+          {
+            baseUrl,
+            moduleInputs: { userName: "Lucy" },
+          }
+        );
+
+        instance?.on("moduleOutputChange", (output) => {
+          console.info("output change:", output);
+        });
+
+        instance?.on("moduleEventTriggered", (eventName) => {
+          console.info("event triggered:", eventName);
+        });
+
+        document.querySelector("#app-ops")?.addEventListener("click", (e) => {
+          const target = e.target;
+          const key = target.dataset.key;
+          if (key === "setModuleInputs") {
+            instance?.setModuleInputs({
+              userName: "Tom",
+            });
+          }
+          if (key === "invokeMethod") {
+            instance?.invokeMethod("setSlider");
+          }
+        });
+      };
+    </script>
+  </body>
+</html>
diff --git a/client/packages/openblocks/index.html b/client/packages/openblocks/index.html
@@ -12,6 +12,7 @@
       content="A developer-friendly open-source low code platform to build internal apps within minutes."
     />
     <meta name="theme-color" content="#000000" />
+    <script type="module" crossorigin src="/js/proxy.js"></script>
     <style>
       html,
       body {

diff --git a/client/packages/openblocks/public/js/proxy.js b/client/packages/openblocks/public/js/proxy.js
@@ -0,0 +1 @@
+//Just a file to trick Vite Build
diff --git a/client/packages/openblocks/src/embedded.ts b/client/packages/openblocks/src/embedded.ts
@@ -0,0 +1,10 @@
+import * as sdk from "./index.sdk";
+
+// @ts-nocheck
+import "./index.less";
+import "virtual:globals";
+
+// @ts-ignore
+window.$openblocks_sdk = sdk;
+// @ts-ignore
+window.$pbl = sdk;
diff --git a/client/packages/openblocks/vite.config.mts b/client/packages/openblocks/vite.config.mts
@@ -45,6 +45,11 @@ export const viteConfig: UserConfig = {
     outDir: "../../../proxy/public",
     emptyOutDir: false,
     rollupOptions: {
+      external: ["/js/proxy.js"],
+      input: {
+        main: path.resolve(__dirname, "index.html"),
+        embedded: path.resolve(__dirname, "embedded.html"),
+      },
       output: {
         chunkFileNames: "js/[hash].js",
         assetFileNames: "assets/[name]-[hash][extname]",
@@ -118,25 +123,35 @@ export const viteConfig: UserConfig = {
     globalDepPlugin(),
     createHtmlPlugin({
       minify: false,
-      inject: {
-        data: {
-          browserCheckScript: isDev ? "" : `<script src="/js/browser-check.js"></script>`,
-          proxyScript: isDev ? `<script type="module" crossorigin src="/js/proxy.js"></script>` : `<!-- PROXYSCRIPT -->`,
+      pages: [
+        {
+          filename: "index.html",
+          template: '/index.html',
+          injectOptions: {
+            data: {
+              browserCheckScript: isDev ? "" : `<script src="/js/browser-check.js"></script>`,
+              proxyScript: isDev ? `<script type="module" crossorigin src="/js/proxy.js"></script>` : `<!-- PROXYSCRIPT -->`,
+            },
+          }
         },
-      },
+      ]
     }),
     isVisualizerEnabled && visualizer(),
   ].filter(Boolean),
 };
 
 const browserCheckConfig: UserConfig = {
   ...viteConfig,
+  plugins: [...(viteConfig.plugins?.slice(0,5) || []), isVisualizerEnabled && visualizer()].filter(Boolean),
   define: {
     ...viteConfig.define,
     "process.env.NODE_ENV": JSON.stringify("production"),
   },
   build: {
     ...viteConfig.build,
+    rollupOptions: {
+      output: viteConfig.build?.rollupOptions?.output
+    },
     manifest: false,
     copyPublicDir: false,
     emptyOutDir: true,

diff --git a/client/scripts/build.js b/client/scripts/build.js
@@ -45,20 +45,6 @@ async function buildBuiltinPlugin(name) {
   shell.rm(tarballFileName);
 }
 
-async function buildSDK() {
-  console.log();
-  console.log(chalk.cyan`SDK building...`);
-
-  const targetDir = `../proxy/public/sdk`;
-  shell.mkdir("-p", targetDir);
-
-  shell.exec(`yarn workspace openblocks-sdk build`, { fatal: true });
-
-  const distFolder = "./packages/openblocks-sdk/dist";
-
-  shell.exec(`cp ${distFolder}/* ${targetDir}`, { fatal: true });
-}
-
 shell.set("-e");
 
 const start = Date.now();
@@ -87,7 +73,5 @@ if (process.env.REACT_APP_BUNDLE_BUILTIN_PLUGIN) {
   }
 }
 
-await buildSDK()
-
 console.log();
 console.log(chalk.green`Done! time: ${((Date.now() - start) / 1000).toFixed(2)}s`);