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.
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.
- ๐ 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
- Hot Module Replacement
- Strict mode
- Ember-Data support
- Lazy-loading for routes
- Template-only components
- Style imports from components
- Ember Inspector
- Template imports support (
.gts
&.gjs
) - Glint support
- Testing support (QUnit)
- Template linting
- Playwright testing
yarn install
yarn dev
# open http://localhost:4200
ember-simple-auth
ember-bootstrap
ember-concurrency
ember-intl
ember-concurrency-decorators
ember-render-modifiers
ember-truth-helpers
ember-basic-dropdown
ember-power-select
ember-style-modifier
ember-assign-helper
ember-element-helper
ember-page-title
ember-notify
ember-ref-bucket
ember-modal-dialog
ember-responsive
ember-event-helpers
This is not complete list, and you could add any
ember addon you want (if it don't have ember-cli
logic)
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.
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.
- Install dependency
yarn add addon-name
. - Create
addon-name.ts
file insrc/addons
folder. - Import needed
helpers
,modifiers
,components
,services
fromaddon-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);
- 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,
}
- Export registry object in
addon-name.ts
file
export default registry;
- 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 newAddon
tovite.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:
- If addon define new registry namespace, search for
ember-responsive
,ember-intl
mentions in codebase. - If addon provide custom babel / handlebars plugins, search for
ember-ref-bucket
,ember-concurrency
mentions in codebase. - If addon provide custom styles, search for
ember-bootstrap
,ember-modal-dialog
mentions in codebase.