Merge pull request #38 from blocknative/develop

Release 0.2.2

.circleci/config.yml

@@ -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/notify.js
-      - run: mv ./dist/iife/notify.js.gz ./dist/iife/notify.js
+      - run: gzip -9 ./dist/bnc-notify.js
+      - run: mv ./dist/bnc-notify.js.gz ./dist/bnc-notify.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.notify.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/notify.js
-      - run: mv ./dist/iife/notify.js.gz ./dist/iife/notify.js
+      - run: gzip -9 ./dist/bnc-notify.js
+      - run: mv ./dist/bnc-notify.js.gz ./dist/bnc-notify.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://notify.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

.gitignore

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

package.json

@@ -1,37 +1,43 @@
 {
   "name": "bnc-notify",
-  "version": "0.2.1",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
+  "version": "0.2.2",
+  "description": "Show web3 users realtime transaction notifications",
+  "keywords": [
+    "ethereum",
+    "web3",
+    "blocknative",
+    "notifications"
+  ],
+  "main": "dist/bnc-notify.js",
+  "module": "dist/bnc-notify.es5.js",
+  "typings": "dist/notify.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/notify"
+  },
   "license": "MIT",
   "devDependencies": {
+    "@pyoner/svelte-ts-preprocess": "^1.2.1",
+    "@types/lodash.debounce": "^4.0.6",
+    "@types/uuid": "^3.4.5",
     "rollup": "^1.12.0",
     "rollup-plugin-commonjs": "^10.0.0",
-    "rollup-plugin-json": "^4.0.0",
-    "rollup-plugin-livereload": "^1.0.0",
     "rollup-plugin-node-resolve": "^5.2.0",
-    "@joseph184/rollup-plugin-node-builtins": "^2.1.4",
     "rollup-plugin-svelte": "^5.0.3",
     "rollup-plugin-terser": "^4.0.4",
-    "rollup-plugin-babel": "^4.3.3",
-    "rollup-plugin-node-globals": "^1.4.0",
-    "@babel/core": "^7.5.5",
-    "@babel/preset-env": "^7.5.5",
-    "babel-eslint": "^7.1.1",
-    "babel-plugin-external-helpers": "^6.18.0",
-    "svelte": "^3.5.4"
+    "rollup-plugin-typescript2": "0.21.0",
+    "svelte": "^3.12.1",
+    "svelte-i18n": "^1.1.2-beta",
+    "typescript": "^3.4.5"
   },
   "dependencies": {
     "bignumber.js": "^9.0.0",
-    "bnc-sdk": "0.2.1",
+    "bnc-sdk": "0.2.3",
     "lodash.debounce": "^4.0.8",
-    "regenerator-runtime": "^0.13.3",
-    "svelte-i18n": "^1.1.2-beta",
     "uuid": "^3.3.3"
   },
   "scripts": {

rollup.config.js

@@ -1,20 +1,33 @@
 import svelte from "rollup-plugin-svelte"
 import resolve from "rollup-plugin-node-resolve"
-import babel from "rollup-plugin-babel"
-import globals from "rollup-plugin-node-globals"
 import commonjs from "rollup-plugin-commonjs"
-import builtins from "@joseph184/rollup-plugin-node-builtins"
-import json from "rollup-plugin-json"
 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/notify.ts",
     output: {
-      format: "iife",
+      sourcemap: true,
+      format: "umd",
       name: "notify",
-      file: "dist/iife/notify.js",
-      esModule: false
+      file: "dist/bnc-notify.js"
     },
     moduleContext: id => {
       const thisAsWindowForModules = [
@@ -27,37 +40,26 @@ export default [
       }
     },
     plugins: [
-      svelte(),
-      json(),
+      svelte({
+        preprocess: preprocess(opts)
+      }),
       resolve({
-        preferBuiltins: true,
         browser: true,
         dedupe: importee =>
           importee === "svelte" || importee.startsWith("svelte/")
       }),
       commonjs(),
-      babel({ exclude: "node_modules/**" }),
-      builtins(),
-      globals(),
+      typescript(),
       terser()
     ]
   },
   {
-    input: "src/index.js",
-    external: [
-      "bignumber.js",
-      "bnc-sdk",
-      "lodash.debounce",
-      "uuid/v4",
-      "regenerator-runtime/runtime"
-    ],
-    plugins: [
-      svelte(),
-      json(),
-      resolve(),
-      commonjs(),
-      babel({ exclude: "node_modules/**" })
-    ],
+    input: "src/notify.ts",
+    output: {
+      sourcemap: true,
+      format: "es",
+      file: "dist/bnc-notify.es5.js"
+    },
     moduleContext: id => {
       const thisAsWindowForModules = [
         "node_modules/intl-messageformat/lib/core.js",
@@ -68,15 +70,18 @@ export default [
         return "window"
       }
     },
-    output: [
-      {
-        dir: "dist/esm",
-        format: "esm"
-      },
-      {
-        dir: "dist/cjs",
-        format: "cjs"
-      }
-    ]
+    plugins: [
+      svelte({
+        preprocess: preprocess(opts)
+      }),
+      resolve({
+        browser: true,
+        dedupe: importee =>
+          importee === "svelte" || importee.startsWith("svelte/")
+      }),
+      commonjs(),
+      typescript()
+    ],
+    external: ["bignumber.js", "bnc-sdk", "lodash.debounce", "uuid/v4"]
   }
 ]

src/@types/svelte-i18n.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/components/AutoDismiss.svelte

@@ -1,8 +1,16 @@
-<script>
+<script lang="ts">
   import { notifications } from "../stores";
-  export let notification;
+  export let notification: {
+    id: string;
+    type: string;
+    key: string;
+    startTime?: number;
+    eventCode?: string;
+    message: string;
+    autoDismiss?: number;
+  } = { id: "", type: "", key: "", message: "" };
 
-  if (notification.autoDismiss) {
+  if (notification.autoDismiss && notification.id) {
     setTimeout(() => {
       notifications.remove(notification.id);
     }, notification.autoDismiss);

src/components/CloseIcon.svelte

@@ -1,6 +1,6 @@
-<script>
+<script lang="ts">
   import { app } from "../stores";
-  let hovered;
+  let hovered: boolean;
 </script>
 
 <style>

src/components/NotificationContent.svelte

@@ -1,13 +1,21 @@
-<script>
+<script lang="ts">
   import { timeString } from "../utilities";
   import NotificationMessage from "../elements/NotificationMessage.svelte";
   import Clock from "../elements/Clock.svelte";
   import Time from "../elements/Time.svelte";
   import Timer from "../elements/Timer.svelte";
-  export let notification;
-  export let formattedTime;
-  export let currentTime;
-  export let notifications;
+
+  export let notification: {
+    id: string;
+    type: string;
+    key: string;
+    startTime?: number;
+    eventCode?: string;
+    message: string;
+    autoDismiss?: number;
+  };
+  export let formattedTime: string;
+  export let currentTime: number;
 </script>
 
 <style>

src/components/TypeIcon.svelte

@@ -1,5 +1,5 @@
-<script>
-  export let type;
+<script lang="ts">
+  export let type: string;
 </script>
 
 <style>

src/defaults.js → src/defaults.ts

@@ -1,4 +1,4 @@
-export function eventToType(eventCode) {
+export function eventToType(eventCode: string | undefined): string {
   switch (eventCode) {
     case "txSent":
     case "txPool":
@@ -26,12 +26,12 @@ export function eventToType(eventCode) {
   }
 }
 
-export function typeToDismissTimeout(type) {
+export function typeToDismissTimeout(type: string): number {
   switch (type) {
     case "success":
     case "hint":
       return 4000
     default:
-      return false
+      return 0
   }
 }

src/elements/NotificationMessage.svelte

@@ -1,5 +1,5 @@
-<script>
-  export let message;
+<script lang="ts">
+  export let message: string;
 </script>
 
 <style>

src/elements/Time.svelte

@@ -1,5 +1,5 @@
-<script>
-  export let time;
+<script lang="ts">
+  export let time: string;
 </script>
 
 <style>

src/elements/Timer.svelte

@@ -1,5 +1,5 @@
-<script>
-  export let value;
+<script lang="ts">
+  export let value: string;
 </script>
 
 <span class="bn-notify-custom bn-notify-notification-info-meta-duration-time">