{"id":15015773,"url":"https://github.com/lifeart/demo-ember-vite","last_synced_at":"2025-04-12T09:30:57.536Z","repository":{"id":65252809,"uuid":"587848375","full_name":"lifeart/demo-ember-vite","owner":"lifeart","description":"Ember.js running on Vite","archived":false,"fork":false,"pushed_at":"2023-12-10T15:46:28.000Z","size":1583,"stargazers_count":61,"open_issues_count":20,"forks_count":5,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-26T04:34:33.649Z","etag":null,"topics":["ember","ember-app","emberjs","glimmer","vite"],"latest_commit_sha":null,"homepage":"https://stackblitz.com/github/lifeart/demo-ember-vite","language":"JavaScript","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/lifeart.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2023-01-11T18:21:34.000Z","updated_at":"2025-02-20T09:59:03.000Z","dependencies_parsed_at":"2023-12-08T20:28:58.681Z","dependency_job_id":"ae463b67-db79-4177-a8f7-eb614cf589d0","html_url":"https://github.com/lifeart/demo-ember-vite","commit_stats":{"total_commits":289,"total_committers":2,"mean_commits":144.5,"dds":"0.18339100346020765","last_synced_commit":"63519d5ddf32d91fc76ae9b6385bb25b5494a605"},"previous_names":[],"tags_count":2,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lifeart%2Fdemo-ember-vite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lifeart%2Fdemo-ember-vite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lifeart%2Fdemo-ember-vite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lifeart%2Fdemo-ember-vite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lifeart","download_url":"https://codeload.github.com/lifeart/demo-ember-vite/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248545992,"owners_count":21122243,"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","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":["ember","ember-app","emberjs","glimmer","vite"],"created_at":"2024-09-24T19:47:54.617Z","updated_at":"2025-04-12T09:30:57.135Z","avatar_url":"https://github.com/lifeart.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ember Vite\n\n\u003cimg align=\"right\" width=\"32\" height=\"32\"\n     alt=\"Vite logo\"\n     src=\"./public/vite.svg\"\u003e\n\u003cimg align=\"right\" width=\"100\" height=\"100\"\n     alt=\"Ember.js logo\"\n     src=\"./public/ember.svg\"\u003e\n\nThis is [Ember application](https://ember-vite.netlify.app/) running only on [Vite](https://vitejs.dev/). [![Netlify Status](https://api.netlify.com/api/v1/badges/ea52e30e-79bc-4f23-9e2f-321abab60b85/deploy-status)](https://ember-vite.netlify.app/)\n\n* It's `TypeScript`'ed by default.\n* It uses `vite` to build the app.\n* `tailwind` used for styling.\n* `playwright` used for testing.\n\n\n## Table of Contents\n\n* [Description](#description)\n* [Demo](#demo)\n* [Motivation](#motivation)\n* [Features](#features)\n* [Unsupported](#unsupported)\n* [Installation](#installation)\n* [Addons](#in-scope-of-this-app-we-able-to-run-this-addons)\n* [Why?](#why)\n* [Disclaimer](#disclaimer)\n\n\n## Description\n\nMain `difference` with classic Ember application is that we don't trying to `automatically` resolve addons and it's dependencies - we just `import` them directly, `only` once needed.\n\nThis application does not use `ember-cli` or `embroider` at all.\n\n## Motivation\n\n- 🚀 Hot Module Replacement support\n- ⚡️ No complex build process\n- 💡 Instant Server Start\n- 🛠️ Rich customization features\n- 📦 Optimized Build\n- 🔩 A lot of supported addons\n- 🔑 TypeScripted by default\n- :four_leaf_clover: Playwright tests\n\n## Features\n\n1. Hot Module Replacement\n1. Strict mode\n1. Ember-Data support\n1. Lazy-loading for routes\n1. Template-only components\n1. Style imports from components\n1. Ember Inspector\n1. Template imports support (`.gts` \u0026 `.gjs`)\n1. Glint support\n1. Testing support (QUnit)\n1. Template linting\n1. Playwright testing\n\n## Demo\n\n1. [Production App on Netlify](https://ember-vite.netlify.app/)\n1. [Development environment on Stackblitz](https://stackblitz.com/github/lifeart/demo-ember-vite)\n\n## Installation\n\n```bash\nyarn install\nyarn dev\n# open http://localhost:4200\n```\n\n## In scope of this app we able to run this addons\n\n1. `ember-simple-auth`\n1. `ember-bootstrap`\n1. `ember-concurrency`\n1. `ember-intl`\n1. `ember-concurrency-decorators`\n1. `ember-render-modifiers`\n1. `ember-truth-helpers`\n1. `ember-basic-dropdown`\n1. `ember-power-select`\n1. `ember-style-modifier`\n1. `ember-assign-helper`\n1. `ember-element-helper`\n1. `ember-page-title`\n1. `ember-notify`\n1. `ember-ref-bucket`\n1. `ember-modal-dialog`\n1. `ember-responsive`\n1. `ember-event-helpers`\n\n[(see code for samples)](https://github.com/lifeart/demo-ember-vite/tree/master/src/addons)\n\n\n*This is not complete list, and you could add `any` ember addon you want (if it don't have `ember-cli` logic)*\n\n## Why?\n\nI would like to bulletproof opinion, that modern ember application could be statically resolvable by default, and I would like to use `Vite` for that. It give as ability to use `TypeScript` and `ESM` by default, and it's very fast.\n\n## Disclaimer\n\nI'm not planning to actively maintain this repo, but if you have any questions, feel free to ask.\n\nIn addition, if you looking for options to improve speed of your ember project and you open for contracts - don't shy to contact me.\n\n---\n\nPR's are welcome.\n\n---\n\n## How to add new addon?\n\n1. Install dependency `yarn add addon-name`.\n2. Create `addon-name.ts` file in `src/addons` folder.\n3. Import needed `helpers`, `modifiers`, `components`, `services` from `addon-name` (check samples in same folder).\n\n\u003e We should keep extensions while importing, don't forget to check correct path's from `node_modules/addon-name` folder.\n\n\u003e Do not forget to `setComponentTemplate` for components.\n```ts\nimport SayHello from 'addon-name/components/my-component.js';\nimport SayHelloTemplate from 'addon-name/templates/my-component.hbs';\nimport CalcHelper from 'addon-name/helpers/calc.js';\nimport SummaryModifier from 'addon-name/modifiers/summary.js';\nimport SomeService from 'addon-name/services/some-service.js';\nimport { setComponentTemplate } from '@glimmer/manager';\n\nsetComponentTemplate(SayHelloTemplate, SayHello);\n```\n4. Create registry object for addon (check samples in same folder)\n```ts\nconst registry = {\n     'component:say-hello': SayHello,\n     'helper:calc': CalcHelper,\n     'modifier:summary': SummaryModifier,\n     'service:some-service': SomeService,\n}\n```\n5. Export registry object in `addon-name.ts` file\n```ts\nexport default registry;\n```\n6. Import created registry object in `src/addons/index.ts` file\n```ts\nimport AddonName from './addon-name';\n\nconst registry = {\n     // ... other addons\n     ...AddonName,\n}\n```\n\nNow we have new addon in our project. It should work out of the box for classic ember components. If you need to use it from `gts` / `gjs` files - you should import it as classic dependency inside `gts` / `gjs` file.\n\n\u003e Note: If you have `aliasing` / `babel` problems - add new `Addon` to `vite.config.ts` file (check samples in same file)\n\nAs we see, it's quite easy to redefine any part of addon, including component name, and it should be an easy way to fix possible breakage just overriding template / component with file from `src` folder.\n\nIf addon has more complex logic, we also have few samples:\n\n1. If addon define new registry namespace, search for `ember-responsive`, `ember-intl` mentions in codebase.\n1. If addon provide custom babel / handlebars plugins, search for `ember-ref-bucket`, `ember-concurrency` mentions in codebase.\n1. If addon provide custom styles, search for `ember-bootstrap`, `ember-modal-dialog` mentions in codebase.\n\n## Licence\n[MIT](./LICENCE.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flifeart%2Fdemo-ember-vite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flifeart%2Fdemo-ember-vite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flifeart%2Fdemo-ember-vite/lists"}