diff --git a/packages/react/package.json b/packages/react/package.json index 400c8cef..f24008ef 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -47,17 +47,17 @@ "react-hook-inview": "^4.5.0" }, "peerDependencies": { - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": "^18.2.0", + "react-dom": "^18.2.0" }, "devDependencies": { - "@types/react": "^17.0.2", - "@types/react-dom": "^17.0.2", + "@types/react": "^18.0.28", + "@types/react-dom": "^18.0.11", "@vitejs/plugin-react": "^2.2.0", "autoprefixer": "^10.4.7", "postcss": "^8.4.18", - "react": "^17.0.2", - "react-dom": "^17.0.2", + "react": "^18.2.0", + "react-dom": "^18.2.0", "tailwindcss": "^3.0.24", "vite": "^3.2.2" } diff --git a/packages/react/src/App.jsx b/packages/react/src/App.jsx index 5dd47070..ba7b1da4 100644 --- a/packages/react/src/App.jsx +++ b/packages/react/src/App.jsx @@ -8,8 +8,6 @@ evalScope( import('@strudel.cycles/core'), import('@strudel.cycles/tonal'), import('@strudel.cycles/mini'), - import('@strudel.cycles/midi'), - import('@strudel.cycles/xen'), import('@strudel.cycles/webaudio'), ); diff --git a/packages/react/src/main.jsx b/packages/react/src/main.jsx index e9780201..fe0fabf3 100644 --- a/packages/react/src/main.jsx +++ b/packages/react/src/main.jsx @@ -1,10 +1,9 @@ import React from 'react'; -import ReactDOM from 'react-dom'; import App from './App'; +import { createRoot } from 'react-dom/client'; -ReactDOM.render( +createRoot(document.getElementById('root')).render( , - document.getElementById('root'), ); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9694f77f..473c8f3b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -171,15 +171,15 @@ importers: '@strudel.cycles/core': workspace:* '@strudel.cycles/transpiler': workspace:* '@strudel.cycles/webaudio': workspace:* - '@types/react': ^17.0.2 - '@types/react-dom': ^17.0.2 + '@types/react': ^18.0.28 + '@types/react-dom': ^18.0.11 '@uiw/codemirror-themes': ^4.12.4 '@uiw/react-codemirror': ^4.12.4 '@vitejs/plugin-react': ^2.2.0 autoprefixer: ^10.4.7 postcss: ^8.4.18 - react: ^17.0.2 - react-dom: ^17.0.2 + react: ^18.2.0 + react-dom: ^18.2.0 react-hook-inview: ^4.5.0 tailwindcss: ^3.0.24 vite: ^3.2.2 @@ -195,16 +195,16 @@ importers: '@strudel.cycles/transpiler': link:../transpiler '@strudel.cycles/webaudio': link:../webaudio '@uiw/codemirror-themes': 4.19.7_a4vbhepr4qhxm5cldqd4jpyase - '@uiw/react-codemirror': 4.19.7_r3x7zzmc35ug7i3c2vv4bf5iey - react-hook-inview: 4.5.0_sfoxds7t5ydpegc3knd667wn6m + '@uiw/react-codemirror': 4.19.7_mtfgmdsccde6vjsd2vdv2ar7qq + react-hook-inview: 4.5.0_biqbaboplfbrettd7655fr4n2y devDependencies: - '@types/react': 17.0.53 - '@types/react-dom': 17.0.18 + '@types/react': 18.0.28 + '@types/react-dom': 18.0.11 '@vitejs/plugin-react': 2.2.0_vite@3.2.5 autoprefixer: 10.4.13_postcss@8.4.21 postcss: 8.4.21 - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 tailwindcss: 3.2.4_postcss@8.4.21 vite: 3.2.5 @@ -3967,23 +3967,15 @@ packages: /@types/prop-types/15.7.5: resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==} - /@types/react-dom/17.0.18: - resolution: {integrity: sha512-rLVtIfbwyur2iFKykP2w0pl/1unw26b5td16d5xMgp7/yjTHomkyxPYChFoCr/FtEX1lN9wY6lFj1qvKdS5kDw==} - dependencies: - '@types/react': 17.0.53 - dev: true - /@types/react-dom/18.0.10: resolution: {integrity: sha512-E42GW/JA4Qv15wQdqJq8DL4JhNpB3prJgjgapN3qJT9K2zO5IIAQh4VXvCEDupoqAwnz0cY4RlXeC/ajX5SFHg==} dependencies: - '@types/react': 18.0.27 + '@types/react': 18.0.28 - /@types/react/17.0.53: - resolution: {integrity: sha512-1yIpQR2zdYu1Z/dc1OxC+MA6GR240u3gcnP4l6mvj/PJiVaqHsQPmWttsvHsfnhfPbU2FuGmo0wSITPygjBmsw==} + /@types/react-dom/18.0.11: + resolution: {integrity: sha512-O38bPbI2CWtgw/OoQoY+BRelw7uysmXbWvw3nLWO21H1HSh+GOlqPuXshJfjmpNlKiiSDG9cc1JZAaMmVdcTlw==} dependencies: - '@types/prop-types': 15.7.5 - '@types/scheduler': 0.16.2 - csstype: 3.1.1 + '@types/react': 18.0.28 dev: true /@types/react/18.0.27: @@ -3993,6 +3985,13 @@ packages: '@types/scheduler': 0.16.2 csstype: 3.1.1 + /@types/react/18.0.28: + resolution: {integrity: sha512-RD0ivG1kEztNBdoAK7lekI9M+azSnitIn85h4iOiaLjaTrMjzslhaqCGaI4IyCJ1RljWiLCEu4jyrLLgqxBTew==} + dependencies: + '@types/prop-types': 15.7.5 + '@types/scheduler': 0.16.2 + csstype: 3.1.1 + /@types/resolve/1.17.1: resolution: {integrity: sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==} dependencies: @@ -4258,7 +4257,7 @@ packages: '@codemirror/view': 6.7.3 dev: false - /@uiw/react-codemirror/4.19.7_r3x7zzmc35ug7i3c2vv4bf5iey: + /@uiw/react-codemirror/4.19.7_mtfgmdsccde6vjsd2vdv2ar7qq: resolution: {integrity: sha512-IHvpYWVSdiaHX0Fk6oY6YyAJigDnyvSpWKNUTRzsMNxB+8/wqZ8lior4TprXH0zyLxW5F1+bTyifFFTeg+X3Sw==} peerDependencies: '@codemirror/state': '>=6.0.0' @@ -4273,8 +4272,8 @@ packages: '@codemirror/view': 6.7.3 '@uiw/codemirror-extensions-basic-setup': 4.19.7_cgfc5aojxuwjajwhkrgidrzxoa codemirror: 6.0.1 - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 transitivePeerDependencies: - '@codemirror/autocomplete' dev: false @@ -10494,6 +10493,17 @@ packages: - supports-color dev: true + /postcss-import/14.1.0: + resolution: {integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==} + engines: {node: '>=10.0.0'} + peerDependencies: + postcss: ^8.0.0 + dependencies: + postcss-value-parser: 4.2.0 + read-cache: 1.0.0 + resolve: 1.22.1 + dev: false + /postcss-import/14.1.0_postcss@8.4.21: resolution: {integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==} engines: {node: '>=10.0.0'} @@ -10504,6 +10514,16 @@ packages: postcss-value-parser: 4.2.0 read-cache: 1.0.0 resolve: 1.22.1 + dev: true + + /postcss-js/4.0.0: + resolution: {integrity: sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==} + engines: {node: ^12 || ^14 || >= 16} + peerDependencies: + postcss: ^8.3.3 + dependencies: + camelcase-css: 2.0.1 + dev: false /postcss-js/4.0.0_postcss@8.4.21: resolution: {integrity: sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==} @@ -10513,6 +10533,23 @@ packages: dependencies: camelcase-css: 2.0.1 postcss: 8.4.21 + dev: true + + /postcss-load-config/3.1.4: + resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==} + engines: {node: '>= 10'} + peerDependencies: + postcss: '>=8.0.9' + ts-node: '>=9.0.0' + peerDependenciesMeta: + postcss: + optional: true + ts-node: + optional: true + dependencies: + lilconfig: 2.0.6 + yaml: 1.10.2 + dev: false /postcss-load-config/3.1.4_postcss@8.4.21: resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==} @@ -10530,6 +10567,15 @@ packages: postcss: 8.4.21 yaml: 1.10.2 + /postcss-nested/6.0.0: + resolution: {integrity: sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==} + engines: {node: '>=12.0'} + peerDependencies: + postcss: ^8.2.14 + dependencies: + postcss-selector-parser: 6.0.11 + dev: false + /postcss-nested/6.0.0_postcss@8.4.21: resolution: {integrity: sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==} engines: {node: '>=12.0'} @@ -10538,6 +10584,7 @@ packages: dependencies: postcss: 8.4.21 postcss-selector-parser: 6.0.11 + dev: true /postcss-selector-parser/6.0.10: resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==} @@ -10819,16 +10866,6 @@ packages: strip-json-comments: 2.0.1 dev: true - /react-dom/17.0.2_react@17.0.2: - resolution: {integrity: sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==} - peerDependencies: - react: 17.0.2 - dependencies: - loose-envify: 1.4.0 - object-assign: 4.1.1 - react: 17.0.2 - scheduler: 0.20.2 - /react-dom/18.2.0_react@18.2.0: resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==} peerDependencies: @@ -10837,16 +10874,15 @@ packages: loose-envify: 1.4.0 react: 18.2.0 scheduler: 0.23.0 - dev: false - /react-hook-inview/4.5.0_sfoxds7t5ydpegc3knd667wn6m: + /react-hook-inview/4.5.0_biqbaboplfbrettd7655fr4n2y: resolution: {integrity: sha512-Hm61BK32/K2Cc3bjBe2bQkndHbQP6NhHvWVX7zYitaitB6T28uUV+wlgxbXU9twxUt7+17HyHq6aezpMUCijQQ==} peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 dependencies: - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 dev: false /react-refresh/0.14.0: @@ -10854,19 +10890,11 @@ packages: engines: {node: '>=0.10.0'} dev: true - /react/17.0.2: - resolution: {integrity: sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==} - engines: {node: '>=0.10.0'} - dependencies: - loose-envify: 1.4.0 - object-assign: 4.1.1 - /react/18.2.0: resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==} engines: {node: '>=0.10.0'} dependencies: loose-envify: 1.4.0 - dev: false /read-cache/1.0.0: resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==} @@ -11523,17 +11551,10 @@ packages: commander: 2.20.3 dev: false - /scheduler/0.20.2: - resolution: {integrity: sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==} - dependencies: - loose-envify: 1.4.0 - object-assign: 4.1.1 - /scheduler/0.23.0: resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==} dependencies: loose-envify: 1.4.0 - dev: false /section-matter/1.0.0: resolution: {integrity: sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==} @@ -12160,6 +12181,8 @@ packages: resolution: {integrity: sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==} engines: {node: '>=12.13.0'} hasBin: true + peerDependencies: + postcss: ^8.0.9 dependencies: arg: 5.0.2 chokidar: 3.5.3 @@ -12176,10 +12199,10 @@ packages: object-hash: 3.0.0 picocolors: 1.0.0 postcss: 8.4.21 - postcss-import: 14.1.0_postcss@8.4.21 - postcss-js: 4.0.0_postcss@8.4.21 - postcss-load-config: 3.1.4_postcss@8.4.21 - postcss-nested: 6.0.0_postcss@8.4.21 + postcss-import: 14.1.0 + postcss-js: 4.0.0 + postcss-load-config: 3.1.4 + postcss-nested: 6.0.0 postcss-selector-parser: 6.0.11 postcss-value-parser: 4.2.0 quick-lru: 5.1.1