breakout widgets package for now

This commit is contained in:
Felix Roos 2024-03-17 12:22:24 +01:00
parent 8b9a2e1d84
commit 95446a76ef
10 changed files with 0 additions and 307 deletions

View File

@ -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",

View File

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

View File

@ -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
})
```

View File

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

View File

@ -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"
}
}

View File

@ -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;
}

View File

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

151
pnpm-lock.yaml generated
View File

@ -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}

View File

@ -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:*",

View File

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