@sekiui/elements 0.0.15 → 0.0.17
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.
- package/README.md +168 -7
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -14,10 +14,62 @@ Modern, accessible Web Components library built with Stencil.js, inspired by sha
|
|
|
14
14
|
|
|
15
15
|
## Installation
|
|
16
16
|
|
|
17
|
+
### Via npm (Recommended)
|
|
18
|
+
|
|
17
19
|
```bash
|
|
18
20
|
npm install @sekiui/elements
|
|
19
21
|
```
|
|
20
22
|
|
|
23
|
+
### Via CDN (No Build Required)
|
|
24
|
+
|
|
25
|
+
For quick prototyping or projects without a build system, you can load SekiUI directly from a CDN:
|
|
26
|
+
|
|
27
|
+
**Latest Stable Version (GitHub Pages):**
|
|
28
|
+
```html
|
|
29
|
+
<script type="module" src="https://sekiui.github.io/SekiUI/latest/sekiui.esm.js"></script>
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
**Latest Stable Version (jsDelivr):**
|
|
33
|
+
```html
|
|
34
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/@sekiui/elements@latest/dist/sekiui.esm.js"></script>
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
**Specific Version (GitHub Pages):**
|
|
38
|
+
```html
|
|
39
|
+
<script type="module" src="https://sekiui.github.io/SekiUI/v1.0.0/sekiui.esm.js"></script>
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
**Specific Version (jsDelivr):**
|
|
43
|
+
```html
|
|
44
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/@sekiui/elements@1.0.0/dist/sekiui.esm.js"></script>
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
**Complete Example:**
|
|
48
|
+
```html
|
|
49
|
+
<!DOCTYPE html>
|
|
50
|
+
<html lang="en">
|
|
51
|
+
<head>
|
|
52
|
+
<meta charset="UTF-8">
|
|
53
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
54
|
+
<title>SekiUI via CDN</title>
|
|
55
|
+
</head>
|
|
56
|
+
<body>
|
|
57
|
+
<!-- Load SekiUI from CDN -->
|
|
58
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/@sekiui/elements@latest/dist/sekiui.esm.js"></script>
|
|
59
|
+
|
|
60
|
+
<!-- Use components directly -->
|
|
61
|
+
<seki-button variant="default">Click me</seki-button>
|
|
62
|
+
</body>
|
|
63
|
+
</html>
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
**CDN Notes:**
|
|
67
|
+
- ✅ HTTPS enabled on all CDN URLs
|
|
68
|
+
- ✅ CORS headers configured for cross-origin requests
|
|
69
|
+
- ✅ Versioned URLs cached long-term (immutable)
|
|
70
|
+
- ✅ Latest URLs cached short-term (updates automatically)
|
|
71
|
+
- ⚠️ For production, use versioned URLs to ensure consistency
|
|
72
|
+
|
|
21
73
|
## Usage
|
|
22
74
|
|
|
23
75
|
### Web Components (Vanilla JS)
|
|
@@ -40,17 +92,84 @@ function App() {
|
|
|
40
92
|
|
|
41
93
|
### Vue
|
|
42
94
|
|
|
95
|
+
**Option 1: Global Registration (Recommended)**
|
|
96
|
+
|
|
97
|
+
In your `main.js` or `main.ts`:
|
|
98
|
+
|
|
99
|
+
```js
|
|
100
|
+
import { createApp } from 'vue';
|
|
101
|
+
import App from './App.vue';
|
|
102
|
+
import { defineCustomElements } from '@sekiui/elements/loader';
|
|
103
|
+
|
|
104
|
+
// Register custom elements once globally
|
|
105
|
+
defineCustomElements();
|
|
106
|
+
|
|
107
|
+
createApp(App).mount('#app');
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
Then use anywhere in your components:
|
|
111
|
+
|
|
112
|
+
```vue
|
|
113
|
+
<template>
|
|
114
|
+
<seki-button variant="default">Click me</seki-button>
|
|
115
|
+
</template>
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
**Option 2: Component-level Registration**
|
|
119
|
+
|
|
43
120
|
```vue
|
|
44
121
|
<template>
|
|
45
122
|
<seki-button variant="default">Click me</seki-button>
|
|
46
123
|
</template>
|
|
47
124
|
|
|
48
|
-
<script>
|
|
125
|
+
<script setup>
|
|
49
126
|
import { defineCustomElements } from '@sekiui/elements/loader';
|
|
50
127
|
defineCustomElements();
|
|
51
128
|
</script>
|
|
52
129
|
```
|
|
53
130
|
|
|
131
|
+
**Vue 3 Config (Optional):**
|
|
132
|
+
|
|
133
|
+
To prevent Vue warnings about unknown custom elements, add to `vite.config.js`:
|
|
134
|
+
|
|
135
|
+
```js
|
|
136
|
+
export default {
|
|
137
|
+
vue: {
|
|
138
|
+
template: {
|
|
139
|
+
compilerOptions: {
|
|
140
|
+
isCustomElement: (tag) => tag.startsWith('seki-')
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
### Angular
|
|
148
|
+
|
|
149
|
+
In your `app.module.ts`:
|
|
150
|
+
|
|
151
|
+
```typescript
|
|
152
|
+
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
|
153
|
+
import { BrowserModule } from '@angular/platform-browser';
|
|
154
|
+
import { defineCustomElements } from '@sekiui/elements/loader';
|
|
155
|
+
|
|
156
|
+
// Register custom elements
|
|
157
|
+
defineCustomElements();
|
|
158
|
+
|
|
159
|
+
@NgModule({
|
|
160
|
+
schemas: [CUSTOM_ELEMENTS_SCHEMA], // Tell Angular to allow custom elements
|
|
161
|
+
imports: [BrowserModule],
|
|
162
|
+
// ...
|
|
163
|
+
})
|
|
164
|
+
export class AppModule { }
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
Then use in your templates:
|
|
168
|
+
|
|
169
|
+
```html
|
|
170
|
+
<seki-button variant="default">Click me</seki-button>
|
|
171
|
+
```
|
|
172
|
+
|
|
54
173
|
## Development Setup
|
|
55
174
|
|
|
56
175
|
### Prerequisites
|
|
@@ -200,6 +319,9 @@ The automated GitHub Actions workflow:
|
|
|
200
319
|
6. ✅ **Validates build** - Ensures dist/ folder exists
|
|
201
320
|
7. 🚀 **Publishes to npm** - Uploads to npm registry
|
|
202
321
|
8. 🏷️ **Applies dist-tag** - Uses `latest` for stable, `next` for pre-releases
|
|
322
|
+
9. 📡 **Deploys to CDN** - Uploads to GitHub Pages (versioned path)
|
|
323
|
+
10. 🔄 **Updates latest CDN** - Updates `/latest/` path for stable releases only
|
|
324
|
+
11. 📋 **Reports URLs** - Logs CDN URLs in workflow output
|
|
203
325
|
|
|
204
326
|
### Monitoring Workflow Status
|
|
205
327
|
|
|
@@ -211,10 +333,12 @@ After pushing a tag:
|
|
|
211
333
|
4. Green checkmark = successful publish
|
|
212
334
|
5. Red X = failure (check logs for details)
|
|
213
335
|
|
|
214
|
-
###
|
|
336
|
+
### First-Time Setup (Maintainers Only)
|
|
215
337
|
|
|
216
338
|
**One-time setup required before releasing:**
|
|
217
339
|
|
|
340
|
+
#### 1. NPM_TOKEN Setup
|
|
341
|
+
|
|
218
342
|
1. **Generate npm token:**
|
|
219
343
|
- Log in to [npmjs.com](https://npmjs.com)
|
|
220
344
|
- Go to Account → Access Tokens
|
|
@@ -229,11 +353,35 @@ After pushing a tag:
|
|
|
229
353
|
- Value: Paste your npm token
|
|
230
354
|
- Click "Add secret"
|
|
231
355
|
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
356
|
+
#### 2. GitHub Pages Setup (CDN Deployment)
|
|
357
|
+
|
|
358
|
+
**Required for CDN deployment to work:**
|
|
359
|
+
|
|
360
|
+
1. **Enable GitHub Pages:**
|
|
361
|
+
- Go to repository Settings → Pages
|
|
362
|
+
- Under "Source", select: **Deploy from a branch**
|
|
363
|
+
- Branch: **gh-pages** / (root)
|
|
364
|
+
- Click "Save"
|
|
365
|
+
|
|
366
|
+
2. **What this enables:**
|
|
367
|
+
- Automatic CDN deployment after npm publish
|
|
368
|
+
- Versioned URLs: `https://sekiui.github.io/SekiUI/v1.0.0/sekiui.esm.js`
|
|
369
|
+
- Latest URL: `https://sekiui.github.io/SekiUI/latest/sekiui.esm.js`
|
|
370
|
+
|
|
371
|
+
3. **Important notes:**
|
|
372
|
+
- CDN deployment is **non-blocking** - npm publish succeeds even if CDN fails
|
|
373
|
+
- First deployment creates the `gh-pages` branch automatically
|
|
374
|
+
- Pre-release versions deploy to versioned paths only (latest path not updated)
|
|
375
|
+
|
|
376
|
+
#### 3. Verify Setup
|
|
377
|
+
|
|
378
|
+
1. Create a test tag (e.g., v0.1.0-test.1)
|
|
379
|
+
2. Push the tag: `git push origin v0.1.0-test.1`
|
|
380
|
+
3. Check GitHub Actions logs
|
|
381
|
+
4. Verify:
|
|
382
|
+
- ✅ Package published to npm
|
|
383
|
+
- ✅ CDN URLs accessible (check workflow output for URLs)
|
|
384
|
+
5. If successful, delete the test version from npm
|
|
237
385
|
|
|
238
386
|
### Troubleshooting
|
|
239
387
|
|
|
@@ -256,6 +404,19 @@ After pushing a tag:
|
|
|
256
404
|
- Ensure `semver` CLI is installed: `npm install -g semver`
|
|
257
405
|
- Or proceed with basic validation (less accurate for pre-releases)
|
|
258
406
|
|
|
407
|
+
**CDN deployment failed but npm publish succeeded**
|
|
408
|
+
- This is expected behavior (non-blocking deployment)
|
|
409
|
+
- Check GitHub Pages is enabled in repository settings
|
|
410
|
+
- Verify `gh-pages` branch exists (created automatically on first deploy)
|
|
411
|
+
- CDN will be updated on next successful release
|
|
412
|
+
- jsDelivr CDN still works (auto-syncs from npm)
|
|
413
|
+
|
|
414
|
+
**CDN URLs not accessible**
|
|
415
|
+
- Wait 1-2 minutes for GitHub Pages to propagate
|
|
416
|
+
- Check GitHub Pages settings: Settings → Pages
|
|
417
|
+
- Verify workflow completed successfully (check Actions tab)
|
|
418
|
+
- Try jsDelivr URL as alternative: `https://cdn.jsdelivr.net/npm/@sekiui/elements@VERSION/dist/sekiui.esm.js`
|
|
419
|
+
|
|
259
420
|
## Contributing
|
|
260
421
|
|
|
261
422
|
1. Fork the repository
|