Skip to content

Latest commit

 

History

History
173 lines (130 loc) · 5.42 KB

readme.md

File metadata and controls

173 lines (130 loc) · 5.42 KB
Raw

Ember Vite

Vite logo Ember.js logo

This is Ember application running only on Vite. Netlify Status

  • 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

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);
  1. 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,
}
  1. Export registry object in addon-name.ts file
export default registry;
  1. 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