boilerplate for tutorial + minirepl

repl/.gitignore

@@ -1,4 +1,5 @@
 .snowpack
 build
 node_modules
-.DS_Store
+.DS_Store
+.parcel-cache

repl/package.json

@@ -6,7 +6,8 @@
     "test": "web-test-runner \"src/**/*.test.tsx\"",
     "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
     "lint": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\"",
-    "peggy": "peggy -o krill-parser.js --format es ./krill.pegjs"
+    "peggy": "peggy -o krill-parser.js --format es ./krill.pegjs",
+    "tutorial": "parcel src/tutorial/index.html"
   },
   "dependencies": {
     "@tonaljs/tonal": "^4.6.5",
@@ -26,6 +27,8 @@
     "webmidi": "^2.5.2"
   },
   "devDependencies": {
+    "@mdx-js/react": "^1.6.22",
+    "@parcel/transformer-mdx": "^2.3.1",
     "@snowpack/plugin-dotenv": "^2.1.0",
     "@snowpack/plugin-postcss": "^1.4.3",
     "@snowpack/plugin-react-refresh": "^2.5.0",
@@ -41,6 +44,7 @@
     "@web/test-runner": "^0.13.3",
     "autoprefixer": "^10.4.2",
     "chai": "^4.3.4",
+    "parcel": "^2.3.1",
     "peggy": "^1.2.0",
     "postcss": "^8.4.6",
     "prettier": "^2.2.1",

repl/src/tutorial/MiniRepl.tsx

@@ -0,0 +1,31 @@
+import React, { useMemo } from 'react';
+import * as Tone from 'tone';
+import useRepl from '../useRepl';
+
+function MiniRepl({ tune }) {
+  const defaultSynth = useMemo(() => {
+    return new Tone.PolySynth().chain(new Tone.Gain(0.5), Tone.Destination).set({
+      oscillator: { type: 'triangle' },
+      envelope: {
+        release: 0.01,
+      },
+    });
+  }, []);
+  const { code, setCode, setPattern, error, cycle, dirty, log, togglePlay } = useRepl({
+    tune,
+    defaultSynth,
+  });
+  return (
+    <>
+      <textarea value={code} onChange={(e) => setCode(e.target.value)} />
+      <button
+        className="flex-none w-full border border-gray-700 p-2 bg-slate-700 hover:bg-slate-500"
+        onClick={() => togglePlay()}
+      >
+        {cycle.started ? 'pause' : 'play'}
+      </button>
+    </>
+  );
+}
+
+export default MiniRepl;

repl/src/tutorial/index.html

@@ -0,0 +1,14 @@
+<div id="root"></div>
+<script type="module">
+  import React from 'react';
+  import ReactDOM from 'react-dom';
+  import * as React from 'react';
+  import Tutorial from './tutorial.mdx';
+
+  ReactDOM.render(
+    <React.StrictMode>
+      <Tutorial />
+    </React.StrictMode>,
+    document.getElementById('root')
+  );
+</script>

repl/src/tutorial/tutorial.mdx

@@ -0,0 +1,7 @@
+import MiniRepl from './MiniRepl';
+
+# Strudel Tutorial
+
+hello!!!!
+
+<MiniRepl tune="C3.m" />