ui-components

Install

1. Add following lines to .npmrc

@quantfoliorepo:registry=https://registry.npmjs.org
//registry.npmjs.org/:_authToken=your_npm_access_token

yarn add @quantfoliorepo/ui-components

Dev mode dependency example

yarn build-local

{
  "dependencies": {
    "@quantfoliorepo/ui-components": "file:///Git/ui-components-local"
  }
}

Notes:

yarn installs package with all folder content, including node_modules containing dev dependencies, those dev dependencies are used instead of root project dependencies according to peer dependencies config. So build-local command added to copy build result to other folder without node_modules.

TODO:

Bit dev solves this task in same way, but with relative path: "The package.json file is modified to point to the files rather than the remote package." (https://itnext.io/how-to-reuse-react-components-without-overhead-db41f646f527)

Solution: start with 'file:' path in package.json, if it will no work (will not be automatically updated, or will be difficulat to maintain) try to use webpack resolve (https://medium.com/@tnrich_29519/a-better-alternative-to-npm-yarn-link-for-the-front-end-667f03d497a6), if it will not work try yalc (https://github.com/wclr/yalc)

Dev mode version 2

1. In client application project uncomment config in craco.config.js file, change webpack.alias.@quantfoliorepo/ui-components and jest.configure.^@quantfoliorepo/ui-components$ config values to your /ui-components/build/ folder path if the path is different from the default one.

   1. If you want to disable typescript then uncomment typescript config in craco.config.js file, otherwise comment it out.

   2. If ui-components public interface is changed, typescript is enabled and you get typescript errors, then in client application project uncomment extends config in tsconfig.json file, in file tsconfig.paths.json change compilerOptions.paths.@quantfoliorepo/ui-components config value to your /ui-components/build/ folder path if the path is different from the default one.

2. In client application run yarn start.

3. If you need to set debugger in ui-components and use it as a breakpoint in client application, then in ui-components project uncomment optimization config section in webpack.common.js file. Alternative solution for breakpoints is to use chrome devtools Sources tab, search for required file with ctrl + p and set breakpoint in required line of file.

4. In ui-components project run yarn build-minimal --watch (and yarn build-typescript --watch if type definitions required) and start making changes in source code of ui-components. Webpack will detect changes and rebuild library automatically, client application will detect /ui-components/build/ changes and rebuild automatically as well. (If you need to make only one change, then you can make this change and run yarn build, it will build both code and type definitions only once.)

5. When local development is finished, comment out config in craco.config.js file and extends config in tsconfig.json file in client applications and optimization config section in webpack.common.js file in ui-components.

6. Use this approach to fix bugs or to do integration experiments. Use ui-components storybook and unit tests to develop new components, stores, etc.

TODO:

• Try to configure webpack to use /ui-components/src/ directly instead of /ui-components/build/. This will allow us to use only client app build without ui-components build.

• While using /ui-components/build/ as alias, try to build library in development mode instead of production mode. In this case we will not need optimization config section in webpack.common.js file. Also in theory it will make ui-components build faster.

• Try to replace uncomment/comment approach by build configuration flags. With uncomment/comment approach we have risk to accidentally push uncommented code to git repo.

Publish

1. Add following lines to .npmrc

@quantfoliorepo:registry=https://registry.npmjs.org
//registry.npmjs.org/:_authToken=your_npm_access_token

yarn publish --access restricted

Managing dependencies of library

1. Basic information about configuration and production optimizations https://webpack.js.org/guides/author-libraries/

2. Use webpack externals with webpack-node-externals to exclude node-modules from library bundle https://www.npmjs.com/package/webpack-node-externals. Webpack excludes externals from final bundle. When libarary (L) added as a dependency to comsumer project (CP), yarn will install all L missing 'dependencies' from package.json, but will not install L missing 'peerDependencies' from package.json, only show warning/error about them https://classic.yarnpkg.com/en/docs/dependency-types/, https://betterprogramming.pub/package-jsons-dependencies-in-depth-a1f0637a3129.

3. Yarn does not garantee, that it will hoist 'dependencies' from library (L) package.json and 'dependencies' from consuming project (CP) package.json. In order to use same dependency in both L and CP you need to define L dependency as a 'peerDependency' and the define it as a 'dependency' in CP https://classic.yarnpkg.com/blog/2018/04/18/dependencies-done-right/ (also check secion "A Simple Rule" to understand what is peerDependnecy and what is not). For local development peerDepenednecy should also be added to devDependency. 'Selective dependency resolution' option exists when you have no other options https://classic.yarnpkg.com/en/docs/selective-version-resolutions/

TODO:

1. Invesigate what is th e best option for package build files: single js bundle or just transpiled .ts to .js files without bundling, single d.ts declarations file or d.ts declaration file per original .ts file