Version 1.1.0

* feat: ai two tone ajustment

* feat: workflow improvement

* fix: parity latest resolve.exports

* SSR fix, import default jsx

* fix: hydration mismatch with SSR

* Add title tag with SSR

* Change package.json beta.4

* 1.1.0 stable

.github/workflows/build-test.yml

@@ -0,0 +1,38 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: Node.js CI
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [16.14.0]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "npm"
+
+      - name: Clean install
+        run: yarn install --frozen-lockfile
+
+      - name: Update Submodules
+        run: yarn submodule
+
+      - name: Generate icons
+        run: yarn build
+
+      - name: Run all tests
+        run: yarn test

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn test:run

all_package.json

@@ -1,6 +1,6 @@
 {
   "name": "solid-icons-all",
-  "version": "1.0.12",
+  "version": "1.1.0",
   "description": "Bundle for Solid icons explorer",
   "author": "Ignacio Zsabo",
   "license": "MIT",

package.json

@@ -1,22 +1,22 @@
 {
   "name": "solid-icons",
-  "version": "1.0.12",
+  "version": "1.1.0",
   "description": "Modern solution for use icons on SolidJS",
   "author": "Ignacio Zsabo",
   "license": "MIT",
   "sideEffects": false,
-  "main": "./lib/index.js",
-  "types": "./lib/index.d.ts",
   "type": "module",
   "scripts": {
     "dev": "onchange -i -k 'src/build/**/*.ts' -- yarn build",
     "test": "vitest --config ./vitest.config.ts",
+    "test:run": "vitest run --config ./vitest.config.ts",
     "coverage": "vitest --config ./vitest.config.ts --coverage",
-    "submodule": "node --no-warnings --loader ts-node/esm --experimental-specifier-resolution=node ./src/build/submodule.ts",
+    "submodule": "git submodule update --init --recursive",
     "build": "node --no-warnings --loader ts-node/esm --experimental-specifier-resolution=node ./src/build/index.ts",
     "build:lib": "rollup --configPlugin @rollup/plugin-typescript -c",
     "build:all": "shx rm -rf ./dist_all && shx mkdir ./dist_all && yarn build --web && shx cp ./all_package.json ./dist_all/package.json",
-    "publish": "yarn build && npm publish ./dist"
+    "publish": "yarn build && npm publish ./dist",
+    "prepare": "husky install && yarn submodule"
   },
   "keywords": [
     "solidjs",
@@ -39,13 +39,15 @@
     "dotenv": "^16.0.3",
     "eslint": "^8.32.0",
     "eslint-config-prettier": "^8.6.0",
+    "husky": "^8.0.3",
     "jsdom": "^22.1.0",
+    "onchange": "^7.1.0",
     "prettier": "2.8.3",
     "rollup": "^3.10.0",
     "rollup-plugin-delete": "^2.0.0",
     "rollup-preset-solid": "^2.0.1",
     "shx": "^0.3.4",
-    "solid-js": "1.6.9",
+    "solid-js": "^1.7.12",
     "solid-testing-library": "^0.5.0",
     "svgo": "3.0.2",
     "ts-node": "^10.9.1",

rollup.config.ts

@@ -8,13 +8,16 @@ export default withSolid([
       file: "./dist/lib/index.js",
       format: "module",
     },
+    solidOptions: {
+      hydratable: true,
+    },
   },
   {
     input: "src/lib/index.tsx",
     mappingName: "lib",
     solidOptions: {
       generate: "ssr",
-      hydratable: false,
+      hydratable: true,
     },
     targets: ["cjs"],
     output: {

src/build/constants.ts

@@ -15,19 +15,23 @@ export const log = console.log;
 
 export const LIB_PACKAGE_JSON = /* javascript */ `{
   "main": "./index.cjs",
-  "module": "./index.js"
-}`;
-
-export const PACK_PACKAGE_JSON = /* javascript */ `{
-  "sideEffects": false,
-  "module": "./index.js"
+  "module": "./index.jsx",
+  "solid": "./index.jsx",
+  "exports": {
+    ".": {
+      "default": "./index.jsx",
+      "solid": "./index.jsx"
+    }
+  }
 }`;
 
 export const ROOT_EXPORT = {
   browser: "./lib/index.js",
   types: "./lib/index.d.ts",
   node: "./lib/index.cjs",
-  default: "./lib/index.cjs",
+  default: "./lib/index.jsx",
+  solid: "./lib/index.jsx",
+  astro: "./lib/index.jsx",
 };
 
 export const includedFiles = ["LICENSE", "README.md"];
@@ -57,3 +61,5 @@ export const NORMALIZE_FILE_NAME = {
   BI: "bi",
   OC: "oc",
 };
+
+export const EXPORTS_KEYS = ["worker", "deno", "node", "development"];

src/build/file-types.ts → src/build/file-templates.ts

@@ -36,7 +36,7 @@ export const fileTypes = [
     type: "mjs",
     template: (iconContent: IconContent) => moduleTemplate(iconContent),
     // eslint-disable-next-line quotes, @typescript-eslint/quotes
-    header: /* javascript */ `import { IconTemplate } from "../lib/index.js";`,
+    header: /* javascript */ `import { IconTemplate } from "../lib/index.jsx";`,
     fileName: "index.js",
   },
   {

src/build/lib-files.ts

@@ -10,8 +10,9 @@ import {
   ROOT_PATH,
   ROOT_EXPORT,
   LIB_PACKAGE_JSON,
+  EXPORTS_KEYS,
 } from "./constants";
-import { fileTypes } from "./file-types";
+import { fileTypes } from "./file-templates";
 import { getFileByPath } from "./get-icons";
 import packages from "./packages.json" assert { type: "json" };
 import { PackageJSONExport, PackAttachedIcons, PackItem } from "./types";
@@ -31,34 +32,61 @@ function getPackageExports(
   previousValue: PackageJSONExport,
   current: PackItem
 ): PackageJSONExport {
-  const exportsPayload = JSON.parse(`{
-      "browser": "./${current.shortName}/index.js",
+  const exportsTemplate = JSON.parse(`{
+    "import": {
       "types": "./${current.shortName}/index.d.ts",
-      "node": "./${current.shortName}/index.cjs",
-      "default": "./${current.shortName}/index.cjs"
-    }`);
-
-  return { ...previousValue, [`./${current.shortName}`]: exportsPayload };
+      "default": "./${current.shortName}/index.js"
+    },
+    "require": "./${current.shortName}/index.cjs",
+    "browser": "./${current.shortName}/index.js",
+    "node": "./${current.shortName}/index.js",
+    "default": "./${current.shortName}/index.js",
+    "solid": "./${current.shortName}/index.js"
+  }`);
+
+  const runtimeExports = [
+    ...EXPORTS_KEYS.map((key) => ({
+      [key]: exportsTemplate,
+    })),
+    {
+      browser: {
+        development: exportsTemplate,
+        ...exportsTemplate,
+      },
+      ...exportsTemplate,
+    },
+  ];
+
+  return {
+    ...previousValue,
+    [`./${current.shortName}`]: Object.assign({}, ...runtimeExports),
+  };
 }
 
 function writeAssetsFiles() {
   includedFiles.forEach((file) => {
     fs.cpSync(`${ROOT_PATH}/${file}`, `${DIST_PATH}/${file}`);
   });
 
-  const packageJson = JSON.parse(getFileByPath(`${ROOT_PATH}/package.json`));
+  const packageDotJson = JSON.parse(getFileByPath(`${ROOT_PATH}/package.json`));
+
+  delete packageDotJson.devDependencies;
+  delete packageDotJson.scripts;
+  delete packageDotJson.type;
+  delete packageDotJson.engines;
+  packageDotJson.main = "./lib/index.cjs";
+  packageDotJson.types = "./lib/index.d.ts";
+  packageDotJson.module = "./lib/index.jsx";
+  packageDotJson.unpkg = "./lib/index.cjs";
 
-  delete packageJson.devDependencies;
-  delete packageJson.scripts;
-  delete packageJson.type;
-  packageJson.exports = {
+  packageDotJson.exports = {
     ["."]: ROOT_EXPORT,
     ...packages.reduce(getPackageExports, {}),
   };
 
   fs.appendFileSync(
     `${DIST_PATH}/package.json`,
-    JSON.stringify(packageJson, null, 2)
+    JSON.stringify(packageDotJson, null, 2)
   );
 }
 

src/build/optimize/index.ts

@@ -8,6 +8,16 @@ import { svgoConfig } from "./svgo-config";
 import { Output, optimize } from "svgo";
 import { NORMALIZE_PACK } from "../constants";
 
+const disablePlugins = (names: string[]) => {
+  return {
+    ...svgoConfig,
+    plugins: svgoConfig.plugins?.filter(
+      /** avoid type issue with `svgo` */
+      (plugin: any) => !names.includes(plugin.name)
+    ),
+  };
+};
+
 export async function optimizeContents(
   contents: string,
   shortName: string,
@@ -26,6 +36,13 @@ export async function optimizeContents(
       };
       optimizedFile = optimize(contents, tbSvgoConfig);
       break;
+    case NORMALIZE_PACK.AI:
+      if (path.includes("twotone")) {
+        optimizedFile = optimize(contents, disablePlugins(["convertColors"]));
+      } else {
+        optimizedFile = optimize(contents, svgoConfig);
+      }
+      break;
     default:
       optimizedFile = optimize(contents, svgoConfig);
       break;

src/build/optimize/normalize-packs.ts

@@ -1,3 +1,6 @@
+import { optimize } from "svgo";
+import { svgoConfig } from "./svgo-config";
+
 const hiReplacements = [
   {
     // Stroke `currentColor` by default
@@ -24,7 +27,7 @@ const tbReplacements = [
   },
 ];
 
-export function normalizeTb(iconData: string): string {
+export function normalizeTb(iconData: string) {
   let normalized = iconData;
 
   for (let i = 0; i < tbReplacements.length; i++) {
@@ -35,14 +38,14 @@ export function normalizeTb(iconData: string): string {
   return normalized;
 }
 
-export function normalizeRi(iconData: string): string {
+export function normalizeRi(iconData: string) {
   const regex = /<path/i;
   const replacement = '<path fill="currentColor"';
 
   return iconData.replace(regex, replacement);
 }
 
-export function normalizeOutline(iconData: string): string {
+export function normalizeOutline(iconData: string) {
   let normalized = iconData;
 
   for (let i = 0; i < hiReplacements.length; i++) {
@@ -53,13 +56,17 @@ export function normalizeOutline(iconData: string): string {
   return normalized;
 }
 
-export function normalizeTwoTone(iconData: string, path: string): string {
+export function normalizeTwoTone(iconData: string, path: string) {
   if (!path.includes("twotone")) {
-    return iconData;
+    return optimize(iconData, svgoConfig).data;
   }
 
-  const regex = /fill="currentColor"/i;
-  const replacement = 'fill="currentColor" fill-opacity="0.6"';
+  const baseColorRegex = /fill="#(333)"/gi;
+  const baseColorReplacement = 'fill="currentColor"';
+  const secondaryColorRegex = /fill="#(E6E6E6|D9D9D9|D8D8D8)"/gi;
+  const secondaryColorReplacement = 'fill="currentColor" fill-opacity="0.09"';
 
-  return iconData.replace(regex, replacement);
+  return iconData
+    .replace(baseColorRegex, baseColorReplacement)
+    .replace(secondaryColorRegex, secondaryColorReplacement);
 }

src/build/optimize/svgo-config.ts

@@ -110,6 +110,6 @@ export const svgoConfig: Config = {
       params: {
         attrs: ["data.*", "class", "xmlns"],
       },
-    },
-  ],
+    },
+  ],
 };

src/build/web-files.ts

@@ -45,6 +45,16 @@ export async function writeWebFiles(packs: PackAttachedIcons[]) {
   );
 
   packs.forEach(writeEachWebFiles);
+
+  const count = packs
+    .map((pack) => pack.icons.length)
+    .reduce((prev, crr) => Number(prev) + Number(crr), 0);
+
+  log(
+    chalk.white(`➕ ${count}`) +
+      chalk.dim(" icons generated") +
+      chalk.green(" ℹ️")
+  );
 }
 
 async function writeEachWebFiles(pack: PackAttachedIcons) {