Upgrade @strudel/* packages to v1.1.0; add @strudel/draw (#292)

packages/web/.gitignore

@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# Strudel
+public/assets/clockwork*.js

packages/web/package.json

@@ -16,11 +16,13 @@
   ],
   "scripts": {
     "dev": "cross-env NODE_ENV=development node ./bin/flok-web.js",
-    "build": "tsc && vite build",
+    "prebuild": "node script/prebuild.js",
+    "build": "npm run prebuild && tsc && vite build",
     "start": "node ./bin/flok-web.js"
   },
   "dependencies": {
     "@flok-editor/server-middleware": "^1.0.1",
+    "@strudel/draw": "^1.1.0",
     "commander": "^10.0.0",
     "compression": "^1.7.4",
     "express": "^4.18.2",
@@ -44,16 +46,16 @@
     "@radix-ui/react-toast": "^1.1.3",
     "@radix-ui/react-toggle": "^1.0.2",
     "@radix-ui/react-tooltip": "^1.0.5",
-    "@strudel/codemirror": "^1.0.0",
-    "@strudel/core": "^1.0.1",
-    "@strudel/midi": "^1.0.1",
-    "@strudel/mini": "^1.0.1",
-    "@strudel/osc": "^1.0.1",
-    "@strudel/serial": "^1.0.1",
-    "@strudel/soundfonts": "^1.0.1",
-    "@strudel/tonal": "^1.0.1",
-    "@strudel/transpiler": "^1.0.1",
-    "@strudel/webaudio": "^1.0.1",
+    "@strudel/codemirror": "^1.1.0",
+    "@strudel/core": "^1.1.0",
+    "@strudel/midi": "^1.1.0",
+    "@strudel/mini": "^1.1.0",
+    "@strudel/osc": "^1.1.0",
+    "@strudel/serial": "^1.1.0",
+    "@strudel/soundfonts": "^1.1.0",
+    "@strudel/tonal": "^1.1.0",
+    "@strudel/transpiler": "^1.1.0",
+    "@strudel/webaudio": "^1.1.0",
     "@types/express": "^4.17.21",
     "@types/p5": "^1.7.6",
     "@types/react": "^18.2.43",

packages/web/script/prebuild.js

@@ -0,0 +1,27 @@
+// This script is executed before the build process starts. It can be used to
+// do some pre-build tasks like copying files, etc. that are required for the
+// build process.
+
+import { existsSync, mkdirSync, readdirSync, copyFileSync } from 'fs';
+import { fileURLToPath } from 'url';
+import { resolve, dirname } from 'path';
+
+// Strudel
+// * mkdir -p public/assets
+// * cp ../../node_modules/@strudel/core/dist/assets/clockworker--*.js to /public/assets/
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const publicAssetsDir = resolve(__dirname, '../public/assets');
+const strudelAssetsDir = resolve(__dirname, '../../../node_modules/@strudel/core/dist/assets');
+
+if (!existsSync(publicAssetsDir)) {
+  mkdirSync(publicAssetsDir, { recursive: true });
+}
+
+const files = readdirSync(strudelAssetsDir).filter(file => file.startsWith('clockworker--'));
+files.forEach(file => {
+  const src = resolve(strudelAssetsDir, file);
+  const dest = resolve(publicAssetsDir, file);
+  copyFileSync(src, dest);
+});

packages/web/src/lib/strudel-wrapper.ts

@@ -1,6 +1,5 @@
 import type { EvalMessage } from "@flok-editor/session";
 import {
-  Framer,
   Pattern,
   controls,
   evalScope,
@@ -9,6 +8,7 @@ import {
   stack,
   valueToMidi,
 } from "@strudel/core";
+import { Framer } from "@strudel/draw";
 import { registerSoundfonts } from "@strudel/soundfonts";
 import { transpiler } from "@strudel/transpiler";
 import {

packages/web/src/lib/strudel.d.ts

@@ -1,13 +1,14 @@
+declare module "@strudel/codemirror";
 declare module "@strudel/core";
 declare module "@strudel/core/controls.mjs";
-declare module "@strudel/soundfonts";
+declare module "@strudel/draw";
 declare module "@strudel/midi";
 declare module "@strudel/mini";
 declare module "@strudel/osc";
 declare module "@strudel/serial";
+declare module "@strudel/soundfonts";
 declare module "@strudel/tonal";
 declare module "@strudel/transpiler";
 declare module "@strudel/webaudio";
 declare module "@strudel/webaudio/scheduler.mjs";
 declare module "@strudel/webaudio/webaudio.mjs";
-declare module "@strudel/codemirror";