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

<script>
    let _x;
    let _y = 10 * _x;
    let _title;
</script>

and then modify them dynamically with html

or with js.

and then invoke them using dot notation.

// 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!');
});

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();

select('example-wok').on('born', () => {
    console.log('wok was born!');
    _greet();
});

select('example-wok').on('death', () => {
    console.log('wok died!');
});

.on           --> .addEventListener

.off          --> .removeEventListener

select        --> document.querySelector

selectAll     --> document.querySelectorAll

createElement --> document.createElement

<example-wok> is responsible for structure

<example-wok>
    <lu>
        <li>${_x}</li>
        <li>${_y}</li>
        <li>${_x / _y}</li>
    </lu>
</example-wok>

<example-wok>
    <nested-wok title=${_myTitle}></nested-wok>
</example-wok>

<style> is responsible for appearance

<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