create-esmx 3.0.0-rc.117 โ 3.0.0-rc.118
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +37 -12
- package/README.zh-CN.md +37 -12
- package/package.json +14 -8
- package/template/react-csr/package.json +15 -7
- package/template/react-csr/src/app.css +147 -70
- package/template/react-csr/src/app.tsx +8 -35
- package/template/react-csr/src/components/hello-world.tsx +51 -21
- package/template/react-csr/src/entry.node.ts +0 -3
- package/template/react-ssr/package.json +10 -5
- package/template/react-ssr/src/app.css +147 -70
- package/template/react-ssr/src/app.tsx +8 -35
- package/template/react-ssr/src/components/hello-world.tsx +52 -21
- package/template/react-ssr/src/entry.node.ts +0 -3
- package/template/shared-modules/README.md +1 -1
- package/template/shared-modules/package.json +16 -0
- package/template/shared-modules/src/entry.node.ts +0 -39
- package/template/shared-modules/src/vue2/index.ts +4 -1
- package/template/vue-csr/package.json +10 -1
- package/template/vue-csr/src/app.vue +113 -106
- package/template/vue-csr/src/components/hello-world.vue +32 -69
- package/template/vue-csr/src/entry.node.ts +0 -3
- package/template/vue-ssr/package.json +10 -1
- package/template/vue-ssr/src/app.vue +113 -106
- package/template/vue-ssr/src/components/hello-world.vue +34 -69
- package/template/vue-ssr/src/entry.node.ts +0 -3
- package/template/vue2-csr/package.json +10 -1
- package/template/vue2-csr/src/app.vue +113 -106
- package/template/vue2-csr/src/components/hello-world.vue +32 -69
- package/template/vue2-csr/src/entry.node.ts +0 -3
- package/template/vue2-ssr/package.json +10 -1
- package/template/vue2-ssr/src/app.vue +113 -106
- package/template/vue2-ssr/src/components/hello-world.vue +34 -69
- package/template/vue2-ssr/src/entry.node.ts +0 -3
- package/template/react-csr/src/components/hello-world.css +0 -48
- package/template/react-ssr/src/components/hello-world.css +0 -48
package/README.md
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
<img src="https://img.shields.io/badge/coverage-live%20report-brightgreen" alt="Coverage Report" />
|
|
14
14
|
</a>
|
|
15
15
|
<a href="https://nodejs.org/">
|
|
16
|
-
<img src="https://img.shields.io/node/v
|
|
16
|
+
<img src="https://img.shields.io/node/v/create-esmx.svg" alt="node version" />
|
|
17
17
|
</a>
|
|
18
18
|
<a href="https://bundlephobia.com/package/create-esmx">
|
|
19
19
|
<img src="https://img.shields.io/bundlephobia/minzip/create-esmx" alt="size" />
|
|
@@ -27,26 +27,51 @@
|
|
|
27
27
|
</p>
|
|
28
28
|
</div>
|
|
29
29
|
|
|
30
|
-
## Features
|
|
30
|
+
## ๐ Features
|
|
31
31
|
|
|
32
|
-
- Interactive command-line interface
|
|
33
|
-
- Support for multiple project templates
|
|
34
|
-
- Complete TypeScript support
|
|
35
|
-
- Automatic project structure
|
|
32
|
+
- **Interactive CLI** - Friendly command-line interactive interface
|
|
33
|
+
- **Multiple Templates** - Support for multiple project templates
|
|
34
|
+
- **TypeScript Support** - Complete TypeScript type support
|
|
35
|
+
- **Automatic Configuration** - Automatic project structure initialization
|
|
36
36
|
|
|
37
|
-
##
|
|
37
|
+
## ๐ฆ Installation
|
|
38
38
|
|
|
39
39
|
```bash
|
|
40
|
-
#
|
|
40
|
+
# npm
|
|
41
41
|
npm create esmx@latest my-project
|
|
42
42
|
|
|
43
|
-
#
|
|
43
|
+
# pnpm
|
|
44
|
+
pnpm create esmx my-project
|
|
45
|
+
|
|
46
|
+
# yarn
|
|
44
47
|
yarn create esmx my-project
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
## ๐ Quick Start
|
|
51
|
+
|
|
52
|
+
```bash
|
|
53
|
+
# Create a new project with interactive prompts
|
|
54
|
+
npm create esmx@latest my-project
|
|
45
55
|
|
|
46
|
-
#
|
|
56
|
+
# Or use pnpm
|
|
47
57
|
pnpm create esmx my-project
|
|
48
58
|
```
|
|
49
59
|
|
|
50
|
-
|
|
60
|
+
Follow the interactive prompts to select:
|
|
61
|
+
- **Project name** - Your project directory name
|
|
62
|
+
- **Template** - Choose from Vue SSR, Vue CSR, React SSR, React CSR, Vue2 SSR, Vue2 CSR, or Shared Modules
|
|
63
|
+
|
|
64
|
+
Then start development:
|
|
65
|
+
```bash
|
|
66
|
+
cd my-project
|
|
67
|
+
pnpm install
|
|
68
|
+
pnpm dev
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
## ๐ Documentation
|
|
72
|
+
|
|
73
|
+
Visit the [official documentation](https://esmx.dev) for detailed usage guides and API references.
|
|
74
|
+
|
|
75
|
+
## ๐ License
|
|
51
76
|
|
|
52
|
-
MIT ยฉ Esmx Team
|
|
77
|
+
MIT ยฉ [Esmx Team](https://github.com/esmnext/esmx)
|
package/README.zh-CN.md
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
<img src="https://img.shields.io/badge/coverage-live%20report-brightgreen" alt="Coverage Report" />
|
|
14
14
|
</a>
|
|
15
15
|
<a href="https://nodejs.org/">
|
|
16
|
-
<img src="https://img.shields.io/node/v
|
|
16
|
+
<img src="https://img.shields.io/node/v/create-esmx.svg" alt="node version" />
|
|
17
17
|
</a>
|
|
18
18
|
<a href="https://bundlephobia.com/package/create-esmx">
|
|
19
19
|
<img src="https://img.shields.io/bundlephobia/minzip/create-esmx" alt="size" />
|
|
@@ -27,26 +27,51 @@
|
|
|
27
27
|
</p>
|
|
28
28
|
</div>
|
|
29
29
|
|
|
30
|
-
##
|
|
30
|
+
## ๐ ็นๆง
|
|
31
31
|
|
|
32
|
-
-
|
|
33
|
-
- ๆฏๆๅค็ง้กน็ฎๆจกๆฟ
|
|
34
|
-
- ๅฎๆด็ TypeScript
|
|
35
|
-
-
|
|
32
|
+
- **ไบคไบๅผ CLI** - ๅๅฅฝ็ๅฝไปค่กไบคไบ็้ข
|
|
33
|
+
- **ๅค็งๆจกๆฟ** - ๆฏๆๅค็ง้กน็ฎๆจกๆฟ
|
|
34
|
+
- **TypeScript ๆฏๆ** - ๅฎๆด็ TypeScript ็ฑปๅๆฏๆ
|
|
35
|
+
- **่ชๅจ้
็ฝฎ** - ่ชๅจๅๅงๅ้กน็ฎ็ปๆ
|
|
36
36
|
|
|
37
|
-
##
|
|
37
|
+
## ๐ฆ ๅฎ่ฃ
|
|
38
38
|
|
|
39
39
|
```bash
|
|
40
|
-
#
|
|
40
|
+
# npm
|
|
41
41
|
npm create esmx@latest my-project
|
|
42
42
|
|
|
43
|
-
#
|
|
43
|
+
# pnpm
|
|
44
|
+
pnpm create esmx my-project
|
|
45
|
+
|
|
46
|
+
# yarn
|
|
44
47
|
yarn create esmx my-project
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
## ๐ ๅฟซ้ๅผๅง
|
|
51
|
+
|
|
52
|
+
```bash
|
|
53
|
+
# ไฝฟ็จไบคไบๅผๆ็คบๅๅปบๆฐ้กน็ฎ
|
|
54
|
+
npm create esmx@latest my-project
|
|
45
55
|
|
|
46
|
-
#
|
|
56
|
+
# ๆไฝฟ็จ pnpm
|
|
47
57
|
pnpm create esmx my-project
|
|
48
58
|
```
|
|
49
59
|
|
|
50
|
-
|
|
60
|
+
ๆ็
งไบคไบๅผๆ็คบ้ๆฉ๏ผ
|
|
61
|
+
- **้กน็ฎๅ็งฐ** - ไฝ ็้กน็ฎ็ฎๅฝๅ็งฐ
|
|
62
|
+
- **ๆจกๆฟ** - ไป Vue SSRใVue CSRใReact SSRใReact CSRใVue2 SSRใVue2 CSR ๆ Shared Modules ไธญ้ๆฉ
|
|
63
|
+
|
|
64
|
+
็ถๅๅผๅงๅผๅ๏ผ
|
|
65
|
+
```bash
|
|
66
|
+
cd my-project
|
|
67
|
+
pnpm install
|
|
68
|
+
pnpm dev
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
## ๐ ๆๆกฃ
|
|
72
|
+
|
|
73
|
+
่ฎฟ้ฎ[ๅฎๆนๆๆกฃ](https://esmx.dev)่ทๅ่ฏฆ็ป็ไฝฟ็จๆๅๅ API ๅ่ใ
|
|
74
|
+
|
|
75
|
+
## ๐ ่ฎธๅฏ่ฏ
|
|
51
76
|
|
|
52
|
-
MIT ยฉ Esmx Team
|
|
77
|
+
MIT ยฉ [Esmx Team](https://github.com/esmnext/esmx)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "create-esmx",
|
|
3
|
-
"version": "3.0.0-rc.
|
|
3
|
+
"version": "3.0.0-rc.118",
|
|
4
4
|
"description": "A scaffold tool for creating Esmx projects",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"private": false,
|
|
@@ -24,16 +24,16 @@
|
|
|
24
24
|
},
|
|
25
25
|
"devDependencies": {
|
|
26
26
|
"@biomejs/biome": "2.3.7",
|
|
27
|
-
"@esmx/core": "3.0.0-rc.
|
|
28
|
-
"@esmx/rspack": "3.0.0-rc.
|
|
29
|
-
"@esmx/rspack-react": "3.0.0-rc.
|
|
30
|
-
"@esmx/rspack-vue": "3.0.0-rc.
|
|
27
|
+
"@esmx/core": "3.0.0-rc.118",
|
|
28
|
+
"@esmx/rspack": "3.0.0-rc.118",
|
|
29
|
+
"@esmx/rspack-react": "3.0.0-rc.118",
|
|
30
|
+
"@esmx/rspack-vue": "3.0.0-rc.118",
|
|
31
31
|
"@types/minimist": "^1.2.5",
|
|
32
32
|
"@types/node": "^24.0.0",
|
|
33
|
-
"@vitest/coverage-v8": "3.2.
|
|
33
|
+
"@vitest/coverage-v8": "3.2.6",
|
|
34
34
|
"typescript": "5.9.3",
|
|
35
35
|
"unbuild": "3.6.1",
|
|
36
|
-
"vitest": "3.2.
|
|
36
|
+
"vitest": "3.2.6",
|
|
37
37
|
"vue": "^3.5.23"
|
|
38
38
|
},
|
|
39
39
|
"exports": {
|
|
@@ -70,6 +70,12 @@
|
|
|
70
70
|
"bugs": {
|
|
71
71
|
"url": "https://github.com/esmnext/esmx/issues"
|
|
72
72
|
},
|
|
73
|
+
"engines": {
|
|
74
|
+
"node": ">=24"
|
|
75
|
+
},
|
|
73
76
|
"homepage": "https://github.com/esmnext/esmx#readme",
|
|
74
|
-
"
|
|
77
|
+
"publishConfig": {
|
|
78
|
+
"access": "public"
|
|
79
|
+
},
|
|
80
|
+
"gitHead": "2fdbd62470f64e6e45568550941c78cb259e4917"
|
|
75
81
|
}
|
|
@@ -1,6 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "{{projectName}}",
|
|
3
3
|
"version": "1.0.0",
|
|
4
|
+
"esmx": {
|
|
5
|
+
"entry": {
|
|
6
|
+
"client": "./src/entry.client.ts",
|
|
7
|
+
"server": "./src/entry.server.tsx"
|
|
8
|
+
},
|
|
9
|
+
"provides": [
|
|
10
|
+
"react"
|
|
11
|
+
]
|
|
12
|
+
},
|
|
4
13
|
"description": "React Client-Side Rendering framework",
|
|
5
14
|
"type": "module",
|
|
6
15
|
"private": true,
|
|
@@ -13,17 +22,16 @@
|
|
|
13
22
|
"build:type": "tsc --declaration --emitDeclarationOnly --outDir dist/src && tsc-alias -p tsconfig.json --outDir dist/src"
|
|
14
23
|
},
|
|
15
24
|
"dependencies": {
|
|
16
|
-
"@esmx/core": "{{esmxVersion}}"
|
|
17
|
-
"react": "^18.0.0",
|
|
18
|
-
"react-dom": "^18.0.0"
|
|
25
|
+
"@esmx/core": "{{esmxVersion}}"
|
|
19
26
|
},
|
|
20
27
|
"devDependencies": {
|
|
21
|
-
"tsc-alias": "^1.8.16",
|
|
22
28
|
"@esmx/rspack-react": "{{esmxVersion}}",
|
|
23
29
|
"@types/node": "^24.0.0",
|
|
24
|
-
"@types/react": "^
|
|
25
|
-
"@types/react-dom": "^
|
|
30
|
+
"@types/react": "^19.2.14",
|
|
31
|
+
"@types/react-dom": "^19.2.1",
|
|
32
|
+
"react": "^19.2.6",
|
|
33
|
+
"react-dom": "^19.2.6",
|
|
34
|
+
"tsc-alias": "^1.8.16",
|
|
26
35
|
"typescript": "5.8.3"
|
|
27
36
|
}
|
|
28
37
|
}
|
|
29
|
-
|
|
@@ -1,98 +1,175 @@
|
|
|
1
|
+
/* Inline token set โ standalone demos own their CSS (the federation-shared
|
|
2
|
+
tokens live in ssr-micro-shared/src/styles/tokens.css for hub demos). */
|
|
1
3
|
:root {
|
|
2
|
-
--esmx-
|
|
3
|
-
--esmx-
|
|
4
|
-
--esmx-
|
|
5
|
-
--esmx-
|
|
6
|
-
--esmx-
|
|
7
|
-
--esmx-
|
|
8
|
-
--
|
|
9
|
-
--
|
|
10
|
-
--
|
|
11
|
-
--
|
|
12
|
-
--
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
4
|
+
--esmx-brand: #0091e2;
|
|
5
|
+
--esmx-bg-canvas: #fdfdfd;
|
|
6
|
+
--esmx-bg-paper: #ffffff;
|
|
7
|
+
--esmx-bg-subtle: #f5f7f9;
|
|
8
|
+
--esmx-border: #e5e9ed;
|
|
9
|
+
--esmx-text-primary: #0c1117;
|
|
10
|
+
--esmx-text-secondary: #5a6473;
|
|
11
|
+
--esmx-text-muted: #8b949e;
|
|
12
|
+
--esmx-fw-react: #149eca;
|
|
13
|
+
--esmx-font-sans: "Inter Variable", system-ui, -apple-system, sans-serif;
|
|
14
|
+
--esmx-font-mono:
|
|
15
|
+
"JetBrains Mono Variable", ui-monospace, "SF Mono", Menlo, monospace;
|
|
16
|
+
}
|
|
17
|
+
@media (prefers-color-scheme: dark) {
|
|
18
|
+
:root {
|
|
19
|
+
--esmx-bg-canvas: #0c1117;
|
|
20
|
+
--esmx-bg-paper: #161b22;
|
|
21
|
+
--esmx-bg-subtle: #1c232c;
|
|
22
|
+
--esmx-border: #30363d;
|
|
23
|
+
--esmx-text-primary: #e6edf3;
|
|
24
|
+
--esmx-text-secondary: #8b949e;
|
|
25
|
+
--esmx-text-muted: #6e7681;
|
|
26
|
+
}
|
|
17
27
|
}
|
|
18
28
|
|
|
29
|
+
* {
|
|
30
|
+
box-sizing: border-box;
|
|
31
|
+
}
|
|
19
32
|
body {
|
|
20
33
|
margin: 0;
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
34
|
+
min-height: 100vh;
|
|
35
|
+
background: var(--esmx-bg-canvas);
|
|
36
|
+
color: var(--esmx-text-primary);
|
|
37
|
+
font-family: var(--esmx-font-sans);
|
|
38
|
+
font-size: 16px;
|
|
24
39
|
line-height: 1.6;
|
|
25
40
|
-webkit-font-smoothing: antialiased;
|
|
26
|
-
-moz-osx-font-smoothing: grayscale;
|
|
27
41
|
}
|
|
28
42
|
|
|
29
|
-
.
|
|
30
|
-
max-width:
|
|
43
|
+
.demo {
|
|
44
|
+
max-width: 960px;
|
|
31
45
|
margin: 0 auto;
|
|
32
|
-
padding:
|
|
33
|
-
text-align: center;
|
|
34
|
-
font-family: var(--font-family);
|
|
46
|
+
padding: 64px 24px;
|
|
35
47
|
}
|
|
36
48
|
|
|
37
|
-
.
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
margin-bottom: 3rem;
|
|
49
|
+
.demo__card {
|
|
50
|
+
background: var(--esmx-bg-paper);
|
|
51
|
+
border: 1px solid var(--esmx-border);
|
|
52
|
+
border-radius: 8px;
|
|
53
|
+
padding: 24px;
|
|
43
54
|
}
|
|
44
55
|
|
|
45
|
-
.
|
|
46
|
-
|
|
47
|
-
|
|
56
|
+
.demo__title {
|
|
57
|
+
margin: 0 0 16px;
|
|
58
|
+
font-size: 2rem;
|
|
59
|
+
font-weight: 600;
|
|
60
|
+
line-height: 1.2;
|
|
48
61
|
}
|
|
49
62
|
|
|
50
|
-
.
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
align-items: center;
|
|
54
|
-
width: 6.5em;
|
|
55
|
-
height: 6.5em;
|
|
56
|
-
border-radius: 12px;
|
|
57
|
-
background-color: var(--bg-card);
|
|
58
|
-
padding: 1em;
|
|
59
|
-
box-shadow: 0 2px 12px var(--shadow-color);
|
|
60
|
-
border: 1px solid var(--border-color);
|
|
61
|
-
transition: all 0.3s ease;
|
|
63
|
+
.demo__message {
|
|
64
|
+
margin: 0 0 24px;
|
|
65
|
+
color: var(--esmx-text-secondary);
|
|
62
66
|
}
|
|
63
67
|
|
|
64
|
-
.
|
|
65
|
-
|
|
66
|
-
|
|
68
|
+
.demo__code {
|
|
69
|
+
background: var(--esmx-bg-subtle);
|
|
70
|
+
border-radius: 6px;
|
|
71
|
+
padding: 16px 20px;
|
|
72
|
+
overflow-x: auto;
|
|
73
|
+
margin: 0 0 16px;
|
|
74
|
+
font-family: var(--esmx-font-mono);
|
|
75
|
+
font-size: 0.875rem;
|
|
76
|
+
line-height: 1.55;
|
|
67
77
|
}
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
height: 100%;
|
|
71
|
-
width: auto;
|
|
72
|
-
transition: transform 0.3s ease;
|
|
78
|
+
.demo__code pre {
|
|
79
|
+
margin: 0;
|
|
73
80
|
}
|
|
74
81
|
|
|
75
|
-
.
|
|
76
|
-
|
|
82
|
+
.demo__stat {
|
|
83
|
+
display: inline-flex;
|
|
84
|
+
flex-direction: column;
|
|
85
|
+
gap: 4px;
|
|
86
|
+
padding: 16px 0;
|
|
77
87
|
}
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
88
|
+
.demo__stat-label {
|
|
89
|
+
font-size: 0.75rem;
|
|
90
|
+
text-transform: uppercase;
|
|
91
|
+
letter-spacing: 0.08em;
|
|
92
|
+
color: var(--esmx-text-muted);
|
|
93
|
+
font-weight: 500;
|
|
94
|
+
}
|
|
95
|
+
.demo__stat-value {
|
|
96
|
+
font-family: var(--esmx-font-mono);
|
|
97
|
+
font-size: 2rem;
|
|
98
|
+
font-weight: 600;
|
|
99
|
+
line-height: 1.2;
|
|
82
100
|
}
|
|
83
101
|
|
|
84
|
-
.
|
|
85
|
-
|
|
86
|
-
|
|
102
|
+
.demo__actions {
|
|
103
|
+
display: flex;
|
|
104
|
+
gap: 8px;
|
|
105
|
+
margin: 8px 0 16px;
|
|
106
|
+
}
|
|
107
|
+
.demo__btn {
|
|
108
|
+
display: inline-flex;
|
|
109
|
+
align-items: center;
|
|
110
|
+
justify-content: center;
|
|
111
|
+
padding: 8px 14px;
|
|
112
|
+
font-family: inherit;
|
|
113
|
+
font-size: 0.875rem;
|
|
114
|
+
font-weight: 500;
|
|
115
|
+
color: var(--esmx-text-primary);
|
|
116
|
+
background: transparent;
|
|
117
|
+
border: 1px solid var(--esmx-border);
|
|
118
|
+
border-radius: 6px;
|
|
119
|
+
cursor: pointer;
|
|
120
|
+
transition: background 100ms;
|
|
121
|
+
}
|
|
122
|
+
.demo__btn:hover {
|
|
123
|
+
background: var(--esmx-bg-subtle);
|
|
124
|
+
}
|
|
125
|
+
.demo__btn--primary {
|
|
126
|
+
color: #fff;
|
|
127
|
+
background: var(--esmx-brand);
|
|
128
|
+
border-color: var(--esmx-brand);
|
|
129
|
+
}
|
|
130
|
+
.demo__btn--primary:hover {
|
|
131
|
+
background: #0079bd;
|
|
132
|
+
border-color: #0079bd;
|
|
87
133
|
}
|
|
88
134
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
135
|
+
.demo__tags {
|
|
136
|
+
display: flex;
|
|
137
|
+
flex-wrap: wrap;
|
|
138
|
+
gap: 8px;
|
|
139
|
+
margin-top: 16px;
|
|
140
|
+
}
|
|
141
|
+
.demo__badge {
|
|
142
|
+
display: inline-flex;
|
|
143
|
+
align-items: center;
|
|
144
|
+
gap: 4px;
|
|
145
|
+
padding: 2px 8px;
|
|
146
|
+
font-family: var(--esmx-font-mono);
|
|
147
|
+
font-size: 0.75rem;
|
|
148
|
+
color: var(--esmx-text-secondary);
|
|
149
|
+
border: 1px solid var(--esmx-border);
|
|
150
|
+
border-radius: 9999px;
|
|
151
|
+
}
|
|
152
|
+
.demo__badge--react {
|
|
153
|
+
color: var(--esmx-fw-react);
|
|
154
|
+
border-color: var(--esmx-fw-react);
|
|
155
|
+
}
|
|
156
|
+
.demo__dot {
|
|
157
|
+
display: inline-block;
|
|
158
|
+
width: 8px;
|
|
159
|
+
height: 8px;
|
|
160
|
+
border-radius: 9999px;
|
|
161
|
+
background: var(--esmx-text-muted);
|
|
162
|
+
}
|
|
163
|
+
.demo__dot--react {
|
|
164
|
+
background: var(--esmx-fw-react);
|
|
165
|
+
}
|
|
93
166
|
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
167
|
+
.demo__source {
|
|
168
|
+
margin-top: 16px;
|
|
169
|
+
color: var(--esmx-text-muted);
|
|
170
|
+
font-size: 0.875rem;
|
|
171
|
+
}
|
|
172
|
+
.demo__source code {
|
|
173
|
+
font-family: var(--esmx-font-mono);
|
|
174
|
+
font-size: 0.75rem;
|
|
98
175
|
}
|
|
@@ -2,41 +2,14 @@ import HelloWorld from './components/hello-world';
|
|
|
2
2
|
import './app.css';
|
|
3
3
|
|
|
4
4
|
export default function App() {
|
|
5
|
-
const title = 'React CSR Demo';
|
|
6
|
-
|
|
7
5
|
return (
|
|
8
|
-
<
|
|
9
|
-
<
|
|
10
|
-
<
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
<div className="logo-wrapper esmx">
|
|
17
|
-
<img
|
|
18
|
-
src="https://esmx.dev/logo.svg"
|
|
19
|
-
className="logo"
|
|
20
|
-
alt="Esmx logo"
|
|
21
|
-
/>
|
|
22
|
-
</div>
|
|
23
|
-
</a>
|
|
24
|
-
<a
|
|
25
|
-
href="https://react.dev/"
|
|
26
|
-
target="_blank"
|
|
27
|
-
rel="noopener noreferrer"
|
|
28
|
-
className="logo-link"
|
|
29
|
-
>
|
|
30
|
-
<div className="logo-wrapper react">
|
|
31
|
-
<img
|
|
32
|
-
src="https://react.dev/favicon-192x192.png"
|
|
33
|
-
className="logo"
|
|
34
|
-
alt="React logo"
|
|
35
|
-
/>
|
|
36
|
-
</div>
|
|
37
|
-
</a>
|
|
38
|
-
</div>
|
|
39
|
-
<HelloWorld msg={title} />
|
|
40
|
-
</div>
|
|
6
|
+
<main className="demo">
|
|
7
|
+
<article className="demo__card">
|
|
8
|
+
<HelloWorld />
|
|
9
|
+
<p className="demo__source">
|
|
10
|
+
source ยท <code>src/app.tsx</code>
|
|
11
|
+
</p>
|
|
12
|
+
</article>
|
|
13
|
+
</main>
|
|
41
14
|
);
|
|
42
15
|
}
|
|
@@ -1,31 +1,61 @@
|
|
|
1
1
|
import { useState } from 'react';
|
|
2
|
-
import './hello-world.css';
|
|
3
2
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
3
|
+
const SOURCE_SNIPPET = `import { useState } from 'react'
|
|
4
|
+
|
|
5
|
+
export default function HelloWorld() {
|
|
6
|
+
const [count, setCount] = useState(0)
|
|
7
|
+
return (
|
|
8
|
+
<>
|
|
9
|
+
<p>Count: {count}</p>
|
|
10
|
+
<button onClick={() => setCount(c => c + 1)}>+</button>
|
|
11
|
+
<button onClick={() => setCount(c => c - 1)}>โ</button>
|
|
12
|
+
</>
|
|
13
|
+
)
|
|
14
|
+
}`;
|
|
7
15
|
|
|
8
|
-
export default function HelloWorld(
|
|
16
|
+
export default function HelloWorld() {
|
|
9
17
|
const [count, setCount] = useState<number>(0);
|
|
10
18
|
|
|
11
19
|
return (
|
|
12
|
-
|
|
13
|
-
<h1>
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
20
|
+
<>
|
|
21
|
+
<h1 className="demo__title">React 19 CSR</h1>
|
|
22
|
+
<p className="demo__message">
|
|
23
|
+
Mounted in the browser via Esmx + React 19. The counter below is
|
|
24
|
+
reactive.
|
|
25
|
+
</p>
|
|
26
|
+
<div className="demo__code">
|
|
27
|
+
<pre>{SOURCE_SNIPPET}</pre>
|
|
28
|
+
</div>
|
|
29
|
+
<div className="demo__stat">
|
|
30
|
+
<div className="demo__stat-label">Count</div>
|
|
31
|
+
<div className="demo__stat-value">{count}</div>
|
|
32
|
+
</div>
|
|
33
|
+
<div className="demo__actions">
|
|
34
|
+
<button
|
|
35
|
+
type="button"
|
|
36
|
+
className="demo__btn demo__btn--primary"
|
|
37
|
+
onClick={() => setCount((c) => c + 1)}
|
|
38
|
+
>
|
|
39
|
+
+
|
|
40
|
+
</button>
|
|
41
|
+
<button
|
|
42
|
+
type="button"
|
|
43
|
+
className="demo__btn"
|
|
44
|
+
onClick={() => setCount((c) => c - 1)}
|
|
45
|
+
>
|
|
46
|
+
โ
|
|
18
47
|
</button>
|
|
19
|
-
<p>
|
|
20
|
-
Edit
|
|
21
|
-
<code>components/HelloWorld.tsx</code> to test HMR
|
|
22
|
-
</p>
|
|
23
48
|
</div>
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
49
|
+
<div className="demo__tags">
|
|
50
|
+
<span className="demo__badge demo__badge--react">
|
|
51
|
+
<span
|
|
52
|
+
className="demo__dot demo__dot--react"
|
|
53
|
+
aria-hidden="true"
|
|
54
|
+
/>
|
|
55
|
+
React 19
|
|
56
|
+
</span>
|
|
57
|
+
<span className="demo__badge">CSR</span>
|
|
58
|
+
</div>
|
|
59
|
+
</>
|
|
30
60
|
);
|
|
31
61
|
}
|
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "{{projectName}}",
|
|
3
3
|
"version": "1.0.0",
|
|
4
|
+
"esmx": {
|
|
5
|
+
"entry": {
|
|
6
|
+
"client": "./src/entry.client.ts",
|
|
7
|
+
"server": "./src/entry.server.tsx"
|
|
8
|
+
}
|
|
9
|
+
},
|
|
4
10
|
"description": "React Server-Side Rendering framework",
|
|
5
11
|
"type": "module",
|
|
6
12
|
"private": true,
|
|
@@ -13,17 +19,16 @@
|
|
|
13
19
|
"build:type": "tsc --declaration --emitDeclarationOnly --outDir dist/src && tsc-alias -p tsconfig.json --outDir dist/src"
|
|
14
20
|
},
|
|
15
21
|
"dependencies": {
|
|
16
|
-
"@esmx/core": "{{esmxVersion}}"
|
|
17
|
-
"react": "^18.0.0",
|
|
18
|
-
"react-dom": "^18.0.0"
|
|
22
|
+
"@esmx/core": "{{esmxVersion}}"
|
|
19
23
|
},
|
|
20
24
|
"devDependencies": {
|
|
21
|
-
"tsc-alias": "^1.8.16",
|
|
22
25
|
"@esmx/rspack-react": "{{esmxVersion}}",
|
|
23
26
|
"@types/node": "^24.0.0",
|
|
24
27
|
"@types/react": "^18.0.0",
|
|
25
28
|
"@types/react-dom": "^18.0.0",
|
|
29
|
+
"react": "^18.0.0",
|
|
30
|
+
"react-dom": "^18.0.0",
|
|
31
|
+
"tsc-alias": "^1.8.16",
|
|
26
32
|
"typescript": "5.8.3"
|
|
27
33
|
}
|
|
28
34
|
}
|
|
29
|
-
|