svelte-copyright 2.1.0 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +56 -3
  2. package/dist/Copyright.svelte +40 -13
  3. package/dist/Copyright.svelte.d.ts +11 -21
  4. package/dist/index.d.ts +4 -1
  5. package/dist/index.js +1 -0
  6. package/package.json +48 -26
package/README.md CHANGED
@@ -18,16 +18,20 @@
18
18
 
19
19
  A [Svelte](https://svelte.dev/) component to format and display a copyright notice.
20
20
 
21
- [**Try me on CodeSandbox!**](https://codesandbox.io/s/svelte-copyright-x0ibp)
21
+ Requires **Svelte 5**. For Svelte 4, use `svelte-copyright@2`.
22
22
 
23
23
  ### Installation
24
24
 
25
- This package is available on NPM, and you can install it with `npm` or `yarn`:
25
+ This package is available on NPM. Install it with whichever package manager you use:
26
26
 
27
27
  ```
28
28
  npm install -D svelte-copyright
29
29
 
30
30
  yarn add -D svelte-copyright
31
+
32
+ pnpm add -D svelte-copyright
33
+
34
+ bun add -d svelte-copyright
31
35
  ```
32
36
 
33
37
  Note that it only needs to be installed as a devDependency, like `svelte` itself.
@@ -62,11 +66,13 @@ All props are optional (as they all have default values).
62
66
 
63
67
  **Prop** | **Possible Values** | **Default Value** | **Description**
64
68
  ---|---|---|---
65
- `date` | [RFC2822/ISO8601](https://tools.ietf.org/html/rfc2822#page-14) date string | `new Date()` | Date for the copyright year.
69
+ `date` | `Date` | `new Date()` | Date for the copyright year.
66
70
  `format` | `'numeric'` \| `'2-digit'` | `'numeric'` | Format for the copyright year.
67
71
  `position` | `'pre'` \| `'post'` | `'pre'` | Position of the Copyright relative to the contents you provide.
68
72
  `showRange` | `true` \| `false` | `false` | If true, displays a range from the `date` prop to the current year (ie: '2010 - 2020').
69
73
 
74
+ All props are reactive. Updating any of them re-renders the notice.
75
+
70
76
  **Additional Props**
71
77
 
72
78
  Note that any additonal props will be spread onto the component. This allows you to do things like provide a custom `class` name to your component.
@@ -83,10 +89,57 @@ Note that any additonal props will be spread onto the component. This allows you
83
89
  </style>
84
90
  ```
85
91
 
92
+ #### TypeScript
93
+
94
+ Types ship with the package. The props type is exported if you need it, along with the `FORMAT` and `POSITION` constants:
95
+
96
+ ```svelte
97
+ <script lang="ts">
98
+ import Copyright, { FORMAT, type CopyrightProps } from 'svelte-copyright';
99
+
100
+ const props: CopyrightProps = {
101
+ format: FORMAT.TWO_DIGIT,
102
+ showRange: true,
103
+ };
104
+ </script>
105
+
106
+ <Copyright {...props}>
107
+ Dave Lunny
108
+ </Copyright>
109
+ ```
110
+
111
+ ### Migrating from v2
112
+
113
+ v3 requires Svelte 5. The props are unchanged, so most usage needs no edits.
114
+
115
+ - Content is now a [snippet](https://svelte.dev/docs/svelte/snippet) rather than a slot. Passing children the normal way (`<Copyright>Dave Lunny</Copyright>`) works exactly as before.
116
+ - The displayed date is now `$derived`. Previously it was computed once when the component initialised, so changing `date` after mount did nothing. Now it updates.
117
+
86
118
  ### Contributing
87
119
 
88
120
  Feel free to [file an issue](https://github.com/himynameisdave/svelte-copyright/issues/new) or open a pull request. Ensure that you add tests for any new functionality.
89
121
 
122
+ #### Development
123
+
124
+ This repo uses [Bun](https://bun.com/) for package management. Installing it is the only prerequisite. Everything else comes from `bun install`.
125
+
126
+ ```
127
+ bun install # install dependencies
128
+ bun run dev # run the demo app at localhost:5173
129
+ bun run test # playwright + vitest
130
+ bun run test:unit # just the unit/component tests
131
+ bun run lint # eslint
132
+ bun run check # svelte-check
133
+ bun run package # build dist/ and validate it with publint
134
+
135
+ bun run verify:consumer # check an npm consumer can install the tarball
136
+ bun run verify:consumer pnpm # ...or yarn, pnpm, bun
137
+ ```
138
+
139
+ Bun is a development detail only. The package is published to NPM as a normal tarball, and consumers can install it with any package manager.
140
+
141
+ `verify:consumer` is what keeps that honest. It packs the tarball with `npm pack`, installs it into a throwaway Svelte app using the package manager you name, and bundles that app, so a broken `exports` map or a file missing from `files` fails loudly instead of reaching the registry. CI runs it for `npm`, `yarn` and `pnpm` on every push.
142
+
90
143
  ### Inspiration
91
144
 
92
145
  This was inspired by [`react-copyright`](https://github.com/jasonbellamy/react-copyright) by [Jason Bellamy](https://github.com/jasonbellamy).
package/dist/Copyright.svelte CHANGED
@@ -1,21 +1,48 @@
1
- <script>import { FORMAT, POSITION } from "./constants.js";
2
- import { getDisplayDate, today } from "./utils/index.js";
3
- export let date = today();
4
- export let format = FORMAT.NUMERIC;
5
- export let position = POSITION.PRE;
6
- export let showRange = false;
7
- const displayDate = getDisplayDate({
8
- showRange,
9
- format,
10
- date
11
- });
1
+ <script lang="ts" module>
2
+ import type { Snippet } from 'svelte';
3
+ import type { HTMLAttributes } from 'svelte/elements';
4
+ import type { Format, Position } from './types.js';
5
+
6
+ export type CopyrightProps = HTMLAttributes<HTMLSpanElement> & {
7
+ // The date year to be displayed (default: today)
8
+ date?: Date;
9
+ // Date format ('numeric' | '2-digit')
10
+ format?: Format;
11
+ // Position of the copyright + date message relative to the component's children.
12
+ position?: Position;
13
+ // If a date range should be shown. If this is the case, the date of the initial year should be provided.
14
+ showRange?: boolean;
15
+ // The content displayed alongside the copyright notice.
16
+ children?: Snippet;
17
+ };
18
+ </script>
19
+
20
+ <script lang="ts">
21
+ import { FORMAT, POSITION } from './constants.js';
22
+ import { getDisplayDate, today } from './utils/index.js';
23
+
24
+ let {
25
+ date = today(),
26
+ format = FORMAT.NUMERIC,
27
+ position = POSITION.PRE,
28
+ showRange = false,
29
+ children,
30
+ ...rest
31
+ }: CopyrightProps = $props();
32
+
33
+ // Derived so that the notice updates if any of the props change.
34
+ const displayDate = $derived(getDisplayDate({
35
+ showRange,
36
+ format,
37
+ date,
38
+ }));
12
39
  </script>
13
40
 
14
- <span {...$$restProps}>
41
+ <span {...rest}>
15
42
  {#if position === POSITION.PRE}
16
43
  &#169; Copyright {displayDate}
17
44
  {/if}
18
- <slot />
45
+ {@render children?.()}
19
46
  {#if position === POSITION.POST}
20
47
  &#169; Copyright {displayDate}
21
48
  {/if}
package/dist/Copyright.svelte.d.ts CHANGED
@@ -1,23 +1,13 @@
1
- import { SvelteComponent } from "svelte";
1
+ import type { Snippet } from 'svelte';
2
+ import type { HTMLAttributes } from 'svelte/elements';
2
3
  import type { Format, Position } from './types.js';
3
- declare const __propDef: {
4
- props: {
5
- [x: string]: any;
6
- date?: Date | undefined;
7
- format?: Format | undefined;
8
- position?: Position | undefined;
9
- showRange?: boolean | undefined;
10
- };
11
- events: {
12
- [evt: string]: CustomEvent<any>;
13
- };
14
- slots: {
15
- default: {};
16
- };
4
+ export type CopyrightProps = HTMLAttributes<HTMLSpanElement> & {
5
+ date?: Date;
6
+ format?: Format;
7
+ position?: Position;
8
+ showRange?: boolean;
9
+ children?: Snippet;
17
10
  };
18
- export type CopyrightProps = typeof __propDef.props;
19
- export type CopyrightEvents = typeof __propDef.events;
20
- export type CopyrightSlots = typeof __propDef.slots;
21
- export default class Copyright extends SvelteComponent<CopyrightProps, CopyrightEvents, CopyrightSlots> {
22
- }
23
- export {};
11
+ declare const Copyright: import("svelte").Component<CopyrightProps, {}, "">;
12
+ type Copyright = ReturnType<typeof Copyright>;
13
+ export default Copyright;
package/dist/index.d.ts CHANGED
@@ -1 +1,4 @@
1
- export { default } from "./Copyright.svelte";
1
+ export { default } from './Copyright.svelte';
2
+ export type { CopyrightProps } from './Copyright.svelte';
3
+ export { FORMAT, POSITION } from './constants.js';
4
+ export type { Format, Position } from './types.js';
package/dist/index.js CHANGED
@@ -1,2 +1,3 @@
1
1
  // Reexport your entry components here
2
2
  export { default } from './Copyright.svelte';
3
+ export { FORMAT, POSITION } from './constants.js';
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "svelte-copyright",
3
3
  "description": "A Svelte component to format and display a copyright notice.",
4
- "version": "2.1.0",
4
+ "version": "3.0.0",
5
5
  "author": {
6
6
  "name": "himynameisdave",
7
7
  "email": "d@velunny.com",
@@ -13,19 +13,20 @@
13
13
  "types": "./dist/index.d.ts",
14
14
  "scripts": {
15
15
  "dev": "vite dev",
16
- "build": "vite build && npm run package",
16
+ "build": "vite build && bun run package",
17
17
  "preview": "vite preview",
18
18
  "package": "svelte-kit sync && svelte-package && publint",
19
- "prepublishOnly": "npm run package",
20
- "test": "npm run test:integration && npm run test:unit",
19
+ "prepublishOnly": "svelte-kit sync && svelte-package && publint",
21
20
  "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
22
21
  "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
23
- "lint": "eslint . --ext .js,.ts,.svelte",
24
- "lint:fix": "eslint . --ext .js,.ts,.svelte --fix",
22
+ "lint": "svelte-kit sync && eslint . --ext .js,.ts,.svelte",
23
+ "lint:fix": "svelte-kit sync && eslint . --ext .js,.ts,.svelte --fix",
24
+ "test": "bun run test:integration && bun run test:unit",
25
25
  "test:integration": "playwright test",
26
26
  "test:unit": "vitest --run",
27
27
  "test:unit:watch": "vitest",
28
- "release": "npm run package && np --no-yarn"
28
+ "release": "bun run package && np",
29
+ "verify:consumer": "node ./scripts/verify-consumer.mjs"
29
30
  },
30
31
  "exports": {
31
32
  ".": {
@@ -40,32 +41,51 @@
40
41
  "!dist/**/*.spec.*"
41
42
  ],
42
43
  "engines": {
43
- "node": ">= 16"
44
+ "node": ">= 20"
44
45
  },
45
46
  "lint-staged": {
46
47
  "*.ts": "eslint ./ --fix --quiet",
47
48
  "*.svelte": "eslint ./ --fix --quiet"
48
49
  },
49
50
  "peerDependencies": {
50
- "svelte": "^4.0.0"
51
+ "svelte": "^5.0.0"
51
52
  },
52
53
  "devDependencies": {
53
- "@playwright/test": "^1.37.1",
54
- "@sveltejs/adapter-auto": "^2.0.0",
55
- "@sveltejs/kit": "^1.24.0",
56
- "@sveltejs/package": "^2.2.2",
57
- "eslint-config-himynameisdave": "^8.1.0",
58
- "husky": "^8.0.3",
59
- "less": "^4.2.0",
60
- "lint-staged": "^14.0.1",
61
- "np": "^8.0.4",
62
- "publint": "^0.2.2",
63
- "svelte": "^4.2.0",
64
- "svelte-check": "^3.5.1",
65
- "tslib": "^2.6.2",
66
- "typescript": "^5.2.2",
67
- "vite": "^4.4.9",
68
- "vitest": "^0.34.3"
54
+ "@playwright/test": "^1.61.1",
55
+ "@sveltejs/adapter-auto": "^7.0.1",
56
+ "@sveltejs/kit": "^2.70.1",
57
+ "@sveltejs/package": "^2.5.8",
58
+ "@sveltejs/vite-plugin-svelte": "^6.2.4",
59
+ "@testing-library/dom": "^10.4.1",
60
+ "@testing-library/jest-dom": "^7.0.0",
61
+ "@testing-library/svelte": "^5.4.2",
62
+ "@types/node": "^22.20.1",
63
+ "@typescript-eslint/eslint-plugin": "^7.18.0",
64
+ "@typescript-eslint/parser": "^7.18.0",
65
+ "eslint": "^8.57.1",
66
+ "eslint-config-himynameisdave": "^9.0.0",
67
+ "eslint-plugin-import": "^2.32.0",
68
+ "eslint-plugin-jest": "^27.9.0",
69
+ "eslint-plugin-jsx-a11y": "^6.10.2",
70
+ "eslint-plugin-n": "^16.6.2",
71
+ "eslint-plugin-promise": "^6.6.0",
72
+ "eslint-plugin-react": "^7.37.5",
73
+ "eslint-plugin-react-hooks": "^4.6.2",
74
+ "eslint-plugin-svelte": "^2.46.1",
75
+ "eslint-plugin-unicorn": "^51.0.1",
76
+ "husky": "^9.1.7",
77
+ "jsdom": "^29.1.1",
78
+ "less": "^4.8.0",
79
+ "lint-staged": "^17.2.0",
80
+ "np": "^12.0.0",
81
+ "publint": "^0.3.22",
82
+ "svelte": "^5.56.7",
83
+ "svelte-check": "^4.7.3",
84
+ "svelte-eslint-parser": "^0.43.0",
85
+ "tslib": "^2.8.1",
86
+ "typescript": "^6.0.3",
87
+ "vite": "^7.3.6",
88
+ "vitest": "^4.1.10"
69
89
  },
70
90
  "keywords": [
71
91
  "svelte",
@@ -87,5 +107,7 @@
87
107
  "copy-protection",
88
108
  "legal-footer"
89
109
  ],
90
- "private": false
110
+ "private": false,
111
+ "license": "MIT",
112
+ "packageManager": "bun@1.3.13"
91
113
  }