diff --git a/README.md b/README.md
index ff9c3e44..4cff6b68 100644
--- a/README.md
+++ b/README.md
@@ -16,7 +16,7 @@ Modern solution for use icons on SolidJS
- Icons Explorer | Example
+ Icons Explorer | Example
@@ -52,7 +52,7 @@ npm install solid-icons --save
## Usage
```jsx
-import { SiJavascript } from "solid-icons/si";
+import { SiJavascript } from "solid-icons/si/SiJavascript";
+ ${icon.contents}
+ {props.title && {props.title} }
+
+ );
+}`;
}
function typesTemplate(icon: IconContent) {
- return /* javascript */ `\nexport declare const ${icon.fileName}: IconTypes;`;
+ return /* typescript */ `\nexport declare function ${icon.fileName}(props: IconProps): JSX.Element`;
}
export const fileTypes = [
{
- type: "cjs",
- template: (iconContent: IconContent) => cjsTemplate(iconContent),
+ template: moduleTemplate,
// eslint-disable-next-line quotes, @typescript-eslint/quotes
- header: /* javascript */ `var IconTemplate = require('../lib/index.cjs').IconTemplate;`,
- fileName: "index.cjs",
+ header: /* javascript */ `import { mergeProps } from "../lib/index.js";
+`,
+ extension: ".jsx",
},
{
- type: "mjs",
- template: (iconContent: IconContent) => moduleTemplate(iconContent),
- // eslint-disable-next-line quotes, @typescript-eslint/quotes
- header: /* javascript */ `import { IconTemplate } from "../lib/index.js";`,
- fileName: "index.js",
- },
- {
- type: "types",
- template: (iconContent: IconContent) => typesTemplate(iconContent),
- // eslint-disable-next-line quotes, @typescript-eslint/quotes
- header: /* javascript */ `import type { IconTypes } from "../lib/index"\n`,
- fileName: "index.d.ts",
+ template: typesTemplate,
+ header: /* typescirpt */ `import { type JSX } from "solid-js";
+import { type IconProps } from "../lib/index";
+`,
+ extension: ".d.ts",
},
];
diff --git a/src/build/get-files.ts b/src/build/get-files.ts
index 348ade40..3e65fec5 100644
--- a/src/build/get-files.ts
+++ b/src/build/get-files.ts
@@ -1,16 +1,19 @@
-import fs from "fs";
+import fs from "fs-extra";
import path from "path";
import { ROOT_PATH } from "./constants";
-export function getPackFiles(dirPath: string, files: string[] = []): string[] {
- const paths = fs.readdirSync(dirPath);
+export async function getPackFiles(
+ dirPath: string,
+ files: string[] = []
+): Promise {
+ const paths = await fs.readdir(dirPath);
for (let current = 0; current < paths.length; current++) {
const file = paths[current];
if (fs.statSync(`${dirPath}/${file}`).isDirectory()) {
- files = getPackFiles(`${dirPath}/${file}`, files);
+ files = await getPackFiles(`${dirPath}/${file}`, files);
} else if (file.includes(".svg")) {
files.push(path.join(ROOT_PATH, dirPath, "/", file));
}
diff --git a/src/build/get-icon.ts b/src/build/get-icon.ts
new file mode 100644
index 00000000..2e6c24c5
--- /dev/null
+++ b/src/build/get-icon.ts
@@ -0,0 +1,36 @@
+import fs from "fs-extra";
+import { load } from "cheerio";
+import { worker } from "workerpool";
+
+import { formatFileName } from "./utils/file-name";
+import { IconContent, PackItem } from "./types";
+import { optimizeContents } from "./optimize";
+
+export const getIconContent = async (
+ path: string,
+ pack: PackItem
+): Promise => {
+ const rawFile = await fs.readFile(path, "utf-8");
+ const optimizeFile = await optimizeContents(rawFile, pack.shortName);
+
+ const $ = load(optimizeFile.data, { xmlMode: true });
+ const mountedElement = $("svg");
+
+ const { children, attribs } = mountedElement[0];
+
+ return {
+ fileName: formatFileName(path, pack),
+ contents: children
+ .reduce(
+ (prev: string[], current) =>
+ current.type === "tag" ? [...prev, $.html(current)] : prev,
+ []
+ )
+ .join(""),
+ svgAttribs: attribs,
+ };
+};
+
+worker({
+ getIconContent,
+});
diff --git a/src/build/get-icons.ts b/src/build/get-icons.ts
index f493dc2d..6df4aa9e 100644
--- a/src/build/get-icons.ts
+++ b/src/build/get-icons.ts
@@ -1,42 +1,20 @@
-import fs from "fs";
-import { load } from "cheerio";
-
import { getPackFiles } from "./get-files";
-import { formatFileName } from "./utils/file-name";
-import { optimizeContents } from "./optimize/index";
-import { IconContent, PackItem } from "./types";
-
-export const getFileByPath = (path: string) => fs.readFileSync(path, "utf8");
-
-const getIconContent = async (
- path: string,
- pack: PackItem
-): Promise => {
- const rawFile = getFileByPath(path);
- const optimizeFile = await optimizeContents(rawFile, pack.shortName);
-
- const $ = load(optimizeFile.data, { xmlMode: true });
- const mountedElement = $("svg");
-
- const { children, attribs } = mountedElement[0];
-
- return {
- fileName: formatFileName(path, pack),
- contents: children
- .reduce(
- (prev: string[], current) =>
- current.type === "tag" ? [...prev, $.html(current)] : prev,
- []
- )
- .join(""),
- svgAttribs: attribs,
- };
-};
-
-export function getIcons(pack: PackItem): Promise {
- const filesPath = getPackFiles(pack.path);
-
- return Promise.all(
- filesPath.map(async (path) => await getIconContent(path, pack))
+import type { IconContent, PackItem } from "./types";
+import type { getIconContent } from "./get-icon";
+import { getIconContentPool } from "./index";
+
+export async function getIcons(pack: PackItem): Promise {
+ const filesPath = await getPackFiles(pack.path);
+
+ const iconContents = await Promise.all(
+ filesPath.map(async (path) => {
+ const worker = await getIconContentPool.proxy<{
+ getIconContent: typeof getIconContent;
+ }>();
+ const content = await await worker.getIconContent(path, pack);
+ return content;
+ })
);
+
+ return iconContents;
}
diff --git a/src/build/index.ts b/src/build/index.ts
index d67e8fc9..d991afdc 100644
--- a/src/build/index.ts
+++ b/src/build/index.ts
@@ -1,12 +1,15 @@
import arg from "arg";
+import chalk from "chalk";
+import { pool } from "workerpool";
import packages from "./packages.json" assert { type: "json" };
import { getIcons } from "./get-icons";
import { prepareDist, writeLibFiles } from "./lib-files";
import { writeWebFiles } from "./web-files";
-import { supportedArgs } from "./constants";
+import { log, supportedArgs } from "./constants";
import { PackAttachedIcons } from "./types";
+
function isolatePack(shortName: string, isolateBy: string): boolean {
return shortName === isolateBy;
}
@@ -23,6 +26,8 @@ function getArgs() {
};
}
+export const getIconContentPool = pool("./src/build/get-icon.js");
+
async function main() {
const { isIsolate, buildWeb } = getArgs();
@@ -39,6 +44,10 @@ async function main() {
icons: await getIcons(pack),
}))
);
+ await getIconContentPool.terminate();
+ log(
+ chalk.dim("🗜️ Icons have been optimized and prepared") + chalk.green(" ✓")
+ );
writeLibFiles(attachedFiles);
diff --git a/src/build/lib-files.ts b/src/build/lib-files.ts
index a9061487..160ca668 100644
--- a/src/build/lib-files.ts
+++ b/src/build/lib-files.ts
@@ -1,7 +1,8 @@
-import fs from "fs";
+import fs from "fs-extra";
import chalk from "chalk";
import { promisify } from "util";
import { exec } from "child_process";
+import { cpus, pool } from "workerpool";
import {
DIST_PATH,
@@ -12,17 +13,17 @@ import {
LIB_PACKAGE_JSON,
} from "./constants";
import { fileTypes } from "./file-types";
-import { getFileByPath } from "./get-icons";
import packages from "./packages.json" assert { type: "json" };
import { PackageJSONExport, PackAttachedIcons, PackItem } from "./types";
+import type { postBuild } from "./post-build";
const execAsync = promisify(exec);
export async function prepareDist() {
await Promise.all([execAsync("yarn build:lib", { cwd: ROOT_PATH })]);
- fs.appendFileSync(`${DIST_PATH}/lib/package.json`, LIB_PACKAGE_JSON);
+ await fs.appendFile(`${DIST_PATH}/lib/package.json`, LIB_PACKAGE_JSON);
- writeAssetsFiles();
+ await writeAssetsFiles();
log(chalk.dim("🍬 Lib artifacts has been bundled") + chalk.green(" ✓"));
}
@@ -33,49 +34,92 @@ function getPackageExports(
): PackageJSONExport {
const exportsPayload = JSON.parse(`{
"browser": "./${current.shortName}/index.js",
- "node": "./${current.shortName}/index.cjs",
- "default": "./${current.shortName}/index.cjs"
+ "node": "./${current.shortName}/index.ssr.js"
}`);
- return { ...previousValue, [`./${current.shortName}`]: exportsPayload };
+ return {
+ ...previousValue,
+ [`./${current.shortName}`]: exportsPayload,
+ [`./${current.shortName}/*`]: `./${current.shortName}/*.jsx`,
+ };
}
-function writeAssetsFiles() {
- includedFiles.forEach((file) => {
- fs.cpSync(`${ROOT_PATH}/${file}`, `${DIST_PATH}/${file}`);
- });
+async function writeAssetsFiles() {
+ await Promise.all(
+ includedFiles.map(async (file) => {
+ return fs.copy(`${ROOT_PATH}/${file}`, `${DIST_PATH}/${file}`);
+ })
+ );
- const packageJson = JSON.parse(getFileByPath(`${ROOT_PATH}/package.json`));
+ const packageJson = await fs.readJson(`${ROOT_PATH}/package.json`);
delete packageJson.devDependencies;
delete packageJson.scripts;
- delete packageJson.type;
packageJson.exports = {
["."]: ROOT_EXPORT,
...packages.reduce(getPackageExports, {}),
};
- fs.appendFileSync(
+ await fs.appendFile(
`${DIST_PATH}/package.json`,
JSON.stringify(packageJson, null, 2)
);
+
+ await fs.copyFile(
+ `${ROOT_PATH}/tsconfig.dist.json`,
+ `${DIST_PATH}/tsconfig.json`
+ );
}
-function writeEachPack(pack: PackAttachedIcons) {
+const ignoredIcons = ["ImPagebreak"]; // due to the name conflict with ImPagebreak
+
+const postBuildPool = pool("./src/build/post-build.js", {
+ maxWorkers: Math.min(4, cpus - 1),
+});
+
+async function writeEachPack(pack: PackAttachedIcons) {
const packFolder = `${DIST_PATH}/${pack.shortName}`;
- fs.mkdirSync(packFolder);
+ await fs.mkdir(packFolder);
for (let index = 0; index < fileTypes.length; index++) {
const type = fileTypes[index];
- const fileName = `${packFolder}/${type.fileName}`;
- fs.appendFileSync(fileName, type.header);
- pack.icons.forEach((icon) => {
- fs.appendFileSync(fileName, type.template(icon));
- });
+ // write each icon to a new file
+ await Promise.all(
+ pack.icons.map(async (icon) => {
+ if (ignoredIcons.includes(icon.fileName)) {
+ return;
+ }
+
+ const filePath = `${packFolder}/${icon.fileName}${type.extension}`;
+ await fs.appendFile(filePath, type.header + type.template(icon));
+ })
+ );
}
+ // create index.ts file
+ const bundlePath = `${packFolder}/index.ts`;
+ await fs.writeFile(
+ bundlePath,
+ pack.icons
+ .map((icon) =>
+ ignoredIcons.includes(icon.fileName)
+ ? ""
+ : `export { ${icon.fileName} } from "./${icon.fileName}";`
+ )
+ .join("\n")
+ );
+ // add types for the bundles
+ await fs.copyFile(bundlePath, `${packFolder}/index.d.ts`);
+ await fs.copyFile(bundlePath, `${packFolder}/index.ssr.d.ts`);
+
+ // replace the ts file with the web js bundle
+ const postBuildWorker = await postBuildPool.proxy<{
+ postBuild: typeof postBuild;
+ }>();
+ await await postBuildWorker.postBuild(bundlePath);
+
log(
chalk.white(`📦 ${pack.packName}`) +
chalk.dim(" package has been generated") +
@@ -84,7 +128,6 @@ function writeEachPack(pack: PackAttachedIcons) {
}
export async function writeLibFiles(iconsPayload: PackAttachedIcons[]) {
- for (let index = 0; index < iconsPayload.length; index++) {
- writeEachPack(iconsPayload[index]);
- }
+ await Promise.all(iconsPayload.map(writeEachPack));
+ await postBuildPool.terminate();
}
diff --git a/src/build/post-build.ts b/src/build/post-build.ts
new file mode 100644
index 00000000..51e63ea9
--- /dev/null
+++ b/src/build/post-build.ts
@@ -0,0 +1,55 @@
+import { dirname } from "path";
+import { build, InlineConfig } from "vite";
+import solidPlugin from "vite-plugin-solid";
+import { worker } from "workerpool";
+
+function getOptions(filePath: string, server: boolean): InlineConfig {
+ return {
+ build: {
+ lib: {
+ entry: filePath,
+ formats: ["es"],
+ },
+ outDir: dirname(filePath),
+ minify: true,
+ sourcemap: true,
+ write: true,
+ emptyOutDir: false,
+ rollupOptions: {
+ input: filePath,
+ external: ["solid-js", "solid-js/web"],
+ output: {
+ entryFileNames: server ? "index.ssr.js" : "index.js",
+ },
+ },
+ ssr: server,
+ },
+ plugins: [
+ solidPlugin({
+ babel: { compact: true },
+ solid: { hydratable: true, generate: server ? "ssr" : "dom" },
+ ssr: server,
+ dev: false,
+ }),
+ ],
+ };
+}
+
+/**
+ * Bundle the icons with vite and vite-plugin-solid
+ *
+ * This builds two bundles, one for the client and one for the server.
+ */
+export async function postBuild(filePath: string) {
+ process.env.NODE_ENV = "production";
+ await Promise.all([
+ // Build the client bundle
+ build(getOptions(filePath, false)),
+ // Build the server bundle
+ build(getOptions(filePath, true)),
+ ]);
+}
+
+worker({
+ postBuild,
+});
diff --git a/src/build/types.d.ts b/src/build/types.d.ts
index fb3306a4..08f8993a 100644
--- a/src/build/types.d.ts
+++ b/src/build/types.d.ts
@@ -21,6 +21,7 @@ export interface PackAttachedIcons extends PackItem {
export interface SVGAttribs {
viewBox?: string;
height?: string;
+ stroke?: string;
}
export interface PackageJSONExport {
diff --git a/src/build/web-files.ts b/src/build/web-files.ts
index 0665c4fd..26b64b63 100644
--- a/src/build/web-files.ts
+++ b/src/build/web-files.ts
@@ -1,11 +1,9 @@
-import fs from "fs";
+import fs from "fs-extra";
import chalk from "chalk";
-import { promisify } from "util";
import { log, WEB_ICONS_PATH, WEB_PATH } from "./constants";
import { IconContent, PackAttachedIcons } from "./types";
-const rmAsync = promisify(fs.rm);
function attachCountIcons(packs: PackAttachedIcons[]) {
return packs.map((pack) => ({
@@ -26,11 +24,11 @@ export async function writeWebFiles(packs: PackAttachedIcons[]) {
),
};
- await rmAsync(WEB_ICONS_PATH, { recursive: true, force: true });
+ await fs.remove(WEB_ICONS_PATH);
fs.mkdirSync(WEB_ICONS_PATH);
- await rmAsync(`${WEB_PATH}/search.js`, { recursive: true, force: true });
- await rmAsync(`${WEB_PATH}/meta.js`, { recursive: true, force: true });
+ await fs.remove(`${WEB_PATH}/search.js`);
+ await fs.remove(`${WEB_PATH}/meta.js`);
fs.appendFileSync(
`${WEB_PATH}/search.js`,
diff --git a/src/lib/index.tsx b/src/lib/index.tsx
index d24174ae..73f3779c 100644
--- a/src/lib/index.tsx
+++ b/src/lib/index.tsx
@@ -1,13 +1,8 @@
import type { JSX } from "solid-js";
-import { isServer, mergeProps } from "solid-js/web";
+export { isServer, mergeProps } from "solid-js/web";
type SVGSVGElementTags = JSX.SVGElementTags["svg"];
-export interface IconTree {
- a: SVGSVGElementTags;
- c: string;
-}
-
export interface IconProps extends SVGSVGElementTags {
size?: string | number;
color?: string;
@@ -15,33 +10,4 @@ export interface IconProps extends SVGSVGElementTags {
style?: JSX.CSSProperties;
}
-export interface IconBaseProps extends IconProps {
- src: IconTree;
-}
-
export declare type IconTypes = (props: IconProps) => JSX.Element;
-
-export function IconTemplate(iconSrc: IconTree, props: IconProps): JSX.Element {
- const mergedProps = mergeProps(iconSrc.a, props);
-
- return (
-
- {isServer && iconSrc.c}
- {props.title && {props.title} }
-
- );
-}
diff --git a/test/Template.jsx b/test/Template.jsx
index dca22676..85bde363 100644
--- a/test/Template.jsx
+++ b/test/Template.jsx
@@ -1,26 +1,37 @@
import { createSignal } from "solid-js";
import rgbHex from "rgb-hex";
import { afterEach, describe, expect, test } from "vitest";
-import { render, fireEvent, screen, cleanup } from "solid-testing-library";
+import { render, fireEvent, screen, cleanup } from "@solidjs/testing-library";
+import { FiCircle } from "../dist/fi/FiCircle";
+
+describe(" setColor(expectedColor)}
role="svg"
@@ -47,15 +58,15 @@ describe("