create-hyperpack

Scaffold a new HyperPack project with interactive prompts for templates, language, testing, and UI libraries.

Features

• Interactive Setup — Choose template, language, testing, and UI library via prompts
• Multiple Templates — Hyperion SPA, SSR, React, Vue, Vanilla, and Electron
• Zero Configuration — Pre-configured build, dev, and test scripts
• Optional Testing — HyperTest setup (optional)
• UI Library Support — HyperUI, Material-UI (MUI), Tailwind CSS, or none
• TypeScript-ready — Full TypeScript support with sensible defaults
• Global or Local — Works with npx or as a global CLI tool

Quick Start

Local (npx)

npx @hyperpackai/create-hyperpack my-app
cd my-app
npm install
npm run dev

Global

npm i -g @hyperpackai/create-hyperpack
create-hyperpack my-app
cd my-app
npm install
npm run dev

Interactive Prompts

When you run the scaffolder, you'll be asked:

1. Template

   • hyperion-spa-ts — Hyperion SPA with client-side routing (recommended)
   • hyperion-ssr-ts — Hyperion SSR with file-based pages
   • react-ts — React with TypeScript
   • react-js — React with JavaScript
   • vanilla-ts — Vanilla TypeScript
   • vanilla-js — Vanilla JavaScript
   • vue-ts — Vue 3 with TypeScript
   • vue-js — Vue 3 with JavaScript
   • electron-react-ts — Electron + React
   • electron-vue-ts — Electron + Vue

2. Language — TypeScript or JavaScript (if not already specified)

3. Testing — Include HyperTest? (Y/n)

4. UI Library

   • none — No UI library, just framework
   • HyperUI — Enterprise component library
   • MUI — Material-UI
   • Tailwind — Tailwind CSS utilities

Project Structure

my-app/
├── src/
│   ├── main.tsx          # App entry point
│   ├── App.tsx           # Root component
│   └── styles.css        # Global styles
├── public/               # Static assets
├── index.html            # HTML shell
├── hyperpack.config.ts   # Build configuration
├── hypertest.config.ts   # Test configuration (if HyperTest selected)
├── tsconfig.json         # TypeScript config
└── package.json

Available Commands

After scaffolding, the generated package.json includes:

npm run dev       # Start development server (HMR enabled)
npm run build     # Build for production
npm run preview   # Preview production build locally
npm test          # Run tests (if HyperTest selected)

Hyperion SPA Template

The recommended hyperion-spa-ts template includes:

import { createApp, component, signal } from "@hyperpackai/hyperion";

const App = component(() => (
  <div>
    <h1>Hello, HyperPack!</h1>
    {/* Your components here */}
  </div>
));

createApp(App).mount("#root");

• Signal-based reactivity
• Client-side routing (if using router)
• HyperUI components (if selected)
• TypeScript by default
• Hot module replacement (HMR)

Hyperion SSR Template

The hyperion-ssr-ts template includes:

• File-based routing with .hvx pages
• Server-side rendering with hydration
• Server entry point for deployment
• Built-in asset pipeline

React Templates

React templates come with:

• React 19+ with TypeScript
• Fast Refresh (HMR)
• Optional HyperUI, MUI, or Tailwind
• HyperTest integration (optional)

Electron Templates

Electron templates include:

• Pre-configured Electron main process
• Dev tools in development
• Fast Refresh for renderer
• Native asset bundling

Configuration

HyperPack Config

Edit hyperpack.config.ts to customize the build:

export default {
  entry: "src/main.tsx",
  jsxImportSource: "@hyperpackai/hyperion",
  // ... more config
};

HyperTest Config

If HyperTest is selected, edit hypertest.config.ts:

export default {
  testMatch: ["tests/**/*.test.ts", "src/**/*.test.ts"],
};

Documentation

• HyperPack Docs
• Hyperion Docs
• HyperUI Components
• HyperTest Guide

License

MIT