From a166ab4ce148bb54a63e0438ad8f3031d1557047 Mon Sep 17 00:00:00 2001 From: Paul Harter Date: Wed, 6 Dec 2023 11:23:01 +0000 Subject: [PATCH] updating readme --- .changeset/spicy-beans-build.md | 2 +- clients/typescript/package.json | 5 - clients/typescript/src/satellite/index.ts | 1 + pnpm-lock.yaml | 312 +++++++++++++++++++- toolbar/.gitignore | 5 +- toolbar/.npmrc | 1 - toolbar/README.md | 59 +--- toolbar/package.json | 2 +- toolbar/{custom.d.ts => src/SvgModule.d.ts} | 0 toolbar/src/api/toolbar-interface.ts | 4 +- toolbar/src/api/toolbar-typescript.ts | 2 +- toolbar/src/index.tsx | 9 +- toolbar/src/tabs.tsx | 22 +- toolbar/src/tabs/SQLTab.tsx | 225 +++++++------- toolbar/src/tabs/StatusTab.tsx | 4 +- toolbar/test/api.test.ts | 2 +- toolbar/tsconfig.json | 2 +- toolbar/util.ts | 10 + 18 files changed, 463 insertions(+), 204 deletions(-) delete mode 100644 toolbar/.npmrc rename toolbar/{custom.d.ts => src/SvgModule.d.ts} (100%) create mode 100644 toolbar/util.ts diff --git a/.changeset/spicy-beans-build.md b/.changeset/spicy-beans-build.md index 0aea6f5611..38cd8d418c 100644 --- a/.changeset/spicy-beans-build.md +++ b/.changeset/spicy-beans-build.md @@ -1,5 +1,5 @@ --- -"@electric-sql/debug-toolbar": major +"@electric-sql/debug-toolbar": patch "electric-sql": patch --- diff --git a/clients/typescript/package.json b/clients/typescript/package.json index 9b065b2de1..23ccc9c79b 100644 --- a/clients/typescript/package.json +++ b/clients/typescript/package.json @@ -60,8 +60,6 @@ "./wa-sqlite": "./dist/drivers/wa-sqlite/index.js", "./config": "./dist/config/index.js", "./debug": "./dist/util/debug/index.js", - "./satellite/mock": "./dist/satellite/mock.js", - "./satellite": "./dist/satellite/index.js", ".": "./dist/index.js", "./*": "./dist/*/index.js" }, @@ -111,9 +109,6 @@ ], "util": [ "./dist/util/index.d.ts" - ], - "satellite/mock": [ - "./dist/satellite/mock.d.ts" ] } }, diff --git a/clients/typescript/src/satellite/index.ts b/clients/typescript/src/satellite/index.ts index 3fcf0794c5..15dd734b29 100644 --- a/clients/typescript/src/satellite/index.ts +++ b/clients/typescript/src/satellite/index.ts @@ -27,6 +27,7 @@ import { } from './shapes/types' import { ShapeSubscription } from './process' import { DbSchema } from '../client/model/schema' +export { MockRegistry } from './mock' export { SatelliteProcess } from './process' export { GlobalRegistry, globalRegistry } from './registry' diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 44e032afb4..1733353ee6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,4 +1,4 @@ -lockfileVersion: '6.1' +lockfileVersion: '6.0' settings: autoInstallPeers: true @@ -393,6 +393,52 @@ importers: specifier: ^0.24.5 version: 0.24.5 + toolbar: + dependencies: + codemirror: + specifier: ^5.65.15 + version: 5.65.15 + react: + specifier: ^18.2.0 + version: 18.2.0 + react-codemirror2: + specifier: ^7.3.0 + version: 7.3.0(codemirror@5.65.15)(react@18.2.0) + react-dom: + specifier: ^18.2.0 + version: 18.2.0(react@18.2.0) + devDependencies: + '@ikscodes/browser-env': + specifier: ^1.0.0 + version: 1.0.0 + '@types/node': + specifier: '>=16.11.0' + version: 16.18.34 + '@types/react': + specifier: ^18.0.18 + version: 18.2.7 + '@types/react-dom': + specifier: ^18.0.11 + version: 18.2.4 + electric-sql: + specifier: workspace:* + version: link:../clients/typescript + esbuild: + specifier: ^0.16.17 + version: 0.16.17 + esbuild-plugin-inline-image: + specifier: ^0.0.9 + version: 0.0.9 + prettier: + specifier: 3.0.3 + version: 3.0.3 + typescript: + specifier: ^4.4.3 + version: 4.9.5 + vitest: + specifier: ^0.24.5 + version: 0.24.5 + packages: /@ampproject/remapping@2.2.1: @@ -2020,6 +2066,15 @@ packages: engines: {node: '>=0.1.90'} dev: false + /@esbuild/android-arm64@0.16.17: + resolution: {integrity: sha512-MIGl6p5sc3RDTLLkYL1MyL8BMRN4tLMRCn+yRJJmEDvYZ2M7tmAf80hx1kbNEUX2KJ50RRtxZ4JHLvCfuB6kBg==} + engines: {node: '>=12'} + cpu: [arm64] + os: [android] + requiresBuild: true + dev: true + optional: true + /@esbuild/android-arm64@0.17.19: resolution: {integrity: sha512-KBMWvEZooR7+kzY0BtbTQn0OAYY7CsiydT63pVEaPtVYF0hXbUaOyZog37DKxK7NF3XacBJOpYT4adIJh+avxA==} engines: {node: '>=12'} @@ -2056,6 +2111,15 @@ packages: dev: true optional: true + /@esbuild/android-arm@0.16.17: + resolution: {integrity: sha512-N9x1CMXVhtWEAMS7pNNONyA14f71VPQN9Cnavj1XQh6T7bskqiLLrSca4O0Vr8Wdcga943eThxnVp3JLnBMYtw==} + engines: {node: '>=12'} + cpu: [arm] + os: [android] + requiresBuild: true + dev: true + optional: true + /@esbuild/android-arm@0.17.19: resolution: {integrity: sha512-rIKddzqhmav7MSmoFCmDIb6e2W57geRsM94gV2l38fzhXMwq7hZoClug9USI2pFRGL06f4IOPHHpFNOkWieR8A==} engines: {node: '>=12'} @@ -2074,6 +2138,15 @@ packages: dev: true optional: true + /@esbuild/android-x64@0.16.17: + resolution: {integrity: sha512-a3kTv3m0Ghh4z1DaFEuEDfz3OLONKuFvI4Xqczqx4BqLyuFaFkuaG4j2MtA6fuWEFeC5x9IvqnX7drmRq/fyAQ==} + engines: {node: '>=12'} + cpu: [x64] + os: [android] + requiresBuild: true + dev: true + optional: true + /@esbuild/android-x64@0.17.19: resolution: {integrity: sha512-uUTTc4xGNDT7YSArp/zbtmbhO0uEEK9/ETW29Wk1thYUJBz3IVnvgEiEwEa9IeLyvnpKrWK64Utw2bgUmDveww==} engines: {node: '>=12'} @@ -2092,6 +2165,15 @@ packages: dev: true optional: true + /@esbuild/darwin-arm64@0.16.17: + resolution: {integrity: sha512-/2agbUEfmxWHi9ARTX6OQ/KgXnOWfsNlTeLcoV7HSuSTv63E4DqtAc+2XqGw1KHxKMHGZgbVCZge7HXWX9Vn+w==} + engines: {node: '>=12'} + cpu: [arm64] + os: [darwin] + requiresBuild: true + dev: true + optional: true + /@esbuild/darwin-arm64@0.17.19: resolution: {integrity: sha512-80wEoCfF/hFKM6WE1FyBHc9SfUblloAWx6FJkFWTWiCoht9Mc0ARGEM47e67W9rI09YoUxJL68WHfDRYEAvOhg==} engines: {node: '>=12'} @@ -2110,6 +2192,15 @@ packages: dev: true optional: true + /@esbuild/darwin-x64@0.16.17: + resolution: {integrity: sha512-2By45OBHulkd9Svy5IOCZt376Aa2oOkiE9QWUK9fe6Tb+WDr8hXL3dpqi+DeLiMed8tVXspzsTAvd0jUl96wmg==} + engines: {node: '>=12'} + cpu: [x64] + os: [darwin] + requiresBuild: true + dev: true + optional: true + /@esbuild/darwin-x64@0.17.19: resolution: {integrity: sha512-IJM4JJsLhRYr9xdtLytPLSH9k/oxR3boaUIYiHkAawtwNOXKE8KoU8tMvryogdcT8AU+Bflmh81Xn6Q0vTZbQw==} engines: {node: '>=12'} @@ -2128,6 +2219,15 @@ packages: dev: true optional: true + /@esbuild/freebsd-arm64@0.16.17: + resolution: {integrity: sha512-mt+cxZe1tVx489VTb4mBAOo2aKSnJ33L9fr25JXpqQqzbUIw/yzIzi+NHwAXK2qYV1lEFp4OoVeThGjUbmWmdw==} + engines: {node: '>=12'} + cpu: [arm64] + os: [freebsd] + requiresBuild: true + dev: true + optional: true + /@esbuild/freebsd-arm64@0.17.19: resolution: {integrity: sha512-pBwbc7DufluUeGdjSU5Si+P3SoMF5DQ/F/UmTSb8HXO80ZEAJmrykPyzo1IfNbAoaqw48YRpv8shwd1NoI0jcQ==} engines: {node: '>=12'} @@ -2146,6 +2246,15 @@ packages: dev: true optional: true + /@esbuild/freebsd-x64@0.16.17: + resolution: {integrity: sha512-8ScTdNJl5idAKjH8zGAsN7RuWcyHG3BAvMNpKOBaqqR7EbUhhVHOqXRdL7oZvz8WNHL2pr5+eIT5c65kA6NHug==} + engines: {node: '>=12'} + cpu: [x64] + os: [freebsd] + requiresBuild: true + dev: true + optional: true + /@esbuild/freebsd-x64@0.17.19: resolution: {integrity: sha512-4lu+n8Wk0XlajEhbEffdy2xy53dpR06SlzvhGByyg36qJw6Kpfk7cp45DR/62aPH9mtJRmIyrXAS5UWBrJT6TQ==} engines: {node: '>=12'} @@ -2164,6 +2273,15 @@ packages: dev: true optional: true + /@esbuild/linux-arm64@0.16.17: + resolution: {integrity: sha512-7S8gJnSlqKGVJunnMCrXHU9Q8Q/tQIxk/xL8BqAP64wchPCTzuM6W3Ra8cIa1HIflAvDnNOt2jaL17vaW+1V0g==} + engines: {node: '>=12'} + cpu: [arm64] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-arm64@0.17.19: resolution: {integrity: sha512-ct1Tg3WGwd3P+oZYqic+YZF4snNl2bsnMKRkb3ozHmnM0dGWuxcPTTntAF6bOP0Sp4x0PjSF+4uHQ1xvxfRKqg==} engines: {node: '>=12'} @@ -2182,6 +2300,15 @@ packages: dev: true optional: true + /@esbuild/linux-arm@0.16.17: + resolution: {integrity: sha512-iihzrWbD4gIT7j3caMzKb/RsFFHCwqqbrbH9SqUSRrdXkXaygSZCZg1FybsZz57Ju7N/SHEgPyaR0LZ8Zbe9gQ==} + engines: {node: '>=12'} + cpu: [arm] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-arm@0.17.19: resolution: {integrity: sha512-cdmT3KxjlOQ/gZ2cjfrQOtmhG4HJs6hhvm3mWSRDPtZ/lP5oe8FWceS10JaSJC13GBd4eH/haHnqf7hhGNLerA==} engines: {node: '>=12'} @@ -2200,6 +2327,15 @@ packages: dev: true optional: true + /@esbuild/linux-ia32@0.16.17: + resolution: {integrity: sha512-kiX69+wcPAdgl3Lonh1VI7MBr16nktEvOfViszBSxygRQqSpzv7BffMKRPMFwzeJGPxcio0pdD3kYQGpqQ2SSg==} + engines: {node: '>=12'} + cpu: [ia32] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-ia32@0.17.19: resolution: {integrity: sha512-w4IRhSy1VbsNxHRQpeGCHEmibqdTUx61Vc38APcsRbuVgK0OPEnQ0YD39Brymn96mOx48Y2laBQGqgZ0j9w6SQ==} engines: {node: '>=12'} @@ -2236,6 +2372,15 @@ packages: dev: true optional: true + /@esbuild/linux-loong64@0.16.17: + resolution: {integrity: sha512-dTzNnQwembNDhd654cA4QhbS9uDdXC3TKqMJjgOWsC0yNCbpzfWoXdZvp0mY7HU6nzk5E0zpRGGx3qoQg8T2DQ==} + engines: {node: '>=12'} + cpu: [loong64] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-loong64@0.17.19: resolution: {integrity: sha512-2iAngUbBPMq439a+z//gE+9WBldoMp1s5GWsUSgqHLzLJ9WoZLZhpwWuym0u0u/4XmZ3gpHmzV84PonE+9IIdQ==} engines: {node: '>=12'} @@ -2254,6 +2399,15 @@ packages: dev: true optional: true + /@esbuild/linux-mips64el@0.16.17: + resolution: {integrity: sha512-ezbDkp2nDl0PfIUn0CsQ30kxfcLTlcx4Foz2kYv8qdC6ia2oX5Q3E/8m6lq84Dj/6b0FrkgD582fJMIfHhJfSw==} + engines: {node: '>=12'} + cpu: [mips64el] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-mips64el@0.17.19: resolution: {integrity: sha512-LKJltc4LVdMKHsrFe4MGNPp0hqDFA1Wpt3jE1gEyM3nKUvOiO//9PheZZHfYRfYl6AwdTH4aTcXSqBerX0ml4A==} engines: {node: '>=12'} @@ -2272,6 +2426,15 @@ packages: dev: true optional: true + /@esbuild/linux-ppc64@0.16.17: + resolution: {integrity: sha512-dzS678gYD1lJsW73zrFhDApLVdM3cUF2MvAa1D8K8KtcSKdLBPP4zZSLy6LFZ0jYqQdQ29bjAHJDgz0rVbLB3g==} + engines: {node: '>=12'} + cpu: [ppc64] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-ppc64@0.17.19: resolution: {integrity: sha512-/c/DGybs95WXNS8y3Ti/ytqETiW7EU44MEKuCAcpPto3YjQbyK3IQVKfF6nbghD7EcLUGl0NbiL5Rt5DMhn5tg==} engines: {node: '>=12'} @@ -2290,6 +2453,15 @@ packages: dev: true optional: true + /@esbuild/linux-riscv64@0.16.17: + resolution: {integrity: sha512-ylNlVsxuFjZK8DQtNUwiMskh6nT0vI7kYl/4fZgV1llP5d6+HIeL/vmmm3jpuoo8+NuXjQVZxmKuhDApK0/cKw==} + engines: {node: '>=12'} + cpu: [riscv64] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-riscv64@0.17.19: resolution: {integrity: sha512-FC3nUAWhvFoutlhAkgHf8f5HwFWUL6bYdvLc/TTuxKlvLi3+pPzdZiFKSWz/PF30TB1K19SuCxDTI5KcqASJqA==} engines: {node: '>=12'} @@ -2308,6 +2480,15 @@ packages: dev: true optional: true + /@esbuild/linux-s390x@0.16.17: + resolution: {integrity: sha512-gzy7nUTO4UA4oZ2wAMXPNBGTzZFP7mss3aKR2hH+/4UUkCOyqmjXiKpzGrY2TlEUhbbejzXVKKGazYcQTZWA/w==} + engines: {node: '>=12'} + cpu: [s390x] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-s390x@0.17.19: resolution: {integrity: sha512-IbFsFbxMWLuKEbH+7sTkKzL6NJmG2vRyy6K7JJo55w+8xDk7RElYn6xvXtDW8HCfoKBFK69f3pgBJSUSQPr+4Q==} engines: {node: '>=12'} @@ -2326,6 +2507,15 @@ packages: dev: true optional: true + /@esbuild/linux-x64@0.16.17: + resolution: {integrity: sha512-mdPjPxfnmoqhgpiEArqi4egmBAMYvaObgn4poorpUaqmvzzbvqbowRllQ+ZgzGVMGKaPkqUmPDOOFQRUFDmeUw==} + engines: {node: '>=12'} + cpu: [x64] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-x64@0.17.19: resolution: {integrity: sha512-68ngA9lg2H6zkZcyp22tsVt38mlhWde8l3eJLWkyLrp4HwMUr3c1s/M2t7+kHIhvMjglIBrFpncX1SzMckomGw==} engines: {node: '>=12'} @@ -2344,6 +2534,15 @@ packages: dev: true optional: true + /@esbuild/netbsd-x64@0.16.17: + resolution: {integrity: sha512-/PzmzD/zyAeTUsduZa32bn0ORug+Jd1EGGAUJvqfeixoEISYpGnAezN6lnJoskauoai0Jrs+XSyvDhppCPoKOA==} + engines: {node: '>=12'} + cpu: [x64] + os: [netbsd] + requiresBuild: true + dev: true + optional: true + /@esbuild/netbsd-x64@0.17.19: resolution: {integrity: sha512-CwFq42rXCR8TYIjIfpXCbRX0rp1jo6cPIUPSaWwzbVI4aOfX96OXY8M6KNmtPcg7QjYeDmN+DD0Wp3LaBOLf4Q==} engines: {node: '>=12'} @@ -2362,6 +2561,15 @@ packages: dev: true optional: true + /@esbuild/openbsd-x64@0.16.17: + resolution: {integrity: sha512-2yaWJhvxGEz2RiftSk0UObqJa/b+rIAjnODJgv2GbGGpRwAfpgzyrg1WLK8rqA24mfZa9GvpjLcBBg8JHkoodg==} + engines: {node: '>=12'} + cpu: [x64] + os: [openbsd] + requiresBuild: true + dev: true + optional: true + /@esbuild/openbsd-x64@0.17.19: resolution: {integrity: sha512-cnq5brJYrSZ2CF6c35eCmviIN3k3RczmHz8eYaVlNasVqsNY+JKohZU5MKmaOI+KkllCdzOKKdPs762VCPC20g==} engines: {node: '>=12'} @@ -2380,6 +2588,15 @@ packages: dev: true optional: true + /@esbuild/sunos-x64@0.16.17: + resolution: {integrity: sha512-xtVUiev38tN0R3g8VhRfN7Zl42YCJvyBhRKw1RJjwE1d2emWTVToPLNEQj/5Qxc6lVFATDiy6LjVHYhIPrLxzw==} + engines: {node: '>=12'} + cpu: [x64] + os: [sunos] + requiresBuild: true + dev: true + optional: true + /@esbuild/sunos-x64@0.17.19: resolution: {integrity: sha512-vCRT7yP3zX+bKWFeP/zdS6SqdWB8OIpaRq/mbXQxTGHnIxspRtigpkUcDMlSCOejlHowLqII7K2JKevwyRP2rg==} engines: {node: '>=12'} @@ -2398,6 +2615,15 @@ packages: dev: true optional: true + /@esbuild/win32-arm64@0.16.17: + resolution: {integrity: sha512-ga8+JqBDHY4b6fQAmOgtJJue36scANy4l/rL97W+0wYmijhxKetzZdKOJI7olaBaMhWt8Pac2McJdZLxXWUEQw==} + engines: {node: '>=12'} + cpu: [arm64] + os: [win32] + requiresBuild: true + dev: true + optional: true + /@esbuild/win32-arm64@0.17.19: resolution: {integrity: sha512-yYx+8jwowUstVdorcMdNlzklLYhPxjniHWFKgRqH7IFlUEa0Umu3KuYplf1HUZZ422e3NU9F4LGb+4O0Kdcaag==} engines: {node: '>=12'} @@ -2416,6 +2642,15 @@ packages: dev: true optional: true + /@esbuild/win32-ia32@0.16.17: + resolution: {integrity: sha512-WnsKaf46uSSF/sZhwnqE4L/F89AYNMiD4YtEcYekBt9Q7nj0DiId2XH2Ng2PHM54qi5oPrQ8luuzGszqi/veig==} + engines: {node: '>=12'} + cpu: [ia32] + os: [win32] + requiresBuild: true + dev: true + optional: true + /@esbuild/win32-ia32@0.17.19: resolution: {integrity: sha512-eggDKanJszUtCdlVs0RB+h35wNlb5v4TWEkq4vZcmVt5u/HiDZrTXe2bWFQUez3RgNHwx/x4sk5++4NSSicKkw==} engines: {node: '>=12'} @@ -2434,6 +2669,15 @@ packages: dev: true optional: true + /@esbuild/win32-x64@0.16.17: + resolution: {integrity: sha512-y+EHuSchhL7FjHgvQL/0fnnFmO4T1bhvWANX6gcnqTjtnKWbTvUMCpGnv2+t+31d7RzyEAYAd4u2fnIhHL6N/Q==} + engines: {node: '>=12'} + cpu: [x64] + os: [win32] + requiresBuild: true + dev: true + optional: true + /@esbuild/win32-x64@0.17.19: resolution: {integrity: sha512-lAhycmKnVOuRYNtRtatQR1LPQf2oYCkRGkSFnseDAKPl8lu5SOsK/e1sXe5a0Pc5kHIHe6P2I/ilntNv2xf3cA==} engines: {node: '>=12'} @@ -2881,7 +3125,7 @@ packages: dependencies: '@types/istanbul-lib-coverage': 2.0.4 '@types/istanbul-reports': 3.0.1 - '@types/node': 16.18.34 + '@types/node': 18.16.16 '@types/yargs': 15.0.15 chalk: 4.1.2 @@ -2891,7 +3135,7 @@ packages: dependencies: '@types/istanbul-lib-coverage': 2.0.4 '@types/istanbul-reports': 3.0.1 - '@types/node': 16.18.34 + '@types/node': 18.16.16 '@types/yargs': 16.0.5 chalk: 4.1.2 dev: false @@ -3647,7 +3891,7 @@ packages: /@types/cross-spawn@6.0.2: resolution: {integrity: sha512-KuwNhp3eza+Rhu8IFI5HUXRP0LIhqH5cAjubUvGXXthh4YYBuP2ntwEX+Cz8GJoZUHlKo247wPWOfA9LYEq4cw==} dependencies: - '@types/node': 16.18.34 + '@types/node': 18.16.16 /@types/debug@4.1.8: resolution: {integrity: sha512-/vPO1EPOs306Cvhwv7KfVfYvOJqA/S/AXjaHQiJboCZzcNDb+TIJFN9/2C9DZ//ijSKWioNyUxD792QmDJ+HKQ==} @@ -3787,6 +4031,7 @@ packages: /@types/node@16.18.34: resolution: {integrity: sha512-VmVm7gXwhkUimRfBwVI1CHhwp86jDWR04B5FGebMMyxV90SlCmFujwUHrxTD4oO+SOYU86SoxvhgeRQJY7iXFg==} + dev: true /@types/node@18.16.16: resolution: {integrity: sha512-NpaM49IGQQAUlBhHMF82QH80J08os4ZmyF9MkpCzWAGuOHqE4gTEbhzd7L3l5LmWuZ6E0OiC1FweQ4tsiW35+g==} @@ -4030,6 +4275,7 @@ packages: /abab@2.0.6: resolution: {integrity: sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==} + deprecated: Use your platform's native atob() and btoa() methods instead dev: true /abort-controller@3.0.0: @@ -5325,6 +5571,10 @@ packages: convert-to-spaces: 2.0.1 dev: true + /codemirror@5.65.15: + resolution: {integrity: sha512-YC4EHbbwQeubZzxLl5G4nlbLc1T21QTrKGaOal/Pkm9dVDMZXMH7+ieSPEOZCtO9I68i8/oteJKOxzHC2zR+0g==} + dev: false + /collection-visit@1.0.0: resolution: {integrity: sha512-lNkKvzEeMBBjUGHZ+q6z9pSJla0KWAQPvtzhEV9+iGyQYG+pBpl7xKDhxoNSOZH2hhv0v5k0y2yAM4o4SjoSkw==} engines: {node: '>=0.10.0'} @@ -6061,6 +6311,7 @@ packages: /domexception@1.0.1: resolution: {integrity: sha512-raigMkn7CJNNo6Ihro1fzG7wr3fHuYVytzquZKX5n0yizGsTcYgzdIUwj1X9pK0VvjeihV+XiclP+DjwbsSKug==} + deprecated: Use your platform's native DOMException instead dependencies: webidl-conversions: 4.0.2 dev: true @@ -6547,6 +6798,10 @@ packages: dev: true optional: true + /esbuild-plugin-inline-image@0.0.9: + resolution: {integrity: sha512-pw3ZgN2phh32Z7BpKrhRDtmI+iVCl+Gc0BLOT9croXg1MnMjRuN7aXhIQirhLeK39erkIwfFlhy6xieroBGc1Q==} + dev: true + /esbuild-sunos-64@0.15.12: resolution: {integrity: sha512-nkl251DpoWoBO9Eq9aFdoIt2yYmp4I3kvQjba3jFKlMXuqQ9A4q+JaqdkCouG3DHgAGnzshzaGu6xofGcXyPXg==} engines: {node: '>=12'} @@ -6679,6 +6934,36 @@ packages: esbuild-windows-arm64: 0.15.18 dev: true + /esbuild@0.16.17: + resolution: {integrity: sha512-G8LEkV0XzDMNwXKgM0Jwu3nY3lSTwSGY6XbxM9cr9+s0T/qSV1q1JVPBGzm3dcjhCic9+emZDmMffkwgPeOeLg==} + engines: {node: '>=12'} + hasBin: true + requiresBuild: true + optionalDependencies: + '@esbuild/android-arm': 0.16.17 + '@esbuild/android-arm64': 0.16.17 + '@esbuild/android-x64': 0.16.17 + '@esbuild/darwin-arm64': 0.16.17 + '@esbuild/darwin-x64': 0.16.17 + '@esbuild/freebsd-arm64': 0.16.17 + '@esbuild/freebsd-x64': 0.16.17 + '@esbuild/linux-arm': 0.16.17 + '@esbuild/linux-arm64': 0.16.17 + '@esbuild/linux-ia32': 0.16.17 + '@esbuild/linux-loong64': 0.16.17 + '@esbuild/linux-mips64el': 0.16.17 + '@esbuild/linux-ppc64': 0.16.17 + '@esbuild/linux-riscv64': 0.16.17 + '@esbuild/linux-s390x': 0.16.17 + '@esbuild/linux-x64': 0.16.17 + '@esbuild/netbsd-x64': 0.16.17 + '@esbuild/openbsd-x64': 0.16.17 + '@esbuild/sunos-x64': 0.16.17 + '@esbuild/win32-arm64': 0.16.17 + '@esbuild/win32-ia32': 0.16.17 + '@esbuild/win32-x64': 0.16.17 + dev: true + /esbuild@0.17.19: resolution: {integrity: sha512-XQ0jAPFkK/u3LcVRcvVHQcTIqD6E2H1fvZMA5dQPSOWb3suUbWbfbRf94pjc0bNzRYLfIrDRQXr7X+LHIm5oHw==} engines: {node: '>=12'} @@ -9601,6 +9886,7 @@ packages: /loupe@2.3.6: resolution: {integrity: sha512-RaPMZKiMy8/JruncMU5Bt6na1eftNoo++R4Y+N2FrxkDVTrGvcyzFTsaGif4QTeKESheMGegbhw6iUAq+5A8zA==} + deprecated: Please upgrade to 2.3.7 which fixes GHSA-4q6p-r6v2-jvc5 dependencies: get-func-name: 2.0.0 dev: true @@ -11335,6 +11621,12 @@ packages: engines: {node: '>=10.13.0'} hasBin: true + /prettier@3.0.3: + resolution: {integrity: sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==} + engines: {node: '>=14'} + hasBin: true + dev: true + /pretty-bytes@5.6.0: resolution: {integrity: sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==} engines: {node: '>=6'} @@ -11590,6 +11882,16 @@ packages: minimist: 1.2.8 strip-json-comments: 2.0.1 + /react-codemirror2@7.3.0(codemirror@5.65.15)(react@18.2.0): + resolution: {integrity: sha512-gCgJPXDX+5iaPolkHAu1YbJ92a2yL7Je4TuyO3QEqOtI/d6mbEk08l0oIm18R4ctuT/Sl87X63xIMBnRQBXYXA==} + peerDependencies: + codemirror: 5.x + react: '>=15.5 <=17.x' + dependencies: + codemirror: 5.65.15 + react: 18.2.0 + dev: false + /react-devtools-core@4.27.8: resolution: {integrity: sha512-KwoH8/wN/+m5wTItLnsgVraGNmFrcTWR3k1VimP1HjtMMw4CNF+F5vg4S/0tzTEKIdpCi2R7mPNTC+/dswZMgw==} dependencies: @@ -11608,7 +11910,6 @@ packages: loose-envify: 1.4.0 react: 18.2.0 scheduler: 0.23.0 - dev: true /react-is@16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} @@ -12248,7 +12549,6 @@ packages: resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==} dependencies: loose-envify: 1.4.0 - dev: true /seek-bzip@1.0.6: resolution: {integrity: sha512-e1QtP3YL5tWww8uKaOCQ18UxIT2laNBXHjV/S2WYCiK4udiv8lkG89KRIoCjUagnAmCBurjF4zEVX2ByBbnCjQ==} diff --git a/toolbar/.gitignore b/toolbar/.gitignore index 42c7cdfb95..72a0d4b45a 100644 --- a/toolbar/.gitignore +++ b/toolbar/.gitignore @@ -1,10 +1,7 @@ dist node_modules -# local dev app dev-app package.dev.json # We're ignoring the lockfiles here because this example is meant to act like `npx create-electric-app` in that they use latest deps -pnpm-lock.yaml -package-lock.json -yarn.lock \ No newline at end of file +pnpm-lock.yaml \ No newline at end of file diff --git a/toolbar/.npmrc b/toolbar/.npmrc deleted file mode 100644 index b6f27f1359..0000000000 --- a/toolbar/.npmrc +++ /dev/null @@ -1 +0,0 @@ -engine-strict=true diff --git a/toolbar/README.md b/toolbar/README.md index e0d1c6d766..bb63e0bdc7 100644 --- a/toolbar/README.md +++ b/toolbar/README.md @@ -28,65 +28,20 @@ Add the toolbar to your project's `devDependencies` in `package.json` } ``` -In your code add the toolbar after initialising the electric database. - -First some imports: - -```typescript -// toolbar imports -import { globalRegistry } from "electric-sql/satellite"; -import addToolbar, { typescriptApi } from '@electric-sql/debug-toolbar' -import '@electric-sql/debug-toolbar/dist/index.cjs.css' -``` - -Then add the toolbar after calling `electrify`: +In your code add the toolbar after initialising the electric database like this. ```typescript -// Add the debug toolbar -addToolbar(typescriptApi(globalRegistry)) +import ('@electric-sql/debug-toolbar/util').then(util => {util.addToolbar()}); ``` This will add the toolbar to the bottom of your window -## Development - -To develop with the toolbar you will need a project with an ElectricSQL database added. -You can use one of the example projects such as `examples/web-wa-sqlite`, -but you will have to make a few changes to the project's configuration: - -Add web-wa-sqlite to the pnpm workspace by adding this line to `pnpm-workspace.yaml` - -```yaml - - 'examples/web-wa-sqlite -``` - -Change the `web-wa-sqlite` dev dependencies in `Package.json` to use the local version of the -toolbar rather than the published one and add a dependency on `zod`: +You can wrap this in a conditional statement to only add the toolbar in development eg: -```json - "devDependencies": { - ... - "@electric-sql/debug-toolbar": "workspace:*", - ... - "zod": "^3.21.1" - }, -``` -Run `pnpm install` in the root of this repo to install everthing. - -Build the toolbar: - -```json -cd toolbar -yarn build -``` -Run the example: - -``` -cd ../examples/web-wa-sqlite -yarn build -yarn start +```typescript +if (DEBUG_MODE) { + import ('@electric-sql/debug-toolbar/util').then(util => {util.addToolbar()}); +} ``` -You sould now see the local version of the toolbar being used by the app. -When you mofify the toolbar you will have to rebuild it for the changes to appear in the app. diff --git a/toolbar/package.json b/toolbar/package.json index 68845eb55b..f8ebe22c10 100644 --- a/toolbar/package.json +++ b/toolbar/package.json @@ -7,7 +7,7 @@ "author": "ElectricSQL", "license": "Apache-2.0", "scripts": { - "build": "node builder.js && tsc --emitDeclarationOnly --outDir dist", + "build": "rm -rf ./dist && node builder.js && tsc --emitDeclarationOnly --outDir dist && cp ./util.ts ./dist/util.ts", "check-styleguide": "prettier --check --loglevel warn .", "typecheck": "tsc --noEmit", "test": "vitest run" diff --git a/toolbar/custom.d.ts b/toolbar/src/SvgModule.d.ts similarity index 100% rename from toolbar/custom.d.ts rename to toolbar/src/SvgModule.d.ts diff --git a/toolbar/src/api/toolbar-interface.ts b/toolbar/src/api/toolbar-interface.ts index d00c0ae048..e0d72dbcd3 100644 --- a/toolbar/src/api/toolbar-interface.ts +++ b/toolbar/src/api/toolbar-interface.ts @@ -1,8 +1,8 @@ -import { Row, Statement } from 'electric-sql/util' +import { Row, Statement, ConnectivityState } from 'electric-sql/util' export interface ToolbarInterface { getSatelliteNames(): string[] - getSatelliteStatus(name: string): string + getSatelliteStatus(name: string): ConnectivityState | 'Not found' resetDB(dbName: string): void queryDB(dbName: string, statement: Statement): Promise } diff --git a/toolbar/src/api/toolbar-typescript.ts b/toolbar/src/api/toolbar-typescript.ts index 3e5862995e..670b3cb3dc 100644 --- a/toolbar/src/api/toolbar-typescript.ts +++ b/toolbar/src/api/toolbar-typescript.ts @@ -31,6 +31,6 @@ export class ToolbarTypescript implements ToolbarInterface { queryDB(dbName: string, statement: Statement): Promise { const sat = this.globalRegistry.satellites[dbName] - return sat?.adapter.query(statement) ?? Promise.resolve([]) + return sat?.adapter.query(statement) ?? Promise.reject("Couldn't query satellite") } } diff --git a/toolbar/src/index.tsx b/toolbar/src/index.tsx index 0b914283af..e21d6517e5 100644 --- a/toolbar/src/index.tsx +++ b/toolbar/src/index.tsx @@ -16,13 +16,16 @@ export type ToolbarProps = { function ElectricToolbar({ api }: ToolbarProps) { const [hidden, setHidden] = useState(true) - const [dbNames, setDbNames] = useState(['']) - const [dbName, setDbName] = useState('') + const [dbNames, setDbNames] = useState([""]) + const [dbName, setDbName] = useState("") useEffect(() => { let names = api.getSatelliteNames() setDbNames(names) - setDbName(names[0]) + if (names.length > 0){ + setDbName(names[0]) + } + }, []) function handleClick() { diff --git a/toolbar/src/tabs.tsx b/toolbar/src/tabs.tsx index 6173884495..b9af930d51 100644 --- a/toolbar/src/tabs.tsx +++ b/toolbar/src/tabs.tsx @@ -5,25 +5,23 @@ import SQLTab from './tabs/SQLTab' import StatusTab from './tabs/StatusTab' import { ToolbarInterface } from './api/toolbar-interface' + + function TabItem( - label: string, - name: 'status' | 'db' | 'sql', - handleClick: ( - e: React.MouseEvent, + label: string, + name: 'status' | 'db' | 'sql', + handleClick: ( name: 'status' | 'db' | 'sql', + e: React.MouseEvent, ) => void, - active: string, + active: string, ): JSX.Element { - function click(e: React.MouseEvent) { - handleClick(e, name) - } - const className = active == name ? 'Toolbar-tab-item Toolbar-tab-item-active' : 'Toolbar-tab-item' return ( -
  • +
  • {label}
    • ) @@ -40,16 +38,14 @@ export default function ToolbarTabs({ }: ToolbarTabsProps): JSX.Element { const [active, setActive] = useState<'status' | 'db' | 'sql'>('status') function handleClick( - _e: React.MouseEvent, name: 'status' | 'db' | 'sql', + _e: React.MouseEvent, ) { setActive(name) } function renderComp() { switch (active) { - case 'status': - return case 'db': return case 'sql': diff --git a/toolbar/src/tabs/SQLTab.tsx b/toolbar/src/tabs/SQLTab.tsx index e60a9dbb8c..ab3f92df87 100644 --- a/toolbar/src/tabs/SQLTab.tsx +++ b/toolbar/src/tabs/SQLTab.tsx @@ -1,135 +1,140 @@ -import React, { useState } from 'react' -import { UnControlled as CodeMirror } from 'react-codemirror2' +import React, {useState} from 'react' +import {UnControlled as CodeMirror} from 'react-codemirror2' import 'codemirror/lib/codemirror.css' import 'codemirror/theme/material.css' import 'codemirror/mode/sql/sql' -import { ToolbarTabsProps } from '../tabs' +import {ToolbarTabsProps} from '../tabs' import './mirror.css' -export default function SQLTab({ dbName, api }: ToolbarTabsProps): JSX.Element { - const [code, setCode] = useState( - 'SELECT name FROM sqlite_schema\n' + - "WHERE type='table'\n" + - 'ORDER BY name; ', - ) - const [response, setResponse] = useState('') - const [history, setHistory] = useState('') - const [active, setActive] = useState('query') +export default function SQLTab({dbName, api}: ToolbarTabsProps): JSX.Element { + const [code, setCode] = useState( + 'SELECT name FROM sqlite_schema\n' + + "WHERE type='table'\n" + + 'ORDER BY name; ', + ) + const [response, setResponse] = useState('') + const [history, setHistory] = useState('') + const [active, setActive] = useState('query') - function submitSQL() { - let cmd = code - setHistory(history + code + '\n\n') - api.queryDB(dbName, { sql: cmd }).then((rows) => { - setResponse(JSON.stringify(rows, null, 4)) - }) - } - - function clearResults() { - setResponse('') - } + function submitSQL() { + let cmd = code + setHistory(history + code + '\n\n') + api.queryDB(dbName, {sql: cmd}).then((rows) => { + setResponse(JSON.stringify(rows, null, 4)) + }, + (err) => { + setResponse("Error: " + err) + }) + } - function clearHistory() { - setHistory('') - } + function clearHistory() { + setHistory('') + } - function switchInput() { - switch (active) { - case 'query': + function renderQuery() { return ( -
    -
    - query - { - setActive('history') - }} - > +
    +
    + query + history +
    +
    + { + setCode(value) + }} + options={{ + tabSize: 4, + mode: 'sql', + theme: 'material', + lineNumbers: true, + }} + /> +
    +
    + +
    -
    - { - setCode(value) - }} - options={{ - tabSize: 2, - mode: 'sql', - theme: 'material', - lineNumbers: true, - }} - /> -
    -
    - -
    -
    ) - case 'history': + } + + function renderHistory() { return ( -
    -
    +
    +
    { - setActive('query') - }} + className="header-span header-span-button" + onClick={setActive.bind(null, 'query')} > query - history -
    -
    - {}} - options={{ - readOnly: true, - tabSize: 2, - mode: 'sql', - theme: 'material', - lineNumbers: false, - }} - /> + history +
    +
    + { + }} + options={{ + readOnly: true, + tabSize: 4, + mode: 'sql', + theme: 'material', + lineNumbers: false, + }} + /> +
    +
    + +
    -
    - -
    -
    ) - default: - return
    } - } - return ( -
    - {switchInput()} -
    -
    results
    -
    - {}} - options={{ - readOnly: true, - tabSize: 2, - mode: 'json', - theme: 'material', - }} - /> -
    -
    - + function switchInput() { + switch (active) { + case 'query': + return renderQuery() + case 'history': + return renderHistory() + default: + return
    + } + } + + return ( +
    + {switchInput()} +
    +
    results
    +
    + { + }} + options={{ + readOnly: true, + tabSize: 4, + mode: 'json', + theme: 'material', + }} + /> +
    +
    + +
    +
    -
    -
    - ) + ) } diff --git a/toolbar/src/tabs/StatusTab.tsx b/toolbar/src/tabs/StatusTab.tsx index 160a0c413d..b31df85e72 100644 --- a/toolbar/src/tabs/StatusTab.tsx +++ b/toolbar/src/tabs/StatusTab.tsx @@ -8,9 +8,7 @@ export default function StatusTab({ const [status, setStatus] = useState('') useEffect(() => { - if (dbName !== undefined) { - setStatus(api.getSatelliteStatus(dbName)) - } + setStatus(api.getSatelliteStatus(dbName)) }, []) return ( diff --git a/toolbar/test/api.test.ts b/toolbar/test/api.test.ts index ab441c8020..2f642b28de 100644 --- a/toolbar/test/api.test.ts +++ b/toolbar/test/api.test.ts @@ -4,7 +4,7 @@ import browserEnv from '@ikscodes/browser-env' browserEnv() import { DatabaseAdapter } from 'electric-sql/react-native' -import { MockRegistry } from 'electric-sql/satellite/mock' +import { MockRegistry } from 'electric-sql/satellite' import { Migrator } from 'electric-sql/migrators' import { ElectricConfig } from 'electric-sql/config' import { SocketFactory } from 'electric-sql/sockets' diff --git a/toolbar/tsconfig.json b/toolbar/tsconfig.json index 5f1795af85..a3413e39e1 100644 --- a/toolbar/tsconfig.json +++ b/toolbar/tsconfig.json @@ -23,5 +23,5 @@ "strict": true, // Enable all strict type checking options "target": "ESNext" // Specify ECMAScript target version }, - "include": ["src/*", "custom.d.ts"] + "include": ["src/*"] } diff --git a/toolbar/util.ts b/toolbar/util.ts new file mode 100644 index 0000000000..2aff0d08f4 --- /dev/null +++ b/toolbar/util.ts @@ -0,0 +1,10 @@ +export function addToolbar() { + import ('@electric-sql/debug-toolbar').then(toolbar => { + import ('electric-sql/satellite').then(satellite => { + import ('@electric-sql/debug-toolbar/dist/index.cjs.css').then(_ => { + toolbar.default(toolbar.clientApi(satellite.globalRegistry)) + }) + }); + }); +} +