Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
/node_modules/
/my-app/
43 changes: 43 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,46 @@ If you have an existing app that you would like to upgrade to use Vite consider
```
pnpm dlx ember-cli@latest new my-app-name -b @ember/app-blueprint --pnpm
```

## Options

### `--no-compat`

```
pnpm dlx ember-cli@latest new my-app-name \
--blueprint @ember/app-blueprint@alpha \
--pnpm \
--no-compat
```

Does the following:
- enables `type=module` in package.json (required for vite-ssr, and many ESM tools)
- makes the build and boot _MUCH FASTER_
(in large apps, this can have your app's boot be up to 1 minute faster)
- removes `@embroider/compat`
- removes support for:
- hbs (both for component files, and testing)
- content-for (in the HTML files)
- v1 addons
- node-land config/environment.js
- removes `ember-cli`
- ember-cli brings in a ton of old dependencies, so removing it makes installs much faster
- downside though is that you no longer have scaffolding (`ember g`) -- however, you could use `pnpm dlx ember-cli g ...` (or `npx ember-cli g`)

### `--minimal`

```
pnpm dlx ember-cli@latest new my-app-name \
--blueprint @ember/app-blueprint@alpha \
--pnpm \
--minimal
```

Does the following
- everything listed under `--no-compat`
- Removes all linting, formatting, and testing support
- leaves you with a minimal app that you can use for demos, and PRing to other repositories that have multi-framework support (and probably use other testing tools for that multi-framework support)
- different defaults:
- warp-drive becomes _opt-in_ (pass `--warp-drive` if you want it -- normally requires `--no-warp-drive` to remove)
- ember-welcome-page becomes _opt-in_ (normally requires `--no-welcome` to remove)

7 changes: 7 additions & 0 deletions conditional-files/minimal/app/templates/application.gts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@

<template>
<h1>Welcome to Ember</h1>

{{outlet}}

</template>
38 changes: 38 additions & 0 deletions conditional-files/no-compat/_js_babel.config.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import { dirname } from 'node:path';
import { fileURLToPath } from 'node:url';
import { buildMacros } from '@embroider/macros/babel';

const macros = buildMacros();

export default {
plugins: [
[
'babel-plugin-ember-template-compilation',
{
compilerPath: 'ember-source/dist/ember-template-compiler.js',
transforms: [...macros.templateMacros],
},
],
[
'module:decorator-transforms',
{
runtime: {
import: import.meta.resolve('decorator-transforms/runtime-esm'),
},
},
],
[
'@babel/plugin-transform-runtime',
{
absoluteRuntime: dirname(fileURLToPath(import.meta.url)),
useESModules: true,
regenerator: false,
},
],
...macros.babelMacros,
],

generatorOpts: {
compact: false,
},
};
46 changes: 46 additions & 0 deletions conditional-files/no-compat/_ts_babel.config.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import { dirname } from 'node:path';
import { fileURLToPath } from 'node:url';
import { buildMacros } from '@embroider/macros/babel';

const macros = buildMacros();

export default {
plugins: [
[
'@babel/plugin-transform-typescript',
{
allExtensions: true,
onlyRemoveTypeImports: true,
allowDeclareFields: true,
},
],
[
'babel-plugin-ember-template-compilation',
{
compilerPath: 'ember-source/dist/ember-template-compiler.js',
transforms: [...macros.templateMacros()],
},
],
[
'module:decorator-transforms',
{
runtime: {
import: import.meta.resolve('decorator-transforms/runtime-esm'),
},
},
],
[
'@babel/plugin-transform-runtime',
{
absoluteRuntime: dirname(fileURLToPath(import.meta.url)),
useESModules: true,
regenerator: false,
},
],
...macros.babelMacros(),
],

generatorOpts: {
compact: false,
},
};
20 changes: 20 additions & 0 deletions conditional-files/no-compat/app/app.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<% if (warpDrive) { %>import '@warp-drive/ember/install';
<% } %>import Application from 'ember-strict-application-resolver';
import config from '<%= modulePrefix %>/config/environment';<% if (notMinimal) { %>
import { importSync, isDevelopingApp, macroCondition } from '@embroider/macros';<% } %>
import setupInspector from '@embroider/legacy-inspector-support/ember-source-4.12';

<% if (notMinimal) { %>
if (macroCondition(isDevelopingApp())) {
importSync('./deprecation-workflow');
}
<% } %>


export default class App extends Application {
modules = {
...import.meta.glob('./router.*', { eager: true }),
...import.meta.glob('./templates/**/*', { eager: true }),
...import.meta.glob('./services/**/*', { eager: true }),
}
}
41 changes: 41 additions & 0 deletions conditional-files/no-compat/app/config/environment.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<% if (notMinimal) { %>
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
import { getGlobalConfig } from '@embroider/macros/src/addon/runtime';
<% } %>

interface Config {
isTesting?: boolean;
environment: string;
modulePrefix: string;
podModulePrefix?: string;
locationType: 'history' | 'hash' | 'none' | 'auto';
rootURL: string;
EmberENV?: Record<string, unknown>;
APP: Record<string, unknown> & { rootElement?: string; autoboot?: boolean };
}

const ENV: Config = {
modulePrefix: '<%= name %>',
environment: import.meta.env.DEV ? 'development' : 'production',
rootURL: '/',
locationType: 'history',
EmberENV: {},
APP: {},
};

export default ENV;

<% if (notMinimal) { %>
export function enterTestMode() {
ENV.locationType = 'none';
ENV.APP.rootElement = '#ember-testing';
ENV.APP.autoboot = false;

// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
const config = getGlobalConfig()['@embroider/macros'];

// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
if (config) config.isTesting = true;
}
<% } %>
1 change: 1 addition & 0 deletions eslint.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export default [
{
ignores: [
'tests/fixtures/*',
'files/vite.config.*',
'files/ember-cli-build.js',
'conditional-files/_js_*',
'conditional-files/_ts_*',
Expand Down
1 change: 1 addition & 0 deletions files/app/templates/application.gts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { pageTitle } from 'ember-page-title';
<% if (welcome) {%>import { WelcomePage } from 'ember-welcome-page';<% } %>


<template>
{{pageTitle "<%= namespace %>"}}<% if (welcome) { %>

Expand Down
11 changes: 6 additions & 5 deletions files/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,25 +5,26 @@
<title><%= namespace %></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<% if (compat) { %>

{{content-for "head"}}

<link integrity="" rel="stylesheet" href="/@embroider/virtual/vendor.css">
<link integrity="" rel="stylesheet" href="/@embroider/virtual/app.css">

{{content-for "head-footer"}}
</head>
<% } %></head>
<body>
{{content-for "body"}}
<% if (compat) { %>{{content-for "body"}}

<script src="/@embroider/virtual/vendor.js"></script>
<script type="module">
<% } %> <script type="module">
import Application from './app/app';
import environment from './app/config/environment';

Application.create(environment.APP);
</script>
<% if (compat) { %>{{content-for "body"}}

{{content-for "body-footer"}}
</body>
<% } %> </body>
</html>
14 changes: 10 additions & 4 deletions files/tests/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,31 +5,35 @@
<title><%= namespace %> Tests</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">

<% if (compat) { %>
{{content-for "head"}}
{{content-for "test-head"}}

<link rel="stylesheet" href="/@embroider/virtual/vendor.css">
<% } %> <link rel="stylesheet" href="/@embroider/virtual/vendor.css">
<link rel="stylesheet" href="/@embroider/virtual/app.css">
<link rel="stylesheet" href="/@embroider/virtual/test-support.css">
<% if (compat) { %>

{{content-for "head-footer"}}
{{content-for "test-head-footer"}}
</head>
<% } %> </head>
<body>
<% if (compat) { %>
{{content-for "body"}}
{{content-for "test-body"}}

<div id="qunit"></div>
<% } %> <div id="qunit"></div>
<div id="qunit-fixture">
<div id="ember-testing-container">
<div id="ember-testing"></div>
</div>
</div>

<script src="/testem.js" integrity="" data-embroider-ignore></script>
<% if (compat) { %>
<script src="/@embroider/virtual/vendor.js"></script>
<script src="/@embroider/virtual/test-support.js"></script>
<% } %>
<script type="module">import "ember-testing";</script>

<script type="module">
Expand All @@ -38,6 +42,8 @@
start();
</script>

<% if (compat) { %>
{{content-for "body-footer"}}
<% } %>
</body>
</html>
6 changes: 3 additions & 3 deletions files/vite.config.mjs
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { defineConfig } from 'vite';
import { extensions, classicEmberSupport, ember } from '@embroider/vite';
import { extensions<% if (!noCompat) { %>, classicEmberSupport<% } %>, ember } from '@embroider/vite';
import { babel } from '@rollup/plugin-babel';

export default defineConfig({
plugins: [
classicEmberSupport(),
plugins: [<% if (!noCompat) { %>
classicEmberSupport(),<% } %>
ember(),
// extra plugins here
babel({
Expand Down
Loading
Loading