From 35c8535be14db88b33bc7fc59d93107cb0e4e5d2 Mon Sep 17 00:00:00 2001 From: Jaco Date: Sat, 29 Jan 2022 10:54:55 +0100 Subject: [PATCH] Cleanup webpack example configs (#606) * Remove Buffer/process plugins * Adjust * Cleanup README --- CHANGELOG.md | 7 +++ README.md | 1 - package.json | 9 +--- .../{webpack.config.js => webpack.config.cjs} | 14 +---- .../{webpack.config.js => webpack.config.cjs} | 17 +----- packages/react-identicon/src/Demo.tsx | 54 ------------------- packages/react-identicon/webpack.config.js | 45 ---------------- packages/vue-identicon/src/Demo.ts | 40 -------------- packages/vue-identicon/webpack.config.js | 50 ----------------- tsconfig.eslint.json | 1 + 10 files changed, 14 insertions(+), 224 deletions(-) rename packages/example-react/{webpack.config.js => webpack.config.cjs} (81%) rename packages/example-vue/{webpack.config.js => webpack.config.cjs} (77%) delete mode 100644 packages/react-identicon/src/Demo.tsx delete mode 100644 packages/react-identicon/webpack.config.js delete mode 100644 packages/vue-identicon/src/Demo.ts delete mode 100644 packages/vue-identicon/webpack.config.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 08f945bc..47eecff8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,12 @@ # CHANGELOG +## master + +Changes: + +- Adjust webpack example config (cleanups, remove unneeded plugins) + + ## 1.0.1 Jan 29, 2022 **Breaking change** The `Ledger` export from `@polkadot/ui-keyring` has been removed. For users of this class, import it directly from `@polkadot/hw-ledger` diff --git a/README.md b/README.md index ec8309d6..814e700a 100644 --- a/README.md +++ b/README.md @@ -30,5 +30,4 @@ Additionally some shared libraries, that is not dependent on any framework - In addition to the above packages, there are examples available for intergation of `ui-keyring`, `ui-settings` & the relevant `*-identicon` package. These are - [example-react](packages/example-react) - start with `yarn example:react` and view on `http://localhost:8080` -- [example-reactnative](packages/exampleReactNative) - start with `yarn example:rn:packager` to start the packager service and then either `yarn example:rn:android` or `yarn example:rn:ios` in another terminal - [example-vue](packages/example-vue) - start with `yarn example:vue` and view on `http://localhost:8080` diff --git a/package.json b/package.json index cefb17ed..4c8ba786 100644 --- a/package.json +++ b/package.json @@ -19,13 +19,8 @@ "build:release": "polkadot-ci-ghact-build", "build:rollup": "polkadot-exec-rollup --config", "clean": "polkadot-dev-clean-build", - "demo:identicon:react": "yarn build && webpack-serve --config packages/react-identicon/webpack.config.js --content packages/react-identicon --port 8080", - "demo:identicon:vue": "yarn build && webpack-serve --config packages/vue-identicon/webpack.config.js --content packages/vue-identicon --port 8080", - "example:react": "yarn build && cd packages/example-react && webpack --config webpack.config.js", - "example:rn:android": "cd packages/exampleReactNative && yarn android", - "example:rn:ios": "cd packages/exampleReactNative && cd ios && pod install && cd .. && yarn ios", - "example:rn:packager": "yarn build && cd packages/exampleReactNative && yarn copy-workspace-packages && yarn start", - "example:vue": "yarn build && cd packages/example-vue && webpack --config webpack.config.js", + "example:react": "yarn build && cd packages/example-react && webpack --config webpack.config.cjs", + "example:vue": "yarn build && cd packages/example-vue && webpack --config webpack.config.cjs", "lint": "polkadot-dev-run-lint", "postinstall": "polkadot-dev-yarn-only", "test": "polkadot-dev-run-test --coverage --runInBand", diff --git a/packages/example-react/webpack.config.js b/packages/example-react/webpack.config.cjs similarity index 81% rename from packages/example-react/webpack.config.js rename to packages/example-react/webpack.config.cjs index 02f21b37..1ef911dc 100644 --- a/packages/example-react/webpack.config.js +++ b/packages/example-react/webpack.config.cjs @@ -3,7 +3,6 @@ const path = require('path'); const { WebpackPluginServe } = require('webpack-plugin-serve'); -const webpack = require('webpack'); module.exports = { context: __dirname, @@ -37,12 +36,6 @@ module.exports = { port: 8080, progress: false, // since we have hmr off, disable static: __dirname - }), - new webpack.ProvidePlugin({ - Buffer: ['buffer', 'Buffer'] - }), - new webpack.ProvidePlugin({ - process: 'process/browser' }) ], resolve: { @@ -51,14 +44,11 @@ module.exports = { '@polkadot/ui-keyring': path.resolve(__dirname, '../ui-keyring/build'), '@polkadot/ui-settings': path.resolve(__dirname, '../ui-settings/build'), '@polkadot/ui-shared': path.resolve(__dirname, '../ui-shared/build'), - 'process/browser': require.resolve('process/browser'), 'react/jsx-runtime': require.resolve('react/jsx-runtime') }, extensions: ['.js', '.ts', '.tsx'], - fallback: { - buffer: require.resolve('buffer'), - stream: require.resolve('stream-browserify') - } + fallback: {} }, + target: 'web', watch: true }; diff --git a/packages/example-vue/webpack.config.js b/packages/example-vue/webpack.config.cjs similarity index 77% rename from packages/example-vue/webpack.config.js rename to packages/example-vue/webpack.config.cjs index bafd88d1..19f00daf 100644 --- a/packages/example-vue/webpack.config.js +++ b/packages/example-vue/webpack.config.cjs @@ -2,9 +2,7 @@ // SPDX-License-Identifier: Apache-2.0 const path = require('path'); -const VueLoaderPlugin = require('vue-loader/lib/plugin'); const { WebpackPluginServe } = require('webpack-plugin-serve'); -const webpack = require('webpack'); module.exports = { context: __dirname, @@ -22,10 +20,6 @@ module.exports = { options: require('../../babel.config.cjs') } ] - }, - { - loader: 'vue-loader', - test: /\.vue$/ } ] }, @@ -42,13 +36,6 @@ module.exports = { port: 8080, progress: false, // since we have hmr off, disable static: __dirname - }), - new VueLoaderPlugin(), - new webpack.ProvidePlugin({ - Buffer: ['buffer', 'Buffer'] - }), - new webpack.ProvidePlugin({ - process: 'process/browser' }) ], resolve: { @@ -56,10 +43,10 @@ module.exports = { '@polkadot/ui-keyring': path.resolve(__dirname, '../ui-keyring/build'), '@polkadot/ui-settings': path.resolve(__dirname, '../ui-settings/build'), '@polkadot/ui-shared': path.resolve(__dirname, '../ui-shared/build'), - '@polkadot/vue-identicon': path.resolve(__dirname, '../vue-identicon/build'), - 'process/browser': require.resolve('process/browser') + '@polkadot/vue-identicon': path.resolve(__dirname, '../vue-identicon/build') }, extensions: ['.js', '.ts', '.tsx'] }, + target: 'web', watch: true }; diff --git a/packages/react-identicon/src/Demo.tsx b/packages/react-identicon/src/Demo.tsx deleted file mode 100644 index f5e4ee73..00000000 --- a/packages/react-identicon/src/Demo.tsx +++ /dev/null @@ -1,54 +0,0 @@ -// Copyright 2017-2022 @polkadot/react-identicon authors & contributors -// SPDX-License-Identifier: Apache-2.0 - -import React from 'react'; -import ReactDOM from 'react-dom'; - -import { encodeAddress, randomAsU8a } from '@polkadot/util-crypto'; - -import { Identicon } from '.'; - -const THEMES = ['beachball', 'polkadot', 'substrate']; - -export default class Demo extends React.PureComponent { - public override render (): React.ReactNode { - const identities: string[] = []; - - while (identities.length !== 50) { - identities.push( - encodeAddress(randomAsU8a(32)) - ); - } - - return ( -
-
- {identities.map((value, index): React.ReactNode => ( - - ))} -
-
- {THEMES.map((theme): React.ReactNode => ( - - ))} -
-
- ); - } -} - -const rootElement = document.getElementById('demo'); - -if (!rootElement) { - throw new Error('Unable to find element with id \'demo\''); -} - -ReactDOM.render(, rootElement); diff --git a/packages/react-identicon/webpack.config.js b/packages/react-identicon/webpack.config.js deleted file mode 100644 index 0c3dcf3b..00000000 --- a/packages/react-identicon/webpack.config.js +++ /dev/null @@ -1,45 +0,0 @@ -// Copyright 2017-2022 @polkadot/react-identicon authors & contributors -// SPDX-License-Identifier: Apache-2.0 - -const path = require('path'); -const webpack = require('webpack'); -const ENV = process.env.NODE_ENV || 'development'; -const isProd = ENV === 'production'; - -module.exports = { - context: __dirname, - devtool: isProd ? 'source-map' : 'eval-cheap-source-map', - entry: './src/Demo.tsx', - mode: ENV, - module: { - rules: [ - { - exclude: /(node_modules)/, - test: /\.(js|ts|tsx)$/, - use: [ - 'babel-loader' - ] - } - ] - }, - output: { - filename: './Demo.js', - path: path.join(__dirname, 'build') - }, - plugins: [ - new webpack.ProvidePlugin({ - Buffer: ['buffer', 'Buffer'] - }), - new webpack.ProvidePlugin({ - process: 'process/browser' - }) - ], - resolve: { - alias: { - '@polkadot/ui-settings': path.resolve(__dirname, '../ui-settings/build'), - '@polkadot/ui-shared': path.resolve(__dirname, '../ui-shared/build'), - 'process/browser': require.resolve('process/browser') - }, - extensions: ['.js', '.jsx', '.ts', '.tsx'] - } -}; diff --git a/packages/vue-identicon/src/Demo.ts b/packages/vue-identicon/src/Demo.ts deleted file mode 100644 index 9e559f1a..00000000 --- a/packages/vue-identicon/src/Demo.ts +++ /dev/null @@ -1,40 +0,0 @@ -// Copyright 2017-2022 @polkadot/vue-identicon authors & contributors -// SPDX-License-Identifier: Apache-2.0 - -import Vue, { VNode } from 'vue'; - -import Identicon from './index'; - -interface Data { - address: string; - size: number; -} - -/** - * @name Demo - * @description Demo component - */ -const Demo = Vue.extend({ - components: { - Identicon - }, - data: function (): Data { - return { - address: '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY', - size: 128 - }; - }, - name: 'Demo', - template: ` -
- - - - -
- ` -}); - -new Vue({ - render: (h): VNode => h(Demo) -}).$mount('#demo'); diff --git a/packages/vue-identicon/webpack.config.js b/packages/vue-identicon/webpack.config.js deleted file mode 100644 index 1329973f..00000000 --- a/packages/vue-identicon/webpack.config.js +++ /dev/null @@ -1,50 +0,0 @@ -// Copyright 2017-2022 @polkadot/react-identicon authors & contributors -// SPDX-License-Identifier: Apache-2.0 - -const path = require('path'); -const VueLoaderPlugin = require('vue-loader/lib/plugin'); -const webpack = require('webpack'); -const ENV = process.env.NODE_ENV || 'development'; -const isProd = ENV === 'production'; - -module.exports = { - context: __dirname, - devtool: isProd ? 'source-map' : 'eval-cheap-source-map', - entry: './src/Demo.ts', - mode: ENV, - module: { - rules: [ - { - exclude: /(node_modules)/, - test: /\.(js|ts)$/, - use: [ - 'babel-loader' - ] - }, - { - loader: 'vue-loader', - test: /\.vue$/ - } - ] - }, - output: { - filename: './demo.js', - path: path.join(__dirname, 'build') - }, - plugins: [ - new VueLoaderPlugin(), - new webpack.ProvidePlugin({ - Buffer: ['buffer', 'Buffer'] - }), - new webpack.ProvidePlugin({ - process: 'process/browser' - }) - ], - resolve: { - alias: { - '@polkadot/ui-shared': path.resolve(__dirname, '../ui-shared/build'), - 'process/browser': require.resolve('process/browser') - }, - extensions: ['.js', '.ts'] - } -}; diff --git a/tsconfig.eslint.json b/tsconfig.eslint.json index b0f0ca2e..c89994fa 100644 --- a/tsconfig.eslint.json +++ b/tsconfig.eslint.json @@ -6,6 +6,7 @@ }, "include": [ "packages/**/src/**/*", + "packages/**/*.cjs", "packages/**/*.js" ], "exclude": [