wok.js
Minimalist component framework instead of Angular, React, Vue, Solid, Svelte, Lit
npm install -g wok.js installs the package globally
wokproj creates a wok.js project (Win11: Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy Unrestricted)
wok somename creates a new wok
fry starts your wok.js application
how to use
In the _woks folder there are your custom reusable components.
In the _build folder the parsed code resides, you can deploy it as you would deploy a vanilla project.
<script> is responsible for behaviour and state
You can initialize reactive properties using '_'
<script>
let _x;
let _y = 10 * _x;
let _title;
</script>
and then modify them dynamically with html
or with js.
You can define methods using '_'
and then invoke them using dot notation.
You can define event listeners on any element of your wok using '.on' or '.addEventListener'
// on the wok itself
this.on('click', () => { // or select('example-wok').on
console.log("wok was clicked!");
});
// on elements inside the wok
select('h1').on('click', () => {
console.log('h1 was clicked!');
});
You can add your woks programically to the DOM
const w = createElement('example-wok'); // or document.createElement('example-wok');
select('body').appendChild(w); // or document.body.appendChild(w);
select('example-wok').remove(); // or w.remove();
You can define lifecycle events using 'born' or 'death' as arguments
select('example-wok').on('born', () => {
console.log('wok was born!');
_greet();
});
select('example-wok').on('death', () => {
console.log('wok died!');
});
Syntax (either can be used)
.on --> .addEventListener
.off --> .removeEventListener
select --> document.querySelector
selectAll --> document.querySelectorAll
createElement --> document.createElement
<example-wok> is responsible for structure
You can render reactive props using the interpolation syntax ${_nameOfmyProp}
<example-wok>
<lu>
<li>${_x}</li>
<li>${_y}</li>
<li>${_x / _y}</li>
</lu>
</example-wok>
You can nest other woks inside your wok
<example-wok>
<nested-wok title=${_myTitle}></nested-wok>
</example-wok>
<style> is responsible for appearance
You can render reactive props using the interpolation syntax ${_nameOfmyProp}
<style>
example-wok {
display: block;
border: solid 2px black;
}
h1 {
color: ${_color};
};
</style>
todo
✔ rebuild the component on save, so we don't have to 'npm run fry' every time, we make a change
✔ rebuild when save happens in regural html files too (not only in woks)
✔ find a way to shorten the command which creates a new wok, beacuse 'npm run wok wokname' is too long
? find a way to achieve highlighting in the css part of the wok, and override linting errors
? find a way to run the app from memory, and only build it when we want to deploy it
? templating language
? >selectors> for wok inner elements
? attrs as parameters in createElement()
? live-server should send refresh msg to the websocket only once after code parsing
Top categories
Want a Svelte site built?
Hire a Svelte developer