build(types): copy .d.ts files from src to types (#1218)

docs/src/pages/framed/Breakpoint/BreakpointObserver.svelte

@@ -1,8 +1,5 @@
 <script>
-  import {
+  import { breakpointObserver, breakpoints } from "carbon-components-svelte";
-    breakpointObserver,
-    breakpoints,
-  } from "carbon-components-svelte/src/Breakpoint";
 
   const size = breakpointObserver();
   const smaller = size.smallerThan("md");

scripts/build-docs.js

@@ -1,3 +1,5 @@
+const fs = require("fs");
+const glob = require("glob");
 const { sveld } = require("sveld");
 const pkg = require("../package.json");
 
@@ -18,3 +20,8 @@ sveld({
     outFile: "docs/src/COMPONENT_API.json",
   },
 });
+
+glob.sync("./src/**/*.d.ts").forEach((file) => {
+  console.log("Copying", file, " to types/");
+  fs.copyFileSync(file, file.replace(/src/, "types"));
+});

src/Breakpoint/breakpointObserver.d.ts

@@ -6,17 +6,23 @@ import type { BreakpointSize, BreakpointValue } from "./breakpoints";
  * It also provides functions for creating derived stores used to do comparisons.
  */
 export function breakpointObserver(): {
-    subscribe: (this: void, run: Subscriber<any>, invalidate?: (value?: any) => void) => Unsubscriber;
+  subscribe: (
-    /**
+    this: void,
-     * Returns a store readable store that returns whether the current
+    run: Subscriber<any>,
-     * breakpoint is smaller than {@link size}.
+    invalidate?: (value?: any) => void
-     * @param {BreakpointSize} size Size to compare against.
+  ) => Unsubscriber;
-     */
+  /**
-    smallerThan: (size: BreakpointSize) => Readable<boolean>;
+   * Returns a store readable store that returns whether the current
-    /**
+   * breakpoint is smaller than {@link size}.
-     * Returns a store readable store that returns whether the current
+   * @param {BreakpointSize} size Size to compare against.
-     * breakpoint is larger than {@link size}.
+   */
-     * @param {BreakpointSize} size Size to compare against.
+  smallerThan: (size: BreakpointSize) => Readable<boolean>;
-     */
+  /**
-    largerThan: (size: BreakpointSize) => Readable<boolean>;
+   * Returns a store readable store that returns whether the current
+   * breakpoint is larger than {@link size}.
+   * @param {BreakpointSize} size Size to compare against.
+   */
+  largerThan: (size: BreakpointSize) => Readable<boolean>;
 };
+
+export default breakpointObserver;

src/Breakpoint/breakpointObserver.js

@@ -78,3 +78,5 @@ function checkSizeValid(size) {
   if (size in breakpoints == false)
     throw new Error(`"${size}" is not a valid breakpoint size.`);
 }
+
+export default breakpointObserver;

src/Breakpoint/breakpoints.d.ts

@@ -7,3 +7,5 @@ export const breakpoints: Record<BreakpointSize, BreakpointValue>;
 export type BreakpointSize = "sm" | "md" | "lg" | "xlg" | "max";
 
 export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
+
+export default breakpoints;

src/Breakpoint/breakpoints.js

@@ -9,3 +9,5 @@ export const breakpoints = Object.freeze({
   xlg: 1312,
   max: 1584,
 });
+
+export default breakpoints;

src/index.js

@@ -1,7 +1,9 @@
 export { Accordion, AccordionItem, AccordionSkeleton } from "./Accordion";
 export { AspectRatio } from "./AspectRatio";
 export { Breadcrumb, BreadcrumbItem, BreadcrumbSkeleton } from "./Breadcrumb";
-export { Breakpoint, breakpointObserver, breakpoints } from "./Breakpoint";
+export { Breakpoint } from "./Breakpoint";
+export { default as breakpointObserver } from "./Breakpoint/breakpointObserver";
+export { default as breakpoints } from "./Breakpoint/breakpoints";
 export { Button, ButtonSkeleton, ButtonSet } from "./Button";
 export { Checkbox, CheckboxSkeleton } from "./Checkbox";
 export { ContentSwitcher, Switch } from "./ContentSwitcher";

tests/Breakpoint.test.svelte

@@ -1,10 +1,18 @@
 <script lang="ts">
-  import { Breakpoint } from "../types";
+  import { Breakpoint, breakpointObserver, breakpoints } from "../types";
   import type { BreakpointProps } from "../types/Breakpoint/Breakpoint.svelte";
 
   let size: BreakpointProps["size"];
+
+  const sizeObserver = breakpointObserver();
+  const smaller = sizeObserver.smallerThan("md");
+  const larger = sizeObserver.largerThan("md");
 </script>
 
+{smaller}
+{larger}
+{breakpoints.md}
+
 <Breakpoint
   bind:size
   let:size="{currentSize}"

types/Breakpoint/breakpointObserver.d.ts

@@ -0,0 +1,28 @@
+import type { Readable, Subscriber, Unsubscriber } from "svelte/store";
+import type { BreakpointSize, BreakpointValue } from "./breakpoints";
+
+/**
+ * Creates a readable store that returns the current breakpoint size.
+ * It also provides functions for creating derived stores used to do comparisons.
+ */
+export function breakpointObserver(): {
+  subscribe: (
+    this: void,
+    run: Subscriber<any>,
+    invalidate?: (value?: any) => void
+  ) => Unsubscriber;
+  /**
+   * Returns a store readable store that returns whether the current
+   * breakpoint is smaller than {@link size}.
+   * @param {BreakpointSize} size Size to compare against.
+   */
+  smallerThan: (size: BreakpointSize) => Readable<boolean>;
+  /**
+   * Returns a store readable store that returns whether the current
+   * breakpoint is larger than {@link size}.
+   * @param {BreakpointSize} size Size to compare against.
+   */
+  largerThan: (size: BreakpointSize) => Readable<boolean>;
+};
+
+export default breakpointObserver;

types/Breakpoint/breakpoints.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Pixel sizes of Carbon grid breakpoints.
+ * @type {Record<BreakpointSize, BreakpointValue>}
+ */
+export const breakpoints: Record<BreakpointSize, BreakpointValue>;
+
+export type BreakpointSize = "sm" | "md" | "lg" | "xlg" | "max";
+
+export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
+
+export default breakpoints;

types/Breakpoint/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Breakpoint } from "./Breakpoint.svelte";
+export { breakpointObserver } from "./breakpointObserver";
+export { breakpoints } from "./breakpoints";

types/index.d.ts

@@ -6,8 +6,8 @@ export { default as Breadcrumb } from "./Breadcrumb/Breadcrumb.svelte";
 export { default as BreadcrumbItem } from "./Breadcrumb/BreadcrumbItem.svelte";
 export { default as BreadcrumbSkeleton } from "./Breadcrumb/BreadcrumbSkeleton.svelte";
 export { default as Breakpoint } from "./Breakpoint/Breakpoint.svelte";
-export { default as breakpointObserver } from "./Breakpoint";
+export { default as breakpointObserver } from "./Breakpoint/breakpointObserver";
-export { default as breakpoints } from "./Breakpoint";
+export { default as breakpoints } from "./Breakpoint/breakpoints";
 export { default as Button } from "./Button/Button.svelte";
 export { default as ButtonSkeleton } from "./Button/ButtonSkeleton.svelte";
 export { default as ButtonSet } from "./Button/ButtonSet.svelte";