vanilla-repl-cm6: style + codesplitting

packages/core/examples/vite-vanilla-repl-cm6/strudel.js

@@ -1,38 +1,29 @@
-import { controls, repl, evalScope } from "@strudel.cycles/core";
+import { getAudioContext, webaudioOutput, initAudioOnFirstClick, registerSynthSounds } from '@strudel.cycles/webaudio';
-import { transpiler } from "@strudel.cycles/transpiler";
-import {
-  getAudioContext,
-  webaudioOutput,
-  initAudioOnFirstClick,
-  registerSynthSounds
-} from "@strudel.cycles/webaudio";
-import { registerSoundfonts } from "@strudel.cycles/soundfonts";
 
 const initAudio = initAudioOnFirstClick();
 const ctx = getAudioContext();
 
-const loadModules = (scope = {}) =>
+export async function initStrudel(options = {}) {
-  evalScope(
+  const [{ controls, repl, evalScope }, { registerSoundfonts }, { transpiler }] = await Promise.all([
+    import('@strudel.cycles/core'),
+    import('@strudel.cycles/soundfonts'),
+    import('@strudel.cycles/transpiler'),
+  ]);
+
+  const loadModules = evalScope(
     controls,
-    import("@strudel.cycles/core"),
+    import('@strudel.cycles/core'),
-    import("@strudel.cycles/mini"),
+    import('@strudel.cycles/mini'),
-    import("@strudel.cycles/tonal"),
+    import('@strudel.cycles/tonal'),
-    import("@strudel.cycles/webaudio"),
+    import('@strudel.cycles/webaudio'),
-    scope
   );
 
-export async function initStrudel(options = {}) {
+  await Promise.all([initAudio, loadModules, registerSynthSounds(), registerSoundfonts()]);
-  await Promise.all([
-    initAudio,
-    loadModules(),
-    registerSynthSounds(),
-    registerSoundfonts()
-  ]);
 
   return repl({
     defaultOutput: webaudioOutput,
     getTime: () => ctx.currentTime,
     transpiler,
-    ...options
+    ...options,
   });
 }

packages/core/examples/vite-vanilla-repl-cm6/style.css

@@ -4,15 +4,6 @@ html {
   height: 100%;
 }
 
-#editor {
-  overflow: auto;
-  height: 100%;
-}
-
-.cm-editor {
-  height: 100%;
-}
-
 main {
   height: 100%;
   display: flex;
@@ -21,6 +12,16 @@ main {
 
 .container {
   flex-grow: 1;
+  max-height: 100%;
+  position: relative;
+}
+
+#editor {
+  overflow: auto;
+}
+
+.cm-editor {
+  height: 100%;
 }
 
 #roll {