npm - @sekiui/elements - Versions diffs - 0.0.45 → 0.0.46 - Mend

@sekiui/elements 0.0.45 → 0.0.46

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 (2) hide show

package/README.md +173 -54
package/package.json +1 -1

package/README.md CHANGED Viewed

@@ -33,30 +33,19 @@ npm install @sekiui/elements
 For quick prototyping or projects without a build system, you can load SekiUI directly from a CDN.
-**⚠️ Important: You must include BOTH the CSS and JavaScript files.**
 **Latest Stable Version (unpkg):**
 ```html
-<!-- 1. Include design tokens CSS in <head> -->
-<link rel="stylesheet" href="https://unpkg.com/@sekiui/elements@latest/dist/sekiui/sekiui.css">
-<!-- 2. Load Web Components at end of <body> -->
 <script type="module" src="https://unpkg.com/@sekiui/elements@latest/dist/sekiui/sekiui.esm.js"></script>
 ```
 **Latest Stable Version (jsDelivr):**
 ```html
-<!-- 1. Include design tokens CSS in <head> -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sekiui/elements@latest/dist/sekiui/sekiui.css">
-<!-- 2. Load Web Components at end of <body> -->
 <script type="module" src="https://cdn.jsdelivr.net/npm/@sekiui/elements@latest/dist/sekiui/sekiui.esm.js"></script>
 ```
 **Specific Version (recommended for production):**
 ```html
 <!-- Replace 0.0.41 with your desired version -->
-<link rel="stylesheet" href="https://unpkg.com/@sekiui/elements@0.0.41/dist/sekiui/sekiui.css">
 <script type="module" src="https://unpkg.com/@sekiui/elements@0.0.41/dist/sekiui/sekiui.esm.js"></script>
 ```
@@ -68,9 +57,6 @@ For quick prototyping or projects without a build system, you can load SekiUI di
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>SekiUI via CDN</title>
-  <!-- STEP 1: Include SekiUI design tokens CSS -->
-  <link rel="stylesheet" href="https://unpkg.com/@sekiui/elements@latest/dist/sekiui/sekiui.css">
 </head>
 <body>
   <h1>SekiUI Components</h1>
@@ -80,7 +66,7 @@ For quick prototyping or projects without a build system, you can load SekiUI di
   <seki-button variant="secondary">Secondary</seki-button>
   <seki-input type="email" placeholder="you@example.com"></seki-input>
-  <!-- STEP 2: Load SekiUI Web Components -->
+  <!-- Load SekiUI Web Components -->
   <script type="module" src="https://unpkg.com/@sekiui/elements@latest/dist/sekiui/sekiui.esm.js"></script>
 </body>
 </html>
@@ -91,28 +77,72 @@ For quick prototyping or projects without a build system, you can load SekiUI di
 - ✅ CORS headers configured for cross-origin requests
 - ✅ Versioned URLs cached long-term (immutable)
 - ✅ Latest URLs cached short-term (updates automatically)
-- ⚠️ **You must include both CSS and JS files** for components to render with proper styling
+- ✅ Design tokens are integrated within components (no separate CSS file needed)
 - ⚠️ For production, use versioned URLs to ensure consistency
 ## Usage
-### Web Components (Vanilla JS)
+SekiUI supports both **lazy-loading all components** (recommended) and **importing individual components** for maximum bundle optimization.
+### Import Strategy
+**Option 1: Lazy-Load All Components (Recommended)**
+- Components are automatically loaded on-demand when used
+- Best developer experience with minimal setup
+- Small initial bundle (~5-10KB), components load as needed
-When using npm installation, you need to include both the CSS and JavaScript files:
+**Option 2: Import Individual Components**
+- Maximum tree-shaking and bundle optimization
+- Import only specific components you use
+- Best for performance-critical applications
+---
+### Vanilla JavaScript / HTML
+#### Option 1: Using CDN (Recommended for Quick Start)
+All components are automatically registered when you load the CDN bundle. No additional setup required.
 ```html
 <!DOCTYPE html>
 <html>
 <head>
-  <!-- Include design tokens CSS -->
-  <link rel="stylesheet" href="node_modules/@sekiui/elements/dist/sekiui/sekiui.css">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 <body>
+  <!-- Use components directly -->
   <seki-button variant="primary">Click me</seki-button>
   <seki-input type="email" placeholder="you@example.com"></seki-input>
-  <!-- Load Web Components -->
-  <script type="module" src="node_modules/@sekiui/elements/dist/sekiui/sekiui.esm.js"></script>
+  <!-- Load from CDN - components auto-register -->
+  <script type="module" src="https://unpkg.com/@sekiui/elements@latest/dist/sekiui/sekiui.esm.js"></script>
+</body>
+</html>
+```
+#### Option 2: Using npm with Lazy-Loading
+Components are loaded on-demand when used in the DOM. Requires calling `defineCustomElements()`.
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body>
+  <!-- Components load automatically when rendered -->
+  <seki-button variant="primary">Click me</seki-button>
+  <seki-input type="email" placeholder="you@example.com"></seki-input>
+  <!-- Loader enables lazy-loading -->
+  <script type="module">
+    import { defineCustomElements } from './node_modules/@sekiui/elements/loader/index.js';
+    defineCustomElements();
+  </script>
 </body>
 </html>
 ```
@@ -120,26 +150,62 @@ When using npm installation, you need to include both the CSS and JavaScript fil
 **Or with a bundler (Vite, Webpack, etc.):**
 ```js
-// Import CSS in your main JS/TS file
-import '@sekiui/elements/dist/sekiui/sekiui.css';
-// Import and register components
+// main.js - Components lazy-load on-demand
 import { defineCustomElements } from '@sekiui/elements/loader';
 defineCustomElements();
 ```
-Then use in your HTML:
+#### Option 3: Import Individual Components
+For maximum tree-shaking, import only specific components you need.
 ```html
-<seki-button variant="primary">Click me</seki-button>
-<seki-input type="email" placeholder="you@example.com"></seki-input>
+<!DOCTYPE html>
+<html>
+<body>
+  <seki-button variant="primary">Click me</seki-button>
+  <script type="module">
+    // Only imports button component (~3-5KB)
+    import { defineCustomElement } from './node_modules/@sekiui/elements/dist/components/seki-button.js';
+    defineCustomElement();
+  </script>
+</body>
+</html>
 ```
+**Or with a bundler:**
+```js
+// Only button component is bundled
+import { defineCustomElement } from '@sekiui/elements/dist/components/seki-button.js';
+defineCustomElement();
+```
+---
 ### React
+#### Using All Components (Lazy-Loaded)
+```jsx
+// App.jsx
+import { SekiButton, SekiInput } from '@sekiui/elements/react';
+function App() {
+  return (
+    <>
+      <SekiButton variant="primary">Click me</SekiButton>
+      <SekiInput type="email" placeholder="you@example.com" />
+    </>
+  );
+}
+```
+#### Using Individual Components
 ```jsx
-// Import CSS in your main index.js or App.js
-import '@sekiui/elements/dist/sekiui/sekiui.css';
+// Import only button wrapper
 import { SekiButton } from '@sekiui/elements/react';
 function App() {
@@ -147,35 +213,48 @@ function App() {
 }
 ```
-### Vue
+**Or use the native custom element directly:**
+```jsx
+import { defineCustomElement } from '@sekiui/elements/dist/components/seki-button.js';
+// Register once at app startup
+defineCustomElement();
+function App() {
+  return <seki-button variant="primary">Click me</seki-button>;
+}
+```
+---
+### Vue 3
-**Option 1: Global Registration (Recommended)**
+#### Using All Components (Lazy-Loaded)
-In your `main.js` or `main.ts`:
+**Global Registration (Recommended):**
 ```js
+// main.js
 import { createApp } from 'vue';
 import App from './App.vue';
 import { defineCustomElements } from '@sekiui/elements/loader';
-// Import CSS once globally
-import '@sekiui/elements/dist/sekiui/sekiui.css';
-// Register custom elements once globally
+// Components lazy-load on-demand
 defineCustomElements();
 createApp(App).mount('#app');
 ```
-Then use anywhere in your components:
 ```vue
+<!-- Any component can now use SekiUI -->
 <template>
   <seki-button variant="primary">Click me</seki-button>
+  <seki-input type="email" placeholder="you@example.com"></seki-input>
 </template>
 ```
-**Option 2: Component-level Registration**
+**Component-level Registration:**
 ```vue
 <template>
@@ -183,12 +262,25 @@ Then use anywhere in your components:
 </template>
 <script setup>
-import '@sekiui/elements/dist/sekiui/sekiui.css';
 import { defineCustomElements } from '@sekiui/elements/loader';
 defineCustomElements();
 </script>
 ```
+#### Using Individual Components
+```vue
+<template>
+  <seki-button variant="primary">Click me</seki-button>
+</template>
+<script setup>
+// Only imports button component
+import { defineCustomElement } from '@sekiui/elements/dist/components/seki-button.js';
+defineCustomElement();
+</script>
+```
 **Vue 3 Config (Optional):**
 To prevent Vue warnings about unknown custom elements, add to `vite.config.js`:
@@ -205,39 +297,66 @@ export default {
 }
 ```
-### Angular
-**Step 1:** Import CSS in `styles.css` or `styles.scss`:
+---
-```css
-/* src/styles.css */
-@import '@sekiui/elements/dist/sekiui/sekiui.css';
-```
+### Angular
-**Step 2:** Register custom elements in `app.module.ts`:
+#### Using All Components (Lazy-Loaded)
 ```typescript
+// app.module.ts
 import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { defineCustomElements } from '@sekiui/elements/loader';
-// Register custom elements
+// Register all components (lazy-loaded)
 defineCustomElements();
 @NgModule({
-  schemas: [CUSTOM_ELEMENTS_SCHEMA], // Tell Angular to allow custom elements
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [BrowserModule],
   // ...
 })
 export class AppModule { }
 ```
-**Step 3:** Use in your templates:
 ```html
+<!-- app.component.html -->
 <seki-button variant="primary">Click me</seki-button>
+<seki-input type="email" placeholder="you@example.com"></seki-input>
 ```
+#### Using Individual Components
+```typescript
+// app.component.ts
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { defineCustomElement } from '@sekiui/elements/dist/components/seki-button.js';
+// Only imports button component
+defineCustomElement();
+@Component({
+  selector: 'app-root',
+  template: '<seki-button variant="primary">Click me</seki-button>',
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class AppComponent {}
+```
+---
+### Bundle Size Comparison
+| Import Method | Initial Bundle | Notes |
+|--------------|----------------|-------|
+| **CDN (lazy-loaded)** | ~5-10KB | Components download on first use |
+| **Loader (all components)** | ~5-10KB | Lazy-loads components as needed |
+| **Individual component** | ~3-5KB | Only `seki-button` + shared runtime |
+| **Multiple individual** | Varies | Each component ~2-4KB + shared runtime |
+**Recommendation:** Use the loader approach for most projects. It provides excellent performance through automatic lazy-loading while maintaining the best developer experience.
 ## License
 MIT © SekiUI Team

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@sekiui/elements",
-  "version": "0.0.45",
+  "version": "0.0.46",
   "description": "Modern, accessible Web Components with shadcn/ui-inspired design",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",