Add gts support (#1946)

* Add gts support

* Lint setup

* Prettier import sorting, more lint

* Put lint config back

* Fix lint

* Remove NVP lint config

* Remove prettier template lint

Author: RobbieTheWagner

.eslintrc.js

@@ -18,7 +18,6 @@ module.exports = {
     'eslint:recommended',
     'plugin:ember/recommended',
     'plugin:prettier/recommended',
-    '@clark/ember-order-imports',
   ],
   env: {
     browser: true,
@@ -86,7 +85,7 @@ module.exports = {
     // Typescript files
     {
       parser: '@typescript-eslint/parser',
-      files: ['app/**/*.ts', 'tests/**/*.ts'],
+      files: ['app/**/*.{gts,ts}', 'tests/**/*.ts'],
       plugins: ['@typescript-eslint'],
       extends: ['plugin:@typescript-eslint/recommended'],
       rules: {

.prettierignore

@@ -11,3 +11,15 @@
 
 # ember-try
 /.node_modules.ember-try/
+
+# ember-electron
+/electron-app/node_modules/
+/electron-app/out/
+/electron-app/ember-dist/
+/electron-app/ember-test/
+
+# Sentry
+/electron-app/sentry-symbols.js
+
+# Types
+/types/

.prettierrc.js

@@ -1,12 +1,73 @@
 'use strict';
 
+const testing = [
+  '^ember-cli-htmlbars($|\\/)',
+  '^qunit',
+  '^ember-qunit',
+  '^@ember/test-helpers',
+  '^ember-exam',
+  '^ember-cli-mirage',
+  '^sinon',
+  '^ember-sinon-qunit',
+  '^(@[^\\/]+\\/)?[^\\/]+\\/test-support($|\\/)',
+].join('|');
+
+const emberCore = [
+  '^ember$',
+  '^@ember\\/',
+  '^ember-data($|\\/)',
+  '^@ember-data\\/',
+  '^@glimmer\\/',
+  '^require$',
+].join('|');
+
+const emberAddons = ['^@?ember-', '^@[^\\/]+\\/ember($|\\/|-)'].join('|');
+
+const swachInternals = ['^swach/(.*)$', '^[./]'].join('|');
+
+const importOrder = [
+  testing,
+  emberCore,
+  emberAddons,
+  '<THIRD_PARTY_MODULES>',
+  swachInternals,
+];
+const importOrderParserPlugins = ['typescript', 'decorators-legacy'];
+const importOrderSeparation = true;
+const importOrderSortSpecifiers = true;
+
 module.exports = {
+  plugins: [
+    'prettier-plugin-ember-template-tag',
+    require('@trivago/prettier-plugin-sort-imports'),
+  ],
+  importOrder,
+  importOrderParserPlugins,
+  importOrderSeparation,
+  importOrderSortSpecifiers,
   overrides: [
     {
-      files: '*.{js,ts}',
+      files: ['**/*.hbs'],
+      options: {
+        singleQuote: false,
+      },
+    },
+    {
+      files: '*.{js,ts,gjs,gts}',
+      options: {
+        singleQuote: true,
+      },
+    },
+    {
+      files: '*.{yaml,yml}',
       options: {
         singleQuote: true,
       },
     },
   ],
 };
+
+exports.importOrder = importOrder;
+exports.importOrderParserPlugins = importOrderParserPlugins;
+exports.importOrderSeparation = importOrderSeparation;
+exports.importOrderSortSpecifiers = importOrderSortSpecifiers;

.template-lintrc.js

@@ -1,8 +1,7 @@
 'use strict';
 
 module.exports = {
-  plugins: ['ember-template-lint-plugin-prettier'],
-  extends: ['recommended', 'ember-template-lint-plugin-prettier:recommended'],
+  extends: ['recommended'],
   rules: {
     'no-curly-component-invocation': {
       allow: ['svg-jar', '-with-dynamic-vars'],

CHANGELOG.md

@@ -4,7 +4,6 @@ Releases are mostly automated using
 [release-it](https://github.com/release-it/release-it/) and
 [lerna-changelog](https://github.com/lerna/lerna-changelog/).
 
-
 ## Preparation
 
 Since the majority of the actual release process is automated, the primary
@@ -18,25 +17,24 @@ guiding principle here is that changelogs are for humans, not machines.
 
 When reviewing merged PR's the labels to be used are:
 
-* breaking - Used when the PR is considered a breaking change.
-* enhancement - Used when the PR adds a new feature or enhancement.
-* bug - Used when the PR fixes a bug included in a previous release.
-* documentation - Used when the PR adds or updates documentation.
-* internal - Used for internal changes that still require a mention in the
+- breaking - Used when the PR is considered a breaking change.
+- enhancement - Used when the PR adds a new feature or enhancement.
+- bug - Used when the PR fixes a bug included in a previous release.
+- documentation - Used when the PR adds or updates documentation.
+- internal - Used for internal changes that still require a mention in the
   changelog/release notes.
 
-
 ## Release
 
 Once the prep work is completed, the actual release is straight forward:
 
-* First, ensure that you have installed your projects dependencies:
+- First, ensure that you have installed your projects dependencies:
 
 ```
 pnpm install
 ```
 
-* Second, ensure that you have obtained a
+- Second, ensure that you have obtained a
   [GitHub personal access token][generate-token] with the `repo` scope (no
   other permissions are needed). Make sure the token is available as the
   `GITHUB_AUTH` environment variable.
@@ -49,7 +47,7 @@ pnpm install
 
 [generate-token]: https://github.com/settings/tokens/new?scopes=repo&description=GITHUB_AUTH+env+variable
 
-* And last (but not least 😁) do your release.
+- And last (but not least 😁) do your release.
 
 ```
 npx release-it

RELEASE.md

@@ -1,10 +1,9 @@
 import Application from '@ember/application';
 
+import { InitSentryForEmber } from '@sentry/ember';
 import loadInitializers from 'ember-load-initializers';
 import Resolver from 'ember-resolver';
 
-import { InitSentryForEmber } from '@sentry/ember';
-
 import config from 'swach/config/environment';
 
 InitSentryForEmber();

app/app.js

@@ -16,13 +16,15 @@ export default class CognitoAuthenticatorExtended extends CognitoAuthenticator {
 
   async _resolveAuth(user) {
     const { cognito } = this;
+
     cognito._setUser(user);
 
     // Now pull out the (promisified) user
     const session = await cognito.user.getSession();
     const credentials = await this.auth.currentCredentials();
 
     cognito.startRefreshTask(session);
+
     return this._makeAuthData(user, session, credentials);
   }
 
@@ -31,8 +33,10 @@ export default class CognitoAuthenticatorExtended extends CognitoAuthenticator {
     const { auth, user } = cognito;
     // Get the session, which will refresh it if necessary
     const session = await user.getSession();
+
     if (session.isValid()) {
       cognito.startRefreshTask(session);
+
       const awsUser = await auth.currentAuthenticatedUser();
       const credentials = await this.auth.currentCredentials();
 

app/authenticators/cognito.js

@@ -19,6 +19,7 @@ export default class AboutComponent extends Component<AboutSignature> {
 
     if (typeof requireNode !== 'undefined') {
       const { ipcRenderer } = requireNode('electron');
+
       this.ipcRenderer = ipcRenderer;
 
       this.ipcRenderer.invoke('getAppVersion').then((version: string) => {

app/components/about/index.hbs renamed to app/components/about.hbs

@@ -1,7 +1,7 @@
 import { action, set } from '@ember/object';
 import Component from '@glimmer/component';
 
-import { SelectedColorModel } from 'swach/components/rgb-input';
+import type { SelectedColorModel } from 'swach/components/rgb-input';
 import { rgbaToHex } from 'swach/data-models/color';
 
 interface AlphaInputSignature {
@@ -27,6 +27,7 @@ export default class AlphaInputComponent extends Component<AlphaInputSignature>
   @action
   isComplete(buffer: Buffer, opts: { regex: string }): boolean {
     const value = buffer.join('');
+
     return Boolean(value.length) && new RegExp(opts.regex).test(value);
   }
 
@@ -48,6 +49,7 @@ export default class AlphaInputComponent extends Component<AlphaInputSignature>
 
     const { r, g, b, a } = selectedColor;
     const hex = rgbaToHex(r, g, b, a);
+
     set(selectedColor, '_hex', hex);
     set(selectedColor, 'hex', hex);
     this.args.updateColor();

app/components/about/index.ts renamed to app/components/about.ts

@@ -38,6 +38,7 @@ export default class AnimatedDragSortList extends DragSortList {
       if (sprite.finalBounds?.height) {
         sprite.startTranslatedBy(0, -sprite.finalBounds.height / 2);
       }
+
       move(sprite, { easing: easeOut });
     }
 

app/components/alpha-input/index.hbs renamed to app/components/alpha-input.hbs

@@ -1,4 +1,5 @@
 {{#if @isShown}}
+  {{!@glint-expect-error ember-tooltips does not ship types}}
   <EmberPopover
     @arrowClass="color-picker-arrow custom-arrow"
     @event="none"
@@ -8,11 +9,7 @@
     @spacing={{10}}
     @tooltipClass="color-picker-popover bg-main border-menu fixed h-full m-0 pb-4 pl-3 pr-3 pt-5 text-alt w-screen"
   >
-    <div
-      class="h-full relative w-full"
-      data-test-color-picker
-      {{did-update this.setScrollPosition}}
-    >
+    <div class="h-full relative w-full" data-test-color-picker>
       <ColorRow @color={{this._selectedColor}} @showActions={{false}} />
 
       <div class="bg-menu flex p-4 relative rounded">

app/components/alpha-input/index.ts renamed to app/components/alpha-input.ts

@@ -9,13 +9,15 @@ import type { Store } from 'ember-orbit';
 import { TinyColor } from '@ctrl/tinycolor';
 import iro from '@jaames/iro';
 
-import {
+import 'swach/components/color-row';
+import type {
   PrivateRGBAHex,
   PublicRGBAHex,
   SelectedColorModel,
   SelectedColorPOJO,
 } from 'swach/components/rgb-input';
-import ColorModel, { rgbaToHex } from 'swach/data-models/color';
+import { rgbaToHex } from 'swach/data-models/color';
+import type ColorModel from 'swach/data-models/color';
 import type NearestColor from 'swach/services/nearest-color';
 import type UndoManager from 'swach/services/undo-manager';
 
@@ -47,6 +49,7 @@ export default class ColorPickerComponent extends Component<ColorPickerSignature
 
     if (this._selectedColor?.hex) {
       const tinyColor = new TinyColor(this._selectedColor.hex);
+
       hsl = tinyColor.toHslString();
       hsv = tinyColor.toHsvString();
       rgb = tinyColor.toRgbString();
@@ -64,13 +67,15 @@ export default class ColorPickerComponent extends Component<ColorPickerSignature
     };
 
     const { selectedColor } = this.args;
+
     this.setSelectedColor(selectedColor ? selectedColor.hex : '#42445a');
     this._setupColorPicker(element, this._selectedColor.hex);
   }
 
   @action
   async saveColorAndClose(): Promise<void> {
     const colorToEdit = this.args.selectedColor;
+
     // If we passed a color to edit, save it, otherwise create a new global color
     if (colorToEdit) {
       // TODO: Consider refactoring to use a single `updateRecord` operation
@@ -125,6 +130,7 @@ export default class ColorPickerComponent extends Component<ColorPickerSignature
   updateColor(): void {
     const { r, g, b } = this._selectedColor;
     const namedColor = this.nearestColor.nearest({ r, g, b });
+
     set(this._selectedColor, 'name', namedColor.name);
 
     this.colorPicker?.setColors([this._selectedColor].mapBy('hex'));

app/components/animated-drag-sort-list/index.hbs renamed to app/components/animated-drag-sort-list.hbs

@@ -12,7 +12,7 @@ interface ColorRowSignature {
   Element: HTMLDivElement;
   Args: {
     color: ColorModel;
-    deleteColor: (color: ColorModel) => void;
+    deleteColor?: (color: ColorModel) => void;
     palette: PaletteModel;
     showActions: boolean;
     toggleColorPickerIsShown: (color?: ColorModel) => void;
@@ -34,7 +34,7 @@ export default class ColorRowComponent extends Component<ColorRowSignature> {
   @action
   deleteColor(color: ColorModel): void {
     if (!this.args.palette.isLocked) {
-      this.args.deleteColor(color);
+      this.args.deleteColor?.(color);
     }
   }
 

app/components/animated-drag-sort-list/index.ts renamed to app/components/animated-drag-sort-list.ts

@@ -2,14 +2,15 @@ import { action } from '@ember/object';
 import { service } from '@ember/service';
 import Component from '@glimmer/component';
 
-import Sprite from 'ember-animated/-private/sprite';
+import type Sprite from 'ember-animated/-private/sprite';
 import { easeOut } from 'ember-animated/easings/cosine';
 import move from 'ember-animated/motions/move';
 import { fadeOut } from 'ember-animated/motions/opacity';
 import type { Store } from 'ember-orbit';
 
 import type { RecordOperationTerm } from '@orbit/records';
 
+import 'swach/components/color-row';
 import type ColorModel from 'swach/data-models/color';
 import type PaletteModel from 'swach/data-models/palette';
 import type UndoManager from 'swach/services/undo-manager';
@@ -27,6 +28,7 @@ export default class ColorsListComponent extends Component<ColorsListSignature>
 
   get sortedColors(): (ColorModel | undefined)[] | undefined {
     const { palette } = this.args;
+
     if (!palette.$isDisconnected) {
       if (palette.isColorHistory) {
         return palette.colors.sortBy('createdAt').reverse();
@@ -36,6 +38,8 @@ export default class ColorsListComponent extends Component<ColorsListSignature>
         });
       }
     }
+
+    return undefined;
   }
 
   *transition({
@@ -51,6 +55,7 @@ export default class ColorsListComponent extends Component<ColorsListSignature>
       if (sprite.finalBounds?.height) {
         sprite.startTranslatedBy(0, -sprite.finalBounds.height / 2);
       }
+
       move(sprite, { easing: easeOut });
     }
 
@@ -66,6 +71,7 @@ export default class ColorsListComponent extends Component<ColorsListSignature>
   @action
   async deleteColor(color: ColorModel): Promise<void> {
     const { palette } = this.args;
+
     if (color && palette && !palette.isLocked) {
       const colorsList = palette.colors.map((color) => {
         return { type: 'color', id: color.id };