move widget registry to codemirror package

+ add transpiler as dependency to codemirror

packages/codemirror/package.json

@@ -46,6 +46,7 @@
     "@replit/codemirror-vscode-keymap": "^6.0.2",
     "@strudel/core": "workspace:*",
     "@strudel/draw": "workspace:*",
+    "@strudel/transpiler": "workspace:*",
     "@uiw/codemirror-themes": "^4.21.21",
     "@uiw/codemirror-themes-all": "^4.21.21",
     "nanostores": "^0.9.5"

packages/codemirror/widget.mjs

@@ -1,5 +1,7 @@
 import { StateEffect, StateField } from '@codemirror/state';
 import { Decoration, EditorView, WidgetType } from '@codemirror/view';
+import { registerWidgetType } from '@strudel/transpiler';
+import { Pattern } from '@strudel/core';
 
 const getWidgetID = (from) => `widget_${from}`;
 
@@ -79,3 +81,15 @@ export class BlockWidget extends WidgetType {
 }
 
 export const widgetPlugin = [widgetField];
+
+// widget implementer API to create a new widget type
+export function registerWidget(type, fn) {
+  registerWidgetType(type);
+  if (fn) {
+    Pattern.prototype[type] = function (id, options = { fold: 1 }) {
+      // fn is expected to create a dom element and call setWidget(id, el);
+      // fn should also return the pattern
+      return fn(id, options, this);
+    };
+  }
+}

packages/widgets/Claviature.jsx

@@ -2,7 +2,7 @@ import { For } from 'solid-js';
 import { customElement } from 'solid-element';
 import { getClaviature } from 'claviature';
 import { Dynamic } from 'solid-js/web';
-import { registerWidget } from './registry.mjs';
+import { registerWidget } from '@strudel/codemirror';
 
 let defaultOptions = {
   range: ['A1', 'C6'],

packages/widgets/canvas.mjs

@@ -1,7 +1,6 @@
-import { registerWidget } from './registry.mjs';
+import { registerWidget, setWidget } from '@strudel/codemirror';
-import { setWidget } from '@strudel/codemirror';
 
-function createCanvasWidget(id, options) {
+function getCanvasWidget(id, options) {
   const { width = 300, height = 100, pixelRatio = window.devicePixelRatio } = options || {};
   let canvas = document.getElementById(id) || document.createElement('canvas');
   canvas.width = width * pixelRatio;
@@ -13,11 +12,11 @@ function createCanvasWidget(id, options) {
 }
 
 registerWidget('roll', (id, options = { fold: 1 }, pat) => {
-  const ctx = createCanvasWidget(id, options).getContext('2d');
+  const ctx = getCanvasWidget(id, options).getContext('2d');
   return pat.pianoroll({ ...options, ctx, id });
 });
 
 registerWidget('twist', (id, options = {}, pat) => {
-  const ctx = createCanvasWidget(id, options).getContext('2d');
+  const ctx = getCanvasWidget(id, options).getContext('2d');
   return pat.spiral({ ...options, ctx, size: 50, id });
 });

packages/widgets/index.mjs

@@ -1,3 +1,2 @@
 export * from './Claviature.jsx';
 export * from './canvas.mjs';
-export * from './registry.mjs';

packages/widgets/registry.mjs

@@ -1,11 +0,0 @@
-import { registerWidgetType } from '@strudel/transpiler';
-import { Pattern } from '@strudel/core';
-
-export function registerWidget(type, fn) {
-  registerWidgetType(type);
-  if (fn) {
-    Pattern.prototype[type] = function (id, options = { fold: 1 }) {
-      return fn(id, options, this);
-    };
-  }
-}

pnpm-lock.yaml

@@ -184,6 +184,9 @@ importers:
       '@strudel/draw':
         specifier: workspace:*
         version: link:../draw
+      '@strudel/transpiler':
+        specifier: workspace:*
+        version: link:../transpiler
       '@uiw/codemirror-themes':
         specifier: ^4.21.21
         version: 4.21.21(@codemirror/language@6.10.0)(@codemirror/state@6.4.0)(@codemirror/view@6.23.0)