Refactor build script

Author: garronej

src/bin/README.md

@@ -0,0 +1 @@
+Here are the scripts exposed as utility to the user of `react-dsfr`

src/scripts/README.md

@@ -0,0 +1,2 @@
+In this directory are the scripts that are run at build time.  
+We run them directly using `ts-node`.

src/scripts/build.ts

@@ -29,7 +29,9 @@ import { assert } from "tsafe/assert";
 
     const nodeModuleDirPath = pathJoin(projectRootDirPath, "node_modules");
 
-    fs.cpSync(pathJoin(nodeModuleDirPath, "@gouvfr", "dsfr", "dist"), dsfrDirPath, {
+    const gouvFrDsfrDistDirPath = pathJoin(nodeModuleDirPath, "@gouvfr", "dsfr", "dist");
+
+    fs.cpSync(gouvFrDsfrDistDirPath, dsfrDirPath, {
         "recursive": true
     });
 
@@ -43,21 +45,16 @@ import { assert } from "tsafe/assert";
         )
     );
 
+    const icons = await collectIcons({
+        "remixiconDirPath": pathJoin(nodeModuleDirPath, "remixicon"),
+        "iconsCssRawCode": fs
+            .readFileSync(pathJoin(dsfrDirPath, "utility", "icons", "icons.css"))
+            .toString("utf8")
+    });
+
     fs.writeFileSync(
         pathJoin(dsfrDirPath, pathOfIconsJson),
-        Buffer.from(
-            JSON.stringify(
-                await collectIcons({
-                    "remixiconDirPath": pathJoin(nodeModuleDirPath, "remixicon"),
-                    "iconsCssRawCode": fs
-                        .readFileSync(pathJoin(dsfrDirPath, "utility", "icons", "icons.css"))
-                        .toString("utf8")
-                }),
-                null,
-                2
-            ),
-            "utf8"
-        )
+        Buffer.from(JSON.stringify(icons, null, 2), "utf8")
     );
 
     const distDirPath = pathJoin(projectRootDirPath, "dist");
@@ -66,7 +63,13 @@ import { assert } from "tsafe/assert";
         fs.rmSync(distDirPath, { "recursive": true, "force": true });
     }
 
-    cssToTs();
+    cssToTs({
+        icons,
+        "generatedDirPath": pathJoin(projectRootDirPath, "src", "lib", "generatedFromCss"),
+        "rawDsfrCssCode": fs
+            .readFileSync(pathJoin(gouvFrDsfrDistDirPath, "dsfr.css"))
+            .toString("utf8")
+    });
 
     await tsc({
         "tsconfigDirPath": pathJoin(projectRootDirPath, "src", "bin"),
@@ -88,8 +91,7 @@ import { assert } from "tsafe/assert";
         "doWatch": false
     });
 
-    //NOTE: From here it's only for local linking, required for storybook and
-    // running integration apps.
+    //NOTE: From here it's only for local linking, required for storybook and running integration apps.
     if (!args.npm) {
         fs.writeFileSync(
             pathJoin(distDirPath, "package.json"),

src/scripts/cssToTs/cssToTs.ts

@@ -8,22 +8,19 @@ import { generateClassNamesTsCode } from "./classNames";
 import * as fs from "fs";
 import { join as pathJoin, basename as pathBasename, relative as pathRelative } from "path";
 import type { Icon } from "../../bin/only-include-used-icons";
-import { pathOfIconsJson } from "../../bin/only-include-used-icons";
 
-export function cssToTs() {
-    const projectRoot = getProjectRoot();
-
-    const dsfrDistDirPath = pathJoin(projectRoot, "dsfr");
-
-    const rawCssCode = fs.readFileSync(pathJoin(dsfrDistDirPath, "dsfr.css")).toString("utf8");
-
-    const generatedDirPath = pathJoin(projectRoot, "src", "lib", "generatedFromCss");
+export function cssToTs(params: {
+    rawDsfrCssCode: string;
+    generatedDirPath: string;
+    icons: Icon[];
+}) {
+    const { rawDsfrCssCode, generatedDirPath, icons } = params;
 
     fs.mkdirSync(generatedDirPath, { "recursive": true });
 
     const warningMessage = [
         `// This file is generated automatically by ${pathRelative(
-            projectRoot,
+            getProjectRoot(),
             __filename
         )}, please don't edit.`
     ].join("\n");
@@ -36,7 +33,7 @@ export function cssToTs() {
             [
                 warningMessage,
                 ``,
-                generateGetColorOptionsTsCode(rawCssCode),
+                generateGetColorOptionsTsCode(rawDsfrCssCode),
                 ``,
                 `export type ColorOptions = ReturnType<typeof getColorOptions>;`,
                 ``
@@ -55,7 +52,7 @@ export function cssToTs() {
                     ""
                 )}";`,
                 ``,
-                generateGetColorDecisionsTsCode(rawCssCode),
+                generateGetColorDecisionsTsCode(rawDsfrCssCode),
                 ``,
                 `export type ColorDecisions = ReturnType<typeof getColorDecisions>;`,
                 ``
@@ -66,7 +63,10 @@ export function cssToTs() {
 
     fs.writeFileSync(
         pathJoin(generatedDirPath, "breakpoints.ts"),
-        Buffer.from([warningMessage, ``, generateBreakpointsTsCode(rawCssCode)].join("\n"), "utf8")
+        Buffer.from(
+            [warningMessage, ``, generateBreakpointsTsCode(rawDsfrCssCode)].join("\n"),
+            "utf8"
+        )
     );
 
     fs.writeFileSync(
@@ -76,7 +76,7 @@ export function cssToTs() {
                 warningMessage,
                 `import { breakpoints } from "../breakpoints";`,
                 ``,
-                generateTypographyTsCode(rawCssCode),
+                generateTypographyTsCode(rawDsfrCssCode),
                 ``
             ].join("\n"),
             "utf8"
@@ -85,7 +85,10 @@ export function cssToTs() {
 
     fs.writeFileSync(
         pathJoin(generatedDirPath, "spacing.ts"),
-        Buffer.from([warningMessage, ``, generateSpacingTsCode(rawCssCode), ``].join("\n"), "utf8")
+        Buffer.from(
+            [warningMessage, ``, generateSpacingTsCode(rawDsfrCssCode), ``].join("\n"),
+            "utf8"
+        )
     );
 
     fs.writeFileSync(
@@ -95,23 +98,13 @@ export function cssToTs() {
                 warningMessage,
                 ``,
                 generateClassNamesTsCode({
-                    rawCssCode,
-                    ...(() => {
-                        const icons: Icon[] = JSON.parse(
-                            fs
-                                .readFileSync(pathJoin(dsfrDistDirPath, pathOfIconsJson))
-                                .toString("utf8")
-                        );
-
-                        return {
-                            "dsfrIconClassNames": icons
-                                .filter(({ prefix }) => prefix === "fr-icon-")
-                                .map(({ iconId, prefix }) => `${prefix}${iconId}`),
-                            "remixiconClassNames": icons
-                                .filter(({ prefix }) => prefix === "ri-")
-                                .map(({ iconId, prefix }) => `${prefix}${iconId}`)
-                        };
-                    })()
+                    "rawCssCode": rawDsfrCssCode,
+                    "dsfrIconClassNames": icons
+                        .filter(({ prefix }) => prefix === "fr-icon-")
+                        .map(({ iconId, prefix }) => `${prefix}${iconId}`),
+                    "remixiconClassNames": icons
+                        .filter(({ prefix }) => prefix === "ri-")
+                        .map(({ iconId, prefix }) => `${prefix}${iconId}`)
                 }),
                 ``
             ].join("\n"),