Combine electron and ember apps and convert to vite

.ember-cli

@@ -3,5 +3,17 @@
     Setting `isTypeScriptProject` to true will force the blueprint generators to generate TypeScript
     rather than JavaScript by default, when a TypeScript version of a given blueprint is available.
   */
-  "isTypeScriptProject": true
+  "isTypeScriptProject": true,
+
+  /**
+    Setting `componentAuthoringFormat` to "strict" will force the blueprint generators to generate GJS
+    or GTS files for the component and the component rendering test. "loose" is the default.
+  */
+  "componentAuthoringFormat": "strict",
+
+  /**
+    Setting `routeAuthoringFormat` to "strict" will force the blueprint generators to generate GJS
+    or GTS templates for routes. "loose" is the default
+  */
+  "routeAuthoringFormat": "strict"
 }

.gitignore

@@ -3,12 +3,14 @@
 # compiled output
 /dist/
 /declarations/
+/tmp/
 
 # dependencies
 /node_modules/
 
 # misc
 /.env*
+*.local
 /.pnp*
 /.sass-cache
 /.eslintcache
@@ -19,8 +21,24 @@
 /testem.log
 /yarn-error.log
 
+# ember-try
+/.node_modules.ember-try/
+/npm-shrinkwrap.json.ember-try
+/package.json.ember-try
+/package-lock.json.ember-try
+/yarn.lock.ember-try
+
 # broccoli-debug
 /DEBUG/
 
 electron-out/
 .idea/
+
+# Vite
+.vite/
+
+# Electron-Forge
+out/
+
+# TypeScript
+*.tsbuildinfo

.prettierignore

@@ -18,8 +18,6 @@ ember-cli-update.json
 # ember-electron
 /electron-app/node_modules/
 /electron-app/out/
-/electron-app/ember-dist/
-/electron-app/ember-test/
 
 # Sentry
 /electron-app/sentry-symbols.js

.prettierrc.js → .prettierrc.mjs

@@ -1,5 +1,3 @@
-'use strict';
-
 const testing = [
   '^ember-cli-htmlbars($|\\/)',
   '^qunit',
@@ -34,18 +32,45 @@ const importOrder = [
 ];
 const importOrderParserPlugins = ['typescript', 'decorators-legacy'];
 
-module.exports = {
+export default {
   plugins: [
     'prettier-plugin-ember-template-tag',
     '@ianvs/prettier-plugin-sort-imports',
   ],
   importOrder,
   importOrderParserPlugins,
+  singleQuote: true,
   overrides: [
     {
-      files: '*.{js,gjs,ts,gts,mjs,mts,cjs,cts}',
-      options: { singleQuote: true, templateSingleQuote: false },
+      files: ['*.js', '*.ts', '*.cjs', '.mjs', '.cts', '.mts', '.cts'],
+      options: {
+        trailingComma: 'es5',
+      },
+    },
+    {
+      files: ['*.html'],
+      options: {
+        singleQuote: false,
+      },
+    },
+    {
+      files: ['*.json'],
+      options: {
+        singleQuote: false,
+      },
+    },
+    {
+      files: ['*.hbs'],
+      options: {
+        singleQuote: false,
+      },
+    },
+    {
+      files: ['*.gjs', '*.gts'],
+      options: {
+        templateSingleQuote: false,
+        trailingComma: 'es5',
+      },
     },
-    { files: '*.{yaml,yml}', options: { singleQuote: true } },
   ],
 };

.stylelintrc.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+module.exports = {
+  extends: ['stylelint-config-standard'],
+  rules: {
+    'at-rule-no-deprecated': [true, { ignoreAtRules: ['/^view/', 'apply'] }],
+    'at-rule-no-unknown': [
+      true,
+      { ignoreAtRules: ['plugin', 'reference', 'theme'] },
+    ],
+    'custom-property-empty-line-before': null,
+    'custom-property-pattern': null,
+    'declaration-empty-line-before': null,
+    'import-notation': null,
+  },
+};

.template-lintrc.js → .template-lintrc.mjs

@@ -1,7 +1,5 @@
-'use strict';
-
-module.exports = {
-  extends: ['recommended'],
+export default {
+  extends: 'recommended',
   rules: {
     'no-at-ember-render-modifiers': false,
     'no-builtin-form-components': false,

.tool-versions

@@ -1,2 +1,2 @@
 nodejs 20.19.0
-pnpm 10.11.0
+pnpm 10.18.2

.vscode/settings.json

@@ -1,6 +1,2 @@
 {
-  "eslint.validate": [
-    "glimmer-ts",
-    "glimmer-js"
-  ]
 }

app/app.ts

@@ -3,7 +3,9 @@ import { InitSentryForEmber } from '@sentry/ember';
 import loadInitializers from 'ember-load-initializers';
 import Resolver from 'ember-resolver';
 import { importSync, isDevelopingApp, macroCondition } from '@embroider/macros';
+import compatModules from '@embroider/virtual/compat-modules';
 import config from 'swach/config/environment';
+import './styles/all.css';
 
 if (macroCondition(isDevelopingApp())) {
   importSync('./deprecation-workflow');
@@ -14,7 +16,7 @@ InitSentryForEmber();
 export default class App extends Application {
   modulePrefix = config.modulePrefix;
   podModulePrefix = config.podModulePrefix;
-  Resolver = Resolver;
+  Resolver = Resolver.withModules(compatModules);
 }
 
-loadInitializers(App, config.modulePrefix);
+loadInitializers(App, config.modulePrefix, compatModules);

app/components/about.gts

@@ -3,7 +3,6 @@ import { action } from '@ember/object';
 import type Owner from '@ember/owner';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import type { IpcRenderer } from 'electron';
 
 interface AboutSignature {
   Element: HTMLDivElement;
@@ -38,16 +37,16 @@ export default class AboutComponent extends Component<AboutSignature> {
       </p>
     </div>
   </template>
-  declare ipcRenderer: IpcRenderer;
+  declare ipcRenderer: Window['electronAPI']['ipcRenderer'];
 
   copyrightYear = new Date().getFullYear();
   @tracked version = 'Version not available';
 
   constructor(owner: Owner, args: Record<string, unknown>) {
     super(owner, args);
 
-    if (typeof requireNode !== 'undefined') {
-      const { ipcRenderer } = requireNode('electron');
+    if (typeof window !== 'undefined' && window.electronAPI) {
+      const { ipcRenderer } = window.electronAPI;
 
       this.ipcRenderer = ipcRenderer;
 
@@ -61,7 +60,7 @@ export default class AboutComponent extends Component<AboutSignature> {
   visitWebsite(event: Event): void {
     event.preventDefault();
 
-    if (typeof requireNode !== 'undefined') {
+    if (typeof window !== 'undefined' && window.electronAPI) {
       void this.ipcRenderer.invoke('open-external', 'https://swach.io/');
     }
   }

app/components/alpha-input.gts

@@ -4,7 +4,7 @@ import { action, set } from '@ember/object';
 import Component from '@glimmer/component';
 // @ts-expect-error TODO: fix this
 import OneWayInputMask from 'ember-inputmask/_app_/components/one-way-input-mask.js';
-import type { SelectedColorModel } from 'swach/components/rgb-input';
+import type { SelectedColorModel } from './rgb-input';
 import { rgbaToHex } from 'swach/data-models/color';
 
 interface AlphaInputSignature {

app/components/animated-drag-sort-list.gts

@@ -5,11 +5,12 @@ import AnimatedEach from 'ember-animated/components/animated-each';
 import { easeOut } from 'ember-animated/easings/cosine';
 import move from 'ember-animated/motions/move';
 import { fadeOut } from 'ember-animated/motions/opacity';
-// @ts-expect-error TODO: fix this
 import DragSortItem from 'ember-drag-sort/components/drag-sort-item';
 import DragSortList from 'ember-drag-sort/components/drag-sort-list';
 
-export default class AnimatedDragSortList extends DragSortList {
+export default class AnimatedDragSortList<
+  Item extends object,
+> extends DragSortList<Item> {
   <template>
     {{!@glint-nocheck}}
     <AnimatedContainer ...attributes>
@@ -37,13 +38,14 @@ export default class AnimatedDragSortList extends DragSortList {
   </template>
   didDrag = false;
 
-  dragEnter(event: Event): void {
+  @action
+  dragEnter(event: DragEvent) {
     set(this, 'didDrag', true);
     super.dragEnter(event);
   }
 
   @action
-  rules(): unknown {
+  rules() {
     if (!this.didDrag) {
       // eslint-disable-next-line @typescript-eslint/unbound-method
       return this.transition;

app/components/color-picker.gts

@@ -7,22 +7,22 @@ import type Router from '@ember/routing/router-service';
 import { service } from '@ember/service';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import type { Store } from 'ember-orbit';
+import { orbit, type Store } from 'ember-orbit';
 import { TinyColor } from '@ctrl/tinycolor';
 import iro from '@jaames/iro';
 import { rgbaToHex } from '../data-models/color.ts';
 import type ColorModel from '../data-models/color.ts';
 import type NearestColor from '../services/nearest-color.ts';
 import type UndoManager from '../services/undo-manager.ts';
-import AlphaInput from './alpha-input.ts';
-import ColorRow from './color-row.ts';
-import HexInput from './hex-input.ts';
-import RgbInput from './rgb-input.ts';
+import AlphaInput from './alpha-input.gts';
+import ColorRow from './color-row.gts';
+import HexInput from './hex-input.gts';
 import type {
   PrivateRGBAHex,
   PublicRGBAHex,
   SelectedColorModel,
-} from './rgb-input.ts';
+} from './rgb-input';
+import RgbInput from './rgb-input.gts';
 
 interface ColorPickerSignature {
   Element: HTMLDivElement;
@@ -38,7 +38,7 @@ export default class ColorPickerComponent extends Component<ColorPickerSignature
   <template>
     {{#if @isShown}}
       <div
-        class="color-picker-popover bg-main border-menu fixed left-0 !top-[49px] h-full m-0 pb-4 px-2 pt-4 text-alt w-screen"
+        class="color-picker-popover bg-main border-menu fixed left-0 top-[49px]! h-full m-0 pb-4 px-2 pt-4 text-alt w-screen"
       >
         <div
           class="h-full relative w-full"
@@ -47,7 +47,7 @@ export default class ColorPickerComponent extends Component<ColorPickerSignature
         >
           <ColorRow @color={{this._selectedColor}} @showActions={{false}} />
 
-          <div class="bg-menu flex p-4 relative rounded">
+          <div class="bg-menu flex p-4 relative rounded-sm">
             <div
               class="flex-1 w-auto"
               id="color-picker-container"
@@ -58,7 +58,7 @@ export default class ColorPickerComponent extends Component<ColorPickerSignature
             <div class="absolute grow mt-4 mr-4 right-0 top-0">
               <HexInput
                 data-test-color-picker-hex
-                class="input rounded mb-4 w-24"
+                class="input rounded-sm mb-4 w-24"
                 @selectedColor={{this._selectedColor}}
                 @update={{fn this.updateColorInputs "hex"}}
                 @updateColor={{this.updateColor}}
@@ -123,7 +123,7 @@ export default class ColorPickerComponent extends Component<ColorPickerSignature
           </div>
 
           <div class="flex w-full">
-            <div class="bg-menu flex-1 mt-3 mr-3 px-2 py-4 relative rounded">
+            <div class="bg-menu flex-1 mt-3 mr-3 px-2 py-4 relative rounded-sm">
               <div class="flex flex-col h-full w-full">
                 <div
                   class="font-medium text-xxs text-main-text w-full whitespace-nowrap"
@@ -137,7 +137,7 @@ export default class ColorPickerComponent extends Component<ColorPickerSignature
               </div>
             </div>
 
-            <div class="bg-menu flex-1 mt-3 px-2 py-4 relative rounded">
+            <div class="bg-menu flex-1 mt-3 px-2 py-4 relative rounded-sm">
               <div class="flex flex-col h-full w-full">
                 <div
                   class="font-medium text-xxs text-main-text w-full whitespace-nowrap"
@@ -153,7 +153,7 @@ export default class ColorPickerComponent extends Component<ColorPickerSignature
           </div>
 
           <div class="flex w-full">
-            <div class="bg-menu flex-1 mt-3 mr-3 px-2 py-4 relative rounded">
+            <div class="bg-menu flex-1 mt-3 mr-3 px-2 py-4 relative rounded-sm">
               <div class="flex flex-col h-full w-full">
                 <div
                   class="font-medium text-xxs text-main-text w-full whitespace-nowrap"
@@ -167,7 +167,7 @@ export default class ColorPickerComponent extends Component<ColorPickerSignature
               </div>
             </div>
 
-            <div class="bg-menu flex-1 mt-3 px-2 py-4 relative rounded">
+            <div class="bg-menu flex-1 mt-3 px-2 py-4 relative rounded-sm">
               <div class="flex flex-col h-full w-full">
                 <div
                   class="font-medium text-xxs text-main-text w-full whitespace-nowrap"
@@ -206,9 +206,11 @@ export default class ColorPickerComponent extends Component<ColorPickerSignature
       </div>
     {{/if}}
   </template>
+
+  @orbit declare store: Store;
+
   @service declare nearestColor: NearestColor;
   @service declare router: Router;
-  @service declare store: Store;
   @service declare undoManager: UndoManager;
 
   colorPicker?: iro.ColorPicker;
@@ -260,9 +262,9 @@ export default class ColorPickerComponent extends Component<ColorPickerSignature
             { type: 'color', id: colorToEdit.id },
             attr,
             //@ts-expect-error TODO fix this error later
-            this._selectedColor[attr],
-          ),
-        ),
+            this._selectedColor[attr]
+          )
+        )
       );
 
       this.undoManager.setupUndoRedo();