@jasonshimmy/custom-elements-runtime 1.1.0 → 1.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Jason Shimkoski
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -2,7 +2,7 @@
 
 [![Patreon](https://img.shields.io/badge/support-patreon-orange?logo=patreon)](https://patreon.com/jshimkoski)
 
-> **Ultra-powerful, type-safe runtime for fast, reactive, and maintainable web components.**
+> **The Complete Web Components Framework**
 
 Build modern components with strict TypeScript, zero dependencies, and a clean functional API. Designed for speed, standards compliance, and productivity.
 
@@ -24,10 +24,11 @@ Build modern components with strict TypeScript, zero dependencies, and a clean f
 1. **Install:** `npm install @jasonshimmy/custom-elements-runtime`
 2. **Create a Component:**
 ```ts
-import { component, ref, html, useEmit } from '@jasonshimmy/custom-elements-runtime';
+import { component, ref, html, useEmit, useProps } from '@jasonshimmy/custom-elements-runtime';
 
-component('my-counter', ({ initialCount = 0 }) => {
-  const count = ref(initialCount);
+component('my-counter', () => {
+  const props = useProps({ initialCount: 0 });
+  const count = ref(props.initialCount);
   const emit = useEmit();
 
   const handleClick = () => {
@@ -61,6 +62,83 @@ component('my-counter', ({ initialCount = 0 }) => {
   ```
 4. **Enjoy instant reactivity and type safety!**
 
+## 📦 Complete API Reference
+
+### Core API
+```ts
+import {
+  // Component Creation
+  component,
+  
+  // Template & Styling
+  html,
+  css,
+  
+  // Reactive State
+  ref,
+  computed,
+  watch,
+  
+  // Hooks
+  useProps,
+  useEmit,
+  useOnConnected,
+  useOnDisconnected,
+  useOnAttributeChanged,
+  useOnError,
+  useStyle,
+  
+  // Directives
+  when,
+  each,
+  match,
+  anchorBlock,
+  
+  // Directive Enhancements
+  unless,
+  whenEmpty,
+  whenNotEmpty,
+  eachWhere,
+  switchOnLength,
+  eachGroup,
+  eachPage,
+  switchOnPromise,
+  whenMedia,
+  responsive,
+  mediaVariants,
+  responsiveOrder,
+  
+  // Transitions
+  Transition,
+  TransitionGroup,
+  transitionPresets,
+  createTransitionPreset,
+  getTransitionStyleSheet,
+  
+  // Event Bus
+  eventBus,
+  emit,      // Shorthand for eventBus.emit
+  on,        // Shorthand for eventBus.on
+  off,       // Shorthand for eventBus.off
+  once,      // Shorthand for eventBus.once
+  listen,    // DOM event listener wrapper
+  
+  // Store
+  createStore,
+  
+  // Router
+  useRouter,
+  initRouter,
+  matchRoute,
+  matchRouteSSR,
+  parseQuery,
+  
+  // SSR & Types
+  renderToString,
+  VNode,
+} from '@jasonshimmy/custom-elements-runtime';
+```
+
 ## 📖 Documentation Index
 
 Explore the complete documentation for every runtime feature:
@@ -71,9 +149,19 @@ Explore the complete documentation for every runtime feature:
 ### 🏗️ **Core Features**
 - [🧩 Template](./docs/template.md) - Template syntax and html function
 - [🧭 Directives](./docs/directives.md) - Conditional rendering with `when`, `each`, and `match`
-- [🛠️ Directive Enhancements](./docs/directive-enhancements.md) - Advanced directive utilities (`unless`, `whenEmpty`, etc.)
+- [🛠️ Directive Enhancements](./docs/directive-enhancements.md) - Advanced directive utilities:
+  - `unless` - Inverse of `when`
+  - `whenEmpty` / `whenNotEmpty` - Collection checks
+  - `eachWhere` - Filtered iteration
+  - `switchOnLength` - Render based on array length
+  - `eachGroup` - Group and render items
+  - `eachPage` - Pagination support
+  - `switchOnPromise` - Async state rendering
+  - `whenMedia` - Media query responsive rendering
+  - `responsive` - Responsive utilities
 - [🔗 Bindings](./docs/bindings.md) - Data binding with `:prop`, `@event`, `:model`, `:class`, `:style`
 - [🔔 Events Deep Dive](./docs/events-deep-dive.md) - Custom event emission and handling patterns
+- [🎬 Transitions Guide](./docs/transitions.md) - Animation and transition effects
 
 ### 🎨 **Styling**
 - [🎨 JIT CSS](./docs/jit-css.md) - On-demand utility-first styling system