changelogdev-widget 0.1.0 → 0.1.1

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 (3) hide show
  1. package/README.md +31 -7
  2. package/custom-elements.json +70 -0
  3. package/package.json +8 -2
package/README.md CHANGED
@@ -1,9 +1,20 @@
1
- # @changelogdev/widget
1
+ # changelogdev-widget
2
+
3
+ [![npm version](https://img.shields.io/npm/v/changelogdev-widget.svg)](https://www.npmjs.com/package/changelogdev-widget)
4
+ [![npm downloads](https://img.shields.io/npm/dm/changelogdev-widget.svg)](https://www.npmjs.com/package/changelogdev-widget)
5
+ [![bundle size](https://img.shields.io/bundlephobia/minzip/changelogdev-widget)](https://bundlephobia.com/package/changelogdev-widget)
6
+ [![license](https://img.shields.io/npm/l/changelogdev-widget.svg)](https://github.com/NikitaDmitrieff/changelog-widget/blob/main/LICENSE)
2
7
 
3
8
  An embeddable changelog widget for any website. Show your users what's new with a single line of code.
4
9
 
5
10
  Zero dependencies. Framework-agnostic. Built as a Web Component with Shadow DOM for complete style isolation.
6
11
 
12
+ ## Demo
13
+
14
+ > A floating bell icon appears in the bottom-right corner of your page.
15
+ > When clicked, it slides open a panel showing your latest changelog entries.
16
+ > Unread entries show a notification badge.
17
+
7
18
  ## Quick Start
8
19
 
9
20
  ### Script Tag (simplest)
@@ -11,7 +22,7 @@ Zero dependencies. Framework-agnostic. Built as a Web Component with Shadow DOM
11
22
  Drop this into any HTML page:
12
23
 
13
24
  ```html
14
- <script src="https://unpkg.com/@changelogdev/widget"></script>
25
+ <script src="https://unpkg.com/changelogdev-widget"></script>
15
26
  <changelog-widget project-id="your-project-id"></changelog-widget>
16
27
  ```
17
28
 
@@ -20,13 +31,13 @@ That's it. A floating bell icon appears in the bottom-right corner. Click it to
20
31
  ### npm
21
32
 
22
33
  ```bash
23
- npm install @changelogdev/widget
34
+ npm install changelogdev-widget
24
35
  ```
25
36
 
26
37
  **Option A: Declarative (HTML element)**
27
38
 
28
39
  ```tsx
29
- import '@changelogdev/widget'
40
+ import 'changelogdev-widget'
30
41
 
31
42
  // In your HTML or JSX:
32
43
  <changelog-widget project-id="your-project-id" theme="dark" />
@@ -35,7 +46,7 @@ import '@changelogdev/widget'
35
46
  **Option B: Programmatic**
36
47
 
37
48
  ```ts
38
- import { init } from '@changelogdev/widget'
49
+ import { init } from 'changelogdev-widget'
39
50
 
40
51
  init({
41
52
  projectId: 'your-project-id',
@@ -50,7 +61,7 @@ init({
50
61
  The widget works out of the box with React. Import once and use the custom element:
51
62
 
52
63
  ```tsx
53
- import '@changelogdev/widget'
64
+ import 'changelogdev-widget'
54
65
 
55
66
  export default function App() {
56
67
  return (
@@ -94,7 +105,7 @@ declare namespace JSX {
94
105
  </template>
95
106
 
96
107
  <script setup>
97
- import '@changelogdev/widget'
108
+ import 'changelogdev-widget'
98
109
  </script>
99
110
  ```
100
111
 
@@ -157,6 +168,13 @@ Or wrapped:
157
168
  | `date` | `string` | Yes | ISO date string (`YYYY-MM-DD`) |
158
169
  | `url` | `string` | No | Link to full entry |
159
170
 
171
+ ## Why Web Components?
172
+
173
+ - **No framework lock-in** -- works with React, Vue, Svelte, Angular, or plain HTML
174
+ - **Shadow DOM** -- styles are completely isolated; no CSS conflicts with your app
175
+ - **Native browser API** -- no runtime dependencies, no virtual DOM overhead
176
+ - **Future-proof** -- Web Components are a web standard, not a library that can be deprecated
177
+
160
178
  ## Development
161
179
 
162
180
  ```bash
@@ -166,6 +184,12 @@ npm run dev # Watch mode
166
184
  npm run typecheck
167
185
  ```
168
186
 
187
+ ## Changelog.dev
188
+
189
+ This widget is the open-source companion to [Changelog.dev](https://www.changelogdev.com) -- a hosted changelog platform for SaaS products. Create beautiful changelog pages, generate entries with AI, and embed this widget to keep your users informed.
190
+
191
+ [Create a free changelog ->](https://www.changelogdev.com/login)
192
+
169
193
  ## License
170
194
 
171
195
  MIT -- see [LICENSE](./LICENSE).
package/custom-elements.json ADDED
@@ -0,0 +1,70 @@
1
+ {
2
+ "schemaVersion": "1.0.0",
3
+ "readme": "",
4
+ "modules": [
5
+ {
6
+ "kind": "javascript-module",
7
+ "path": "src/index.ts",
8
+ "declarations": [
9
+ {
10
+ "kind": "class",
11
+ "name": "ChangelogWidget",
12
+ "tagName": "changelog-widget",
13
+ "description": "An embeddable changelog widget that shows a bell icon with unread badge. Click to view latest product updates. Built with Shadow DOM for complete style isolation.",
14
+ "attributes": [
15
+ {
16
+ "name": "project-id",
17
+ "type": { "text": "string" },
18
+ "description": "Your project ID from Changelog.dev"
19
+ },
20
+ {
21
+ "name": "api-url",
22
+ "type": { "text": "string" },
23
+ "default": "https://www.changelogdev.com/api/widget",
24
+ "description": "API endpoint for fetching changelog entries"
25
+ },
26
+ {
27
+ "name": "position",
28
+ "type": { "text": "'bottom-right' | 'bottom-left'" },
29
+ "default": "bottom-right",
30
+ "description": "Widget position on screen"
31
+ },
32
+ {
33
+ "name": "theme",
34
+ "type": { "text": "'light' | 'dark' | 'auto'" },
35
+ "default": "auto",
36
+ "description": "Color theme. 'auto' follows system preference."
37
+ },
38
+ {
39
+ "name": "accent-color",
40
+ "type": { "text": "string" },
41
+ "default": "#6366f1",
42
+ "description": "Primary color for the trigger button"
43
+ }
44
+ ],
45
+ "superclass": {
46
+ "name": "HTMLElement"
47
+ },
48
+ "customElement": true
49
+ }
50
+ ],
51
+ "exports": [
52
+ {
53
+ "kind": "js",
54
+ "name": "ChangelogWidget",
55
+ "declaration": { "name": "ChangelogWidget", "module": "src/index.ts" }
56
+ },
57
+ {
58
+ "kind": "js",
59
+ "name": "init",
60
+ "declaration": { "name": "init", "module": "src/index.ts" }
61
+ },
62
+ {
63
+ "kind": "custom-element-definition",
64
+ "name": "changelog-widget",
65
+ "declaration": { "name": "ChangelogWidget", "module": "src/index.ts" }
66
+ }
67
+ ]
68
+ }
69
+ ]
70
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "changelogdev-widget",
3
- "version": "0.1.0",
3
+ "version": "0.1.1",
4
4
  "description": "Embeddable changelog widget for any website. Show your users what's new.",
5
5
  "author": "Changelog.dev",
6
6
  "license": "MIT",
@@ -13,9 +13,13 @@
13
13
  "changelog",
14
14
  "widget",
15
15
  "web-component",
16
+ "web-components",
17
+ "custom-element",
18
+ "shadow-dom",
16
19
  "release-notes",
17
20
  "whats-new",
18
- "embeddable"
21
+ "embeddable",
22
+ "saas"
19
23
  ],
20
24
  "type": "module",
21
25
  "main": "./dist/index.cjs",
@@ -28,8 +32,10 @@
28
32
  "require": "./dist/index.cjs"
29
33
  }
30
34
  },
35
+ "customElements": "custom-elements.json",
31
36
  "files": [
32
37
  "dist",
38
+ "custom-elements.json",
33
39
  "README.md",
34
40
  "LICENSE"
35
41
  ],