Examples cleanup (#205)

Three main things: - Move from webpack 5 to webpack 4 (webpack 5 is having some issues with ethers at the moment). - Add bundler-specific demos (Parcel and Webpack with ts-loader). - Use latest Connect APIs.
aragon · Aug 14, 2020 · 13c57df · 13c57df
1 parent efa70f8
commit 13c57df
Show file tree

Hide file tree

Showing 22 changed files with 472 additions and 148 deletions.
diff --git a/examples/bundler-parcel/.gitignore b/examples/bundler-parcel/.gitignore
@@ -0,0 +1,2 @@
+dist/
+.cache/
diff --git a/examples/bundler-parcel/package.json b/examples/bundler-parcel/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "bundler-parcel",
+  "private": true,
+  "version": "0.5.3",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "start": "parcel src/index.html",
+    "build": "parcel build src/index.html"
+  },
+  "dependencies": {
+    "@aragon/connect-react": "^0.5.3",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "string.ify": "^1.0.64"
+  },
+  "devDependencies": {
+    "parcel": "^1.12.4"
+  }
+}
diff --git a/examples/bundler-parcel/src/index.html b/examples/bundler-parcel/src/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>bundler-parcel</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+  </head>
+  <body>
+    Please open the console
+  </body>
+</html>
diff --git a/examples/bundler-parcel/src/index.js b/examples/bundler-parcel/src/index.js
@@ -0,0 +1,5 @@
+import connect from '@aragon/connect'
+
+connect('a1.aragonid.eth', 'thegraph').then((org) => {
+  console.log('Organization:', org)
+})
diff --git a/examples/bundler-webpack-ts-loader/package.json b/examples/bundler-webpack-ts-loader/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "bundler-webpack-ts-loader",
+  "main": "dist/index.js",
+  "version": "0.5.3",
+  "private": true,
+  "sideEffects": false,
+  "scripts": {
+    "start": "yarn clean && webpack-dev-server",
+    "build": "yarn clean && webpack --env production",
+    "clean": "rm -rf ./dist ./tsconfig.tsbuildinfo"
+  },
+  "dependencies": {
+    "@aragon/connect": "^0.5.3",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
+  },
+  "devDependencies": {
+    "@types/react": "^16.9.35",
+    "@types/react-dom": "^16.9.8",
+    "html-webpack-plugin": "^4.3.0",
+    "ts-loader": "^7.0.2",
+    "typescript": "^3.8.3",
+    "webpack": "^4.44.1",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.10.3"
+  }
+}
diff --git a/examples/bundler-webpack-ts-loader/src/index.html b/examples/bundler-webpack-ts-loader/src/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>bundler-webpack-ts-loader</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+  </head>
+  <body>
+    Please open the console
+  </body>
+</html>
diff --git a/examples/bundler-webpack-ts-loader/src/index.tsx b/examples/bundler-webpack-ts-loader/src/index.tsx
@@ -0,0 +1,5 @@
+import connect from '@aragon/connect'
+
+connect('a1.aragonid.eth', 'thegraph').then((org) => {
+  console.log('Organization:', org)
+})
diff --git a/examples/bundler-webpack-ts-loader/tsconfig.json b/examples/bundler-webpack-ts-loader/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "src",
+    "jsx": "react"
+  },
+  "include": ["src"],
+  "exclude": ["dist"]
+}
diff --git a/examples/bundler-webpack-ts-loader/webpack.config.js b/examples/bundler-webpack-ts-loader/webpack.config.js
@@ -0,0 +1,36 @@
+const path = require('path')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = {
+  entry: './src/index.tsx',
+  devtool: 'inline-source-map',
+  target: 'web',
+  mode: process.env.NODE_ENV || 'development',
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: 'ts-loader',
+            options: { projectReferences: true },
+          },
+        ],
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+    mainFields: ['main', 'module', 'browser'],
+  },
+  output: {
+    filename: 'bundle.js',
+    path: path.resolve(__dirname, 'dist'),
+  },
+  devServer: {
+    contentBase: path.join(__dirname, 'dist'),
+    port: 1234,
+  },
+  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
+}
diff --git a/examples/list-balances-cli/src/index.ts b/examples/list-balances-cli/src/index.ts
@@ -8,18 +8,18 @@ const RESET = '\x1b[0m'
 const DECIMALS = 18
 
 const env = {
-  chainId: parseInt(process.env.CHAIN_ID ?? '1', 10),
+  network: parseInt(process.env.CHAIN_ID ?? '1', 10),
   location: process.env.ORGANIZATION ?? 'piedao.aragonid.eth',
 }
 
 async function main() {
-  const org = await connect(env.location, 'thegraph', { chainId: env.chainId })
+  const org = await connect(env.location, 'thegraph', { network: env.network })
   const tokens = await connectTokens(org.app('token-manager'))
   const token = await tokens.token()
   const holders = await tokens.holders()
 
   printOrganization(org)
-  printBalances(holders, await token.symbol)
+  printBalances(holders, token.symbol)
 }
 
 function printOrganization(organization: any): void {

diff --git a/examples/list-votes-cli/src/index.ts b/examples/list-votes-cli/src/index.ts
@@ -11,7 +11,7 @@ const env = {
 
 async function main() {
   const org = await connect(env.location, 'thegraph', { network: env.network })
-  const voting = await connectVoting(org.app('tsateiurteiuart'))
+  const voting = await connectVoting(org.app('voting'))
   const votes = await voting.votes()
 
   printOrganization(org)

diff --git a/examples/minimal-setup-web/index.html b/examples/minimal-setup-web/index.html
@@ -6,6 +6,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script src="dist/index.js"></script>
+    <script src="index.js"></script>
   </body>
 </html>
diff --git a/examples/minimal-setup-web/package.json b/examples/minimal-setup-web/package.json
@@ -5,8 +5,8 @@
   "main": "index.js",
   "license": "MIT",
   "scripts": {
-    "start": "parcel index.js",
-    "build": "parcel build index.js"
+    "start": "parcel index.html",
+    "build": "parcel build index.html"
   },
   "dependencies": {
     "@aragon/connect-react": "^0.5.3",

diff --git a/examples/org-viewer-react/package.json b/examples/org-viewer-react/package.json
@@ -1,29 +1,26 @@
 {
   "name": "org-viewer-react",
-  "main": "dist/index.js",
   "version": "0.5.3",
   "private": true,
-  "sideEffects": false,
   "scripts": {
-    "dev": "yarn clean && webpack-dev-server",
-    "build": "yarn clean && NODE_ENV=production webpack",
+    "start": "yarn clean && webpack-dev-server",
+    "build": "yarn clean && webpack --production",
     "build:stats": "yarn clean && webpack --env production --json > webpack-stats.json",
-    "clean": "rm -rf ./dist ./tsconfig.tsbuildinfo",
-    "compile": "tsc"
+    "clean": "rm -rf ./dist ./tsconfig.tsbuildinfo"
   },
   "dependencies": {
     "@aragon/connect-react": "^0.5.3",
     "@emotion/core": "^10.0.28",
-    "@types/react": "^16.9.35",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"
   },
   "devDependencies": {
+    "@types/react": "^16.9.35",
     "@types/react-dom": "^16.9.8",
     "html-webpack-plugin": "^4.3.0",
     "ts-loader": "^7.0.2",
     "typescript": "^3.8.3",
-    "webpack": "^5.0.0-beta.15",
+    "webpack": "^4.44.1",
     "webpack-bundle-analyzer": "^3.8.0",
     "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.10.3"

diff --git a/examples/org-viewer-react/src/App.tsx b/examples/org-viewer-react/src/App.tsx
@@ -13,8 +13,8 @@ export default function App() {
   return (
     <Connect
       location={filterOrgName(orgName)}
-      connector={['thegraph', { orgSubgraphUrl: env.orgSubgraphUrl }]}
-      options={{ chainId: env.chainId }}
+      connector="thegraph"
+      options={{ network: env.chainId }}
     >
       <Main>
         <OrgInput onChange={openOrg} orgName={orgName} />

diff --git a/examples/org-viewer-react/src/environment.ts b/examples/org-viewer-react/src/environment.ts
@@ -1,7 +1,6 @@
 type EnvType = {
   addresses: string[]
   chainId: number
-  orgSubgraphUrl?: string
 }
 
 const ENV_NAME = 'mainnet'
@@ -22,8 +21,6 @@ const ENVIRONMENTS = new Map([
     'mainnet_staging',
     {
       chainId: 1,
-      orgSubgraphUrl:
-        'https://api.thegraph.com/subgraphs/name/aragon/aragon-mainnet-staging',
       addresses: ['piedao.aragonid.eth'],
     },
   ],

diff --git a/examples/org-viewer-react/webpack.config.js b/examples/org-viewer-react/webpack.config.js
@@ -8,9 +8,6 @@ module.exports = {
   devtool: 'inline-source-map',
   target: 'web',
   mode: process.env.NODE_ENV || 'development',
-  stats: {
-    preset: process.env.NODE_ENV === 'production' ? 'errors-only' : 'normal',
-  },
   module: {
     rules: [
       {
@@ -27,7 +24,7 @@ module.exports = {
   },
   resolve: {
     extensions: ['.tsx', '.ts', '.js'],
-    mainFields: ['module', 'browser', 'main'],
+    mainFields: ['main', 'module', 'browser'],
   },
   output: {
     filename: 'bundle.js',

diff --git a/examples/org-viewer-web/package.json b/examples/org-viewer-web/package.json
@@ -5,7 +5,7 @@
   "private": true,
   "sideEffects": false,
   "scripts": {
-    "dev": "yarn clean && webpack-dev-server",
+    "start": "yarn clean && webpack-dev-server",
     "build": "yarn clean && NODE_ENV=production webpack",
     "build:stats": "yarn clean && webpack --env production --json > webpack-stats.json",
     "clean": "rm -rf ./dist ./tsconfig.tsbuildinfo",
@@ -14,16 +14,16 @@
   "dependencies": {
     "@aragon/connect": "^0.5.3",
     "@emotion/core": "^10.0.28",
-    "@types/react": "^16.9.35",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"
   },
   "devDependencies": {
+    "@types/react": "^16.9.35",
     "@types/react-dom": "^16.9.8",
     "html-webpack-plugin": "^4.3.0",
     "ts-loader": "^7.0.2",
     "typescript": "^3.8.3",
-    "webpack": "^5.0.0-beta.15",
+    "webpack": "^4.44.1",
     "webpack-bundle-analyzer": "^3.8.0",
     "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.10.3"

diff --git a/examples/org-viewer-web/src/App.tsx b/examples/org-viewer-web/src/App.tsx
@@ -51,11 +51,7 @@ export default function App() {
 
   const [org = null, loading] = useCancellableAsync(
     async () =>
-      connect(
-        filterOrgName(orgName),
-        ['thegraph', { orgSubgraphUrl: env.orgSubgraphUrl }],
-        { chainId: env.chainId }
-      ),
+      connect(filterOrgName(orgName), 'thegraph', { network: env.chainId }),
     [orgName]
   )
 

diff --git a/examples/org-viewer-web/src/environment.ts b/examples/org-viewer-web/src/environment.ts
@@ -1,7 +1,6 @@
 type EnvType = {
   addresses: string[]
   chainId: number
-  orgSubgraphUrl?: string
 }
 
 const ENV_NAME = 'mainnet'
@@ -18,15 +17,6 @@ const ENVIRONMENTS = new Map([
       ],
     },
   ],
-  [
-    'mainnet_staging',
-    {
-      chainId: 1,
-      orgSubgraphUrl:
-        'https://api.thegraph.com/subgraphs/name/aragon/aragon-mainnet-staging',
-      addresses: ['piedao.aragonid.eth'],
-    },
-  ],
   [
     'rinkeby',
     {

diff --git a/examples/org-viewer-web/webpack.config.js b/examples/org-viewer-web/webpack.config.js
@@ -8,9 +8,6 @@ module.exports = {
   devtool: 'inline-source-map',
   target: 'web',
   mode: process.env.NODE_ENV || 'development',
-  stats: {
-    preset: process.env.NODE_ENV === 'production' ? 'errors-only' : 'normal',
-  },
   module: {
     rules: [
       {
@@ -27,7 +24,7 @@ module.exports = {
   },
   resolve: {
     extensions: ['.tsx', '.ts', '.js'],
-    mainFields: ['module', 'browser', 'main'],
+    mainFields: ['main', 'module', 'browser'],
   },
   output: {
     filename: 'bundle.js',