create-esmx 3.0.0-rc.46 → 3.0.0-rc.48

package/dist/cli.mjs

@@ -142,13 +142,16 @@ export async function cli(options = {}) {
   );
   const installCmd = installCommand;
   const devCmd = devCommand;
-  const targetDirForDisplay = projectNameInput === "." ? "." : root.split("/").pop() || root.split("\\").pop() || root;
-  const nextSteps = [
-    color.reset(`1. ${color.cyan(`cd ${targetDirForDisplay}`)}`),
-    color.reset(`2. ${color.cyan(installCmd)}`),
-    color.reset(`3. ${color.cyan("git init")} ${color.gray("(optional)")}`),
-    color.reset(`4. ${color.cyan(devCmd)}`)
-  ];
+  const targetDirForDisplay = projectNameInput === "." ? "." : projectNameInput;
+  const steps = [
+    projectNameInput !== "." ? `cd ${targetDirForDisplay}` : null,
+    installCmd,
+    `git init ${color.gray("(optional)")}`,
+    devCmd
+  ].filter(Boolean);
+  const nextSteps = steps.map((step, index) => {
+    return color.reset(`${index + 1}. ${color.cyan(step)}`);
+  });
   note(nextSteps.join("\n"), "Next steps");
   outro(color.reset(color.green("Happy coding! \u{1F389}")));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "create-esmx",
-    "version": "3.0.0-rc.46",
+    "version": "3.0.0-rc.48",
     "description": "A scaffold tool for creating Esmx projects",
     "type": "module",
     "private": false,
@@ -15,8 +15,7 @@
         "coverage": "vitest run --coverage --pass-with-no-tests",
         "lint:js": "biome check --write --no-errors-on-unmatched",
         "build": "unbuild",
-        "postbuild": "node build/postbuild.mjs",
-        "export-templates": "node build/postbuild.mjs"
+        "postbuild": "node build/postbuild.mjs"
     },
     "dependencies": {
         "@clack/prompts": "^0.7.0",
@@ -25,7 +24,7 @@
     },
     "devDependencies": {
         "@biomejs/biome": "1.9.4",
-        "@esmx/lint": "3.0.0-rc.46",
+        "@esmx/lint": "3.0.0-rc.48",
         "@types/minimist": "^1.2.5",
         "@types/node": "^24.0.0",
         "@vitest/coverage-v8": "3.2.4",
@@ -70,5 +69,5 @@
         "url": "https://github.com/esmnext/esmx/issues"
     },
     "homepage": "https://github.com/esmnext/esmx#readme",
-    "gitHead": "dcac010017466e95e1c7db78094d4925c27d54b9"
+    "gitHead": "162ec15d59c5f38c477e78101efa689844d593e2"
 }

package/src/cli.ts

@@ -185,16 +185,18 @@ export async function cli(options: CliOptions = {}): Promise<void> {
     const devCmd = devCommand;
 
     const targetDirForDisplay =
-        projectNameInput === '.'
-            ? '.'
-            : root.split('/').pop() || root.split('\\').pop() || root;
-
-    const nextSteps = [
-        color.reset(`1. ${color.cyan(`cd ${targetDirForDisplay}`)}`),
-        color.reset(`2. ${color.cyan(installCmd)}`),
-        color.reset(`3. ${color.cyan('git init')} ${color.gray('(optional)')}`),
-        color.reset(`4. ${color.cyan(devCmd)}`)
-    ];
+        projectNameInput === '.' ? '.' : projectNameInput;
+
+    const steps = [
+        projectNameInput !== '.' ? `cd ${targetDirForDisplay}` : null,
+        installCmd,
+        `git init ${color.gray('(optional)')}`,
+        devCmd
+    ].filter(Boolean);
+
+    const nextSteps = steps.map((step, index) => {
+        return color.reset(`${index + 1}. ${color.cyan(step)}`);
+    });
 
     note(nextSteps.join('\n'), 'Next steps');
 

package/template/vue-csr/README.md

@@ -0,0 +1,80 @@
+# {{projectName}}
+
+An Esmx project with Vue and Client-Side Rendering.
+
+## 📦 Tech Stack
+
+- **Framework**: [Esmx](https://esmnext.com) - Next generation micro-frontend framework based on native ESM
+- **UI Framework**: Vue
+- **Build Tool**: Rspack
+- **Type Checking**: TypeScript
+- **Rendering Mode**: Client-Side Rendering (CSR)
+
+## 🚀 Quick Start
+
+### Install Dependencies
+
+```bash
+{{installCommand}}
+```
+
+### Development Environment
+
+```bash
+{{devCommand}}
+```
+
+Visit http://localhost:3000 to see the development environment.
+
+### Production Build
+
+```bash
+{{buildCommand}}
+```
+
+### Start Production Server
+
+```bash
+{{startCommand}}
+```
+
+### Type Generation
+
+```bash
+{{buildTypeCommand}}
+```
+
+### Type Checking
+
+```bash
+{{lintTypeCommand}}
+```
+
+## 📁 Project Structure
+
+```
+{{projectName}}/
+├── src/
+│   ├── app.vue             # Main application component with Esmx and Vue logos
+│   ├── components/         # UI components
+│   │   └── hello-world.vue # Example component with counter functionality
+│   ├── create-app.ts       # Vue instance creation
+│   ├── entry.client.ts     # Client-side entry
+│   ├── entry.node.ts       # Node.js environment entry point
+│   └── entry.server.ts     # Server-side rendering functions
+├── package.json
+├── tsconfig.json
+└── README.md
+```
+
+## 🔧 Configuration Details
+
+- `entry.client.ts` - Responsible for client-side interaction and dynamic updates
+- `entry.node.ts` - Handles server-side rendering and development server configuration
+- `entry.server.ts` - Manages server-side rendering process and HTML generation
+
+## 📚 Additional Resources
+
+- [Esmx Official Documentation](https://esmnext.com)
+- [Vue Documentation](https://vuejs.org)
+- [TypeScript Documentation](https://www.typescriptlang.org)

package/template/vue-csr/package.json

@@ -0,0 +1,26 @@
+{
+    "name": "{{projectName}}",
+    "version": "1.0.0",
+    "description": "Vue Client-Side Rendering framework",
+    "type": "module",
+    "private": true,
+    "scripts": {
+        "dev": "esmx dev",
+        "build": "esmx build",
+        "preview": "esmx preview",
+        "start": "esmx start",
+        "lint:type": "vue-tsc --noEmit",
+        "build:type": "vue-tsc --declaration --emitDeclarationOnly --noEmit false --outDir dist/src && tsc-alias -p tsconfig.json --outDir dist/src"
+    },
+    "dependencies": {
+        "@esmx/core": "{{esmxVersion}}"
+    },
+    "devDependencies": {
+        "tsc-alias": "^1.8.16",
+        "@esmx/rspack-vue": "{{esmxVersion}}",
+        "@types/node": "^24.0.0",
+        "vue": "^3.5.18",
+        "typescript": "5.8.3",
+        "vue-tsc": "^3.0.1"
+    }
+} 

package/template/vue-csr/src/app.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import HelloWorld from './components/hello-world.vue';
+
+const title = ref<string>('Vue CSR Demo');
+</script>
+
+<template>
+	<div class="container">
+		<div class="logo-container">
+			<a href="https://www.esmnext.com" target="_blank" class="logo-link">
+				<div class="logo-wrapper esmx">
+					<img src="https://www.esmnext.com/logo.svg" class="logo" alt="Esmx logo" />
+				</div>
+			</a>
+			<a href="https://vuejs.org/" target="_blank" class="logo-link">
+				<div class="logo-wrapper vue">
+					<img src="https://vuejs.org/logo.svg" class="logo" alt="Vue logo" />
+				</div>
+			</a>
+		</div>
+		<HelloWorld :msg="title" />
+	</div>
+</template>
+
+<style>
+:root {
+	--esmx-primary: #001137;
+	--esmx-secondary: #273498;
+	--esmx-accent: #0074C2;
+	--esmx-light: #00ABE7;
+	--esmx-sun-core: #FFA000;
+	--esmx-sun-rays: #FFC107;
+	--vue-color: #42b883;
+	--vue-dark: #33a06f;
+	--border-color: rgba(0, 17, 55, 0.12);
+	--shadow-color: rgba(0, 17, 55, 0.05);
+	--text-primary: #213547;
+	--text-secondary: #666;
+	--bg-card: #fcfcfc;
+	--bg-hover: rgba(255, 250, 240, 0.8);
+	--font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+}
+
+body {
+	margin: 0;
+	font-family: var(--font-family);
+	color: var(--text-primary);
+	background-color: white;
+	line-height: 1.6;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+</style>
+
+<style scoped>
+.container {
+	max-width: 1280px;
+	margin: 0 auto;
+	padding: 2rem;
+	text-align: center;
+	font-family: var(--font-family);
+}
+
+.logo-container {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: 3.5rem;
+	margin-bottom: 3rem;
+}
+
+.logo-link {
+	text-decoration: none;
+	position: relative;
+}
+
+.logo-wrapper {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 6.5em;
+	height: 6.5em;
+	border-radius: 12px;
+	background-color: var(--bg-card);
+	padding: 1em;
+	box-shadow: 0 2px 12px var(--shadow-color);
+	border: 1px solid var(--border-color);
+	transition: all 0.3s ease;
+}
+
+.logo-wrapper:hover {
+	transform: translateY(-5px);
+	box-shadow: 0 5px 15px var(--shadow-color);
+}
+
+.logo {
+	height: 100%;
+	width: auto;
+	transition: transform 0.3s ease;
+}
+
+.logo-wrapper:hover .logo {
+	transform: scale(1.1);
+}
+
+.logo-wrapper.esmx:hover {
+	background-color: rgba(255, 192, 7, 0.1);
+	border-color: var(--esmx-sun-rays);
+}
+
+.logo-wrapper.vue:hover {
+	background-color: rgba(66, 184, 131, 0.1);
+	border-color: var(--vue-color);
+}
+
+@media (max-width: 768px) {
+	.logo-container {
+		gap: 2rem;
+	}
+	
+	.logo-wrapper {
+		width: 5em;
+		height: 5em;
+	}
+}
+</style>

package/template/vue-csr/src/components/hello-world.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+defineProps({
+    msg: {
+        type: String
+    }
+});
+const count = ref<number>(0);
+</script>
+
+<template>
+	<div>
+		<h1>{{ msg }}</h1>
+
+		<div class="card">
+			<button type="button" @click="count++">Counter: {{ count }}</button>
+			<p>
+				Edit
+				<code>components/HelloWorld.vue</code> to test HMR
+			</p>
+		</div>
+
+		<p>Experience Vue with client-side rendering powered by Esmx framework</p>
+	</div>
+</template>
+
+<style scoped>
+.card {
+	padding: 2em;
+	border-radius: 12px;
+	margin: 2.5em 0;
+	background-color: var(--bg-card);
+}
+
+button {
+	border-radius: 8px;
+	border: 1px solid transparent;
+	padding: 0.6em 1.2em;
+	font-size: 1em;
+	font-weight: 600;
+	font-family: inherit;
+	background-color: var(--esmx-sun-rays);
+	color: #fff;
+	cursor: pointer;
+	margin-bottom: 1em;
+	transition: all 0.25s ease;
+}
+
+button:hover {
+	background-color: var(--esmx-sun-core);
+	transform: translateY(-1px);
+	box-shadow: 0 4px 8px rgba(255, 160, 0, 0.25);
+}
+
+h1 {
+	font-size: 3.2em;
+	line-height: 1.1;
+	margin-bottom: 1em;
+	color: var(--esmx-primary);
+	font-weight: 700;
+}
+
+p {
+	line-height: 1.6;
+	margin: 0.5em 0;
+	color: var(--text-primary);
+}
+
+code {
+	background-color: rgba(0, 116, 194, 0.1);
+	padding: 0.2em 0.4em;
+	border-radius: 4px;
+	font-family: monospace;
+	font-size: 0.9em;
+}
+</style>

package/template/vue-csr/src/create-app.ts

@@ -0,0 +1,9 @@
+import { createApp } from 'vue';
+import App from './app.vue';
+
+export function createVueApp() {
+    const app = createApp(App);
+    return {
+        app
+    };
+}

package/template/vue-csr/src/entry.client.ts

@@ -0,0 +1,5 @@
+import { createVueApp } from './create-app';
+
+const { app } = createVueApp();
+
+app.mount('#app');

package/template/vue-csr/src/entry.node.ts

@@ -0,0 +1,35 @@
+import http from 'node:http';
+import type { EsmxOptions } from '@esmx/core';
+
+export default {
+    modules: {
+        exports: ['npm:vue']
+    },
+    async devApp(esmx) {
+        return import('@esmx/rspack-vue').then((m) =>
+            m.createRspackVue3App(esmx, {
+                chain(context) {
+                    // Custom Rspack configuration
+                }
+            })
+        );
+    },
+    async postBuild(esmx) {
+        const rc = await esmx.render();
+        esmx.writeSync(esmx.resolvePath('dist/client', 'index.html'), rc.html);
+    },
+    async server(esmx) {
+        const server = http.createServer((req, res) => {
+            esmx.middleware(req, res, async () => {
+                const rc = await esmx.render({
+                    params: { url: req.url }
+                });
+                res.end(rc.html);
+            });
+        });
+
+        server.listen(3000, () => {
+            console.log('Server started: http://localhost:3000');
+        });
+    }
+} satisfies EsmxOptions;

package/template/vue-csr/src/entry.server.ts

@@ -0,0 +1,26 @@
+import type { RenderContext } from '@esmx/core';
+
+export default async (rc: RenderContext) => {
+    await rc.commit();
+
+    rc.html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Vue with Client-Side Rendering powered by Esmx framework">
+    <meta name="keywords" content="Vue, CSR, Client-Side Rendering, Esmx, Vue.js, JavaScript, TypeScript, Rspack">
+    <link rel="icon" href="https://www.esmnext.com/logo.svg" type="image/svg+xml">
+    ${rc.preload()}
+    <title>Vue CSR Demo | Powered by Esmx</title>
+    ${rc.css()}
+</head>
+<body>
+    <div id="app"></div>
+    ${rc.importmap()}
+    ${rc.moduleEntry()}
+    ${rc.modulePreload()}
+</body>
+</html>
+`;
+};

package/template/vue-csr/tsconfig.json

@@ -0,0 +1,26 @@
+{
+    "compilerOptions": {
+        "module": "ESNext",
+        "moduleResolution": "node",
+        "isolatedModules": true,
+        "resolveJsonModule": true,
+        
+        "target": "ESNext",
+        "lib": ["ESNext", "DOM"],
+        
+        "strict": true,
+        "skipLibCheck": true,
+        "types": ["@types/node"],
+        
+        "experimentalDecorators": true,
+        "allowSyntheticDefaultImports": true,
+        
+        "baseUrl": ".",
+        "paths": {
+            "{{projectName}}/src/*": ["./src/*"],
+            "{{projectName}}/*": ["./*"]
+        }
+    },
+    "include": ["src"],
+    "exclude": ["dist", "node_modules"]
+} 

package/template/vue-ssr/README.md

@@ -0,0 +1,80 @@
+# {{projectName}}
+
+An Esmx project with Vue and Server-Side Rendering.
+
+## 📦 Tech Stack
+
+- **Framework**: [Esmx](https://esmnext.com) - Next generation micro-frontend framework based on native ESM
+- **UI Framework**: Vue
+- **Build Tool**: Rspack
+- **Type Checking**: TypeScript
+- **Rendering Mode**: Server-Side Rendering (SSR)
+
+## 🚀 Quick Start
+
+### Install Dependencies
+
+```bash
+{{installCommand}}
+```
+
+### Development Environment
+
+```bash
+{{devCommand}}
+```
+
+Visit http://localhost:3000 to see the development environment.
+
+### Production Build
+
+```bash
+{{buildCommand}}
+```
+
+### Start Production Server
+
+```bash
+{{startCommand}}
+```
+
+### Type Generation
+
+```bash
+{{buildTypeCommand}}
+```
+
+### Type Checking
+
+```bash
+{{lintTypeCommand}}
+```
+
+## 📁 Project Structure
+
+```
+{{projectName}}/
+├── src/
+│   ├── app.vue             # Main application component with Esmx and Vue logos
+│   ├── components/         # UI components
+│   │   └── hello-world.vue # Example component with counter functionality
+│   ├── create-app.ts       # Vue instance creation
+│   ├── entry.client.ts     # Client-side entry
+│   ├── entry.node.ts       # Node.js environment entry point
+│   └── entry.server.ts     # Server-side rendering functions
+├── package.json
+├── tsconfig.json
+└── README.md
+```
+
+## 🔧 Configuration Details
+
+- `entry.client.ts` - Responsible for client-side interaction and dynamic updates
+- `entry.node.ts` - Handles server-side rendering and development server configuration
+- `entry.server.ts` - Manages server-side rendering process and HTML generation
+
+## 📚 Additional Resources
+
+- [Esmx Official Documentation](https://esmnext.com)
+- [Vue Documentation](https://vuejs.org)
+- [TypeScript Documentation](https://www.typescriptlang.org)

package/template/vue-ssr/package.json

@@ -0,0 +1,27 @@
+{
+    "name": "{{projectName}}",
+    "version": "1.0.0",
+    "description": "Vue Server-Side Rendering framework",
+    "type": "module",
+    "private": true,
+    "scripts": {
+        "dev": "esmx dev",
+        "build": "esmx build",
+        "preview": "esmx preview",
+        "start": "esmx start",
+        "lint:type": "vue-tsc --noEmit",
+        "build:type": "vue-tsc --declaration --emitDeclarationOnly --noEmit false --outDir dist/src && tsc-alias -p tsconfig.json --outDir dist/src"
+    },
+    "dependencies": {
+        "@esmx/core": "{{esmxVersion}}"
+    },
+    "devDependencies": {
+        "tsc-alias": "^1.8.16",
+        "@esmx/rspack-vue": "{{esmxVersion}}",
+        "@types/node": "^24.0.0",
+        "vue": "3.5.18",
+        "@vue/server-renderer": "3.5.18",
+        "typescript": "5.8.3",
+        "vue-tsc": "^3.0.1"
+    }
+} 

package/template/vue-ssr/src/app.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import HelloWorld from './components/hello-world.vue';
+
+const title = ref<string>('Vue SSR Demo');
+</script>
+
+<template>
+	<div class="container">
+		<div class="logo-container">
+			<a href="https://www.esmnext.com" target="_blank" class="logo-link">
+				<div class="logo-wrapper esmx">
+					<img src="https://www.esmnext.com/logo.svg" class="logo" alt="Esmx logo" />
+				</div>
+			</a>
+			<a href="https://vuejs.org/" target="_blank" class="logo-link">
+				<div class="logo-wrapper vue">
+					<img src="https://vuejs.org/logo.svg" class="logo" alt="Vue logo" />
+				</div>
+			</a>
+		</div>
+		<HelloWorld :msg="title" />
+	</div>
+</template>
+
+<style>
+:root {
+	--esmx-primary: #001137;
+	--esmx-secondary: #273498;
+	--esmx-accent: #0074C2;
+	--esmx-light: #00ABE7;
+	--esmx-sun-core: #FFA000;
+	--esmx-sun-rays: #FFC107;
+	--vue-color: #42b883;
+	--vue-dark: #33a06f;
+	--border-color: rgba(0, 17, 55, 0.12);
+	--shadow-color: rgba(0, 17, 55, 0.05);
+	--text-primary: #213547;
+	--text-secondary: #666;
+	--bg-card: #fcfcfc;
+	--bg-hover: rgba(255, 250, 240, 0.8);
+	--font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+}
+
+body {
+	margin: 0;
+	font-family: var(--font-family);
+	color: var(--text-primary);
+	background-color: white;
+	line-height: 1.6;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+</style>
+
+<style scoped>
+.container {
+	max-width: 1280px;
+	margin: 0 auto;
+	padding: 2rem;
+	text-align: center;
+	font-family: var(--font-family);
+}
+
+.logo-container {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: 3.5rem;
+	margin-bottom: 3rem;
+}
+
+.logo-link {
+	text-decoration: none;
+	position: relative;
+}
+
+.logo-wrapper {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 6.5em;
+	height: 6.5em;
+	border-radius: 12px;
+	background-color: var(--bg-card);
+	padding: 1em;
+	box-shadow: 0 2px 12px var(--shadow-color);
+	border: 1px solid var(--border-color);
+	transition: all 0.3s ease;
+}
+
+.logo-wrapper:hover {
+	transform: translateY(-5px);
+	box-shadow: 0 5px 15px var(--shadow-color);
+}
+
+.logo {
+	height: 100%;
+	width: auto;
+	transition: transform 0.3s ease;
+}
+
+.logo-wrapper:hover .logo {
+	transform: scale(1.1);
+}
+
+.logo-wrapper.esmx:hover {
+	background-color: rgba(255, 192, 7, 0.1);
+	border-color: var(--esmx-sun-rays);
+}
+
+.logo-wrapper.vue:hover {
+	background-color: rgba(66, 184, 131, 0.1);
+	border-color: var(--vue-color);
+}
+
+@media (max-width: 768px) {
+	.logo-container {
+		gap: 2rem;
+	}
+	
+	.logo-wrapper {
+		width: 5em;
+		height: 5em;
+	}
+}
+</style>

package/template/vue-ssr/src/components/hello-world.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+defineProps({
+    msg: {
+        type: String
+    }
+});
+const count = ref<number>(0);
+</script>
+
+<template>
+	<div>
+		<h1>{{ msg }}</h1>
+
+		<div class="card">
+			<button type="button" @click="count++">Counter: {{ count }}</button>
+			<p>
+				Edit
+				<code>components/HelloWorld.vue</code> to test HMR
+			</p>
+		</div>
+
+		<p>Experience Vue with server-side rendering powered by Esmx framework</p>
+	</div>
+</template>
+
+<style scoped>
+.card {
+	padding: 2em;
+	border-radius: 12px;
+	margin: 2.5em 0;
+	background-color: var(--bg-card);
+}
+
+button {
+	border-radius: 8px;
+	border: 1px solid transparent;
+	padding: 0.6em 1.2em;
+	font-size: 1em;
+	font-weight: 600;
+	font-family: inherit;
+	background-color: var(--esmx-sun-rays);
+	color: #fff;
+	cursor: pointer;
+	margin-bottom: 1em;
+	transition: all 0.25s ease;
+}
+
+button:hover {
+	background-color: var(--esmx-sun-core);
+	transform: translateY(-1px);
+	box-shadow: 0 4px 8px rgba(255, 160, 0, 0.25);
+}
+
+h1 {
+	font-size: 3.2em;
+	line-height: 1.1;
+	margin-bottom: 1em;
+	color: var(--esmx-primary);
+	font-weight: 700;
+}
+
+p {
+	line-height: 1.6;
+	margin: 0.5em 0;
+	color: var(--text-primary);
+}
+
+code {
+	background-color: rgba(0, 116, 194, 0.1);
+	padding: 0.2em 0.4em;
+	border-radius: 4px;
+	font-family: monospace;
+	font-size: 0.9em;
+}
+</style>

package/template/vue-ssr/src/create-app.ts

@@ -0,0 +1,9 @@
+import { createApp } from 'vue';
+import App from './app.vue';
+
+export function createVueApp() {
+    const app = createApp(App);
+    return {
+        app
+    };
+}

package/template/vue-ssr/src/entry.client.ts

@@ -0,0 +1,5 @@
+import { createVueApp } from './create-app';
+
+const { app } = createVueApp();
+
+app.mount('#app');

package/template/vue-ssr/src/entry.node.ts

@@ -0,0 +1,37 @@
+import http from 'node:http';
+import type { EsmxOptions } from '@esmx/core';
+
+export default {
+    modules: {
+        exports: ['npm:vue']
+    },
+    async devApp(esmx) {
+        return import('@esmx/rspack-vue').then((m) =>
+            m.createRspackVue3App(esmx, {
+                chain(context) {
+                    // Custom Rspack configuration
+                }
+            })
+        );
+    },
+
+    async postBuild(esmx) {
+        const rc = await esmx.render();
+        esmx.writeSync(esmx.resolvePath('dist/client', 'index.html'), rc.html);
+    },
+
+    async server(esmx) {
+        const server = http.createServer((req, res) => {
+            esmx.middleware(req, res, async () => {
+                const rc = await esmx.render({
+                    params: { url: req.url }
+                });
+                res.end(rc.html);
+            });
+        });
+
+        server.listen(3000, () => {
+            console.log('Server started: http://localhost:3000');
+        });
+    }
+} satisfies EsmxOptions;

package/template/vue-ssr/src/entry.server.ts

@@ -0,0 +1,30 @@
+import type { RenderContext } from '@esmx/core';
+import { renderToString } from '@vue/server-renderer';
+import { createVueApp } from './create-app';
+
+export default async (rc: RenderContext) => {
+    const { app } = createVueApp();
+    const html = await renderToString(app);
+    await rc.commit();
+
+    rc.html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Vue with Server-Side Rendering powered by Esmx framework">
+    <meta name="keywords" content="Vue, SSR, Server-Side Rendering, Esmx, Vue.js, JavaScript, TypeScript, Rspack">
+    <link rel="icon" href="https://www.esmnext.com/logo.svg" type="image/svg+xml">
+    ${rc.preload()}
+    <title>Vue SSR Demo | Powered by Esmx</title>
+    ${rc.css()}
+</head>
+<body>
+    <div id="app">${html}</div>
+    ${rc.importmap()}
+    ${rc.moduleEntry()}
+    ${rc.modulePreload()}
+</body>
+</html>
+`;
+};

package/template/vue-ssr/tsconfig.json

@@ -0,0 +1,26 @@
+{
+    "compilerOptions": {
+        "module": "ESNext",
+        "moduleResolution": "node",
+        "isolatedModules": true,
+        "resolveJsonModule": true,
+        
+        "target": "ESNext",
+        "lib": ["ESNext", "DOM"],
+        
+        "strict": true,
+        "skipLibCheck": true,
+        "types": ["@types/node"],
+        
+        "experimentalDecorators": true,
+        "allowSyntheticDefaultImports": true,
+        
+        "baseUrl": ".",
+        "paths": {
+            "{{projectName}}/src/*": ["./src/*"],
+            "{{projectName}}/*": ["./*"]
+        }
+    },
+    "include": ["src"],
+    "exclude": ["dist", "node_modules"]
+} 

package/template/vue2-csr/README.md

@@ -1,6 +1,6 @@
 # {{projectName}}
 
-An Esmx project with Vue2 and Server-Side Rendering.
+An Esmx project with Vue2 and Client-Side Rendering.
 
 ## 📦 Tech Stack
 
@@ -8,7 +8,7 @@ An Esmx project with Vue2 and Server-Side Rendering.
 - **UI Framework**: Vue2 with Composition API
 - **Build Tool**: Rspack
 - **Type Checking**: TypeScript
-- **Rendering Mode**: Server-Side Rendering (SSR)
+- **Rendering Mode**: Client-Side Rendering (CSR)
 
 ## 🚀 Quick Start
 

package/template/vue2-csr/package.json

@@ -1,7 +1,7 @@
 {
     "name": "{{projectName}}",
     "version": "1.0.0",
-    "description": "Vue2 with Server-Side Rendering",
+    "description": "Vue2 Client-Side Rendering framework",
     "type": "module",
     "private": true,
     "scripts": {

package/template/vue2-csr/src/components/hello-world.vue

@@ -21,7 +21,7 @@ const count = ref<number>(0);
 			</p>
 		</div>
 
-		<p>Experience Vue2 with server-side rendering powered by Esmx framework</p>
+		<p>Experience Vue2 with client-side rendering powered by Esmx framework</p>
 	</div>
 </template>
 

package/template/vue2-csr/src/entry.node.ts

@@ -2,6 +2,9 @@ import http from 'node:http';
 import type { EsmxOptions } from '@esmx/core';
 
 export default {
+    modules: {
+        exports: ['npm:vue']
+    },
     async devApp(esmx) {
         return import('@esmx/rspack-vue').then((m) =>
             m.createRspackVue2App(esmx, {

package/template/vue2-csr/src/entry.server.ts

@@ -8,8 +8,8 @@ export default async (rc: RenderContext) => {
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="Vue2 with Server-Side Rendering powered by Esmx framework">
-    <meta name="keywords" content="Vue2, CSR, Server-Side Rendering, Esmx, Vue.js, JavaScript, TypeScript, Rspack">
+    <meta name="description" content="Vue2 with Client-Side Rendering powered by Esmx framework">
+    <meta name="keywords" content="Vue2, CSR, Client-Side Rendering, Esmx, Vue.js, JavaScript, TypeScript, Rspack">
     <link rel="icon" href="https://www.esmnext.com/logo.svg" type="image/svg+xml">
     ${rc.preload()}
     <title>Vue2 CSR Demo | Powered by Esmx</title>

package/template/vue2-ssr/package.json

@@ -1,7 +1,7 @@
 {
     "name": "{{projectName}}",
     "version": "1.0.0",
-    "description": "Vue2 with Server-Side Rendering",
+    "description": "Vue2 Server-Side Rendering framework",
     "type": "module",
     "private": true,
     "scripts": {

package/template/vue2-ssr/src/entry.node.ts

@@ -2,6 +2,9 @@ import http from 'node:http';
 import type { EsmxOptions } from '@esmx/core';
 
 export default {
+    modules: {
+        exports: ['npm:vue']
+    },
     async devApp(esmx) {
         return import('@esmx/rspack-vue').then((m) =>
             m.createRspackVue2App(esmx, {