From b4cc08eadca9d3c5fa6e43759ca373125f43005d Mon Sep 17 00:00:00 2001
From: Cweili <3weili@gmail.com>
Date: Tue, 16 Jan 2024 14:58:21 +0800
Subject: [PATCH] refactor: props defaults

---
 .github/workflows/ci.yml      |  2 +-
 package.json                  |  2 +-
 src/lib/fa-layers-text.svelte | 14 +++++++-------
 src/lib/fa-layers.svelte      | 14 +++++++-------
 src/lib/fa.svelte             | 20 ++++++++++----------
 src/lib/utils.ts              |  6 +++---
 {src => test}/basic.test.ts   |  2 +-
 {src => test}/duotone.test.ts |  2 +-
 {src => test}/layers.test.ts  |  2 +-
 vite.config.ts                |  3 ++-
 10 files changed, 34 insertions(+), 33 deletions(-)
 rename {src => test}/basic.test.ts (99%)
 rename {src => test}/duotone.test.ts (98%)
 rename {src => test}/layers.test.ts (98%)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 4f4eefd..db4b6db 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -20,7 +20,7 @@ jobs:
       - run: npm run check
       - run: npm run lint
       - run: npm run build
-      - run: npm test -- --coverage.enabled --coverage.include=src/lib/**
+      - run: npm test
 
       - uses: coverallsapp/github-action@master
         with:
diff --git a/package.json b/package.json
index 7f8bb32..0e040f8 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
     "prepublishOnly": "npm run package",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "test": "vitest --typecheck",
+    "test": "vitest --typecheck --coverage.enabled",
     "lint": "prettier --check . && eslint --ignore-path .gitignore .",
     "format": "prettier --write ."
   },
diff --git a/src/lib/fa-layers-text.svelte b/src/lib/fa-layers-text.svelte
index 97a86c0..4e26fe6 100644
--- a/src/lib/fa-layers-text.svelte
+++ b/src/lib/fa-layers-text.svelte
@@ -1,22 +1,22 @@
 <script lang="ts">
-  import { getTransform, setCutomFontSize } from "./utils.js";
+  import { getTransform, setCustomFontSize } from "./utils.js";
   import type { FlipDir, IconSize } from "./types.js";
 
-  let clazz = "";
+  let clazz: string | undefined = undefined;
   export { clazz as class };
-  export let id = "";
-  export let style = "";
-  export let size: IconSize | "" = "";
+  export let id: string | undefined = undefined;
+  export let style: string | undefined = undefined;
+  export let size: IconSize | undefined = undefined;
   export let color = "";
 
   export let scale: number | string = 1;
   export let translateX: number | string = 0;
   export let translateY: number | string = 0;
-  export let rotate: number | string = "";
+  export let rotate: number | undefined = undefined;
   export let flip: FlipDir | undefined = undefined;
 
   let containerElement: HTMLElement;
-  $: containerElement && size && setCutomFontSize(containerElement, size);
+  $: containerElement && size && setCustomFontSize(containerElement, size);
   $: containerElement && color && (containerElement.style.color = color);
   $: transform = getTransform(scale, translateX, translateY, rotate, flip, 1, "em", "deg");
   $: containerElement && transform && (containerElement.style.transform = transform);
diff --git a/src/lib/fa-layers.svelte b/src/lib/fa-layers.svelte
index dbc8c1e..78f4fe8 100644
--- a/src/lib/fa-layers.svelte
+++ b/src/lib/fa-layers.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
-  import { setCutomFontSize } from "./utils.js";
+  import { setCustomFontSize } from "./utils.js";
   import type { IconSize, PullDir } from "./types.js";
 
-  let clazz = "";
+  let clazz: string | undefined = undefined;
   export { clazz as class };
-  export let id = "";
-  export let style = "";
-  export let size: IconSize | "" = "";
+  export let id: string | undefined = undefined;
+  export let style: string | undefined = undefined;
+  export let size: IconSize | undefined = undefined;
   export let pull: PullDir | undefined = undefined;
 
   let containerElement: HTMLElement;
-  $: containerElement && size && setCutomFontSize(containerElement, size);
+  $: containerElement && size && setCustomFontSize(containerElement, size);
 </script>
 
 <!-- eslint-disable svelte/no-inline-styles -- Only styles passed to this component should be included -->
@@ -23,7 +23,7 @@
   class:svelte-fa-size-sm={size === "sm"}
   class:svelte-fa-size-xs={size === "xs"}
   bind:this={containerElement}
-  style={style !== "" ? style : null}
+  {style}
 >
   <!-- eslint-enable -->
   <slot />
diff --git a/src/lib/fa.svelte b/src/lib/fa.svelte
index 4d1d50c..d4a5524 100644
--- a/src/lib/fa.svelte
+++ b/src/lib/fa.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
   import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
-  import { getTransform, setCutomFontSize } from "./utils.js";
+  import { getTransform, setCustomFontSize } from "./utils.js";
   import type { FlipDir, IconSize, PullDir } from "./types.js";
 
-  let clazz = "";
+  let clazz: string | undefined = undefined;
   export { clazz as class };
-  export let id = "";
-  export let style = "";
+  export let id: string | undefined = undefined;
+  export let style: string | undefined = undefined;
 
   export let icon: IconDefinition;
-  export let size: IconSize | "" = "";
-  export let color = "";
+  export let size: IconSize | undefined = undefined;
+  export let color: string | undefined = undefined;
 
   export let fw = false;
   export let pull: PullDir | undefined = undefined;
@@ -18,7 +18,7 @@
   export let scale: number | string = 1;
   export let translateX: number | string = 0;
   export let translateY: number | string = 0;
-  export let rotate: number | string = "";
+  export let rotate: number | string | undefined = undefined;
   export let flip: FlipDir | undefined = undefined;
 
   export let spin = false;
@@ -32,7 +32,7 @@
   export let swapOpacity = false;
 
   let svgElement: HTMLElement | SVGElement;
-  $: svgElement && size && setCutomFontSize(svgElement, size);
+  $: svgElement && size && setCustomFontSize(svgElement, size);
 
   $: i = (icon && icon.icon) || [0, 0, "", [], ""];
 
@@ -42,7 +42,7 @@
 {#if i[4]}
   <!-- eslint-disable svelte/no-inline-styles -- Only styles passed to this component should be included -->
   <svg
-    id={id || undefined}
+    {id}
     class="svelte-fa svelte-fa-base {clazz}"
     class:pulse
     class:svelte-fa-size-lg={size === "lg"}
@@ -53,7 +53,7 @@
     class:svelte-fa-pull-right={pull === "right"}
     class:spin
     bind:this={svgElement}
-    style={style !== "" ? style : null}
+    {style}
     viewBox="0 0 {i[0]} {i[1]}"
     aria-hidden="true"
     role="img"
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index b01fa63..0e1ea59 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,6 +1,6 @@
 import type { IconSize } from "./types.js";
 
-export function setCutomFontSize(element: HTMLElement | SVGElement, size: IconSize | ""): void {
+export function setCustomFontSize(element: HTMLElement | SVGElement, size?: IconSize): void {
   if (size && size !== "lg" && size !== "sm" && size !== "xs") {
     element.style.fontSize = size.replace("x", "em");
   } else {
@@ -12,8 +12,8 @@ export function getTransform(
   scale: number | string,
   translateX: number | string,
   translateY: number | string,
-  rotate: number | string,
-  flip: string | undefined,
+  rotate?: number | string,
+  flip?: string | undefined,
   translateTimes = 1,
   translateUnit = "",
   rotateUnit = "",
diff --git a/src/basic.test.ts b/test/basic.test.ts
similarity index 99%
rename from src/basic.test.ts
rename to test/basic.test.ts
index e476abb..79c5639 100644
--- a/src/basic.test.ts
+++ b/test/basic.test.ts
@@ -3,7 +3,7 @@ import { describe, expect, test, afterEach } from "vitest";
 // @ts-expect-error No typings available
 import { fasFlag, fasInfo } from "@cweili/fa-test-util";
 import { render, screen, cleanup } from "@testing-library/svelte";
-import Fa from "./lib/index.js";
+import Fa from "../src/lib/index.js";
 
 function mountFa(props: Partial<ComponentProps<Fa>>) {
   cleanup();
diff --git a/src/duotone.test.ts b/test/duotone.test.ts
similarity index 98%
rename from src/duotone.test.ts
rename to test/duotone.test.ts
index 26fcdf4..fd45adb 100644
--- a/src/duotone.test.ts
+++ b/test/duotone.test.ts
@@ -3,7 +3,7 @@ import { expect, test, afterEach } from "vitest";
 // @ts-expect-error No typings available
 import { fasFlag, fadFlag, fadInfo } from "@cweili/fa-test-util";
 import { render, screen, cleanup } from "@testing-library/svelte";
-import Fa from "./lib/index.js";
+import Fa from "../src/lib/index.js";
 
 function mountFa(props: Partial<ComponentProps<Fa>>) {
   cleanup();
diff --git a/src/layers.test.ts b/test/layers.test.ts
similarity index 98%
rename from src/layers.test.ts
rename to test/layers.test.ts
index eb5adaf..571f766 100644
--- a/src/layers.test.ts
+++ b/test/layers.test.ts
@@ -2,7 +2,7 @@ import { describe, expect, test, afterEach } from "vitest";
 import { render, screen, cleanup, configure } from "@testing-library/svelte";
 import type { ComponentProps } from "svelte";
 
-import { FaLayers, FaLayersText } from "./lib/index.js";
+import { FaLayers, FaLayersText } from "../src/lib/index.js";
 
 configure({ testIdAttribute: "id" });
 afterEach(cleanup);
diff --git a/vite.config.ts b/vite.config.ts
index 033813b..ee6706f 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -4,9 +4,10 @@ import { defineConfig } from "vitest/config";
 export default defineConfig({
   plugins: [sveltekit()],
   test: {
-    include: ["src/**/*.{test,spec}.{js,ts}"],
+    include: ["test/**/*.{test,spec}.{js,ts}"],
     environment: "jsdom",
     coverage: {
+      include: ["src/lib/**/*"],
       reporter: ["lcov"],
     },
   },