wip

build.config.ts

@@ -1,5 +0,0 @@
-import { defineBuildConfig } from 'unbuild'
-
-export default defineBuildConfig({
-  entries: ['./src/index'],
-})

package.json

@@ -1,19 +1,18 @@
 {
   "name": "@kabbouchi/vue-web3",
-  "version": "0.1.1",
+  "version": "0.2.7",
   "description": "Vue web3 composition api",
   "license": "MIT",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/src/index.d.ts",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "unpkg": "dist/global/index.js",
+  "types": "dist/esm/src/index.d.ts",
+  "sideEffects": false,
   "scripts": {
-    "dev": "jiti scripts/watch.ts --cache",
-    "build": "unbuild",
-    "lint": "prettier -c --parser typescript \"{src,tests}/**/*.[jt]s?(x)\"",
-    "lint:fix": "yarn run lint --write",
-    "test:types": "tsc --build tsconfig.json",
-    "test:unit": "jest",
-    "test": "yarn run test:types && yarn run test:unit"
+    "build": "rollup -c rollup.config.js",
+    "dev": "rollup -w -c rollup.config.js",
+    "lint": "prettier -c --parser typescript \"{src,__tests__,e2e}/**/*.[jt]s?(x)\"",
+    "lint:fix": "yarn run lint --write"
   },
   "files": [
     "dist/**/*",
@@ -29,15 +28,21 @@
     "vue-demi": "^0.11.3"
   },
   "devDependencies": {
-    "@types/jest": "^27.0.1",
-    "chokidar": "^3.5.2",
-    "jest": "^27.0.6",
-    "lint-staged": "^11.1.2",
+    "@rollup/plugin-alias": "^3.1.2",
+    "@rollup/plugin-commonjs": "^17.1.0",
+    "@rollup/plugin-node-resolve": "^11.2.0",
+    "@rollup/plugin-replace": "^2.3.4",
+    "@types/howler": "^2.2.1",
+    "@types/jest": "^26.0.20",
+    "lint-staged": "^10.5.4",
     "pascalcase": "^1.0.0",
-    "prettier": "^2.3.2",
-    "ts-jest": "^27.0.5",
-    "typescript": "^4.3.5",
-    "unbuild": "^0.4.2",
+    "prettier": "^2.2.1",
+    "rollup": "^2.39.0",
+    "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.30.0",
+    "typescript": "^4.1.5",
+    "yorkie": "^2.0.0",
     "vue": "^3.2.6"
   },
   "peerDependencies": {

renovate.json

@@ -1,6 +0,0 @@
-{
-  "extends": ["@nuxtjs"],
-  "lockFileMaintenance": {
-    "enabled": true
-  }
-}

rollup.config.js

@@ -0,0 +1,194 @@
+// @ts-nocheck
+import commonjs from '@rollup/plugin-commonjs'
+import resolve from '@rollup/plugin-node-resolve'
+import replace from '@rollup/plugin-replace'
+import pascalcase from 'pascalcase'
+import path from 'path'
+import del from 'rollup-plugin-delete'
+import ts from 'rollup-plugin-typescript2'
+
+const pkg = require('./package.json')
+const name = pkg.name
+
+function getAuthors(pkg) {
+  const { contributors, author } = pkg
+
+  const authors = new Set()
+
+  if (contributors && contributors)
+    contributors.forEach((contributor) => {
+      authors.add(contributor.name)
+    })
+
+  if (author) authors.add(author.name)
+
+  return Array.from(authors).join(', ')
+}
+
+const banner = `/*!
+  * ${pkg.name} v${pkg.version}
+  * (c) ${new Date().getFullYear()} ${getAuthors(pkg)}
+  * @license MIT
+  */`
+
+// ensure TS checks only once for each build
+let hasTSChecked = false
+
+const outputConfigs = {
+  // each file name has the format: `dist/${name}.${format}.js`
+  // format being a key of this object
+  esm: {
+    dir: 'dist/esm',
+    format: `es`,
+  },
+  cjs: {
+    dir: 'dist/cjs',
+    format: 'cjs',
+    exports: 'named',
+  },
+  global: {
+    dir: 'dist/global',
+    format: 'iife',
+  },
+}
+
+const allFormats = Object.keys(outputConfigs)
+const packageFormats = allFormats
+const packageConfigs = packageFormats.map((format) =>
+  format === 'global'
+    ? createMinifiedConfig(format)
+    : createConfig(format, outputConfigs[format]),
+)
+
+export default packageConfigs
+
+function createConfig(format, output, plugins = []) {
+  if (!output) {
+    console.log(require('chalk').yellow(`invalid format: "${format}"`))
+    process.exit(1)
+  }
+
+  output.sourcemap = !!process.env.SOURCE_MAP
+  output.banner = banner
+  output.externalLiveBindings = false
+  output.globals = { vue: 'Vue' }
+
+  const isProductionBuild = /\.prod\.js$/.test(output.file)
+  const isGlobalBuild = format === 'global'
+  const isRawESMBuild = format === 'esm'
+  const isNodeBuild = format === 'cjs'
+  const isBundlerESMBuild = /esm-bundler/.test(format)
+
+  if (isGlobalBuild) output.name = pascalcase(pkg.name)
+
+  const shouldEmitDeclarations = !hasTSChecked
+
+  const tsPlugin = ts({
+    check: !hasTSChecked,
+    tsconfig: path.resolve(__dirname, 'tsconfig.json'),
+    cacheRoot: path.resolve(__dirname, 'node_modules/.rts2_cache'),
+    tsconfigOverride: {
+      compilerOptions: {
+        sourceMap: output.sourcemap,
+        declaration: shouldEmitDeclarations,
+        declarationMap: shouldEmitDeclarations,
+      },
+      exclude: ['__tests__', 'test-dts'],
+    },
+  })
+  // we only need to check TS and generate declarations once for each build.
+  // it also seems to run into weird issues when checking multiple times
+  // during a single build.
+  hasTSChecked = true
+
+  const external = ['vue']
+
+  if (!isGlobalBuild) {
+    external.push('vue-demi')
+  }
+
+  const nodePlugins = [resolve(), commonjs()]
+
+  return {
+    input: `src/index.ts`,
+    // Global and Browser ESM builds inlines everything so that they can be
+    // used alone.
+    external,
+    inlineDynamicImports: isGlobalBuild,
+    plugins: [
+      del({ targets: `dist/${format}` }),
+      tsPlugin,
+      createReplacePlugin(
+        isProductionBuild,
+        isBundlerESMBuild,
+        isGlobalBuild || isRawESMBuild || isBundlerESMBuild,
+        isGlobalBuild,
+        isNodeBuild,
+      ),
+      ...nodePlugins,
+      ...plugins,
+    ],
+    output,
+  }
+}
+
+function createReplacePlugin(
+  isProduction,
+  isBundlerESMBuild,
+  isBrowserBuild,
+  isGlobalBuild,
+  isNodeBuild,
+) {
+  const replacements = {
+    __COMMIT__: `"${process.env.COMMIT}"`,
+    __VERSION__: `"${pkg.version}"`,
+    __DEV__: isBundlerESMBuild
+      ? // preserve to be handled by bundlers
+        `(process.env.NODE_ENV !== 'production')`
+      : // hard coded dev/prod builds
+        !isProduction,
+    // this is only used during tests
+    __TEST__: isBundlerESMBuild ? `(process.env.NODE_ENV === 'test')` : false,
+    // If the build is expected to run directly in the browser (global / esm builds)
+    __BROWSER__: isBrowserBuild,
+    // is targeting bundlers?
+    __BUNDLER__: isBundlerESMBuild,
+    __GLOBAL__: isGlobalBuild,
+    // is targeting Node (SSR)?
+    __NODE_JS__: isNodeBuild,
+  }
+
+  // allow inline overrides like
+  //__RUNTIME_COMPILE__=true yarn build
+  Object.keys(replacements).forEach((key) => {
+    if (key in process.env) {
+      replacements[key] = process.env[key]
+    }
+  })
+
+  return replace({
+    values: replacements,
+    preventAssignment: true,
+  })
+}
+
+function createMinifiedConfig(format) {
+  const { terser } = require('rollup-plugin-terser')
+
+  return createConfig(
+    format,
+    {
+      dir: `dist/${format}/`,
+      format: outputConfigs[format].format,
+    },
+    [
+      terser({
+        module: /^esm/.test(format),
+        compress: {
+          ecma: 2015,
+          pure_getters: true,
+        },
+      }),
+    ],
+  )
+}

src/index.ts

@@ -1,9 +1,9 @@
 import { AbstractConnector } from '@web3-react/abstract-connector'
 import { normalizeAccount, normalizeChainId } from './normalizers'
-import { ConnectorUpdate } from '@web3-react/types'
-import { computed, ref, watch } from 'vue-demi'
+import { ConnectorEvent, ConnectorUpdate } from '@web3-react/types'
+import { computed, onBeforeUnmount, ref, watch } from 'vue-demi'
 
-class UnsupportedChainIdError extends Error {
+export class UnsupportedChainIdError extends Error {
   public constructor(
     unsupportedChainId: number,
     supportedChainIds?: readonly number[],
@@ -28,7 +28,7 @@ const active = computed(
 )
 const library = ref()
 
-let getLibrary = (provider?: any, connector?: any) => () => null
+let getLibrary: any = (provider?: any, connector?: any) => (): any => null
 
 export const setWeb3LibraryCallback = (
   cb: (provider?: any, connector?: any) => any,
@@ -37,6 +37,8 @@ export const setWeb3LibraryCallback = (
 }
 
 export const useWeb3 = () => {
+  const onErrorCb = ref<(error: Error) => void>()
+
   const activate = async (
     c: AbstractConnector,
     onError?: (error: Error) => void,
@@ -56,7 +58,9 @@ export const useWeb3 = () => {
       chainId.value = augmentedUpdate.chainId
       provider.value = augmentedUpdate.provider
       account.value = augmentedUpdate.account
-    } catch (e) {
+      error.value = undefined
+      onErrorCb.value = onError
+    } catch (e: any) {
       error.value = e
 
       if (throwErrors) {
@@ -71,6 +75,38 @@ export const useWeb3 = () => {
 
   const deactivate = () => {
     connector.value?.deactivate()
+
+    handleDeactivate()
+  }
+
+  const handleUpdate = async (update: ConnectorUpdate): Promise<void> => {
+    provider.value = update.provider
+    chainId.value =
+      update.chainId === undefined
+        ? undefined
+        : normalizeChainId(update.chainId)
+    account.value = update.account
+  }
+
+  const handleError = (e: Error): void => {
+    error.value = e
+
+    if (onErrorCb.value) {
+      onErrorCb.value(e)
+    }
+
+    active && connector.value?.deactivate()
+
+    handleDeactivate()
+  }
+
+  const handleDeactivate = (): void => {
+    connector.value = undefined
+
+    chainId.value = undefined
+    provider.value = undefined
+    account.value = undefined
+    library.value = undefined
   }
 
   watch([active, provider, connector, chainId], () => {
@@ -83,6 +119,28 @@ export const useWeb3 = () => {
         : undefined
   })
 
+  watch(
+    connector,
+    () => {
+      if (connector.value) {
+        connector.value
+          .on(ConnectorEvent.Update, handleUpdate)
+          .on(ConnectorEvent.Error, handleError)
+          .on(ConnectorEvent.Deactivate, handleDeactivate)
+      }
+    },
+    { immediate: true },
+  )
+
+  onBeforeUnmount(() => {
+    if (connector.value) {
+      connector.value
+        .off(ConnectorEvent.Update, handleUpdate)
+        .off(ConnectorEvent.Error, handleError)
+        .off(ConnectorEvent.Deactivate, handleDeactivate)
+    }
+  })
+
   return {
     library,
     active,

tests/index.spec.ts

@@ -1,3 +0,0 @@
-describe('useWeb3', () => {
-  it('returns default value', () => {})
-})

tsconfig.json

@@ -1,19 +1,21 @@
 {
-  "include": ["scripts/watch.ts", "src/**/*", "tests/**/*"],
-  "exclude": ["dist", "node_modules"],
+  "include": ["src/global.d.ts", "src/**/*.ts", "__tests__/**/*.ts"],
+  "exclude": ["dist", "node_modules", "demo"],
   "compilerOptions": {
+    "baseUrl": ".",
     "rootDir": ".",
     "outDir": "dist",
     "sourceMap": false,
     "noEmit": true,
+    "forceConsistentCasingInFileNames": true,
 
-    "target": "esnext",
+    "target": "es5",
     "module": "esnext",
     "moduleResolution": "node",
     "skipLibCheck": true,
 
     "noUnusedLocals": true,
-    "strictNullChecks": true,
+    "strictNullChecks": false,
     "noImplicitAny": true,
     "noImplicitThis": true,
     "noImplicitReturns": true,
@@ -24,8 +26,8 @@
     "resolveJsonModule": true,
     "esModuleInterop": true,
     "removeComments": false,
-
-    "lib": ["esnext"],
-    "types": ["node", "jest"]
+    "jsx": "preserve",
+    "lib": ["es5", "dom"],
+    "types": ["node", "jest", "howler"]
   }
 }