Auto-add all packages to webpack alias (#798)
* Auto-add all packages to webpack alias * Use findPackages approach is jest.config as well * Remove debug log
This commit is contained in:
parent
9fe4510724
commit
105205fb46
@ -1,9 +1,15 @@
|
||||
const config = require('@polkadot/dev-react/config/jest');
|
||||
const findPackages = require('./scripts/findPackages');
|
||||
|
||||
const internalModules = findPackages().reduce((modules, { dir, name }) => {
|
||||
modules[`${name}(.*)$`] = `<rootDir>/packages/${dir}/src/$1`;
|
||||
|
||||
return modules;
|
||||
}, {});
|
||||
|
||||
module.exports = Object.assign({}, config, {
|
||||
moduleNameMapper: {
|
||||
'@polkadot/app-(123code|accounts|addresses|democracy|explorer|extrinsics|js|rpc|settings|staking|status|storage|toolbox|transfer)(.*)$': '<rootDir>/packages/app-$1/src/$2',
|
||||
'@polkadot/ui-(api|app|params|reactive|signer)(.*)$': '<rootDir>/packages/ui-$1/src/$2',
|
||||
...internalModules,
|
||||
'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': 'empty/object',
|
||||
'\\.(css|less)$': 'empty/object'
|
||||
}
|
||||
|
||||
@ -12,13 +12,11 @@ If you want to add a new app to the UI, this is the place to start.
|
||||
And we have the basic app source setup, time to get the tooling correct.
|
||||
|
||||
3. Add the new app to the TypeScript config in root, `tsconfig.json`, i.e. an entry such as `"@polkadot/app-example/*": [ "packages/app-example/src/*" ],`
|
||||
4. Add the new app to the Jest config in root, `jest.config.js`, by just adding `|example` appropriately on the first line.
|
||||
5. In `apps/webpack.config.js` add `app-example` to the `const packages = [...]` list
|
||||
|
||||
At this point the app should be buildable, but not quite reachable. The final step is to add it to the actual sidebar in `apps`.
|
||||
|
||||
6. In `apps/src/routing/` duplicate the `123code.ts` file to `example.ts` and edit it with the appropriate information, including the hash link, name and icon (any icon name from semantic-ui-react/font-awesome 4 should be appropriate).
|
||||
7. In the above description file, the `isHidden` field needs to be toggled to make it appear - the base template is hidden by default.
|
||||
8. Finally add the `template` to the `apps/src/routing/index.ts` file at the appropriate place for both full and light mode (either optional)
|
||||
4. In `apps/src/routing/` duplicate the `123code.ts` file to `example.ts` and edit it with the appropriate information, including the hash link, name and icon (any icon name from semantic-ui-react/font-awesome 4 should be appropriate).
|
||||
5. In the above description file, the `isHidden` field needs to be toggled to make it appear - the base template is hidden by default.
|
||||
6. Finally add the `template` to the `apps/src/routing/index.ts` file at the appropriate place for both full and light mode (either optional)
|
||||
|
||||
Yes. After all that we have things hooked up. Run `yarn start` and your new app (non-coded) should show up. Now start having fun and building something great.
|
||||
|
||||
@ -11,25 +11,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const { WebpackPluginServe } = require('webpack-plugin-serve');
|
||||
|
||||
const packages = [
|
||||
'app-accounts',
|
||||
'app-addresses',
|
||||
'app-democracy',
|
||||
'app-explorer',
|
||||
'app-extrinsics',
|
||||
'app-js',
|
||||
'app-settings',
|
||||
'app-staking',
|
||||
'app-storage',
|
||||
'app-123code',
|
||||
'app-toolbox',
|
||||
'app-transfer',
|
||||
'ui-api',
|
||||
'ui-app',
|
||||
'ui-params',
|
||||
'ui-reactive',
|
||||
'ui-signer'
|
||||
];
|
||||
const findPackages = require('../../scripts/findPackages');
|
||||
|
||||
// const DEFAULT_THEME = process.env.TRAVIS_BRANCH === 'next'
|
||||
// ? 'substrate'
|
||||
@ -208,8 +190,8 @@ function createWebpack ({ alias = {}, context, name = 'index' }) {
|
||||
|
||||
module.exports = createWebpack({
|
||||
context: __dirname,
|
||||
alias: packages.reduce((alias, pkg) => {
|
||||
alias[`@polkadot/${pkg}`] = path.resolve(__dirname, `../${pkg}/src`);
|
||||
alias: findPackages().reduce((alias, { dir, name }) => {
|
||||
alias[name] = path.resolve(__dirname, `../${dir}/src`);
|
||||
|
||||
return alias;
|
||||
}, {})
|
||||
|
||||
28
scripts/findPackages.js
Normal file
28
scripts/findPackages.js
Normal file
@ -0,0 +1,28 @@
|
||||
// Copyright 2017-2019 @polkadot/apps authors & contributors
|
||||
// This software may be modified and distributed under the terms
|
||||
// of the Apache-2.0 license. See the LICENSE file for details.
|
||||
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
module.exports = function findPackages () {
|
||||
const pkgRoot = path.join(__dirname, '..', 'packages');
|
||||
|
||||
return fs
|
||||
.readdirSync(pkgRoot)
|
||||
.filter((entry) => {
|
||||
const pkgPath = path.join(pkgRoot, entry);
|
||||
|
||||
return !['.', '..'].includes(entry) &&
|
||||
fs.lstatSync(pkgPath).isDirectory() &&
|
||||
fs.lstatSync(path.join(pkgPath, 'package.json'));
|
||||
})
|
||||
.map((dir) => {
|
||||
const jsonPath = path.join(pkgRoot, dir, 'package.json');
|
||||
const { name } = JSON.parse(
|
||||
fs.readFileSync(jsonPath).toString('utf-8')
|
||||
);
|
||||
|
||||
return { dir, name };
|
||||
});
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user