Merge pull request #4 from githubnext/aw/block-builds

update production block to use iframe on `blocks` repo

build.ts

@@ -10,13 +10,12 @@ async function main() {
 
   const blockBuildFuncs = pkg.blocks.map((block) => {
     return esbuild.build({
-      entryPoints: [`./` + block.entry],
+      entryPoints: [`.` + block.entry],
       bundle: true,
       outdir: `dist/${block.id}`,
       format: "iife",
       globalName: "BlockBundle",
       minify: true,
-      platform: "node",
     });
   });
 

package.json

@@ -1,9 +1,20 @@
 {
   "name": "custom-block-template",
   "version": "0.0.0",
+  "watch": {
+    "build-blocks": {
+      "patterns": [
+        "src"
+      ],
+      "extensions": "js,jsx,ts,tsx,css"
+    }
+  },
   "scripts": {
-    "dev": "vite --port 4000",
+    "watch": "npm-watch",
+    "dev": "concurrently --kill-others \"npm run local\" \"npm run watch\"",
+    "local": "vite --port 4000",
     "build": "tsc && vite build",
+    "build-blocks": "node ./build.ts",
     "serve": "vite preview"
   },
   "blocks": [
@@ -29,7 +40,7 @@
     }
   ],
   "dependencies": {
-    "@githubnext/utils": "^0.10.0",
+    "@githubnext/utils": "^0.11.0",
     "@loadable/component": "^5.15.0",
     "@octokit/rest": "^18.12.0",
     "git-url-parse": "^11.6.0",
@@ -47,7 +58,9 @@
     "@types/react-dom": "^17.0.0",
     "@vitejs/plugin-react": "^1.0.0",
     "autoprefixer": "^10.4.0",
+    "concurrently": "^6.4.0",
     "esbuild": "^0.13.14",
+    "npm-watch": "^0.11.0",
     "postcss": "^8.3.11",
     "tailwindcss": "^2.2.19",
     "typescript": "^4.3.2",

src/App.tsx

@@ -1,4 +1,3 @@
-import "@githubnext/utils/dist/index.css";
 import GitUrlParse from "git-url-parse";
 import { useEffect, useMemo, useState } from "react";
 import { AppInner } from "./components/app-inner";

src/blocks/example-file-block/index.tsx

@@ -1,21 +1,24 @@
 import {
   FileBlockProps,
-  useTailwindCdn,
+  // useTailwindCdn,
   getLanguageFromFilename,
 } from "@githubnext/utils";
 import "./index.css";
 
 export default function (props: FileBlockProps) {
-  const { context, content } = props;
+  const { context, content, metadata, onUpdateMetadata } = props;
   const language = getLanguageFromFilename(context.file);
 
-  useTailwindCdn();
+  // useTailwindCdn();
 
   return (
     <div className="p-4 code">
       <p className="text-sm">
         File: {context.path} {language}
       </p>
+      <div className="py-6">
+        Metadata example: this button has been clicked <button onClick={() => onUpdateMetadata({ number: (metadata.number || 0) + 1 })}>{metadata.number || 0} times</button>
+      </div>
       <pre className="p-4 text-gray-600">{content}</pre>
     </div>
   );

src/components/app-inner.tsx

@@ -5,6 +5,7 @@ import { FileBlock } from "./file-block";
 import { FolderBlock } from "./folder-block";
 
 interface Block {
+  id: string;
   type: string;
   title: string;
   description: string;

src/components/file-block.tsx

@@ -3,7 +3,7 @@ import { useFileContent } from "../hooks";
 import { AppInnerProps } from "./app-inner";
 import { ErrorState } from "./error-state";
 import { LoadingState } from "./loading-state";
-import { SandboxedBlock } from "@githubnext/utils";
+import { ProductionBlock } from "./production-block"
 import { LocalBlock } from "./local-block";
 
 export function FileBlock(props: Omit<AppInnerProps, "onReset" | "blockType">) {
@@ -40,10 +40,9 @@ export function FileBlock(props: Omit<AppInnerProps, "onReset" | "blockType">) {
     console.log(path);
     const importType = path.endsWith(".css") ? "inline" : "raw";
     const contents = await import(
-      // /* @vite-ignore */ `../../..${path}?${importType}`
-      /* @vite-ignore */ `../dist/file-block.js?raw`
+      /* @vite-ignore */ `../../..${path}?${importType}`
+      // /* @vite-ignore */ `../dist/file-block.js?raw`
     );
-    console.log(contents);
     return contents.default;
   }, []);
 
@@ -52,19 +51,16 @@ export function FileBlock(props: Omit<AppInnerProps, "onReset" | "blockType">) {
   if (status === "success" && data) {
     return doMimicProductionEnvironment ? (
       <div className="sandbox-wrapper h-full w-full">
-        <SandboxedBlock
-          getFileContent={getFileContent}
+        <ProductionBlock
           contents={data.content}
           context={{
             ...data.context,
             file: name,
           }}
-          dependencies={{}}
           block={block}
           metadata={metadata}
-          session={{ token: "" }}
         />
-        {/* <SandboxedBlock
+        {/* <ProductionBlock
           getFileContent={getFileContent}
           contents={data.content}
           context={{

src/components/folder-block.tsx

@@ -3,7 +3,7 @@ import { useFolderContent } from "../hooks";
 import { AppInnerProps } from "./app-inner";
 import { ErrorState } from "./error-state";
 import { LoadingState } from "./loading-state";
-import { SandboxedBlock } from "@githubnext/utils";
+import { ProductionBlock } from "./production-block";
 import { LocalBlock } from "./local-block";
 
 export function FolderBlock(
@@ -43,17 +43,14 @@ export function FolderBlock(
   if (status === "success" && data) {
     return doMimicProductionEnvironment ? (
       <div className="sandbox-wrapper h-full w-full">
-        <SandboxedBlock
-          getFileContent={getFileContent}
+        <ProductionBlock
           tree={data.tree}
           context={{
             ...data.context,
             folder: name,
           }}
-          dependencies={{}}
           block={block}
           metadata={metadata}
-          session={{ token: "" }}
         />
       </div>
     ) : (

src/components/local-block.tsx

@@ -30,7 +30,7 @@ export const LocalBlock = (props: LocalBlockProps) => {
   const getContents = async () => {
     const content = await loadable(() => import(
       `../../..${block.entry}`
-    ).then(module => module.Block))
+    ))
     setBlock(content)
   }
   useEffect(() => { getContents() }, [block.entry])

src/components/production-block.tsx

@@ -0,0 +1,69 @@
+import { useEffect, useRef, useState } from "react";
+// @ts-ignore
+import loadable from "@loadable/component";
+import { FileContext, FolderContext, RepoFiles } from "@githubnext/utils";
+
+interface ProductionBlockProps {
+  block: {
+    id: string;
+    type: string;
+    title: string;
+    description: string;
+    entry: string;
+    extensions?: string[];
+  };
+  contents?: string;
+  tree?: RepoFiles;
+  metadata?: any;
+  context: FileContext | FolderContext
+}
+export const ProductionBlock = (props: ProductionBlockProps) => {
+  const {
+    block,
+    contents,
+    tree,
+    metadata = {},
+    context,
+  } = props;
+
+  const [bundleCode, setBundleCode] = useState("");
+  const [iframeIsLoaded, setIframeIsLoaded] = useState(false);
+  const iframeElement = useRef<HTMLIFrameElement>(null);
+
+  const getContents = async () => {
+    const content = await import(
+      `../../../dist/${block.id}/index.js?raw`
+    ).then((m) => m.default);
+    setBundleCode(content)
+  }
+  useEffect(() => { getContents() }, [block.entry])
+
+  const onUpdateMetadata = (newMetadata: any) => {
+    window.postMessage({
+      type: "update-metadata",
+      context,
+      metadata: newMetadata,
+    }, "*")
+  }
+
+  useEffect(() => {
+    if (!bundleCode || !iframeIsLoaded) return
+    const iframeWindow = iframeElement.current?.contentWindow
+    if (!iframeWindow) return
+
+    iframeWindow.postMessage({
+      type: "block-props",
+      block, contents, tree, metadata, context, bundleCode
+    }, "*")
+  }, [bundleCode, contents, tree, metadata, context, iframeIsLoaded])
+
+  if (!bundleCode) return null
+  const url = "http://localhost:3000/block-testing"
+
+  return (
+    <iframe className="w-full h-full border-none" src={url} title="Block testing" onLoad={() => setIframeIsLoaded(true)} ref={iframeElement}
+
+    />
+  )
+
+}