From 64bfc68443e393c3e065ba546ef443d9dca32e70 Mon Sep 17 00:00:00 2001 From: garronej Date: Sat, 4 Feb 2023 02:17:01 +0100 Subject: [PATCH] Enable the module to be linked in other project --- CONTRIBUTING.md | 23 +++- package.json | 11 +- src/scripts/link-in-external-project.ts | 119 ++++++++++++++++++ ...rn-link.ts => link-in-integration-apps.ts} | 0 4 files changed, 146 insertions(+), 7 deletions(-) create mode 100644 src/scripts/link-in-external-project.ts rename src/scripts/{yarn-link.ts => link-in-integration-apps.ts} (100%) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 65c21c272..17a11d36e 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -38,10 +38,29 @@ Thank You Very Much ❤️ PS: If you want to contribute to the Doc website. You can edit [the source Markdown](https://github.com/codegouvfr/react-dsfr/tree/v1_docs) or ask me for access to our GitBook. (We'll migrate to Docusaurus once we have the DSFR theme for it ready.) -## Linking a working version of `@gouvfr/dsfr` +## Linking your local copy of `@codegouvfr/react-dsfr` in your project + +This will enable you to see your react-dsfr changes in your main project. + +```bash +cd ~/github +git clone https://github.com/ORG/YOUR-PROJECT-USING-REACT-DSFR +cd YOUR-PROJECT-USING-REACT-DSFR +yarn # or npm install or pnpm install depending of what you are using... + +cd ~/github +git clone https://github.com/codegouvfr/react-dsfr +cd react-dsfr +yarn +yarn build +yarn link-external YOUR-PROJECT-USING-REACT-DSFR +npx tsc -w -p src # Leave this running if you want hot reload. +``` + +## Linking a working version of `@gouvfr/dsfr` (For the SIG) ```bash -cd ~/github/ +cd ~/github git clone http://github.com/gouvernementfr/dsfr cd dsfr # git checkout my-working-branch diff --git a/package.json b/package.json index c127640d3..e9f4bd47d 100644 --- a/package.json +++ b/package.json @@ -8,11 +8,12 @@ }, "scripts": { "build": "ts-node -T src/scripts/build", - "yarn-link": "ts-node -T src/scripts/yarn-link.ts", - "start-cra": "yarn build && yarn yarn-link && ((tsc -w -p src) & (cd test/integration/cra && yarn start))", - "start-vite": "yarn build && yarn yarn-link && ((tsc -w -p src) & (cd test/integration/vite && yarn dev))", - "start-next-pagesdir": "yarn build && yarn yarn-link && ((tsc -w -p src) & (cd test/integration/next-pagesdir && yarn dev))", - "start-next-appdir": "yarn build && yarn yarn-link && ((tsc -w -p src) & (cd test/integration/next-appdir && yarn dev))", + "_link": "ts-node -T src/scripts/link-in-integration-apps.ts", + "link-external": "ts-node -T src/scripts/link-in-external-project.ts", + "start-cra": "yarn build && yarn _link && ((tsc -w -p src) & (cd test/integration/cra && yarn start))", + "start-vite": "yarn build && yarn _link && ((tsc -w -p src) & (cd test/integration/vite && yarn dev))", + "start-next-pagesdir": "yarn build && yarn _link && ((tsc -w -p src) & (cd test/integration/next-pagesdir && yarn dev))", + "start-next-appdir": "yarn build && yarn _link && ((tsc -w -p src) & (cd test/integration/next-appdir && yarn dev))", "test": "vitest", "lint:check": "eslint . --ext .ts,.tsx", "lint": "yarn lint:check --fix", diff --git a/src/scripts/link-in-external-project.ts b/src/scripts/link-in-external-project.ts new file mode 100644 index 000000000..9252f3f71 --- /dev/null +++ b/src/scripts/link-in-external-project.ts @@ -0,0 +1,119 @@ +import { execSync } from "child_process"; +import { join as pathJoin, relative as pathRelative } from "path"; +import { exclude } from "tsafe/exclude"; +import * as fs from "fs"; + +const rootDirPath = pathJoin(__dirname, "..", ".."); + +const commonThirdPartyDeps = (() => { + const namespaceModuleNames = ["@emotion"]; + const standaloneModuleNames = ["react", "@types/react"]; + + return [ + ...namespaceModuleNames + .map(namespaceModuleName => + fs + .readdirSync(pathJoin(rootDirPath, "node_modules", namespaceModuleName)) + .map(submoduleName => `${namespaceModuleName}/${submoduleName}`) + ) + .reduce((prev, curr) => [...prev, ...curr], []), + ...standaloneModuleNames + ]; +})(); + +const yarnHomeDirPath = pathJoin(rootDirPath, ".yarn_home"); + +fs.rmSync(yarnHomeDirPath, { "recursive": true, "force": true }); +fs.mkdirSync(yarnHomeDirPath); + +const execYarnLink = (params: { targetModuleName?: string; cwd: string }) => { + const { targetModuleName, cwd } = params; + + const cmd = [ + "yarn", + "link", + ...(targetModuleName !== undefined ? [targetModuleName] : []) + ].join(" "); + + console.log(`$ cd ${pathRelative(rootDirPath, cwd) || "."} && ${cmd}`); + + execSync(cmd, { + cwd, + "env": { + ...process.env, + "HOME": yarnHomeDirPath + } + }); +}; + +const testAppPaths = (() => { + const [, , ...testAppNames] = process.argv; + + return testAppNames + .map(testAppName => { + const testAppPath = pathJoin(rootDirPath, "..", testAppName); + + if (fs.existsSync(testAppPath)) { + return testAppPath; + } + + console.warn(`Skipping ${testAppName} since it cant be found here: ${testAppPath}`); + + return undefined; + }) + .filter(exclude(undefined)); +})(); + +if (testAppPaths.length === 0) { + console.error("No test app to link into!"); + process.exit(-1); +} + +testAppPaths.forEach(testAppPath => execSync("yarn install", { "cwd": testAppPath })); + +console.log("=== Linking common dependencies ==="); + +const total = commonThirdPartyDeps.length; +let current = 0; + +commonThirdPartyDeps.forEach(commonThirdPartyDep => { + current++; + + console.log(`${current}/${total} ${commonThirdPartyDep}`); + + const localInstallPath = pathJoin( + ...[ + rootDirPath, + "node_modules", + ...(commonThirdPartyDep.startsWith("@") + ? commonThirdPartyDep.split("/") + : [commonThirdPartyDep]) + ] + ); + + execYarnLink({ "cwd": localInstallPath }); +}); + +commonThirdPartyDeps.forEach(commonThirdPartyDep => + testAppPaths.forEach(testAppPath => + execYarnLink({ + "cwd": testAppPath, + "targetModuleName": commonThirdPartyDep + }) + ) +); + +console.log("=== Linking in house dependencies ==="); + +execYarnLink({ "cwd": pathJoin(rootDirPath, "dist") }); + +testAppPaths.forEach(testAppPath => + execYarnLink({ + "cwd": testAppPath, + "targetModuleName": JSON.parse( + fs.readFileSync(pathJoin(rootDirPath, "package.json")).toString("utf8") + )["name"] + }) +); + +export {}; diff --git a/src/scripts/yarn-link.ts b/src/scripts/link-in-integration-apps.ts similarity index 100% rename from src/scripts/yarn-link.ts rename to src/scripts/link-in-integration-apps.ts