settings sync

packages/codemirror/codemirror.mjs

@@ -12,6 +12,7 @@ import { highlightMiniLocations, isPatternHighlightingEnabled, updateMiniLocatio
 import { keybindings } from './keybindings.mjs';
 import { initTheme, activateTheme, theme } from './themes.mjs';
 import { updateWidgets, sliderPlugin } from './slider.mjs';
+import { persistentMap } from '@nanostores/persistent';
 
 const extensions = {
   isLineWrappingEnabled: (on) => (on ? EditorView.lineWrapping : []),
@@ -25,8 +26,25 @@ const extensions = {
 };
 const compartments = Object.fromEntries(Object.keys(extensions).map((key) => [key, new Compartment()]));
 
+export const defaultSettings = {
+  keybindings: 'codemirror',
+  isLineNumbersDisplayed: true,
+  isActiveLineHighlighted: false,
+  isAutoCompletionEnabled: false,
+  isPatternHighlightingEnabled: true,
+  isFlashEnabled: true,
+  isTooltipEnabled: false,
+  isLineWrappingEnabled: false,
+  theme: 'strudelTheme',
+  fontFamily: 'monospace',
+  fontSize: 18,
+};
+
+export const codemirrorSettings = persistentMap('codemirror-settings', defaultSettings);
+
 // https://codemirror.net/docs/guide/
-export function initEditor({ initialCode = '', onChange, onEvaluate, onStop, settings, root }) {
+export function initEditor({ initialCode = '', onChange, onEvaluate, onStop, root }) {
+  const settings = codemirrorSettings.get();
   const initialSettings = Object.keys(compartments).map((key) =>
     compartments[key].of(extensions[key](parseBooleans(settings[key]))),
   );
@@ -87,7 +105,7 @@ export function initEditor({ initialCode = '', onChange, onEvaluate, onStop, set
 
 export class StrudelMirror {
   constructor(options) {
-    const { root, initialCode = '', onDraw, drawTime = [-2, 2], autodraw, prebake, settings, ...replOptions } = options;
+    const { root, initialCode = '', onDraw, drawTime = [-2, 2], autodraw, prebake, ...replOptions } = options;
     this.code = initialCode;
     this.root = root;
     this.miniLocations = [];
@@ -142,7 +160,6 @@ export class StrudelMirror {
     });
     this.editor = initEditor({
       root,
-      settings,
       initialCode,
       onChange: (v) => {
         if (v.docChanged) {
@@ -237,6 +254,7 @@ export class StrudelMirror {
     for (let key in extensions) {
       this.reconfigureExtension(key, settings[key]);
     }
+    codemirrorSettings.set({ ...codemirrorSettings.get(), ...settings });
   }
   changeSetting(key, value) {
     if (extensions[key]) {

packages/codemirror/package.json

@@ -47,7 +47,9 @@
     "@strudel.cycles/core": "workspace:*",
     "@uiw/codemirror-themes": "^4.19.16",
     "@uiw/codemirror-themes-all": "^4.19.16",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "nanostores": "^0.8.1",
+    "@nanostores/persistent": "^0.8.0"
   },
   "devDependencies": {
     "vite": "^4.3.3"

packages/repl/repl-component.mjs

@@ -1,7 +1,7 @@
 import { getDrawContext, silence } from '@strudel.cycles/core';
 import { transpiler } from '@strudel.cycles/transpiler';
 import { getAudioContext, webaudioOutput } from '@strudel.cycles/webaudio';
-import { StrudelMirror } from '@strudel/codemirror';
+import { StrudelMirror, defaultSettings, codemirrorSettings } from '@strudel/codemirror';
 import { prebake } from './prebake.mjs';
 
 function camelToKebab(camelCaseString) {
@@ -13,24 +13,10 @@ function kebabToCamel(kebabCaseString) {
   });
 }
 
-const initialSettings = {
+const settingAttributes = Object.keys(defaultSettings).map(camelToKebab);
-  keybindings: 'strudelTheme',
-  isLineNumbersDisplayed: true,
-  isActiveLineHighlighted: true,
-  isAutoCompletionEnabled: false,
-  isPatternHighlightingEnabled: true,
-  isFlashEnabled: true,
-  isTooltipEnabled: false,
-  isLineWrappingEnabled: false,
-  theme: 'strudelTheme',
-  fontFamily: 'monospace',
-  fontSize: 18,
-};
-const settingAttributes = Object.keys(initialSettings).map(camelToKebab);
 const parseAttribute = (name, value) => {
   const camel = kebabToCamel(name);
-  const type = typeof initialSettings[camel];
+  const type = typeof defaultSettings[camel];
-  // console.log('type', type, name);
   if (type === 'boolean') {
     return ['1', 'true'].includes(value);
   }
@@ -39,11 +25,10 @@ const parseAttribute = (name, value) => {
   }
   return value;
 };
-// console.log('attributes', settingAttributes);
 if (typeof HTMLElement !== 'undefined') {
   class StrudelRepl extends HTMLElement {
     static observedAttributes = ['code', ...settingAttributes];
-    settings = initialSettings;
+    settings = codemirrorSettings.get();
     editor = null;
     constructor() {
       super();
@@ -55,7 +40,6 @@ if (typeof HTMLElement !== 'undefined') {
       } else if (settingAttributes.includes(name)) {
         const camel = kebabToCamel(name);
         this.settings[camel] = parseAttribute(name, newValue);
-        // console.log('name', name, newValue, camel, this.settings[camel]);
         this.editor?.updateSettings(this.settings);
       }
     }

website/src/docs/MicroRepl.jsx

@@ -7,20 +7,6 @@ import { StrudelMirror } from '@strudel/codemirror';
 import { prebake } from '@strudel/repl';
 import { useInView } from 'react-hook-inview';
 
-const initialSettings = {
-  keybindings: 'strudelTheme',
-  isLineNumbersDisplayed: true,
-  isActiveLineHighlighted: false,
-  isAutoCompletionEnabled: false,
-  isPatternHighlightingEnabled: true,
-  isFlashEnabled: true,
-  isTooltipEnabled: false,
-  isLineWrappingEnabled: false,
-  theme: 'strudelTheme',
-  fontFamily: 'monospace',
-  fontSize: 18,
-};
-
 export function MicroRepl({
   code,
   hideHeader = false,
@@ -56,7 +42,6 @@ export function MicroRepl({
       root: containerRef.current,
       initialCode: '// LOADING',
       pattern: silence,
-      settings: initialSettings,
       drawTime,
       onDraw,
       editPattern: (pat, id) => {
@@ -76,7 +61,6 @@ export function MicroRepl({
       },
     });
     // init settings
-    editor.updateSettings(initialSettings);
     editor.setCode(code);
     editorRef.current = editor;
   }, []);

website/src/pages/vanilla/mini.astro

@@ -5,7 +5,7 @@
   </head>
   <body>
     <p>This is a REPL:</p>
-    <strudel-editor 
+    <!-- <strudel-editor 
     keybindings="emacs" 
     is-line-numbers-displayed="1" 
     is-active-line-highlighted="1" 
@@ -17,7 +17,8 @@
     theme="strudelTheme"
     font-family="monospace"
     font-size="18"
-    code={`s("bd")`}></strudel-editor>
+    code={`s("bd")`}></strudel-editor> -->
+    <strudel-editor code={`s("bd")`}></strudel-editor>
 
     <p>This is another REPL:</p>
     <strudel-editor is-line-numbers-displayed="0"><!--

website/src/repl/vanilla/vanilla.mjs

@@ -1,25 +1,12 @@
 import { hash2code, logger } from '@strudel.cycles/core';
+import { codemirrorSettings } from '@strudel/codemirror';
 import './vanilla.css';
 
 let editor;
-const initialSettings = {
-  keybindings: 'codemirror',
-  isLineNumbersDisplayed: true,
-  isActiveLineHighlighted: true,
-  isAutoCompletionEnabled: false,
-  isPatternHighlightingEnabled: true,
-  isFlashEnabled: true,
-  isTooltipEnabled: false,
-  isLineWrappingEnabled: false,
-  theme: 'teletext',
-  fontFamily: 'monospace',
-  fontSize: 18,
-};
 
 async function run() {
   const repl = document.getElementById('editor');
   editor = repl.editor;
-  editor.updateSettings(initialSettings);
   logger(`Welcome to Strudel! Click into the editor and then hit ctrl+enter to run the code!`, 'highlight');
   const codeParam = window.location.href.split('#')[1] || '';
 
@@ -123,8 +110,8 @@ function setFormValues(form, values) {
 }
 
 const form = document.querySelector('form[name=settings]');
-setFormValues(form, initialSettings);
+setFormValues(form, codemirrorSettings.get());
 form.addEventListener('change', () => {
-  const values = getFormValues(form, initialSettings);
+  const values = getFormValues(form, codemirrorSettings.get());
   editor?.updateSettings(values);
 });