-
-
- 
-
+
Hello Vite + React!
-- -
-
- Edit App.jsx and save to test HMR updates.
-
- - Learn React - - {' | '} - - Vite Docs - -
-
+
- )
+ );
}
-export default App
+export default App;
diff --git a/packages/react/src/components/MiniRepl.jsx b/packages/react/src/components/MiniRepl.jsx
index 614cf293..4d404b3d 100644
--- a/packages/react/src/components/MiniRepl.jsx
+++ b/packages/react/src/components/MiniRepl.jsx
@@ -1,38 +1,24 @@
import React, { useState } from 'react';
+import { useInView } from 'react-hook-inview';
+import { Tone } from '@strudel.cycles/tone';
+import { evalScope } from '@strudel.cycles/eval';
+
import useRepl from '../hooks/useRepl.mjs';
import cx from '../cx';
import useHighlighting from '../hooks/useHighlighting.mjs';
-import { useInView } from 'react-hook-inview';
-
-// eval stuff start
-import { extend } from '@strudel.cycles/eval';
-import * as strudel from '@strudel.cycles/core';
-import gist from '@strudel.cycles/core/gist.js';
-import { mini } from '@strudel.cycles/mini/mini.mjs';
-import { Tone } from '@strudel.cycles/tone';
-import * as toneHelpers from '@strudel.cycles/tone/tone.mjs';
-import * as voicingHelpers from '@strudel.cycles/tonal/voicings.mjs';
-import * as uiHelpers from '@strudel.cycles/tone/ui.mjs';
-import * as drawHelpers from '@strudel.cycles/tone/draw.mjs';
-import euclid from '@strudel.cycles/core/euclid.mjs';
-import '@strudel.cycles/tone/tone.mjs';
-import '@strudel.cycles/midi/midi.mjs';
-import '@strudel.cycles/tonal/voicings.mjs';
-import '@strudel.cycles/tonal/tonal.mjs';
-import '@strudel.cycles/xen/xen.mjs';
-import '@strudel.cycles/xen/tune.mjs';
-import '@strudel.cycles/core/euclid.mjs';
-import '@strudel.cycles/tone/pianoroll.mjs';
-import '@strudel.cycles/tone/draw.mjs';
import CodeMirror6 from './CodeMirror6';
+import 'tailwindcss/tailwind.css';
-extend(Tone, strudel, strudel.Pattern.prototype.bootstrap(), toneHelpers, voicingHelpers, drawHelpers, uiHelpers, {
- gist,
- euclid,
- mini,
+evalScope(
Tone,
-});
-// eval stuff end
+ import('@strudel.cycles/core'),
+ import('@strudel.cycles/tone'),
+ import('@strudel.cycles/tonal'),
+ import('@strudel.cycles/mini'),
+ import('@strudel.cycles/midi'),
+ import('@strudel.cycles/xen'),
+ import('@strudel.cycles/webaudio'),
+);
const defaultSynth = new Tone.PolySynth().chain(new Tone.Gain(0.5), Tone.Destination).set({
oscillator: { type: 'triangle' },
@@ -43,7 +29,7 @@ const defaultSynth = new Tone.PolySynth().chain(new Tone.Gain(0.5), Tone.Destina
// "balanced" | "interactive" | "playback";
// Tone.setContext(new Tone.Context({ latencyHint: 'playback', lookAhead: 1 }));
-function MiniRepl({ tune, maxHeight = 500 }){
+function MiniRepl({ tune, maxHeight = 500 }) {
const { code, setCode, pattern, activateCode, error, cycle, dirty, togglePlay } = useRepl({
tune,
defaultSynth,
@@ -56,18 +42,18 @@ function MiniRepl({ tune, maxHeight = 500 }){
});
useHighlighting({ view, pattern, active: cycle.started });
return (
-
-
-
+
+
+
-
- {error && {error.message}}
{' '}
+
+ {error && {error.message}}
+
{' '}
+
{isVisible &&
{/*
diff --git a/packages/react/src/cx.js b/packages/react/src/cx.js
index f806fcf3..4e4aea08 100644
--- a/packages/react/src/cx.js
+++ b/packages/react/src/cx.js
@@ -4,6 +4,7 @@ Copyright (C) 2022 Strudel contributors - see
+export default function cx(...classes) {
+ // : Array
return classes.filter(Boolean).join(' ');
}
diff --git a/packages/react/src/favicon.svg b/packages/react/src/favicon.svg
deleted file mode 100644
index de4aeddc..00000000
--- a/packages/react/src/favicon.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-
diff --git a/packages/react/src/index.css b/packages/react/src/index.css
deleted file mode 100644
index ec2585e8..00000000
--- a/packages/react/src/index.css
+++ /dev/null
@@ -1,13 +0,0 @@
-body {
- margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
- sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
- monospace;
-}
diff --git a/packages/react/src/index.js b/packages/react/src/index.js
new file mode 100644
index 00000000..b088d8d6
--- /dev/null
+++ b/packages/react/src/index.js
@@ -0,0 +1,4 @@
+// import 'tailwindcss/tailwind.css';
+
+export * as CodeMirror from './components/CodeMirror6';
+export * as MiniRepl from './components/MiniRepl';
diff --git a/packages/react/src/main.jsx b/packages/react/src/main.jsx
index b2e5c0ac..57beb943 100644
--- a/packages/react/src/main.jsx
+++ b/packages/react/src/main.jsx
@@ -1,6 +1,5 @@
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
-import './index.css'
ReactDOM.render(