Skip to content

Commit 4dbec25

Browse files
hi-ogawahi-ogawa
authored
feat: create tiny-react (#144)
1 parent a93f919 commit 4dbec25

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+4563
-110
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
node_modules
22
dist
3+
.vercel

‎.prettierignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,4 @@ pnpm-lock.yaml
44
pkg
55
target
66
fixtures
7+
.vercel

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
"@hiogawa/utils-node": "workspace:*",
2727
"@playwright/test": "^1.39.0",
2828
"@tsconfig/strictest": "^2.0.1",
29+
"@types/node": "^20.8.6",
2930
"esbuild": "^0.18.10",
3031
"prettier": "^2.8.8",
3132
"tsup": "^7.1.0",

‎packages/tiny-react/README.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# tiny-react
2+
3+
Experiment to study react-like virtual-dom rendering implementation.
4+
5+
Internal architecture is inspired by [yew](https://github.com/yewstack/yew) and [preact](https://github.com/preactjs/preact).
6+
7+
## features
8+
9+
- client side rendering
10+
- functional component
11+
- hooks
12+
- jsx-runtime (similar typescript DX as react)
13+
- HMR (via [`tiny-refresh`](https://github.com/hi-ogawa/js-utils/blob/a93f919c083c3ab0f505f1179124397c8f8f1b0d/packages/tiny-refresh/README.md))
14+
15+
## unsupported
16+
17+
- ssr https://github.com/hi-ogawa/js-utils/pull/150
18+
- context https://github.com/hi-ogawa/js-utils/pull/151
19+
- suspense
20+
- error boundary
21+
- forwardRef
22+
- portal
23+
- dangerouslySetInnerHTML
24+
- mutable ref
25+
- defaultValue
26+
- onChange
27+
- svg
28+
- ...
29+
30+
## example
31+
32+
See example app in `./examples/basic`
33+
34+
- https://tiny-react-hiro18181.vercel.app
35+
36+
## links
37+
38+
- https://github.com/preactjs/preact
39+
- https://github.com/snabbdom/snabbdom
40+
- https://github.com/yewstack/yew
41+
- https://github.com/DioxusLabs/dioxus

‎packages/tiny-react/examples/basic/README.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# tiny-react example
2+
3+
https://tiny-react-hiro18181.vercel.app
4+
5+
playground for integration test
6+
7+
```sh
8+
# deploy
9+
pnpm build
10+
pnpm release-production
11+
```

‎packages/tiny-react/examples/basic/e2e/basic.test.ts‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { test } from "@playwright/test";
2+
3+
test("basic", async ({ page }) => {
4+
await page.goto("/");
5+
6+
// test input state
7+
await page.getByText('debug: {"values":["0","1","2"]}').click();
8+
await page.getByLabel("input (0)").fill("123");
9+
await page.getByText('debug: {"values":["123","1","2"]}').click();
10+
await page.getByLabel("input (2)").fill("456");
11+
await page.getByText('debug: {"values":["123","1","456"]}').click();
12+
await page.getByLabel("input (1)").fill("");
13+
await page.getByText('debug: {"values":["123","","456"]}').click();
14+
15+
// TestSetStateInEffect
16+
await page.getByText('{"state":0,"state2":0,"render":1}').click();
17+
await page
18+
.getByTestId("TestSetStateInEffect")
19+
.getByRole("button", { name: "+1" })
20+
.click();
21+
await page
22+
.getByTestId("TestSetStateInEffect")
23+
.getByRole("button", { name: "+1" })
24+
.click();
25+
await page.getByText('{"state":2,"state2":4,"render":5}').click();
26+
await page
27+
.getByTestId("TestSetStateInEffect")
28+
.getByRole("button", { name: "-1" })
29+
.click();
30+
await page
31+
.getByTestId("TestSetStateInEffect")
32+
.getByRole("button", { name: "-1" })
33+
.click();
34+
await page.getByText('{"state":0,"state2":0,"render":9}').click();
35+
await page
36+
.getByTestId("TestSetStateInEffect")
37+
.getByRole("button", { name: "-1" })
38+
.click();
39+
await page.getByText('{"state":-1,"state2":-2,"render":11}').click();
40+
});

‎packages/tiny-react/examples/basic/index.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>tiny-react</title>
6+
<meta
7+
name="viewport"
8+
content="width=device-width, height=device-height, initial-scale=1.0"
9+
/>
10+
<link
11+
rel="icon"
12+
type="image/svg+xml"
13+
href="https://iconify-dark-hiro18181.vercel.app/icon/ri/code-s-slash-line"
14+
/>
15+
<style>
16+
html,
17+
body,
18+
#root {
19+
height: 100%;
20+
}
21+
</style>
22+
</head>
23+
<body>
24+
<div id="root"></div>
25+
<script type="module" src="./src/index.tsx"></script>
26+
</body>
27+
</html>

‎packages/tiny-react/examples/basic/misc/vercel/README.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# vercel
2+
3+
misc files for manual vercel static deployment
4+
5+
```sh
6+
# initial project setup
7+
vercel projects add tiny-react-hiro18181
8+
vercel link -p tiny-react-hiro18181
9+
```

‎packages/tiny-react/examples/basic/misc/vercel/build.sh‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
#!/bin/bash
2+
set -eu -o pipefail
3+
4+
rm -rf .vercel/output
5+
mkdir -p .vercel/output
6+
cp -r dist/vite .vercel/output/static
7+
cp misc/vercel/config.json .vercel/output

‎packages/tiny-react/examples/basic/misc/vercel/config.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"version": 3,
3+
"routes": [
4+
{
5+
"src": "^/assets/(.*)$",
6+
"headers": {
7+
"cache-control": "public, immutable, max-age=31536000"
8+
}
9+
},
10+
{
11+
"handle": "filesystem"
12+
}
13+
]
14+
}

0 commit comments

Comments
 (0)