Merge pull request #194 from qonto/drop-rollup-plugin-ts

Expose template registry and drop rollup-plugin-ts

.gitignore

@@ -2,6 +2,7 @@
 
 # compiled output
 dist/
+declarations/
 .pnpm-store/
 
 # dependencies

README.md

@@ -52,6 +52,26 @@ ember install @qonto/ember-lottie
 | containerId   | string   | the dom element id on which to render the animation (mandatory)                                 |
 | onDataReady   | function | a function that triggers the Lottie when you want it                                            |
 
+## TypeScript usage
+
+The `Lottie`` component has proper [Glint](https://github.com/typed-ember/glint) types, which allow you to get strict type checking in your templates when using TypeScript.
+
+Unless you are using [strict mode](http://emberjs.github.io/rfcs/0496-handlebars-strict-mode.html) templates (via [first class component templates](http://emberjs.github.io/rfcs/0779-first-class-component-templates.html)),
+you need to import the addon's Glint template registry entries as described in the [Using Addons](https://typed-ember.gitbook.io/glint/using-glint/ember/using-addons#using-glint-enabled-addons) documentation:
+
+```ts
+// e.g. types/glint.d.ts
+import "@glint/environment-ember-loose";
+import type LottieRegistry from "@qonto/ember-lottie/template-registry";
+
+declare module "@glint/environment-ember-loose/registry" {
+  export default interface Registry
+    extends LottieRegistry /* other addon registries */ {
+    // local entries
+  }
+}
+```
+
 ## Contributing
 
 See the [Contributing](CONTRIBUTING.md) guide for details.

ember-lottie/.eslintignore

@@ -3,6 +3,7 @@
 
 # compiled output
 /dist/
+/declarations/
 
 # misc
 /coverage/

ember-lottie/package.json

@@ -16,17 +16,23 @@
   "author": "",
   "files": [
     "addon-main.cjs",
+    "declarations",
     "dist"
   ],
   "scripts": {
-    "build": "rollup --config",
+    "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",
-    "start": "rollup --config --watch",
+    "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": "rollup --config"
   },
@@ -48,8 +54,9 @@
     "@babel/preset-typescript": "7.22.5",
     "@babel/runtime": "^7.22.5",
     "@embroider/addon-dev": "^3.0.0",
-    "@glint/core": "^0.9.7",
-    "@glint/environment-ember-loose": "^0.9.7",
+    "@glint/core": "1.1.0",
+    "@glint/environment-ember-loose": "1.1.0",
+    "@rollup/plugin-babel": "6.0.3",
     "@tsconfig/ember": "2.0.0",
     "@types/ember": "^4.0.0",
     "@types/ember__application": "^4.0.0",
@@ -71,6 +78,7 @@
     "@typescript-eslint/eslint-plugin": "5.59.6",
     "@typescript-eslint/parser": "5.60.0",
     "concurrently": "^7.2.1",
+    "ember-modifier": "^4.1.0",
     "ember-template-lint": "^4.0.0",
     "eslint": "^8.41.0",
     "eslint-config-prettier": "^8.3.0",
@@ -80,7 +88,6 @@
     "prettier": "^2.5.1",
     "rollup": "3.23.0",
     "rollup-plugin-copy": "3.4.0",
-    "rollup-plugin-ts": "3.2.0",
     "typescript": "4.9.5"
   },
   "publishConfig": {
@@ -98,17 +105,20 @@
     }
   },
   "exports": {
-    ".": "./dist/index.js",
+    ".": {
+      "types": "./declarations/index.d.ts",
+      "default": "./dist/index.js"
+    },
     "./*": {
-      "types": "./dist/*.d.ts",
+      "types": "./declarations/*.d.ts",
       "default": "./dist/*.js"
     },
-    "./addon-main.js": "./addon-main.cjs"
+    "./addon-main.js": "./addon-main.js"
   },
   "typesVersions": {
     "*": {
       "*": [
-        "dist/*"
+        "declarations/*"
       ]
     }
   },

ember-lottie/rollup.config.mjs

@@ -1,4 +1,4 @@
-import typescript from 'rollup-plugin-ts';
+import { babel } from '@rollup/plugin-babel';
 import copy from 'rollup-plugin-copy';
 import { Addon } from '@embroider/addon-dev/rollup';
 
@@ -7,6 +7,9 @@ const addon = new Addon({
   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.
@@ -15,7 +18,7 @@ export default {
   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']),
+    addon.publicEntrypoints(['components/**/*.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
@@ -27,11 +30,13 @@ export default {
     // package names.
     addon.dependencies(),
 
-    // compile TypeScript to latest JavaScript, including Babel transpilation
-    typescript({
-      transpiler: 'babel',
-      browserslist: false,
-      transpileOnly: false
+    // 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.

ember-lottie/src/components/lottie.ts

@@ -20,6 +20,7 @@ class NotFoundError extends Error {
 
 export interface LottieArgs {
   name?: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   animationData?: any;
   path?: string;
   loop?: boolean;
@@ -29,7 +30,12 @@ export interface LottieArgs {
   onDataReady?: () => void;
 }
 
-export default class LottieComponent extends Component<LottieArgs> {
+export interface LottieSignature {
+  Element: HTMLElement;
+  Args: LottieArgs;
+}
+
+export default class LottieComponent extends Component<LottieSignature> {
   private animation?: AnimationItem;
   private mediaQuery = window.matchMedia?.('(prefers-reduced-motion: reduce)');
 

ember-lottie/src/template-registry.ts

@@ -0,0 +1,5 @@
+import LottieComponent from './components/lottie';
+
+export default interface Registry {
+  Lottie: typeof LottieComponent;
+}

ember-lottie/src/unpublished-development-types/index.d.ts

@@ -0,0 +1,18 @@
+// Add any types here that you need for local development only.
+// These will *not* be published as part of your addon, so be careful that your published code does not rely on them!
+
+import '@glint/environment-ember-loose';
+import Modifier from 'ember-modifier';
+
+declare class RenderModifier<
+  Args extends Array<unknown> = Array<unknown>
+> extends Modifier<{
+  Element: HTMLElement;
+  Args: { Positional: [(element: HTMLElement, args: Args) => void, ...Args] };
+}> {}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'did-insert': typeof RenderModifier;
+  }
+}

ember-lottie/tsconfig.json

@@ -6,5 +6,8 @@
   ],
   "glint": {
     "environment": "ember-loose"
+  },
+  "compilerOptions": {
+    "declarationDir": "declarations"
   }
 }