diff --git a/jest.config.js b/jest.config.js index e7905097c5..e196d87fd5 100644 --- a/jest.config.js +++ b/jest.config.js @@ -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}(.*)$`] = `/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)(.*)$': '/packages/app-$1/src/$2', - '@polkadot/ui-(api|app|params|reactive|signer)(.*)$': '/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' } diff --git a/packages/app-123code/README.md b/packages/app-123code/README.md index 8ba084212c..77b3068a87 100644 --- a/packages/app-123code/README.md +++ b/packages/app-123code/README.md @@ -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. diff --git a/packages/apps/webpack.config.js b/packages/apps/webpack.config.js index 14d16aefda..9d4c62efad 100644 --- a/packages/apps/webpack.config.js +++ b/packages/apps/webpack.config.js @@ -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; }, {}) diff --git a/scripts/findPackages.js b/scripts/findPackages.js new file mode 100644 index 0000000000..d229012899 --- /dev/null +++ b/scripts/findPackages.js @@ -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 }; + }); +}