Theme maker 2002
Ok, I've decided to go much faster and not make this that long, so...
picking up where we left off...
this is what my src looks like right now:
src/
| - modules/
| - | - html.js
| - | - inputs.js
| - | - output.js
| - | - stateMachine.js
| - | - tools.js
| - styles/
| - | - tools.css
| - | - output.css
| - | - thebutton.css
| - index.js
html.js
This is just a tagged template function that takes in a tagged template and returns a DocumentFragment with the string provided as the innerHTML
stateMachine.js
This is a simple state machine implementation, you'll see how I'm using it later. Made following Kent C Dodds implementation
tools.js
This will contain the code to add the inputs that will tweak our button's properties.
inputs.js
Here we basically export to arrays that will then be added to the tools and render an input.
output.js
This will contain the code to show the button's properties so that you can copy them.
styles
This folder is pretty self explanatory, I wanted to modularize the styles, since we are using snowpack, we can later add them to the corresponding *.js files.
index.js
We'll here is where we merge everything, we will use the state machine to toggle between the two states we have, tools & output, and we will have a function that on every transition checks which fragment of the app should be rendered, kinda like a router but with a state machine.
And that's it! We are done, 100% custom made, with the help of snowpack š
Remember to check the code out at https://github.com/jenaro94/theme-maker-2000
Stuff cool to add:
- More properties on the button
- On hover properties
- HTMLElement tag name agnostic