@sansavision/create-pulse 0.1.0-alpha.1

package/README.md

@@ -0,0 +1,58 @@
+# @sansavision/create-pulse
+
+The official scaffolding tool for creating Pulse applications.
+
+`create-pulse` generates a battle-tested, TypeScript-ready React application pre-configured to connect to a Pulse Relay. It eliminates the boilerplate of setting up WebSocket/WebTransport connections and provides robust React hooks.
+
+## Usage
+
+You can create a new Pulse project interactively by running:
+
+```bash
+npm create pulse@latest
+# or
+npx @sansavision/create-pulse
+# or
+bunx @sansavision/create-pulse
+```
+
+You can optionally specify the project name directly:
+
+```bash
+npx @sansavision/create-pulse my-pulse-app
+```
+
+## Available Templates
+
+When you run `create-pulse`, you'll be prompted to select a template. 
+
+### 1. Watch Together (React + TS)
+A clean implementation of the "Watch Together" synchronized video player. 
+- Features a custom `usePulse` hook for lifecycle management.
+- Handles syncing `play`, `pause`, and `seek` events across clients natively via the Pulse Relay.
+- Built with React, Vite, Tailwind CSS, and TypeScript.
+
+### 2. All Features (React + TS)
+A kitchen-sink boilerplate that integrates multiple features.
+- Perfect for exploring the SDK limits.
+- Contains stubs and route setups for Chat, Metrics, and Video sync.
+- Built with React, Vite, Tailwind CSS, and TypeScript.
+
+## Running Your Scaffolded App
+
+After your app is generated:
+
+1. Navigate to the project directory:
+   ```bash
+   cd my-pulse-app
+   ```
+2. Install dependencies:
+   ```bash
+   npm install
+   ```
+3. Start the dev server:
+   ```bash
+   npm run dev
+   ```
+
+**Note:** The templates are configured by default to connect to a local Pulse Relay running at `ws://localhost:4001`. Ensure your local Rust relay is running, or update `src/App.tsx` to point to a production relay URL.

package/dist/index.d.ts

@@ -0,0 +1 @@
+#!/usr/bin/env node

package/dist/index.js

@@ -0,0 +1,115 @@
+#!/usr/bin/env node
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// src/index.ts
+var p = __toESM(require("@clack/prompts"));
+var import_picocolors = __toESM(require("picocolors"));
+var import_mri = __toESM(require("mri"));
+var import_fs = __toESM(require("fs"));
+var import_path = __toESM(require("path"));
+var argv = (0, import_mri.default)(process.argv.slice(2));
+var TEMPLATES_DIR = import_path.default.join(__dirname, "../templates");
+async function main() {
+  p.intro(import_picocolors.default.bgMagenta(import_picocolors.default.white(" Create Pulse App ")));
+  let targetDir = argv._[0];
+  const project = await p.group(
+    {
+      path: () => {
+        if (targetDir) return Promise.resolve(targetDir);
+        return p.text({
+          message: "Project name:",
+          initialValue: "pulse-app",
+          validate: (val) => {
+            if (!val || val.trim() === "") return "Project name is required";
+            return;
+          }
+        });
+      },
+      template: () => {
+        return p.select({
+          message: "Pick a template:",
+          options: [
+            { value: "react-watch-together", label: "Watch Together (React + TS)", hint: "Synchronized video playback" },
+            { value: "react-all-features", label: "All Features (React + TS)", hint: "Chat, Video, Audio, RPC" },
+            { value: "vanilla-basic", label: "Vanilla JS (Basic)", hint: "Minimal setup" }
+          ]
+        });
+      }
+    },
+    {
+      onCancel: () => {
+        p.cancel("Operation cancelled.");
+        process.exit(0);
+      }
+    }
+  );
+  const destDir = import_path.default.resolve(process.cwd(), project.path);
+  if (!import_fs.default.existsSync(destDir)) {
+    import_fs.default.mkdirSync(destDir, { recursive: true });
+  }
+  const s = p.spinner();
+  s.start(`Scaffolding project in ${import_picocolors.default.cyan(project.path)}...`);
+  const templateDir = import_path.default.join(TEMPLATES_DIR, project.template);
+  if (!import_fs.default.existsSync(templateDir)) {
+    s.stop(import_picocolors.default.red(`Template ${project.template} not found at ${templateDir}`));
+    process.exit(1);
+  }
+  copyDir(templateDir, destDir);
+  const gitignorePath = import_path.default.join(destDir, "_gitignore");
+  if (import_fs.default.existsSync(gitignorePath)) {
+    import_fs.default.renameSync(gitignorePath, import_path.default.join(destDir, ".gitignore"));
+  }
+  const pkgPath = import_path.default.join(destDir, "package.json");
+  if (import_fs.default.existsSync(pkgPath)) {
+    const pkg = JSON.parse(import_fs.default.readFileSync(pkgPath, "utf-8"));
+    pkg.name = import_path.default.basename(destDir);
+    import_fs.default.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2));
+  }
+  s.stop(`Scaffolded ${import_picocolors.default.cyan(project.template)} template in ${import_picocolors.default.cyan(project.path)}`);
+  p.note(
+    `cd ${project.path}
+npm install
+npm run dev`,
+    "Next steps"
+  );
+  p.outro(import_picocolors.default.magenta("Pulse is ready! \u{1F680}"));
+}
+function copyDir(src, dest) {
+  const entries = import_fs.default.readdirSync(src, { withFileTypes: true });
+  for (const entry of entries) {
+    const srcPath = import_path.default.join(src, entry.name);
+    if (entry.name === "node_modules" || entry.name === "dist") continue;
+    const destPath = import_path.default.join(dest, entry.name);
+    if (entry.isDirectory()) {
+      if (!import_fs.default.existsSync(destPath)) {
+        import_fs.default.mkdirSync(destPath);
+      }
+      copyDir(srcPath, destPath);
+    } else {
+      import_fs.default.copyFileSync(srcPath, destPath);
+    }
+  }
+}
+main().catch(console.error);

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@sansavision/create-pulse",
+  "version": "0.1.0-alpha.1",
+  "description": "Scaffold a new Pulse application",
+  "main": "dist/index.js",
+  "bin": {
+    "create-pulse": "dist/index.js"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs --dts",
+    "dev": "tsup src/index.ts --format cjs --watch"
+  },
+  "keywords": [
+    "pulse",
+    "create-pulse",
+    "scaffold",
+    "cli"
+  ],
+  "author": "Sansa",
+  "license": "MIT",
+  "dependencies": {
+    "@clack/prompts": "^0.7.0",
+    "mri": "^1.2.0",
+    "picocolors": "^1.0.0"
+  },
+  "devDependencies": {
+    "@types/mri": "^1.1.5",
+    "@types/node": "^20.0.0",
+    "tsup": "^8.0.2",
+    "typescript": "^5.0.0"
+  }
+}

package/src/index.ts

@@ -0,0 +1,114 @@
+#!/usr/bin/env node
+import * as p from '@clack/prompts';
+import pc from 'picocolors';
+import mri from 'mri';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const argv = mri(process.argv.slice(2));
+
+// In CommonJS, __dirname is available, but since we compile with tsup to CJS, we can just use __dirname.
+const TEMPLATES_DIR = path.join(__dirname, '../templates');
+
+async function main() {
+    p.intro(pc.bgMagenta(pc.white(' Create Pulse App ')));
+
+    let targetDir = argv._[0];
+
+    const project = await p.group(
+        {
+            path: () => {
+                if (targetDir) return Promise.resolve(targetDir);
+                return p.text({
+                    message: 'Project name:',
+                    initialValue: 'pulse-app',
+                    validate: (val) => {
+                        if (!val || val.trim() === '') return 'Project name is required';
+                        return;
+                    }
+                });
+            },
+            template: () => {
+                return p.select({
+                    message: 'Pick a template:',
+                    options: [
+                        { value: 'react-watch-together', label: 'Watch Together (React + TS)', hint: 'Synchronized video playback' },
+                        { value: 'react-all-features', label: 'All Features (React + TS)', hint: 'Chat, Video, Audio, RPC' },
+                        { value: 'vanilla-basic', label: 'Vanilla JS (Basic)', hint: 'Minimal setup' }
+                    ]
+                });
+            }
+        },
+        {
+            onCancel: () => {
+                p.cancel('Operation cancelled.');
+                process.exit(0);
+            }
+        }
+    );
+
+    const destDir = path.resolve(process.cwd(), project.path);
+    if (!fs.existsSync(destDir)) {
+        fs.mkdirSync(destDir, { recursive: true });
+    }
+
+    const s = p.spinner();
+    s.start(`Scaffolding project in ${pc.cyan(project.path)}...`);
+
+    const templateDir = path.join(TEMPLATES_DIR, project.template as string);
+
+    if (!fs.existsSync(templateDir)) {
+        s.stop(pc.red(`Template ${project.template} not found at ${templateDir}`));
+        process.exit(1);
+    }
+
+    copyDir(templateDir, destDir);
+
+    // Rename _gitignore to .gitignore
+    const gitignorePath = path.join(destDir, '_gitignore');
+    if (fs.existsSync(gitignorePath)) {
+        fs.renameSync(gitignorePath, path.join(destDir, '.gitignore'));
+    }
+
+    // Update package.json name to match the project path
+    const pkgPath = path.join(destDir, 'package.json');
+    if (fs.existsSync(pkgPath)) {
+        const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'));
+        pkg.name = path.basename(destDir);
+        fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2));
+    }
+
+    s.stop(`Scaffolded ${pc.cyan(project.template)} template in ${pc.cyan(project.path)}`);
+
+    p.note(
+        `cd ${project.path}\n` +
+        `npm install\n` +
+        `npm run dev`,
+        'Next steps'
+    );
+
+    p.outro(pc.magenta('Pulse is ready! 🚀'));
+}
+
+function copyDir(src: string, dest: string) {
+    const entries = fs.readdirSync(src, { withFileTypes: true });
+
+    for (const entry of entries) {
+        const srcPath = path.join(src, entry.name);
+        if (entry.name === 'node_modules' || entry.name === 'dist') continue;
+
+        const destPath = path.join(dest, entry.name);
+
+        if (entry.isDirectory()) {
+            if (!fs.existsSync(destPath)) {
+                fs.mkdirSync(destPath);
+            }
+            copyDir(srcPath, destPath);
+        } else {
+            fs.copyFileSync(srcPath, destPath);
+        }
+    }
+}
+
+main().catch(console.error);

package/templates/react-all-features/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en" class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Watch Together - Pulse Demo</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>