Modernize app

.ember-cli

@@ -4,5 +4,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": false
+  "isTypeScriptProject": false,
+
+  /**
+    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": "loose",
+
+  /**
+    Setting `routeAuthoringFormat` to "strict" will force the blueprint generators to generate GJS
+    or GTS templates for routes. "loose" is the default
+  */
+  "routeAuthoringFormat": "loose"
 }

.gitignore

@@ -1,3 +1,5 @@
+/tmp/
+
 # compiled output
 /dist/
 /declarations/

.prettierignore

@@ -8,6 +8,14 @@
 /coverage/
 !.*
 .*/
+/pnpm-lock.yaml
+ember-cli-update.json
+*.html
+jsconfig.json
+README.md
 
 # ember-try
 /.node_modules.ember-try/
+
+# source markdown
+/source/

.prettierrc.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+module.exports = {
+  plugins: ['prettier-plugin-ember-template-tag'],
+  overrides: [
+    {
+      files: '*.{js,gjs,ts,gts,mjs,mts,cjs,cts}',
+      options: {
+        singleQuote: true,
+        templateSingleQuote: false,
+      },
+    },
+  ],
+};

.stylelintignore

@@ -3,6 +3,3 @@
 
 # compiled output
 /dist/
-
-# addons
-/.node_modules.ember-try/

.stylelintrc.js

@@ -1,5 +1,5 @@
 'use strict';
 
 module.exports = {
-  extends: ['stylelint-config-standard', 'stylelint-prettier/recommended'],
+  extends: ['stylelint-config-standard'],
 };

README.md

@@ -12,7 +12,6 @@ You will need the following things properly installed on your computer.
 
 - [Git](https://git-scm.com/)
 - [Node.js](https://nodejs.org/) (with npm)
-- [Ember CLI](https://cli.emberjs.com/release/)
 - [Google Chrome](https://google.com/chrome/)
 
 
@@ -29,10 +28,13 @@ You will need the following things properly installed on your computer.
 - Visit your app at [http://localhost:4200](http://localhost:4200).
 - Visit your tests at [http://localhost:4200/tests](http://localhost:4200/tests).
 
+### Code Generators
+
+Make use of the many generators for code, try `npm exec ember help generate` for more details
+
 ### Running Tests
 
 - `npm run test`
-- `npm run test:ember -- --server`
 
 ### Linting
 
@@ -41,18 +43,13 @@ You will need the following things properly installed on your computer.
 
 ### Building
 
-- `npm exec ember build` (development)
+- `npm exec vite build --mode development` (development)
 - `npm run build` (production)
 
 ### Deploying
 
 Specify what it takes to deploy your app.
 
-
-## Code Generators
-
-Please use Ember CLI to create files in the `app` folder. You can run `ember help generate` for more detail.
-
 ### Adding the latest Ember version
 
 When a new version of Ember is released (for example, version 3.20), we need to manually update this app. Let's look at how to provide information on version number, features, and deprecations.
@@ -74,7 +71,7 @@ Next, we use custom blueprints to create Markdown files that can list features a
 
 ```bash
 # Creates 3 Markdown files in the `source` directory
-ember generate upgrade-notes 3.20
+npm exec ember generate upgrade-notes 3.20
 ```
 
 Each Markdown file, by default, lists 1 deprecation and 1 feature:
@@ -123,10 +120,11 @@ changes:
 
 For consistency, we recommend relying on [Ember Blog - Releases](https://blog.emberjs.com/tag/releases/). If you want to learn more about a feature or deprecation, you can check the release notes and `CHANGELOG` in each project:
 
-- [Ember.js](https://github.com/emberjs/ember.js)
-- [Ember Data](https://github.com/emberjs/data)
-- [Ember CLI](https://github.com/ember-cli/ember-cli)
-
+- [ember.js](https://emberjs.com/)
+- [Vite](https://vite.dev)
+- Development Browser Extensions
+  - [ember inspector for chrome](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi)
+  - [ember inspector for firefox](https://addons.mozilla.org/en-US/firefox/addon/ember-inspector/)
 
 ## Contributing
 

app/app.js

@@ -1,12 +1,21 @@
 import Application from '@ember/application';
 import Resolver from 'ember-resolver';
 import loadInitializers from 'ember-load-initializers';
-import config from 'upgrade-guide/config/environment';
+import config from './config/environment';
+import { importSync, isDevelopingApp, macroCondition } from '@embroider/macros';
+import setupInspector from '@embroider/legacy-inspector-support/ember-source-4.12';
+import compatModules from '@embroider/virtual/compat-modules';
+import './styles/app.css';
+
+if (macroCondition(isDevelopingApp())) {
+  importSync('./deprecation-workflow');
+}
 
 export default class App extends Application {
   modulePrefix = config.modulePrefix;
   podModulePrefix = config.podModulePrefix;
-  Resolver = Resolver;
+  Resolver = Resolver.withModules(compatModules);
+  inspector = setupInspector(this);
 }
 
-loadInitializers(App, config.modulePrefix);
+loadInitializers(App, config.modulePrefix, compatModules);

app/components/cli-update-commands.hbs

@@ -1,16 +1,21 @@
 <code data-test-command="Ember CLI Update">
-  ember-cli-update --to {{@toVersion}}
+  ember-cli-update --to
+  {{@toVersion}}
 </code>
 <h2>To run codemods:</h2>
 <p>
-  (This should be run after running the normal update shown above, and after you've resolved any conflicts.)
+  (This should be run after running the normal update shown above, and after
+  you've resolved any conflicts.)
 </p>
 <code data-test-command="Run Codemods">
-    ember-cli-update --run-codemods
+  ember-cli-update --run-codemods
 </code>
 
 <p>
   For more details, refer this documentation from
-  <a href="https://github.com/ember-cli/ember-cli-update#examples" rel="noopener noreferrer"
-    target="_blank">ember-cli-update</a>.
+  <a
+    href="https://github.com/ember-cli/ember-cli-update#examples"
+    rel="noopener noreferrer"
+    target="_blank"
+  >ember-cli-update</a>.
 </p>

app/components/ember-versions-form.hbs

@@ -15,10 +15,7 @@
         <optgroup label={{concat "v" versionGroup.major ".x"}}>
           <legend>{{versionGroup.major}}.x Versions</legend>
           {{#each versionGroup.versions as |version|}}
-            <option
-              selected={{eq version this.fromVersion}}
-              value={{version}}
-            >
+            <option selected={{eq version this.fromVersion}} value={{version}}>
               {{version}}
             </option>
           {{/each}}
@@ -39,10 +36,7 @@
         <optgroup label={{concat "v" versionGroup.major ".x"}}>
           <legend>{{versionGroup.major}}.x Versions</legend>
           {{#each versionGroup.versions as |version|}}
-            <option
-              selected={{eq version this.toVersion}}
-              value={{version}}
-            >
+            <option selected={{eq version this.toVersion}} value={{version}}>
               {{version}}
             </option>
           {{/each}}
@@ -52,16 +46,16 @@
   </div>
 
   <EsButton
-    @type='submit'
-    data-test-button='Find Changes'
+    @type="submit"
+    data-test-button="Find Changes"
     disabled={{unless this.areVersionsValid true}}
-    @label='Find Changes'
+    @label="Find Changes"
     class="mt-2"
   />
 
-<div role="alert">
-  {{#unless this.areVersionsValid}}
-    <p class="mt-2">To version should be higher than From version</p>
-  {{/unless}}
-</div>
-</form>
+  <div role="alert">
+    {{#unless this.areVersionsValid}}
+      <p class="mt-2">To version should be higher than From version</p>
+    {{/unless}}
+  </div>
+</form>

app/components/ember-versions-form.js

@@ -3,6 +3,7 @@ import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import { VERSIONS } from 'upgrade-guide/utils/ember-versions';
 import { compare } from 'compare-versions';
+import '../styles/ember-versions-form.css';
 
 // Group the versions by major so we can display option groups.
 const GROUPED_VERSIONS = VERSIONS.reduce((acc, version) => {

app/config/environment.js

@@ -0,0 +1,27 @@
+import loadConfigFromMeta from '@embroider/config-meta-loader';
+import { assert } from '@ember/debug';
+
+const config = loadConfigFromMeta('upgrade-guide');
+
+assert(
+  'config is not an object',
+  typeof config === 'object' && config !== null,
+);
+assert(
+  'modulePrefix was not detected on your config',
+  'modulePrefix' in config && typeof config.modulePrefix === 'string',
+);
+assert(
+  'locationType was not detected on your config',
+  'locationType' in config && typeof config.locationType === 'string',
+);
+assert(
+  'rootURL was not detected on your config',
+  'rootURL' in config && typeof config.rootURL === 'string',
+);
+assert(
+  'APP was not detected on your config',
+  'APP' in config && typeof config.APP === 'object',
+);
+
+export default config;

app/controllers/index.js

@@ -1,6 +1,6 @@
 import Controller from '@ember/controller';
 import { action } from '@ember/object';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 
 export default class IndexController extends Controller {
   @service router;