Add glint in docs (#384)

docs/.ember-cli

@@ -3,5 +3,5 @@
     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": true
 }

docs/.eslintrc.js

@@ -2,18 +2,11 @@
 
 module.exports = {
   root: true,
-  parser: '@babel/eslint-parser',
+  parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaVersion: 'latest',
-    sourceType: 'module',
-    requireConfigFile: false,
-    babelOptions: {
-      plugins: [
-        ['@babel/plugin-proposal-decorators', { decoratorsBeforeExport: true }],
-      ],
-    },
   },
-  plugins: ['ember'],
+  plugins: ['ember', '@typescript-eslint'],
   extends: [
     'eslint:recommended',
     'plugin:ember/recommended',
@@ -24,6 +17,15 @@ module.exports = {
   },
   rules: {},
   overrides: [
+    // ts files
+    {
+      files: ['**/*.ts'],
+      extends: [
+        'plugin:@typescript-eslint/eslint-recommended',
+        'plugin:@typescript-eslint/recommended',
+      ],
+      rules: {},
+    },
     // node files
     {
       files: [
@@ -38,9 +40,6 @@ module.exports = {
         './lib/*/index.js',
         './server/**/*.js',
       ],
-      parserOptions: {
-        sourceType: 'script',
-      },
       env: {
         browser: false,
         node: true,

docs/.prettierignore

@@ -1,10 +1,13 @@
-# Prettier is also run from each package, so the ignores here
-# protect against files that may not be within a package
+# unconventional js
+/blueprints/*/files/
+
+# compiled output
+/dist/
 
 # misc
+/coverage/
 !.*
-.lint-todo/
+.*/
 
 # ember-try
 /.node_modules.ember-try/
-/pnpm-lock.ember-try.yaml

docs/README.md

@@ -8,19 +8,20 @@ A short introduction of this app could easily go here.
 You will need the following things properly installed on your computer.
 
 * [Git](https://git-scm.com/)
-* [Node.js](https://nodejs.org/) (with npm)
+* [Node.js](https://nodejs.org/)
+* [pnpm](https://pnpm.io/)
 * [Ember CLI](https://cli.emberjs.com/release/)
 * [Google Chrome](https://google.com/chrome/)
 
 ## Installation
 
 * `git clone <repository-url>` this repository
 * `cd docs`
-* `npm install`
+* `pnpm install`
 
 ## Running / Development
 
-* `npm run start`
+* `pnpm start`
 * Visit your app at [http://localhost:4200](http://localhost:4200).
 * Visit your tests at [http://localhost:4200/tests](http://localhost:4200/tests).
 
@@ -30,18 +31,18 @@ Make use of the many generators for code, try `ember help generate` for more det
 
 ### Running Tests
 
-* `npm run test`
-* `npm run test:ember -- --server`
+* `pnpm test`
+* `pnpm test:ember --server`
 
 ### Linting
 
-* `npm run lint`
-* `npm run lint:fix`
+* `pnpm lint`
+* `pnpm lint:fix`
 
 ### Building
 
-* `npm exec ember build` (development)
-* `npm run build` (production)
+* `pnpm ember build` (development)
+* `pnpm build` (production)
 
 ### Deploying
 

docs/app/app.js → docs/app/app.ts

@@ -3,6 +3,7 @@ import Resolver from 'ember-resolver';
 import loadInitializers from 'ember-load-initializers';
 import config from 'docs/config/environment';
 import { registerDateLibrary } from 'ember-power-calendar';
+// @ts-expect-error Could not find a declaration file for module
 import DateUtils from 'ember-power-calendar-moment';
 
 registerDateLibrary(DateUtils);

docs/app/components/calendar-nav-with-year-buttons.ts

@@ -0,0 +1,11 @@
+import templateOnly from '@ember/component/template-only';
+
+export interface CalendarNavWithYearButtonsSignature {
+  Element: Element;
+  Args: {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    calendar: any;
+  };
+}
+
+export default templateOnly<CalendarNavWithYearButtonsSignature>();

docs/app/config/environment.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Type declarations for
+ *    import config from 'docs/config/environment'
+ */
+declare const config: {
+  environment: string;
+  modulePrefix: string;
+  podModulePrefix: string;
+  locationType: 'history' | 'hash' | 'none';
+  rootURL: string;
+  APP: Record<string, unknown>;
+};
+
+export default config;

docs/app/index.html

@@ -1,22 +1,24 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Ember Power Calendar</title>
-    <meta name="description" content="Ember Power Calendar: A customizable calendar component for Ember">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    {{content-for "head"}}
-
-    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css">
-    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/docs.css">
-    {{content-for "head-footer"}}
-  </head>
-  <body>
-    {{content-for "body"}}
-
-    <script src="{{rootURL}}assets/vendor.js"></script>
-    <script src="{{rootURL}}assets/docs.js"></script>
-    {{content-for "body-footer"}}
-  </body>
-</html>
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Ember Power Calendar</title>
+    <meta name="description" content="Ember Power Calendar: A customizable calendar component for Ember">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    {{content-for "head"}}
+
+    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css">
+    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/docs.css">
+
+    {{content-for "head-footer"}}
+  </head>
+  <body>
+    {{content-for "body"}}
+
+    <script src="{{rootURL}}assets/vendor.js"></script>
+    <script src="{{rootURL}}assets/docs.js"></script>
+
+    {{content-for "body-footer"}}
+  </body>
+</html>

docs/config/ember-cli-update.json

@@ -12,7 +12,8 @@
           "isBaseBlueprint": true,
           "options": [
             "--pnpm",
-            "--no-welcome"
+            "--no-welcome",
+            "--typescript"
           ]
         }
       ]

docs/ember-cli-build.js

@@ -4,6 +4,7 @@ const EmberApp = require('ember-cli/lib/broccoli/ember-app');
 
 module.exports = function (defaults) {
   let app = new EmberApp(defaults, {
+    'ember-cli-babel': { enableTypeScriptTransform: true },
     snippetPaths: ['app/components/snippets'],
     autoImport: {
       watchDependencies: ['ember-power-calendar'],

docs/package.json

@@ -2,7 +2,7 @@
   "name": "docs",
   "version": "0.0.0",
   "private": true,
-  "description": "Test app for ember-power-calendar addon",
+  "description": "Docs app for ember-power-calendar addon",
   "repository": "",
   "license": "MIT",
   "author": "",
@@ -20,25 +20,24 @@
     "lint:hbs:fix": "ember-template-lint . --fix",
     "lint:js": "eslint . --cache",
     "lint:js:fix": "eslint . --fix",
+    "lint:types": "glint",
     "start": "ember serve",
     "test": "concurrently \"npm:lint\" \"npm:test:*\" --names \"lint,test:\"",
     "test:ember": "ember test"
   },
   "devDependencies": {
     "@babel/core": "^7.23.9",
-    "@babel/eslint-parser": "^7.23.3",
-    "@babel/plugin-proposal-decorators": "^7.23.9",
     "@ember/optional-features": "^2.0.0",
     "@ember/string": "^3.1.1",
     "@ember/test-helpers": "^3.2.1",
-    "@embroider/macros": "^1.13.4",
+    "@embroider/macros": "^1.13.5",
     "@embroider/test-setup": "^3.0.3",
+    "@glimmer/component": "^1.1.2",
+    "@glimmer/tracking": "^1.1.2",
     "@glint/core": "^1.3.0",
     "@glint/environment-ember-loose": "^1.3.0",
     "@glint/environment-ember-template-imports": "^1.2.1",
     "@glint/template": "^1.3.0",
-    "@glimmer/component": "^1.1.2",
-    "@glimmer/tracking": "^1.1.2",
     "@tsconfig/ember": "^3.0.3",
     "@types/ember": "^4.0.11",
     "@types/ember__application": "^4.0.11",

docs/tests/helpers/index.js → docs/tests/helpers/index.ts

@@ -2,13 +2,14 @@ import {
   setupApplicationTest as upstreamSetupApplicationTest,
   setupRenderingTest as upstreamSetupRenderingTest,
   setupTest as upstreamSetupTest,
+  type SetupTestOptions,
 } from 'ember-qunit';
 
-// This file exists to provide wrappers around ember-qunit's / ember-mocha's
+// This file exists to provide wrappers around ember-qunit's
 // test setup functions. This way, you can easily extend the setup that is
 // needed per test type.
 
-function setupApplicationTest(hooks, options) {
+function setupApplicationTest(hooks: NestedHooks, options?: SetupTestOptions) {
   upstreamSetupApplicationTest(hooks, options);
 
   // Additional setup for application tests can be done here.
@@ -27,13 +28,13 @@ function setupApplicationTest(hooks, options) {
   // setupMirage(hooks); // ember-cli-mirage
 }
 
-function setupRenderingTest(hooks, options) {
+function setupRenderingTest(hooks: NestedHooks, options?: SetupTestOptions) {
   upstreamSetupRenderingTest(hooks, options);
 
   // Additional setup for rendering tests can be done here.
 }
 
-function setupTest(hooks, options) {
+function setupTest(hooks: NestedHooks, options?: SetupTestOptions) {
   upstreamSetupTest(hooks, options);
 
   // Additional setup for unit tests can be done here.

docs/tests/index.html

@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>TestApp Tests</title>
+    <title>Docs Tests</title>
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 

docs/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "@tsconfig/ember/tsconfig.json",
+  "glint": {
+    "environment": ["ember-loose", "ember-template-imports"]
+  },
+  "compilerOptions": {
+    // The combination of `baseUrl` with `paths` allows Ember's classic package
+    // layout, which is not resolvable with the Node resolution algorithm, to
+    // work with TypeScript.
+    "baseUrl": ".",
+    "allowJs": true,
+    "paths": {
+      "docs/tests/*": ["tests/*"],
+      "docs/*": ["app/*"],
+      "*": ["types/*"]
+    }
+  }
+}

docs/types/global.d.ts

@@ -0,0 +1,15 @@
+import '@glint/environment-ember-loose';
+import '@glint/environment-ember-template-imports';
+
+import type EmberPowerCalendarRegistry from 'ember-power-calendar/template-registry';
+
+export interface CodeSnippetRegistry {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [key: string]: any;
+}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry
+    extends EmberPowerCalendarRegistry,
+      CodeSnippetRegistry {}
+}