## Description To maintain consistency in output and prevention of unnecessary code edits, this PR adds eslint and prettier config to the shared module. Fixes # (issue) > if no issue exists, please create an issue and ask the maintainers about this first Media > A video or a GIF is preferred. when using Loom, don’t embed because it looks like it’s a GIF. instead, just link to the video ## Type of change > Please delete options that are not relevant. - Bug fix (non-breaking change which fixes an issue) - New feature (non-breaking change which adds functionality) - Breaking change (fix or feature that would cause existing functionality to not work as expected) - Chore (housekeeping or task changes that don't impact user perception) - This change requires a documentation update ## How Has This Been Tested? > Please describe the tests that you ran to verify your changes. Provide instructions, so we can reproduce. > Please also list any relevant details for your test configuration. > Delete anything that is not important - Manual - Jest - Cypress ### Test Plan > Add Testsmith test cases links that relate to this PR ### Issues raised during DP testing > Link issues raised during DP testing for better visiblity and tracking (copy link from comments dropped on this PR) ## Checklist: ### Dev activity - [ ] My code follows the style guidelines of this project - [ ] I have performed a self-review of my own code - [ ] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [ ] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag ### QA activity: - [ ] Test plan has been approved by relevant developers - [ ] Test plan has been peer reviewed by QA - [ ] Cypress test cases have been added and approved by either SDET or manual QA - [ ] Organized project review call with relevant stakeholders after Round 1/2 of QA - [ ] Added Test Plan Approved label after reveiwing all Cypress test |
||
|---|---|---|
| .. | ||
| ast | ||
| .gitignore | ||
| build-shared-dep.js | ||
| install-dependencies.js | ||
| package.json | ||
| Readme.md | ||
| run-tests.js | ||
| shared-dependencies.json | ||
| verify-shared-dep.js | ||
Shared Dependencies
We wanted to share common logic with different applications within our repo, so we picked yarn symlinks as our approach to tackle this problem. Following are the way in which you can take advantage of the module sharing architecture.
Creation of a Shared Module
- Create a directory inside
shareddirectory with name eg.abc - Inside
package.jsonof module, keep the name like@shared/abc - Add a rollup config to generate
package.jsonafter the module is build
Installation of Shared Modules
- Add an entry for an application inside
shared-dependencies.jsoneg. forclientthere should be an entry"client": [] - Add the name of the shared module in the entry of the application in the above file eg.
"client": ["@shared/abc"] - If the application does not have any postinstall or preinstall scripts for shared modules then add the two commands described below in the application's (eg.
client)package.json:"postinstall": "CURRENT_SCOPE=client node ../shared/install-dependencies.js""preinstall": "CURRENT_SCOPE=client node ../shared/build-shared-dep.js"CURRENT_SCOPE is the environment variable that's being used in the scripts
Verifying the Installed Shared Modules
- Run
yarn run verifyinsideshareddirectory to verify shared dependencies for an application.
Command link-package
yarn install: installs packagesrollup -c: Module bundler bundles the package and creates a buildcd build: Change the present working directorycp -R ../node_modules ./node_modules: copies its own node_modules directory to its build directory to make sure its own version dependencies do not mismatch when its installed in other directories as shared moduleyarn link: Creates a link for the package to make it available for other directories to use.