icons pack

.yarnrc.yml

@@ -4,4 +4,4 @@ npmScopes:
   fortawesome:
     npmAlwaysAuth: true
     npmRegistryServer: 'https://npm.fontawesome.com/'
-    npmAuthToken: ${FONTAWESOME_PACKAGE_TOKEN}
+    npmAuthToken: ${FONTAWESOME_PACKAGE_TOKEN:-}

package.json

@@ -12,8 +12,5 @@
     "@biomejs/biome": "1.8.2",
     "lefthook": "^1.6.12",
     "turbo": "^2.0.1"
-  },
-  "dependencies": {
-    "filesize": "^10.1.6"
   }
 }

packages/components/package.json

@@ -24,12 +24,6 @@
     "@codemirror/lang-javascript": "^6.2.2",
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/view": "^6.28.4",
-    "@fortawesome/fontawesome-svg-core": "^6.5.2",
-    "@fortawesome/free-brands-svg-icons": "^6.5.2",
-    "@fortawesome/free-solid-svg-icons": "^6.5.2",
-    "@fortawesome/pro-regular-svg-icons": "^6.5.2",
-    "@fortawesome/pro-solid-svg-icons": "^6.5.2",
-    "@fortawesome/react-fontawesome": "^0.2.2",
     "@hookform/resolvers": "^3.9.0",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-avatar": "^1.0.4",

packages/icons/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@rivet-gg/icons",
+  "main": "index.js",
+  "module": "index.js",
+  "version": "1.0.0",
+  "sideEffects": false,
+  "files": ["index.js", "index.d.ts", "scripts", "manifest.json", "src"],
+  "scripts": {
+    "postinstall": "node scripts/postinstall.js"
+  },
+  "types": "index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./index.js",
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "default": "./index.js"
+    },
+    "./index": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "require": "./index.js",
+      "default": "./index.js"
+    },
+    "./index.js": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "require": "./index.js",
+      "default": "./index.js"
+    }
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-brands-svg-icons": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "dedent": "^1.5.3",
+    "local-pkg": "^0.5.0"
+  },
+  "peerDependencies": {
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "@yarnpkg/types": "^4.0.0"
+  }
+}

packages/icons/scripts/generateManifest.js

@@ -0,0 +1,67 @@
+// @ts-check
+const fs = require("node:fs");
+const { getPackageInfo } = require("local-pkg");
+
+const icons = new Set();
+
+function faCamelCase(str) {
+  const [firstLetter, ...restLetters] = str.replace(/-./g, (g) =>
+    g[1].toUpperCase(),
+  );
+  return `fa${[firstLetter.toUpperCase(), ...restLetters].join("")}`;
+}
+
+async function registerIcons(iconModuleName) {
+  const info = await getPackageInfo(iconModuleName);
+
+  if (!info) {
+    console.error("Could not find package", iconModuleName);
+    return;
+  }
+
+  const { rootPath } = info;
+
+  const files = await fs.promises.readdir(rootPath);
+
+  const iconFiles = files.filter(
+    (file) => file.startsWith("fa") && file.endsWith(".js"),
+  );
+
+  const iconsModule = require(iconModuleName);
+
+  const foundIcons = [];
+
+  for (const iconFile of iconFiles) {
+    const iconName = iconFile.replace(".js", "");
+    const iconDefinition = iconsModule[iconName];
+
+    const aliases = iconDefinition.icon?.[2].filter(
+      (alias) => typeof alias === "string",
+    );
+
+    if (
+      icons.has(iconDefinition.iconName) ||
+      aliases.some((alias) => icons.has(alias))
+    ) {
+      continue;
+    }
+
+    foundIcons.push({ icon: iconName, aliases: aliases.map(faCamelCase) });
+  }
+
+  return {
+    [iconModuleName]: { icons: foundIcons, prefix: iconsModule.prefix },
+  };
+}
+
+async function generateManifest() {
+  const manifest = {
+    ...(await registerIcons("@fortawesome/free-solid-svg-icons")),
+    ...(await registerIcons("@fortawesome/free-brands-svg-icons")),
+    ...(await registerIcons("@fortawesome/pro-solid-svg-icons")),
+  };
+
+  fs.writeFileSync("./manifest.json", JSON.stringify(manifest));
+}
+
+generateManifest().catch(() => process.exit(1));

packages/icons/scripts/postinstall.js

@@ -0,0 +1,89 @@
+const { isPackageExists } = require("local-pkg");
+const fs = require("node:fs");
+const dedent = require("dedent");
+const { spawnSync } = require("node:child_process");
+const { join } = require("node:path");
+const manifest = require("./../manifest.json");
+
+if (
+  !isPackageExists("@fortawesome/pro-solid-svg-icons") &&
+  process.env.FONTAWESOME_PACKAGE_TOKEN
+) {
+  fs.writeFileSync(
+    "./src/.yarnrc.yml",
+    dedent`
+    nodeLinker: node-modules
+
+    npmScopes:
+      fortawesome:
+          npmAlwaysAuth: true
+          npmRegistryServer: 'https://npm.fontawesome.com/'
+          npmAuthToken: \${FONTAWESOME_PACKAGE_TOKEN}
+      `,
+  );
+
+  fs.writeFileSync("./src/yarn.lock", "");
+
+  spawnSync("yarn", ["add", "@fortawesome/pro-solid-svg-icons"], {
+    stdio: "inherit",
+    cwd: join(process.cwd(), "src"),
+  });
+}
+
+const iconPacks = Object.entries(manifest)
+  .filter(([pkg]) => isPackageExists(pkg))
+  .map(([pkg, { prefix }]) => `convertIconPack(require("${pkg}").${prefix})`)
+  .join(", ");
+
+const banner = dedent`
+  // This file is generated by scripts/postinstall.js
+  // Do not modify this file directly
+  // ${isPackageExists("@fortawesome/pro-solid-svg-icons") ? "This file includes pro icons" : "This file does not include pro icons, all pro icons are replaced with square icon. To use pro icons, please add FONTAWESOME_PACKAGE_TOKEN to your environment and rebuild this package."}
+`;
+
+let jsSource = dedent`
+  ${banner}
+  module.exports = {};
+  function convertIconPack(pack) {
+    Object.fromEntries(Object.entries(pack).map(([iconName, icon]) => [iconName, { ...icon, prefix: 'fas' }]));
+  }
+  // module.exports.iconPack = [${iconPacks}];
+`;
+
+for (const [pkg, { icons }] of Object.entries(manifest)) {
+  const pkgExists = isPackageExists(pkg);
+
+  for (const { icon, aliases } of icons) {
+    if (pkgExists) {
+      jsSource += `module.exports.${icon} = require("${pkg}/${icon}");\n`;
+    } else {
+      jsSource += `module.exports.${icon} = require("@fortawesome/free-solid-svg-icons/faSquare");\n`;
+    }
+    for (const alias of aliases) {
+      if (alias === icon) {
+        continue;
+      }
+      jsSource += `module.exports.${alias} = module.exports.${icon};\n`;
+    }
+  }
+}
+
+fs.writeFileSync("index.js", jsSource);
+
+let tsSource = dedent`
+  import { IconDefinition, IconPack } from "@fortawesome/fontawesome-common-types";
+  export {};
+  export const iconPack: IconPack;
+`;
+for (const [pkg, { icons }] of Object.entries(manifest)) {
+  for (const { icon, aliases } of icons) {
+    tsSource += `export const ${icon}: IconDefinition;\n`;
+    for (const alias of aliases) {
+      if (alias === icon) {
+        continue;
+      }
+      tsSource += `export const ${alias}: IconDefinition;\n`;
+    }
+  }
+}
+fs.writeFileSync("index.d.ts", tsSource);

packages/icons/src/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@rivet-gg/internal-icons",
+  "private": true,
+  "dependencies": {
+    "@fortawesome/pro-regular-svg-icons": "^6.6.0"
+  }
+}