create-esmx 3.0.0-rc.59 → 3.0.0-rc.62
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/dist/cli.mjs +10 -1
- package/package.json +5 -2
- package/src/cli.ts +11 -1
- package/template/shared-modules/README.md +17 -6
- package/template/shared-modules/package.json +4 -1
- package/template/shared-modules/src/entry.client.ts +36 -0
- package/template/shared-modules/src/entry.node.ts +34 -5
- package/template/shared-modules/src/entry.server.ts +276 -13
- package/template/shared-modules/src/vue/index.ts +1 -0
- package/template/shared-modules/src/vue2/index.ts +1 -0
- package/template/vue-csr/src/entry.node.ts +1 -1
- package/template/vue-ssr/src/entry.node.ts +1 -1
- package/template/vue2-csr/src/entry.node.ts +1 -1
- package/template/vue2-ssr/src/entry.node.ts +1 -1
package/dist/cli.mjs
CHANGED
|
@@ -112,7 +112,16 @@ export async function cli(options = {}) {
|
|
|
112
112
|
cancel("Operation cancelled");
|
|
113
113
|
return;
|
|
114
114
|
}
|
|
115
|
-
|
|
115
|
+
let name;
|
|
116
|
+
let root;
|
|
117
|
+
if (parsedArgs.name && parsedArgs._[0]) {
|
|
118
|
+
name = parsedArgs.name;
|
|
119
|
+
root = formatProjectName(parsedArgs._[0], workingDir).root;
|
|
120
|
+
} else {
|
|
121
|
+
const result = formatProjectName(projectNameInput, workingDir);
|
|
122
|
+
name = result.name;
|
|
123
|
+
root = result.root;
|
|
124
|
+
}
|
|
116
125
|
const templateType = await getTemplateType(parsedArgs.template);
|
|
117
126
|
if (isCancel(templateType)) {
|
|
118
127
|
cancel("Operation cancelled");
|
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.62",
|
|
4
4
|
"description": "A scaffold tool for creating Esmx projects",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"private": false,
|
|
@@ -24,6 +24,9 @@
|
|
|
24
24
|
},
|
|
25
25
|
"devDependencies": {
|
|
26
26
|
"@biomejs/biome": "1.9.4",
|
|
27
|
+
"@esmx/core": "3.0.0-rc.62",
|
|
28
|
+
"@esmx/rspack": "3.0.0-rc.62",
|
|
29
|
+
"@esmx/rspack-vue": "3.0.0-rc.62",
|
|
27
30
|
"@types/minimist": "^1.2.5",
|
|
28
31
|
"@types/node": "^24.0.0",
|
|
29
32
|
"@vitest/coverage-v8": "3.2.4",
|
|
@@ -66,5 +69,5 @@
|
|
|
66
69
|
"url": "https://github.com/esmnext/esmx/issues"
|
|
67
70
|
},
|
|
68
71
|
"homepage": "https://github.com/esmnext/esmx#readme",
|
|
69
|
-
"gitHead": "
|
|
72
|
+
"gitHead": "e5a1e811403bf1db4437dff88c3ea8bc6b576f64"
|
|
70
73
|
}
|
package/src/cli.ts
CHANGED
|
@@ -150,7 +150,17 @@ export async function cli(options: CliOptions = {}): Promise<void> {
|
|
|
150
150
|
return;
|
|
151
151
|
}
|
|
152
152
|
|
|
153
|
-
|
|
153
|
+
let name: string;
|
|
154
|
+
let root: string;
|
|
155
|
+
|
|
156
|
+
if (parsedArgs.name && parsedArgs._[0]) {
|
|
157
|
+
name = parsedArgs.name;
|
|
158
|
+
root = formatProjectName(parsedArgs._[0], workingDir).root;
|
|
159
|
+
} else {
|
|
160
|
+
const result = formatProjectName(projectNameInput, workingDir);
|
|
161
|
+
name = result.name;
|
|
162
|
+
root = result.root;
|
|
163
|
+
}
|
|
154
164
|
|
|
155
165
|
const templateType = await getTemplateType(parsedArgs.template);
|
|
156
166
|
if (isCancel(templateType)) {
|
|
@@ -1,14 +1,21 @@
|
|
|
1
1
|
# {{projectName}}
|
|
2
2
|
|
|
3
|
-
An Esmx project
|
|
3
|
+
An Esmx project demonstrating Shared Modules solution for micro-frontend architecture.
|
|
4
4
|
|
|
5
5
|
## 📦 Tech Stack
|
|
6
6
|
|
|
7
7
|
- **Framework**: [Esmx](https://esmnext.com) - Next generation micro-frontend framework based on native ESM
|
|
8
|
-
- **
|
|
8
|
+
- **Solution Focus**: Shared Modules for multi-framework environments
|
|
9
9
|
- **Build Tool**: Rspack
|
|
10
10
|
- **Type Checking**: TypeScript
|
|
11
11
|
|
|
12
|
+
## 🎯 Core Features
|
|
13
|
+
|
|
14
|
+
- **Module Sharing**: Share modules across different framework versions
|
|
15
|
+
- **Zero Overhead**: Native ESM-based sharing with no runtime cost
|
|
16
|
+
- **Version Isolation**: Safe module sharing between framework versions
|
|
17
|
+
- **SSR Compatible**: Full server-side rendering support with shared modules
|
|
18
|
+
|
|
12
19
|
## 🚀 Quick Start
|
|
13
20
|
|
|
14
21
|
### Install Dependencies
|
|
@@ -56,7 +63,11 @@ pnpm lint:type
|
|
|
56
63
|
├── src/
|
|
57
64
|
│ ├── entry.client.ts # Client-side entry
|
|
58
65
|
│ ├── entry.node.ts # Node.js environment entry point
|
|
59
|
-
│
|
|
66
|
+
│ ├── entry.server.ts # Server-side rendering functions
|
|
67
|
+
│ ├── vue/
|
|
68
|
+
│ │ └── index.ts # Vue 3 shared modules
|
|
69
|
+
│ └── vue2/
|
|
70
|
+
│ └── index.ts # Vue 2 shared modules
|
|
60
71
|
├── package.json
|
|
61
72
|
├── tsconfig.json
|
|
62
73
|
└── README.md
|
|
@@ -64,9 +75,9 @@ pnpm lint:type
|
|
|
64
75
|
|
|
65
76
|
## 🔧 Configuration Details
|
|
66
77
|
|
|
67
|
-
- `entry.client.ts` - Responsible for client-side
|
|
68
|
-
- `entry.node.ts` - Handles
|
|
69
|
-
- `entry.server.ts` - Manages
|
|
78
|
+
- `entry.client.ts` - Responsible for client-side shared module consistency checking
|
|
79
|
+
- `entry.node.ts` - Handles shared module configuration and scope mapping
|
|
80
|
+
- `entry.server.ts` - Manages shared module rendering and HTML generation
|
|
70
81
|
|
|
71
82
|
## 📚 Additional Resources
|
|
72
83
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "{{projectName}}",
|
|
3
3
|
"version": "1.0.0",
|
|
4
|
-
"description": "Shared modules for
|
|
4
|
+
"description": "Shared modules solution for micro-frontend architecture",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"private": true,
|
|
7
7
|
"scripts": {
|
|
@@ -16,7 +16,10 @@
|
|
|
16
16
|
"@esmx/core": "{{esmxVersion}}"
|
|
17
17
|
},
|
|
18
18
|
"devDependencies": {
|
|
19
|
+
"vue": "^3.5.21",
|
|
19
20
|
"@esmx/router": "{{esmxVersion}}",
|
|
21
|
+
"@esmx/router-vue": "{{esmxVersion}}",
|
|
22
|
+
"vue2": "npm:vue@2.7.16",
|
|
20
23
|
"tsc-alias": "^1.8.16",
|
|
21
24
|
"@esmx/rspack": "{{esmxVersion}}",
|
|
22
25
|
"@types/node": "^24.0.0",
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { version } from './vue/index';
|
|
2
|
+
import { version as vue2Version } from './vue2/index';
|
|
3
|
+
|
|
4
|
+
const versions = [
|
|
5
|
+
{ name: 'vue3', clientVersion: version },
|
|
6
|
+
{ name: 'vue2', clientVersion: vue2Version }
|
|
7
|
+
];
|
|
8
|
+
|
|
9
|
+
function checkVersionConsistency() {
|
|
10
|
+
versions.forEach(({ name, clientVersion }) => {
|
|
11
|
+
const serverVersion = document.getElementById(
|
|
12
|
+
`${name}-server-version`
|
|
13
|
+
)?.textContent;
|
|
14
|
+
const status = document.getElementById(`${name}-status`);
|
|
15
|
+
const card = document.getElementById(`${name}-card`);
|
|
16
|
+
|
|
17
|
+
document.getElementById(`${name}-client-version`)!.textContent =
|
|
18
|
+
clientVersion;
|
|
19
|
+
|
|
20
|
+
if (!status || !card) return;
|
|
21
|
+
|
|
22
|
+
const isConsistent = clientVersion === serverVersion;
|
|
23
|
+
status.className = `status-indicator status-${isConsistent ? 'consistent' : 'inconsistent'}`;
|
|
24
|
+
status.innerHTML = `<span class="icon ${isConsistent ? 'success' : 'error'}">${isConsistent ? '✓' : '✗'}</span><span>Module versions ${isConsistent ? 'consistent' : 'inconsistent'}</span>`;
|
|
25
|
+
|
|
26
|
+
if (isConsistent) {
|
|
27
|
+
card.classList.add('consistency-animation');
|
|
28
|
+
setTimeout(
|
|
29
|
+
() => card.classList.remove('consistency-animation'),
|
|
30
|
+
2000
|
|
31
|
+
);
|
|
32
|
+
}
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
checkVersionConsistency();
|
|
@@ -4,13 +4,42 @@ import type { EsmxOptions } from '@esmx/core';
|
|
|
4
4
|
export default {
|
|
5
5
|
modules: {
|
|
6
6
|
exports: [
|
|
7
|
-
|
|
7
|
+
// ========== Applicable to all shared modules ==========
|
|
8
|
+
'pkg:@esmx/router',
|
|
9
|
+
|
|
8
10
|
{
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
11
|
+
// ========== Vue framework shared module configuration ==========
|
|
12
|
+
// Business code: import Vue from 'vue' (defaults to Vue 3, shared from common modules)
|
|
13
|
+
vue: {
|
|
14
|
+
client: 'pkg:vue/dist/vue.runtime.esm-browser.prod.js', // Vue 3 production
|
|
15
|
+
server: 'pkg:vue/dist/vue.runtime.esm-browser.js' // Vue 3 development
|
|
16
|
+
},
|
|
17
|
+
'vue/index': 'root:src/vue/index.ts',
|
|
18
|
+
'@esmx/router-vue': 'pkg:@esmx/router-vue', // Vue 3 router
|
|
19
|
+
|
|
20
|
+
// ========== Vue2 framework shared module configuration ==========
|
|
21
|
+
// Exported to vue2/ directory, version isolation via scope mapping
|
|
22
|
+
vue2: 'pkg:vue2/dist/vue.runtime.esm.js', // → vue2/vue.mjs
|
|
23
|
+
'vue2/@esmx/router-vue': 'pkg:@esmx/router-vue', // → vue2/@esmx/router-vue.mjs,
|
|
24
|
+
'vue2/index': 'root:src/vue2/index.ts'
|
|
12
25
|
}
|
|
13
|
-
]
|
|
26
|
+
],
|
|
27
|
+
|
|
28
|
+
scopes: {
|
|
29
|
+
// ========== Vue2 shared module scope mapping ==========
|
|
30
|
+
// Directory scope mapping: Only affects shared modules in vue2/ directory
|
|
31
|
+
// Business code in vue2/ directory: import Vue from 'vue' → {{projectName}}/vue2 (version-isolated)
|
|
32
|
+
// Business code in other directories: import Vue from 'vue' → Vue 3 (shared from common modules)
|
|
33
|
+
'vue2/': {
|
|
34
|
+
vue: '{{projectName}}/vue2'
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
// Package scope mapping: Affects dependencies within shared module packages
|
|
38
|
+
// Example: When 'vue' package depends on 'AA', use replacement version
|
|
39
|
+
// 'vue': {
|
|
40
|
+
// AA: 'some-other-AA'
|
|
41
|
+
// }
|
|
42
|
+
}
|
|
14
43
|
},
|
|
15
44
|
async devApp(esmx) {
|
|
16
45
|
return import('@esmx/rspack').then((m) =>
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import type { RenderContext } from '@esmx/core';
|
|
2
|
+
import { version as vueVersion } from './vue';
|
|
3
|
+
import { version as vue2Version } from './vue2';
|
|
2
4
|
|
|
3
5
|
export default async (rc: RenderContext) => {
|
|
4
6
|
await rc.commit();
|
|
@@ -8,25 +10,286 @@ export default async (rc: RenderContext) => {
|
|
|
8
10
|
<head>
|
|
9
11
|
<meta charset="UTF-8">
|
|
10
12
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
11
|
-
<meta name="description" content="Esmx Shared Modules -
|
|
12
|
-
<meta name="keywords" content="Esmx,Shared Modules,Micro-frontend,ESM Modules,JavaScript Modules,TypeScript,Rspack,Frontend Architecture">
|
|
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,Vue2,Vue3,Code Reuse,Frontend Architecture">
|
|
13
15
|
<meta name="generator" content="Esmx Framework">
|
|
14
16
|
<link rel="icon" href="https://www.esmnext.com/logo.svg" type="image/svg+xml">
|
|
15
17
|
${rc.preload()}
|
|
16
|
-
<title>Esmx Shared Modules
|
|
18
|
+
<title>Esmx Shared Modules - Multi-version Module Sharing Solution</title>
|
|
17
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>
|
|
18
228
|
</head>
|
|
19
229
|
<body>
|
|
20
|
-
<
|
|
21
|
-
<
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
<
|
|
28
|
-
|
|
29
|
-
|
|
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 + ImportMap</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: Vue2, Vue3, React, Preact, etc.</li>
|
|
289
|
+
</ul>
|
|
290
|
+
</div>
|
|
291
|
+
</div>
|
|
292
|
+
|
|
30
293
|
${rc.importmap()}
|
|
31
294
|
${rc.moduleEntry()}
|
|
32
295
|
${rc.modulePreload()}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { version } from 'vue';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { version } from 'vue';
|