create-esmx 3.0.0-rc.104

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 (119) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +52 -0
  3. package/README.zh-CN.md +52 -0
  4. package/dist/cli.d.ts +5 -0
  5. package/dist/cli.integration.test.d.ts +1 -0
  6. package/dist/cli.integration.test.mjs +238 -0
  7. package/dist/cli.mjs +166 -0
  8. package/dist/create.d.ts +2 -0
  9. package/dist/create.mjs +6 -0
  10. package/dist/index.d.ts +3 -0
  11. package/dist/index.mjs +2 -0
  12. package/dist/project.d.ts +5 -0
  13. package/dist/project.mjs +46 -0
  14. package/dist/project.test.d.ts +1 -0
  15. package/dist/project.test.mjs +155 -0
  16. package/dist/template.d.ts +17 -0
  17. package/dist/template.mjs +76 -0
  18. package/dist/template.test.d.ts +1 -0
  19. package/dist/template.test.mjs +106 -0
  20. package/dist/types.d.ts +30 -0
  21. package/dist/types.mjs +0 -0
  22. package/dist/utils/index.d.ts +3 -0
  23. package/dist/utils/index.mjs +7 -0
  24. package/dist/utils/package-manager.d.ts +10 -0
  25. package/dist/utils/package-manager.mjs +49 -0
  26. package/dist/utils/package-manager.test.d.ts +4 -0
  27. package/dist/utils/package-manager.test.mjs +275 -0
  28. package/dist/utils/project-name.d.ts +48 -0
  29. package/dist/utils/project-name.mjs +42 -0
  30. package/dist/utils/project-name.test.d.ts +1 -0
  31. package/dist/utils/project-name.test.mjs +332 -0
  32. package/dist/utils/template.d.ts +19 -0
  33. package/dist/utils/template.mjs +8 -0
  34. package/dist/utils/template.test.d.ts +4 -0
  35. package/dist/utils/template.test.mjs +150 -0
  36. package/package.json +75 -0
  37. package/src/cli.integration.test.ts +289 -0
  38. package/src/cli.ts +214 -0
  39. package/src/create.ts +8 -0
  40. package/src/index.ts +3 -0
  41. package/src/project.test.ts +200 -0
  42. package/src/project.ts +75 -0
  43. package/src/template.test.ts +135 -0
  44. package/src/template.ts +117 -0
  45. package/src/types.ts +32 -0
  46. package/src/utils/index.ts +11 -0
  47. package/src/utils/package-manager.test.ts +540 -0
  48. package/src/utils/package-manager.ts +92 -0
  49. package/src/utils/project-name.test.ts +441 -0
  50. package/src/utils/project-name.ts +101 -0
  51. package/src/utils/template.test.ts +234 -0
  52. package/src/utils/template.ts +34 -0
  53. package/template/react-csr/README.md +81 -0
  54. package/template/react-csr/package.json +29 -0
  55. package/template/react-csr/src/app.css +98 -0
  56. package/template/react-csr/src/app.tsx +26 -0
  57. package/template/react-csr/src/components/hello-world.css +48 -0
  58. package/template/react-csr/src/components/hello-world.tsx +29 -0
  59. package/template/react-csr/src/create-app.tsx +9 -0
  60. package/template/react-csr/src/entry.client.ts +13 -0
  61. package/template/react-csr/src/entry.node.ts +35 -0
  62. package/template/react-csr/src/entry.server.tsx +27 -0
  63. package/template/react-csr/tsconfig.json +27 -0
  64. package/template/react-ssr/README.md +81 -0
  65. package/template/react-ssr/package.json +29 -0
  66. package/template/react-ssr/src/app.css +98 -0
  67. package/template/react-ssr/src/app.tsx +26 -0
  68. package/template/react-ssr/src/components/hello-world.css +48 -0
  69. package/template/react-ssr/src/components/hello-world.tsx +29 -0
  70. package/template/react-ssr/src/create-app.tsx +9 -0
  71. package/template/react-ssr/src/entry.client.ts +13 -0
  72. package/template/react-ssr/src/entry.node.ts +32 -0
  73. package/template/react-ssr/src/entry.server.tsx +36 -0
  74. package/template/react-ssr/tsconfig.json +27 -0
  75. package/template/shared-modules/README.md +85 -0
  76. package/template/shared-modules/package.json +28 -0
  77. package/template/shared-modules/src/entry.client.ts +50 -0
  78. package/template/shared-modules/src/entry.node.ts +67 -0
  79. package/template/shared-modules/src/entry.server.ts +299 -0
  80. package/template/shared-modules/src/index.ts +3 -0
  81. package/template/shared-modules/src/vue/index.ts +1 -0
  82. package/template/shared-modules/src/vue2/index.ts +1 -0
  83. package/template/shared-modules/tsconfig.json +26 -0
  84. package/template/vue-csr/README.md +80 -0
  85. package/template/vue-csr/package.json +26 -0
  86. package/template/vue-csr/src/app.vue +127 -0
  87. package/template/vue-csr/src/components/hello-world.vue +77 -0
  88. package/template/vue-csr/src/create-app.ts +9 -0
  89. package/template/vue-csr/src/entry.client.ts +5 -0
  90. package/template/vue-csr/src/entry.node.ts +35 -0
  91. package/template/vue-csr/src/entry.server.ts +26 -0
  92. package/template/vue-csr/tsconfig.json +26 -0
  93. package/template/vue-ssr/README.md +80 -0
  94. package/template/vue-ssr/package.json +27 -0
  95. package/template/vue-ssr/src/app.vue +127 -0
  96. package/template/vue-ssr/src/components/hello-world.vue +77 -0
  97. package/template/vue-ssr/src/create-app.ts +9 -0
  98. package/template/vue-ssr/src/entry.client.ts +5 -0
  99. package/template/vue-ssr/src/entry.node.ts +37 -0
  100. package/template/vue-ssr/src/entry.server.ts +30 -0
  101. package/template/vue-ssr/tsconfig.json +26 -0
  102. package/template/vue2-csr/README.md +80 -0
  103. package/template/vue2-csr/package.json +26 -0
  104. package/template/vue2-csr/src/app.vue +127 -0
  105. package/template/vue2-csr/src/components/hello-world.vue +77 -0
  106. package/template/vue2-csr/src/create-app.ts +11 -0
  107. package/template/vue2-csr/src/entry.client.ts +5 -0
  108. package/template/vue2-csr/src/entry.node.ts +35 -0
  109. package/template/vue2-csr/src/entry.server.ts +26 -0
  110. package/template/vue2-csr/tsconfig.json +26 -0
  111. package/template/vue2-ssr/README.md +80 -0
  112. package/template/vue2-ssr/package.json +27 -0
  113. package/template/vue2-ssr/src/app.vue +127 -0
  114. package/template/vue2-ssr/src/components/hello-world.vue +77 -0
  115. package/template/vue2-ssr/src/create-app.ts +11 -0
  116. package/template/vue2-ssr/src/entry.client.ts +5 -0
  117. package/template/vue2-ssr/src/entry.node.ts +32 -0
  118. package/template/vue2-ssr/src/entry.server.ts +37 -0
  119. package/template/vue2-ssr/tsconfig.json +26 -0
package/template/shared-modules/src/entry.server.ts ADDED
@@ -0,0 +1,299 @@
1
+ import type { RenderContext } from '@esmx/core';
2
+ import { version as vueVersion } from './vue';
3
+ import { version as vue2Version } from './vue2';
4
+
5
+ export default async (rc: RenderContext) => {
6
+ await rc.commit();
7
+
8
+ rc.html = `<!DOCTYPE html>
9
+ <html lang="en">
10
+ <head>
11
+ <meta charset="UTF-8">
12
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
13
+ <meta name="description" content="Esmx Shared Modules - A comprehensive micro-frontend solution for sharing modules across multiple framework versions, built on native ESM technology with zero runtime overhead">
14
+ <meta name="keywords" content="Esmx,Shared Modules,Module Sharing,Micro-frontend,ESM Modules,JavaScript Modules,TypeScript,Rspack,Multi-framework,Vue 2, Vue 3, Code Reuse, Frontend Architecture">
15
+ <meta name="generator" content="Esmx Framework">
16
+ <link rel="icon" href="https://esmx.dev/logo.svg" type="image/svg+xml">
17
+ ${rc.preload()}
18
+ <title>Esmx Shared Modules - Multi-version Module Sharing Solution</title>
19
+ ${rc.css()}
20
+ <style>
21
+ * {
22
+ margin: 0;
23
+ padding: 0;
24
+ box-sizing: border-box;
25
+ }
26
+
27
+ body {
28
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
29
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
30
+ min-height: 100vh;
31
+ color: #333;
32
+ line-height: 1.6;
33
+ }
34
+
35
+ .container {
36
+ max-width: 1200px;
37
+ margin: 0 auto;
38
+ padding: 2rem;
39
+ }
40
+
41
+ header {
42
+ text-align: center;
43
+ margin-bottom: 3rem;
44
+ color: white;
45
+ }
46
+
47
+ header h1 {
48
+ font-size: 2.5rem;
49
+ margin-bottom: 1rem;
50
+ text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
51
+ }
52
+
53
+ header p {
54
+ font-size: 1.2rem;
55
+ opacity: 0.9;
56
+ }
57
+
58
+ .version-cards {
59
+ display: grid;
60
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
61
+ gap: 2rem;
62
+ margin-bottom: 3rem;
63
+ }
64
+
65
+ .version-card {
66
+ background: white;
67
+ border-radius: 12px;
68
+ padding: 2rem;
69
+ box-shadow: 0 10px 30px rgba(0,0,0,0.2);
70
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
71
+ }
72
+
73
+ .version-card:hover {
74
+ transform: translateY(-5px);
75
+ box-shadow: 0 15px 40px rgba(0,0,0,0.3);
76
+ }
77
+
78
+ .version-card.vue3 {
79
+ border-top: 4px solid #42b883;
80
+ }
81
+
82
+ .version-card.vue2 {
83
+ border-top: 4px solid #34495e;
84
+ }
85
+
86
+ .version-card h3 {
87
+ font-size: 1.5rem;
88
+ margin-bottom: 1rem;
89
+ display: flex;
90
+ align-items: center;
91
+ gap: 0.5rem;
92
+ }
93
+
94
+ .version-info {
95
+ margin-bottom: 1rem;
96
+ }
97
+
98
+ .version-row {
99
+ display: flex;
100
+ justify-content: space-between;
101
+ align-items: center;
102
+ padding: 0.5rem 0;
103
+ border-bottom: 1px solid #eee;
104
+ }
105
+
106
+ .version-row:last-child {
107
+ border-bottom: none;
108
+ }
109
+
110
+ .version-label {
111
+ font-weight: 600;
112
+ color: #666;
113
+ }
114
+
115
+ .version-value {
116
+ font-family: 'Courier New', monospace;
117
+ background: #f8f9fa;
118
+ padding: 0.25rem 0.5rem;
119
+ border-radius: 4px;
120
+ font-size: 0.9rem;
121
+ }
122
+
123
+ .status-indicator {
124
+ display: inline-flex;
125
+ align-items: center;
126
+ gap: 0.5rem;
127
+ padding: 0.5rem 1rem;
128
+ border-radius: 20px;
129
+ font-size: 0.9rem;
130
+ font-weight: 600;
131
+ margin-top: 1rem;
132
+ }
133
+
134
+ .status-consistent {
135
+ background: #d4edda;
136
+ color: #155724;
137
+ }
138
+
139
+ .status-inconsistent {
140
+ background: #f8d7da;
141
+ color: #721c24;
142
+ }
143
+
144
+ .status-checking {
145
+ background: #fff3cd;
146
+ color: #856404;
147
+ }
148
+
149
+ .icon {
150
+ width: 20px;
151
+ height: 20px;
152
+ border-radius: 50%;
153
+ display: inline-flex;
154
+ align-items: center;
155
+ justify-content: center;
156
+ font-size: 0.8rem;
157
+ }
158
+
159
+ .icon.success {
160
+ background: #28a745;
161
+ color: white;
162
+ }
163
+
164
+ .icon.error {
165
+ background: #dc3545;
166
+ color: white;
167
+ }
168
+
169
+ .icon.loading {
170
+ background: #ffc107;
171
+ color: white;
172
+ animation: spin 1s linear infinite;
173
+ }
174
+
175
+ @keyframes spin {
176
+ 0% { transform: rotate(0deg); }
177
+ 100% { transform: rotate(360deg); }
178
+ }
179
+
180
+
181
+ .tech-info {
182
+ background: white;
183
+ border-radius: 12px;
184
+ padding: 2rem;
185
+ box-shadow: 0 10px 30px rgba(0,0,0,0.2);
186
+ }
187
+
188
+ .tech-info h2 {
189
+ color: #333;
190
+ margin-bottom: 1rem;
191
+ }
192
+
193
+ .tech-info ul {
194
+ list-style: none;
195
+ padding-left: 0;
196
+ }
197
+
198
+ .tech-info li {
199
+ padding: 0.5rem 0;
200
+ border-bottom: 1px solid #eee;
201
+ }
202
+
203
+ .tech-info li:last-child {
204
+ border-bottom: none;
205
+ }
206
+
207
+ .tech-info li:before {
208
+ content: "✓";
209
+ color: #42b883;
210
+ font-weight: bold;
211
+ margin-right: 0.5rem;
212
+ }
213
+
214
+ @media (max-width: 768px) {
215
+ .container {
216
+ padding: 1rem;
217
+ }
218
+
219
+ header h1 {
220
+ font-size: 2rem;
221
+ }
222
+
223
+ .version-cards {
224
+ grid-template-columns: 1fr;
225
+ }
226
+ }
227
+ </style>
228
+ </head>
229
+ <body>
230
+ <div class="container">
231
+ <header>
232
+ <h1>Esmx Shared Modules</h1>
233
+ <p>Multi-version module sharing solution for micro-frontend architecture</p>
234
+ </header>
235
+
236
+ <div class="version-cards">
237
+ <div class="version-card vue3" id="vue3-card">
238
+ <h3>
239
+ <span style="color: #42b883;">●</span>
240
+ Vue 3 Module
241
+ </h3>
242
+ <div class="version-info">
243
+ <div class="version-row">
244
+ <span class="version-label">Server Version:</span>
245
+ <span class="version-value" id="vue3-server-version">${vueVersion}</span>
246
+ </div>
247
+ <div class="version-row">
248
+ <span class="version-label">Client Version:</span>
249
+ <span class="version-value" id="vue3-client-version">Detecting...</span>
250
+ </div>
251
+ </div>
252
+ <div class="status-indicator status-checking" id="vue3-status">
253
+ <span class="icon loading">⟳</span>
254
+ <span>Verifying version consistency...</span>
255
+ </div>
256
+ </div>
257
+
258
+ <div class="version-card vue2" id="vue2-card">
259
+ <h3>
260
+ <span style="color: #34495e;">●</span>
261
+ Vue 2 Module
262
+ </h3>
263
+ <div class="version-info">
264
+ <div class="version-row">
265
+ <span class="version-label">Server Version:</span>
266
+ <span class="version-value" id="vue2-server-version">${vue2Version}</span>
267
+ </div>
268
+ <div class="version-row">
269
+ <span class="version-label">Client Version:</span>
270
+ <span class="version-value" id="vue2-client-version">Detecting...</span>
271
+ </div>
272
+ </div>
273
+ <div class="status-indicator status-checking" id="vue2-status">
274
+ <span class="icon loading">⟳</span>
275
+ <span>Verifying version consistency...</span>
276
+ </div>
277
+ </div>
278
+ </div>
279
+
280
+ <div class="tech-info">
281
+ <h2>Shared Modules Features</h2>
282
+ <ul>
283
+ <li>📦 Shared module system across different framework versions</li>
284
+ <li>⚡ Zero runtime overhead, based on native ESM + Import Maps</li>
285
+ <li>🚀 High-performance build and module sharing, powered by Rspack</li>
286
+ <li>🔄 Complete SSR support with shared module consistency</li>
287
+ <li>📝 Standard ESM syntax, no framework-specific APIs required</li>
288
+ <li>🔧 Multi-framework module sharing: Vue 2, Vue 3, React, Preact, etc.</li>
289
+ </ul>
290
+ </div>
291
+ </div>
292
+
293
+ ${rc.importmap()}
294
+ ${rc.moduleEntry()}
295
+ ${rc.modulePreload()}
296
+ </body>
297
+ </html>
298
+ `;
299
+ };
package/template/shared-modules/src/index.ts ADDED
@@ -0,0 +1,3 @@
1
+ export function toFixed(value: number, precision = 2) {
2
+ return value.toFixed(precision);
3
+ }
package/template/shared-modules/src/vue/index.ts ADDED
@@ -0,0 +1 @@
1
+ export { version } from 'vue';
package/template/shared-modules/src/vue2/index.ts ADDED
@@ -0,0 +1 @@
1
+ export { version } from 'vue';
package/template/shared-modules/tsconfig.json ADDED
@@ -0,0 +1,26 @@
1
+ {
2
+ "compilerOptions": {
3
+ "module": "ESNext",
4
+ "moduleResolution": "node",
5
+ "isolatedModules": true,
6
+ "resolveJsonModule": true,
7
+
8
+ "target": "ESNext",
9
+ "lib": ["ESNext", "DOM"],
10
+
11
+ "strict": true,
12
+ "skipLibCheck": true,
13
+ "types": ["@types/node"],
14
+
15
+ "experimentalDecorators": true,
16
+ "allowSyntheticDefaultImports": true,
17
+
18
+ "baseUrl": ".",
19
+ "paths": {
20
+ "{{projectName}}/src/*": ["./src/*"],
21
+ "{{projectName}}/*": ["./*"]
22
+ }
23
+ },
24
+ "include": ["src"],
25
+ "exclude": ["dist", "node_modules"]
26
+ }
package/template/vue-csr/README.md ADDED
@@ -0,0 +1,80 @@
1
+ # {{projectName}}
2
+
3
+ An Esmx project with Vue 3 and Client-Side Rendering.
4
+
5
+ ## 📦 Tech Stack
6
+
7
+ - **Framework**: [Esmx](https://esmx.dev) - Next generation micro-frontend framework based on native ESM
8
+ - **UI Framework**: Vue 3
9
+ - **Build Tool**: Rspack
10
+ - **Type Checking**: TypeScript
11
+ - **Rendering Mode**: Client-Side Rendering (CSR)
12
+
13
+ ## 🚀 Quick Start
14
+
15
+ ### Install Dependencies
16
+
17
+ ```bash
18
+ {{installCommand}}
19
+ ```
20
+
21
+ ### Development Environment
22
+
23
+ ```bash
24
+ {{devCommand}}
25
+ ```
26
+
27
+ Visit http://localhost:3000 to see the development environment.
28
+
29
+ ### Production Build
30
+
31
+ ```bash
32
+ {{buildCommand}}
33
+ ```
34
+
35
+ ### Start Production Server
36
+
37
+ ```bash
38
+ {{startCommand}}
39
+ ```
40
+
41
+ ### Type Generation
42
+
43
+ ```bash
44
+ {{buildTypeCommand}}
45
+ ```
46
+
47
+ ### Type Checking
48
+
49
+ ```bash
50
+ {{lintTypeCommand}}
51
+ ```
52
+
53
+ ## 📁 Project Structure
54
+
55
+ ```
56
+ {{projectName}}/
57
+ ├── src/
58
+ │ ├── app.vue # Main application component with Esmx and Vue logos
59
+ │ ├── components/ # UI components
60
+ │ │ └── hello-world.vue # Example component with counter functionality
61
+ │ ├── create-app.ts # Vue instance creation
62
+ │ ├── entry.client.ts # Client-side entry
63
+ │ ├── entry.node.ts # Node.js environment entry point
64
+ │ └── entry.server.ts # CSR HTML shell (no SSR)
65
+ ├── package.json
66
+ ├── tsconfig.json
67
+ └── README.md
68
+ ```
69
+
70
+ ## 🔧 Configuration Details
71
+
72
+ - `entry.client.ts` - Responsible for client-side interaction and dynamic updates
73
+ - `entry.node.ts` - Handles development environment setup and tooling
74
+ - `entry.server.ts` - Generates the HTML shell for CSR (no SSR)
75
+
76
+ ## 📚 Additional Resources
77
+
78
+ - [Esmx Official Documentation](https://esmx.dev)
79
+ - [Vue Documentation](https://vuejs.org)
80
+ - [TypeScript Documentation](https://www.typescriptlang.org)
package/template/vue-csr/package.json ADDED
@@ -0,0 +1,26 @@
1
+ {
2
+ "name": "{{projectName}}",
3
+ "version": "1.0.0",
4
+ "description": "Vue Client-Side Rendering framework",
5
+ "type": "module",
6
+ "private": true,
7
+ "scripts": {
8
+ "dev": "esmx dev",
9
+ "build": "esmx build",
10
+ "preview": "esmx preview",
11
+ "start": "esmx start",
12
+ "lint:type": "vue-tsc --noEmit",
13
+ "build:type": "vue-tsc --declaration --emitDeclarationOnly --noEmit false --outDir dist/src && tsc-alias -p tsconfig.json --outDir dist/src"
14
+ },
15
+ "dependencies": {
16
+ "@esmx/core": "{{esmxVersion}}"
17
+ },
18
+ "devDependencies": {
19
+ "tsc-alias": "^1.8.16",
20
+ "@esmx/rspack-vue": "{{esmxVersion}}",
21
+ "@types/node": "^24.0.0",
22
+ "vue": "^3.5.18",
23
+ "typescript": "5.8.3",
24
+ "vue-tsc": "^3.0.5"
25
+ }
26
+ }
package/template/vue-csr/src/app.vue ADDED
@@ -0,0 +1,127 @@
1
+ <script setup lang="ts">
2
+ import { ref } from 'vue';
3
+ import HelloWorld from './components/hello-world.vue';
4
+
5
+ const title = ref<string>('Vue CSR Demo');
6
+ </script>
7
+
8
+ <template>
9
+ <div class="container">
10
+ <div class="logo-container">
11
+ <a href="https://esmx.dev" target="_blank" class="logo-link">
12
+ <div class="logo-wrapper esmx">
13
+ <img src="https://esmx.dev/logo.svg" class="logo" alt="Esmx logo" />
14
+ </div>
15
+ </a>
16
+ <a href="https://vuejs.org/" target="_blank" class="logo-link">
17
+ <div class="logo-wrapper vue">
18
+ <img src="https://vuejs.org/logo.svg" class="logo" alt="Vue logo" />
19
+ </div>
20
+ </a>
21
+ </div>
22
+ <HelloWorld :msg="title" />
23
+ </div>
24
+ </template>
25
+
26
+ <style>
27
+ :root {
28
+ --esmx-primary: #001137;
29
+ --esmx-secondary: #273498;
30
+ --esmx-accent: #0074C2;
31
+ --esmx-light: #00ABE7;
32
+ --esmx-sun-core: #FFA000;
33
+ --esmx-sun-rays: #FFC107;
34
+ --vue-color: #42b883;
35
+ --vue-dark: #33a06f;
36
+ --border-color: rgba(0, 17, 55, 0.12);
37
+ --shadow-color: rgba(0, 17, 55, 0.05);
38
+ --text-primary: #213547;
39
+ --text-secondary: #666;
40
+ --bg-card: #fcfcfc;
41
+ --bg-hover: rgba(255, 250, 240, 0.8);
42
+ --font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
43
+ }
44
+
45
+ body {
46
+ margin: 0;
47
+ font-family: var(--font-family);
48
+ color: var(--text-primary);
49
+ background-color: white;
50
+ line-height: 1.6;
51
+ -webkit-font-smoothing: antialiased;
52
+ -moz-osx-font-smoothing: grayscale;
53
+ }
54
+ </style>
55
+
56
+ <style scoped>
57
+ .container {
58
+ max-width: 1280px;
59
+ margin: 0 auto;
60
+ padding: 2rem;
61
+ text-align: center;
62
+ font-family: var(--font-family);
63
+ }
64
+
65
+ .logo-container {
66
+ display: flex;
67
+ justify-content: center;
68
+ align-items: center;
69
+ gap: 3.5rem;
70
+ margin-bottom: 3rem;
71
+ }
72
+
73
+ .logo-link {
74
+ text-decoration: none;
75
+ position: relative;
76
+ }
77
+
78
+ .logo-wrapper {
79
+ display: flex;
80
+ justify-content: center;
81
+ align-items: center;
82
+ width: 6.5em;
83
+ height: 6.5em;
84
+ border-radius: 12px;
85
+ background-color: var(--bg-card);
86
+ padding: 1em;
87
+ box-shadow: 0 2px 12px var(--shadow-color);
88
+ border: 1px solid var(--border-color);
89
+ transition: all 0.3s ease;
90
+ }
91
+
92
+ .logo-wrapper:hover {
93
+ transform: translateY(-5px);
94
+ box-shadow: 0 5px 15px var(--shadow-color);
95
+ }
96
+
97
+ .logo {
98
+ height: 100%;
99
+ width: auto;
100
+ transition: transform 0.3s ease;
101
+ }
102
+
103
+ .logo-wrapper:hover .logo {
104
+ transform: scale(1.1);
105
+ }
106
+
107
+ .logo-wrapper.esmx:hover {
108
+ background-color: rgba(255, 192, 7, 0.1);
109
+ border-color: var(--esmx-sun-rays);
110
+ }
111
+
112
+ .logo-wrapper.vue:hover {
113
+ background-color: rgba(66, 184, 131, 0.1);
114
+ border-color: var(--vue-color);
115
+ }
116
+
117
+ @media (max-width: 768px) {
118
+ .logo-container {
119
+ gap: 2rem;
120
+ }
121
+
122
+ .logo-wrapper {
123
+ width: 5em;
124
+ height: 5em;
125
+ }
126
+ }
127
+ </style>
package/template/vue-csr/src/components/hello-world.vue ADDED
@@ -0,0 +1,77 @@
1
+ <script setup lang="ts">
2
+ import { ref } from 'vue';
3
+
4
+ defineProps({
5
+ msg: {
6
+ type: String
7
+ }
8
+ });
9
+ const count = ref<number>(0);
10
+ </script>
11
+
12
+ <template>
13
+ <div>
14
+ <h1>{{ msg }}</h1>
15
+
16
+ <div class="card">
17
+ <button type="button" @click="count++">Counter: {{ count }}</button>
18
+ <p>
19
+ Edit
20
+ <code>components/HelloWorld.vue</code> to test HMR
21
+ </p>
22
+ </div>
23
+
24
+ <p>Experience Vue with client-side rendering powered by Esmx framework</p>
25
+ </div>
26
+ </template>
27
+
28
+ <style scoped>
29
+ .card {
30
+ padding: 2em;
31
+ border-radius: 12px;
32
+ margin: 2.5em 0;
33
+ background-color: var(--bg-card);
34
+ }
35
+
36
+ button {
37
+ border-radius: 8px;
38
+ border: 1px solid transparent;
39
+ padding: 0.6em 1.2em;
40
+ font-size: 1em;
41
+ font-weight: 600;
42
+ font-family: inherit;
43
+ background-color: var(--esmx-sun-rays);
44
+ color: #fff;
45
+ cursor: pointer;
46
+ margin-bottom: 1em;
47
+ transition: all 0.25s ease;
48
+ }
49
+
50
+ button:hover {
51
+ background-color: var(--esmx-sun-core);
52
+ transform: translateY(-1px);
53
+ box-shadow: 0 4px 8px rgba(255, 160, 0, 0.25);
54
+ }
55
+
56
+ h1 {
57
+ font-size: 3.2em;
58
+ line-height: 1.1;
59
+ margin-bottom: 1em;
60
+ color: var(--esmx-primary);
61
+ font-weight: 700;
62
+ }
63
+
64
+ p {
65
+ line-height: 1.6;
66
+ margin: 0.5em 0;
67
+ color: var(--text-primary);
68
+ }
69
+
70
+ code {
71
+ background-color: rgba(0, 116, 194, 0.1);
72
+ padding: 0.2em 0.4em;
73
+ border-radius: 4px;
74
+ font-family: monospace;
75
+ font-size: 0.9em;
76
+ }
77
+ </style>
package/template/vue-csr/src/create-app.ts ADDED
@@ -0,0 +1,9 @@
1
+ import { createApp } from 'vue';
2
+ import App from './app.vue';
3
+
4
+ export function createVueApp() {
5
+ const app = createApp(App);
6
+ return {
7
+ app
8
+ };
9
+ }
package/template/vue-csr/src/entry.client.ts ADDED
@@ -0,0 +1,5 @@
1
+ import { createVueApp } from './create-app';
2
+
3
+ const { app } = createVueApp();
4
+
5
+ app.mount('#app');
package/template/vue-csr/src/entry.node.ts ADDED
@@ -0,0 +1,35 @@
1
+ import http from 'node:http';
2
+ import type { EsmxOptions } from '@esmx/core';
3
+
4
+ export default {
5
+ modules: {
6
+ exports: ['pkg:vue']
7
+ },
8
+ async devApp(esmx) {
9
+ return import('@esmx/rspack-vue').then((m) =>
10
+ m.createRspackVue3App(esmx, {
11
+ chain(context) {
12
+ // Custom Rspack configuration
13
+ }
14
+ })
15
+ );
16
+ },
17
+ async postBuild(esmx) {
18
+ const rc = await esmx.render();
19
+ esmx.writeSync(esmx.resolvePath('dist/client', 'index.html'), rc.html);
20
+ },
21
+ async server(esmx) {
22
+ const server = http.createServer((req, res) => {
23
+ esmx.middleware(req, res, async () => {
24
+ const rc = await esmx.render({
25
+ params: { url: req.url }
26
+ });
27
+ res.end(rc.html);
28
+ });
29
+ });
30
+
31
+ server.listen(3000, () => {
32
+ console.log('Server started: http://localhost:3000');
33
+ });
34
+ }
35
+ } satisfies EsmxOptions;