Enable the module to be linked in other project (#55)

Author: garronej

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

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",

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 {};