feat: move to template imports in core component

.eslintrc.js

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

.prettierrc.js

@@ -1 +1,14 @@
-module.exports = require('@underline/eslint-config/.prettierrc.js');
+const defaults = require('@underline/eslint-config/.prettierrc.js');
+module.exports = {
+  ...defaults,
+  plugins: ['prettier-plugin-ember-template-tag'],
+  overrides: [
+    ...defaults.overrides,
+    {
+      files: '*.{js,ts,gjs,gts}',
+      options: {
+        singleQuote: true
+      }
+    }
+  ]
+};

package.json

@@ -10,7 +10,7 @@
   "scripts": {
     "build": "yarn workspaces run build",
     "lint:hbs": "ember-template-lint .",
-    "lint:js": "eslint . --ext .js,.ts",
+    "lint:js": "eslint . --ext .js,.ts,.gts,.gjs",
     "start": "yarn workspace site start",
     "test": "yarn workspace test-app run test",
     "try:one": "yarn workspace test-app run try:one"
@@ -28,7 +28,13 @@
     "ember-source-channel-url": "^3.0.0",
     "ember-template-lint": "^5.11.1",
     "eslint": "^8.46.0",
+    "eslint-plugin-prettier": "^5.0.0",
     "lerna": "^4.0.0",
+    "prettier": "^3.0.0",
+    "prettier-plugin-ember-template-tag": "^1.0.0",
     "typescript": "^5.1.6"
+  },
+  "engines": {
+    "node": ">= 10.*"
   }
 }

packages/core/babel.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  presets: [["@babel/preset-typescript", {onlyRemoveTypeImports: true}]],
+  plugins: [
+    "@embroider/addon-dev/template-colocation-plugin",
+    [
+      'babel-plugin-ember-template-compilation',
+      {
+        targetFormat: 'hbs',
+        compilerPath: 'ember-source/dist/ember-template-compiler',
+      }
+    ],
+    ["@babel/plugin-proposal-decorators", { "legacy": true }],
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-transform-class-static-block",
+  ]
+}

packages/core/package.json

@@ -51,13 +51,16 @@
     "@babel/core": "7.22.9",
     "@babel/plugin-proposal-class-properties": "7.18.6",
     "@babel/plugin-proposal-decorators": "7.22.7",
+    "@babel/plugin-transform-class-static-block": "^7.22.5",
     "@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/environment-ember-template-imports": "1.0.2",
     "@glint/template": "1.0.2",
     "@rollup/plugin-babel": "6.0.3",
     "@tsconfig/ember": "^3.0.0",
+    "babel-plugin-ember-template-compilation": "^2.1.1",
     "concurrently": "^8.2.0",
     "ember-source": "^5.1.2",
     "rollup": "^3.27.0",

packages/core/rollup.config.mjs

@@ -7,7 +7,7 @@ const addon = new Addon({
 });
 
 // Add extensions here, such as ts, gjs, etc that you may import
-const extensions = ['.js', '.ts'];
+const extensions = ['.js', '.ts', '.gjs', '.gts'];
 
 export default {
   // This provides defaults that work well alongside `publicEntrypoints` below.
@@ -38,6 +38,8 @@ export default {
     // package names.
     addon.dependencies(),
 
+    addon.gjs(),
+
     // 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.
@@ -47,9 +49,11 @@ export default {
       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']),

packages/core/src/components/close-button.gts

@@ -0,0 +1,86 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import 'focus-visible/dist/focus-visible.js';
+import { on } from '@ember/modifier';
+import useFrontileClass from '../helpers/use-frontile-class.ts'
+import VisuallyHidden from './visually-hidden.ts'
+
+export interface CloseButtonArgs {
+  /**
+   * The title of the close button
+   *
+   * @defaultValue 'Close'
+   */
+  title?: string;
+
+  /**
+   * The icon size
+   *
+   * @defaultValue 'lg'
+   */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+  /**
+   * The function to call when button is clicked
+   */
+  onClick?: (event: Event) => void;
+
+  /**
+   * Additional class for close button element
+   */
+  class?: string;
+}
+
+export interface CloseButtonSignature {
+  Args: CloseButtonArgs;
+  Blocks: {
+    default: [string | null];
+  };
+  Element: HTMLButtonElement;
+}
+
+export default class CloseButton extends Component<CloseButtonSignature> {
+  @action handleClick(event: Event): void {
+    if (typeof this.args.onClick === 'function') {
+      this.args.onClick(event);
+    }
+  }
+  <template>
+    <button
+    type="button"
+      class={{useFrontileClass "close-button" (if @size @size "md") class=@class}}
+      ...attributes
+      {{on "click" this.handleClick}}
+    >
+      {{#let
+        (useFrontileClass
+          "close-button" (if @size @size "md") part="icon"
+        ) as |iconClassName|
+      }}
+        {{#if (has-block)}}
+          {{yield iconClassName}}
+        {{else}}
+          <svg
+            class={{iconClassName}}
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M6 18L18 6M6 6l12 12"
+            ></path>
+          </svg>
+        {{/if}}
+      {{/let}}
+
+      <VisuallyHidden>
+        {{if @title @title "Close"}}
+      </VisuallyHidden>
+    </button>
+  </template>
+}

packages/core/src/components/visually-hidden.hbs

@@ -1,3 +1,3 @@
 <div class="sr-only" ...attributes>
   {{yield}}
-</div>
+</div>

packages/core/src/template-registry.ts

@@ -1,5 +1,5 @@
 import type VisuallyHidden from './components/visually-hidden.ts';
-import type CloseButton from './components/close-button.ts';
+import type CloseButton from './components/close-button';
 import type Collapsible from './components/collapsible';
 
 export default interface Registry {

packages/core/tsconfig.json

@@ -2,7 +2,7 @@
   "extends": "@tsconfig/ember/tsconfig.json",
   "include": ["src/**/*", "unpublished-development-types/**/*"],
   "glint": {
-    "environment": "ember-loose"
+    "environment": ["ember-loose", "ember-template-imports"]
   },
   "compilerOptions": {
     "allowImportingTsExtensions": true,

packages/core/unpublished-development-types/index.d.ts

@@ -2,7 +2,7 @@
 // These will *not* be published as part of your addon, so be careful that your published code does not rely on them!
 
 import 'ember-source/types';
-import '@glint/environment-ember-loose';
+import '@glint/environment-ember-template-imports';
 import type RenderModifiersRegistry from '@ember/render-modifiers/template-registry';
 import type CoreRegistry from '../src/template-registry.ts';