breakout widgets package for now

package.json

@@ -15,7 +15,6 @@
     "repl": "npm run prestart && cd website && npm run dev",
     "start": "npm run prestart && cd website && npm run dev",
     "dev": "npm run prestart && cd website && npm run dev",
-    "watch": "pnpm prestart && pnpm --parallel --filter {./website/**}... --filter \"@strudel/website\" watch",
     "build": "npm run prebuild && cd website && npm run build",
     "preview": "cd website && npm run preview",
     "osc": "cd packages/osc && npm run server",

packages/widgets/Claviature.jsx

@@ -1,45 +0,0 @@
-import { For } from 'solid-js';
-import { customElement } from 'solid-element';
-import { getClaviature } from 'claviature';
-import { Dynamic } from 'solid-js/web';
-import { registerWidget } from '@strudel/codemirror';
-import { getSolidWidget } from './solid.mjs';
-
-customElement('strudel-claviature', { options: '{}' }, (props, { element }) => {
-  let svg = () => {
-    let c = getClaviature({
-      options: JSON.parse(props.options),
-    });
-    return c;
-  };
-  return (
-    <svg {...svg().attributes}>
-      <For each={svg().children}>
-        {(el) => {
-          return (
-            <Dynamic component={el.name} {...el.attributes}>
-              {el.value}
-            </Dynamic>
-          );
-        }}
-      </For>
-    </svg>
-  );
-});
-
-registerWidget('_claviature', (id, options = {}, pat) => {
-  options = { range: ['A0', 'C8'], scaleY: 1, scaleY: 0.5, scaleX: 0.5, ...options };
-  const height = (options.upperHeight + options.lowerHeight) * options.scaleY;
-  const el = getSolidWidget('strudel-claviature', id, { ...options, height });
-  return pat.onFrame(id, (haps) => {
-    const colorize = haps.map((h) => ({ keys: [h.value.note], color: h.context?.color || 'steelblue' }));
-    el.setAttribute(
-      'options',
-      JSON.stringify({
-        ...options,
-        range: options.range || ['A2', 'C6'],
-        colorize,
-      }),
-    );
-  });
-});

packages/widgets/README.md

@@ -1,31 +0,0 @@
-# @strudel/widgets
-
-adds UI widgets to codemirror
-
-## claviature
-
-`Patter.claviature` renders a [claviature](https://www.npmjs.com/package/claviature).
-
-example usage:
-
-```js
-chord("<Em9 A7 D^7@2>").voicing().piano()
-  .claviature()
-```
-
-All [claviature options](https://www.npmjs.com/package/claviature#options) will work.
-
-Here is an example that uses all available options:
-
-```js
-chord("<Em9 A7 D^7@2>").voicing().piano()
-.color('cyan')
-.claviature({
-  range: ['C1', 'C6'], // rendered note range
-  palette: ['cyan', 'magenta'],
-  stroke: 'black',
-  scaleX: 1, scaleY: 1,
-  upperHeight: 80, 
-  lowerHeight: 50
-})
-```

packages/widgets/index.mjs

@@ -1 +0,0 @@
-export * from './Claviature.jsx';

packages/widgets/package.json

@@ -1,42 +0,0 @@
-{
-  "name": "@strudel/widgets",
-  "version": "1.0.1",
-  "description": "Widget web components for Strudel",
-  "main": "dist/index.mjs",
-  "type": "module",
-  "scripts": {
-    "build": "vite build",
-    "watch": "vite build --watch",
-    "prepublishOnly": "npm run build"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/tidalcycles/strudel.git"
-  },
-  "keywords": [
-    "titdalcycles",
-    "strudel",
-    "pattern",
-    "livecoding",
-    "algorave"
-  ],
-  "author": "Felix Roos <flix91@gmail.com>",
-  "license": "AGPL-3.0-or-later",
-  "bugs": {
-    "url": "https://github.com/tidalcycles/strudel/issues"
-  },
-  "homepage": "https://github.com/tidalcycles/strudel#readme",
-  "dependencies": {
-    "@strudel/core": "workspace:*",
-    "@strudel/transpiler": "workspace:*",
-    "@strudel/draw": "workspace:*",
-    "@strudel/codemirror": "workspace:*",
-    "claviature": "^0.1.0",
-    "solid-element": "^1.8.0",
-    "solid-js": "^1.8.15",
-    "vite-plugin-solid": "^2.10.1"
-  },
-  "devDependencies": {
-    "vite": "^5.0.10"
-  }
-}

packages/widgets/solid.mjs

@@ -1,13 +0,0 @@
-import { setWidget } from '@strudel/codemirror';
-
-export function getSolidWidget(type, id, options) {
-  let el = document.getElementById(id);
-  if (!el) {
-    el = document.createElement('div');
-    const c = document.createElement(type);
-    el.appendChild(c);
-  }
-  el.height = options.height || 200;
-  setWidget(id, el);
-  return el?.firstChild;
-}

packages/widgets/vite.config.js

@@ -1,20 +0,0 @@
-import { defineConfig } from 'vite';
-import { dependencies } from './package.json';
-import { resolve } from 'path';
-import solid from 'vite-plugin-solid';
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [solid()],
-  build: {
-    lib: {
-      entry: resolve(__dirname, 'index.mjs'),
-      formats: ['es'],
-      fileName: (ext) => ({ es: 'index.mjs' })[ext],
-    },
-    rollupOptions: {
-      external: [...Object.keys(dependencies)],
-    },
-    target: 'esnext',
-  },
-});

pnpm-lock.yaml

@@ -491,37 +491,6 @@ importers:
         specifier: ^5.0.10
         version: 5.0.10
 
-  packages/widgets:
-    dependencies:
-      '@strudel/codemirror':
-        specifier: workspace:*
-        version: link:../codemirror
-      '@strudel/core':
-        specifier: workspace:*
-        version: link:../core
-      '@strudel/draw':
-        specifier: workspace:*
-        version: link:../draw
-      '@strudel/transpiler':
-        specifier: workspace:*
-        version: link:../transpiler
-      claviature:
-        specifier: ^0.1.0
-        version: 0.1.0
-      solid-element:
-        specifier: ^1.8.0
-        version: 1.8.0(solid-js@1.8.15)
-      solid-js:
-        specifier: ^1.8.15
-        version: 1.8.15
-      vite-plugin-solid:
-        specifier: ^2.10.1
-        version: 2.10.1(solid-js@1.8.15)(vite@5.0.11)
-    devDependencies:
-      vite:
-        specifier: ^5.0.10
-        version: 5.0.11(@types/node@20.10.6)
-
   packages/xen:
     dependencies:
       '@strudel/core':
@@ -624,9 +593,6 @@ importers:
       '@strudel/webaudio':
         specifier: workspace:*
         version: link:../packages/webaudio
-      '@strudel/widgets':
-        specifier: workspace:*
-        version: link:../packages/widgets
       '@strudel/xen':
         specifier: workspace:*
         version: link:../packages/xen
@@ -1143,13 +1109,6 @@ packages:
       '@babel/types': 7.23.6
     dev: true
 
-  /@babel/helper-module-imports@7.18.6:
-    resolution: {integrity: sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/types': 7.23.6
-    dev: false
-
   /@babel/helper-module-imports@7.22.15:
     resolution: {integrity: sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==}
     engines: {node: '>=6.9.0'}
@@ -5513,19 +5472,6 @@ packages:
     resolution: {integrity: sha512-3AN/9V/rKuv90NG65m4tTHsI04XrCKsWbztIcW7a8H5iIN7WlvWucRtVV0V/rT4QvtA11n5Vmp20fLwfMWqp6g==}
     dev: false
 
-  /babel-plugin-jsx-dom-expressions@0.37.17(@babel/core@7.23.7):
-    resolution: {integrity: sha512-1bv8rOTzs6TR3DVyVZ7ElxyPEhnS556FMWRIsB3gBPfkn/cSKaLvXLGk+X1lvI+SzcUo4G+UcmJrn3vr1ig8mQ==}
-    peerDependencies:
-      '@babel/core': ^7.20.12
-    dependencies:
-      '@babel/core': 7.23.7
-      '@babel/helper-module-imports': 7.18.6
-      '@babel/plugin-syntax-jsx': 7.22.5(@babel/core@7.23.7)
-      '@babel/types': 7.23.6
-      html-entities: 2.3.3
-      validate-html-nesting: 1.2.2
-    dev: false
-
   /babel-plugin-polyfill-corejs2@0.4.7(@babel/core@7.23.7):
     resolution: {integrity: sha512-LidDk/tEGDfuHW2DWh/Hgo4rmnw3cduK6ZkOI1NPFceSK3n/yAGeOsNT7FLnSGHkXj3RHGSEVkN3FsCTY6w2CQ==}
     peerDependencies:
@@ -5562,15 +5508,6 @@ packages:
       - supports-color
     dev: true
 
-  /babel-preset-solid@1.8.15(@babel/core@7.23.7):
-    resolution: {integrity: sha512-P2yOQbB7Hn/m4YvpXV6ExHIMcgNWXWXcvY4kJzG3yqAB3hKS58OZRsvJ7RObsZWqXRvZTITBIwnpK0BMGu+ZIQ==}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-    dependencies:
-      '@babel/core': 7.23.7
-      babel-plugin-jsx-dom-expressions: 0.37.17(@babel/core@7.23.7)
-    dev: false
-
   /bail@2.0.2:
     resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
 
@@ -6180,10 +6117,6 @@ packages:
       dot-prop: 5.3.0
     dev: true
 
-  /component-register@0.8.3:
-    resolution: {integrity: sha512-/0u8ov0WPWi2FL78rgB9aFOcfY8pJT4jP/l9NTOukGNLVQ6hk35sEJE1RkEnNQU3yk48Qr7HlDQjRQKEVfgeWg==}
-    dev: false
-
   /concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
@@ -8201,10 +8134,6 @@ packages:
       lru-cache: 10.1.0
     dev: true
 
-  /html-entities@2.3.3:
-    resolution: {integrity: sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA==}
-    dev: false
-
   /html-escaper@3.0.3:
     resolution: {integrity: sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==}
 
@@ -8727,11 +8656,6 @@ packages:
       call-bind: 1.0.5
     dev: true
 
-  /is-what@4.1.16:
-    resolution: {integrity: sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==}
-    engines: {node: '>=12.13'}
-    dev: false
-
   /is-wsl@2.2.0:
     resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
     engines: {node: '>=8'}
@@ -9698,13 +9622,6 @@ packages:
       yargs-parser: 20.2.9
     dev: true
 
-  /merge-anything@5.1.7:
-    resolution: {integrity: sha512-eRtbOb1N5iyH0tkQDAoQ4Ipsp/5qSR79Dzrz8hEPxRX10RWWR/iQXdoKmBSRCThY1Fh5EhISDtpSc93fpxUniQ==}
-    engines: {node: '>=12.13'}
-    dependencies:
-      is-what: 4.1.16
-    dev: false
-
   /merge-stream@2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
 
@@ -12270,20 +12187,6 @@ packages:
       randombytes: 2.1.0
     dev: true
 
-  /seroval-plugins@1.0.4(seroval@1.0.4):
-    resolution: {integrity: sha512-DQ2IK6oQVvy8k+c2V5x5YCtUa/GGGsUwUBNN9UqohrZ0rWdUapBFpNMYP1bCyRHoxOJjdKGl+dieacFIpU/i1A==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      seroval: ^1.0
-    dependencies:
-      seroval: 1.0.4
-    dev: false
-
-  /seroval@1.0.4:
-    resolution: {integrity: sha512-qQs/N+KfJu83rmszFQaTxcoJoPn6KNUruX4KmnmyD0oZkUoiNvJ1rpdYKDf4YHM05k+HOgCxa3yvf15QbVijGg==}
-    engines: {node: '>=10'}
-    dev: false
-
   /server-destroy@1.0.1:
     resolution: {integrity: sha512-rb+9B5YBIEzYcD6x2VKidaa+cqYBJQKnU4oe4E3ANwRRN56yk/ua1YCJT1n21NTS8w6CcOclAKNP3PhdCXKYtQ==}
 
@@ -12486,34 +12389,6 @@ packages:
       smart-buffer: 4.2.0
     dev: true
 
-  /solid-element@1.8.0(solid-js@1.8.15):
-    resolution: {integrity: sha512-DG8HBCej5kNExUiFbVG8OFZojMGcLF8keXdGLEcHXBYtJ7zhm+a8HJnl5lfmBlTYGRk4ApgoBvlwH1ibg7quaQ==}
-    peerDependencies:
-      solid-js: ^1.8.0
-    dependencies:
-      component-register: 0.8.3
-      solid-js: 1.8.15
-    dev: false
-
-  /solid-js@1.8.15:
-    resolution: {integrity: sha512-d0QP/efr3UVcwGgWVPveQQ0IHOH6iU7yUhc2piy8arNG8wxKmvUy1kFxyF8owpmfCWGB87usDKMaVnsNYZm+Vw==}
-    dependencies:
-      csstype: 3.1.1
-      seroval: 1.0.4
-      seroval-plugins: 1.0.4(seroval@1.0.4)
-    dev: false
-
-  /solid-refresh@0.6.3(solid-js@1.8.15):
-    resolution: {integrity: sha512-F3aPsX6hVw9ttm5LYlth8Q15x6MlI/J3Dn+o3EQyRTtTxidepSTwAYdozt01/YA+7ObcciagGEyXIopGZzQtbA==}
-    peerDependencies:
-      solid-js: ^1.3
-    dependencies:
-      '@babel/generator': 7.23.6
-      '@babel/helper-module-imports': 7.22.15
-      '@babel/types': 7.23.6
-      solid-js: 1.8.15
-    dev: false
-
   /sort-array@4.1.5:
     resolution: {integrity: sha512-Ya4peoS1fgFN42RN1REk2FgdNOeLIEMKFGJvs7VTP3OklF8+kl2SkpVliZ4tk/PurWsrWRsdNdU+tgyOBkB9sA==}
     engines: {node: '>=10'}
@@ -13629,10 +13504,6 @@ packages:
     hasBin: true
     dev: true
 
-  /validate-html-nesting@1.2.2:
-    resolution: {integrity: sha512-hGdgQozCsQJMyfK5urgFcWEqsSSrK63Awe0t/IMR0bZ0QMtnuaiHzThW81guu3qx9abLi99NEuiaN6P9gVYsNg==}
-    dev: false
-
   /validate-npm-package-license@3.0.4:
     resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
     dependencies:
@@ -13743,28 +13614,6 @@ packages:
       - supports-color
     dev: true
 
-  /vite-plugin-solid@2.10.1(solid-js@1.8.15)(vite@5.0.11):
-    resolution: {integrity: sha512-kfVdNLWaJqaJVL52U6iCCKNW/nXE7bS1VVGOWPGllOkJfcNILymVSY0LCBLSnyy0iYnRtrXpiHm14rMuzeC7CA==}
-    peerDependencies:
-      '@testing-library/jest-dom': ^5.16.6 || ^5.17.0 || ^6.*
-      solid-js: ^1.7.2
-      vite: ^3.0.0 || ^4.0.0 || ^5.0.0
-    peerDependenciesMeta:
-      '@testing-library/jest-dom':
-        optional: true
-    dependencies:
-      '@babel/core': 7.23.7
-      '@types/babel__core': 7.20.5
-      babel-preset-solid: 1.8.15(@babel/core@7.23.7)
-      merge-anything: 5.1.7
-      solid-js: 1.8.15
-      solid-refresh: 0.6.3(solid-js@1.8.15)
-      vite: 5.0.11(@types/node@20.10.6)
-      vitefu: 0.2.5(vite@5.0.11)
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
   /vite@5.0.10:
     resolution: {integrity: sha512-2P8J7WWgmc355HUMlFrwofacvr98DAjoE52BfdbwQtyLH06XKwaL/FMnmKM2crF0iX4MpmMKoDlNCB1ok7zHCw==}
     engines: {node: ^18.0.0 || >=20.0.0}

website/package.json

@@ -5,7 +5,6 @@
   "private": true,
   "scripts": {
     "dev": "astro dev --host 0.0.0.0",
-    "watch": "astro dev --host 0.0.0.0",
     "start": "astro dev",
     "check": "astro check && tsc",
     "build": "astro build",
@@ -25,7 +24,6 @@
     "@heroicons/react": "^2.1.1",
     "@nanostores/persistent": "^0.9.1",
     "@nanostores/react": "^0.7.1",
-    "@strudel/widgets": "workspace:*",
     "@strudel/codemirror": "workspace:*",
     "@strudel/core": "workspace:*",
     "@strudel/draw": "workspace:*",

website/src/repl/util.mjs

@@ -82,7 +82,6 @@ export function loadModules() {
     import('@strudel/serial'),
     import('@strudel/soundfonts'),
     import('@strudel/csound'),
-    import('@strudel/widgets'),
   ];
   if (isTauri()) {
     modules = modules.concat([