create-esmx 3.0.0-rc.104

package/src/utils/template.test.ts

@@ -0,0 +1,234 @@
+/**
+ * Unit tests for template variable replacement utilities
+ */
+
+import { describe, expect, it } from 'vitest';
+import { replaceTemplateVariables } from './template';
+
+describe('replaceTemplateVariables', () => {
+    describe('basic functionality', () => {
+        it('should replace single variable', () => {
+            // Arrange
+            const content = 'Hello {{name}}!';
+            const variables = { name: 'World' };
+
+            // Act
+            const result = replaceTemplateVariables(content, variables);
+
+            // Assert
+            expect(result).toBe('Hello World!');
+        });
+
+        it('should replace multiple different variables', () => {
+            // Arrange
+            const content = 'Project {{projectName}} version {{version}}';
+            const variables = {
+                projectName: 'my-app',
+                version: '1.0.0'
+            };
+
+            // Act
+            const result = replaceTemplateVariables(content, variables);
+
+            // Assert
+            expect(result).toBe('Project my-app version 1.0.0');
+        });
+
+        it('should replace same variable multiple times', () => {
+            // Arrange
+            const content = '{{greeting}} {{name}}, {{greeting}} again!';
+            const variables = {
+                greeting: 'Hello',
+                name: 'World'
+            };
+
+            // Act
+            const result = replaceTemplateVariables(content, variables);
+
+            // Assert
+            expect(result).toBe('Hello World, Hello again!');
+        });
+    });
+
+    describe('edge cases', () => {
+        it('should handle content without variables', () => {
+            // Arrange
+            const content = 'No variables here';
+            const variables = { name: 'World' };
+
+            // Act
+            const result = replaceTemplateVariables(content, variables);
+
+            // Assert
+            expect(result).toBe('No variables here');
+        });
+
+        it('should handle empty variables object', () => {
+            // Arrange
+            const content = 'Hello {{name}}!';
+            const variables = {};
+
+            // Act
+            const result = replaceTemplateVariables(content, variables);
+
+            // Assert
+            expect(result).toBe('Hello {{name}}!');
+        });
+
+        it('should handle empty content', () => {
+            // Arrange
+            const content = '';
+            const variables = { name: 'World' };
+
+            // Act
+            const result = replaceTemplateVariables(content, variables);
+
+            // Assert
+            expect(result).toBe('');
+        });
+
+        it('should handle variables with special characters', () => {
+            // Arrange
+            const content = 'Command: {{installCommand}}';
+            const variables = { installCommand: 'npm install --save-dev' };
+
+            // Act
+            const result = replaceTemplateVariables(content, variables);
+
+            // Assert
+            expect(result).toBe('Command: npm install --save-dev');
+        });
+
+        it('should handle variables with regex special characters', () => {
+            // Arrange
+            const content = 'Pattern: {{pattern}}';
+            const variables = { pattern: '[a-z]+.*$' };
+
+            // Act
+            const result = replaceTemplateVariables(content, variables);
+
+            // Assert
+            expect(result).toBe('Pattern: [a-z]+.*$');
+        });
+    });
+
+    describe('real-world scenarios', () => {
+        it('should handle all template variables from create-esmx', () => {
+            // Arrange
+            const content = `# {{projectName}}
+
+Install dependencies:
+\`\`\`bash
+{{installCommand}}
+\`\`\`
+
+Start development:
+\`\`\`bash
+{{devCommand}}
+\`\`\`
+
+Build for production:
+\`\`\`bash
+{{buildCommand}}
+\`\`\`
+
+Start production server:
+\`\`\`bash
+{{startCommand}}
+\`\`\`
+
+Esmx version: {{esmxVersion}}`;
+
+            const variables = {
+                projectName: 'my-awesome-app',
+                installCommand: 'pnpm install',
+                devCommand: 'pnpm dev',
+                buildCommand: 'pnpm build',
+                startCommand: 'pnpm start',
+                esmxVersion: '3.0.0-rc.33'
+            };
+
+            // Act
+            const result = replaceTemplateVariables(content, variables);
+
+            // Assert
+            expect(result).toContain('# my-awesome-app');
+            expect(result).toContain('pnpm install');
+            expect(result).toContain('pnpm dev');
+            expect(result).toContain('pnpm build');
+            expect(result).toContain('pnpm start');
+            expect(result).toContain('3.0.0-rc.33');
+            expect(result).not.toContain('{{');
+            expect(result).not.toContain('}}');
+        });
+
+        it('should handle package.json template', () => {
+            // Arrange
+            const content = `{
+  "name": "{{projectName}}",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "esmx dev",
+    "build": "esmx build",
+    "start": "esmx start"
+  },
+  "dependencies": {
+    "esmx": "{{esmxVersion}}"
+  }
+}`;
+
+            const variables = {
+                projectName: '@scope/my-package',
+                esmxVersion: '^3.0.0'
+            };
+
+            // Act
+            const result = replaceTemplateVariables(content, variables);
+
+            // Assert
+            expect(result).toContain('"name": "@scope/my-package"');
+            expect(result).toContain('"esmx": "^3.0.0"');
+        });
+    });
+
+    describe('variable name validation', () => {
+        it('should handle variables with underscores', () => {
+            // Arrange
+            const content = 'Command: {{install_command}}';
+            const variables = { install_command: 'npm install' };
+
+            // Act
+            const result = replaceTemplateVariables(content, variables);
+
+            // Assert
+            expect(result).toBe('Command: npm install');
+        });
+
+        it('should handle variables with numbers', () => {
+            // Arrange
+            const content = 'Node version: {{node18}}';
+            const variables = { node18: 'v18.12.0' };
+
+            // Act
+            const result = replaceTemplateVariables(content, variables);
+
+            // Assert
+            expect(result).toBe('Node version: v18.12.0');
+        });
+
+        it('should be case sensitive', () => {
+            // Arrange
+            const content = 'Hello {{Name}} and {{name}}!';
+            const variables = {
+                Name: 'Alice',
+                name: 'Bob'
+            };
+
+            // Act
+            const result = replaceTemplateVariables(content, variables);
+
+            // Assert
+            expect(result).toBe('Hello Alice and Bob!');
+        });
+    });
+});

package/src/utils/template.ts

@@ -0,0 +1,34 @@
+/**
+ * Template variable replacement utilities
+ */
+
+/**
+ * Replace template variables in content using mustache-style syntax {{variableName}}
+ *
+ * @param content - The content string containing template variables
+ * @param variables - Object containing variable names and their replacement values
+ * @returns Content with all template variables replaced
+ *
+ * @example
+ * ```typescript
+ * const content = "Hello {{name}}, version {{version}}!";
+ * const variables = { name: "World", version: "1.0.0" };
+ * const result = replaceTemplateVariables(content, variables);
+ * // Result: "Hello World, version 1.0.0!"
+ * ```
+ */
+export function replaceTemplateVariables(
+    content: string,
+    variables: Record<string, string>
+): string {
+    let result = content;
+
+    // Iterate through all variables and replace them
+    for (const [key, value] of Object.entries(variables)) {
+        // Create regex pattern for {{variableName}} with global flag
+        const pattern = new RegExp(`\\{\\{${key}\\}\\}`, 'g');
+        result = result.replace(pattern, value);
+    }
+
+    return result;
+}

package/template/react-csr/README.md

@@ -0,0 +1,81 @@
+# {{projectName}}
+
+An Esmx project with React and Client-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**: 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.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   # CSR HTML shell (no SSR)
+├── package.json
+├── tsconfig.json
+└── README.md
+```
+
+## 🔧 Configuration Details
+
+- `entry.client.ts` - Responsible for client-side interaction and dynamic updates
+- `entry.node.ts` - Handles development environment setup and tooling
+- `entry.server.tsx` - Generates the HTML shell for CSR (no SSR)
+
+## 📚 Additional Resources
+
+- [Esmx Official Documentation](https://esmx.dev)
+- [React Documentation](https://react.dev)
+- [TypeScript Documentation](https://www.typescriptlang.org)
+

package/template/react-csr/package.json

@@ -0,0 +1,29 @@
+{
+    "name": "{{projectName}}",
+    "version": "1.0.0",
+    "description": "React Client-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-csr/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-csr/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 CSR 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-csr/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-csr/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 client-side rendering powered by Esmx framework</p>
+        </div>
+    );
+}
+

package/template/react-csr/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-csr/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-csr/src/entry.node.ts

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

@@ -0,0 +1,27 @@
+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="React with Client-Side Rendering powered by Esmx framework">
+    <meta name="keywords" content="React, CSR, Client-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 CSR Demo | Powered by Esmx</title>
+    ${rc.css()}
+</head>
+<body>
+    <div id="app"></div>
+    ${rc.importmap()}
+    ${rc.moduleEntry()}
+    ${rc.modulePreload()}
+</body>
+</html>
+`;
+};
+

package/template/react-csr/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"]
+}
+