Merge pull request #30 from forge-42/rr7_and_asset_inline_fix

Rr7 and asset inline fix

Author: AlemTuzlak

.gitignore

@@ -129,4 +129,5 @@ dist
 .yarn/install-state.gz
 .pnp.*
 /dist
-.history
+.history
+.react-router

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-icons-spritesheet",
-  "version": "2.2.1",
+  "version": "3.0.0",
   "description": "Vite plugin that generates a spritesheet and types out of your icons folder.",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -19,15 +19,15 @@
   "exports": {
     ".": {
       "import": {
+        "types": "./dist/index.d.mts",
         "import": "./dist/index.mjs",
-        "default": "./dist/index.mjs",
-        "types": "./dist/index.d.mts"
+        "default": "./dist/index.mjs"
       },
       "require": {
+        "types": "./dist/index.d.ts",
         "import": "./dist/index.js",
         "require": "./dist/index.js",
-        "default": "./dist/index.js",
-        "types": "./dist/index.d.ts"
+        "default": "./dist/index.js"
       }
     }
   },
@@ -67,27 +67,23 @@
   ],
   "homepage": "https://github.com/forge42dev/vite-plugin-icons-spritesheet#readme",
   "dependencies": {
-    "chalk": "^4.1.2",
-    "glob": "^10.3.12",
-    "node-html-parser": "^6.1.13",
+    "chalk": "^5.4.1",
+    "glob": "^11.0.1",
+    "node-html-parser": "^7.0.1",
     "tinyexec": "^0.3.2"
   },
   "peerDependencies": {
     "vite": ">=5.2.0"
   },
   "devDependencies": {
-    "@types/node": "^20.12.7",
-    "@typescript-eslint/eslint-plugin": "^7.5.0",
-    "@typescript-eslint/parser": "^7.5.0",
-    "@vitest/coverage-v8": "^1.5.2",
-    "eslint": "8.56",
-    "eslint-plugin-unused-imports": "^3.1.0",
-    "happy-dom": "^14.7.1",
-    "husky": "^9.0.11",
+    "@types/node": "^22.13.1",
+    "@vitest/coverage-v8": "^3.0.5",
+    "happy-dom": "^16.8.1",
+    "husky": "^9.1.7",
     "npm-run-all": "^4.1.5",
-    "tsup": "^8.0.2",
-    "typescript": "^5.4.5",
-    "vite": "5.2.11",
-    "vitest": "^1.5.2"
+    "tsup": "^8.3.6",
+    "typescript": "^5.7.3",
+    "vite": "6.0.11",
+    "vitest": "^3.0.5"
   }
-}
+}

package.json

@@ -1,15 +1,15 @@
 /*eslint-disable no-console */
 import { promises as fs } from "node:fs";
+import { mkdir } from "node:fs/promises";
 import path from "node:path";
+import { stderr } from "node:process";
+import { Readable } from "node:stream";
+import chalk from "chalk";
 import { glob } from "glob";
 import { parse } from "node-html-parser";
-import chalk from "chalk";
+import { exec } from "tinyexec";
 import type { Plugin } from "vite";
 import { normalizePath } from "vite";
-import { mkdir } from "node:fs/promises";
-import { exec } from "tinyexec";
-import { stderr } from "node:process";
-import { Readable } from "node:stream";
 
 type Formatter = "biome" | "prettier";
 
@@ -45,14 +45,7 @@ interface PluginProps {
    * @default no formatter
    * @example "biome"
    */
-  formatter?: Formatter;
-  /**
-   * The path to the formatter config file
-   * @default no path
-   * @example "./biome.json"
-   * @deprecated no need to provide a config path anymore
-   */
-  pathToFormatterConfig?: string;
+  formatter?: Formatter; 
   /**
    * The cwd, defaults to process.cwd()
    * @default process.cwd()
@@ -201,14 +194,13 @@ async function lintFileContent(fileContent: string, formatter: Formatter | undef
   stdinStream.push(null);
 
   const { process } = exec(formatter, options, {});
-  if (!process?.stdin) {
-    console.error("no process");
-    return "";
+  if (!process?.stdin) { 
+    return fileContent;
   }
   stdinStream.pipe(process.stdin);
   process.stderr?.pipe(stderr);
-  process.on("error", (error) => {
-    console.error(error);
+  process.on("error", ( ) => { 
+    return fileContent
   });
   const formattedContent = await new Promise<string>((resolve) => {
     process.stdout?.on("data", (data) => {
@@ -218,12 +210,12 @@ async function lintFileContent(fileContent: string, formatter: Formatter | undef
       resolve(data.toString());
     });
   });
-  return new Promise<string>((resolve, reject) => {
+  return new Promise<string>((resolve) => {
     process.on("exit", (code) => {
       if (code === 0) {
         resolve(formattedContent);
       } else {
-        reject(new Error(`${formatter} failed`));
+        resolve(fileContent);
       }
     });
   });
@@ -286,8 +278,7 @@ export const iconsSpritesheet: (args: PluginProps | PluginProps[]) => any = (may
       fileName,
       cwd,
       iconNameTransformer,
-      formatter,
-      pathToFormatterConfig,
+      formatter, 
     } = config;
     const iconGenerator = async () =>
       generateIcons({
@@ -299,9 +290,7 @@ export const iconsSpritesheet: (args: PluginProps | PluginProps[]) => any = (may
         iconNameTransformer,
         formatter,
       });
-    if (pathToFormatterConfig) {
-      console.warn("\"pathToFormatterConfig\" is deprecated, please remove it from your config");
-    }
+    
     const workDir = cwd ?? process.cwd();
     return {
       name: `icon-spritesheet-generator${i > 0 ? i.toString() : ""}`,
@@ -320,34 +309,35 @@ export const iconsSpritesheet: (args: PluginProps | PluginProps[]) => any = (may
           await iconGenerator();
         }
       },
-      // Augment the config with our own assetsInlineLimit function, we want to do this only once
-      async configResolved(config) {
-        if (i === 0) {
-          const subFunc =
-            typeof config.build.assetsInlineLimit === "function" ? config.build.assetsInlineLimit : undefined;
-          const limit = typeof config.build.assetsInlineLimit === "number" ? config.build.assetsInlineLimit : undefined;
+      async config(config) {
+        if (!config.build || i > 0) {
+          return;
+        }
+        const subFunc =
+          typeof config.build.assetsInlineLimit === "function" ? config.build.assetsInlineLimit : undefined;
+        const limit = typeof config.build.assetsInlineLimit === "number" ? config.build.assetsInlineLimit : undefined;
 
-          config.build.assetsInlineLimit = (name, content) => {
-            const isSpriteSheet = allSpriteSheetNames.some((spriteSheetName) => {
-              return name.endsWith(normalizePath(`${outputDir}/${spriteSheetName}`));
-            });
-            // Our spritesheet? Early return
-            if (isSpriteSheet) {
-              return false;
-            }
-            // User defined limit? Check if it's smaller than the limit
-            if (limit) {
-              const size = content.byteLength;
-              return size <= limit;
-            }
-            // User defined function? Run it
-            if (typeof subFunc === "function") {
-              return subFunc(name, content);
-            }
+        const assetsInlineLimitFunction = (name: string, content: Buffer) => {
+          const isSpriteSheet = allSpriteSheetNames.some((spriteSheetName) => {
+            return name.endsWith(normalizePath(`${outputDir}/${spriteSheetName}`));
+          });
+          // Our spritesheet? Early return
+          if (isSpriteSheet) {
+            return false;
+          }
+          // User defined limit? Check if it's smaller than the limit
+          if (limit) {
+            const size = content.byteLength;
+            return size <= limit;
+          }
+          // User defined function? Run it
+          if (typeof subFunc === "function") {
+            return subFunc(name, content);
+          }
 
-            return undefined;
-          };
-        }
+          return undefined;
+        };
+        config.build.assetsInlineLimit = assetsInlineLimitFunction;
       },
     } satisfies Plugin<unknown>;
   });

src/index.ts

@@ -4,15 +4,15 @@
  * For more information, see https://remix.run/file-conventions/entry.client
  */
 
-import { RemixBrowser } from "@remix-run/react";
-import { startTransition, StrictMode } from "react";
+import { StrictMode, startTransition } from "react";
 import { hydrateRoot } from "react-dom/client";
+import { HydratedRouter } from "react-router/dom";
 
 startTransition(() => {
   hydrateRoot(
     document,
     <StrictMode>
-      <RemixBrowser />
-    </StrictMode>
+      <HydratedRouter />
+    </StrictMode>,
   );
 });