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.

examples/vite-ember/.editorconfig

@@ -0,0 +1,19 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+[*]
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+
+[*.hbs]
+insert_final_newline = false
+
+[*.{diff,md}]
+trim_trailing_whitespace = false

examples/vite-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": true,
+
+  /**
+    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": "strict",
+
+  /**
+    Setting `routeAuthoringFormat` to "strict" will force the blueprint generators to generate GJS
+    or GTS templates for routes. "loose" is the default
+  */
+  "routeAuthoringFormat": "strict"
+}

examples/vite-ember/.env.development

@@ -0,0 +1,8 @@
+# This file is committed to git and should not contain any secrets.
+# 
+# Vite recommends using .env.local or .env.[mode].local if you need to manage secrets
+# SEE: https://vite.dev/guide/env-and-mode.html#env-files for more information.
+
+
+# Default NODE_ENV with vite build --mode=test is production
+NODE_ENV=development

examples/vite-ember/.gitignore

@@ -0,0 +1,26 @@
+# compiled output
+/dist/
+/declarations/
+/tmp/
+
+# dependencies
+/node_modules/
+
+# misc
+/.env*
+/.pnp*
+/.eslintcache
+/coverage/
+/npm-debug.log*
+/testem.log
+/yarn-error.log
+
+# ember-try
+/.node_modules.ember-try/
+/npm-shrinkwrap.json.ember-try
+/package.json.ember-try
+/package-lock.json.ember-try
+/yarn.lock.ember-try
+
+# broccoli-debug
+/DEBUG/

examples/vite-ember/app/app.ts

@@ -0,0 +1,20 @@
+import Application from 'ember-strict-application-resolver';
+import EmberRouter from '@embroider/router';
+import compatModules from '@embroider/virtual/compat-modules';
+
+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/.gitignore

@@ -0,0 +1,18 @@
+# compiled output
+/dist/
+/declarations/
+
+# dependencies
+/node_modules/
+
+# misc
+/.env*
+/.pnp*
+/.eslintcache
+/coverage/
+/npm-debug.log*
+/testem.log
+/yarn-error.log
+
+# broccoli-debug
+/DEBUG/

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
+}