DEV-183 Dev Toolbar#848
Conversation
| "url": "git+ssh://git@github.com/SchematicHQ/schematic-js.git" | ||
| }, | ||
| "scripts": { | ||
| "dev": "npx esbuild src/index.ts --bundle --format=esm --outfile=dist/schematic.esm.js --watch", |
There was a problem hiding this comment.
quality of life for dev. build:esm script + -- watch to auto build as you dev. currently, it still requires a manual yarn build in the react folder to actually get a fully built library for local react dev, but this saves some time
There was a problem hiding this comment.
Overall this looks pretty great. My only question to pose is if this may be better served as a separate package. Otherwise, there are a decent number of shared types resulting in some code duplication; we could maybe export shared types to resolve this.
| @@ -0,0 +1,361 @@ | |||
| import { CheckFlagReturn } from "./types"; | |||
There was a problem hiding this comment.
@tenub I think I am pulling in the our types, right?
The types below are just specific to the toolbar (and claude's createElement which I'm ¯_(ツ)_/¯ on, but works)
… table (#847) * Add debug if public api key isn't included when using pricing table * fix react hook issue * another fix for this react hook issue * Always warn if api key isn't passed
GitHub ref: refs/heads/main GitHub repo: SchematicHQ/schematic-api Git SHA: 9ff40d2dfea3c89ce5eed99bbcfab92c85f23efc Co-authored-by: Benjamin Papillon <benpapillon@gmail.com>
|
🚀 Components Preview Deployed! 📍 Preview URL: https://schematic-next-example-kvbof97zs-schematichq.vercel.app |
ryanechternacht
force-pushed
the
toolbar
branch
from
aa4e98c to
23a486e
Compare
|
🚀 Components Preview Deployed! 📍 Preview URL: https://schematic-next-example-lw50ck5rk-schematichq.vercel.app |
|
i did something wrong with rebase. checkout #852 instead |
3 participants
https://linear.app/schematic/issue/DEV-183/add-a-dev-toolbar
https://www.loom.com/share/47adb5985bcc4143b753027beb66e09b
this was a bit of flyer that I (and claude) whipped up. I added a dev toolbar to the core js repo that can be enabled in either js, react, or vue sdks. the one downside of this is that I'm using vanilla js to create/control the toolbar, which is a bit verbose and annoying to read. I refactored the whole toolbar out to it's own file and tried to keep the "logical" parts of the toolbar separate from the "html generation" parts for readability.
currently, the toolbar lets you manually set flag values (either true/false) to simplify testing.
moving forward, I envision 2 big additions
useSchematicPlanhook (requiresuseSchematicPlanhook)also, the styling on this is quite simple. happy to edit as we see fit.