OpenComponents Vite Templates

Home for the new vite-based OpenComponents templates. This monorepo contains templates and tools for building OpenComponents (OC) micro frontends using modern JavaScript frameworks and Vite.

Quick Start

Create a new OpenComponent using the interactive CLI:

npm create oc@latest

Or specify the component name and template directly:

npm create oc@latest my-component --template react

Requirements

• Node.js version 20 or higher
• npm or yarn package manager

Available Templates

The create-oc CLI supports the following templates:

🍦 Vanilla JavaScript (ES6)

Template ID: es6

A lightweight template using vanilla JavaScript with TypeScript support. Perfect for simple components without framework overhead.

Features:

• TypeScript support
• Minimal dependencies
• Fast build times
• OC server development mode

⚛️ React

Template ID: react

Full-featured React template with modern development tools and testing setup.

Features:

• React 18.3.1 with TypeScript
• ESLint configuration
• Vitest for testing
• React Testing Library
• Hot module replacement
• Production-ready build configuration

🟦 Solid

Template ID: solid

Template using SolidJS for high-performance reactive components.

Features:

• SolidJS framework
• TypeScript support
• Reactive state management
• Small bundle size

🔮 Preact

Template ID: preact

Lightweight alternative to React with the same API but smaller footprint.

Features:

• Preact framework
• React-compatible API
• Smaller bundle size
• TypeScript support

💚 Vue

Template ID: vue

Vue.js template for building components with the Vue ecosystem.

Features:

• Vue 3 Composition API
• TypeScript support
• Single File Components
• Vite configuration

🧡 Svelte

Template ID: svelte

Svelte template for compile-time optimized components.

Features:

• Svelte framework
• Compile-time optimization
• TypeScript support
• Minimal runtime

🌳 Elm

Template ID: elm

Functional programming template using the Elm language.

Features:

• Elm language support
• Functional programming paradigm
• Strong type system
• No runtime exceptions

🚧 ESM (Beta)

Template ID: esm

Experimental template using ES modules with modern JavaScript features.

Features:

• Native ES modules
• Modern JavaScript
• Experimental features
• Beta status

Template Structure

Each generated component follows a consistent structure:

my-component/
├── package.json          # Component configuration and dependencies
├── src/
│   ├── server.ts        # Server-side data fetching logic
│   ├── App.tsx          # Main component (React example)
│   └── styles.css       # Component styles
├── public/              # Static assets
├── tsconfig.json        # TypeScript configuration
└── vite.config.ts       # Vite build configuration

Key Files

• src/server.ts: Contains the server-side logic for data fetching and processing
• src/App.tsx (or equivalent): The main component template file
• package.json: Includes OC-specific configuration in the oc field
• public/: Static assets that will be served alongside the component

Development Workflow

After creating a component:

1. Install dependencies:

   cd my-component
   npm install

2. Start development server:

   npm start
   # or
   npm run dev

3. Build for production:

   npm run build

4. Run tests (where available):

   npm test

OpenComponents Configuration

Each template includes an oc configuration in package.json:

{
  "oc": {
    "files": {
      "data": "src/server.ts",
      "template": {
        "src": "src/App.tsx",
        "type": "oc-template-react"
      },
      "static": ["public"]
    }
  }
}

• data: Server-side data fetching logic
• template.src: Main component file
• template.type: Template renderer type
• static: Static asset directories

Template Packages

This monorepo includes the following template renderer packages:

Template	Package	Version
ES6/Vanilla	oc-template-es6
React	oc-template-react
Preact	oc-template-preact
Solid	oc-template-solid
Vue	oc-template-vue
Svelte	oc-template-svelte
Elm	oc-template-elm
ESM	oc-template-esm

Supporting Packages

Package	Description	Version
create-oc	CLI tool for scaffolding components
oc-server	Development server for OC components
oc-vite	Vite integration for OpenComponents
oc-vite-compiler	Vite-based compiler for OC templates

External Dependencies

Templates are configured to load framework dependencies from CDN in production:

• React: Loaded from unpkg.com with global React and ReactDOM
• Vue: Loaded from unpkg.com with global Vue
• Solid: Bundled with the component
• Other frameworks: Various CDN configurations

This approach reduces bundle sizes and allows for better caching across components.

Contributing

This is a monorepo managed with Turbo. To contribute:

1. Clone the repository
2. Install dependencies: npm install
3. Make your changes
4. Test across templates
5. Submit a pull request

Learn More

• OpenComponents Documentation
• OpenComponents GitHub
• Vite Documentation

License

MIT