lifeart/demo-ember-vite

Ember.js running on Vite

Ember Vite

This is Ember application running only on Vite.

• It's TypeScript'ed by default.
• It uses vite to build the app.
• tailwind used for styling.
• playwright used for testing.

Table of Contents

• Description
• Demo
• Motivation
• Features
• Unsupported
• Installation
• Addons
• Why?
• Disclaimer

Description

Main 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.

This application does not use ember-cli or embroider at all.

Motivation

• 🚀 Hot Module Replacement support
• ⚡️ No complex build process
• 💡 Instant Server Start
• 🛠️ Rich customization features
• 📦 Optimized Build
• 🔩 A lot of supported addons
• 🔑 TypeScripted by default
• 🍀 Playwright tests

Features

1. Hot Module Replacement
2. Strict mode
3. Ember-Data support
4. Lazy-loading for routes
5. Template-only components
6. Style imports from components
7. Ember Inspector
8. Template imports support (.gts & .gjs)
9. Glint support
10. Testing support (QUnit)
11. Template linting
12. Playwright testing

Demo

1. Production App on Netlify
2. Development environment on Stackblitz

Installation

yarn install
yarn dev
# open http://localhost:4200

In scope of this app we able to run this addons

1. ember-simple-auth
2. ember-bootstrap
3. ember-concurrency
4. ember-intl
5. ember-concurrency-decorators
6. ember-render-modifiers
7. ember-truth-helpers
8. ember-basic-dropdown
9. ember-power-select
10. ember-style-modifier
11. ember-assign-helper
12. ember-element-helper
13. ember-page-title
14. ember-notify
15. ember-ref-bucket
16. ember-modal-dialog
17. ember-responsive
18. ember-event-helpers

(see code for samples)

This is not complete list, and you could add any ember addon you want (if it don't have ember-cli logic)

Why?

I 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.

Disclaimer

I'm not planning to actively maintain this repo, but if you have any questions, feel free to ask.

In addition, if you looking for options to improve speed of your ember project and you open for contracts - don't shy to contact me.

---

PR's are welcome.

---

How to add new addon?

1. Install dependency yarn add addon-name.
2. Create addon-name.ts file in src/addons folder.
3. Import needed helpers, modifiers, components, services from addon-name (check samples in same folder).

We should keep extensions while importing, don't forget to check correct path's from node_modules/addon-name folder.

Do not forget to setComponentTemplate for components.

import SayHello from 'addon-name/components/my-component.js';
import SayHelloTemplate from 'addon-name/templates/my-component.hbs';
import CalcHelper from 'addon-name/helpers/calc.js';
import SummaryModifier from 'addon-name/modifiers/summary.js';
import SomeService from 'addon-name/services/some-service.js';
import { setComponentTemplate } from '@glimmer/manager';

setComponentTemplate(SayHelloTemplate, SayHello);

4. Create registry object for addon (check samples in same folder)

const registry = {
     'component:say-hello': SayHello,
     'helper:calc': CalcHelper,
     'modifier:summary': SummaryModifier,
     'service:some-service': SomeService,
}

5. Export registry object in addon-name.ts file

export default registry;

6. Import created registry object in src/addons/index.ts file

import AddonName from './addon-name';

const registry = {
     // ... other addons
     ...AddonName,
}

Now 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.

Note: If you have aliasing / babel problems - add new Addon to vite.config.ts file (check samples in same file)

As 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.

If addon has more complex logic, we also have few samples:

1. If addon define new registry namespace, search for ember-responsive, ember-intl mentions in codebase.
2. If addon provide custom babel / handlebars plugins, search for ember-ref-bucket, ember-concurrency mentions in codebase.
3. If addon provide custom styles, search for ember-bootstrap, ember-modal-dialog mentions in codebase.

Licence

MIT