Deprecate tags.json (#896)

* Deprecates tags.json and icons.json

* Removed tags.json dependency from Figma plugin

* Add JSON descriptor information to readme

* Restore packages/index.tsx

* Update packages/lucide-figma/src/api/fetchIcons.ts

Add multiple fetches to `Promise.all`

* Added caching to API endpoints

* Updates pnpm-lock.yaml

* Add tags to static

* Trigger site build

* Added prebuild script to generate api caches at build time

* Migrated NextCache function from arrow to regular to simplify markup

* test if contents are read from cache

* Add cache clear to prebuild

* removes debug object

---------

Co-authored-by: Karsa <karsa@karsa.org>
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>

scripts/addMissingIconJsonFiles.mjs

@@ -0,0 +1,21 @@
+import path from 'path';
+import {getCurrentDirPath, readAllMetadata, readSvgDirectory, writeFile} from './helpers.mjs';
+
+const currentDir = getCurrentDirPath(import.meta.url);
+const ICONS_DIR = path.resolve(currentDir, '../icons');
+const icons = readAllMetadata(ICONS_DIR);
+
+const svgFiles = readSvgDirectory(ICONS_DIR);
+
+const iconNames = svgFiles.map((icon) => icon.split('.')[0]);
+
+iconNames.forEach(iconName => {
+  if (typeof icons[iconName] === 'undefined') {
+    const iconContent = JSON.stringify({
+      "$schema": "../icon.schema.json",
+      "tags": [],
+      "categories": []
+    }, null, 2);
+    writeFile(iconContent, `${iconName}.json`, path.resolve(currentDir, '..'));
+  }
+});

scripts/addMissingKeysToTags.mjs

@@ -1,42 +0,0 @@
-import path from 'path';
-import tags from '../tags.json' assert { type: 'json' };
-import { readSvgDirectory, writeFile, getCurrentDirPath } from './helpers.mjs';
-
-const currentDir = getCurrentDirPath(import.meta.url);
-const ICONS_DIR = path.resolve(currentDir, '../icons');
-
-console.log(`Read all tags`);
-
-const svgFiles = readSvgDirectory(ICONS_DIR);
-
-const iconNames = svgFiles.map((icon) => icon.split('.')[0]);
-
-const iconTags = iconNames
-  .map((iconName) => ({
-    name: iconName,
-    tags: tags[iconName] || [],
-  }))
-  .sort((a, b) => {
-    const nameA = a.name;
-    const nameB = b.name;
-
-    if (nameA < nameB) {
-      return -1;
-    }
-    if (nameA > nameB) {
-      return 1;
-    }
-
-    // names must be equal
-    return 0;
-  });
-
-const newTags = iconTags.reduce((acc, { name, tags }) => {
-  acc[name] = tags;
-
-  return acc;
-}, {});
-
-const tagsContent = JSON.stringify(newTags, null, 2);
-
-writeFile(tagsContent, 'tags.json', path.resolve(currentDir, '..'));

scripts/checkIconsAndCategories.mjs

@@ -1,50 +1,51 @@
 import path from 'path';
-import icons from '../icons.json' assert { type: 'json' };
-import { readSvgDirectory, getCurrentDirPath } from './helpers.mjs';
+import { readSvgDirectory, getCurrentDirPath, readAllMetadata } from './helpers.mjs';
 
 const currentDir = getCurrentDirPath(import.meta.url)
 const ICONS_DIR = path.resolve(currentDir, '../icons');
+const icons = readAllMetadata(ICONS_DIR);
+const CATEGORIES_DIR = path.resolve(currentDir, '../categories');
+const categories = readAllMetadata(CATEGORIES_DIR);
 
 console.log(`Read all icons`);
 
 const svgFiles = readSvgDirectory(ICONS_DIR);
-
 const iconNames = svgFiles.map(icon => icon.split('.')[0]);
 
 let error = false;
 
 iconNames.forEach(iconName => {
-  if (typeof icons.icons[iconName] === 'undefined') {
-    console.error(`'${iconName}.svg' is not present in 'icons.json'.`);
+  if (typeof icons[iconName] === 'undefined') {
+    console.error(`'${iconName}.svg' does not have a matching JSON file.`);
     error = true;
   }
 });
 
-Object.keys(icons.icons).forEach(iconName => {
-  const icon = icons.icons[iconName];
+Object.keys(icons).forEach(iconName => {
+  const icon = icons[iconName];
   if (iconNames.indexOf(iconName) === -1) {
     console.error(`'${iconName}.svg' does not exist.`);
     error = true;
   }
   icon.categories.forEach(categoryName => {
-    if (typeof icons.categories[categoryName] === 'undefined') {
+    if (typeof categories[categoryName] === 'undefined') {
       console.error(`Icon '${iconName}' refers to the non-existing category '${categoryName}'.`);
       error = true;
     }
   });
 });
 
-Object.keys(icons.categories).forEach(categoryName => {
-  const category = icons.categories[categoryName];
+Object.keys(categories).forEach(categoryName => {
+  const category = categories[categoryName];
   if (!category.icon) {
     console.error(`Category '${categoryName}' does not use an icon '${category.icon}'.`);
     error = true;
-  } else if (typeof icons.icons[category.icon] === 'undefined') {
+  } else if (typeof icons[category.icon] === 'undefined') {
     console.error(`Category '${categoryName}' uses the non-existing icon '${category.icon}'.`);
     error = true;
   }
 });
 
 if (error) {
-  throw new Error('At least one error in icons.json prevents from committing changes.');
+  throw new Error('At least one error in icon JSONs prevents from committing changes.');
 }

scripts/helpers.mjs

@@ -70,6 +70,30 @@ export const appendFile = (content, fileName, outputDirectory) =>
 export const writeFile = (content, fileName, outputDirectory) =>
   fs.writeFileSync(path.join(outputDirectory, fileName), content, 'utf-8');
 
+/**
+ * Reads metadata from the icons/categories directories
+ *
+ * @param {string} directory
+ * @returns {object} A map of icon or category metadata
+ */
+export const readAllMetadata = (directory) =>
+  fs.readdirSync(directory).filter((file) => path.extname(file) === '.json').reduce(
+    (acc, fileName, i) => {
+      acc[path.basename(fileName, '.json')] = readMetadata(fileName, directory);
+      return acc;
+    }, {}
+  );
+
+/**
+ * Reads metadata for an icon or category
+ *
+ * @param {string} fileName
+ * @param {string} directory
+ * @returns {object} The metadata for the icon or category
+ */
+export const readMetadata = (fileName, directory) =>
+  JSON.parse(fs.readFileSync(path.join(directory, fileName), 'utf-8'));
+
 /**
  * reads the icon directory
  *

scripts/migrateCategoriesToIcons.mjs

@@ -1,16 +1,19 @@
 import path from 'path';
-import icons from '../icons.json' assert { type: 'json' };
 import categories from '../categories.json' assert { type: 'json' };
-import { mergeArrays, writeFile, getCurrentDirPath } from './helpers.mjs';
+import { mergeArrays, writeFile, readAllMetadata, getCurrentDirPath } from './helpers.mjs';
 
 const currentDir = getCurrentDirPath(import.meta.url)
+const ICONS_DIR = path.resolve(currentDir, '../icons');
+const icons = readAllMetadata(ICONS_DIR);
 
 Object.keys(categories).forEach(categoryName => {
   categories[categoryName].forEach(iconName => {
-    mergeArrays(icons.icons[iconName].categories, [categoryName]);
+    icons[iconName].categories = mergeArrays(icons[iconName].categories, [categoryName]);
   });
 });
 
-const iconsContent = JSON.stringify(icons, null, 2);
+Object.keys(icons).forEach(iconName => {
+  const iconContent = JSON.stringify(icons[iconName], null, 2);
+  writeFile(iconContent, `${iconName}.json`, path.resolve(currentDir, '../icons'));
+})
 
-writeFile(iconsContent, 'icons.json', path.resolve(currentDir, '..'));

scripts/migrateIconsToCategories.mjs

@@ -1,12 +1,13 @@
 import path from 'path';
-import icons from '../icons.json' assert { type: 'json' };
-import { writeFile, getCurrentDirPath } from './helpers.mjs';
+import { writeFile, getCurrentDirPath, readAllMetadata } from './helpers.mjs';
 
 const currentDir = getCurrentDirPath(import.meta.url)
+const ICONS_DIR = path.resolve(currentDir, '../icons');
+const icons = readAllMetadata(ICONS_DIR);
 
 const newCategories = {};
-Object.keys(icons.icons).forEach(iconName => {
-  icons.icons[iconName].categories.forEach(categoryName => {
+Object.keys(icons).forEach(iconName => {
+  icons[iconName].categories.forEach(categoryName => {
     newCategories[categoryName] = newCategories[categoryName] || [];
     newCategories[categoryName].push(iconName);
   });

scripts/migrateIconsToJsonFiles.mjs

@@ -1,23 +0,0 @@
-import path from 'path';
-import icons from '../icons.json' assert { type: 'json' };
-import { writeFile, getCurrentDirPath } from './helpers.mjs';
-
-const currentDir = getCurrentDirPath(import.meta.url)
-
-Object.keys(icons.icons).forEach(iconName => {
-  const icon = {
-    "$schema": "../icon.schema.json",
-    ...icons.icons[iconName]
-  };
-  const iconContent = JSON.stringify(icon, null, 2);
-  writeFile(iconContent, 'icons/'+iconName+'.json', path.resolve(currentDir, '..'));
-});
-
-Object.keys(icons.categories).forEach(categoryName => {
-  const category = {
-    "$schema": "../category.schema.json",
-    ...icons.categories[categoryName]
-  };
-  const categoryContent = JSON.stringify(category, null, 2);
-  writeFile(categoryContent, 'categories/'+categoryName+'.json', path.resolve(currentDir, '..'));
-});

scripts/migrateIconsToTags.mjs

@@ -1,44 +1,17 @@
 import path from 'path';
-import tags from '../tags.json' assert { type: 'json' };
-import icons from '../icons.json' assert { type: 'json' };
-import { readSvgDirectory, writeFile, mergeArrays, getCurrentDirPath } from './helpers.mjs';
+import { writeFile, getCurrentDirPath, readAllMetadata } from './helpers.mjs';
 
-const currentDir = getCurrentDirPath(import.meta.url)
+const currentDir = getCurrentDirPath(import.meta.url);
 const ICONS_DIR = path.resolve(currentDir, '../icons');
+const icons = readAllMetadata(ICONS_DIR);
 
-console.log(`Read all icons`);
+const tags = Object.keys(icons)
+  .sort()
+  .reduce((acc, iconName) => {
+    acc[iconName] = icons[iconName].tags;
+    return acc;
+  }, {});
 
-const svgFiles = readSvgDirectory(ICONS_DIR);
+const tagsContent = JSON.stringify(tags, null, 2);
 
-const iconNames = svgFiles.map(icon => icon.split('.')[0]);
-
-const iconList = iconNames
-  .map(iconName => ({
-    name: iconName,
-    icon: icons.icons[iconName] || { tags: [] },
-    tags: tags[iconName] || [],
-  }))
-  .sort((a, b) => {
-    const nameA = a.name;
-    const nameB = b.name;
-
-    if (nameA < nameB) {
-      return -1;
-    }
-    if (nameA > nameB) {
-      return 1;
-    }
-
-    // names must be equal
-    return 0;
-  });
-
-const newTags = iconList.reduce((acc, { name, icon, tags }) => {
-  acc[name] = mergeArrays(icon.tags, tags);
-
-  return acc;
-}, {});
-
-const tagsContent = JSON.stringify(newTags, null, 2);
-
-writeFile(tagsContent, 'tags.json', path.resolve(currentDir, '..'));
+writeFile(tagsContent, 'tags.json', path.resolve(process.cwd()));

scripts/migrateTagsToIcons.mjs

@@ -1,47 +1,21 @@
 import path from 'path';
 import tags from '../tags.json' assert { type: 'json' };
-import icons from '../icons.json' assert { type: 'json' };
-import { readSvgDirectory, writeFile, mergeArrays, getCurrentDirPath } from './helpers.mjs';
+import { readSvgDirectory, readAllMetadata, writeFile, mergeArrays, getCurrentDirPath } from './helpers.mjs';
 
 const currentDir = getCurrentDirPath(import.meta.url)
 const ICONS_DIR = path.resolve(currentDir, '../icons');
-
-console.log(`Read all icons`);
-
+const icons = readAllMetadata(ICONS_DIR);
 const svgFiles = readSvgDirectory(ICONS_DIR);
 
-const iconNames = svgFiles.map(icon => icon.split('.')[0]);
+const iconNames = svgFiles.map((icon) => icon.split('.')[0]);
 
-const iconList = iconNames
-  .map(iconName => ({
-    name: iconName,
-    icon: icons.icons[iconName] || { tags: [], categories: [] },
-    tags: tags[iconName] || [],
-  }))
-  .sort((a, b) => {
-    const nameA = a.name;
-    const nameB = b.name;
-
-    if (nameA < nameB) {
-      return -1;
-    }
-    if (nameA > nameB) {
-      return 1;
-    }
-
-    // names must be equal
-    return 0;
-  });
-
-const newIcons = icons;
-
-newIcons.icons = iconList.reduce((acc, { name, icon, tags }) => {
-  acc[name] = icon;
-  acc[name].tags = mergeArrays(icon.tags, tags);
-
-  return acc;
-}, {});
-
-const iconsContent = JSON.stringify(newIcons, null, 2);
-
-writeFile(iconsContent, 'icons.json', path.resolve(currentDir, '..'));
+iconNames.forEach(iconName => {
+  icons[iconName] = icons[iconName] || {
+    "$schema": "../icon.schema.json",
+    "tags": [],
+    "categories": []
+  };
+  icons[iconName].tags = mergeArrays(icons[iconName].tags, tags[iconName]);
+  const iconContent = JSON.stringify(icons[iconName], null, 2);
+  writeFile(iconContent, `${iconName}.json`, path.resolve(currentDir, '../icons'));
+})