Merge pull request #47 from josemarluedke/docs/add-typescript-to-docs

Add typescript to docs app
josemarluedke · Mar 23, 2020 · a26dc22 · a26dc22
2 parents 0f458cb + ee8451c
commit a26dc22
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 11 deletions.
diff --git a/...app/components/demo/notifications/demo.js → ...app/components/demo/notifications/demo.ts b/...app/components/demo/notifications/demo.js → ...app/components/demo/notifications/demo.ts
@@ -2,10 +2,16 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
+import {
+  NotificationOptions,
+  NotificationsService
+} from '@frontile/notifications';
 
-export default class Demo extends Component {
-  @service notifications;
-  @tracked options = {
+interface DemoArgs {}
+
+export default class Demo extends Component<DemoArgs> {
+  @service notifications!: NotificationsService;
+  @tracked options: NotificationOptions = {
     appearance: 'info',
     preserve: false,
     duration: 5000,
@@ -14,40 +20,43 @@ export default class Demo extends Component {
 
   @tracked placement = 'bottom-right';
 
-  @tracked customActions = [
+  @tracked customActions: NotificationOptions['customActions'] = [
     {
       label: 'Ok',
-      onClick: () => {
+      onClick: (): void => {
         // empty
       }
     },
     {
       label: 'Undo',
-      onClick: () => {
+      onClick: (): void => {
         // empty
       }
     },
     {
       label: 'Cancel',
-      onClick: () => {
+      onClick: (): void => {
         // empty
       }
     }
   ];
 
-  @action setPlacement(placement) {
+  @action setPlacement(placement: string): void {
     this.placement = placement;
   }
 
-  @action setValue(key, value) {
+  @action setValue<T extends keyof NotificationOptions>(
+    key: T,
+    value: NotificationOptions[T]
+  ): void {
     const options = {
       ...this.options,
       [key]: value
     };
     this.options = options;
   }
 
-  @action addNotification() {
+  @action addNotification(): void {
     this.notifications.add(
       'Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.',
       this.options

diff --git a/packages/docs/app/config/environment.d.ts b/packages/docs/app/config/environment.d.ts
@@ -0,0 +1,18 @@
+import { DefaultConfig } from '@frontile/notifications';
+
+/**
+ * Type declarations for
+ *    import config from './config/environment'
+ *
+ * For now these need to be managed by the developer
+ * since different ember addons can materialize new entries.
+ */
+declare const config: {
+  environment: string;
+  modulePrefix: string;
+  podModulePrefix: string;
+  locationType: string;
+  rootURL: string;
+  '@frontile/notifications'?: DefaultConfig;
+};
+export default config;
diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -28,6 +28,11 @@
     "@frontile/notifications": "^0.1.0-alpha.4",
     "@glimmer/component": "^1.0.0",
     "@glimmer/tracking": "^1.0.0",
+    "@types/ember": "^3.1.1",
+    "@types/ember-qunit": "^3.4.7",
+    "@types/ember__test-helpers": "^0.7.9",
+    "@types/qunit": "^2.9.0",
+    "@types/rsvp": "^4.0.3",
     "autoprefixer": "^9.7.4",
     "broccoli-asset-rev": "^3.0.0",
     "ember-auto-import": "^1.2.20",
@@ -45,6 +50,8 @@
     "ember-cli-inject-live-reload": "^2.0.1",
     "ember-cli-postcss": "^5.0.0",
     "ember-cli-sri": "^2.1.1",
+    "ember-cli-typescript": "^3.1.3",
+    "ember-cli-typescript-blueprints": "^3.0.0",
     "ember-cli-uglify": "^3.0.0",
     "ember-export-application-global": "^2.0.1",
     "ember-load-initializers": "^2.1.1",
@@ -54,7 +61,8 @@
     "ember-source": "^3.17.0",
     "loader.js": "^4.7.0",
     "qunit-dom": "^1.1.0",
-    "tailwindcss": "^1.2.0"
+    "tailwindcss": "^1.2.0",
+    "typescript": "3.7.5"
   },
   "engines": {
     "node": ">= 10.*"

diff --git a/packages/docs/tsconfig.json b/packages/docs/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "docs/tests/*": ["tests/*"],
+      "docs/*": ["app/*"],
+      "@frontile/notifications": ["../notifications/addon"],
+      "@frontile/notifications/*": ["../notifications/addon/*"],
+      "*": ["types/*"]
+    }
+  },
+  "include": ["app/**/*", "tests/**/*", "types/**/*"]
+}
diff --git a/packages/docs/types/docs/index.d.ts b/packages/docs/types/docs/index.d.ts
@@ -0,0 +1,8 @@
+import Ember from 'ember';
+
+declare global {
+  interface Array<T> extends Ember.ArrayPrototypeExtensions<T> {}
+  // interface Function extends Ember.FunctionPrototypeExtensions {}
+}
+
+export {};
diff --git a/packages/docs/types/ember-get-config.d.ts b/packages/docs/types/ember-get-config.d.ts
@@ -0,0 +1,3 @@
+import Config from 'docs/config/environment';
+
+export default Config;
diff --git a/packages/docs/types/global.d.ts b/packages/docs/types/global.d.ts
@@ -0,0 +1,6 @@
+// Types for compiled templates
+declare module 'docs/templates/*' {
+  import { TemplateFactory } from 'htmlbars-inline-precompile';
+  const tmpl: TemplateFactory;
+  export default tmpl;
+}