feat: @web3uikit/config

.gitignore

@@ -1,8 +1,4 @@
-node_modules
-
-packages/core/lib/
-packages/ui/lib/
-packages/styles/lib/
-apps/**/dist
-
+**/node_modules
+**/dist
+**/*.tsbuildinfo
 **/.DS_Store

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
+}

.vscode/settings.json

@@ -0,0 +1,16 @@
+{
+  "files.exclude": {
+    "**/.git": true,
+    "**/.gitkeep": true,
+    "**/node_modules": true
+  },
+  "prettier.configPath": ".prettierrc",
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "eslint.rules.customizations": [{ "rule": "*", "severity": "error" }],
+  "scss.lint.unknownAtRules": "ignore",
+  "typescript.tsdk": "./node_modules/typescript/lib"
+}

apps/example/package.json

@@ -10,10 +10,13 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@web3uikit/core": "0.1.0",
-    "@web3uikit/ui": "0.1.0",
+    "@web3uikit/core": "*",
+    "@web3uikit/ui": "*",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-router-dom": "^6.3.0"
+  },
+  "devDependencies": {
+    "@web3uikit/config": "*"
   }
 }

apps/example/tsconfig.json

@@ -1,8 +1,8 @@
 {
-  "extends": "../../tsconfig.ui.json",
+  "extends": "@web3uikit/config/tsconfig.ui.json",
   "compilerOptions": {
-    "noEmit": true,
-    "rootDir": "src"
+    "baseUrl": ".",
+    "rootDir": "src",
   },
   "include": ["src"]
 }

apps/example/vite.config.ts

@@ -2,7 +2,7 @@ import { resolve } from 'path';
 import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
 
-const { name, version, dependencies } = require('./package.json');
+const { dependencies } = require('./package.json');
 const vendor = Object.keys(dependencies);
 
 const renderChunks = (deps: Record<string, string>) => {
@@ -15,12 +15,6 @@ const renderChunks = (deps: Record<string, string>) => {
 };
 
 export default defineConfig({
-  define: {
-    pkgJson: { name, version },
-  },
-  esbuild: {
-    jsxInject: `import React from 'react'`,
-  },
   plugins: [react()],
   server: {
     open: true,

nx.json

@@ -17,7 +17,7 @@
     "default": {
       "runner": "nx/tasks-runners/default",
       "options": {
-        "cacheableOperations": ["build"]
+        "cacheableOperations": ["build", "test"]
       }
     }
   },

package.json

@@ -10,6 +10,8 @@
   ],
   "scripts": {
     "build": "nx run-many --target=build --all --parallel --verbose=true",
+    "test": "nx affected --target=test --all --parallel --verbose=true",
+    "nm:clear": "find . -name 'node_modules' -type d -prune -exec rm -rf '{}' +",
     "nx:clear": "nx clear-cache",
     "nx:graph": "nx graph --skip-nx-cache",
     "start:dev": "nx run-many --target=start:dev --all --parallel --verbose=true",
@@ -31,6 +33,7 @@
     "@nrwl/linter": "14.1.5",
     "@storybook/addon-essentials": "^6.4.22",
     "@storybook/addon-links": "^6.4.22",
+    "@storybook/builder-vite": "^0.1.36",
     "@storybook/react": "^6.4.22",
     "@storybook/testing-react": "^1.2.4",
     "@testing-library/jest-dom": "^5.16.4",
@@ -51,7 +54,6 @@
     "react-dom": "^18.0.0",
     "react-lazily": "^0.9.1",
     "rollup-plugin-dts": "^4.2.1",
-    "storybook-builder-vite": "^0.1.23",
     "styled-components": "^5.3.5",
     "ts-jest": "27.1.4",
     "ts-node": "9.1.1",

packages/config/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@web3uikit/config",
+  "version": "0.1.0",
+  "sideEffects": false,
+  "devDependencies": {
+    "@types/node": "^17.0.36",
+    "@vitejs/plugin-react": "^1.3.2",
+    "vite": "^2.9.9",
+    "vite-plugin-dts": "^1.2.0",
+    "vite-tsconfig-paths": "^3.5.0"
+  }
+}

tsconfig.ui.json → packages/config/tsconfig.ui.json

@@ -1,5 +1,5 @@
 {
-  "extends": "./tsconfig.base.json",
+  "extends": "./tsconfig.json",
   "compilerOptions": {
     "allowJs": true,
     "allowSyntheticDefaultImports": true,

packages/config/vite.config.ts

@@ -0,0 +1,34 @@
+import react from '@vitejs/plugin-react';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+import { UserConfigExport } from 'vite';
+import dts from 'vite-plugin-dts';
+
+/**
+ *
+ * @param cwd
+ * @param external
+ */
+const config = (cwd: string, external?: string[]): UserConfigExport => {
+  return {
+    root: cwd,
+    plugins: [
+      react(),
+      tsconfigPaths({ root: cwd }),
+      dts({ entryRoot: cwd + "/src", outputDir: cwd + "/dist" }),
+    ],
+    build: {
+      emptyOutDir: true,
+      lib: {
+        entry: cwd + '/src/index.ts',
+        fileName: 'index',
+        formats: ['es', 'cjs'],
+      },
+      outDir: cwd + '/dist',
+      rollupOptions: {
+        external,
+      },
+    },
+  };
+};
+export default config;

packages/core/package.json

@@ -5,15 +5,15 @@
   "sideEffects": false,
   "files": [
     "package.json",
-    "lib"
+    "dist"
   ],
-  "main": "./lib/index.umd.js",
-  "module": "./lib/index.es.js",
-  "types": "./lib/index.d.ts",
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./lib/index.es.js",
-      "require": "./lib/index.umd.js"
+      "require": "./dist/index.cjs.js",
+      "import": "./dist/index.es.js"
     }
   },
   "scripts": {
@@ -31,7 +31,8 @@
 
   },
   "dependencies": {
-    "@web3uikit/styles": "0.1.0",
+    "@web3uikit/config": "*",
+    "@web3uikit/styles": "*",
     "react-blockies": "^1.4.1"
   }
 }

packages/core/tsconfig.json

@@ -1,11 +1,8 @@
 {
-  "extends": "../../tsconfig.ui.json",
+  "extends": "@web3uikit/config/tsconfig.ui.json",
   "compilerOptions": {
     "baseUrl": ".",
-    "declarationDir": "lib",
-    "emitDeclarationOnly": true,
     "rootDir": "src"
   },
-  "include": ["src"],
-  "exclude": ["node_modules", "package.json"]
+  "include": ["src", "index.ts"]
 }

packages/core/vite.config.ts

@@ -1,34 +1,4 @@
-import path from 'path';
-import react from '@vitejs/plugin-react';
-import tsconfigPaths from 'vite-tsconfig-paths';
-
 import { defineConfig } from 'vite';
-const { name, version } = require('./package.json');
-
-import dts from 'vite-plugin-dts';
+import config from './node_modules/@web3uikit/config/vite.config';
 
-export default defineConfig({
-  define: {
-    pkgJson: { name, version },
-  },
-  plugins: [react(), tsconfigPaths(), dts({ entryRoot: './src' })],
-  build: {
-    lib: {
-      entry: path.resolve(__dirname, 'src/index.ts'),
-      fileName: 'index',
-      formats: ['es'],
-    },
-    outDir: './lib',
-    rollupOptions: {
-      // externalize deps that shouldn't be bundled
-      external: ['react', 'react-dom'],
-      output: {
-        // global vars to use in UMD build for externalized deps
-        globals: {
-          react: 'React',
-          'react-dom': 'ReactDOM',
-        },
-      },
-    },
-  },
-});
+export default defineConfig({ ...config(__dirname) });

packages/styles/package.json

@@ -5,15 +5,15 @@
   "sideEffects": false,
   "files": [
     "package.json",
-    "lib"
+    "dist"
   ],
-  "main": "./lib/index.umd.js",
-  "module": "./lib/index.es.js",
-  "types": "./lib/index.d.ts",
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./lib/index.es.js",
-      "require": "./lib/index.umd.js"
+      "require": "./dist/index.cjs.js",
+      "import": "./dist/index.es.js"
     }
   },
   "scripts": {
@@ -26,5 +26,8 @@
   "devDependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
+  },
+  "dependencies": {
+    "@web3uikit/config": "*"
   }
 }

packages/styles/tsconfig.json

@@ -1,11 +1,8 @@
 {
-  "extends": "../../tsconfig.ui.json",
+  "extends": "@web3uikit/config/tsconfig.ui.json",
   "compilerOptions": {
     "baseUrl": ".",
-    "declarationDir": "lib",
-    "emitDeclarationOnly": true,
-    "rootDir": "src"
+    "rootDir": "src",
   },
-  "include": ["src"],
-  "exclude": ["node_modules", "package.json"]
+  "include": ["src"]
 }

packages/styles/vite.config.ts

@@ -1,34 +1,4 @@
-import path from 'path';
-import react from '@vitejs/plugin-react';
-import tsconfigPaths from 'vite-tsconfig-paths';
-
 import { defineConfig } from 'vite';
-const { name, version } = require('./package.json');
-
-import dts from 'vite-plugin-dts';
+import config from './node_modules/@web3uikit/config/vite.config';
 
-export default defineConfig({
-  define: {
-    pkgJson: { name, version }
-  },
-  plugins: [react(), tsconfigPaths(), dts({ entryRoot: './src' })],
-  build: {
-    lib: {
-      entry: path.resolve(__dirname, 'src/index.ts'),
-      fileName: 'index',
-      formats: ['es']
-    },
-    outDir: './lib',
-    rollupOptions: {
-      // externalize deps that shouldn't be bundled
-      external: ['react', 'react-dom'],
-      output: {
-        // global vars to use in UMD build for externalized deps
-        globals: {
-          react: 'React',
-          'react-dom': 'ReactDOM'
-        }
-      }
-    }
-  }
-});
+export default defineConfig({ ...config(__dirname) });

packages/ui/package.json

@@ -5,15 +5,15 @@
   "sideEffects": false,
   "files": [
     "package.json",
-    "lib"
+    "dist"
   ],
-  "main": "./lib/index.umd.js",
-  "module": "./lib/index.es.js",
-  "types": "./lib/index.d.ts",
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./lib/index.es.js",
-      "require": "./lib/index.umd.js"
+      "require": "./dist/index.cjs.js",
+      "import": "./dist/index.es.js"
     }
   },
   "scripts": {
@@ -32,8 +32,9 @@
   "dependencies": {
     "@ethersproject/transactions": "^5.6.2",
     "@moralisweb3/evm-wallet-connect-connector": "2.0.0-alpha.1",
-    "@web3uikit/core": "0.1.0",
-    "@web3uikit/styles": "0.1.0",
+    "@web3uikit/config": "*",
+    "@web3uikit/core": "*",
+    "@web3uikit/styles": "*",
     "react-blockies": "^1.4.1"
   }
 }

packages/ui/src/lib/ConnectButton/ConnectButton.tsx

@@ -1,4 +1,4 @@
-import { Button } from  "@web3uikit/core"
+import { Button } from "@web3uikit/core"
 import Moralis from '@moralisweb3/evm-wallet-connect-connector'
 export const ConnectButton = () => {
     return (