From a75d8df1a7b44acdf592f494e22c27a7cca56e6b Mon Sep 17 00:00:00 2001 From: Damian Tarnawski Date: Tue, 22 Nov 2022 19:56:57 +0100 Subject: [PATCH 1/3] wip: bring solid devtools to the playground --- .gitignore | 1 + package.json | 2 + pnpm-lock.yaml | 349 +++++++++++++++++++++++++++++++++---- src/components/preview.tsx | 80 ++++++--- src/components/repl.tsx | 29 ++- src/workers/compiler.ts | 4 +- 6 files changed, 404 insertions(+), 61 deletions(-) diff --git a/.gitignore b/.gitignore index d9f8f294..89d898a4 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,4 @@ dist lib .DS_Store package-lock.json +.vscode/settings.json diff --git a/package.json b/package.json index 444e5011..40be990c 100644 --- a/package.json +++ b/package.json @@ -55,7 +55,9 @@ "@babel/preset-typescript": "^7.18.6", "@babel/standalone": "^7.19.5", "@rollup/browser": "^3.2.1", + "@solid-devtools/debugger": "^0.15.1", "@solid-primitives/media": "^2.0.2", + "@solid-primitives/platform": "^0.0.102", "@solid-primitives/scheduled": "^1.0.2", "@unocss/reset": "^0.45.29", "babel-preset-solid": "1.5.7", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index aa7a6b21..ce802fca 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -18,7 +18,9 @@ specifiers: '@rollup/plugin-json': ^5.0.0 '@rollup/plugin-node-resolve': ^15.0.0 '@rollup/plugin-replace': ^5.0.0 + '@solid-devtools/debugger': ^0.15.1 '@solid-primitives/media': ^2.0.2 + '@solid-primitives/platform': ^0.0.102 '@solid-primitives/scheduled': ^1.0.2 '@solidjs/router': ^0.5.0 '@types/babel__standalone': ^7.1.4 @@ -58,7 +60,9 @@ dependencies: '@babel/preset-typescript': 7.18.6_@babel+core@7.19.3 '@babel/standalone': 7.19.5 '@rollup/browser': 3.2.1 + '@solid-devtools/debugger': 0.15.1_solid-js@1.5.7+vite@3.1.8 '@solid-primitives/media': 2.0.2_solid-js@1.5.7 + '@solid-primitives/platform': 0.0.102_solid-js@1.5.7 '@solid-primitives/scheduled': 1.0.2_solid-js@1.5.7 '@unocss/reset': 0.45.29 babel-preset-solid: 1.5.7_@babel+core@7.19.3 @@ -137,6 +141,11 @@ packages: resolution: {integrity: sha512-CHIGpJcUQ5lU9KrPHTjBMhVwQG6CQjxfg36fGXl3qk/Gik1WwWachaXFuo0uCWJT/mStOKtcbFJCaVLihC1CMw==} engines: {node: '>=6.9.0'} + /@babel/compat-data/7.20.1: + resolution: {integrity: sha512-EWZ4mE2diW3QALKvDMiXnbZpRvlj+nayZ112nK93SnhqOtpdsbVD4W+2tEoT3YNBAG9RBR0ISY758ZkOgsn6pQ==} + engines: {node: '>=6.9.0'} + dev: false + /@babel/core/7.19.3: resolution: {integrity: sha512-WneDJxdsjEvyKtXKsaBGbDeiyOjR5vYq4HcShxnIbG0qixpoHjI3MqeZM9NDvsojNCEBItQE4juOo/bU6e72gQ==} engines: {node: '>=6.9.0'} @@ -159,6 +168,29 @@ packages: transitivePeerDependencies: - supports-color + /@babel/core/7.20.2: + resolution: {integrity: sha512-w7DbG8DtMrJcFOi4VrLm+8QM4az8Mo+PuLBKLp2zrYRCow8W/f9xiXm5sN53C8HksCyDQwCKha9JiDoIyPjT2g==} + engines: {node: '>=6.9.0'} + dependencies: + '@ampproject/remapping': 2.2.0 + '@babel/code-frame': 7.18.6 + '@babel/generator': 7.20.4 + '@babel/helper-compilation-targets': 7.20.0_@babel+core@7.20.2 + '@babel/helper-module-transforms': 7.20.2 + '@babel/helpers': 7.20.1 + '@babel/parser': 7.20.3 + '@babel/template': 7.18.10 + '@babel/traverse': 7.20.1 + '@babel/types': 7.20.2 + convert-source-map: 1.9.0 + debug: 4.3.4 + gensync: 1.0.0-beta.2 + json5: 2.2.1 + semver: 6.3.0 + transitivePeerDependencies: + - supports-color + dev: false + /@babel/generator/7.19.5: resolution: {integrity: sha512-DxbNz9Lz4aMZ99qPpO1raTbcrI1ZeYh+9NR9qhfkQIbFtVEqotHojEBxHzmxhVONkGt6VyrqVQcgpefMy9pqcg==} engines: {node: '>=6.9.0'} @@ -167,6 +199,15 @@ packages: '@jridgewell/gen-mapping': 0.3.2 jsesc: 2.5.2 + /@babel/generator/7.20.4: + resolution: {integrity: sha512-luCf7yk/cm7yab6CAW1aiFnmEfBJplb/JojV56MYEK7ziWfGmFlTfmL9Ehwfy4gFhbjBfWO1wj7/TuSbVNEEtA==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/types': 7.20.2 + '@jridgewell/gen-mapping': 0.3.2 + jsesc: 2.5.2 + dev: false + /@babel/helper-annotate-as-pure/7.18.6: resolution: {integrity: sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==} engines: {node: '>=6.9.0'} @@ -185,6 +226,19 @@ packages: browserslist: 4.21.4 semver: 6.3.0 + /@babel/helper-compilation-targets/7.20.0_@babel+core@7.20.2: + resolution: {integrity: sha512-0jp//vDGp9e8hZzBc6N/KwA5ZK3Wsm/pfm4CrY7vzegkVxc65SgSn6wYOnwHe9Js9HRQ1YTCKLGPzDtaS3RoLQ==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0 + dependencies: + '@babel/compat-data': 7.20.1 + '@babel/core': 7.20.2 + '@babel/helper-validator-option': 7.18.6 + browserslist: 4.21.4 + semver: 6.3.0 + dev: false + /@babel/helper-create-class-features-plugin/7.19.0_@babel+core@7.19.3: resolution: {integrity: sha512-NRz8DwF4jT3UfrmUoZjd0Uph9HQnP30t7Ash+weACcyNkiYTywpIjDBgReJMKgr+n86sn2nPVVmJ28Dm053Kqw==} engines: {node: '>=6.9.0'} @@ -252,6 +306,22 @@ packages: transitivePeerDependencies: - supports-color + /@babel/helper-module-transforms/7.20.2: + resolution: {integrity: sha512-zvBKyJXRbmK07XhMuujYoJ48B5yvvmM6+wcpv6Ivj4Yg6qO7NOZOSnvZN9CRl1zz1Z4cKf8YejmCMh8clOoOeA==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/helper-environment-visitor': 7.18.9 + '@babel/helper-module-imports': 7.18.6 + '@babel/helper-simple-access': 7.20.2 + '@babel/helper-split-export-declaration': 7.18.6 + '@babel/helper-validator-identifier': 7.19.1 + '@babel/template': 7.18.10 + '@babel/traverse': 7.20.1 + '@babel/types': 7.20.2 + transitivePeerDependencies: + - supports-color + dev: false + /@babel/helper-optimise-call-expression/7.18.6: resolution: {integrity: sha512-HP59oD9/fEHQkdcbgFCnbmgH5vIQTJbxh2yf+CdM89/glUNnuzr87Q8GIjGEnOktTROemO0Pe0iPAYbqZuOUiA==} engines: {node: '>=6.9.0'} @@ -280,6 +350,13 @@ packages: dependencies: '@babel/types': 7.19.4 + /@babel/helper-simple-access/7.20.2: + resolution: {integrity: sha512-+0woI/WPq59IrqDYbVGfshjT5Dmk/nnbdpcF8SnMhhXObpTq2KNBdLFRFrkVdbDOyUmHBCxzm5FHV1rACIkIbA==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/types': 7.20.2 + dev: false + /@babel/helper-split-export-declaration/7.18.6: resolution: {integrity: sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==} engines: {node: '>=6.9.0'} @@ -308,6 +385,17 @@ packages: transitivePeerDependencies: - supports-color + /@babel/helpers/7.20.1: + resolution: {integrity: sha512-J77mUVaDTUJFZ5BpP6mMn6OIl3rEWymk2ZxDBQJUG3P+PbmyMcF3bYWvz0ma69Af1oobDqT/iAsvzhB58xhQUg==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/template': 7.18.10 + '@babel/traverse': 7.20.1 + '@babel/types': 7.20.2 + transitivePeerDependencies: + - supports-color + dev: false + /@babel/highlight/7.18.6: resolution: {integrity: sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==} engines: {node: '>=6.9.0'} @@ -323,6 +411,14 @@ packages: dependencies: '@babel/types': 7.19.4 + /@babel/parser/7.20.3: + resolution: {integrity: sha512-OP/s5a94frIPXwjzEcv5S/tpQfc6XhxYUnmWpgdqMWGgYCuErA3SzozaRAMQgSZWKeTJxht9aWAkUY+0UzvOFg==} + engines: {node: '>=6.0.0'} + hasBin: true + dependencies: + '@babel/types': 7.20.2 + dev: false + /@babel/plugin-syntax-jsx/7.18.6_@babel+core@7.19.3: resolution: {integrity: sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==} engines: {node: '>=6.9.0'} @@ -341,6 +437,16 @@ packages: '@babel/core': 7.19.3 '@babel/helper-plugin-utils': 7.19.0 + /@babel/plugin-syntax-typescript/7.18.6_@babel+core@7.20.2: + resolution: {integrity: sha512-mAWAuq4rvOepWCBid55JuRNvpTNf2UGVgoz4JV0fXEKolsVZDzsa4NqCef758WZJj/GDu0gVGItjKFiClTAmZA==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.20.2 + '@babel/helper-plugin-utils': 7.19.0 + dev: false + /@babel/plugin-transform-typescript/7.19.3_@babel+core@7.19.3: resolution: {integrity: sha512-z6fnuK9ve9u/0X0rRvI9MY0xg+DOUaABDYOe+/SQTxtlptaBB/V9JIUxJn6xp3lMBeb9qe8xSFmHU35oZDXD+w==} engines: {node: '>=6.9.0'} @@ -397,6 +503,24 @@ packages: transitivePeerDependencies: - supports-color + /@babel/traverse/7.20.1: + resolution: {integrity: sha512-d3tN8fkVJwFLkHkBN479SOsw4DMZnz8cdbL/gvuDuzy3TS6Nfw80HuQqhw1pITbIruHyh7d1fMA47kWzmcUEGA==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/code-frame': 7.18.6 + '@babel/generator': 7.20.4 + '@babel/helper-environment-visitor': 7.18.9 + '@babel/helper-function-name': 7.19.0 + '@babel/helper-hoist-variables': 7.18.6 + '@babel/helper-split-export-declaration': 7.18.6 + '@babel/parser': 7.20.3 + '@babel/types': 7.20.2 + debug: 4.3.4 + globals: 11.12.0 + transitivePeerDependencies: + - supports-color + dev: false + /@babel/types/7.19.4: resolution: {integrity: sha512-M5LK7nAeS6+9j7hAq+b3fQs+pNfUtTGq+yFFfHnauFA8zQtLRfmuipmsKDKKLuyG+wC8ABW43A153YNawNTEtw==} engines: {node: '>=6.9.0'} @@ -405,13 +529,21 @@ packages: '@babel/helper-validator-identifier': 7.19.1 to-fast-properties: 2.0.0 + /@babel/types/7.20.2: + resolution: {integrity: sha512-FnnvsNWgZCr232sqtXggapvlkk/tuwR/qhGzcmxI0GXLCjmPYQPzio2FbdlWuY6y1sHFfQKk+rRbUZ9VStQMog==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/helper-string-parser': 7.19.4 + '@babel/helper-validator-identifier': 7.19.1 + to-fast-properties: 2.0.0 + dev: false + /@esbuild/android-arm/0.15.11: resolution: {integrity: sha512-PzMcQLazLBkwDEkrNPi9AbjFt6+3I7HKbiYF2XtWQ7wItrHvEOeO3T8Am434zAozWtVP7lrTue1bEfc2nYWeCA==} engines: {node: '>=12'} cpu: [arm] os: [android] requiresBuild: true - dev: true optional: true /@esbuild/linux-loong64/0.15.11: @@ -420,7 +552,6 @@ packages: cpu: [loong64] os: [linux] requiresBuild: true - dev: true optional: true /@iconify/types/2.0.0: @@ -591,6 +722,90 @@ packages: picomatch: 2.3.1 dev: true + /@solid-devtools/debugger/0.15.1_solid-js@1.5.7+vite@3.1.8: + resolution: {integrity: sha512-E5vXsdemei9T/k/0X0GyZFvKpHiz73am3o8PmWV6vYhipvwVgPRnBvvHI85IjmtqBKK8gqHVtqu2D2qNu0rN2w==} + peerDependencies: + solid-js: ^1.6.2 + dependencies: + '@solid-devtools/shared': 0.10.1_solid-js@1.5.7 + '@solid-devtools/transform': 0.9.0_solid-js@1.5.7+vite@3.1.8 + '@solid-primitives/bounds': 0.0.105_solid-js@1.5.7 + '@solid-primitives/cursor': 0.0.103_solid-js@1.5.7 + '@solid-primitives/event-bus': 0.1.4_solid-js@1.5.7 + '@solid-primitives/event-listener': 2.2.4_solid-js@1.5.7 + '@solid-primitives/keyboard': 1.0.5_solid-js@1.5.7 + '@solid-primitives/platform': 0.0.102_solid-js@1.5.7 + '@solid-primitives/scheduled': 1.2.0_solid-js@1.5.7 + '@solid-primitives/utils': 4.0.0_solid-js@1.5.7 + solid-js: 1.5.7 + type-fest: 3.2.0 + transitivePeerDependencies: + - supports-color + - vite + dev: false + + /@solid-devtools/shared/0.10.1_solid-js@1.5.7: + resolution: {integrity: sha512-RCa6Ev5ZGdOWIo34bqcZixlaV9tEuVMTxELjuzCg561Lbja2JSp3SwKCpxu9CQrJ21CZpgvu/PxsJ28YEHJ0TA==} + peerDependencies: + solid-js: ^1.6.2 + dependencies: + '@solid-primitives/event-bus': 0.1.4_solid-js@1.5.7 + '@solid-primitives/event-listener': 2.2.4_solid-js@1.5.7 + '@solid-primitives/media': 2.0.4_solid-js@1.5.7 + '@solid-primitives/rootless': 1.2.1_solid-js@1.5.7 + '@solid-primitives/scheduled': 1.2.0_solid-js@1.5.7 + '@solid-primitives/styles': 0.0.101_solid-js@1.5.7 + '@solid-primitives/utils': 4.0.0_solid-js@1.5.7 + solid-js: 1.5.7 + type-fest: 3.2.0 + dev: false + + /@solid-devtools/transform/0.9.0_solid-js@1.5.7+vite@3.1.8: + resolution: {integrity: sha512-68Fz80+lkUNTfePvjiv0jC02cPGsZTYl06F2N8Y2DxnujAGYEJbg5mpdC805Q5ykIWMDcibUP3vdGYmNq1JL9w==} + peerDependencies: + solid-js: ^1.6.2 + vite: ^2.2.3 || ^3.0.0 + dependencies: + '@babel/core': 7.20.2 + '@babel/plugin-syntax-typescript': 7.18.6_@babel+core@7.20.2 + '@babel/types': 7.19.4 + '@solid-devtools/shared': 0.10.1_solid-js@1.5.7 + solid-js: 1.5.7 + vite: 3.1.8 + transitivePeerDependencies: + - supports-color + dev: false + + /@solid-primitives/bounds/0.0.105_solid-js@1.5.7: + resolution: {integrity: sha512-a2ZRuZayXV1/kSKx8cEOR5pIs2zKAF9lS3Gj/r7uHmBQBmn25GYCYOwj4LbLQbqqbumZr2eJO+/wDyi4UOX5pw==} + peerDependencies: + solid-js: ^1.6.0 + dependencies: + '@solid-primitives/event-listener': 2.2.4_solid-js@1.5.7 + '@solid-primitives/resize-observer': 2.0.7_solid-js@1.5.7 + '@solid-primitives/utils': 4.0.0_solid-js@1.5.7 + solid-js: 1.5.7 + dev: false + + /@solid-primitives/cursor/0.0.103_solid-js@1.5.7: + resolution: {integrity: sha512-bb5x5lCimBf7R2VqrrMVcP2y/aGTMjNj7fjvY+RvTAC3/WtG/odqeYwka4lCBV27pX9TiJCKtNS6mVTigdfLMA==} + peerDependencies: + solid-js: ^1.6.0 + dependencies: + '@solid-primitives/utils': 4.0.0_solid-js@1.5.7 + solid-js: 1.5.7 + dev: false + + /@solid-primitives/event-bus/0.1.4_solid-js@1.5.7: + resolution: {integrity: sha512-fpj5/b/x5EZGmey7iUm6d/oc52ff8HbTr7yO/+WJUheMSCyY6dQz7INth7ovx57a3SDKTqZJGY3wRZijdBVFdg==} + peerDependencies: + solid-js: ^1.6.0 + dependencies: + '@solid-primitives/immutable': 0.1.4_solid-js@1.5.7 + '@solid-primitives/utils': 4.0.0_solid-js@1.5.7 + solid-js: 1.5.7 + dev: false + /@solid-primitives/event-listener/2.2.2_solid-js@1.5.7: resolution: {integrity: sha512-0MmaWoY6O6IWDNKiW7ww45FsVN1o2PCjMZv4PTWx+dQD++CaPdCranLv0xc1b5iRKgEFzE52cVa3c82GnsgUEQ==} peerDependencies: @@ -600,6 +815,35 @@ packages: solid-js: 1.5.7 dev: false + /@solid-primitives/event-listener/2.2.4_solid-js@1.5.7: + resolution: {integrity: sha512-O/ppM0SpXWtNC7AHv1bQA9Dy6pj3NUM06MhSV9xwVv4N06PmlNYhGLDSPT1Esesm6b0fDgCXB5V+AgCSEzQd/w==} + peerDependencies: + solid-js: ^1.6.0 + dependencies: + '@solid-primitives/utils': 4.0.0_solid-js@1.5.7 + solid-js: 1.5.7 + dev: false + + /@solid-primitives/immutable/0.1.4_solid-js@1.5.7: + resolution: {integrity: sha512-9oLK8ihIjG5FZv74KoXXyKErxgGxGZsdevsIKB0ugTreBBmozHPcYTjoYFL/sHoqs2ZNMlmfNQ3kduvrvKG2RQ==} + peerDependencies: + solid-js: ^1.6.0 + dependencies: + '@solid-primitives/utils': 4.0.0_solid-js@1.5.7 + solid-js: 1.5.7 + dev: false + + /@solid-primitives/keyboard/1.0.5_solid-js@1.5.7: + resolution: {integrity: sha512-rDgBRi/tKcsfGE5zM5JSStdGor0yL7X6idpbhwXRC9KUTQX1yCDtIf07uGugi9lmQYwCIriRetZT4UCLgn66EQ==} + peerDependencies: + solid-js: ^1.6.0 + dependencies: + '@solid-primitives/event-listener': 2.2.4_solid-js@1.5.7 + '@solid-primitives/rootless': 1.2.1_solid-js@1.5.7 + '@solid-primitives/utils': 4.0.0_solid-js@1.5.7 + solid-js: 1.5.7 + dev: false + /@solid-primitives/media/2.0.2_solid-js@1.5.7: resolution: {integrity: sha512-CnQUrzIJ4e7JVvPiXMse0eWhzFQn3OGHiNexWr+WZGKwMbwRudnPrSOYpZM9Ad45RHpZ2RQarZgNMCKKtNlKKg==} peerDependencies: @@ -611,6 +855,36 @@ packages: solid-js: 1.5.7 dev: false + /@solid-primitives/media/2.0.4_solid-js@1.5.7: + resolution: {integrity: sha512-MZkdUlV3qJQts4b7ZfAldbFGB1neH64rwHsnTmIeF2Zj8gWjYcYtJ36SwkRs3NjHQ53uQliZ+DtMXiCeapNw/g==} + peerDependencies: + solid-js: ^1.6.0 + dependencies: + '@solid-primitives/event-listener': 2.2.4_solid-js@1.5.7 + '@solid-primitives/rootless': 1.2.1_solid-js@1.5.7 + '@solid-primitives/utils': 4.0.0_solid-js@1.5.7 + solid-js: 1.5.7 + dev: false + + /@solid-primitives/platform/0.0.102_solid-js@1.5.7: + resolution: {integrity: sha512-1eZA1/HYOhmlZ9LrrGot+LUi/ypO2NXqfB+9F1WY98dGNDMz9pG9k+X7kg2YDJTUHDGbzY7WrsBRyAE8LurE7Q==} + peerDependencies: + solid-js: ^1.5.0 + dependencies: + solid-js: 1.5.7 + dev: false + + /@solid-primitives/resize-observer/2.0.7_solid-js@1.5.7: + resolution: {integrity: sha512-/RtCTs61ACdsCKJodNTgnKA05CI09dkg7usAb5jg14L6mzwTNWWdZbXtbYsUlD+kh1/1j+BKxp6VtkbpgJE5yQ==} + peerDependencies: + solid-js: ^1.6.0 + dependencies: + '@solid-primitives/event-listener': 2.2.4_solid-js@1.5.7 + '@solid-primitives/rootless': 1.2.1_solid-js@1.5.7 + '@solid-primitives/utils': 4.0.0_solid-js@1.5.7 + solid-js: 1.5.7 + dev: false + /@solid-primitives/rootless/1.1.3_solid-js@1.5.7: resolution: {integrity: sha512-cvAILHUrix0xNNmUnxF6MscW2fNEmMk7l/HmAcLcuQyQzd6t1WU6gdL2q9X9ui3LbG3It7qzhHVO3AdDxnkD6g==} peerDependencies: @@ -620,6 +894,15 @@ packages: solid-js: 1.5.7 dev: false + /@solid-primitives/rootless/1.2.1_solid-js@1.5.7: + resolution: {integrity: sha512-8RpdyS1e58PQbDjgjpyCh+IGoX3QEs/2LauMfl94eXJ5d/o1y/c6P61z9XqQm+Bx1Otdgx4nbFCoF7HPqa0mwg==} + peerDependencies: + solid-js: ^1.6.0 + dependencies: + '@solid-primitives/utils': 4.0.0_solid-js@1.5.7 + solid-js: 1.5.7 + dev: false + /@solid-primitives/scheduled/1.0.2_solid-js@1.5.7: resolution: {integrity: sha512-Qs+KyqVxKIFXlCNwHvNKl7CLsexsE1eNaKShkkZQz1jA1OC9YhdZeFkNjAyqGqZ4BHZOTQsKRW7XAefhDVjeuw==} peerDependencies: @@ -628,6 +911,23 @@ packages: solid-js: 1.5.7 dev: false + /@solid-primitives/scheduled/1.2.0_solid-js@1.5.7: + resolution: {integrity: sha512-59QbtGACZD8RIkD0jNQVUHRBF6uW7dKzDVFYSgogRdfxRO9kgXc6aGkLrCjd4k4g3kYe+XiBLcvYKyut4F7BHg==} + peerDependencies: + solid-js: ^1.6.0 + dependencies: + solid-js: 1.5.7 + dev: false + + /@solid-primitives/styles/0.0.101_solid-js@1.5.7: + resolution: {integrity: sha512-tHkeUMntlS/w+/zDzXJv82hhMy3J3q7tVV3ZTbahRo0hZienAM8ZJrCYZNK/fu2px8NHVSZFRufxv9qhIclPTw==} + peerDependencies: + solid-js: ^1.5.0 + dependencies: + '@solid-primitives/rootless': 1.2.1_solid-js@1.5.7 + solid-js: 1.5.7 + dev: false + /@solid-primitives/utils/3.0.2_solid-js@1.5.7: resolution: {integrity: sha512-LCU3tVrJmyRqJ0ocG5uCEuUNqmGkcAC+cWpDEE49AuvtehkdQfv4CfqvdNJgs3eoQRQhLOrVcgd1bHFJY4lsrQ==} peerDependencies: @@ -636,6 +936,14 @@ packages: solid-js: 1.5.7 dev: false + /@solid-primitives/utils/4.0.0_solid-js@1.5.7: + resolution: {integrity: sha512-fGsJy8Z8YiwogpiezD7TWjI62UCb0JAHJWdoXWGrggrn4bfToZotKkabiB0IVFMkWVE1ZcrkvZT3bkmqGnK0ng==} + peerDependencies: + solid-js: ^1.6.0 + dependencies: + solid-js: 1.5.7 + dev: false + /@solidjs/router/0.5.0_solid-js@1.5.7: resolution: {integrity: sha512-rNR07l21tWWDVmCbaapggB89rEX7jlM2XChpTLqEGEnj46LzVZ8zgvjcF6NNKScByAlLpoQUkVIjB2KHpcMi+w==} peerDependencies: @@ -1172,7 +1480,6 @@ packages: cpu: [x64] os: [android] requiresBuild: true - dev: true optional: true /esbuild-android-arm64/0.15.11: @@ -1181,7 +1488,6 @@ packages: cpu: [arm64] os: [android] requiresBuild: true - dev: true optional: true /esbuild-darwin-64/0.15.11: @@ -1190,7 +1496,6 @@ packages: cpu: [x64] os: [darwin] requiresBuild: true - dev: true optional: true /esbuild-darwin-arm64/0.15.11: @@ -1199,7 +1504,6 @@ packages: cpu: [arm64] os: [darwin] requiresBuild: true - dev: true optional: true /esbuild-freebsd-64/0.15.11: @@ -1208,7 +1512,6 @@ packages: cpu: [x64] os: [freebsd] requiresBuild: true - dev: true optional: true /esbuild-freebsd-arm64/0.15.11: @@ -1217,7 +1520,6 @@ packages: cpu: [arm64] os: [freebsd] requiresBuild: true - dev: true optional: true /esbuild-linux-32/0.15.11: @@ -1226,7 +1528,6 @@ packages: cpu: [ia32] os: [linux] requiresBuild: true - dev: true optional: true /esbuild-linux-64/0.15.11: @@ -1235,7 +1536,6 @@ packages: cpu: [x64] os: [linux] requiresBuild: true - dev: true optional: true /esbuild-linux-arm/0.15.11: @@ -1244,7 +1544,6 @@ packages: cpu: [arm] os: [linux] requiresBuild: true - dev: true optional: true /esbuild-linux-arm64/0.15.11: @@ -1253,7 +1552,6 @@ packages: cpu: [arm64] os: [linux] requiresBuild: true - dev: true optional: true /esbuild-linux-mips64le/0.15.11: @@ -1262,7 +1560,6 @@ packages: cpu: [mips64el] os: [linux] requiresBuild: true - dev: true optional: true /esbuild-linux-ppc64le/0.15.11: @@ -1271,7 +1568,6 @@ packages: cpu: [ppc64] os: [linux] requiresBuild: true - dev: true optional: true /esbuild-linux-riscv64/0.15.11: @@ -1280,7 +1576,6 @@ packages: cpu: [riscv64] os: [linux] requiresBuild: true - dev: true optional: true /esbuild-linux-s390x/0.15.11: @@ -1289,7 +1584,6 @@ packages: cpu: [s390x] os: [linux] requiresBuild: true - dev: true optional: true /esbuild-netbsd-64/0.15.11: @@ -1298,7 +1592,6 @@ packages: cpu: [x64] os: [netbsd] requiresBuild: true - dev: true optional: true /esbuild-openbsd-64/0.15.11: @@ -1307,7 +1600,6 @@ packages: cpu: [x64] os: [openbsd] requiresBuild: true - dev: true optional: true /esbuild-sunos-64/0.15.11: @@ -1316,7 +1608,6 @@ packages: cpu: [x64] os: [sunos] requiresBuild: true - dev: true optional: true /esbuild-windows-32/0.15.11: @@ -1325,7 +1616,6 @@ packages: cpu: [ia32] os: [win32] requiresBuild: true - dev: true optional: true /esbuild-windows-64/0.15.11: @@ -1334,7 +1624,6 @@ packages: cpu: [x64] os: [win32] requiresBuild: true - dev: true optional: true /esbuild-windows-arm64/0.15.11: @@ -1343,7 +1632,6 @@ packages: cpu: [arm64] os: [win32] requiresBuild: true - dev: true optional: true /esbuild/0.15.11: @@ -1374,7 +1662,6 @@ packages: esbuild-windows-32: 0.15.11 esbuild-windows-64: 0.15.11 esbuild-windows-arm64: 0.15.11 - dev: true /escalade/3.1.1: resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==} @@ -1476,7 +1763,6 @@ packages: /function-bind/1.1.1: resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==} - dev: true /function.prototype.name/1.1.5: resolution: {integrity: sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==} @@ -1606,7 +1892,6 @@ packages: engines: {node: '>= 0.4.0'} dependencies: function-bind: 1.1.1 - dev: true /html-entities/2.3.2: resolution: {integrity: sha512-c3Ab/url5ksaT0WyleslpBEthOzWhrjQbg75y7XUsfSzi3Dgzt0l8w5e7DylRn15MTlMMD58dTfzddNS2kcAjQ==} @@ -1694,7 +1979,6 @@ packages: resolution: {integrity: sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg==} dependencies: has: 1.0.3 - dev: true /is-date-object/1.0.5: resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==} @@ -1988,7 +2272,6 @@ packages: resolution: {integrity: sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==} engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} hasBin: true - dev: true /node-fetch-native/0.1.8: resolution: {integrity: sha512-ZNaury9r0NxaT2oL65GvdGDy+5PlSaHTovT6JV5tOW07k1TQmgC0olZETa4C9KZg0+6zBr99ctTYa3Utqj9P/Q==} @@ -2106,7 +2389,6 @@ packages: /path-parse/1.0.7: resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==} - dev: true /path-type/4.0.0: resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==} @@ -2136,7 +2418,6 @@ packages: nanoid: 3.3.4 picocolors: 1.0.0 source-map-js: 1.0.2 - dev: true /prettier-plugin-tailwindcss/0.1.13_prettier@2.7.1: resolution: {integrity: sha512-/EKQURUrxLu66CMUg4+1LwGdxnz8of7IDvrSLqEtDqhLH61SAlNNUSr90UTvZaemujgl3OH/VHg+fyGltrNixw==} @@ -2200,7 +2481,6 @@ packages: is-core-module: 2.10.0 path-parse: 1.0.7 supports-preserve-symlinks-flag: 1.0.0 - dev: true /reusify/1.0.4: resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==} @@ -2236,7 +2516,6 @@ packages: hasBin: true optionalDependencies: fsevents: 2.3.2 - dev: true /rollup/3.2.1: resolution: {integrity: sha512-Y9lBWYY7pOiWhJbwMEnLicDuTu9IqjJb5jJM88L8O5rdreJrX1j9WhriMHQSOwVYPFg1xkLoXQyDfQ2U6Ejzyg==} @@ -2348,7 +2627,6 @@ packages: /source-map-js/1.0.2: resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==} engines: {node: '>=0.10.0'} - dev: true /sourcemap-codec/1.4.8: resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==} @@ -2395,7 +2673,6 @@ packages: /supports-preserve-symlinks-flag/1.0.0: resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} engines: {node: '>= 0.4'} - dev: true /to-fast-properties/2.0.0: resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==} @@ -2417,6 +2694,11 @@ packages: resolution: {integrity: sha512-nsZd8ZeNUzukXPlJmTBwUAuABDe/9qtVDelJeT/qW0ow3ZS3BsQJtNkan1802aM9Uf68/Y8ljw86Hu0h5IUW3w==} dev: true + /type-fest/3.2.0: + resolution: {integrity: sha512-Il3wdLRzWvbAEtocgxGQA9YOoRVeVUGOMBtel5LdEpNeEAol6GJTLw8GbX6Z8EIMfvfhoOXs2bwOijtAZdK5og==} + engines: {node: '>=14.16'} + dev: false + /typescript/4.8.4: resolution: {integrity: sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==} engines: {node: '>=4.2.0'} @@ -2553,7 +2835,6 @@ packages: rollup: 2.78.1 optionalDependencies: fsevents: 2.3.2 - dev: true /which-boxed-primitive/1.0.2: resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==} diff --git a/src/components/preview.tsx b/src/components/preview.tsx index a6892f78..36f923e1 100644 --- a/src/components/preview.tsx +++ b/src/components/preview.tsx @@ -1,7 +1,17 @@ import { Component, createEffect, createSignal, onCleanup } from 'solid-js'; import { useZoom } from '../hooks/useZoom'; +import { isChromium } from '@solid-primitives/platform'; -export const Preview: Component = (props) => { +export const Preview: Component<{ + classList?: { + [k: string]: boolean | undefined; + }; + code: string; + reloadSignal: boolean; + devtools: boolean; + solidDevtools: boolean; + isDark: boolean; +}> = (props) => { const { zoomState } = useZoom(); let iframe!: HTMLIFrameElement; @@ -24,21 +34,22 @@ export const Preview: Component = (props) => { createEffect(() => { if (!isIframeReady()) return; - iframe.contentWindow!.postMessage({ event: 'DEVTOOLS', value: props.devtools }, '*'); - }); + createEffect(() => { + iframe.contentWindow!.postMessage({ event: 'DEVTOOLS', value: props.devtools }, '*'); + }); - createEffect(() => { - if (!isIframeReady()) return; + createEffect(() => { + iframe.contentWindow!.postMessage({ event: 'SOLID_DEVTOOLS', value: props.solidDevtools }, '*'); + }); - iframe.contentDocument!.documentElement.classList.toggle('dark', props.isDark); - iframe.contentWindow!.postMessage({ event: 'THEME', value: props.isDark }, '*'); + createEffect(() => { + iframe.contentDocument!.documentElement.classList.toggle('dark', props.isDark); + iframe.contentWindow!.postMessage({ event: 'THEME', value: props.isDark }, '*'); + }); }); - const ua = navigator.userAgent.toLowerCase(); - const isChrome = /(?!chrom.*opr)chrom(?:e|ium)\/([0-9.]+)(:?\s|$)/.test(ua); - - const devtools = isChrome - ? ` + const devtools = isChromium + ? /* html */ ` ` - : ` + : /* html */ ` `; - const html = ` + const html = /* html */ ` @@ -180,6 +191,36 @@ export const Preview: Component = (props) => { if (load) load.remove(); }) + @@ -190,6 +231,7 @@ export const Preview: Component = (props) => { `; + const blob = new Blob([html], { type: 'text/html', }); @@ -229,13 +271,3 @@ export const Preview: Component = (props) => { ); }; - -type Props = { - classList?: { - [k: string]: boolean | undefined; - }; - code: string; - reloadSignal: boolean; - devtools: boolean; - isDark: boolean; -}; diff --git a/src/components/repl.tsx b/src/components/repl.tsx index 0c1e3bf7..b7d7bdbc 100644 --- a/src/components/repl.tsx +++ b/src/components/repl.tsx @@ -165,8 +165,23 @@ const Repl: ReplProps = (props) => { const [reloadSignal, reload] = createSignal(false, { equals: false }); const [devtoolsOpen, setDevtoolsOpen] = createSignal(true); + const [solidDevtoolsOpen, setSolidDevtoolsOpen] = createSignal(false); const [displayErrors, setDisplayErrors] = createSignal(true); + // TODO We need to reload the iframe when solid devtools are toggled + // only allow for one devtools open at a time + function toggleDevtools(type: 'browser' | 'solid') { + batch(() => { + if (type === 'browser') { + setDevtoolsOpen((v) => !v); + setSolidDevtoolsOpen(false); + } else { + setSolidDevtoolsOpen((v) => !v); + setDevtoolsOpen(false); + } + }); + } + return (
{ type="button" title="Open the devtools" class="py-2 px-3 disabled:cursor-not-allowed disabled:opacity-25" - onClick={() => setDevtoolsOpen(!devtoolsOpen())} + onClick={() => toggleDevtools('browser')} disabled={outputTab() != 0} > Open the devtools @@ -318,6 +333,17 @@ const Repl: ReplProps = (props) => { Output + + + @@ -325,6 +351,7 @@ const Repl: ReplProps = (props) => { Date: Wed, 23 Nov 2022 23:09:43 +0100 Subject: [PATCH 2/3] Apply Improve ui, and remove leftover roots --- src/components/preview.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/preview.tsx b/src/components/preview.tsx index 36f923e1..3ed68a92 100644 --- a/src/components/preview.tsx +++ b/src/components/preview.tsx @@ -192,7 +192,7 @@ export const Preview: Component<{ }) From 7bc90611d715e7985ac5fc5405ea83ef829c2d3a Mon Sep 17 00:00:00 2001 From: Damian Tarnawski Date: Fri, 25 Nov 2022 18:43:10 +0100 Subject: [PATCH 3/3] Update to new overlay API, add icon for solid devtools --- src/components/preview.tsx | 4 +- src/components/repl.tsx | 30 ++++++++------- src/components/solidMonoIcon.tsx | 66 ++++++++++++++++++++++++++++++++ src/components/tabs/index.tsx | 2 +- 4 files changed, 85 insertions(+), 17 deletions(-) create mode 100644 src/components/solidMonoIcon.tsx diff --git a/src/components/preview.tsx b/src/components/preview.tsx index 3ed68a92..05e9150a 100644 --- a/src/components/preview.tsx +++ b/src/components/preview.tsx @@ -193,7 +193,7 @@ export const Preview: Component<{