Merge pull request #866 from simonihmig/ember-gts

Migrate Ember component to gts

.changeset/tender-mayflies-love.md

@@ -0,0 +1,5 @@
+---
+'@responsive-image/ember': patch
+---
+
+Migrate component to gts format

packages/ember/.eslintrc.cjs

@@ -0,0 +1,104 @@
+'use strict';
+
+module.exports = {
+  root: true,
+  // Only use overrides
+  // https://github.com/ember-cli/eslint-plugin-ember?tab=readme-ov-file#gtsgjs
+  overrides: [
+    {
+      files: ['**/*.js', '**/*.ts'],
+      env: { browser: true },
+      parser: '@typescript-eslint/parser',
+      parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        babelOptions: {
+          root: __dirname,
+        },
+      },
+      plugins: ['ember', 'import'],
+      extends: [
+        'eslint:recommended',
+        'plugin:ember/recommended',
+        'plugin:prettier/recommended',
+      ],
+      rules: {
+        // require relative imports use full extensions
+        'import/extensions': ['error', 'always', { ignorePackages: true }],
+        // Add any custom rules here
+      },
+    },
+    // ts files
+    {
+      files: ['**/*.ts'],
+      extends: [
+        'eslint:recommended',
+        'plugin:ember/recommended',
+        'plugin:@typescript-eslint/eslint-recommended',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:prettier/recommended',
+      ],
+      rules: {
+        // require relative imports use full extensions
+        'import/extensions': ['error', 'always', { ignorePackages: true }],
+        // Add any custom rules here
+      },
+    },
+    {
+      files: ['**/*.gts'],
+      parser: 'ember-eslint-parser',
+      plugins: ['ember', 'import'],
+      extends: [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/eslint-recommended',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:ember/recommended',
+        'plugin:ember/recommended-gts',
+        'plugin:prettier/recommended',
+      ],
+      rules: {
+        // require relative imports use full extensions
+        'import/extensions': ['error', 'always', { ignorePackages: true }],
+        // Add any custom rules here
+      },
+    },
+    {
+      files: ['**/*.gjs'],
+      parser: 'ember-eslint-parser',
+      plugins: ['ember', 'import'],
+      extends: [
+        'eslint:recommended',
+        'plugin:ember/recommended',
+        'plugin:ember/recommended-gjs',
+        'plugin:prettier/recommended',
+      ],
+      rules: {
+        // require relative imports use full extensions
+        'import/extensions': ['error', 'always', { ignorePackages: true }],
+        // Add any custom rules here
+      },
+    },
+    // node files
+    {
+      files: [
+        './.eslintrc.cjs',
+        './.prettierrc.cjs',
+        './.template-lintrc.cjs',
+        './addon-main.cjs',
+      ],
+      parserOptions: {
+        sourceType: 'script',
+      },
+      env: {
+        browser: false,
+        node: true,
+      },
+      plugins: ['n'],
+      extends: [
+        'eslint:recommended',
+        'plugin:n/recommended',
+        'plugin:prettier/recommended',
+      ],
+    },
+  ],
+};

packages/ember/.prettierrc.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+module.exports = {
+  plugins: ['prettier-plugin-ember-template-tag'],
+  singleQuote: true,
+  templateSingleQuote: false,
+};

packages/ember/package.json

@@ -14,19 +14,15 @@
     "dist"
   ],
   "scripts": {
-    "build": "concurrently 'npm:build:*'",
-    "build:js": "rollup --config",
-    "build:types": "glint --declaration",
+    "build": "rollup --config",
     "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 --declaration --watch",
+    "start": "rollup --config --watch --no-watch.clearScreen",
     "test": "echo 'A v2 addon does not have tests, run tests in test-app'",
     "prepack": "pnpm turbo build"
   },
@@ -48,11 +44,12 @@
     "@babel/core": "7.25.9",
     "@babel/plugin-transform-typescript": "7.25.9",
     "@babel/runtime": "7.25.9",
-    "@embroider/addon-dev": "7.0.0",
+    "@embroider/addon-dev": "7.1.1",
     "@glimmer/component": "2.0.0",
     "@glimmer/tracking": "1.1.2",
     "@glint/core": "1.5.0",
     "@glint/environment-ember-loose": "1.5.0",
+    "@glint/environment-ember-template-imports": "1.5.0",
     "@glint/template": "1.5.0",
     "@rollup/plugin-babel": "6.0.4",
     "@rollup/plugin-node-resolve": "16.0.0",
@@ -92,6 +89,7 @@
     "eslint-plugin-n": "17.15.1",
     "eslint-plugin-prettier": "5.2.1",
     "prettier": "3.4.2",
+    "prettier-plugin-ember-template-tag": "2.0.4",
     "rollup": "4.29.1",
     "rollup-plugin-copy": "3.5.0",
     "rollup-plugin-node-externals": "8.0.0",
@@ -106,7 +104,7 @@
   "ember-addon": {
     "version": 2,
     "type": "addon",
-    "main": "addon-main.js",
+    "main": "addon-main.cjs",
     "app-js": {
       "./components/responsive-image.js": "./dist/_app_/components/responsive-image.js",
       "./helpers/responsive-image-cloudinary.js": "./dist/_app_/helpers/responsive-image-cloudinary.js",
@@ -127,7 +125,7 @@
       "types": "./declarations/*.d.ts",
       "default": "./dist/*.js"
     },
-    "./addon-main.js": "./addon-main.js"
+    "./addon-main.js": "./addon-main.cjs"
   },
   "typesVersions": {
     "*": {

packages/ember/rollup.config.mjs

@@ -62,6 +62,9 @@ export default [
       // Ensure that .gjs files are properly integrated as Javascript
       addon.gjs(),
 
+      // Emit .d.ts declaration files
+      addon.declarations('declarations'),
+
       // 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/ember/src/components/responsive-image.ts → packages/ember/src/components/responsive-image.gts

@@ -16,6 +16,9 @@ import type {
 import type Owner from '@ember/owner';
 
 import './responsive-image.css';
+import { on } from '@ember/modifier';
+import style from 'ember-style-modifier';
+import { hash } from '@ember/helper';
 
 declare global {
   const __eri_blurhash: {
@@ -230,4 +233,33 @@ export default class ResponsiveImageComponent extends Component<ResponsiveImageC
   setRendered(): void {
     this.isRendered = true;
   }
+
+  <template>
+    <picture>
+      {{#each this.sourcesSorted as |s|}}
+        <source srcset={{s.srcset}} type={{s.mimeType}} sizes={{s.sizes}} />
+      {{/each}}
+      <img
+        src={{this.src}}
+        width={{this.width}}
+        height={{this.height}}
+        class={{this.classNames}}
+        loading="lazy"
+        decoding="async"
+        ...attributes
+        data-ri-bh={{this.blurhashMeta.hash}}
+        data-ri-bh-w={{this.blurhashMeta.width}}
+        data-ri-bh-h={{this.blurhashMeta.height}}
+        {{style
+          (if
+            this.showLqipBlurhash
+            (hash background-image=this.lqipBlurhash background-size="cover")
+          )
+        }}
+        {{on "load" this.onLoad}}
+        {{! @glint-expect-error }}
+        {{(this.setRendered)}}
+      />
+    </picture>
+  </template>
 }

packages/ember/src/index.ts

@@ -1,3 +1,3 @@
-export { default as ResponsiveImage } from './components/responsive-image.ts';
+export { default as ResponsiveImage } from './components/responsive-image.gts';
 export { default as resolve } from './helpers/responsive-image-resolve.ts';
 export type { ImageData } from '@responsive-image/core';

packages/ember/src/template-registry.ts

@@ -1,4 +1,4 @@
-import type ResponsiveImageComponent from './components/responsive-image.ts';
+import type ResponsiveImageComponent from './components/responsive-image.gts';
 import type ResponsiveImageResolve from './helpers/responsive-image-resolve.ts';
 import type CloudinaryProvider from './helpers/responsive-image-cloudinary';
 import type NetlifyProvider from './helpers/responsive-image-netlify';

packages/ember/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": {
     "allowJs": true,

packages/ember/unpublished-development-types/glint.d.ts

@@ -2,7 +2,7 @@ import Helper from '@ember/component/helper';
 import '@glint/environment-ember-loose';
 import 'ember-cached-decorator-polyfill';
 import Modifier from 'ember-modifier';
-import AddonRegistry from '../src/template-registry';
+import AddonRegistry from '../src/template-registry.ts';
 
 declare class RenderModifier<Args extends unknown[]> extends Modifier<{
   Element: HTMLElement;