Add gist support (#6)

.eslintignore

@@ -27,4 +27,3 @@ packages/babel-parser/test/expressions
 eslint/*/lib
 eslint/*/node_modules
 eslint/*/test/fixtures
-sandbox/src/

.github/workflows/ci.yml

@@ -1,6 +1,6 @@
 name: CI
 
-# on: [push, pull_request]
+on: [push, pull_request]
 
 jobs:
   prepare-yarn-cache:

package.json

@@ -68,7 +68,8 @@
   "workspaces": [
     "codemods/*",
     "eslint/*",
-    "packages/*"
+    "packages/*",
+    "sandbox"
   ],
   "resolutions": {
     "@lerna/version": "patch:@lerna/version@npm:3.20.2#.yarn-patches/@lerna/version.patch",

sandbox/package.json

@@ -4,11 +4,11 @@
   "private": true,
   "description": "",
   "dependencies": {
-    "@babel/core": "^7.0.0",
-    "@babel/plugin-transform-runtime": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
-    "@babel/preset-react": "^7.0.0",
-    "@babel/preset-typescript": "^7.0.0",
+    "@babel/core": "workspace:^7.0.0",
+    "@babel/plugin-transform-runtime": "workspace:^7.0.0",
+    "@babel/preset-env": "workspace:^7.0.0",
+    "@babel/preset-react": "workspace:^7.0.0",
+    "@babel/preset-typescript": "workspace:^7.0.0",
     "codemirror": "^5.54.0",
     "react": "^16.11.0",
     "react-codemirror2": "^7.2.0",

sandbox/src/components/App.js

@@ -238,9 +238,10 @@ export default function App({
   defaultSource,
   defaultBabelConfig,
   defCustomPlugin,
+  gist,
 }) {
   const [source, setSource] = React.useState(defaultSource);
-  const [enableCustomPlugin, toggleCustomPlugin] = React.useState(false);
+  const [enableCustomPlugin, toggleCustomPlugin] = React.useState(gist);
   const [customPlugin, setCustomPlugin] = React.useState(defCustomPlugin);
   const [babelConfig, setBabelConfig] = useState(
     Array.isArray(defaultBabelConfig)

sandbox/src/gzip.js

@@ -2,7 +2,7 @@
 
 // from developit
 function memo(fn, c = {}) {
-  return (p) => c[p] || (c[p] = fn(p));
+  return p => c[p] || (c[p] = fn(p));
 }
 
 // npm.im/greenlet
@@ -53,7 +53,7 @@ function greenlet(e) {
 }
 
 export const gzipSize = memo(
-  greenlet((code) => {
+  greenlet(code => {
     if (!self.pako)
       importScripts("https://unpkg.com/pako@1.0.11/dist/pako_deflate.min.js");
     const compressed = self.pako.gzip(code);

sandbox/src/index.js

@@ -2,7 +2,8 @@ import React from "react";
 import ReactDOM from "react-dom";
 import App from "./components/App";
 
-const SOURCE = `const foo = (...a) => \`\${a?.b}\`;
+let GIST = false;
+let SOURCE = `const foo = (...a) => \`\${a?.b}\`;
 enum Direction {
   Left,
   Up,
@@ -24,7 +25,7 @@ class A {
     return <a></a>;
   }
 }`;
-const CONFIG = [
+let CONFIG = [
   {
     presets: [
       [
@@ -72,7 +73,7 @@ const CONFIG = [
   //   plugins: [["@babel/plugin-transform-runtime", { useESModules: true }]],
   // },
 ];
-const PLUGIN = `export default function customPlugin(babel) {
+let PLUGIN = `export default function customPlugin(babel) {
   return {
     visitor: {
       Identifier(path) {
@@ -84,13 +85,81 @@ const PLUGIN = `export default function customPlugin(babel) {
 }
 `;
 
-ReactDOM.render(
-  <React.StrictMode>
-    <App
-      defaultBabelConfig={CONFIG}
-      defaultSource={SOURCE}
-      defCustomPlugin={PLUGIN}
-    />
-  </React.StrictMode>,
-  document.getElementById("root")
-);
+// https://stackoverflow.com/questions/51546372/how-to-parse-the-content-from-response-using-gist-api
+// ex: https://gist.github.com/astexplorer/02baa12f126af2f270d0177e245874cf/264d268511bd722e5d07db78813b485960413473
+// GET /gists/:gist_id
+// GET /gists/:gist_id/:sha
+async function fetchData({ id, version }) {
+  version = version ? `/${version}` : "";
+  const response = await fetch(`https://api.github.com/gists/${id}${version}`);
+  const data = await response.json();
+  return {
+    source: data.files["source.js"].content,
+    plugin: data.files["transform.js"].content,
+  };
+}
+
+// ex: https://api.github.com/gists/02baa12f126af2f270d0177e245874cf
+function getGistFromHash() {
+  // https://gist.github.com/astexplorer/02baa12f126af2f270d0177e245874cf
+  const gist = window.location.hash.match(
+    /#https:\/\/gist.github.com\/(\w+)\/(\w+)\/?(\w+)?/
+  );
+  if (gist) {
+    return {
+      owner: gist[1],
+      id: gist[2],
+      version: gist[3],
+    };
+  }
+
+  // https://astexplorer.net/#/gist/02baa12f126af2f270d0177e245874cf/264d268511bd722e5d07db78813b485960413473
+  const astExplorer = window.location.hash.match(
+    /#https:\/\/astexplorer.net\/#\/gist\/(\w+)\/?(\w+)?/
+  );
+  if (astExplorer) {
+    return {
+      id: astExplorer[1],
+      version: astExplorer[2],
+    };
+  }
+}
+
+async function initState() {
+  const data = getGistFromHash();
+  if (!data) return;
+
+  GIST = true;
+  const key = `babel_sandbox:${data.id}${
+    data.version ? `:${data.version}` : ""
+  }`;
+  const stored = window.sessionStorage.getItem(key);
+  if (stored) {
+    const storedObj = JSON.parse(stored);
+    if (storedObj.source) SOURCE = storedObj.source;
+    if (storedObj.plugin) PLUGIN = storedObj.plugin;
+  } else {
+    try {
+      const { source, plugin } = await fetchData(data);
+      SOURCE = source;
+      PLUGIN = plugin;
+      window.sessionStorage.setItem(key, JSON.stringify({ source, plugin }));
+    } catch (e) {
+      throw new Error(e);
+    }
+  }
+}
+
+initState().then(() => {
+  ReactDOM.render(
+    <React.StrictMode>
+      <App
+        defaultBabelConfig={CONFIG}
+        defaultSource={SOURCE}
+        defCustomPlugin={PLUGIN}
+        gist={GIST}
+      />
+    </React.StrictMode>,
+    document.getElementById("root")
+  );
+});

sandbox/src/metadataPlugin.js

@@ -7,7 +7,7 @@ module.exports = function babelPlugin(babel) {
   const { types: t, template } = babel;
 
   return {
-    name: "babel-internal-modify-replacewith",
+    name: "transform-babel-metadata",
     visitor: {
       // + replaceWithMultiple
       // path.replaceWith(a) -> path.replaceWith(a, "name")
@@ -37,7 +37,7 @@ module.exports = function babelPlugin(babel) {
           */
           const hasComment = path.parentPath.node.leadingComments;
           let comment;
-          if (hasComment) {
+          if (hasComment && hasComment.length) {
             comment = hasComment[0].value.match(/node: (.*)/);
             if (comment) {
               comment = template.expression(comment[1])();
@@ -119,7 +119,11 @@ module.exports = function babelPlugin(babel) {
               )
             : null;
           if (node) props.push(node);
-          path.node.arguments.push(t.objectExpression(props));
+          const metaNode = t.objectExpression(props);
+          if (path.addMetadata) {
+            path.addMetadata(metaNode, "transform-babel-metadata");
+          }
+          path.node.arguments.push(metaNode);
         }
       },
     },