Merge pull request #47 from isBatak/feat/add-support-for-webp-illustration

feat: illustration extensions

Author: isBatak

.changeset/sixty-masks-drop.md

@@ -0,0 +1,13 @@
+---
+"@ikona/cli": patch
+---
+
+Add config for illustration file extension (webp)
+
+```js
+{
+  illustrations: {
+    extensions: ['svg', 'png', 'jpg', 'jpeg', 'webp'],
+  },
+}
+```

examples/nextjs/ikona.config.ts

@@ -10,5 +10,6 @@ export default defineConfig({
   },
   illustrations: {
     inputDir: "public/illustrations",
+    extensions: ["svg", "png", "jpg", "jpeg", "webp"],
   },
 });

packages/cli/__tests__/fixtures/config.ts

@@ -1,6 +1,7 @@
 import { Config } from "../../src";
 
 export const configFixture: Config = {
+  verbose: false,
   outputDir: "output",
   icons: {
     inputDir: "icons",
@@ -10,6 +11,7 @@ export const configFixture: Config = {
   },
   illustrations: {
     inputDir: "illustrations",
+    extensions: ["svg", "png", "jpg", "jpeg", "webp"],
   },
   force: false,
   cwd: "",

packages/cli/__tests__/illustrations/types.test.ts

@@ -18,6 +18,7 @@ describe("types", () => {
         "book.png": "png",
         "song.jpg": "jpg",
         "song.jpeg": "jpeg",
+        "song.webp": "webp",
       },
     });
 
@@ -35,6 +36,7 @@ describe("types", () => {
           "/illustrations/email.svg",
           "/illustrations/song.jpeg",
           "/illustrations/song.jpg",
+          "/illustrations/song.webp",
       ] satisfies Array<IllustrationPath>;
       "
     `);
@@ -49,7 +51,8 @@ describe("types", () => {
         | '/illustrations/book.png'
         | '/illustrations/email.svg'
         | '/illustrations/song.jpeg'
-        | '/illustrations/song.jpg';
+        | '/illustrations/song.jpg'
+        | '/illustrations/song.webp';
       "
     `);
   });

packages/cli/__tests__/utils/config.test.ts

@@ -16,8 +16,20 @@ jest.mock("path", () => ({
 describe("defaultConfig", () => {
   it("should have the correct default values", () => {
     expect(defaultConfig).toEqual({
-      outputDir: ".ikona",
       cwd: process.cwd(),
+      force: false,
+      icons: {
+        hash: false,
+        inputDir: "icons",
+        optimize: false,
+        spriteOutputDir: "output",
+      },
+      illustrations: {
+        extensions: ["svg", "png", "jpg", "jpeg", "webp"],
+        inputDir: "illustrations",
+      },
+      outputDir: ".ikona",
+      verbose: false,
     });
   });
 });

packages/cli/src/illustrations/types.ts

@@ -6,6 +6,7 @@ import { writeIfChanged } from "../utils/validations";
 import type { Config } from "../types";
 import { illustrationsTemplate } from "./templates/illustrations";
 import { pathsTemplate } from "./templates/paths";
+import { getIllustrationsExtensionsGlobPattern } from "../utils/glob";
 
 interface GenerateIconFilesOptions {
   files: Array<string>;
@@ -99,9 +100,12 @@ export async function generateIllustrationTypes(config: Config) {
   ]);
 
   const files = glob
-    .sync("**/*.{svg,png,jpg,jpeg}", {
-      cwd: inputDir,
-    })
+    .sync(
+      getIllustrationsExtensionsGlobPattern(config.illustrations.extensions),
+      {
+        cwd: inputDir,
+      }
+    )
     .sort((a, b) => a.localeCompare(b));
 
   if (files.length === 0) {

packages/cli/src/types.ts

@@ -2,8 +2,14 @@ export type Prettify<T> = {
   [K in keyof T]: T[K];
 } & unknown;
 
+type DeepPartial<T> = {
+  [P in keyof T]?: T[P] extends Record<string, unknown>
+    ? DeepPartial<T[P]>
+    : T[P];
+};
+
 export interface Config {
-  verbose?: boolean;
+  verbose: boolean;
 
   /**
    * Directory where the generated files
@@ -14,31 +20,28 @@ export interface Config {
   /**
    * Force generation of files
    */
-  force?: boolean;
+  force: boolean;
 
   icons: {
-    optimize?: boolean;
+    optimize: boolean;
     inputDir: string;
     spriteOutputDir: string;
 
     /**
      * Hash sprite file name and export it as a JS constant.
      */
-    hash?: boolean;
+    hash: boolean;
   };
 
   illustrations: {
     inputDir: string;
+    extensions: string[];
   };
 
   cwd: string;
 }
 
-export type DefaultConfig = Required<Pick<Config, "outputDir" | "cwd">>;
-
-export type FileConfig = Prettify<
-  Omit<Config, "outputDir" | "cwd"> & Partial<Pick<Config, "outputDir" | "cwd">>
->;
+export type FileConfig = Prettify<DeepPartial<Config>>;
 
 export interface CliConfig {
   verbose?: boolean;

packages/cli/src/utils/config.ts

@@ -1,10 +1,22 @@
 import { bundleNRequire } from "bundle-n-require";
 import findUp from "escalade/sync";
 import { resolve } from "path";
-import { DefaultConfig } from "../types";
+import { Config } from "../types";
 
-export const defaultConfig: DefaultConfig = {
+export const defaultConfig: Config = {
+  verbose: false,
   outputDir: ".ikona",
+  force: false,
+  icons: {
+    optimize: false,
+    inputDir: "icons",
+    spriteOutputDir: "output",
+    hash: false,
+  },
+  illustrations: {
+    inputDir: "illustrations",
+    extensions: ["svg", "png", "jpg", "jpeg", "webp"],
+  },
   cwd: process.cwd(),
 };
 

packages/cli/src/utils/glob.ts

@@ -0,0 +1,3 @@
+export function getIllustrationsExtensionsGlobPattern(extensions: string[]) {
+  return `**/*.{${extensions.join(",")}}`;
+}

packages/cli/src/utils/merge-config.ts

@@ -9,18 +9,33 @@ export interface MergeConfigProps {
 
 export const mergeConfigs = ({ cliConfig, fileConfig }: MergeConfigProps) => {
   return {
-    verbose: cliConfig.v ?? cliConfig.verbose ?? fileConfig.verbose,
+    verbose:
+      cliConfig.v ??
+      cliConfig.verbose ??
+      fileConfig.verbose ??
+      defaultConfig.verbose,
     outputDir:
       cliConfig["out-dir"] ?? fileConfig.outputDir ?? defaultConfig.outputDir,
-    force: cliConfig.force ?? fileConfig.force,
+    force: cliConfig.force ?? fileConfig.force ?? defaultConfig.force,
     icons: {
-      optimize: cliConfig.optimize ?? fileConfig.icons.optimize,
-      inputDir: fileConfig.icons.inputDir, // TODO add missing cli config flag
-      spriteOutputDir: fileConfig.icons.spriteOutputDir, // TODO add missing cli config flag
-      hash: cliConfig.hash ?? fileConfig.icons.hash,
+      optimize:
+        cliConfig.optimize ??
+        fileConfig.icons?.optimize ??
+        defaultConfig.icons.optimize,
+      inputDir: fileConfig.icons?.inputDir ?? defaultConfig.icons.inputDir, // TODO add missing cli config flag
+      spriteOutputDir:
+        fileConfig.icons?.spriteOutputDir ??
+        defaultConfig.icons.spriteOutputDir, // TODO add missing cli config flag
+      hash:
+        cliConfig.hash ?? fileConfig.icons?.hash ?? defaultConfig.icons.hash,
     },
     illustrations: {
-      inputDir: fileConfig.illustrations.inputDir, // TODO add missing cli config flag
+      inputDir:
+        fileConfig.illustrations?.inputDir ??
+        defaultConfig.illustrations.inputDir, // TODO add missing cli config flag
+      extensions:
+        fileConfig.illustrations?.extensions ??
+        defaultConfig.illustrations.extensions, // TODO add missing cli config flag
     },
     cwd: cliConfig.cwd ?? fileConfig.cwd ?? defaultConfig.cwd,
   } satisfies Config;