Wok.js NPM | npm.io

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

and then invoke them using dot notation.

// on elements inside the wok select('h1').on('click', () => { console.log('h1 was clicked!'); });

</details>
  
  
  
<details>
<summary>You can add your woks programically to the DOM</summary>

```js
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('death', () => { console.log('wok died!'); });

</details>



<details>
<summary>Syntax (either can be used)</summary>

.on --> .addEventListener

.off --> .removeEventListener

select --> document.querySelector

selectAll --> document.querySelectorAll

createElement --> document.createElement

</details>  



### `<example-wok>` is responsible for structure

<details>
<summary>You can render reactive props using the interpolation syntax ${_nameOfmyProp}</summary>

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