V2 (#7)

* chore(deps-dev): bump deps * ci: add workflow * breaking(build): drop support for es/umd builds * breaking(types): move type definitions to src folder * chore(deps-dev): add gh-pages to devDependencies * fix(types): export non-default props in unstyled types * docs: add pnpm install command * docs: use svelte syntax highlighting for on:complete example * docs: display button as block to abridge examples * docs: update copy * docs: use periods
metonym · Nov 10, 2021 · 70eff63 · 70eff63
1 parent 873a77a
commit 70eff63
Show file tree

Hide file tree

Showing 14 changed files with 274 additions and 94 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -0,0 +1,11 @@
+name: CI
+on: [push, pull_request]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install dependencies and validate TypeScript definitions
+        run: |
+          yarn
+          yarn test
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,3 @@
 .DS_Store
-/lib
 /dist
 /node_modules
diff --git a/README.md b/README.md
@@ -28,14 +28,20 @@ yarn add -D svelte-pincode
 npm i -D svelte-pincode
 ```
 
+**pnpm**
+
+```bash
+pnpm i -D svelte-pincode
+```
+
 ## Usage
 
 ### Basic
 
 Bind to either the `code` or `value` prop.
 
-- **code** (`string[]`): Array of input values. An empty string represents an undefined value
-- **value** (`string`): `code` joined as a string
+- **code** (`string[]`): Array of input values. An empty string represents an undefined value.
+- **value** (`string`): `code` joined as a string.
 
 <!-- prettier-ignore-start -->
 ```svelte
@@ -77,8 +83,6 @@ Set `selectTextOnFocus` to `true` for the input value text to be selected when f
   <PincodeInput />
 </Pincode>
 
-<br />
-
 <button on:click={() => input.focus()}>
   Focus input
 </button>
@@ -156,15 +160,15 @@ This example illustrates how you can validate the code once all inputs have a va
   {#if !complete}
     Enter {correctCode.length - inputValue.length} more digit(s)...
   {/if}
-  {#if success}Correct code!{/if}
-  {#if error}Incorrect code.{/if}
+  {#if success}Correct code{/if}
+  {#if error}Incorrect code{/if}
 </div>
 ```
 <!-- prettier-ignore-end -->
 
-As an alternative to the `complete` prop, you can listen to the dispatched "complete" event:
+Use the dispatched "complete" event as an alternative to binding the `complete` prop.
 
-```html
+```svelte no-eval
 <Pincode
   on:complete="{(e) => {
     console.log(e.detail); // { code: string[]; value: string; }
@@ -176,7 +180,7 @@ As an alternative to the `complete` prop, you can listen to the dispatched "comp
 
 `code` can be set programmatically.
 
-Type in some initial values and then try setting or clearing the code using the buttons.
+In the following example, type some initial values and try setting or clearing the code.
 
 <!-- prettier-ignore-start -->
 ```svelte
@@ -207,7 +211,7 @@ Type in some initial values and then try setting or clearing the code using the
 
 ### Focusing the first input
 
-To programmatically focus the first input, invoke the `focusFirstInput` method on a component reference.
+To programmatically focus the first input, invoke the `focusFirstInput` method in a component reference.
 
 <!-- prettier-ignore-start -->
 ```svelte
@@ -224,8 +228,6 @@ To programmatically focus the first input, invoke the `focusFirstInput` method o
   <PincodeInput />
 </Pincode>
 
-<br />
-
 <button on:click={ref.focusFirstInput}>
   Focus first input
 </button>
@@ -251,8 +253,6 @@ To focus the next input with no value, invoke the `focusNextEmptyInput` method.
   <PincodeInput />
 </Pincode>
 
-<br />
-
 <button on:click={pincodeRef.focusNextEmptyInput}>
   Focus next empty input
 </button>
@@ -278,8 +278,6 @@ To focus the last input, invoke the `focusLastInput` method.
   <PincodeInput />
 </Pincode>
 
-<br />
-
 <button on:click={passcodeRef.focusLastInput}>
   Focus last input
 </button>
@@ -320,7 +318,7 @@ This component is minimally styled; override the default styles by targeting the
 
 ### Unstyled components
 
-Alternatively, you can use the unstyled components located in the `svelte/src/unstyled` folder.
+Use the unstyled components located in the `svelte/src/unstyled` folder if you prefer to style the components from scratch.
 
 ```html
 <script>
@@ -335,7 +333,7 @@ Alternatively, you can use the unstyled components located in the `svelte/src/un
 
 #### Props
 
-| Prop name         | Value                           | Default          |
+| Name              | Value                           | Default          |
 | :---------------- | :------------------------------ | :--------------- |
 | code              | `string[]`                      | `[]`             |
 | value             | `string`                        | `""`             |
@@ -364,10 +362,10 @@ Alternatively, you can use the unstyled components located in the `svelte/src/un
 
 #### Props
 
-| Prop name | Value                                                      |
-| :-------- | :--------------------------------------------------------- |
-| id        | `string` (default: `"input" + Math.random().toString(36)`) |
-| ref       | `HTMLInputElement` (default: `null`)                       |
+| Name | Type               | Default value                          |
+| :--- | :----------------- | :------------------------------------- |
+| id   | `string`           | `"input" + Math.random().toString(36)` |
+| ref  | `HTMLInputElement` | `null`                                 |
 
 #### Forwarded Events
 
@@ -379,8 +377,6 @@ Alternatively, you can use the unstyled components located in the `svelte/src/un
 
 Svelte version 3.31 or greater is required to use this component with TypeScript.
 
-TypeScript definitions are located in the [types folder](./types).
-
 ## Changelog
 
 [CHANGELOG.md](CHANGELOG.md)

diff --git a/package.json b/package.json
@@ -5,20 +5,19 @@
   "description": "Declarative pin code component for Svelte",
   "author": "Eric Liu (https://github.com/metonym)",
   "svelte": "./src/index.js",
-  "main": "./lib/index.js",
-  "module": "./lib/index.mjs",
-  "types": "./types/index.d.ts",
+  "main": "./src/index.js",
+  "types": "./src/index.d.ts",
   "sideEffects": false,
   "scripts": {
     "dev": "rollup -cw",
     "predeploy": "rollup -c",
-    "deploy": "npx gh-pages -d dist",
-    "prepack": "BUNDLE=true rollup -c",
+    "deploy": "gh-pages -d dist",
     "test": "svelte-check --workspace test"
   },
   "devDependencies": {
-    "svelte": "^3.44.0",
-    "svelte-check": "^2.2.7",
+    "gh-pages": "^3.2.3",
+    "svelte": "^3.44.1",
+    "svelte-check": "^2.2.8",
     "svelte-readme": "^3.6.0"
   },
   "repository": {
@@ -35,9 +34,7 @@
     "input"
   ],
   "files": [
-    "lib",
-    "src",
-    "types"
+    "src"
   ],
   "prettier": {
     "printWidth": 120,

diff --git a/rollup.config.js b/rollup.config.js
@@ -1,41 +1,26 @@
-import resolve from "@rollup/plugin-node-resolve";
-import svelte from "rollup-plugin-svelte";
 import svelteReadme from "svelte-readme";
-import pkg from "./package.json";
 
-export default () => {
-  if (!process.env.BUNDLE) return svelteReadme({
-    style: `
-      [data-pincode], [data-pincode] ~ div {
-        margin-bottom: 16px;
-      }
+export default svelteReadme({
+  style: `
+    [data-pincode], [data-pincode] ~ div {
+      margin-bottom: 16px;
+    }
 
-      .complete {
-        font-weight: 700;
-      }
+    .complete {
+      font-weight: 700;
+    }
 
-      .success {
-        color: #24a148;
-      }
+    .success {
+      color: #24a148;
+    }
 
-      .error {
-        color: #da1e28;
-      }
-   `
-  });
+    .error {
+      color: #da1e28;
+    }
 
-  return ["es", "umd"].map((format) => {
-    const UMD = format === "umd";
-
-    return {
-      input: pkg.svelte,
-      output: {
-        format,
-        file: UMD ? pkg.main : pkg.module,
-        name: UMD ? pkg.name : undefined,
-        exports: "named",
-      },
-      plugins: [svelte({ emitCss: false }), resolve()],
-    };
-  });
-};
+    .code-fence button {
+      display: block;
+      margin-bottom: 0.25rem;
+    }
+ `,
+});
diff --git a/types/Pincode.svelte.d.ts → src/Pincode.svelte.d.ts b/types/Pincode.svelte.d.ts → src/Pincode.svelte.d.ts
diff --git a/types/PincodeInput.svelte.d.ts → src/PincodeInput.svelte.d.ts b/types/PincodeInput.svelte.d.ts → src/PincodeInput.svelte.d.ts
diff --git a/types/index.d.ts → src/index.d.ts b/types/index.d.ts → src/index.d.ts
diff --git a/src/unstyled/Pincode.svelte.d.ts b/src/unstyled/Pincode.svelte.d.ts
@@ -0,0 +1 @@
+export { default, Code, PincodeProps } from "../Pincode.svelte";
diff --git a/src/unstyled/PincodeInput.svelte.d.ts b/src/unstyled/PincodeInput.svelte.d.ts
@@ -0,0 +1 @@
+export { default, PincodeInputProps } from "../PincodeInput.svelte";
diff --git a/test/Pincode.test.svelte b/test/Pincode.test.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
   import { onMount } from "svelte";
-
-  import { Pincode, PincodeInput } from "../types";
-  import { Code } from "../types/Pincode.svelte";
-  import UPincode from "../types/src/unstyled/Pincode.svelte";
-  import UPincodeInput from "../types/src/unstyled/PincodeInput.svelte";
+  import { Pincode, PincodeInput } from "../src";
+  import { Code } from "../src/Pincode.svelte";
+  import UPincode, { Code as Code2 } from "../src/unstyled/Pincode.svelte";
+  import UPincodeInput, { PincodeInputProps } from "../src/unstyled/PincodeInput.svelte";
 
   const correctCode = "1234";
 
   let ref: Pincode;
-  let code: Code = [];
+  let code: Code | Code2 = [];
   let value = "";
+  let inputProps: PincodeInputProps = { value: "" };
 
   $: complete = value.length === correctCode.length;
   $: success = complete && value === correctCode;
@@ -33,7 +33,7 @@
   }}"
 >
   <PincodeInput on:focus on:blur on:input on:keydown />
-  <PincodeInput />
+  <PincodeInput {...inputProps} />
   <PincodeInput />
   <PincodeInput />
 </Pincode>

diff --git a/types/src/unstyled/Pincode.svelte.d.ts b/types/src/unstyled/Pincode.svelte.d.ts
diff --git a/types/src/unstyled/PincodeInput.svelte.d.ts b/types/src/unstyled/PincodeInput.svelte.d.ts