feat: Move core addon to v2 and add Glint

.eslintrc.js

@@ -28,6 +28,7 @@ module.exports = {
         '.template-lintrc.js',
         'testem.js',
         'config/**/*.js',
+        'packages/*/addon-main.js',
         'packages/*/.ember-cli.js',
         'packages/*/ember-cli-build.js',
         'packages/*/index.js',

.github/workflows/ci.yml

@@ -27,6 +27,8 @@ jobs:
         run: yarn lint:js
       - name: Lint HBS
         run: yarn lint:hbs
+      - name: Build V2 Addons
+        run: yarn workspace @frontile/core run build
       - name: Test
         run: yarn test
 

.gitignore

@@ -9,6 +9,7 @@
 /node_modules/
 /packages/**/node_modules/
 /packages/**/dist/
+/packages/**/declarations/
 /site/dist/
 /site/node_modules/
 /site/lib/**/node_modules/

package.json

@@ -8,6 +8,7 @@
     "test-app"
   ],
   "scripts": {
+    "build": "yarn workspaces run build",
     "lint:hbs": "ember-template-lint .",
     "lint:js": "eslint . --ext .js,.ts",
     "start": "yarn workspace site start",

packages/core/addon-main.js

@@ -0,0 +1,4 @@
+'use strict';
+
+const { addonV1Shim } = require('@embroider/addon-shim');
+module.exports = addonV1Shim(__dirname);

packages/core/babel.config.json

@@ -0,0 +1,8 @@
+{
+  "presets": [["@babel/preset-typescript"]],
+  "plugins": [
+    "@embroider/addon-dev/template-colocation-plugin",
+    ["@babel/plugin-proposal-decorators", { "legacy": true }],
+    "@babel/plugin-proposal-class-properties"
+  ]
+}

packages/core/package.json

@@ -13,60 +13,56 @@
     "doc": "doc",
     "test": "tests"
   },
+  "files": [
+    "addon-main.js",
+    "declarations",
+    "dist",
+    "tailwind"
+  ],
   "scripts": {
-    "build": "ember build",
-    "lint:hbs": "ember-template-lint .",
-    "lint:js": "eslint .",
-    "start": "ember serve",
-    "test": "ember test",
-    "test:all": "ember try:each",
-    "try:one": "ember try:one",
-    "prepack": "ember ts:precompile",
-    "postpack": "ember ts:clean"
+    "build": "concurrently 'npm:build:*'",
+    "build:js": "rollup --config",
+    "build:types": "glint --declaration",
+    "lint": "concurrently 'npm:lint:*(!fix)' --names 'lint:'",
+    "lint:fix": "concurrently 'npm:lint:*:fix' --names 'fix:'",
+    "lint:hbs": "ember-template-lint . --no-error-on-unmatched-pattern",
+    "lint:js": "eslint . --cache",
+    "lint:hbs:fix": "ember-template-lint . --fix --no-error-on-unmatched-pattern",
+    "lint:js:fix": "eslint . --fix",
+    "lint:types": "glint",
+    "start": "concurrently 'npm:start:*'",
+    "start:js": "rollup --config --watch --no-watch.clearScreen",
+    "start:types": "glint -d --watch",
+    "test": "echo 'A v2 addon does not have tests, run tests in test-app'",
+    "prepack": "concurrently 'npm:build'"
   },
   "peerDependencies": {
     "ember-source": "^4.0.0 || ^5.0.0"
   },
   "dependencies": {
     "@ember/render-modifiers": "^2.1.0",
     "@ember/test-waiters": "^3.0.2",
+    "@embroider/addon-shim": "^1.8.6",
     "@frontile/tailwindcss-plugin-helpers": "^0.15.0",
-    "ember-cli-babel": "^7.26.11",
-    "ember-cli-htmlbars": "^6.2.0",
-    "ember-cli-typescript": "^5.2.1",
+    "ember-auto-import": "^2.6.3",
     "focus-visible": "^5.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.9",
-    "@ember/edition-utils": "^1.2.0",
-    "@ember/optional-features": "^2.0.0",
-    "@ember/test-helpers": "^3.2.0",
-    "@embroider/test-setup": "^3.0.1",
-    "@glimmer/component": "^1.1.2",
-    "@types/ember-qunit": "^6.1.1",
-    "@types/ember-resolver": "^9.0.0",
-    "@types/htmlbars-inline-precompile": "^3.0.0",
-    "@types/qunit": "^2.19.6",
-    "@types/rsvp": "^4.0.4",
-    "broccoli-asset-rev": "^3.0.0",
-    "ember-auto-import": "^2.6.3",
-    "ember-cli": "^5.1.0",
-    "ember-cli-dependency-checker": "^3.3.2",
-    "ember-cli-inject-live-reload": "^2.1.0",
-    "ember-cli-typescript-blueprints": "^3.0.0",
-    "ember-cli-uglify": "^3.0.0",
-    "ember-disable-prototype-extensions": "^1.1.3",
-    "ember-load-initializers": "^2.1.2",
-    "ember-qunit": "^7.0.0",
-    "ember-resolver": "^11.0.0",
+    "@babel/core": "7.22.9",
+    "@babel/plugin-proposal-class-properties": "7.18.6",
+    "@babel/plugin-proposal-decorators": "7.22.7",
+    "@babel/preset-typescript": "7.22.5",
+    "@embroider/addon-dev": "3.2.0",
+    "@glint/core": "1.0.2",
+    "@glint/environment-ember-loose": "1.0.2",
+    "@glint/template": "1.0.2",
+    "@rollup/plugin-babel": "6.0.3",
+    "@tsconfig/ember": "^3.0.0",
+    "concurrently": "^8.2.0",
     "ember-source": "^5.1.2",
-    "ember-try": "^2.0.0",
-    "loader.js": "^4.7.0",
-    "qunit": "^2.19.4",
-    "qunit-dom": "^2.0.0",
+    "rollup": "^3.27.0",
     "tailwindcss": "^3.3.3",
-    "typescript": "^5.1.6",
-    "webpack": "^5.88.2"
+    "typescript": "^5.1.6"
   },
   "engines": {
     "node": ">= 10.*"
@@ -78,6 +74,39 @@
     "edition": "octane"
   },
   "ember-addon": {
-    "configPath": "tests/dummy/config"
+    "version": 2,
+    "type": "addon",
+    "main": "addon-main.js",
+    "app-js": {
+      "./components/close-button.js": "./dist/_app_/components/close-button.js",
+      "./components/collapsible/index.js": "./dist/_app_/components/collapsible/index.js",
+      "./components/visually-hidden.js": "./dist/_app_/components/visually-hidden.js",
+      "./helpers/use-frontile-class.js": "./dist/_app_/helpers/use-frontile-class.js",
+      "./utils/safe-styles.js": "./dist/_app_/utils/safe-styles.js"
+    }
+  },
+  "exports": {
+    ".": {
+      "types": "./declarations/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./*": {
+      "types": "./declarations/*.d.ts",
+      "default": "./dist/*.js"
+    },
+    "./addon-main.js": "./addon-main.js",
+    "./tailwind": {
+      "default": "./tailwind/index.js"
+    },
+    "./tailwind/*": {
+      "default": "./tailwind/*.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "declarations/*"
+      ]
+    }
   }
 }

packages/core/rollup.config.mjs

@@ -0,0 +1,60 @@
+import { babel } from '@rollup/plugin-babel';
+import { Addon } from '@embroider/addon-dev/rollup';
+
+const addon = new Addon({
+  srcDir: 'src',
+  destDir: 'dist',
+});
+
+// Add extensions here, such as ts, gjs, etc that you may import
+const extensions = ['.js', '.ts'];
+
+export default {
+  // This provides defaults that work well alongside `publicEntrypoints` below.
+  // You can augment this if you need to.
+  output: addon.output(),
+
+  plugins: [
+    // These are the modules that users should be able to import from your
+    // addon. Anything not listed here may get optimized away.
+    addon.publicEntrypoints([
+      'components/**/*.js',
+      'helpers/**/*.js',
+      'utils/**/*.js',
+      'template-registry.js',
+    ]),
+
+    // These are the modules that should get reexported into the traditional
+    // "app" tree. Things in here should also be in publicEntrypoints above, but
+    // not everything in publicEntrypoints necessarily needs to go here.
+    addon.appReexports([
+      'components/**/*.js',
+      'helpers/**/*.js',
+      'utils/**/*.js',
+    ]),
+
+    // Follow the V2 Addon rules about dependencies. Your code can import from
+    // `dependencies` and `peerDependencies` as well as standard Ember-provided
+    // package names.
+    addon.dependencies(),
+
+    // This babel config should *not* apply presets or compile away ES modules.
+    // It exists only to provide development niceties for you, like automatic
+    // template colocation.
+    // See `babel.config.json` for the actual Babel configuration!
+    babel({
+      extensions,
+      babelHelpers: 'bundled',
+    }),
+
+    // Ensure that standalone .hbs files are properly integrated as Javascript.
+    addon.hbs(),
+
+    // addons are allowed to contain imports of .css files, which we want rollup
+    // to leave alone and keep in the published output.
+    addon.keepAssets(['**/*.css']),
+
+    // Remove leftover build artifacts when starting a new build.
+    addon.clean(),
+  ],
+};

packages/core/addon/components/close-button.ts → packages/core/src/components/close-button.ts

@@ -1,7 +1,15 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
+import 'focus-visible/dist/focus-visible.js';
 
 export interface CloseButtonArgs {
+  /**
+   * The title of the close button
+   *
+   * @defaultValue 'Close'
+   */
+  title?: string;
+
   /**
    * The icon size
    *
@@ -13,6 +21,11 @@ export interface CloseButtonArgs {
    * The function to call when button is clicked
    */
   onClick?: (event: Event) => void;
+
+  /**
+   * Additional class for close button element
+   */
+  class?: string;
 }
 
 export interface CloseButtonSignature {

packages/core/addon/components/collapsible/index.ts → packages/core/src/components/collapsible/index.ts

@@ -1,7 +1,7 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { buildWaiter } from '@ember/test-waiters';
-import safeStyles from '@frontile/core/utils/safe-styles';
+import safeStyles from '../../utils/safe-styles.ts';
 
 const waiter = buildWaiter('@frontile/core:collapsible');
 
@@ -23,6 +23,9 @@ export interface CollapsibleArgs {
 export interface CollapsibleSignature {
   Args: CollapsibleArgs;
   Element: HTMLDivElement;
+  Blocks: {
+    default: [];
+  };
 }
 
 export default class Collapsible extends Component<CollapsibleSignature> {

packages/core/addon/components/visually-hidden.ts → packages/core/src/components/visually-hidden.ts

@@ -2,6 +2,9 @@ import Component from '@glimmer/component';
 
 export interface VisuallyHiddenSignature {
   Element: HTMLDivElement;
+  Blocks: {
+    default: [];
+  };
 }
 
 export default class VisuallyHidden extends Component<VisuallyHiddenSignature> {}

packages/core/addon/helpers/use-frontile-class.ts → packages/core/src/helpers/use-frontile-class.ts

@@ -34,4 +34,20 @@ export function useFrontileClass(
   return classes.join(' ');
 }
 
-export default helper(useFrontileClass) as never;
+export interface UseFrontileClassSignature {
+  Args: {
+    Positional: string | unknown[];
+    Named: { part?: string; class?: string };
+  };
+  Return: string;
+}
+
+const useClass = helper<UseFrontileClassSignature>(useFrontileClass);
+
+export default useClass;
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'use-frontile-class': typeof useClass;
+  }
+}