elias/strudel
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel.git synced 2026-01-11 21:58:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

add react nano-repl example

Browse Source
This commit is contained in:
Felix Roos 2022-08-17 23:59:40 +02:00
parent 46aa3d275a
commit 1941b1ff65
7 changed files with 2438 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
packages/react/examples/nano-repl/.gitignore vendored Normal file
View File

@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

12
packages/react/examples/nano-repl/index.html Normal file
View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Strudel Nano REPL</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

2338
packages/react/examples/nano-repl/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

21
packages/react/examples/nano-repl/package.json Normal file
View File

@ -0,0 +1,21 @@
{
"name": "nano-repl",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.0.17",
"@types/react-dom": "^18.0.6",
"@vitejs/plugin-react": "^2.0.1",
"vite": "^3.0.7"
}
}

27
packages/react/examples/nano-repl/src/App.jsx Normal file
View File

@ -0,0 +1,27 @@
import * as strudel from '@strudel.cycles/core';
import * as webaudio from '@strudel.cycles/webaudio';
import { webaudioOutput } from '@strudel.cycles/webaudio';
import { useState } from 'react';
import useScheduler from '../../../src/hooks/useScheduler';
import useEvaluator from '../../../src/hooks/useEvaluator';
Object.assign(globalThis, strudel, webaudio); // add strudel to eval scope
function App() {
const [code, setCode] = useState(`seq('c3','eb3').note()`);
const { evaluate, pattern, isDirty, error: evaluatorError } = useEvaluator(code);
const { scheduler, error: schedulerError } = useScheduler(pattern, webaudioOutput);
const error = evaluatorError || schedulerError;
return (
<div>
<textarea value={code} onChange={(e) => setCode(e.target.value)} cols="64" rows="30" />
<br />
<button onClick={() => scheduler.start()}>start</button>
<button onClick={() => scheduler.stop()}>stop</button>
{isDirty && <button onClick={() => evaluate()}>eval</button>}
{error && <p>error {error.message}</p>}
</div>
);
}
export default App;

9
packages/react/examples/nano-repl/src/main.jsx Normal file
View File

@ -0,0 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
);

7
packages/react/examples/nano-repl/vite.config.js Normal file
View File

@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()]
})