rename claviature package to widgets

packages/claviature/index.mjs

@@ -1,20 +0,0 @@
-export * from './Claviature.jsx';
-import { Pattern } from '@strudel/core';
-import { registerWidget } from '@strudel/transpiler';
-
-registerWidget('claviature', 'strudel-claviature');
-
-Pattern.prototype.claviature = function (id, options = {}) {
-  return this.onFrame((haps) => {
-    const keys = haps.map((h) => h.value.note);
-    let el = document.getElementById(id);
-    el?.setAttribute(
-      'options',
-      JSON.stringify({
-        ...options,
-        range: options.range || ['A2', 'C6'],
-        colorize: [{ keys: keys, color: options.color || 'steelblue' }],
-      }),
-    );
-  });
-};

packages/widgets/Claviature.jsx

@@ -2,6 +2,8 @@ import { For } from 'solid-js';
 import { customElement } from 'solid-element';
 import { getClaviature } from 'claviature';
 import { Dynamic } from 'solid-js/web';
+import { Pattern } from '@strudel/core';
+import { registerWidget } from '@strudel/transpiler';
 
 let defaultOptions = {
   range: ['A1', 'C6'],
@@ -30,3 +32,20 @@ customElement('strudel-claviature', { options: JSON.stringify(defaultOptions) },
     </div>
   );
 });
+
+registerWidget('claviature', 'strudel-claviature');
+
+Pattern.prototype.claviature = function (id, options = {}) {
+  return this.onFrame((haps) => {
+    const keys = haps.map((h) => h.value.note);
+    let el = document.getElementById(id);
+    el?.setAttribute(
+      'options',
+      JSON.stringify({
+        ...options,
+        range: options.range || ['A2', 'C6'],
+        colorize: [{ keys: keys, color: options.color || 'steelblue' }],
+      }),
+    );
+  });
+};

packages/widgets/README.md

@@ -1,6 +1,10 @@
-# @strudel/claviature
+# @strudel/widgets
 
-adds a `Patter.claviature` method that renders a [claviature](https://www.npmjs.com/package/claviature).
+adds UI widgets to codemirror
+
+## claviature
+
+`Patter.claviature` renders a [claviature](https://www.npmjs.com/package/claviature).
 
 example usage:
 

packages/widgets/index.mjs

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

packages/widgets/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "@strudel/claviature",
+  "name": "@strudel/widgets",
   "version": "1.0.1",
-  "description": "Claviature component for Strudel",
+  "description": "Widget web components for Strudel",
   "main": "dist/index.mjs",
   "type": "module",
   "scripts": {

pnpm-lock.yaml

@@ -140,31 +140,6 @@ importers:
         specifier: ^5.0.10
         version: 5.0.10
 
-  packages/claviature:
-    dependencies:
-      '@strudel/core':
-        specifier: workspace:*
-        version: link:../core
-      '@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/codemirror:
     dependencies:
       '@codemirror/autocomplete':
@@ -513,6 +488,31 @@ importers:
         specifier: ^5.0.10
         version: 5.0.10
 
+  packages/widgets:
+    dependencies:
+      '@strudel/core':
+        specifier: workspace:*
+        version: link:../core
+      '@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':
@@ -570,9 +570,6 @@ importers:
       '@nanostores/react':
         specifier: ^0.7.1
         version: 0.7.1(nanostores@0.9.5)(react@18.2.0)
-      '@strudel/claviature':
-        specifier: workspace:*
-        version: link:../packages/claviature
       '@strudel/codemirror':
         specifier: workspace:*
         version: link:../packages/codemirror
@@ -618,6 +615,9 @@ 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
@@ -854,7 +854,7 @@ packages:
     engines: {node: '>=6.0.0'}
     dependencies:
       '@jridgewell/gen-mapping': 0.1.1
-      '@jridgewell/trace-mapping': 0.3.17
+      '@jridgewell/trace-mapping': 0.3.20
 
   /@apideck/better-ajv-errors@0.3.6(ajv@8.12.0):
     resolution: {integrity: sha512-P+ZygBLZtkp0qqOAJJVX4oX/sFo5JR3eBWwwuqHHhK0GIgQOKWrAfiAaWX0aArHkRWHMuggFEgAZNxVPwPZYaA==}
@@ -3096,7 +3096,6 @@ packages:
   /@jridgewell/resolve-uri@3.1.1:
     resolution: {integrity: sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==}
     engines: {node: '>=6.0.0'}
-    dev: true
 
   /@jridgewell/set-array@1.1.2:
     resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==}
@@ -3126,7 +3125,6 @@ packages:
     dependencies:
       '@jridgewell/resolve-uri': 3.1.1
       '@jridgewell/sourcemap-codec': 1.4.15
-    dev: true
 
   /@jsdoc/salty@0.2.3:
     resolution: {integrity: sha512-bbtCxCkxcnWhi50I+4Lj6mdz9w3pOXOgEQrID8TCZ/DF51fW7M9GCQW2y45SpBDdHd1Eirm1X/Cf6CkAAe8HPg==}

website/package.json

@@ -25,7 +25,7 @@
     "@heroicons/react": "^2.1.1",
     "@nanostores/persistent": "^0.9.1",
     "@nanostores/react": "^0.7.1",
-    "@strudel/claviature": "workspace:*",
+    "@strudel/widgets": "workspace:*",
     "@strudel/codemirror": "workspace:*",
     "@strudel/core": "workspace:*",
     "@strudel/draw": "workspace:*",

website/src/repl/util.mjs

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