feat(mdx): add executable-code syntax

Author: hiroppy

package-lock.json

@@ -39,5 +39,8 @@
     "lerna": "^3.22.1",
     "lint-staged": "^10.5.3",
     "prettier": "^2.2.1"
+  },
+  "dependencies": {
+    "vm-browserify": "^1.1.2"
   }
 }

package.json

@@ -0,0 +1,35 @@
+.executable-code-container {
+  display: flex;
+  order: 1; /* TODO: fix */
+  flex-direction: column;
+  margin: 0 auto;
+  min-width: 50%;
+  max-width: 90%;
+}
+
+.executable-code-button {
+  border: 1px solid rgba(0, 20, 80, 0.1);
+  box-shadow: 0 8px 16px rgba(0, 20, 80, 0.04), 0 4px 16px rgba(0, 0, 0, 0.08);
+  border-radius: 4px;
+  color: var(--color-black);
+  cursor: pointer;
+  font-size: 1.8rem;
+  padding: 0.5rem;
+  width: 100px;
+}
+
+.executable-code-result {
+  max-height: 200px;
+  overflow-x: auto;
+  text-align: left;
+  padding: 1.2rem 0.2rem;
+  border: 1px solid rgba(0, 20, 80, 0.1);
+  box-shadow: 0 8px 16px rgba(0, 20, 80, 0.04), 0 4px 16px rgba(0, 0, 0, 0.08);
+  margin-top: 0.4rem;
+
+  & > p {
+    margin-left: 12px;
+    font-size: 2rem;
+    white-space: nowrap;
+  }
+}

packages/client/assets/style/executableCode.css

@@ -2,6 +2,7 @@ import React, { useEffect, memo } from 'react';
 import Prism from 'prismjs';
 import classnames from 'classnames';
 import { setup as setupWebSlides } from '../../setup/webSlides';
+import { createVMEnv } from '../../utils/createVMEnv';
 
 const articleClass = process.env.IS_VERTICAL ? 'vertical' : undefined;
 let mermaid = null;
@@ -46,6 +47,14 @@ export const Base = memo(
           Prism.highlightAll();
         }, 0);
       }
+
+      const hasExecutableCode = slides.some(
+        ({ fusumaProps }) => fusumaProps.hasExecutableCode === 'true'
+      );
+
+      if (hasExecutableCode) {
+        createVMEnv();
+      }
     }
 
     useEffect(() => {
@@ -79,7 +88,7 @@ export const Base = memo(
       <article className={articleClass} id="webslides">
         {slides.map(({ slide: Slide, fusumaProps }, i) => (
           <section
-            key={i}
+            key={i /* mdx-loaderでhash作成 */}
             className={classnames(
               'aligncenter',
               fusumaProps.classes,

packages/client/src/components/ContentView/Base.js

@@ -2,12 +2,5 @@ import { useMemo } from 'react';
 import { createSlidesProps } from '../utils/createSlidesProps';
 
 export function useSlidesProps({ originalSlides, hash, currentIndex }) {
-  const createdProps = useMemo(() => createSlidesProps(originalSlides, currentIndex), [hash]);
-  const slides = useMemo(() => createdProps.slides, [hash]);
-  const contentsList = useMemo(() => createdProps.contentsList, [hash]);
-
-  return {
-    slides,
-    contentsList,
-  };
+  return useMemo(() => createSlidesProps(originalSlides, currentIndex), [hash]);
 }

packages/client/src/hooks/useSlides.js

@@ -0,0 +1,27 @@
+export async function createVMEnv() {
+  await import('../../assets/style/executableCode.css');
+
+  const { createContext, runInNewContext } = await import('vm-browserify');
+
+  Array.from(document.querySelectorAll('.executable-code-button')).forEach((el) => {
+    el.addEventListener('click', (e) => {
+      const list = e.target.nextSibling;
+
+      if (list.style.display === 'none') {
+        list.style.display = 'block';
+      }
+      const context = createContext({
+        console: {
+          log: (res) => {
+            const p = document.createElement('p');
+
+            p.innerText = `- ${res}`;
+            list.appendChild(p);
+          },
+        },
+      });
+
+      runInNewContext(e.target.dataset.value, context);
+    });
+  });
+}

packages/client/src/utils/createVMEnv.js

@@ -177,6 +177,63 @@ in\`}</p>
 MDXContent.isMDXComponent = true;"
 `;
 
+exports[`fusuma-loader should append executable code components 1`] = `
+"/* @jsxRuntime classic */
+/* @jsx mdx */
+
+import React from 'react';
+import { mdx } from '@mdx-js/react';
+export const slides = [props => <>
+              
+    {
+    /* executable-code */
+  }
+    <div className=\\"executable-code-container\\">
+      <a data-value=\\"const a = 1;
+const b = 2;
+console.log(a + b);\\" className=\\"executable-code-button\\">execute</a>
+      <div className=\\"executable-code-result\\" style={{
+      display: 'none'
+    }}></div>
+    </div>
+    <pre><code parentName=\\"pre\\" {...{
+      \\"className\\": \\"language-javascript\\"
+    }}>{\`const a = 1;
+const b = 2;
+console.log(a + b);
+\`}</code></pre>
+    
+            </>];
+export const fusumaProps = [{
+  hasExecutableCode: 'true'
+}];
+
+const layoutProps = {
+  
+};
+const MDXLayout = \\"wrapper\\"
+export default function MDXContent({
+  components,
+  ...props
+}) {
+  return <MDXLayout {...layoutProps} {...props} components={components} mdxType=\\"MDXLayout\\">
+    {
+      /* executable-code */
+    }
+    <pre><code parentName=\\"pre\\" {...{
+        \\"className\\": \\"language-javascript\\"
+      }}>{\`const a = 1;
+const b = 2;
+console.log(a + b);
+\`}</code></pre>
+
+    </MDXLayout>;
+}
+
+;
+MDXContent.isMDXComponent = true;"
+`;
+
 exports[`fusuma-loader should convert MathJax 1`] = `
 "/* @jsxRuntime classic */
 /* @jsx mdx */

packages/mdx-loader/__tests__/__snapshots__/index.js.snap

@@ -163,6 +163,19 @@ in
 <!-- block-end -->
 out
 <!-- block-end -->
+`;
+
+    expect(await transformToJS(src)).toMatchSnapshot();
+  });
+
+  test('should append executable code components', async () => {
+    const src = `
+<!-- executable-code -->
+\`\`\`javascript
+const a = 1;
+const b = 2;
+console.log(a + b);
+\`\`\`
 `;
 
     expect(await transformToJS(src)).toMatchSnapshot();

packages/mdx-loader/__tests__/index.js

@@ -17,6 +17,10 @@ function createFusumaProps(nodes) {
     if (type === 'comment') {
       const v = value.trim();
 
+      if (v === 'executable-code') {
+        property.hasExecutableCode = true;
+      }
+
       if (v === 'contents') {
         property.contents = true;
       }

packages/mdx-loader/src/createFusumaProps.js

@@ -8,6 +8,7 @@ const transformQrToJSX = require('./transformers/transformQrToJSX');
 const transformScreenToJSX = require('./transformers/transformScreenToJSX');
 const transformChartToJSX = require('./transformers/transformChartToJSX');
 const transformMarkdownImageNodeToJSX = require('./transformers/transformMarkdownImageNodeToJSX');
+const transformExecJSCodeButtonToJSX = require('./transformers/transformExecJSCodeButtonToJSX');
 
 function mdxPlugin() {
   return (tree) => {
@@ -21,7 +22,7 @@ function mdxPlugin() {
     };
 
     // TODO: refactor using visit
-    tree.children.forEach((n) => {
+    tree.children.forEach((n, i) => {
       const { type, value, lang, meta } = n;
 
       // move to a new slide
@@ -62,6 +63,24 @@ function mdxPlugin() {
           ++videoId;
           return;
         }
+
+        if (prefix === 'executable-code') {
+          const nextNode = tree.children[i + 1];
+
+          if (nextNode.type === 'code' && ['js', 'javascript'].includes(nextNode.lang)) {
+            slide.push(
+              ...[
+                n,
+                {
+                  ...n,
+                  ...transformExecJSCodeButtonToJSX(nextNode.value),
+                },
+              ]
+            );
+          }
+
+          return;
+        }
       }
 
       if (type === 'code') {

packages/mdx-loader/src/mdxPlugin.js

@@ -0,0 +1,14 @@
+'use strict';
+
+// add display:none to here, not css
+function transformExecJSCodeButtonToJSX(value) {
+  return {
+    type: 'jsx',
+    value: `<div className="executable-code-container">
+      <a data-value="${value}" className="executable-code-button">execute</a>
+      <div className="executable-code-result" style={{ display: 'none' }}></div>
+    </div>`,
+  };
+}
+
+module.exports = transformExecJSCodeButtonToJSX;

packages/mdx-loader/src/transformers/transformExecJSCodeButtonToJSX.js

@@ -0,0 +1,12 @@
+## Execute JavaScript
+
+<!-- executable-code -->
+
+```js
+console.log('yay');
+
+const a = 1;
+const b = 2;
+
+console.log(a + b);
+```