Rename constants.

Move breakpoint types to same file.
Add component export.
Inline type imports in JS files.

src/Breakpoint/Breakpoint.svelte

@@ -26,7 +26,7 @@
 
   import { createEventDispatcher } from "svelte";
   import { breakpointObserver } from "./breakpointObserver";
-  import { breakpoints } from "./constants";
+  import { breakpoints } from "./breakpoints";
 
   const dispatch = createEventDispatcher();
   const observer = breakpointObserver();

src/Breakpoint/breakpointObserver.d.ts

@@ -1,19 +1,22 @@
+import type { Readable, Subscriber, Unsubscriber } from "svelte/store";
+import type { BreakpointSize, BreakpointValue } from "./breakpoints";
+
 /**
- * Creates a readable store that returns the current {@link BreakpointSize}.
+ * 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: import("svelte/store").Subscriber<any>, invalidate?: (value?: any) => void) => import("svelte/store").Unsubscriber;
+    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) => import("svelte/store").Readable<boolean>;
+    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) => import("svelte/store").Readable<boolean>;
+    largerThan: (size: BreakpointSize) => Readable<boolean>;
 };

src/Breakpoint/breakpointObserver.js

@@ -1,18 +1,16 @@
-/// <reference path="./types.d.ts"/>
-
 import { onMount } from "svelte";
 import { derived, writable } from "svelte/store";
-import { breakpoints } from "./constants";
+import { breakpoints } from "./breakpoints";
 
 /**
- * Creates a readable store that returns the current {@link BreakpointSize}.
+ * 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() {
   const store = writable(undefined);
 
   onMount(() => {
-    /** @type {Record<BreakpointSize, MediaQueryList>} */
+    /** @type {Record<import("./breakpoints").BreakpointSize, MediaQueryList>} */
     const match = {
       sm: window.matchMedia(`(max-width: ${breakpoints.md}px)`),
       md: window.matchMedia(
@@ -57,7 +55,7 @@ export function breakpointObserver() {
     /**
      * Returns a store readable store that returns whether the current
      * breakpoint is smaller than {@link size}.
-     * @param {BreakpointSize} size Size to compare against.
+     * @param {import("./breakpoints").BreakpointSize} size Size to compare against.
      */
     smallerThan: (size) => {
       checkSizeValid(size);
@@ -67,7 +65,7 @@ export function breakpointObserver() {
     /**
      * Returns a store readable store that returns whether the current
      * breakpoint is larger than {@link size}.
-     * @param {BreakpointSize} size Size to compare against.
+     * @param {import("./breakpoints").BreakpointSize} size Size to compare against.
      */
     largerThan: (size) => {
       checkSizeValid(size);

src/Breakpoint/breakpoints.d.ts

@@ -3,3 +3,7 @@
  * @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;

src/Breakpoint/breakpoints.js

@@ -1,8 +1,6 @@
-/// <reference path="./types.d.ts"/>
-
 /**
  * Pixel sizes of Carbon grid breakpoints.
- * @type {Record<BreakpointSize, BreakpointValue>}
+ * @type {Record<import("./breakpoints").BreakpointSize, BreakpointValue>}
  */
 export const breakpoints = Object.freeze({
   sm: 320,

src/Breakpoint/index.d.ts

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

src/Breakpoint/index.js

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

src/Breakpoint/types.d.ts

@@ -1,2 +0,0 @@
-declare type BreakpointSize = "sm" | "md" | "lg" | "xlg" | "max";
-declare type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;