feat(compiler): add support for Ember

README.md

@@ -734,6 +734,79 @@ See [the Qwik example](examples/vite-qwik) for a working example project.
 
 <br></details>
 
+<details>
+<summary>Ember</summary><br>
+
+Ember support requires using either Webpack or Vite
+
+```ts
+Icons({ compiler: 'ember' })
+```
+
+For Vite applications, add the Icon plugin to the plugins array in `vite.config.js`:
+
+```ts
+import { ember, extensions } from '@embroider/vite'
+import { babel } from '@rollup/plugin-babel'
+import Icons from 'unplugin-icons/vite'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [
+    ember(),
+    Icons({
+      compiler: 'ember',
+    }),
+    babel({
+      babelHelpers: 'runtime',
+      extensions,
+    }),
+  ],
+})
+```
+
+Type Declarations:
+
+```jsonc
+// tsconfig.json
+{
+  "compilerOptions": {
+    "types": [
+      // ... existing declarations omitted ...
+      "unplugin-icons/types/ember"
+    ]
+  }
+}
+```
+
+<details><summary>Ember + Webpack</summary>
+
+Assuming your app was generated with `--embroider`, or manually migrated to embroider following the instructions on [the old embroider readme](https://github.com/embroider-build/embroider/tree/stable?tab=readme-ov-file#how-to-try-it)
+
+Add the Icon plugin to the webpack plugins array in `ember-cli-build.js`:
+
+<!-- eslint-skip -->
+
+```ts
+return require('@embroider/compat').compatBuild(app, Webpack, {
+    packagerOptions: {
+      webpackConfig: {
+        plugins: [
+          Icons({
+            compiler: 'ember',
+          }),
+        ],
+      },
+    },
+    // ...other options
+```
+
+</details>
+
+See the [Ember (with Webpack)](examples/webpack-ember) or [Ember vite example](examples/vite-ember) for a working example project.
+
+<br></details>
+
 ## Use RAW compiler from query params
 
 From `v0.13.2` you can also use `raw` compiler to access the `svg` icon and use it on your html templates, just add `raw` to the icon query param.

eslint.config.js

@@ -1,4 +1,12 @@
 // @ts-check
 import antfu from '@antfu/eslint-config'
 
-export default antfu()
+export default antfu({}, {
+  name: 'array-callback-return-override',
+  files: ['examples/*-ember/**'],
+  rules: {
+    // This rule assumes that all map() calls are from Array.protoype.
+    // In the ember examples, the Router uses map() to mean "sitemap"
+    'array-callback-return': 'off',
+  },
+})

examples/vite-ember/app/app.ts

@@ -0,0 +1,18 @@
+import EmberRouter from '@embroider/router'
+import Application from 'ember-strict-application-resolver'
+
+class Router extends EmberRouter {
+  location = 'history'
+  rootURL = '/'
+}
+
+Router.map(() => {
+  // Add route declarations here
+})
+
+export default class App extends Application {
+  modules = {
+    './router': Router,
+    ...import.meta.glob('./templates/**/*.{gjs,gts}', { eager: true }),
+  }
+}

examples/vite-ember/app/templates/application.gts

@@ -0,0 +1,12 @@
+import Tomster from '~icons/logos/ember-tomster';
+
+import FileJavaScript from '~icons/devicon/javascript';
+import styles from './application.module.css';
+
+<template>
+  <h2 id="title">Welcome to Ember</h2>
+  <Tomster />
+  <FileJavaScript class={{styles.large}} />
+
+  {{outlet}}
+</template>

examples/vite-ember/app/templates/application.module.css

@@ -0,0 +1,4 @@
+.large {
+  width: 50px;
+  height: 50px;
+}

examples/vite-ember/babel.config.cjs

@@ -0,0 +1,51 @@
+const { buildMacros } = require('@embroider/macros/babel')
+
+const macros = buildMacros()
+
+module.exports = {
+  plugins: [
+    [
+      '@babel/plugin-transform-typescript',
+      {
+        allExtensions: true,
+        onlyRemoveTypeImports: true,
+        allowDeclareFields: true,
+      },
+    ],
+    [
+      'babel-plugin-ember-template-compilation',
+      {
+        compilerPath: 'ember-source/dist/ember-template-compiler.js',
+        enableLegacyModules: [
+          'ember-cli-htmlbars',
+          'ember-cli-htmlbars-inline-precompile',
+          'htmlbars-inline-precompile',
+        ],
+        transforms: [...macros.templateMacros],
+
+      },
+    ],
+    [
+      'module:decorator-transforms',
+      {
+        runtime: {
+          import: require.resolve('decorator-transforms/runtime-esm'),
+        },
+      },
+    ],
+    [
+      '@babel/plugin-transform-runtime',
+      {
+        absoluteRuntime: __dirname,
+        useESModules: true,
+        regenerator: false,
+      },
+    ],
+    ...macros.babelMacros,
+
+  ],
+
+  generatorOpts: {
+    compact: false,
+  },
+}

examples/vite-ember/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>EmberViteExample</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <script type="module">
+      import Application from './app/app';
+
+      Application.create({});
+    </script>
+  </body>
+</html>

examples/vite-ember/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "ember-vite-example",
+  "type": "module",
+  "private": true,
+  "license": "MIT",
+  "exports": {
+    "./tests/*": "./tests/*",
+    "./*": "./app/*"
+  },
+  "engines": {
+    "node": ">= 22"
+  },
+  "scripts": {
+    "start": "vite"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.27.1",
+    "@babel/plugin-transform-runtime": "^7.27.1",
+    "@babel/plugin-transform-typescript": "^7.27.1",
+    "@babel/runtime": "^7.27.1",
+    "@ember/app-tsconfig": "^1.0.3",
+    "@embroider/core": "^4.1.0",
+    "@embroider/macros": "^1.18.0",
+    "@embroider/router": "^3.0.1",
+    "@embroider/vite": "^1.1.5",
+    "@glimmer/component": "^2.0.0",
+    "@glint/ember-tsc": "^1.0.3",
+    "@glint/template": "^1.6.1",
+    "@glint/tsserver-plugin": "^2.0.3",
+    "@iconify-json/devicon": "^1.2.29",
+    "@iconify-json/logos": "^1.2.5",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@types/rsvp": "^4.0.9",
+    "babel-plugin-ember-template-compilation": "^2.4.1",
+    "decorator-transforms": "^2.3.0",
+    "ember-source": "~6.7.0",
+    "ember-strict-application-resolver": "0.1.0",
+    "typescript": "^5.8.3",
+    "unplugin-icons": "workspace:*",
+    "vite": "^7.1.9"
+  }
+}

examples/vite-ember/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "@ember/app-tsconfig",
+  "compilerOptions": {
+    "paths": {
+      "ember-vite-example/tests/*": ["./tests/*"],
+      "ember-vite-example/*": ["./app/*"],
+      "*": ["./types/*"]
+    },
+    "types": [
+      "ember-source/types",
+      "@embroider/core/virtual",
+      "vite/client",
+      "unplugin-icons/types/ember"
+    ],
+    "allowJs": true
+  }
+}

examples/vite-ember/vite.config.mjs

@@ -0,0 +1,18 @@
+import { ember, extensions } from '@embroider/vite'
+import { babel } from '@rollup/plugin-babel'
+import Icons from 'unplugin-icons/vite'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [
+    ember(),
+    Icons({
+      compiler: 'ember',
+    }),
+    // extra plugins here
+    babel({
+      babelHelpers: 'runtime',
+      extensions,
+    }),
+  ],
+})

examples/webpack-ember/.ember-cli

@@ -0,0 +1,19 @@
+{
+  /**
+    Setting `isTypeScriptProject` to true will force the blueprint generators to generate TypeScript
+    rather than JavaScript by default, when a TypeScript version of a given blueprint is available.
+  */
+  "isTypeScriptProject": false,
+
+  /**
+    Setting `componentAuthoringFormat` to "strict" will force the blueprint generators to generate GJS
+    or GTS files for the component and the component rendering test. "loose" is the default.
+  */
+  "componentAuthoringFormat": "loose",
+
+  /**
+    Setting `routeAuthoringFormat` to "strict" will force the blueprint generators to generate GJS
+    or GTS templates for routes. "loose" is the default
+  */
+  "routeAuthoringFormat": "loose"
+}

examples/webpack-ember/app/app.js

@@ -0,0 +1,9 @@
+import Application from '@ember/application'
+import config from 'ember-example/config/environment'
+import Resolver from 'ember-resolver'
+
+export default class App extends Application {
+  modulePrefix = config.modulePrefix
+  podModulePrefix = config.podModulePrefix
+  Resolver = Resolver
+}

examples/webpack-ember/app/index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>EmberExample</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    {{content-for "head"}}
+
+    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css">
+    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/ember-example.css">
+
+    {{content-for "head-footer"}}
+  </head>
+  <body>
+    {{content-for "body"}}
+
+    <script src="{{rootURL}}assets/vendor.js"></script>
+    <script src="{{rootURL}}assets/ember-example.js"></script>
+
+    {{content-for "body-footer"}}
+  </body>
+</html>

examples/webpack-ember/app/router.js

@@ -0,0 +1,9 @@
+import EmberRouter from '@ember/routing/router'
+import config from 'ember-example/config/environment'
+
+export default class Router extends EmberRouter {
+  location = config.locationType
+  rootURL = config.rootURL
+}
+
+Router.map(() => {})

examples/webpack-ember/app/styles/app.css

@@ -0,0 +1 @@
+/* Ember supports plain CSS out of the box. More info: https://cli.emberjs.com/release/advanced-use/stylesheets/ */

examples/webpack-ember/app/templates/application.gjs

@@ -0,0 +1,8 @@
+import Tomster from '~icons/logos/ember-tomster';
+
+<template>
+  <h2 id="title">Welcome to Ember</h2>
+  <Tomster class="hello" />
+
+  {{outlet}}
+</template>

examples/webpack-ember/config/ember-cli-update.json

@@ -0,0 +1,22 @@
+{
+  "schemaVersion": "1.0.0",
+  "packages": [
+    {
+      "name": "ember-cli",
+      "version": "6.6.0",
+      "blueprints": [
+        {
+          "name": "app",
+          "outputRepo": "https://github.com/ember-cli/ember-new-output",
+          "codemodsSource": "ember-app-codemods-manifest@1",
+          "isBaseBlueprint": true,
+          "options": [
+            "--no-welcome",
+            "--embroider",
+            "--ci-provider=github"
+          ]
+        }
+      ]
+    }
+  ]
+}