{"id":24159170,"url":"https://github.com/opencomponents/vite-templates","last_synced_at":"2025-10-09T13:14:28.253Z","repository":{"id":207841865,"uuid":"720231106","full_name":"opencomponents/vite-templates","owner":"opencomponents","description":"New set of templates based on Vite","archived":false,"fork":false,"pushed_at":"2025-10-03T08:20:39.000Z","size":1781,"stargazers_count":0,"open_issues_count":0,"forks_count":2,"subscribers_count":11,"default_branch":"main","last_synced_at":"2025-10-03T10:25:16.520Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/opencomponents.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-11-17T21:57:12.000Z","updated_at":"2025-10-03T08:20:42.000Z","dependencies_parsed_at":"2023-11-17T23:57:32.704Z","dependency_job_id":"801e741e-1d6d-4c80-8d4c-92f92949dc17","html_url":"https://github.com/opencomponents/vite-templates","commit_stats":{"total_commits":226,"total_committers":2,"mean_commits":113.0,"dds":0.1415929203539823,"last_synced_commit":"64ed133d08621f6e991a9adb02a78fd22875ba83"},"previous_names":["opencomponents/vite-templates"],"tags_count":66,"template":false,"template_full_name":null,"purl":"pkg:github/opencomponents/vite-templates","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opencomponents%2Fvite-templates","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opencomponents%2Fvite-templates/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opencomponents%2Fvite-templates/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opencomponents%2Fvite-templates/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/opencomponents","download_url":"https://codeload.github.com/opencomponents/vite-templates/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opencomponents%2Fvite-templates/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279001540,"owners_count":26083102,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-09T02:00:07.460Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-12T15:14:59.508Z","updated_at":"2025-10-09T13:14:28.207Z","avatar_url":"https://github.com/opencomponents.png","language":"TypeScript","readme":"# OpenComponents Vite Templates\n\nHome for the new vite-based [OpenComponents](https://opencomponents.github.io) templates. This monorepo contains templates and tools for building OpenComponents (OC) micro frontends using modern JavaScript frameworks and Vite.\n\n## Quick Start\n\nCreate a new OpenComponent using the interactive CLI:\n\n```bash\nnpm create oc@latest\n```\n\nOr specify the component name and template directly:\n\n```bash\nnpm create oc@latest my-component --template react\n```\n\n## Requirements\n\n- Node.js version 20 or higher\n- npm or yarn package manager\n\n## Available Templates\n\nThe `create-oc` CLI supports the following templates:\n\n### 🍦 Vanilla JavaScript (ES6)\n\n**Template ID:** `es6`\n\nA lightweight template using vanilla JavaScript with TypeScript support. Perfect for simple components without framework overhead.\n\n**Features:**\n\n- TypeScript support\n- Minimal dependencies\n- Fast build times\n- OC server development mode\n\n### ⚛️ React\n\n**Template ID:** `react`\n\nFull-featured React template with modern development tools and testing setup.\n\n**Features:**\n\n- React 18.3.1 with TypeScript\n- ESLint configuration\n- Vitest for testing\n- React Testing Library\n- Hot module replacement\n- Production-ready build configuration\n\n### 🟦 Solid\n\n**Template ID:** `solid`\n\nTemplate using SolidJS for high-performance reactive components.\n\n**Features:**\n\n- SolidJS framework\n- TypeScript support\n- Reactive state management\n- Small bundle size\n\n### 🔮 Preact\n\n**Template ID:** `preact`\n\nLightweight alternative to React with the same API but smaller footprint.\n\n**Features:**\n\n- Preact framework\n- React-compatible API\n- Smaller bundle size\n- TypeScript support\n\n### 💚 Vue\n\n**Template ID:** `vue`\n\nVue.js template for building components with the Vue ecosystem.\n\n**Features:**\n\n- Vue 3 Composition API\n- TypeScript support\n- Single File Components\n- Vite configuration\n\n### 🧡 Svelte\n\n**Template ID:** `svelte`\n\nSvelte template for compile-time optimized components.\n\n**Features:**\n\n- Svelte framework\n- Compile-time optimization\n- TypeScript support\n- Minimal runtime\n\n### 🌳 Elm\n\n**Template ID:** `elm`\n\nFunctional programming template using the Elm language.\n\n**Features:**\n\n- Elm language support\n- Functional programming paradigm\n- Strong type system\n- No runtime exceptions\n\n### 🚧 ESM (Beta)\n\n**Template ID:** `esm`\n\nExperimental template using ES modules with modern JavaScript features.\n\n**Features:**\n\n- Native ES modules\n- Modern JavaScript\n- Experimental features\n- Beta status\n\n## Template Structure\n\nEach generated component follows a consistent structure:\n\n```\nmy-component/\n├── package.json          # Component configuration and dependencies\n├── src/\n│   ├── server.ts        # Server-side data fetching logic\n│   ├── App.tsx          # Main component (React example)\n│   └── styles.css       # Component styles\n├── public/              # Static assets\n├── tsconfig.json        # TypeScript configuration\n└── vite.config.ts       # Vite build configuration\n```\n\n### Key Files\n\n- **`src/server.ts`**: Contains the server-side logic for data fetching and processing\n- **`src/App.tsx`** (or equivalent): The main component template file\n- **`package.json`**: Includes OC-specific configuration in the `oc` field\n- **`public/`**: Static assets that will be served alongside the component\n\n## Development Workflow\n\nAfter creating a component:\n\n1. **Install dependencies:**\n\n   ```bash\n   cd my-component\n   npm install\n   ```\n\n2. **Start development server:**\n\n   ```bash\n   npm start\n   # or\n   npm run dev\n   ```\n\n3. **Build for production:**\n\n   ```bash\n   npm run build\n   ```\n\n4. **Run tests** (where available):\n   ```bash\n   npm test\n   ```\n\n## OpenComponents Configuration\n\nEach template includes an `oc` configuration in `package.json`:\n\n```json\n{\n  \"oc\": {\n    \"files\": {\n      \"data\": \"src/server.ts\",\n      \"template\": {\n        \"src\": \"src/App.tsx\",\n        \"type\": \"oc-template-react\"\n      },\n      \"static\": [\"public\"]\n    }\n  }\n}\n```\n\n- **`data`**: Server-side data fetching logic\n- **`template.src`**: Main component file\n- **`template.type`**: Template renderer type\n- **`static`**: Static asset directories\n\n## Template Packages\n\nThis monorepo includes the following template renderer packages:\n\n| Template    | Package                                              | Version                                                                                                       |\n| ----------- | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |\n| ES6/Vanilla | [`oc-template-es6`](/packages/oc-template-es6)       | [![npm version](https://badge.fury.io/js/oc-template-es6.svg)](http://badge.fury.io/js/oc-template-es6)       |\n| React       | [`oc-template-react`](/packages/oc-template-react)   | [![npm version](https://badge.fury.io/js/oc-template-react.svg)](http://badge.fury.io/js/oc-template-react)   |\n| Preact      | [`oc-template-preact`](/packages/oc-template-preact) | [![npm version](https://badge.fury.io/js/oc-template-preact.svg)](http://badge.fury.io/js/oc-template-preact) |\n| Solid       | [`oc-template-solid`](/packages/oc-template-solid)   | [![npm version](https://badge.fury.io/js/oc-template-solid.svg)](http://badge.fury.io/js/oc-template-solid)   |\n| Vue         | [`oc-template-vue`](/packages/oc-template-vue)       | [![npm version](https://badge.fury.io/js/oc-template-vue.svg)](http://badge.fury.io/js/oc-template-vue)       |\n| Svelte      | [`oc-template-svelte`](/packages/oc-template-svelte) | [![npm version](https://badge.fury.io/js/oc-template-svelte.svg)](http://badge.fury.io/js/oc-template-svelte) |\n| Elm         | [`oc-template-elm`](/packages/oc-template-elm)       | [![npm version](https://badge.fury.io/js/oc-template-elm.svg)](http://badge.fury.io/js/oc-template-elm)       |\n| ESM         | [`oc-template-esm`](/packages/oc-template-esm)       | [![npm version](https://badge.fury.io/js/oc-template-esm.svg)](http://badge.fury.io/js/oc-template-esm)       |\n\n## Supporting Packages\n\n| Package                                          | Description                          | Version                                                                                                   |\n| ------------------------------------------------ | ------------------------------------ | --------------------------------------------------------------------------------------------------------- |\n| [`create-oc`](/packages/create-oc)               | CLI tool for scaffolding components  | [![npm version](https://badge.fury.io/js/create-oc.svg)](http://badge.fury.io/js/create-oc)               |\n| [`oc-server`](/packages/oc-server)               | Development server for OC components | [![npm version](https://badge.fury.io/js/oc-server.svg)](http://badge.fury.io/js/oc-server)               |\n| [`oc-vite`](/packages/oc-vite)                   | Vite integration for OpenComponents  | [![npm version](https://badge.fury.io/js/oc-vite.svg)](http://badge.fury.io/js/oc-vite)                   |\n| [`oc-vite-compiler`](/packages/oc-vite-compiler) | Vite-based compiler for OC templates | [![npm version](https://badge.fury.io/js/oc-vite-compiler.svg)](http://badge.fury.io/js/oc-vite-compiler) |\n\n## External Dependencies\n\nTemplates are configured to load framework dependencies from CDN in production:\n\n- **React**: Loaded from unpkg.com with global `React` and `ReactDOM`\n- **Vue**: Loaded from unpkg.com with global `Vue`\n- **Solid**: Bundled with the component\n- **Other frameworks**: Various CDN configurations\n\nThis approach reduces bundle sizes and allows for better caching across components.\n\n## Contributing\n\nThis is a monorepo managed with Turbo. To contribute:\n\n1. Clone the repository\n2. Install dependencies: `npm install`\n3. Make your changes\n4. Test across templates\n5. Submit a pull request\n\n## Learn More\n\n- [OpenComponents Documentation](https://opencomponents.github.io)\n- [OpenComponents GitHub](https://github.com/opencomponents/oc)\n- [Vite Documentation](https://vitejs.dev)\n\n## License\n\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopencomponents%2Fvite-templates","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fopencomponents%2Fvite-templates","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopencomponents%2Fvite-templates/lists"}