Merge pull request #237 from josemarluedke/feat/button-gts

feat: Move buttons pkg to Addon V2 and gts

.github/workflows/ci.yml

@@ -28,7 +28,7 @@ jobs:
       - name: Lint HBS
         run: yarn lint:hbs
       - name: Build V2 Addons
-        run: yarn workspace @frontile/core run build
+        run: yarn workspace @frontile/core run build && yarn workspace @frontile/buttons run build
       - name: Test
         run: yarn test
 

packages/buttons/.npmignore

@@ -13,7 +13,10 @@
 /.eslintignore
 /.eslintrc.js
 /.git/
+/.github/
 /.gitignore
+/.git
+/.github
 /.template-lintrc.js
 /.travis.yml
 /.watchmanconfig
@@ -30,4 +33,7 @@
 # ember-try
 /.node_modules.ember-try/
 /bower.json.ember-try
+/npm-shrinkwrap.json.ember-try
 /package.json.ember-try
+/package-lock.json.ember-try
+/yarn.lock.ember-try

packages/buttons/addon-main.js

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

packages/buttons/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/buttons/package.json

@@ -13,56 +13,55 @@
     "doc": "doc",
     "test": "tests"
   },
+  "files": [
+    "addon-main.js",
+    "declarations",
+    "dist",
+    "tailwind"
+  ],
   "scripts": {
-    "build": "ember build --environment=production",
-    "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": {
-    "@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"
+    "@embroider/addon-shim": "^1.8.6",
+    "@frontile/tailwindcss-plugin-helpers": "^0.15.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.9",
-    "@ember/optional-features": "^2.0.0",
-    "@ember/test-helpers": "^3.2.0",
-    "@embroider/test-setup": "^3.0.1",
-    "@frontile/core": "^0.15.0",
-    "@glimmer/component": "^1.1.2",
-    "@glimmer/tracking": "^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/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",
+    "@tsconfig/ember": "^3.0.0",
+    "babel-plugin-ember-template-compilation": "^2.1.1",
+    "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",
+    "rollup-plugin-ts": "^3.2.0",
     "tailwindcss": "^3.3.3",
-    "typescript": "^5.1.6",
-    "webpack": "^5.88.2"
+    "typescript": "^5.1.6"
   },
   "engines": {
     "node": "10.* || >= 12"
@@ -74,6 +73,35 @@
     "edition": "octane"
   },
   "ember-addon": {
-    "configPath": "tests/dummy/config"
+    "version": 2,
+    "type": "addon",
+    "main": "addon-main.js",
+    "app-js": {
+      "./components/button.js": "./dist/_app_/components/button.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/buttons/rollup.config.mjs

@@ -0,0 +1,63 @@
+import ts from "rollup-plugin-ts";
+import { Addon } from '@embroider/addon-dev/rollup';
+
+const addon = new Addon({
+  srcDir: 'src',
+  destDir: 'dist',
+});
+
+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(),
+
+    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.
+    // See `babel.config.json` for the actual Babel configuration!
+    ts({
+      transpiler: "babel",
+      transpileOnly: true,
+      babelConfig: "./babel.config.js",
+      browserslist: ["last 2 firefox versions", "last 2 chrome versions"],
+    }),
+
+
+    // 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/buttons/addon/components/button.ts → packages/buttons/src/components/button.gts

@@ -1,4 +1,5 @@
 import Component from '@glimmer/component';
+import { hash } from '@ember/helper';
 
 export interface ButtonArgs {
   /**
@@ -34,9 +35,9 @@ export interface ButtonArgs {
 export interface ButtonSignature {
   Args: ButtonArgs;
   Blocks: {
-    default: [{ classNames: string } | null];
+    default: [{ classNames: string }];
   };
-  Element: HTMLButtonElement | null;
+  Element: HTMLButtonElement;
 }
 
 export default class Button extends Component<ButtonSignature> {
@@ -70,4 +71,14 @@ export default class Button extends Component<ButtonSignature> {
 
     return names.join(' ');
   }
+
+  <template>
+    {{#if @isRenderless}}
+      {{yield (hash classNames=this.classNames)}}
+    {{else}}
+      <button type={{this.type}} class={{this.classNames}} ...attributes>
+        {{yield (hash classNames=this.classNames)}}
+      </button>
+    {{/if}}
+  </template>
 }

packages/buttons/src/template-registry.ts

@@ -0,0 +1,5 @@
+import type Button from './components/button';
+
+export default interface Registry {
+  Button: typeof Button;
+}