Merge branch 'main' into eefano-brotli

Reviewed-on: https://codeberg.org/uzu/strudel/pulls/1818

examples/buildless/web-component-no-iframe.html

@@ -1,5 +1,4 @@
-<script src="https://unpkg.com/@strudel/repl@1.2.7"></script>
-<!-- <script src="../../packages/repl/dist/index.js"></script> -->
+<script src="https://unpkg.com/@strudel/repl@1.0.2"></script>
 <strudel-editor>
   <!--
 // @date 23-08-15

packages/codemirror/keybindings.mjs

@@ -1,5 +1,5 @@
 import { defaultKeymap } from '@codemirror/commands';
-import { Prec } from '@codemirror/state';
+import { Prec, EditorState } from '@codemirror/state';
 import { keymap, ViewPlugin } from '@codemirror/view';
 // import { searchKeymap } from '@codemirror/search';
 import { emacs } from '@replit/codemirror-emacs';
@@ -133,5 +133,9 @@ const keymaps = {
 
 export function keybindings(name) {
   const active = keymaps[name];
-  return [active ? Prec.high(active()) : []];
+  const extensions = active ? [Prec.high(active())] : [];
+  if (name === 'vim') {
+    extensions.push(EditorState.allowMultipleSelections.of(true));
+  }
+  return extensions;
 }

packages/repl/repl-component.mjs

@@ -1,12 +1,11 @@
 import { silence } from '@strudel/core';
 import { getDrawContext } from '@strudel/draw';
 import { transpiler } from '@strudel/transpiler';
-import { getAudioContext, webaudioOutput, initAudioOnFirstClick } from '@strudel/webaudio';
+import { getAudioContext, webaudioOutput } from '@strudel/webaudio';
 import { StrudelMirror, codemirrorSettings } from '@strudel/codemirror';
 import { prebake } from './prebake.mjs';
 
 if (typeof HTMLElement !== 'undefined') {
-  initAudioOnFirstClick();
   class StrudelRepl extends HTMLElement {
     static observedAttributes = ['code'];
     settings = codemirrorSettings.get();

packages/superdough/helpers.mjs

@@ -42,6 +42,7 @@ export const getParamADSR = (
   decay,
   sustain,
   release,
+  // min = value at start of attack, max = value at end of attack; it is possible that max < min
   min,
   max,
   begin,
@@ -59,17 +60,15 @@ export const getParamADSR = (
     max = max === 0 ? 0.001 : max;
   }
   const range = max - min;
-  const peak = max;
   const sustainVal = min + sustain * range;
   const duration = end - begin;
 
   const envValAtTime = (time) => {
     let val;
     if (attack > time) {
-      let slope = getSlope(min, peak, 0, attack);
-      val = time * slope + (min > peak ? min : 0);
+      val = time * getSlope(min, max, 0, attack) + min;
     } else {
-      val = (time - attack) * getSlope(peak, sustainVal, 0, decay) + peak;
+      val = (time - attack) * getSlope(max, sustainVal, 0, decay) + max;
     }
     if (curve === 'exponential') {
       val = val || 0.001;

pnpm-lock.yaml

@@ -804,6 +804,9 @@ importers:
       astro:
         specifier: ^5.1.9
         version: 5.1.9(@types/node@22.10.10)(jiti@2.4.2)(lightningcss@1.29.1)(rollup@2.79.2)(terser@5.37.0)(typescript@5.7.3)(yaml@2.7.0)
+      base64url-universal:
+        specifier: ^2.0.0
+        version: 2.0.0
       claviature:
         specifier: ^0.1.0
         version: 0.1.0
@@ -3297,6 +3300,14 @@ packages:
   base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
 
+  base64url-universal@2.0.0:
+    resolution: {integrity: sha512-6Hpg7EBf3t148C3+fMzjf+CHnADVDafWzlJUXAqqqbm4MKNXbsoPdOkWeRTjNlkYG7TpyjIpRO1Gk0SnsFD1rw==}
+    engines: {node: '>=14'}
+
+  base64url@3.0.1:
+    resolution: {integrity: sha512-ir1UPr3dkwexU7FdV8qBBbNDRUhMmIekYMFZfi+C/sLNnRESKPl23nB9b2pltqfOQNnGzsDdId90AEtG5tCx4A==}
+    engines: {node: '>=6.0.0'}
+
   before-after-hook@2.2.3:
     resolution: {integrity: sha512-NzUnlZexiaH/46WDhANlyR2bXRopNg4F/zuSA3OpZnllCUgRaOF2znDioDWrmbNVsuZk6l9pMquQB38cfBZwkQ==}
 
@@ -11008,6 +11019,12 @@ snapshots:
 
   base64-js@1.5.1: {}
 
+  base64url-universal@2.0.0:
+    dependencies:
+      base64url: 3.0.1
+
+  base64url@3.0.1: {}
+
   before-after-hook@2.2.3: {}
 
   bin-links@4.0.4:
@@ -12978,7 +12995,7 @@ snapshots:
   jake@10.9.2:
     dependencies:
       async: 3.2.6
-      chalk: 4.1.0
+      chalk: 4.1.2
       filelist: 1.0.4
       minimatch: 3.1.2
 

website/package.json

@@ -53,6 +53,7 @@
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
     "astro": "^5.1.9",
+    "base64url-universal": "^2.0.0",
     "claviature": "^0.1.0",
     "date-fns": "^4.1.0",
     "hs2js": "0.1.0",

website/src/pages/learn/mini-notation.mdx

@@ -142,6 +142,8 @@ The "~" represents a rest, and will create silence between other events:
 
 <MiniRepl client:idle tune={`note("[b4 [~ c5] d5 e5]")`} punchcard />
 
+Alternatively, "-" can be used instead of "~". It means the same thing.
+
 ## Parallel / polyphony
 
 Using commas, we can play chords.

website/src/repl/useReplContext.jsx

@@ -38,6 +38,7 @@ import { getRandomTune, initCode, loadModules, shareCode } from './util.mjs';
 import './Repl.css';
 import { setInterval, clearInterval } from 'worker-timers';
 import { getMetadata } from '../metadata_parser';
+import { encode as base64urlencode } from 'base64url-universal';
 import { debugAudiograph } from './audiograph';
 
 const { latestCode, maxPolyphony, audioDeviceName, multiChannelOrbits } = settingsMap.get();
@@ -101,13 +102,29 @@ export function useReplContext() {
         }
       },
       beforeEval: () => audioReady,
-      afterEval: (all) => {
+      afterEval: async (all) => {
         const { code } = all;
         //post to iframe parent (like Udels) if it exists...
         window.parent?.postMessage(code);
 
         setLatestCode(code);
-        window.location.hash = '#' + code2hash(code);
+        //window.location.hash = '#' + code2hash(code);
+
+        // Compress the script and encode it with base64url
+        const encoded = new TextEncoder().encode(code);
+        //console.log('encoded',encoded);
+
+        const cs = new CompressionStream('deflate');
+        const writer = cs.writable.getWriter();
+        writer.write(encoded);
+        writer.close();
+        const compressed = new Uint8Array(await new Response(cs.readable).arrayBuffer());
+        //console.log('compressed',compressed);
+
+        const baseurled = base64urlencode(compressed);
+        //console.log('baseurled',baseurled);
+        window.location.hash = '#~' + baseurled;
+
         setDocumentTitle(code);
         const viewingPatternData = getViewingPatternData();
         setVersionDefaultsFrom(code);

website/src/repl/util.mjs

@@ -7,6 +7,7 @@ import './Repl.css';
 import { createClient } from '@supabase/supabase-js';
 import { writeText } from '@tauri-apps/plugin-clipboard-manager';
 import { $featuredPatterns /* , loadDBPatterns */ } from '@src/user_pattern_utils.mjs';
+import { decode as base64urldecode } from 'base64url-universal';
 
 // Create a single supabase client for interacting with your database
 export const supabase = createClient(
@@ -26,6 +27,38 @@ export async function initCode() {
     const hash = initialUrl.split('?')[1]?.split('#')?.[0]?.split('&')[0];
     const codeParam = window.location.href.split('#')[1] || '';
     if (codeParam) {
+      if (codeParam[0] === '~') {
+        // Encoded using base64url and compressed
+        const baseurled = codeParam.substring(1);
+        //console.log('baseurled', baseurled);
+        const compressed = base64urldecode(baseurled);
+        //console.log('compressed', compressed);
+
+        const cs = new DecompressionStream('deflate');
+        const writer = cs.writable.getWriter();
+        writer.write(compressed);
+        writer.close();
+        const encoded = await new Response(cs.readable).arrayBuffer();
+        //console.log('encoded', encoded);
+
+        const decoded = new TextDecoder().decode(encoded);
+        //console.log('decoded', decoded);
+        return decoded;
+      }
+      if (codeParam[0] === '_') {
+        const url = decodeURIComponent(codeParam.substring(1));
+        try {
+          const response = await fetch(url);
+          if (!response.ok) {
+            throw new Error(`Response status: ${response.status}`);
+          }
+          console.log('Response', response);
+          return await response.text();
+        } catch (error) {
+          return `/* ERROR LOADING SCRIPT. ${error.message} */`;
+        }
+      }
+
       // looking like https://strudel.cc/#ImMzIGUzIg%3D%3D (hash length depends on code length)
       return hash2code(codeParam);
     } else if (hash) {