add basic typescript support with snowpack plugin

very-geek · Dec 25, 2020 · 14df958 · 14df958
1 parent f208956
commit 14df958
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -15,7 +15,9 @@
     "@glimmerx/component": "^0.3.0",
     "@glimmerx/core": "^0.3.0",
     "@snowpack/plugin-babel": "^2.1.5",
-    "snowpack": "^3.0.0-rc.2"
+    "@snowpack/plugin-typescript": "^1.1.1",
+    "snowpack": "^3.0.0-rc.2",
+    "typescript": "^4.1.3"
   },
   "scripts": {
     "build": "snowpack build",

diff --git a/snowpack.config.js b/snowpack.config.js
@@ -38,5 +38,6 @@ module.exports = {
         },
       },
     ],
+    "@snowpack/plugin-typescript",
   ],
 };
diff --git a/src/APP.js → src/APP.ts b/src/APP.js → src/APP.ts
@@ -2,6 +2,6 @@ import Component, { hbs } from "@glimmerx/component";
 
 export default class Application extends Component {
   static template = hbs`
-    <h1>Welcome to glimmer.js, built with snowpack, yay!</h1>
+    <h1>Welcome to glimmer.js, built with snowpack and typescript, yay!</h1>
   `;
 }
diff --git a/src/index.js → src/index.ts b/src/index.js → src/index.ts
@@ -2,4 +2,7 @@ import { renderComponent } from "@glimmerx/core";
 import Application from "./APP";
 
 const rootElement = document.querySelector(".glimmer-application");
-renderComponent(Application, rootElement);
+
+if (rootElement instanceof HTMLElement) {
+  renderComponent(Application, rootElement);
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "$schema": "http://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "allowJs": true,
+    "alwaysStrict": true,
+    "allowSyntheticDefaultImports": true,
+    // "composite": true,
+    // "declaration": true,
+    // "declarationMap": true,
+    // "emitDeclarationOnly": true,
+    "experimentalDecorators": true,
+    "forceConsistentCasingInFileNames": true,
+    "importsNotUsedAsValues": "error",
+    // "incremental": true,
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "noEmit": true,
+    "noEmitOnError": false,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitAny": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "pretty": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "ESNext",
+    "types": [],
+    "useDefineForClassFields": true
+  },
+  "include": ["src", "types"]
+}
diff --git a/types/static.d.ts b/types/static.d.ts
@@ -0,0 +1,54 @@
+/* Use this file to declare any custom file extensions for importing */
+/* Use this folder to also add/extend a package d.ts file, if needed. */
+
+declare module "*.module.css" {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+declare module "*.module.scss" {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+declare module "*.module.sass" {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+declare module "*.module.less" {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+declare module "*.module.styl" {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
+declare module "*.css";
+declare module "*.scss";
+declare module "*.sass";
+declare module "*.less";
+declare module "*.styl";
+
+declare module "*.svg" {
+  const ref: string;
+  export default ref;
+}
+declare module "*.bmp" {
+  const ref: string;
+  export default ref;
+}
+declare module "*.gif" {
+  const ref: string;
+  export default ref;
+}
+declare module "*.jpg" {
+  const ref: string;
+  export default ref;
+}
+declare module "*.jpeg" {
+  const ref: string;
+  export default ref;
+}
+declare module "*.png" {
+  const ref: string;
+  export default ref;
+}
diff --git a/yarn.lock b/yarn.lock
@@ -1214,6 +1214,14 @@
     execa "^4.0.3"
     npm-run-path "^4.0.1"
 
+"@snowpack/plugin-typescript@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@snowpack/plugin-typescript/-/plugin-typescript-1.1.1.tgz#50b982faa962e33fb07a512ed4cbc16bef67df77"
+  integrity sha512-qKEPSTI1Q5r8AAklF6Hpt4xKchkIy1EBWbdTi4v3uA2t/eqlpiZXhJyXTEIfOiPE01nQFIUIcgBeufuNMHVXNw==
+  dependencies:
+    execa "^4.0.3"
+    npm-run-path "^4.0.1"
+
 "@szmarczak/http-timer@^4.0.5":
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/@szmarczak/http-timer/-/http-timer-4.0.5.tgz#bfbd50211e9dfa51ba07da58a14cdfd333205152"
@@ -3838,6 +3846,11 @@ tree-sync@^1.2.2:
     quick-temp "^0.1.5"
     walk-sync "^0.3.3"
 
+typescript@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.1.3.tgz#519d582bd94cba0cf8934c7d8e8467e473f53bb7"
+  integrity sha512-B3ZIOf1IKeH2ixgHhj6la6xdwR9QrLC5d1VKeCSY4tvkqhF2eqd9O7txNlS0PO3GrBAFIdr3L1ndNwteUbZLYg==
+
 underscore.string@~3.3.4:
   version "3.3.5"
   resolved "https://registry.yarnpkg.com/underscore.string/-/underscore.string-3.3.5.tgz#fc2ad255b8bd309e239cbc5816fd23a9b7ea4023"