Merge pull request 'feat: add prebake script import button for loading .strudel files' (#1774) from pre_eval into main

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

website/src/repl/components/button/action-button.jsx

@@ -8,3 +8,34 @@ export function ActionButton({ children, label, labelIsHidden, className, ...but
     </button>
   );
 }
+
+export function SpecialActionButton(props) {
+  const { className, ...buttonProps } = props;
+
+  return (
+    <ActionButton
+      {...buttonProps}
+      className={cx('bg-background p-2 max-w-[300px] rounded-md hover:opacity-50', className)}
+    />
+  );
+}
+
+export function ActionInput({ label, className, ...props }) {
+  return (
+    <label className={cx('inline-flex items-center cursor-pointer', className)}>
+      <input {...props} className="sr-only peer" />
+
+      <span className="inline-flex items-center peer-hover:opacity-50">{label}</span>
+    </label>
+  );
+}
+
+export function SpecialActionInput({ className, ...props }) {
+  return (
+    <ActionInput
+      {...props}
+      className={className}
+      label={<span className="bg-background p-2 max-w-[300px] rounded-md">{props.label}</span>}
+    />
+  );
+}

website/src/repl/components/panel/ImportPrebakeScriptButton.jsx

@@ -0,0 +1,29 @@
+import { errorLogger } from '@strudel/core';
+import { useSettings, storePrebakeScript } from '../../../settings.mjs';
+import { SpecialActionInput } from '../button/action-button';
+
+async function importScript(script) {
+  const reader = new FileReader();
+  reader.readAsText(script);
+
+  reader.onload = () => {
+    const text = reader.result;
+    storePrebakeScript(text);
+  };
+
+  reader.onerror = () => {
+    errorLogger(new Error('failed to import prebake script'), 'importScript');
+  };
+}
+export function ImportPrebakeScriptButton() {
+  const settings = useSettings();
+
+  return (
+    <SpecialActionInput
+      type="file"
+      label="import prebake script"
+      accept=".strudel"
+      onChange={(e) => importScript(e.target.files[0])}
+    />
+  );
+}

website/src/repl/components/panel/SettingsTab.jsx

@@ -7,6 +7,8 @@ import { AudioDeviceSelector } from './AudioDeviceSelector.jsx';
 import { AudioEngineTargetSelector } from './AudioEngineTargetSelector.jsx';
 import { confirmDialog } from '../../util.mjs';
 import { DEFAULT_MAX_POLYPHONY, setMaxPolyphony, setMultiChannelOrbits } from '@strudel/webaudio';
+import { ActionButton, SpecialActionButton } from '../button/action-button.jsx';
+import { ImportPrebakeScriptButton } from './ImportPrebakeScriptButton.jsx';
 
 function Checkbox({ label, value, onChange, disabled = false }) {
   return (
@@ -113,6 +115,7 @@ export function SettingsTab({ started }) {
     isTabIndentationEnabled,
     isMultiCursorEnabled,
     patternAutoStart,
+    includePrebakeScriptInShare,
   } = useSettings();
   const shouldAlwaysSync = isUdels();
   const canChangeAudioDevice = AudioContext.prototype.setSinkId != null;
@@ -204,6 +207,15 @@ export function SettingsTab({ started }) {
           />
         </FormItem>
       </div>
+      <FormItem label="Prebake">
+        <ImportPrebakeScriptButton />
+        <Checkbox
+          label="Include prebake script in share"
+          onChange={(cbEvent) => settingsMap.setKey('includePrebakeScriptInShare', cbEvent.target.checked)}
+          value={includePrebakeScriptInShare}
+        />
+      </FormItem>
+
       <FormItem label="Keybindings">
         <ButtonGroup
           value={keybindings}
@@ -313,8 +325,7 @@ export function SettingsTab({ started }) {
       </FormItem>
       <FormItem label="Zen Mode">Try clicking the logo in the top left!</FormItem>
       <FormItem label="Reset Settings">
-        <button
-          className="bg-background p-2 max-w-[300px] rounded-md hover:opacity-50"
+        <SpecialActionButton
           onClick={() => {
             confirmDialog('Sure?').then((r) => {
               if (r) {
@@ -325,7 +336,7 @@ export function SettingsTab({ started }) {
           }}
         >
           restore default settings
-        </button>
+        </SpecialActionButton>
       </FormItem>
     </div>
   );

website/src/repl/prebake.mjs

@@ -3,6 +3,8 @@ import { aliasBank, registerSynthSounds, registerZZFXSounds, samples } from '@st
 import { registerSamplesFromDB } from './idbutils.mjs';
 import './piano.mjs';
 import './files.mjs';
+import { settingsMap } from '@src/settings.mjs';
+import { evaluate } from '@strudel/transpiler';
 
 const { BASE_URL } = import.meta.env;
 const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;

website/src/repl/useReplContext.jsx

@@ -6,7 +6,7 @@ This program is free software: you can redistribute it and/or modify it under th
 
 import { code2hash, getPerformanceTimeSeconds, logger, silence } from '@strudel/core';
 import { getDrawContext } from '@strudel/draw';
-import { transpiler } from '@strudel/transpiler';
+import { evaluate, transpiler } from '@strudel/transpiler';
 import {
   getAudioContextCurrentTime,
   webaudioOutput,
@@ -63,11 +63,10 @@ async function getModule(name) {
 const initialCode = `// LOADING`;
 
 export function useReplContext() {
-  const { isSyncEnabled, audioEngineTarget } = useSettings();
+  const { isSyncEnabled, audioEngineTarget, prebakeScript, includePrebakeScriptInShare } = useSettings();
   const shouldUseWebaudio = audioEngineTarget !== audioEngineTargets.osc;
   const defaultOutput = shouldUseWebaudio ? webaudioOutput : superdirtOutput;
   const getTime = shouldUseWebaudio ? getAudioContextCurrentTime : getPerformanceTimeSeconds;
-
   const init = useCallback(() => {
     const drawTime = [-2, 2];
     const drawContext = getDrawContext();
@@ -84,7 +83,12 @@ export function useReplContext() {
       pattern: silence,
       drawTime,
       drawContext,
-      prebake: async () => Promise.all([modulesLoading, presets]),
+      prebake: async () =>
+        Promise.all([modulesLoading, presets]).then(() => {
+          if (prebakeScript?.length) {
+            return evaluate(prebakeScript ?? '');
+          }
+        }),
       onUpdateState: (state) => {
         setReplState({ ...state });
       },
@@ -214,7 +218,13 @@ export function useReplContext() {
     editorRef.current.repl.evaluate(code);
   };
 
-  const handleShare = async () => shareCode(replState.code);
+  const handleShare = async () => {
+    let code = replState.code;
+    if (includePrebakeScriptInShare) {
+      code = prebakeScript + '\n' + code;
+    }
+    shareCode(code);
+  };
   const context = {
     started,
     pending,

website/src/repl/util.mjs

@@ -1,11 +1,10 @@
-import { evalScope, hash2code, logger } from '@strudel/core';
+import { code2hash, evalScope, hash2code, logger } from '@strudel/core';
 import { settingPatterns } from '../settings.mjs';
 import { setVersionDefaults } from '@strudel/webaudio';
 import { getMetadata } from '../metadata_parser';
 import { isTauri } from '../tauri.mjs';
 import './Repl.css';
 import { createClient } from '@supabase/supabase-js';
-import { nanoid } from 'nanoid';
 import { writeText } from '@tauri-apps/plugin-clipboard-manager';
 import { $featuredPatterns /* , loadDBPatterns */ } from '@src/user_pattern_utils.mjs';
 
@@ -109,9 +108,8 @@ export function confirmDialog(msg) {
   });
 }
 
-let lastShared;
-
 //RIP due to SPAM
+// let lastShared;
 // export async function shareCode(codeToShare) {
 //   // const codeToShare = activeCode || code;
 //   if (lastShared === codeToShare) {
@@ -146,9 +144,10 @@ let lastShared;
 //   });
 // }
 
-export async function shareCode() {
+export async function shareCode(codeToShare) {
   try {
-    const shareUrl = window.location.href;
+    const hash = '#' + code2hash(codeToShare);
+    const shareUrl = window.location.origin + window.location.pathname + hash;
     if (isTauri()) {
       await writeText(shareUrl);
     } else {

website/src/settings.mjs

@@ -45,11 +45,13 @@ export const defaultSettings = {
   isPanelOpen: true,
   togglePanelTrigger: 'click', //click | hover
   userPatterns: '{}',
+  prebakeScript: '',
   audioEngineTarget: audioEngineTargets.webaudio,
   isButtonRowHidden: false,
   isCSSAnimationDisabled: false,
   maxPolyphony: 128,
   multiChannelOrbits: false,
+  includePrebakeScriptInShare: true,
 };
 
 let search = null;
@@ -96,6 +98,7 @@ export function useSettings() {
     isPanelOpen: parseBoolean(state.isPanelOpen),
     userPatterns: userPatterns,
     multiChannelOrbits: parseBoolean(state.multiChannelOrbits),
+    includePrebakeScriptInShare: parseBoolean(state.includePrebakeScriptInShare),
     patternAutoStart: isUdels()
       ? false
       : state.patternAutoStart === undefined
@@ -108,6 +111,8 @@ export const setActiveFooter = (tab) => settingsMap.setKey('activeFooter', tab);
 export const setPanelPinned = (bool) => settingsMap.setKey('isPanelPinned', bool);
 export const setIsPanelOpened = (bool) => settingsMap.setKey('isPanelOpen', bool);
 
+export const storePrebakeScript = (script) => settingsMap.setKey('prebakeScript', script);
+
 export const setIsZen = (active) => settingsMap.setKey('isZen', !!active);
 
 const patternSetting = (key) =>