[PLA-11816] upgrade/remove vulnerable dependencies (#596)

* remove unused blink-diff which depends on vuln in [email protected]
* delete unused dependency-cruiser script
* upgrade set-getter to 0.1.1 to fix vuln
* remove unused package optimist
* replace theo with custom gen-theo.ts script

The new script replaces theo, which was responsible for
converting tokens defined in Plasmic to .sass and .ts files
for usage in our code.

There were multiple problems with the theo package:
- It had a dependency on a vulnerable version of the optimist.
- It is no longer actively maintained.
- It did not handle duplicate token names.

GitOrigin-RevId: cc785fdbe595c621c748920d69abb902f312bc05

Author: jaslong

docs/contributing/platform/01-config-tooling.md

@@ -333,22 +333,6 @@ Some pointers:
   auto-scroll things into view (which we almost never want since there's no real
   scrolling in our app).
 
-## Debugging module graph
-
-Look at what modules are big (you may want to compare the results from
-before and after your commit):
-
-    yarn source-map-explorer build/static/js/canvas.js
-
-If you want to figure out how a particular module is getting included, use:
-
-    rm graph.json
-    bash tools/import-chains.bash
-
-import-chains.bash currently just works for canvas-entry.tsx (which is the
-entrypoint for the canvas.js bundle), but it can be easily updated to analyze a
-different entrypoint.
-
 ## Audit licenses of dependencies
 
 For node dependencies, do this from each project directory:

platform/wab/Makefile

@@ -24,11 +24,9 @@ src/wab/shared/model/classes.ts: src/wab/gen/modelPegParser.js src/wab/shared/mo
 src/wab/shared/model/classes-metas.ts: src/wab/gen/modelPegParser.js src/wab/shared/model/model-schema.ts tools/gen-models.ts src/wab/shared/model/model-generator.ts
 	yarn gen:models
 src/wab/styles/_tokens.sass: src/wab/styles/plasmic-tokens.theo.json
-	yarn run theo src/wab/styles/plasmic-tokens.theo.json --transform web --format sass --dest src/wab/styles
-	mv src/wab/styles/plasmic-tokens.theo.sass src/wab/styles/_tokens.sass
+	yarn gen:plasmic-tokens-sass
 src/wab/styles/_tokens.ts: src/wab/styles/plasmic-tokens.theo.json
-	yarn run theo src/wab/styles/plasmic-tokens.theo.json --transform web --format module.js --dest src/wab/styles
-	mv src/wab/styles/plasmic-tokens.theo.module.js src/wab/styles/_tokens.ts
+	yarn gen:plasmic-tokens-ts
 src/wab/styles/css-variables.ts: src/wab/styles/css-variables.json
 	node src/wab/styles/css-variables.gen.js
 src/wab/styles/css-variables.scss: src/wab/styles/css-variables.json

platform/wab/cypress/plugins/index.ts

@@ -18,7 +18,6 @@ require("cypress-log-to-output");
 
 const webpack = require("webpack");
 const wp = require("@cypress/webpack-preprocessor");
-const BlinkDiff = require("blink-diff");
 const fs = require("fs");
 const path = require("path");
 
@@ -93,57 +92,6 @@ module.exports = (on, config) => {
   // `config` is the resolved Cypress config
   on("file:preprocessor", wp(options));
 
-  on("after:screenshot", (details) => {
-    // If the screenshot was taken with name matching check-X, then we will
-    // compare it to a reference screenshot located at screenshot_refs/X (which
-    // should exist already).
-    if (!details.name || !details.name.startsWith("check-")) {
-      return;
-    }
-    const testImage = details.path;
-    const refImage = path.join(
-      __dirname,
-      "/../screenshotRefs/",
-      details.name + ".png"
-    );
-
-    console.log(
-      "Comparing screenshots:",
-      "\ntestImage:",
-      testImage,
-      "\n refImage:",
-      refImage
-    );
-
-    if (!fs.existsSync(refImage)) {
-      console.log("Reference image doesn't exist.");
-      return Promise.reject(false);
-    }
-
-    // An alternative image comparison library that seems good is resemblejs
-    // https://github.com/HuddleEng/Resemble.js
-    const diff = new BlinkDiff({
-      imageAPath: refImage,
-      imageBPath: testImage,
-      thresholdType: BlinkDiff.THRESHOLD_PERCENT,
-      threshold: 0.2, // allow 20% of pixels to differ
-    });
-
-    return new Promise((resolve, reject) => {
-      diff.run((error, result) => {
-        if (error) {
-          throw error;
-        } else {
-          if (diff.hasPassed(result.code)) {
-            resolve(true);
-          } else {
-            reject(false);
-          }
-        }
-      });
-    });
-  });
-
   on("task", {
     getFetchPolyfill() {
       return fetchPolyfill;

platform/wab/package.json

@@ -44,6 +44,8 @@
     "backend:debug": "debug=1 bash tools/backend-server.bash",
     "gen:models": "npm run run-ts -- tools/gen-models.ts",
     "gen:component-metas": "npm run run-ts -- tools/gen-react-meta.ts",
+    "gen:plasmic-tokens-sass": "npm run run-ts -- tools/gen-theo.ts src/wab/styles/plasmic-tokens.theo.json src/wab/styles/_tokens.sass",
+    "gen:plasmic-tokens-ts": "npm run run-ts -- tools/gen-theo.ts src/wab/styles/plasmic-tokens.theo.json src/wab/styles/_tokens.ts",
     "start-backend": "pm2 start ts-node -i 1 --wait-ready --listen-timeout 19999 --kill-timeout 7999 -- -T -P tsconfig.tools.json src/wab/server/main.ts",
     "perftool": "npm run run-ts -- tools/perf.ts",
     "build-css": "sass src/wab/styles/canvas/:dev-build/static/styles/canvas/",
@@ -161,7 +163,6 @@
     "@types/xmldom": "^0.1.30",
     "babel-jest": "^29.7.0",
     "babel-plugin-implicit-return": "^1.0.1",
-    "blink-diff": "^1.0.13",
     "concurrently": "^5.3.0",
     "cypress": "^13.4.0",
     "cypress-fail-fast": "^7.1.1",
@@ -171,7 +172,6 @@
     "cypress-real-events": "^1.13.0",
     "cypress-split": "^1.24.7",
     "depcheck": "^1.4.3",
-    "dependency-cruiser": "^9.21.6",
     "diff": "^4.0.2",
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.2",
@@ -188,7 +188,6 @@
     "less-loader": "^6.2.0",
     "less-vars-to-js": "^1.3.0",
     "monaco-editor-webpack-plugin": "7.1.0",
-    "optimist": "^0.6.1",
     "pegjs": "~0.10.0",
     "pegjs-coffee-plugin": "~0.3.0",
     "prando": "^6.0.1",
@@ -200,7 +199,6 @@
     "sucrase": "^3.35.0",
     "swc-loader": "^0.2.3",
     "terser": "^3.17.0",
-    "theo": "^8.1.5",
     "ts-loader": "^9.4.2",
     "tsx": "^3.13.0",
     "type-fest": "^4.15.0",

platform/wab/tools/depcruise-config.js

@@ -0,0 +1,71 @@
+import * as fs from "fs";
+import { groupBy } from "lodash";
+import { TheoToken } from "../src/wab/shared/codegen/style-tokens";
+
+function main() {
+  // Get command line arguments
+  const [inputFile, outputFile] = process.argv.slice(2);
+
+  // Read the tokens from the input theo JSON file
+  const tokens: TheoToken[] = JSON.parse(
+    fs.readFileSync(inputFile, "utf8")
+  ).props;
+
+  // Generate code based on output file extension
+  let output: string;
+  if (outputFile.endsWith(".sass")) {
+    output = generateOutput(
+      tokens,
+      toSassVarName,
+      (varName, cssValue) => `$${varName}: ${cssValue}`
+    );
+  } else if (outputFile.endsWith(".ts")) {
+    output = generateOutput(
+      tokens,
+      toTsVarName,
+      (varName, cssValue) => `export const ${varName} = "${cssValue}";`
+    );
+  } else {
+    throw new Error(`can only output .sass and .ts, not ${outputFile}`);
+  }
+
+  // Write output files
+  fs.writeFileSync(outputFile, output);
+  console.log(`✅ Generated ${outputFile}`);
+}
+
+function generateOutput(
+  tokens: TheoToken[],
+  toVarName: (tokenName: string) => string,
+  toCode: (varName: string, cssValue: string) => string
+): string {
+  return [...Object.entries(groupBy(tokens, (token) => toVarName(token.name)))]
+    .map(([varName, dupTokens]) => {
+      const code = toCode(varName, dupTokens[0].value);
+      if (dupTokens.length === 1) {
+        return code;
+      } else {
+        console.warn(`Token "${varName}" has ${dupTokens.length} duplicates`);
+        return code + ` // WARNING: ${dupTokens.length} duplicates`;
+      }
+    })
+    .map((line) => line + "\n")
+    .join("");
+}
+
+function toSassVarName(str: string): string {
+  return str
+    .replace(/([a-z])([A-Z])/g, "$1-$2") // Add hyphens between camelCase
+    .replace(/[^a-zA-Z0-9]+/g, "-")
+    .toLowerCase();
+}
+
+function toTsVarName(str: string): string {
+  // First convert to kebab style to normalize
+  const kebab = toSassVarName(str);
+
+  // Then convert to camelCase, handling numbers properly
+  return kebab.replace(/-([a-z0-9])/gi, (_, char) => char.toUpperCase());
+}
+
+main();