@ape-egg/vibe 1.3.0 → 1.3.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## [1.3.1] - 2025-02-06
+
+### Fixed
+
+- **Package exports**: Added missing `./component` export to package.json
+  - Enables proper import: `import component from '@ape-egg/vibe/component'`
+  - Previously `component.js` was included in package files but not exposed via exports field
+
+---
+
 ## [1.3.0] - 2025-02-06
 
 ### Added

package/component.js

@@ -0,0 +1,59 @@
+// Component state entry point
+// Usage:
+//   <component>
+//     <script type="module">
+//       import component from 'vibe/component.js';
+//       component({ count: 0 }, { debug: false }, 'body');
+//     </script>
+//     <div>@[this.count]</div>
+//   </component>
+//
+// Or with class:
+//   <div class="component">...</div>
+
+import { generateComponentId } from './runtime/component-state.js';
+import { ensureBoot } from './boot.js';
+
+const component = (state = {}, config, targetSelector) => {
+  // Find the first unprocessed INLINE component wrapper
+  // Skip <component src=""> (fetched components) - they don't need state tagging
+  // Scripts execute in DOM order, so we claim wrappers in DOM order too
+  // Supports: <component> or <div class="component">
+  const allWrappers = Array.from(document.querySelectorAll('component:not([src]), div.component:not([src])'));
+  const wrapper = allWrappers.find(el => !el.hasAttribute('data-vibe-component-id'));
+
+  if (!wrapper) {
+    console.warn('[vibe] component() must be called inside <component> or <div class="component">');
+    return;
+  }
+
+  // Generate unique component ID
+  const componentId = generateComponentId();
+
+  // Tag only the wrapper element
+  // All descendants will find it via element.closest('[data-vibe-component-id]')
+  wrapper.setAttribute('data-vibe-component-id', componentId);
+
+  // Register component state in shared registry
+  if (!window.__vibeComponents) {
+    window.__vibeComponents = {};
+  }
+  window.__vibeComponents[componentId] = state;
+
+  // Store config (first caller wins)
+  if (config && !window.__vibeConfig) {
+    window.__vibeConfig = config;
+  }
+
+  // Store targetSelector (first caller wins)
+  if (targetSelector && !window.__vibeTargetSelector) {
+    window.__vibeTargetSelector = targetSelector;
+  }
+
+  // Ensure boot happens
+  ensureBoot();
+
+  return componentId;
+};
+
+export default component;

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@ape-egg/vibe",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "type": "module",
   "description": "Runtime-first reactivity with optional compiler",
   "main": "index.js",
   "homepage": "https://vibe.korte.kim",
   "exports": {
     ".": "./index.js",
+    "./component": "./component.js",
     "./runtime": "./runtime/index.js",
     "./compiler": "./compiler/bin/vibe-compile.js"
   },
@@ -15,6 +16,7 @@
   },
   "files": [
     "index.js",
+    "component.js",
     "vibe.css",
     "runtime/",
     "compiler/bin/",