Merge pull request #42 from blocknative/feature/typescript

Convert to TypeScript

Author: lnbc1QWFyb24

.babelrc

@@ -7,8 +7,8 @@ jobs:
       - checkout
       - restore_cache:
           keys:
-          - v1-dependencies-{{ checksum "package.json" }}
-          - v1-dependencies-
+            - v1-dependencies-{{ checksum "package.json" }}
+            - v1-dependencies-
       - run: yarn
       - run: yarn test
       - run: yarn build
@@ -28,13 +28,13 @@ jobs:
       - run: sudo npm i -g npm-cli-login
       - run: NPM_USER=$NPM_USERNAME NPM_EMAIL=$NPM_EMAIL NPM_PASS=$NPM_PASSWORD npm-cli-login
       - run: npm publish --dry-run
-      - run: gzip -9 ./dist/iife/onboard.js
-      - run: mv ./dist/iife/onboard.js.gz ./dist/iife/onboard.js
+      - run: gzip -9 ./dist/bnc-onboard.js
+      - run: mv ./dist/bnc-onboard.js.gz ./dist/bnc-onboard.js
       - run: ls -al
       - run: echo export VERSION=`awk '/version/{gsub(/("|",)/,"",$2);print $2};' package.json | sed 's/\./-/g'` >> $BASH_ENV
       - run: mkdir /root/project/deploy-temp
       - run: mkdir /root/project/deploy-temp/${VERSION}
-      - run: mv /root/project/dist/iife/*.js /root/project/deploy-temp/${VERSION}/
+      - run: mv /root/project/dist/*.js /root/project/deploy-temp/${VERSION}/
       - run: aws s3 sync /root/project/deploy-temp/${VERSION}/ s3://staging.onboard.blocknative.com/${VERSION}/ --content-type "text/javascript" --content-encoding "gzip" --cache-control "max-age=31536000" --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers
   deploy_prod:
     docker:
@@ -48,13 +48,13 @@ jobs:
       - run: sudo npm i -g add npm-cli-login
       - run: NPM_USER=$NPM_USERNAME NPM_EMAIL=$NPM_EMAIL NPM_PASS=$NPM_PASSWORD npm-cli-login
       - run: npm publish
-      - run: gzip -9 ./dist/iife/onboard.js
-      - run: mv ./dist/iife/onboard.js.gz ./dist/iife/onboard.js
+      - run: gzip -9 ./dist/bnc-onboard.js
+      - run: mv ./dist/bnc-onboard.js.gz ./dist/bnc-onboard.js
       - run: ls -al
       - run: echo export VERSION=`awk '/version/{gsub(/("|",)/,"",$2);print $2};' package.json | sed 's/\./-/g'` >> $BASH_ENV
       - run: mkdir /root/project/deploy-temp
       - run: mkdir /root/project/deploy-temp/${VERSION}
-      - run: mv /root/project/dist/iife/*.js /root/project/deploy-temp/${VERSION}/
+      - run: mv /root/project/dist/*.js /root/project/deploy-temp/${VERSION}/
       - run: aws s3 sync /root/project/deploy-temp/${VERSION}/ s3://onboard.blocknative.com/${VERSION}/ --content-type "text/javascript" --content-encoding "gzip" --cache-control "max-age=31536000" --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers
 workflows:
   version: 2

.circleci/config.yml

@@ -1,4 +1,5 @@
 .DS_Store
 node_modules
-dist
-settings.json
+dist/
+package-lock.json
+.rpt2_cache

.gitignore

@@ -9,7 +9,7 @@ JavaScript library to easily onboard users to ethereum apps by enabling wallet s
 ## Quick Start with Default Modules
 
 ```javascript
-import Onboard from "bn-onboard"
+import Onboard from "bnc-onboard"
 
 // initialize onboard
 const onboard = Onboard.init({

README.md

@@ -1,31 +1,41 @@
 {
   "name": "bnc-onboard",
   "version": "0.2.4",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
+  "description": "Onboard users to web3 by allowing them to select a wallet, get that wallet ready to transact and have access to synced wallet state.",
+  "keywords": [
+    "ethereum",
+    "web3",
+    "blocknative",
+    "wallet"
+  ],
+  "main": "dist/bnc-onboard.js",
+  "module": "dist/bnc-onboard.es5.js",
+  "typings": "dist/src/onboard.d.ts",
   "files": [
-    "dist/esm/*",
-    "dist/cjs/*"
+    "dist"
   ],
-  "types": "./types.d.ts",
+  "author": "Aaron Barnard <abarnard@protonmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/blocknative/onboard"
+  },
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.5.5",
-    "@babel/preset-env": "^7.5.5",
+    "@pyoner/svelte-ts-preprocess": "^1.2.1",
+    "@types/node": "^12.12.3",
     "@joseph184/rollup-plugin-node-builtins": "^2.1.4",
-    "babel-eslint": "^7.1.1",
-    "babel-plugin-external-helpers": "^6.18.0",
     "rollup": "^1.12.0",
-    "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-commonjs": "^10.0.0",
     "rollup-plugin-img": "^1.1.0",
     "rollup-plugin-json": "^4.0.0",
-    "rollup-plugin-livereload": "^1.0.0",
     "rollup-plugin-node-globals": "^1.4.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-svelte": "^5.0.3",
     "rollup-plugin-terser": "^4.0.4",
-    "svelte": "^3.0.0"
+    "rollup-plugin-typescript2": "0.21.0",
+    "svelte": "^3.12.1",
+    "svelte-i18n": "^1.1.2-beta",
+    "typescript": "^3.6.4"
   },
   "dependencies": {
     "@portis/web3": "^2.0.0-beta.42",
@@ -36,9 +46,7 @@
     "bowser": "^2.5.2",
     "fortmatic": "^0.8.2",
     "promise-cancelable": "^2.1.1",
-    "regenerator-runtime": "^0.13.3",
-    "squarelink": "^1.1.3",
-    "svelte-i18n": "^1.1.2-beta"
+    "squarelink": "^1.1.3"
   },
   "scripts": {
     "build": "rollup -c",

package.json

@@ -1,38 +1,74 @@
 import svelte from "rollup-plugin-svelte"
 import resolve from "rollup-plugin-node-resolve"
-import babel from "rollup-plugin-babel"
-import commonjs from "rollup-plugin-commonjs"
-import globals from "rollup-plugin-node-globals"
 import json from "rollup-plugin-json"
 import image from "rollup-plugin-img"
+import commonjs from "rollup-plugin-commonjs"
+import globals from "rollup-plugin-node-globals"
 import builtins from "@joseph184/rollup-plugin-node-builtins"
 import { terser } from "rollup-plugin-terser"
+import typescript from "rollup-plugin-typescript2"
+
+import {
+  preprocess,
+  createEnv,
+  readConfigFile
+} from "@pyoner/svelte-ts-preprocess"
+
+const env = createEnv()
+const compilerOptions = readConfigFile(env)
+const opts = {
+  env,
+  compilerOptions: {
+    ...compilerOptions,
+    allowNonTsExtensions: true
+  }
+}
 
 export default [
   {
-    input: "src/index.js",
+    input: "src/onboard.ts",
     output: {
-      format: "iife",
+      sourcemap: true,
+      format: "umd",
       name: "onboard",
-      file: "dist/iife/onboard.js",
-      esModule: false
+      file: "dist/bnc-onboard.js"
+    },
+    moduleContext: id => {
+      const thisAsWindowForModules = [
+        "node_modules/intl-messageformat/lib/core.js",
+        "node_modules/intl-messageformat/lib/compiler.js"
+      ]
+
+      if (thisAsWindowForModules.some(id_ => id.trimRight().endsWith(id_))) {
+        return "window"
+      }
     },
     plugins: [
       image(),
       json(),
-      svelte(),
+      svelte({
+        preprocess: preprocess(opts)
+      }),
       resolve({
-        preferBuiltins: true,
         browser: true,
+        preferBuiltins: true,
         dedupe: importee =>
           importee === "svelte" || importee.startsWith("svelte/")
       }),
       commonjs(),
       globals(),
-      babel({ exclude: "node_modules/**" }),
       builtins(),
+      typescript(),
       terser()
-    ],
+    ]
+  },
+  {
+    input: "src/onboard.ts",
+    output: {
+      sourcemap: true,
+      format: "es",
+      file: "dist/bnc-onboard.es5.js"
+    },
     moduleContext: id => {
       const thisAsWindowForModules = [
         "node_modules/intl-messageformat/lib/core.js",
@@ -42,49 +78,31 @@ export default [
       if (thisAsWindowForModules.some(id_ => id.trimRight().endsWith(id_))) {
         return "window"
       }
-    }
-  },
-  {
-    input: "src/index.js",
+    },
+    plugins: [
+      json(),
+      image(),
+      svelte({
+        preprocess: preprocess(opts)
+      }),
+      resolve({
+        browser: true,
+        dedupe: importee =>
+          importee === "svelte" || importee.startsWith("svelte/")
+      }),
+      commonjs(),
+      typescript()
+    ],
     external: [
       "bowser",
       "bnc-sdk",
       "bignumber.js",
       "promise-cancelable",
-      "regenerator-runtime/runtime",
       "@portis/web3",
       "@walletconnect/web3-provider",
       "fortmatic",
       "squarelink",
       "authereum"
-    ],
-    plugins: [
-      svelte(),
-      json(),
-      image(),
-      resolve(),
-      commonjs(),
-      babel({ exclude: "node_modules/**" })
-    ],
-    moduleContext: id => {
-      const thisAsWindowForModules = [
-        "node_modules/intl-messageformat/lib/core.js",
-        "node_modules/intl-messageformat/lib/compiler.js"
-      ]
-
-      if (thisAsWindowForModules.some(id_ => id.trimRight().endsWith(id_))) {
-        return "window"
-      }
-    },
-    output: [
-      {
-        dir: "dist/esm",
-        format: "esm"
-      },
-      {
-        dir: "dist/cjs",
-        format: "cjs"
-      }
     ]
   }
 ]

rollup.config.js

@@ -0,0 +1,2 @@
+declare module "*.png"
+declare module "*.svg"

src/@types/images.d.ts

@@ -0,0 +1,12 @@
+declare module "promise-cancelable" {
+  export default class Cancelable extends Promise<any> {
+    constructor(executor: any)
+    cancel(): any
+    isFulfilled(): any
+    isResolved(): any
+    isRejected(): any
+  }
+}
+declare module "@walletconnect/web3-provider"
+declare module "squarelink"
+declare module "fortmatic"

src/@types/libraries.d.ts

@@ -0,0 +1,19 @@
+declare module 'svelte-i18n' {
+  interface Options {
+    fallback: string
+    navigator: boolean
+  }
+  export function getClientLocale(options: Options): string
+
+  export namespace _ {
+    export function subscribe(dictionary: any): void
+  }
+
+  export namespace dictionary {
+    export function set(dictionary: any): void
+  }
+
+  export namespace locale {
+    export function set(locale: string): void
+  }
+}

src/@types/svelte-i18n.d.ts

@@ -1,9 +1,9 @@
-<script>
+<script lang="ts">
   import { fade } from "svelte/transition";
   import { app } from "../stores";
-  export let closeModal;
+  export let closeModal: () => void;
 
-  let closeHovered;
+  let closeHovered: boolean;
 </script>
 
 <style>