From 708675077f2dcc9e3f942e02728e0347b1b77117 Mon Sep 17 00:00:00 2001 From: Felix Roos Date: Fri, 15 Mar 2024 00:34:13 +0100 Subject: [PATCH] rename claviature package to widgets --- packages/claviature/index.mjs | 20 ------- .../{claviature => widgets}/Claviature.jsx | 19 ++++++ packages/{claviature => widgets}/README.md | 8 ++- packages/widgets/index.mjs | 1 + packages/{claviature => widgets}/package.json | 4 +- .../{claviature => widgets}/vite.config.js | 0 pnpm-lock.yaml | 60 +++++++++---------- website/package.json | 2 +- website/src/repl/util.mjs | 2 +- 9 files changed, 59 insertions(+), 57 deletions(-) delete mode 100644 packages/claviature/index.mjs rename packages/{claviature => widgets}/Claviature.jsx (57%) rename packages/{claviature => widgets}/README.md (81%) create mode 100644 packages/widgets/index.mjs rename packages/{claviature => widgets}/package.json (91%) rename packages/{claviature => widgets}/vite.config.js (100%) diff --git a/packages/claviature/index.mjs b/packages/claviature/index.mjs deleted file mode 100644 index c39237d5..00000000 --- a/packages/claviature/index.mjs +++ /dev/null @@ -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' }], - }), - ); - }); -}; diff --git a/packages/claviature/Claviature.jsx b/packages/widgets/Claviature.jsx similarity index 57% rename from packages/claviature/Claviature.jsx rename to packages/widgets/Claviature.jsx index ec79edf6..0d78d242 100644 --- a/packages/claviature/Claviature.jsx +++ b/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) }, ); }); + +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' }], + }), + ); + }); +}; diff --git a/packages/claviature/README.md b/packages/widgets/README.md similarity index 81% rename from packages/claviature/README.md rename to packages/widgets/README.md index eb540b2e..a5c36193 100644 --- a/packages/claviature/README.md +++ b/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: diff --git a/packages/widgets/index.mjs b/packages/widgets/index.mjs new file mode 100644 index 00000000..281c6ab8 --- /dev/null +++ b/packages/widgets/index.mjs @@ -0,0 +1 @@ +export * from './Claviature.jsx'; diff --git a/packages/claviature/package.json b/packages/widgets/package.json similarity index 91% rename from packages/claviature/package.json rename to packages/widgets/package.json index 16e8f549..213ae526 100644 --- a/packages/claviature/package.json +++ b/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": { diff --git a/packages/claviature/vite.config.js b/packages/widgets/vite.config.js similarity index 100% rename from packages/claviature/vite.config.js rename to packages/widgets/vite.config.js diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 75c4e0a9..9ceaf3d9 100644 --- a/pnpm-lock.yaml +++ b/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==} diff --git a/website/package.json b/website/package.json index e80bfa7a..3fd05d54 100644 --- a/website/package.json +++ b/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:*", diff --git a/website/src/repl/util.mjs b/website/src/repl/util.mjs index 31e518cb..1df5a5b5 100644 --- a/website/src/repl/util.mjs +++ b/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([