v2 (#6)

.travis.yml

@@ -1,4 +1,6 @@
 language: node_js
 node_js: 12
 cache: yarn
-script: yarn prepack
+script:
+  - yarn svelte-check
+  - yarn prepack

README.md

@@ -41,12 +41,11 @@ Customize the toggle switch descriptors through the "on" and "off" props.
 <Toggle on="On" off="Off" />
 ```
 
-Alternatively, you can use named slots:
+Alternatively, you can override the default slot:
 
 ```svelte
-<Toggle on off>
-  <span style="margin-left: .5rem" slot="on">"on" descriptor</span>
-  <span style="margin-left: .5rem" slot="off">"off" descriptor</span>
+<Toggle let:toggled>
+  <span style="margin-left: .5rem">{toggled ? "Yes" : "No"}</span>
 </Toggle>
 ```
 
@@ -120,20 +119,20 @@ API for the default `Toggle` component.
 
 ## Dispatched events
 
-The `Toggle` component dispatches a "change" event.
+The `Toggle` component dispatches a "toggle" event.
 
 ```svelte
 <script>
   let events = [];
 </script>
 
 <Toggle
-  on:change={({ detail }) => {
-    events = [...events, detail.toggled];
+  on:toggle={(e) => {
+    events = [...events, e.detail];
   }}
 />
 
-<strong>Events:</strong> {events.join(', ')}
+<strong>on:toggle</strong> {events.join(', ')}
 ```
 
 ## Forwarded events

package.json

@@ -10,6 +10,7 @@
   "types": "./types/index.d.ts",
   "sideEffects": false,
   "scripts": {
+    "svelte-check": "svelte-check",
     "dev": "rollup -cw",
     "predeploy": "rollup -c",
     "deploy": "npx gh-pages -d dist",
@@ -20,7 +21,8 @@
     "@tsconfig/svelte": "^1.0.10",
     "rollup": "^2.33.2",
     "rollup-plugin-svelte": "^6.1.1",
-    "svelte": "^3.29.7",
+    "svelte": "^3.30.0",
+    "svelte-check": "^1.1.17",
     "svelte-readme": "^1.1.0",
     "typescript": "^4.0.5"
   },

rollup.config.js

@@ -9,6 +9,7 @@ const BUNDLE = process.env.BUNDLE === "true";
 export default () => {
   if (!BUNDLE) {
     return svelteReadme({
+      svelte: { immutable: true },
       minify: !DEV,
       prefixUrl: "https://github.com/metonym/svelte-toggle/tree/master/",
       style: `

src/Toggle.svelte

@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @slot {{ toggled: boolean; }}
+   */
+
   export let label = "Label";
   export let hideLabel = false;
   export let small = false;
@@ -26,9 +30,9 @@
   const dispatch = createEventDispatcher();
 
   /**
-   * @event {{ toggled: boolean; }} change
+   * @event {boolean} toggle
    */
-  $: dispatch("change", { toggled });
+  $: dispatch("toggle", toggled);
 </script>
 
 <style>
@@ -136,12 +140,8 @@
       on:focus
       on:blur
       on:keydown />
-    {#if toggled}
-      {#if on}
-        <slot name="on"><span>{on}</span></slot>
-      {/if}
-    {:else if off}
-      <slot name="off"><span>{off}</span></slot>
-    {/if}
+    <slot {toggled}>
+      {#if on && off}<span>{toggled ? on : off}</span>{/if}
+    </slot>
   </div>
 </ToggleCore>

test.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import Toggle, { ToggleCore } from "./types";
+
+  let toggled = true;
+</script>
+
+<Toggle
+  label="label"
+  hideLabel
+  on="On"
+  off="Off"
+  on:toggle={(e) => {
+    console.log(e.detail);
+  }} />
+
+<Toggle let:toggled={isToggled}>
+  <span style="margin-left: .5rem">{isToggled ? 'Yes' : 'No'}</span>
+</Toggle>
+
+<ToggleCore {toggled} let:label let:button>
+  <!-- svelte-ignore a11y-label-has-associated-control -->
+  <label {...label}>Label</label>
+  <button
+    {...button}
+    on:click={() => {
+      toggled = !toggled;
+    }}>
+    {toggled ? 'On' : 'Off'}
+  </button>
+</ToggleCore>

types/Toggle.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="svelte" />
+import { SvelteComponent } from "svelte";
 
 export interface ToggleProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
   /**
@@ -52,20 +53,17 @@ export interface ToggleProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNam
   untoggledColor?: string;
 }
 
-export default class Toggle {
-  $$prop_def: ToggleProps;
-  $$slot_def: {
-    off: {};
-    on: {};
-  };
-
-  $on(eventname: "change", cb: (event: CustomEvent<{ toggled: boolean }>) => void): () => void;
-  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
-  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
-  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
-  $on(eventname: "mouseout", cb: (event: WindowEventMap["mouseout"]) => void): () => void;
-  $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void;
-  $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void;
-  $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
-  $on(eventname: string, cb: (event: Event) => void): () => void;
-}
+export default class Toggle extends SvelteComponent<
+  ToggleProps,
+  {
+    toggle: CustomEvent<boolean>;
+    click: WindowEventMap["click"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseout: WindowEventMap["mouseout"];
+    focus: WindowEventMap["focus"];
+    blur: WindowEventMap["blur"];
+    keydown: WindowEventMap["keydown"];
+  },
+  { default: { toggled: boolean } }
+> {}

types/ToggleCore.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="svelte" />
+import { SvelteComponent } from "svelte";
 
 export interface ToggleCoreProps {
   /**
@@ -17,9 +18,10 @@ export interface ToggleCoreProps {
   disabled?: boolean;
 }
 
-export default class ToggleCore {
-  $$prop_def: ToggleCoreProps;
-  $$slot_def: {
+export default class ToggleCore extends SvelteComponent<
+  ToggleCoreProps,
+  {},
+  {
     default: {
       label: { for: string };
       button: {
@@ -31,7 +33,5 @@ export default class ToggleCore {
         [key: string]: any;
       };
     };
-  };
-
-  $on(eventname: string, cb: (event: Event) => void): () => void;
-}
+  }
+> {}

types/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from "./Toggle";
 export { default as ToggleCore } from "./ToggleCore";
+export { default } from "./Toggle";