breakout widgets package for now

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',
-  },
-});