Merge pull request #16 from githubnext/ia/processing

irealva · web-flow · commit c015d5a92807 · 2022-03-10T07:29:09.000-08:00
Re-add processing block
diff --git a/package.json b/package.json
@@ -173,6 +173,17 @@
       ],
       "example_path": "https://github.com/githubnext/blocks-tutorial/blob/main/queries.json"
     },
+    {
+      "type": "file",
+      "id": "processing-block",
+      "title": "Processing block",
+      "description": "Run your p5.js sketches",
+      "entry": "/src/blocks/file-blocks/processing.tsx",
+      "extensions": [
+        "js"
+      ],
+      "example_path": "https://github.com/githubnext/blocks-tutorial/blob/main/processing-sketch.js"
+    },
     {
       "type": "folder",
       "id": "minimap-block",
diff --git a/src/blocks/file-blocks/processing.tsx b/src/blocks/file-blocks/processing.tsx
@@ -1,21 +1,48 @@
-import { createRef, useEffect } from "react";
 import { FileBlockProps } from "@githubnext/utils";
-import p5 from "p5";
+import { SandpackPreview, SandpackProvider } from "@codesandbox/sandpack-react";
 
 export default function (props: FileBlockProps) {
   const { content } = props;
 
-  const p5Ref = createRef<HTMLDivElement>();
-
-  useEffect(() => {
-    if (p5Ref.current) {
-      try {
-        new p5(eval(content), p5Ref.current);
-      } catch (e) {
-        // console.log(e);
-      }
-    }
-  }, [p5Ref.current, content]);
-
-  return <div ref={p5Ref}></div>;
+  return (
+    <div
+      style={{
+        width: "100%",
+        height: "100%",
+      }}
+    >
+      <SandpackProvider
+        externalResources={[ 'https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.js' ]}
+        customSetup={{
+            files: {
+                "/src/index.js": {
+                  code: content,
+                },
+                "/index.html": {
+                  code: `<!DOCTYPE html>
+  <html>
+  <head>
+    <meta charset="UTF-8" />
+  </head>
+  <body>
+    <main></main>
+    <script src="src/index.js"></script>
+  </body>
+  </html>`
+                }
+              },
+          dependencies: {},
+          entry: "/src/index.js",
+          main: "/src/index.js",
+          environment: "static",
+        }}
+        autorun
+      >
+        <SandpackPreview
+          showOpenInCodeSandbox={false}
+          showRefreshButton={false}
+        />
+      </SandpackProvider>
+    </div>
+  );
 }
