From e502a8aa9ad470223b02b214ca0b23dd2a052d3a Mon Sep 17 00:00:00 2001 From: setsun Date: Tue, 11 Jul 2023 23:01:19 -0400 Subject: [PATCH] some initial code for a synth app using hydra --- .../.github/workflows/production.yml | 21 ---- apps/synth/.eslintrc.js | 4 + apps/synth/README.md | 1 + apps/synth/index.html | 12 ++ apps/synth/package.json | 29 +++++ apps/synth/postcss.config.js | 9 ++ apps/synth/public/vite.svg | 1 + apps/synth/src/App.tsx | 29 +++++ apps/synth/src/assets/react.svg | 1 + apps/synth/src/main.tsx | 11 ++ apps/synth/src/styles/globals.css | 10 ++ apps/synth/src/vite-env.d.ts | 1 + apps/synth/tailwind.config.js | 7 ++ apps/synth/tsconfig.json | 12 ++ apps/synth/vite.config.ts | 10 ++ packages/tsconfig/react-library.json | 2 +- pnpm-lock.yaml | 106 ++++++++++++++++++ 17 files changed, 244 insertions(+), 22 deletions(-) delete mode 100644 apps/portfolio/.github/workflows/production.yml create mode 100644 apps/synth/.eslintrc.js create mode 100644 apps/synth/README.md create mode 100644 apps/synth/index.html create mode 100644 apps/synth/package.json create mode 100644 apps/synth/postcss.config.js create mode 100644 apps/synth/public/vite.svg create mode 100644 apps/synth/src/App.tsx create mode 100644 apps/synth/src/assets/react.svg create mode 100644 apps/synth/src/main.tsx create mode 100644 apps/synth/src/styles/globals.css create mode 100644 apps/synth/src/vite-env.d.ts create mode 100644 apps/synth/tailwind.config.js create mode 100644 apps/synth/tsconfig.json create mode 100644 apps/synth/vite.config.ts diff --git a/apps/portfolio/.github/workflows/production.yml b/apps/portfolio/.github/workflows/production.yml deleted file mode 100644 index 3cb60421..00000000 --- a/apps/portfolio/.github/workflows/production.yml +++ /dev/null @@ -1,21 +0,0 @@ -name: Vercel Production Deployment -env: - VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }} - VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }} -on: - push: - branches: - - main -jobs: - Deploy-Production: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v2 - - name: Install Vercel CLI - run: npm install --global vercel@latest - - name: Pull Vercel Environment Information - run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }} - - name: Build Project Artifacts - run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }} - - name: Deploy Project Artifacts to Vercel - run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}g \ No newline at end of file diff --git a/apps/synth/.eslintrc.js b/apps/synth/.eslintrc.js new file mode 100644 index 00000000..c8df6075 --- /dev/null +++ b/apps/synth/.eslintrc.js @@ -0,0 +1,4 @@ +module.exports = { + root: true, + extends: ["custom"], +}; diff --git a/apps/synth/README.md b/apps/synth/README.md new file mode 100644 index 00000000..4fe1fb9b --- /dev/null +++ b/apps/synth/README.md @@ -0,0 +1 @@ +# `synth` diff --git a/apps/synth/index.html b/apps/synth/index.html new file mode 100644 index 00000000..becddca6 --- /dev/null +++ b/apps/synth/index.html @@ -0,0 +1,12 @@ + + + + + + Synth + + +
+ + + diff --git a/apps/synth/package.json b/apps/synth/package.json new file mode 100644 index 00000000..affe8fce --- /dev/null +++ b/apps/synth/package.json @@ -0,0 +1,29 @@ +{ + "name": "synth", + "private": true, + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "vite build", + "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0", + "preview": "vite preview" + }, + "dependencies": { + "hydra-ts": "^1.0.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "regl": "^1.7.0" + }, + "devDependencies": { + "@types/react": "^18.2.14", + "@types/react-dom": "^18.2.6", + "@vitejs/plugin-react": "^4.0.1", + "eslint": "^8.44.0", + "eslint-config-custom": "workspace:*", + "tailwind-config": "workspace:*", + "tailwindcss": "^3.3.2", + "tsconfig": "workspace:*", + "typescript": "^5.1.6", + "vite": "^4.4.0" + } +} diff --git a/apps/synth/postcss.config.js b/apps/synth/postcss.config.js new file mode 100644 index 00000000..07aa434b --- /dev/null +++ b/apps/synth/postcss.config.js @@ -0,0 +1,9 @@ +// If you want to use other PostCSS plugins, see the following: +// https://tailwindcss.com/docs/using-with-preprocessors + +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; diff --git a/apps/synth/public/vite.svg b/apps/synth/public/vite.svg new file mode 100644 index 00000000..e7b8dfb1 --- /dev/null +++ b/apps/synth/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/synth/src/App.tsx b/apps/synth/src/App.tsx new file mode 100644 index 00000000..74cf918b --- /dev/null +++ b/apps/synth/src/App.tsx @@ -0,0 +1,29 @@ +import { Hydra, generators } from 'hydra-ts'; +import REGL from 'regl'; +import { useState, useLayoutEffect } from "react"; + +const regl = REGL(); + +function App() { + const [hydra, setHydra] = useState(); + + useLayoutEffect(() => { + const hydra = new Hydra({ regl, width: window.innerWidth, height: window.innerHeight }); + + const { sources, outputs, loop } = hydra; + + const { osc } = generators; + + const [o0] = outputs; + + setHydra(hydra); + + osc(4, 0.1, 1.2).out(o0) + + loop.start(); + }, []); + + return null; +} + +export default App; diff --git a/apps/synth/src/assets/react.svg b/apps/synth/src/assets/react.svg new file mode 100644 index 00000000..6c87de9b --- /dev/null +++ b/apps/synth/src/assets/react.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/synth/src/main.tsx b/apps/synth/src/main.tsx new file mode 100644 index 00000000..30a7e175 --- /dev/null +++ b/apps/synth/src/main.tsx @@ -0,0 +1,11 @@ +import React from "react"; +import ReactDOM from "react-dom/client"; +import App from "./App"; + +import "./styles/globals.css"; + +ReactDOM.createRoot(document.getElementById("root")!).render( + + + +); diff --git a/apps/synth/src/styles/globals.css b/apps/synth/src/styles/globals.css new file mode 100644 index 00000000..e2d11915 --- /dev/null +++ b/apps/synth/src/styles/globals.css @@ -0,0 +1,10 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +html, +body { + @apply bg-slate-950 text-white m-0 p-0; + font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, + Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; +} \ No newline at end of file diff --git a/apps/synth/src/vite-env.d.ts b/apps/synth/src/vite-env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/apps/synth/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/apps/synth/tailwind.config.js b/apps/synth/tailwind.config.js new file mode 100644 index 00000000..cc78ae35 --- /dev/null +++ b/apps/synth/tailwind.config.js @@ -0,0 +1,7 @@ +// tailwind config is required for editor support + +const sharedConfig = require("tailwind-config/tailwind.config.js"); + +module.exports = { + presets: [sharedConfig], +}; diff --git a/apps/synth/tsconfig.json b/apps/synth/tsconfig.json new file mode 100644 index 00000000..df31c552 --- /dev/null +++ b/apps/synth/tsconfig.json @@ -0,0 +1,12 @@ +{ + "extends": "tsconfig/react-library.json", + "compilerOptions": { + "lib": ["dom"], + "baseUrl": ".", + "paths": { + "@/*": ["src/*"] + } + }, + "include": [".", "../tsconfig/@types"], + "exclude": ["dist", "build", "node_modules"], +} diff --git a/apps/synth/vite.config.ts b/apps/synth/vite.config.ts new file mode 100644 index 00000000..41f5fc78 --- /dev/null +++ b/apps/synth/vite.config.ts @@ -0,0 +1,10 @@ +import { defineConfig } from "vite"; +import react from "@vitejs/plugin-react"; + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [react()], + define: { + global: 'window', + }, +}); diff --git a/packages/tsconfig/react-library.json b/packages/tsconfig/react-library.json index 6d6a7fea..46984145 100644 --- a/packages/tsconfig/react-library.json +++ b/packages/tsconfig/react-library.json @@ -5,7 +5,7 @@ "compilerOptions": { "lib": ["ES2015"], "module": "ESNext", - "target": "ES6", + "target": "ES2015", "jsx": "react-jsx" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ea857a76..4b9f123d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -172,6 +172,52 @@ importers: specifier: ^5.1.6 version: 5.1.6 + apps/synth: + dependencies: + hydra-ts: + specifier: ^1.0.0 + version: 1.0.0 + react: + specifier: ^18.2.0 + version: 18.2.0 + react-dom: + specifier: ^18.2.0 + version: 18.2.0(react@18.2.0) + regl: + specifier: ^1.7.0 + version: 1.7.0 + devDependencies: + '@types/react': + specifier: ^18.2.14 + version: 18.2.14 + '@types/react-dom': + specifier: ^18.2.6 + version: 18.2.6 + '@vitejs/plugin-react': + specifier: ^4.0.1 + version: 4.0.1(vite@4.4.0) + eslint: + specifier: ^8.44.0 + version: 8.44.0 + eslint-config-custom: + specifier: workspace:* + version: link:../../packages/eslint-config-custom + tailwind-config: + specifier: workspace:* + version: link:../../packages/tailwind-config + tailwindcss: + specifier: ^3.3.2 + version: 3.3.2 + tsconfig: + specifier: workspace:* + version: link:../../packages/tsconfig + typescript: + specifier: ^5.1.6 + version: 5.1.6 + vite: + specifier: ^4.4.0 + version: 4.4.0 + packages/data-explorations: dependencies: '@observablehq/plot': @@ -5906,6 +5952,21 @@ packages: - supports-color dev: true + /@vitejs/plugin-react@4.0.1(vite@4.4.0): + resolution: {integrity: sha512-g25lL98essfeSj43HJ0o4DMp0325XK0ITkxpgChzJU/CyemgyChtlxfnRbjfwxDGCTRxTiXtQAsdebQXKMRSOA==} + engines: {node: ^14.18.0 || >=16.0.0} + peerDependencies: + vite: ^4.2.0 + dependencies: + '@babel/core': 7.22.6 + '@babel/plugin-transform-react-jsx-self': 7.22.5(@babel/core@7.22.6) + '@babel/plugin-transform-react-jsx-source': 7.22.5(@babel/core@7.22.6) + react-refresh: 0.14.0 + vite: 4.4.0 + transitivePeerDependencies: + - supports-color + dev: true + /@whatwg-node/events@0.1.1: resolution: {integrity: sha512-AyQEn5hIPV7Ze+xFoXVU3QTHXVbWPrzaOkxtENMPMuNL6VVHrp4hHfDt9nrQpjO7BgvuM95dMtkycX5M/DZR3w==} engines: {node: '>=16.0.0'} @@ -9052,6 +9113,12 @@ packages: engines: {node: '>=14.18.0'} dev: false + /hydra-ts@1.0.0: + resolution: {integrity: sha512-qJXbIogzOXL8GIJauggAuuwPSqKdWsjlpHQ+oJt+dUo2bbRuvwFRQHAXld0BKU6a+9dZ2Kw2EWLyUi8pPKt13Q==} + dependencies: + regl: 1.7.0 + dev: false + /iconv-lite@0.4.24: resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==} engines: {node: '>=0.10.0'} @@ -11746,6 +11813,10 @@ packages: jsesc: 0.5.0 dev: true + /regl@1.7.0: + resolution: {integrity: sha512-bEAtp/qrtKucxXSJkD4ebopFZYP0q1+3Vb2WECWv/T8yQEgKxDxJ7ztO285tAMaYZVR6mM1GgI6CCn8FROtL1w==} + dev: false + /remark-external-links@8.0.0: resolution: {integrity: sha512-5vPSX0kHoSsqtdftSHhIYofVINC8qmp0nctkeU9YoJwV3YfiBRiI6cbFRJ0oI/1F9xS+bopXG0m2KS8VFscuKA==} dependencies: @@ -13423,6 +13494,41 @@ packages: fsevents: 2.3.2 dev: true + /vite@4.4.0: + resolution: {integrity: sha512-Wf+DCEjuM8aGavEYiF77hnbxEZ+0+/jC9nABR46sh5Xi+GYeSvkeEFRiVuI3x+tPjxgZeS91h1jTAQTPFgePpA==} + engines: {node: ^14.18.0 || >=16.0.0} + hasBin: true + peerDependencies: + '@types/node': '>= 14' + less: '*' + lightningcss: ^1.21.0 + sass: '*' + stylus: '*' + sugarss: '*' + terser: ^5.4.0 + peerDependenciesMeta: + '@types/node': + optional: true + less: + optional: true + lightningcss: + optional: true + sass: + optional: true + stylus: + optional: true + sugarss: + optional: true + terser: + optional: true + dependencies: + esbuild: 0.18.11 + postcss: 8.4.25 + rollup: 3.26.1 + optionalDependencies: + fsevents: 2.3.2 + dev: true + /vm2@3.9.19: resolution: {integrity: sha512-J637XF0DHDMV57R6JyVsTak7nIL8gy5KH4r1HiwWLf/4GBbb5MKL5y7LpmF4A8E2nR6XmzpmMFQ7V7ppPTmUQg==} engines: {node: '>=6.0'}