generateGetColorDecisionsTsCode

Author: garronej

src/bin/css_to_ts/colorDecisions.ts

@@ -7,6 +7,8 @@ import css from "css";
 import { exclude } from "tsafe/exclude";
 import { is } from "tsafe/is";
 import { parseColorOptionName, getThemePath as getColorOptionThemePath } from "./colorOptions";
+import * as crypto from "crypto";
+import { multiReplace } from "../tools/multiReplace";
 
 const contexts = ["background", "text", "border", "artwork"] as const;
 
@@ -212,3 +214,63 @@ export function createParseColorDecision(params: {
 
     return { parseColorDecision };
 }
+
+export function generateGetColorDecisionsTsCode(colorDecisions: ColorDecision[]): string {
+    const obj: any = {};
+
+    const keyValues: Record<string, string> = {};
+
+    colorDecisions.forEach(colorDecision => {
+        const value = (() => {
+            const hash = crypto
+                .createHash("sha256")
+                .update(colorDecision.themePath.join(""))
+                .digest("hex");
+
+            keyValues[`"${hash}"`] = ["colorOptions", ...colorDecision.optionThemePath].join(".");
+
+            return hash;
+        })();
+
+        function req(obj: any, path: string[]): void {
+            const [propertyName, ...pathRest] = path;
+
+            if (pathRest.length === 0) {
+                obj[propertyName] = value;
+                return;
+            }
+
+            if (obj[propertyName] === undefined) {
+                obj[propertyName] = {};
+            }
+
+            req(obj[propertyName], pathRest);
+        }
+
+        req(obj, colorDecision.themePath);
+    });
+
+    return [
+        `export function getColorDecisions(`,
+        `    params: {`,
+        `        colorOptions: ColorOptions;`,
+        `    }`,
+        `) {`,
+        ``,
+        `    const { colorOptions } = params;`,
+        ``,
+        `    return {`,
+        multiReplace({
+            "input": JSON.stringify(obj, null, 2),
+            keyValues
+        })
+            .replace(/^{\n/, "")
+            .replace(/\n}$/, "")
+            .split("\n")
+            .map(line => line.replace(/^[ ]{2}/, ""))
+            .map(line => `        ${line}`)
+            .join("\n"),
+        `    } as const;`,
+        `}`
+    ].join("\n");
+}

src/test/bin/colorDecisions/generateGetColorDecisionsTsCode.test.ts

@@ -0,0 +1,80 @@
+import { generateGetColorDecisionsTsCode } from "../../../bin/css_to_ts/colorDecisions";
+import type { ColorDecision } from "../../../bin/css_to_ts/colorDecisions";
+import { assert } from "tsafe/assert";
+
+console.log(`Running test ${__filename}`);
+
+const input: ColorDecision[] = [
+    {
+        "themePath": ["background", "default", "normal", "grey", "hover"],
+        "optionThemePath": ["grey", "_1000_50", "hover"]
+    },
+    {
+        "themePath": ["background", "default", "normal", "grey", "default"],
+        "optionThemePath": ["grey", "_1000_50", "default"]
+    },
+    {
+        "themePath": ["border", "action", "low", "orangeTerreBattue", "default"],
+        "optionThemePath": ["orangeTerreBattue", "_850_200", "default"]
+    },
+    {
+        "themePath": ["background", "altRaised", "normal", "grey", "hover"],
+        "optionThemePath": ["grey", "_975_100", "hover"]
+    },
+    {
+        "themePath": ["background", "contrastOverlap", "normal", "grey", "default"],
+        "optionThemePath": ["grey", "_950_150", "default"]
+    }
+];
+
+const expected = `
+export function getColorDecisions(
+    params: {
+        colorOptions: ColorOptions;
+    }
+) {
+
+    const { colorOptions } = params;
+
+    return {
+        "background": {
+          "default": {
+            "normal": {
+              "grey": {
+                "hover": colorOptions.grey._1000_50.hover,
+                "default": colorOptions.grey._1000_50.default
+              }
+            }
+          },
+          "altRaised": {
+            "normal": {
+              "grey": {
+                "hover": colorOptions.grey._975_100.hover
+              }
+            }
+          },
+          "contrastOverlap": {
+            "normal": {
+              "grey": {
+                "default": colorOptions.grey._950_150.default
+              }
+            }
+          }
+        },
+        "border": {
+          "action": {
+            "low": {
+              "orangeTerreBattue": {
+                "default": colorOptions.orangeTerreBattue._850_200.default
+              }
+            }
+          }
+        }
+    } as const;
+}`.replace(/^\n/, "");
+
+const got = generateGetColorDecisionsTsCode(input);
+
+assert(got === expected);
+
+console.log("PASS");

src/test/bin/colorDecisions/index.ts

@@ -1,2 +1,3 @@
 import "./parseColorDecisionName.test";
 import "./parseColorDecision.test";
+import "./generateGetColorDecisionsTsCode.test";