create-esmx 3.0.0-rc.104

package/template/react-ssr/README.md

@@ -0,0 +1,81 @@
+# {{projectName}}
+
+An Esmx project with React and Server-Side Rendering.
+
+## 📦 Tech Stack
+
+- **Framework**: [Esmx](https://esmx.dev) - Next generation micro-frontend framework based on native ESM
+- **UI Framework**: React 18
+- **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.tsx             # Main application component with Esmx and React logos
+│   ├── components/         # UI components
+│   │   └── hello-world.tsx # Example component with counter functionality
+│   ├── create-app.tsx     # React app instance creation
+│   ├── entry.client.ts    # Client-side entry
+│   ├── entry.node.ts      # Node.js environment entry point
+│   └── entry.server.tsx   # 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.tsx` - Manages server-side rendering process and HTML generation
+
+## 📚 Additional Resources
+
+- [Esmx Official Documentation](https://esmx.dev)
+- [React Documentation](https://react.dev)
+- [TypeScript Documentation](https://www.typescriptlang.org)
+

package/template/react-ssr/package.json

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

package/template/react-ssr/src/app.css

@@ -0,0 +1,98 @@
+:root {
+    --esmx-primary: #001137;
+    --esmx-secondary: #273498;
+    --esmx-accent: #0074c2;
+    --esmx-light: #00abe7;
+    --esmx-sun-core: #ffa000;
+    --esmx-sun-rays: #ffc107;
+    --react-color: #61dafb;
+    --react-dark: #20232a;
+    --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;
+}
+
+.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.react:hover {
+    background-color: rgba(97, 218, 251, 0.1);
+    border-color: var(--react-color);
+}
+
+@media (max-width: 768px) {
+    .logo-container {
+        gap: 2rem;
+    }
+
+    .logo-wrapper {
+        width: 5em;
+        height: 5em;
+    }
+}

package/template/react-ssr/src/app.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import HelloWorld from './components/hello-world';
+import './app.css';
+
+export default function App() {
+    const title = 'React SSR Demo';
+
+    return (
+        <div id="app" className="container">
+            <div className="logo-container">
+                <a href="https://esmx.dev" target="_blank" rel="noopener noreferrer" className="logo-link">
+                    <div className="logo-wrapper esmx">
+                        <img src="https://esmx.dev/logo.svg" className="logo" alt="Esmx logo" />
+                    </div>
+                </a>
+                <a href="https://react.dev/" target="_blank" rel="noopener noreferrer" className="logo-link">
+                    <div className="logo-wrapper react">
+                        <img src="https://react.dev/favicon-192x192.png" className="logo" alt="React logo" />
+                    </div>
+                </a>
+            </div>
+            <HelloWorld msg={title} />
+        </div>
+    );
+}
+

package/template/react-ssr/src/components/hello-world.css

@@ -0,0 +1,48 @@
+.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;
+}

package/template/react-ssr/src/components/hello-world.tsx

@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+import './hello-world.css';
+
+interface HelloWorldProps {
+    msg: string;
+}
+
+export default function HelloWorld({ msg }: HelloWorldProps) {
+    const [count, setCount] = useState<number>(0);
+
+    return (
+        <div>
+            <h1>{msg}</h1>
+
+            <div className="card">
+                <button type="button" onClick={() => setCount(count + 1)}>
+                    Counter: {count}
+                </button>
+                <p>
+                    Edit
+                    <code>components/HelloWorld.tsx</code> to test HMR
+                </p>
+            </div>
+
+            <p>Experience React with server-side rendering powered by Esmx framework</p>
+        </div>
+    );
+}
+

package/template/react-ssr/src/create-app.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import App from './app';
+
+export function createApp() {
+    return {
+        app: <App />
+    };
+}
+

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { createApp } from './create-app';
+
+const { app } = createApp();
+
+const container = document.getElementById('app');
+if (container) {
+    const root = createRoot(container);
+    root.render(app);
+} else {
+    console.error('Container element #app not found');
+}

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

@@ -0,0 +1,32 @@
+import http from 'node:http';
+import type { EsmxOptions } from '@esmx/core';
+
+export default {
+    modules: {
+        exports: []
+    },
+    async devApp(esmx) {
+        return import('@esmx/rspack-react').then((m) =>
+            m.createRspackReactApp(esmx, {
+                config(context) {
+                    // Custom Rspack configuration
+                }
+            })
+        );
+    },
+
+    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/react-ssr/src/entry.server.tsx

@@ -0,0 +1,36 @@
+import type { RenderContext } from '@esmx/core';
+import { renderToString } from 'react-dom/server';
+import { createApp } from './create-app';
+
+export default async (rc: RenderContext) => {
+    // Create React app instance
+    const { app } = createApp();
+
+    // Use React's renderToString to generate page content
+    const html = renderToString(app);
+
+    // Commit dependency collection to ensure all necessary resources are loaded
+    await rc.commit();
+
+    // Generate complete HTML structure
+    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="React with Server-Side Rendering powered by Esmx framework">
+    <meta name="keywords" content="React, SSR, Server-Side Rendering, Esmx, React.js, JavaScript, TypeScript, Rspack">
+    <link rel="icon" href="https://esmx.dev/logo.svg" type="image/svg+xml">
+    ${rc.preload()}
+    <title>React 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/react-ssr/tsconfig.json

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

package/template/shared-modules/README.md

@@ -0,0 +1,85 @@
+# {{projectName}}
+
+An Esmx project demonstrating Shared Modules solution for micro-frontend architecture.
+
+## 📦 Tech Stack
+
+- **Framework**: [Esmx](https://esmx.dev) - Next generation micro-frontend framework based on native ESM
+- **Solution Focus**: Shared Modules for multi-framework environments
+- **Build Tool**: Rspack
+- **Type Checking**: TypeScript
+
+## 🎯 Core Features
+
+- **Module Sharing**: Share modules across different framework versions
+- **Zero Overhead**: Native ESM-based sharing with no runtime cost
+- **Version Isolation**: Safe module sharing between framework versions
+- **SSR Compatible**: Full server-side rendering support with shared modules
+
+## 🚀 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/
+│   ├── entry.client.ts     # Client-side entry
+│   ├── entry.node.ts       # Node.js environment entry point
+│   ├── entry.server.ts     # Server-side rendering functions
+│   ├── vue/
+│   │   └── index.ts        # Vue 3 shared modules
+│   └── vue2/
+│       └── index.ts        # Vue 2 shared modules
+├── package.json
+├── tsconfig.json
+└── README.md
+```
+
+## 🔧 Configuration Details
+
+- `entry.client.ts` - Responsible for client-side shared module consistency checking
+- `entry.node.ts` - Handles shared module configuration and scope mapping
+- `entry.server.ts` - Manages shared module rendering and HTML generation
+
+## 📚 Additional Resources
+
+- [Esmx Official Documentation](https://esmx.dev)
+- [TypeScript Documentation](https://www.typescriptlang.org)

package/template/shared-modules/package.json

@@ -0,0 +1,28 @@
+{
+    "name": "{{projectName}}",
+    "version": "1.0.0",
+    "description": "Shared modules solution for micro-frontend architecture",
+    "type": "module",
+    "private": true,
+    "scripts": {
+        "dev": "esmx dev",
+        "build": "esmx build",
+        "preview": "esmx preview",
+        "start": "esmx start",
+        "lint:type": "tsc --noEmit",
+        "build:type": "tsc --declaration --emitDeclarationOnly --outDir dist/src && tsc-alias -p tsconfig.json --outDir dist/src"
+    },
+    "dependencies": {
+        "@esmx/core": "{{esmxVersion}}"
+    },
+    "devDependencies": {
+        "vue": "^3.5.23",
+        "@esmx/router": "{{esmxVersion}}",
+        "@esmx/router-vue": "{{esmxVersion}}",
+        "vue2": "npm:vue@2.7.16",
+        "tsc-alias": "^1.8.16",
+        "@esmx/rspack": "{{esmxVersion}}",
+        "@types/node": "^24.10.0",
+        "typescript": "5.9.3"
+    }
+}

package/template/shared-modules/src/entry.client.ts

@@ -0,0 +1,50 @@
+import { version } from './vue/index';
+import { version as vue2Version } from './vue2/index';
+
+const versions = [
+    { name: 'vue3', clientVersion: version },
+    { name: 'vue2', clientVersion: vue2Version }
+];
+
+function checkVersionConsistency() {
+    versions.forEach(({ name, clientVersion }) => {
+        const serverVersion = document.getElementById(
+            `${name}-server-version`
+        )?.textContent;
+        const status = document.getElementById(`${name}-status`);
+        const card = document.getElementById(`${name}-card`);
+
+        const clientVersionEl = document.getElementById(
+            `${name}-client-version`
+        );
+        if (clientVersionEl) clientVersionEl.textContent = clientVersion;
+
+        if (!status || !card) return;
+
+        const isConsistent = clientVersion === serverVersion;
+        status.className = `status-indicator status-${
+            isConsistent ? 'consistent' : 'inconsistent'
+        }`;
+        const icon = status.querySelector('.icon');
+        const text = status.querySelector('span:not(.icon)');
+        if (icon) {
+            icon.className = `icon ${isConsistent ? 'success' : 'error'}`;
+            icon.textContent = isConsistent ? '✓' : '✗';
+        }
+        if (text) {
+            text.textContent = `Module versions ${
+                isConsistent ? 'consistent' : 'inconsistent'
+            }`;
+        }
+
+        if (isConsistent) {
+            card.classList.add('consistency-animation');
+            setTimeout(
+                () => card.classList.remove('consistency-animation'),
+                2000
+            );
+        }
+    });
+}
+
+checkVersionConsistency();

package/template/shared-modules/src/entry.node.ts

@@ -0,0 +1,67 @@
+import http from 'node:http';
+import type { EsmxOptions } from '@esmx/core';
+
+export default {
+    modules: {
+        exports: [
+            // ========== Applicable to all shared modules ==========
+            'pkg:@esmx/router',
+
+            {
+                // ========== Vue framework shared module configuration ==========
+                // Business code: import Vue from 'vue' (defaults to Vue 3, shared from common modules)
+                vue: {
+                    client: 'pkg:vue/dist/vue.runtime.esm-browser.prod.js', // Vue 3 production
+                    server: 'pkg:vue/dist/vue.runtime.esm-browser.js' // Vue 3 development
+                },
+                'vue/index': 'root:src/vue/index.ts',
+                '@esmx/router-vue': 'pkg:@esmx/router-vue', // Vue 3 router
+
+                // ========== Vue2 framework shared module configuration ==========
+                // Exported to vue2/ directory, version isolation via scope mapping
+                vue2: 'pkg:vue2/dist/vue.runtime.esm.js', // → vue2/vue.mjs
+                'vue2/@esmx/router-vue': 'pkg:@esmx/router-vue', // → vue2/@esmx/router-vue.mjs,
+                'vue2/index': 'root:src/vue2/index.ts'
+            }
+        ],
+
+        scopes: {
+            // ========== Vue2 shared module scope mapping ==========
+            // Directory scope mapping: Only affects shared modules in vue2/ directory
+            // Business code in vue2/ directory: import Vue from 'vue' → {{projectName}}/vue2 (version-isolated)
+            // Business code in other directories: import Vue from 'vue' → Vue 3 (shared from common modules)
+            'vue2/': {
+                vue: '{{projectName}}/vue2'
+            }
+
+            // Package scope mapping: Affects dependencies within shared module packages
+            // Example: When 'vue' package depends on 'AA', use replacement version
+            // 'vue': {
+            //     AA: 'some-other-AA'
+            // }
+        }
+    },
+    async devApp(esmx) {
+        return import('@esmx/rspack').then((m) =>
+            m.createRspackHtmlApp(esmx, {
+                chain(context) {
+                    // Custom Rspack configuration
+                }
+            })
+        );
+    },
+    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;