refactor: props defaults

.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:

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 ."
   },

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);

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 />

src/lib/fa.svelte

@@ -1,24 +1,24 @@
 <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;
 
   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"

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 = "",

src/basic.test.ts → 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();

src/duotone.test.ts → 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();

src/layers.test.ts → 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);

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"],
     },
   },