├── .gitignore
├── README.md
├── biome.json
├── example
├── index.html
├── main.e2e.js
└── main.js
├── hiw.webp
├── package-lock.json
├── package.json
├── playwright.config.js
├── src
├── index.js
└── index.test.js
└── vite.config.js
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
26 | docs/.vitepress/dist
27 | docs/.vitepress/dist
28 | coverage
29 | /test-results/
30 | /playwright-report/
31 | /blob-report/
32 | /playwright/.cache/
33 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## 📌 Nho
2 |
3 | Nho (`nhỏ` | `small` in `Vietnamese`) is a tiny library designed for easy Web Component development.
4 |
5 | ### Why Nho?
6 |
7 | - Writing a Web Component (WC) using vanilla JavaScript can be such tedious. Alternatively, popular WC libraries can be overkill and overweighted (4KB+) for creating small components like a `"Buy now" button` or a `cart listing`.
8 |
9 | - `Nho` simplifies the process by staying lightweight, removing unnecessary APIs, and using a simple DOM diffing algorithm.
10 |
11 | ### Features
12 |
13 | - `1.3KB` gzipped.
14 | - Simple API inspired from `Vue`.
15 |
16 |
17 | ### Example
18 | - [album list](https://nho-example.netlify.app/) - [source](./example)
19 |
20 | ### Limitation
21 |
22 | - In order to stay small, `Nho` skips few advanced features found in popular front-end frameworks like `key`, `Fragments`, `memo`. The DOM diffing algorithm is somewhat basic, but it is fast enough for small projects. If your components become too complex, consider other options.
23 |
24 | ### Installation
25 |
26 | #### using `npm`
27 | First, run
28 |
29 | ```
30 | npm install nho
31 | ```
32 |
33 | then
34 | ```js
35 | import { Nho } from 'nho';
36 | class MyCounterChild extends Nho {}
37 | ```
38 |
39 |
40 | #### using `CDN`
41 | First, add `script` to the `html` file
42 | ```html
43 |
44 | ```
45 |
46 | then, add `script` to the `html` file
47 |
48 | ```html
49 |
53 | ```
54 |
55 | ### Usage
56 |
57 | ```js
58 | /* main.js */
59 |
60 | /* declare global style. Styles will be injected to all Nho Elements */
61 | Nho.style = `
62 | .box {
63 | background: blue;
64 | color: yellow;
65 | }
66 | `
67 |
68 | class MyCounterChild extends Nho {
69 | render(h) {
70 | /* bind value from props */
71 | return h`Child: ${this.props.count}
`
72 | }
73 | }
74 |
75 | class MyCounter extends Nho {
76 | setup() {
77 | /* this method runs before mount */
78 |
79 | /* create component state using "this.reactive", state must be an object */
80 | this.state = this.reactive({ count: 1 });
81 |
82 | /* only use ref for storing DOM reference */
83 | this.pRef = this.ref();
84 |
85 | /* effect */
86 | this.effect(
87 | // effect value: fn -> value
88 | () => this.state.count,
89 | // effect callback: fn(old value, new value)
90 | (oldValue, newValue) => {
91 | console.log(oldValue, newValue)
92 | }
93 | )
94 | }
95 |
96 | onMounted() {
97 | /* this method runs after mount */
98 | console.log('Mounted');
99 | }
100 |
101 | onUpdated() {
102 | /* this method runs after each update. */
103 | console.log('Updated');
104 |
105 | /* P tag ref */
106 | console.log('P Ref', this.pRef?.current);
107 | }
108 |
109 | onUnmounted() {
110 | /* this method runs before unmount */
111 | console.log('Before unmount');
112 | }
113 |
114 | addCount() {
115 | /* update state by redeclaring its key-value. Avoid updating the whole state. */
116 | this.state.count += 1;
117 | }
118 |
119 | render(h) {
120 | /* this method is used to render */
121 |
122 | /*
123 | JSX template alike
124 | - Must have only 1 root element
125 | - Bind state / event using value in literal string
126 | - Pass state to child element using props with 'p:' prefix
127 | */
128 | return h`
129 |
130 |
Name: ${this.state.count}
131 |
132 |
133 |
95 |
96 |
97 |
Album ${this.props.album[0].albumId} images
98 |
99 |
100 |
101 | ${this.props.album.map(
102 | (img) => h`
103 |
104 |
105 |
${img.title}
106 |
107 | `,
108 | )}
109 |
110 |
111 |
120 |
121 |
${this.props.title}
122 |
fetching albums...
`;
175 | if (!this.state.albums.length) return h`no albums found
`;
176 |
177 | return h`
178 |
179 |
Albums
180 |
185 |
186 | ${this.matchedAlbums().map(
187 | (album) => h`
this.viewAlbum(album.id)}>`,
188 | )}
189 |
190 | ${
191 | this.state.selectedAlbum
192 | ? h`
`
193 | : ""
194 | }
195 |
${this.props.count}
`;
10 | }
11 | }
12 |
13 | class ParentElement extends Nho {
14 | setup() {
15 | this.state = this.reactive({ count: 1 });
16 | }
17 |
18 | increase() {
19 | this.state.count++;
20 | }
21 |
22 | render(h) {
23 | return h`
24 |
25 |
Count: ${this.state.count}
26 |
27 | ${Array.from(Array(this.state.count), (_, index) => index + 1).map(
28 | (v) => h`
`,
29 | )}
30 |