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

@@ -2,17 +2,17 @@
   import { getTransform, setCutomFontSize } 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;
@@ -22,7 +22,10 @@
   $: containerElement && transform && (containerElement.style.transform = transform);
 </script>
 
-<span {id} class="svelte-fa-layers-text {clazz}">
+<span
+  {id}
+  class="svelte-fa-layers-text {clazz}"
+>
   <!-- eslint-disable svelte/no-inline-styles -- Only styles passed to this component should be included -->
   <span
     class="svelte-fa-base container"

src/lib/fa-layers.svelte

@@ -2,11 +2,11 @@
   import { setCutomFontSize } 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;
@@ -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

@@ -3,22 +3,22 @@
   import { getTransform, setCutomFontSize } 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;
@@ -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/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"],
     },
   },