create-esmx 3.0.0-rc.116 โ†’ 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.
Files changed (36) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +37 -12
  3. package/README.zh-CN.md +37 -12
  4. package/package.json +15 -8
  5. package/template/react-csr/package.json +15 -7
  6. package/template/react-csr/src/app.css +147 -70
  7. package/template/react-csr/src/app.tsx +8 -35
  8. package/template/react-csr/src/components/hello-world.tsx +51 -21
  9. package/template/react-csr/src/entry.node.ts +0 -3
  10. package/template/react-ssr/package.json +10 -5
  11. package/template/react-ssr/src/app.css +147 -70
  12. package/template/react-ssr/src/app.tsx +8 -35
  13. package/template/react-ssr/src/components/hello-world.tsx +52 -21
  14. package/template/react-ssr/src/entry.node.ts +0 -3
  15. package/template/shared-modules/README.md +1 -1
  16. package/template/shared-modules/package.json +16 -0
  17. package/template/shared-modules/src/entry.node.ts +0 -39
  18. package/template/shared-modules/src/vue2/index.ts +4 -1
  19. package/template/vue-csr/package.json +10 -1
  20. package/template/vue-csr/src/app.vue +113 -106
  21. package/template/vue-csr/src/components/hello-world.vue +32 -69
  22. package/template/vue-csr/src/entry.node.ts +0 -3
  23. package/template/vue-ssr/package.json +10 -1
  24. package/template/vue-ssr/src/app.vue +113 -106
  25. package/template/vue-ssr/src/components/hello-world.vue +34 -69
  26. package/template/vue-ssr/src/entry.node.ts +0 -3
  27. package/template/vue2-csr/package.json +10 -1
  28. package/template/vue2-csr/src/app.vue +113 -106
  29. package/template/vue2-csr/src/components/hello-world.vue +32 -69
  30. package/template/vue2-csr/src/entry.node.ts +0 -3
  31. package/template/vue2-ssr/package.json +10 -1
  32. package/template/vue2-ssr/src/app.vue +113 -106
  33. package/template/vue2-ssr/src/components/hello-world.vue +34 -69
  34. package/template/vue2-ssr/src/entry.node.ts +0 -3
  35. package/template/react-csr/src/components/hello-world.css +0 -48
  36. package/template/react-ssr/src/components/hello-world.css +0 -48
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2020 Esmx Team
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
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/@esmx/core.svg" alt="node version" />
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 configuration
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
- ## Usage
37
+ ## ๐Ÿ“ฆ Installation
38
38
 
39
39
  ```bash
40
- # Using npm
40
+ # npm
41
41
  npm create esmx@latest my-project
42
42
 
43
- # Using yarn
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
- # Using pnpm
56
+ # Or use pnpm
47
57
  pnpm create esmx my-project
48
58
  ```
49
59
 
50
- ## License
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/@esmx/core.svg" alt="node version" />
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
- # ไฝฟ็”จ npm
40
+ # npm
41
41
  npm create esmx@latest my-project
42
42
 
43
- # ไฝฟ็”จ yarn
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
- # ไฝฟ็”จ pnpm
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.116",
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": "workspace:*",
28
- "@esmx/rspack": "workspace:*",
29
- "@esmx/rspack-react": "workspace:*",
30
- "@esmx/rspack-vue": "workspace:*",
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.4",
33
+ "@vitest/coverage-v8": "3.2.6",
34
34
  "typescript": "5.9.3",
35
35
  "unbuild": "3.6.1",
36
- "vitest": "3.2.4",
36
+ "vitest": "3.2.6",
37
37
  "vue": "^3.5.23"
38
38
  },
39
39
  "exports": {
@@ -70,5 +70,12 @@
70
70
  "bugs": {
71
71
  "url": "https://github.com/esmnext/esmx/issues"
72
72
  },
73
- "homepage": "https://github.com/esmnext/esmx#readme"
73
+ "engines": {
74
+ "node": ">=24"
75
+ },
76
+ "homepage": "https://github.com/esmnext/esmx#readme",
77
+ "publishConfig": {
78
+ "access": "public"
79
+ },
80
+ "gitHead": "2fdbd62470f64e6e45568550941c78cb259e4917"
74
81
  }
package/template/react-csr/package.json CHANGED
@@ -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": "^18.0.0",
25
- "@types/react-dom": "^18.0.0",
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
-
package/template/react-csr/src/app.css CHANGED
@@ -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-primary: #001137;
3
- --esmx-secondary: #273498;
4
- --esmx-accent: #0074c2;
5
- --esmx-light: #00abe7;
6
- --esmx-sun-core: #ffa000;
7
- --esmx-sun-rays: #ffc107;
8
- --react-color: #61dafb;
9
- --react-dark: #20232a;
10
- --border-color: rgba(0, 17, 55, 0.12);
11
- --shadow-color: rgba(0, 17, 55, 0.05);
12
- --text-primary: #213547;
13
- --text-secondary: #666;
14
- --bg-card: #fcfcfc;
15
- --bg-hover: rgba(255, 250, 240, 0.8);
16
- --font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
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
- font-family: var(--font-family);
22
- color: var(--text-primary);
23
- background-color: white;
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
- .container {
30
- max-width: 1280px;
43
+ .demo {
44
+ max-width: 960px;
31
45
  margin: 0 auto;
32
- padding: 2rem;
33
- text-align: center;
34
- font-family: var(--font-family);
46
+ padding: 64px 24px;
35
47
  }
36
48
 
37
- .logo-container {
38
- display: flex;
39
- justify-content: center;
40
- align-items: center;
41
- gap: 3.5rem;
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
- .logo-link {
46
- text-decoration: none;
47
- position: relative;
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
- .logo-wrapper {
51
- display: flex;
52
- justify-content: center;
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
- .logo-wrapper:hover {
65
- transform: translateY(-5px);
66
- box-shadow: 0 5px 15px var(--shadow-color);
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
- .logo {
70
- height: 100%;
71
- width: auto;
72
- transition: transform 0.3s ease;
78
+ .demo__code pre {
79
+ margin: 0;
73
80
  }
74
81
 
75
- .logo-wrapper:hover .logo {
76
- transform: scale(1.1);
82
+ .demo__stat {
83
+ display: inline-flex;
84
+ flex-direction: column;
85
+ gap: 4px;
86
+ padding: 16px 0;
77
87
  }
78
-
79
- .logo-wrapper.esmx:hover {
80
- background-color: rgba(255, 192, 7, 0.1);
81
- border-color: var(--esmx-sun-rays);
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
- .logo-wrapper.react:hover {
85
- background-color: rgba(97, 218, 251, 0.1);
86
- border-color: var(--react-color);
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
- @media (max-width: 768px) {
90
- .logo-container {
91
- gap: 2rem;
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
- .logo-wrapper {
95
- width: 5em;
96
- height: 5em;
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
  }
package/template/react-csr/src/app.tsx CHANGED
@@ -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
- <div id="app" className="container">
9
- <div className="logo-container">
10
- <a
11
- href="https://esmx.dev"
12
- target="_blank"
13
- rel="noopener noreferrer"
14
- className="logo-link"
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
  }
package/template/react-csr/src/components/hello-world.tsx CHANGED
@@ -1,31 +1,61 @@
1
1
  import { useState } from 'react';
2
- import './hello-world.css';
3
2
 
4
- interface HelloWorldProps {
5
- msg: string;
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({ msg }: HelloWorldProps) {
16
+ export default function HelloWorld() {
9
17
  const [count, setCount] = useState<number>(0);
10
18
 
11
19
  return (
12
- <div>
13
- <h1>{msg}</h1>
14
-
15
- <div className="card">
16
- <button type="button" onClick={() => setCount(count + 1)}>
17
- Counter: {count}
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
- <p>
26
- Experience React with client-side rendering powered by Esmx
27
- framework
28
- </p>
29
- </div>
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
  }
package/template/react-csr/src/entry.node.ts CHANGED
@@ -2,9 +2,6 @@ import http from 'node:http';
2
2
  import type { EsmxOptions } from '@esmx/core';
3
3
 
4
4
  export default {
5
- modules: {
6
- exports: ['pkg:react']
7
- },
8
5
  async devApp(esmx) {
9
6
  return import('@esmx/rspack-react').then((m) =>
10
7
  m.createRspackReactApp(esmx, {
package/template/react-ssr/package.json CHANGED
@@ -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
-