feat(icons-material): export all icons in the index file

Author: juanrgm

.changeset/loud-brooms-know.md

@@ -0,0 +1,7 @@
+---
+"@suid/icons-material": minor
+---
+
+Export all icons in the index file
+
+Use `@suid/vite-plugin` for optimizing the imports.

packages/icons-material/.gitignore

@@ -1,4 +1,5 @@
 !lib
 lib/*
 !lib/*.jsx
+lib/index.jsx
 !lib/utils

packages/icons-material/package.json

@@ -11,6 +11,7 @@
     "material design",
     "icons"
   ],
+  "main": "index.jsx",
   "scripts": {
     "build": "tsc --build",
     "clean": "tsc --build --clean",

scripts/actions/genIconsMaterialSource.ts

@@ -10,6 +10,13 @@ import { format } from "prettier";
 
 const outPath = join(packagesPath, "icons-material/lib");
 
+export async function writeIndexFile(iconNames: string[]) {
+  const contents = iconNames
+    .map((v) => `export { default as ${v} } from "./${v}";`)
+    .join("\n");
+  await writeFile(join(outPath, "index.jsx"), contents);
+}
+
 async function renderComponentContents(name: string, children: string[]) {
   return format(
     `
@@ -44,6 +51,7 @@ async function genIconsMaterialSource(options: { version: string }) {
   const iconNames = new Set<string>();
 
   for (const fileName of fileNames) {
+    if (fileName === "index.jsx") continue;
     progressLog.add();
     const [name] = normalizeFileName(fileName).split(".");
     if (iconNames.has(name)) throw new Error(`Duplicated icon name: ${name}`);
@@ -66,6 +74,7 @@ async function genIconsMaterialSource(options: { version: string }) {
     const componentSource = await renderComponentContents(name, svgChildren);
     await writeFile(componentPath, componentSource);
   }
+  await writeIndexFile(Array.from(iconNames));
   progressLog.stop();
 }
 

scripts/actions/genIconsMaterialTyping.ts

@@ -1,39 +1,63 @@
-import { createProgressLog } from "./../util/cli";
+import { createProgressLog, ProgressLog } from "./../util/cli";
 import { readOptions } from "./../util/prettier";
 import { packagesPath } from "./../util/workspace";
+import { writeIndexFile } from "./genIconsMaterialSource";
 import { readdir, writeFile } from "fs/promises";
 import pLimit from "p-limit";
 import { join } from "path";
 import { format } from "prettier";
 
 const outPath = join(packagesPath, "icons-material/lib");
 
-async function genIconsMaterialTyping() {
-  const { name } = genIconsMaterialTyping;
+async function writeIndexTypingFile(
+  iconNames: string[],
+  progressLog: ProgressLog
+) {
+  const contents = [
+    `import SvgIcon from "@suid/material/SvgIcon";`,
+    `type C = typeof SvgIcon;`,
+    ...iconNames.map((v) => `export const ${v}: C;`),
+  ].join("\n");
+  progressLog.add();
+  await writeFile(join(outPath, "index.d.ts"), contents);
+}
 
-  const fileNames = (await readdir(outPath)).filter((v) => v.endsWith(".jsx"));
-  const progressLog = createProgressLog({
-    name,
-    total: fileNames.length,
-  });
+async function writeComponentTypingFiles(
+  iconNames: string[],
+  progressLog: ProgressLog
+) {
   const contents = format(`export { default } from "@suid/material/SvgIcon"`, {
     ...(await readOptions()),
     parser: "typescript",
   });
 
   const limit = pLimit(10);
-  const paths = fileNames.map((f) =>
-    join(outPath, f.replace(/.jsx$/, ".d.ts"))
-  );
+  const paths = iconNames.map((v) => join(outPath, `${v}.d.ts`));
 
-  const promises = paths.map((path) =>
+  return paths.map((path) =>
     limit(() => {
-      progressLog.add();
+      progressLog?.add();
       return writeFile(path, contents);
     })
   );
+}
+async function genIconsMaterialTyping() {
+  const { name } = genIconsMaterialTyping;
+
+  const iconNames = (await readdir(outPath))
+    .filter((v) => v !== "index.jsx" && v.endsWith(".jsx"))
+    .map((v) => v.replace(/.jsx$/, ""));
+
+  const progressLog = createProgressLog({
+    name,
+    total: iconNames.length + 1,
+  });
 
-  await Promise.all(promises);
+  await Promise.all([
+    ...(await writeComponentTypingFiles(iconNames, progressLog)),
+    writeIndexTypingFile(iconNames, progressLog),
+    writeIndexFile(iconNames),
+  ]);
   progressLog.stop();
 }
 

scripts/util/cli.ts

@@ -1,3 +1,8 @@
+export type ProgressLog = {
+  stop: () => void;
+  add: () => void;
+};
+
 export function createProgressLog(data: { name: string; total: number }) {
   let current = 0;
   console.time(data.name);