create-vulajs-app 1.1.0

package/bin/index.js

@@ -0,0 +1,42 @@
+#!/usr/bin/env node
+const fs = require('fs');
+const path = require('path');
+
+const projectName = process.argv[2];
+
+if (!projectName) {
+  console.error('\x1b[31mPlease specify the project directory:\x1b[0m');
+  console.error('  npx create-vulajs-app <project-directory>');
+  process.exit(1);
+}
+
+const targetDir = path.join(process.cwd(), projectName);
+
+if (fs.existsSync(targetDir)) {
+  console.error(`\x1b[31mDirectory ${projectName} already exists.\x1b[0m`);
+  process.exit(1);
+}
+
+const templateDir = path.join(__dirname, '../template');
+
+console.log(`\x1b[36mCreating a new Vula.js app in ${targetDir}...\x1b[0m`);
+
+// Copy template files
+fs.cpSync(templateDir, targetDir, { recursive: true });
+
+// Update package.json name
+const packageJsonPath = path.join(targetDir, 'package.json');
+const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+packageJson.name = projectName;
+fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));
+
+console.log('\x1b[32mSuccess! Created', projectName, '\x1b[0m');
+console.log('Inside that directory, you can run several commands:\n');
+console.log('  \x1b[36mnpm install\x1b[0m');
+console.log('    Installs dependencies.\n');
+console.log('  \x1b[36mnpm run dev\x1b[0m');
+console.log('    Starts the development server.\n');
+console.log('We suggest that you begin by typing:\n');
+console.log(`  \x1b[36mcd ${projectName}\x1b[0m`);
+console.log('  \x1b[36mnpm install\x1b[0m');
+console.log('  \x1b[36mnpm run dev\x1b[0m');

package/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "create-vulajs-app",
+  "version": "1.1.0",
+  "description": "Create a new Vula.js application",
+  "bin": {
+    "create-vulajs-app": "./bin/index.js"
+  }
+}

package/template/app/api/counter.sever.comp.ts

@@ -0,0 +1,7 @@
+/**
+ * Server component: counter
+ * Runs on the server only. Called from the client via Vula.server().
+ */
+export default async function counter(currentValue: number) {
+  return currentValue + 1;
+}

package/template/app/api/hello.ts

@@ -0,0 +1,3 @@
+export async function GET(req: any, res: any) {
+  res.json({ message: "Hello from Vula.js API!" });
+}

package/template/app/page.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+export default function Home() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', padding: '2rem', backgroundColor: '#0f172a', color: '#f8fafc', fontFamily: 'system-ui, sans-serif' }}>
+      
+      {/* Vula Logo / Hero */}
+      <div style={{ marginBottom: '2rem', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+        <div style={{ width: '100px', height: '100px', borderRadius: '24px', background: 'linear-gradient(135deg, #3b82f6, #8b5cf6)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: '1.5rem', boxShadow: '0 10px 25px -5px rgba(139, 92, 246, 0.5)' }}>
+          <span style={{ fontSize: '3rem', fontWeight: 'bold', color: 'white' }}>V</span>
+        </div>
+        <h1 style={{ fontSize: '3.5rem', fontWeight: '800', margin: '0', background: '-webkit-linear-gradient(0deg, #60a5fa, #c084fc)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>
+          Vula.js
+        </h1>
+        <h2 style={{ fontSize: '1.5rem', fontWeight: '500', color: '#94a3b8', marginTop: '0.5rem', margin: '0' }}>
+          Swavoti/vulajs
+        </h2>
+      </div>
+
+      {/* Introduction */}
+      <p style={{ fontSize: '1.25rem', color: '#cbd5e1', textAlign: 'center', maxWidth: '600px', lineHeight: '1.6', marginBottom: '3rem' }}>
+        The blazingly fast, minimal file-based React framework powered by Rspack. 
+        Experience instant hot module replacement, zero-config SSR, and beautiful out-of-the-box defaults.
+      </p>
+      
+      {/* Call to Actions */}
+      <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', justifyContent: 'center' }}>
+        <a href="https://github.com/nguyenblacks/vulajs" target="_blank" rel="noreferrer" style={{ padding: '1rem 2rem', backgroundColor: '#3b82f6', borderRadius: '9999px', textDecoration: 'none', color: '#ffffff', fontWeight: '600', fontSize: '1.125rem', transition: 'background-color 0.2s', boxShadow: '0 4px 6px -1px rgba(59, 130, 246, 0.4)' }}>
+          View Docs on GitHub
+        </a>
+        <a href="/api/hello" style={{ padding: '1rem 2rem', backgroundColor: 'transparent', border: '2px solid #475569', borderRadius: '9999px', textDecoration: 'none', color: '#f8fafc', fontWeight: '600', fontSize: '1.125rem', transition: 'border-color 0.2s' }}>
+          Test API Route
+        </a>
+      </div>
+      
+    </div>
+  );
+}

package/template/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Vula App</title>
+</head>
+<body>
+  <div id="root"></div>
+</body>
+</html>

package/template/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "vulajs-template",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "vula dev",
+    "build": "vula build"
+  },
+  "dependencies": {
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "@swavoti/vula": "latest",
+    "@vula/video-opti": "latest"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "babel-loader": "^9.1.3",
+    "@babel/core": "^7.23.0",
+    "babel-plugin-react-compiler": "latest"
+  }
+}

package/template/rspack.config.js

@@ -0,0 +1,65 @@
+const path = require('path');
+const { defineConfig } = require('@rspack/cli');
+const { ReactRefreshRspackPlugin } = require('@rspack/plugin-react-refresh');
+const rspack = require('@rspack/core');
+
+module.exports = defineConfig({
+  entry: {
+    main: './src/index.tsx',
+  },
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.jsx'],
+    alias: {
+      '@app': path.resolve(__dirname, 'app'),
+    },
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(j|t)sx?$/,
+        exclude: [/[\\/]node_modules[\\/]/],
+        use: [
+          {
+            loader: 'builtin:swc-loader',
+            options: {
+              jsc: {
+                parser: { syntax: 'typescript', tsx: true },
+                transform: { react: { runtime: 'automatic', refresh: true } },
+              },
+            },
+          },
+          {
+            loader: 'babel-loader',
+            options: {
+              plugins: [['babel-plugin-react-compiler', { target: '19' }]],
+            },
+          },
+        ],
+        type: 'javascript/auto',
+      },
+      {
+        test: /\.css$/,
+        type: 'css',
+      },
+    ],
+  },
+  plugins: [
+    new ReactRefreshRspackPlugin(),
+    new rspack.HtmlRspackPlugin({ template: './index.html' }),
+  ],
+  devServer: {
+    port: 3000,
+    hot: true,
+    historyApiFallback: true,
+    static: { directory: path.join(__dirname, 'public') },
+  },
+  output: {
+    clean: true,
+    path: path.resolve(__dirname, 'dist'),
+  },
+  optimization: {
+    splitChunks: {
+      chunks: 'all',
+    },
+  },
+});

package/template/src/globals.css

@@ -0,0 +1,11 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  background-color: #f9fafb;
+  color: #111827;
+}
+
+h1, h2, h3, p {
+  margin: 0;
+}

package/template/src/index.tsx

@@ -0,0 +1,50 @@
+import React, { Suspense, lazy } from 'react';
+import ReactDOM from 'react-dom/client';
+import { match } from 'path-to-regexp';
+import './globals.css';
+
+// Route manifest generated by the Vula CLI
+// @ts-ignore
+import manifest from '../.vula-routes.json';
+
+function Router() {
+  const pathname = window.location.pathname;
+
+  let matchedRoute: any = null;
+  let matchedParams: Record<string, string> = {};
+
+  for (const route of manifest.routes) {
+    const fn = match(route.path, { decode: decodeURIComponent });
+    const result = fn(pathname);
+    if (result) {
+      matchedRoute = route;
+      matchedParams = result.params as Record<string, string>;
+      break;
+    }
+  }
+
+  if (!matchedRoute) {
+    return (
+      <div style={{ padding: '4rem', textAlign: 'center', fontFamily: 'system-ui' }}>
+        <h1 style={{ fontSize: '3rem', marginBottom: '1rem' }}>404</h1>
+        <p>Page not found.</p>
+      </div>
+    );
+  }
+
+  const relativePath = matchedRoute.componentPath.split('app')[1];
+  const Component = lazy(() => import(`@app${relativePath}`));
+
+  return (
+    <Suspense fallback={<div style={{ padding: '2rem', textAlign: 'center' }}>Loading...</div>}>
+      <Component params={matchedParams} />
+    </Suspense>
+  );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('root')!);
+root.render(
+  <React.StrictMode>
+    <Router />
+  </React.StrictMode>
+);

package/template/src/vula.ts

@@ -0,0 +1,25 @@
+export class Vula {
+  static async server(name: string, ...args: any[]) {
+    const res = await fetch('/_vula/server-component', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name, args }),
+    });
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ error: res.statusText }));
+      throw new Error(err.error || `Server component "${name}" failed`);
+    }
+    const { result } = await res.json();
+    return result;
+  }
+
+  static async api(path: string, options: RequestInit = {}) {
+    const url = path.startsWith('/') ? path : `/api/${path}`;
+    const res = await fetch(url, options);
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ error: res.statusText }));
+      throw new Error(err.error || `API ${path} returned ${res.status}`);
+    }
+    return res.json();
+  }
+}

package/template/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "baseUrl": ".",
+    "paths": {
+      "@app/*": ["app/*"]
+    }
+  },
+  "include": ["src", "app"],
+  "exclude": ["node_modules"]
+}

package/template/vulaism.config.yaml

@@ -0,0 +1,48 @@
+# vulaism.config.yaml
+# Vula.js project configuration file.
+# All options are optional - defaults will apply when omitted.
+
+app:
+  name: "My Vula App"
+  # Path to favicon/icon, relative to project root (from assets/ folder)
+  icon: "assets/icon.png"
+  # Default HTML language attribute
+  lang: "en"
+
+optimization:
+  # Enable text optimizations (minification hints, compression headers)
+  text-opt: true
+  # Preload critical fonts via <link rel="preload">
+  font-preload: true
+  # CSS font-display strategy: swap | block | fallback | optional
+  font-display: "swap"
+  # Remove unused glyphs from fonts in production builds
+  font-subset: true
+  # Enable image compression hints during build
+  image-compression: true
+  # Minify injected HTML tags
+  minify-html: false
+
+security:
+  # Enable CSRF origin protection middleware
+  csrf: true
+  # Whitelist origins for CSRF (empty = allow all in dev)
+  allowed-origins: []
+  # Inject Content-Security-Policy headers
+  content-security-policy: false
+
+proxy:
+  # Enable the built-in HTTP proxy
+  enabled: false
+  # Target URL to proxy requests to
+  target: "http://localhost:8080"
+  # URL prefix to trigger the proxy
+  prefix: "/proxy"
+
+server:
+  # Port to run the dev server on
+  port: 3000
+  # Enable gzip compression for responses
+  compression: true
+  # Trust X-Forwarded-* headers (set true when behind a reverse proxy)
+  trust-proxy: false