working

packages/core/repl.mjs

@@ -147,6 +147,7 @@ export function repl({
 
   // set pattern methods that use this repl via closure
   const injectPatternMethods = () => {
+    
     Pattern.prototype.p = function (id) {
       if (typeof id === 'string' && (id.startsWith('_') || id.endsWith('_'))) {
         // allows muting a pattern x with x_ or _x

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

@@ -8,3 +8,27 @@ export function ActionButton({ children, label, labelIsHidden, className, ...but
     </button>
   );
 }
+export function ActionInput({ label, className, ...inputProps }) {
+  return (
+    <label className={cx("hover:opacity-50 cursor-pointer text-nowrap w-fit", className)}>
+      <input
+        style={{ display: 'none' }}
+        {...inputProps}
+      />
+      {label}
+    </label>
+  );
+}
+
+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 SpecialActionInput(props) {
+  const { className, ...inputProps } = props
+  return <ActionInput {...inputProps} className={cx("bg-background p-2  max-w-[300px] rounded-md hover:opacity-50", className)} />
+}
+
+

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

@@ -0,0 +1,39 @@
+import { errorLogger } from '@strudel/core';
+import { useSettings, storeStartupScript } 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;
+        console.info(text)
+        storeStartupScript(text)
+
+    };
+
+    reader.onerror = () => {
+        errorLogger(new Error('failed to import prebake script'), 'ImportPrebakeScriptButton')
+    }
+
+}
+export function ImportPrebakeScriptButton() {
+    const settings = useSettings();
+
+    return <SpecialActionInput type="file"
+        label="import prebake script"
+        accept=".strudel, .txt"
+        onChange={(e) => importScript(e.target.files[0])} />
+
+    // return <label className="hover:opacity-50 cursor-pointer">
+    //     <input
+    //         style={{ display: 'none' }}
+    //         type="file"
+    //         // multiple
+    //         accept=".strudel, .txt"
+    //         onChange={(e) => importScript(e.target.files[0])}
+    //     />
+    //     import prebake script
+    // </label>
+}

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

@@ -127,7 +127,7 @@ function PanelContent({ context, tab }) {
     case tabNames.reference:
       return <Reference />;
     case tabNames.settings:
-      return <SettingsTab started={context.started} />;
+      return <SettingsTab started={context.started} context={context} />;
     case tabNames.files:
       return <FilesTab />;
     default:

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

@@ -83,7 +83,7 @@ function UserPatterns({ context }) {
   const activePattern = useActivePattern();
   const viewingPatternStore = useViewingPatternData();
   const viewingPatternData = parseJSON(viewingPatternStore);
-  const { userPatterns, patternFilter, patternAutoStart } = useSettings();
+  const { userPatterns, patternFilter, patternAutoStart, } = useSettings();
   const viewingPatternID = viewingPatternData?.id;
   return (
     <div className="flex flex-col gap-2 flex-grow overflow-hidden h-full pb-2 ">

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 (
@@ -86,7 +88,7 @@ const fontFamilyOptions = {
 
 const RELOAD_MSG = 'Changing this setting requires the window to reload itself. OK?';
 
-export function SettingsTab({ started }) {
+export function SettingsTab({ started,context }) {
   const {
     theme,
     keybindings,
@@ -113,6 +115,7 @@ export function SettingsTab({ started }) {
     isTabIndentationEnabled,
     isMultiCursorEnabled,
     patternAutoStart,
+    startupScript,
   } = useSettings();
   const shouldAlwaysSync = isUdels();
   const canChangeAudioDevice = AudioContext.prototype.setSinkId != null;
@@ -204,6 +207,8 @@ export function SettingsTab({ started }) {
           />
         </FormItem>
       </div>
+      <ImportPrebakeScriptButton />
+      {/* <SpecialActionButton label="edit startup script" onClick={() => context.editStartupScript(startupScript)}></SpecialActionButton> */}
       <FormItem label="Keybindings">
         <ButtonGroup
           value={keybindings}
@@ -313,8 +318,7 @@ export function SettingsTab({ started }) {
       </FormItem>
       <FormItem label="Zen Mode">Try clicking the logo in the top left!</FormItem>
       <FormItem label="Reset Settings">
-        <button
+        <SpecialActionButton
-          className="bg-background p-2 max-w-[300px] rounded-md hover:opacity-50"
           onClick={() => {
             confirmDialog('Sure?').then((r) => {
               if (r) {
@@ -325,7 +329,7 @@ export function SettingsTab({ started }) {
           }}
         >
           restore default settings
-        </button>
+        </SpecialActionButton>
       </FormItem>
     </div>
   );

website/src/repl/prebake.mjs

@@ -1,14 +1,23 @@
-import { Pattern, noteToMidi, valueToMidi } from '@strudel/core';
+import { Pattern,  noteToMidi, valueToMidi } from '@strudel/core';
 import { aliasBank, registerSynthSounds, registerZZFXSounds, samples } from '@strudel/webaudio';
 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;
 const baseCDN = 'https://strudel.b-cdn.net';
 
 export async function prebake() {
+
+  // const settings = settingsMap.get()
+  
+
+  // const prebakeScript = settings.startupScript || '';
+  // await  evaluate(prebakeScript);
+
   // https://archive.org/details/SalamanderGrandPianoV3
   // License: CC-by http://creativecommons.org/licenses/by/3.0/ Author: Alexander Holm
   await Promise.all([

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,
@@ -47,6 +47,7 @@ if (typeof window !== 'undefined') {
     multiChannelOrbits: parseBoolean(multiChannelOrbits),
   });
   modulesLoading = loadModules();
+  // prebakeScript = evaluate(settingsMap.get().startupScript ?? '')
   presets = prebake();
   drawContext = getDrawContext();
   clearCanvas = () => drawContext.clearRect(0, 0, drawContext.canvas.height, drawContext.canvas.width);
@@ -63,11 +64,10 @@ async function getModule(name) {
 const initialCode = `// LOADING`;
 
 export function useReplContext() {
-  const { isSyncEnabled, audioEngineTarget } = useSettings();
+  const { isSyncEnabled, audioEngineTarget, startupScript } = 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 +84,9 @@ export function useReplContext() {
       pattern: silence,
       drawTime,
       drawContext,
-      prebake: async () => Promise.all([modulesLoading, presets]),
+      prebake: async () => Promise.all([modulesLoading, presets,]).then(() => {
+        return evaluate(startupScript ?? '')
+      }),
       onUpdateState: (state) => {
         setReplState({ ...state });
       },
@@ -200,6 +202,7 @@ export function useReplContext() {
     }
   };
 
+
   const handleEvaluate = () => {
     editorRef.current.evaluate();
   };

website/src/settings.mjs

@@ -45,6 +45,7 @@ export const defaultSettings = {
   isPanelOpen: true,
   togglePanelTrigger: 'click', //click | hover
   userPatterns: '{}',
+  startupScript: '//edit this script to run code on startup\n',
   audioEngineTarget: audioEngineTargets.webaudio,
   isButtonRowHidden: false,
   isCSSAnimationDisabled: false,
@@ -108,6 +109,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 storeStartupScript = (script) => settingsMap.setKey('startupScript', script);
+
 export const setIsZen = (active) => settingsMap.setKey('isZen', !!active);
 
 const patternSetting = (key) =>