@coherent.js/core 1.0.0-beta.6 → 1.0.0-beta.8

package/dist/index.cjs

@@ -27,9 +27,11 @@ __export(index_exports, {
   FORBIDDEN_CHILDREN: () => FORBIDDEN_CHILDREN,
   GlobalErrorHandler: () => GlobalErrorHandler,
   HTMLNestingError: () => HTMLNestingError,
+  Island: () => Island,
   LIFECYCLE_PHASES: () => LIFECYCLE_PHASES,
   VERSION: () => VERSION,
   checkPeerDependencies: () => checkPeerDependencies,
+  compose: () => compose,
   createActionHandlers: () => createActionHandlers,
   createAsyncErrorBoundary: () => createAsyncErrorBoundary,
   createComponent: () => createComponent,
@@ -54,6 +56,7 @@ __export(index_exports, {
   emitSync: () => emitSync,
   evaluateLazy: () => evaluateLazy,
   eventSystem: () => events_default,
+  fp: () => fp,
   getComponent: () => getComponent,
   getRegisteredComponents: () => getRegisteredComponents,
   globalDOMIntegration: () => globalDOMIntegration,
@@ -61,6 +64,7 @@ __export(index_exports, {
   h: () => h,
   handleAction: () => handleAction,
   hasChildren: () => hasChildren,
+  hoc: () => hoc,
   importPeerDependency: () => importPeerDependency,
   initializeDOMIntegration: () => initializeDOMIntegration,
   isCoherentComponent: () => isCoherentComponent,
@@ -94,7 +98,6 @@ __export(index_exports, {
   withStateUtils: () => withStateUtils
 });
 module.exports = __toCommonJS(index_exports);
-var import_node_fs = require("node:fs");
 
 // src/performance/monitor.js
 function createPerformanceMonitor(options = {}) {
@@ -547,6 +550,23 @@ function createPerformanceMonitor(options = {}) {
     startReporting();
     startProfiling();
   }
+  let _renderCounter = 0;
+  const _renderTimers = /* @__PURE__ */ new Map();
+  function startRender() {
+    const id = `render_${++_renderCounter}`;
+    _renderTimers.set(id, performance.now());
+    return id;
+  }
+  function endRender(id) {
+    const startTime = _renderTimers.get(id);
+    if (startTime !== void 0) {
+      const duration = performance.now() - startTime;
+      _renderTimers.delete(id);
+      recordMetric("render", duration);
+      return duration;
+    }
+    return 0;
+  }
   return {
     recordMetric,
     measure,
@@ -556,6 +576,8 @@ function createPerformanceMonitor(options = {}) {
     generateReport,
     getStats,
     reset,
+    startRender,
+    endRender,
     start() {
       opts.enabled = true;
       startResourceMonitoring();
@@ -1276,7 +1298,13 @@ function formatAttributes(props) {
           }
         }
       }
-      if (value === true) {
+      if (attributeName === "style" && typeof value === "object" && value !== null) {
+        const cssString = Object.entries(value).map(([prop, val]) => {
+          const kebabProp = prop.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+          return `${kebabProp}: ${val}`;
+        }).join("; ");
+        formatted += ` ${attributeName}="${escapeHtml(cssString)}"`;
+      } else if (value === true) {
         formatted += ` ${attributeName}`;
       } else if (value !== false && value !== null && value !== void 0) {
         formatted += ` ${attributeName}="${escapeHtml(String(value))}"`;
@@ -1497,6 +1525,9 @@ function createCacheManager(options = {}) {
     }
     clear();
   }
+  function hashObject(obj) {
+    return simpleHash(JSON.stringify(obj));
+  }
   return {
     get,
     set,
@@ -1506,6 +1537,7 @@ function createCacheManager(options = {}) {
     cleanup,
     destroy,
     generateCacheKey,
+    hashObject,
     get memoryUsage() {
       return memoryUsage;
     },
@@ -2158,6 +2190,11 @@ var HTMLRenderer = class extends BaseRenderer {
     const { children, text, key: _key, html: _rawHtml, ...attributes } = element || {};
     const attributeString = formatAttributes(attributes);
     const openingTag = attributeString ? `<${tagName} ${attributeString}>` : `<${tagName}>`;
+    if (_rawHtml !== void 0) {
+      const rawContent = typeof _rawHtml === "function" ? String(_rawHtml()) : String(_rawHtml);
+      const result = `${openingTag}${rawContent}</${tagName}>`;
+      return result;
+    }
     let textContent = "";
     if (text !== void 0) {
       const isScript = tagName === "script";
@@ -5087,7 +5124,7 @@ var EventBus = class {
     }
   }
   /**
-   * Emit with throttling
+   * Emit throttled event
    */
   emitThrottled(event, data, delay) {
     if (!this.throttledEmitters.has(event)) {
@@ -5111,7 +5148,7 @@ var EventBus = class {
     }
   }
   /**
-   * Flush batch queue
+   * Flush batched events
    */
   async flushBatch() {
     if (this.batchTimer) {
@@ -5249,7 +5286,7 @@ var EventBus = class {
     }
   }
   /**
-   * Run middleware chain
+   * Run middleware
    */
   async runMiddleware(event, data) {
     if (this.middleware.length === 0) return;
@@ -5449,7 +5486,6 @@ var DOMEventIntegration = class {
   }
   /**
    * Set up delegated DOM event listeners
-   * @private
    */
   setupDOMEventListeners() {
     const clickHandler = this.createDelegatedHandler("click", this.handleClick);
@@ -5476,7 +5512,6 @@ var DOMEventIntegration = class {
   }
   /**
    * Create a delegated event handler
-   * @private
    */
   createDelegatedHandler(eventType, handler) {
     return (event) => {
@@ -5492,7 +5527,6 @@ var DOMEventIntegration = class {
   }
   /**
    * Handle click events
-   * @private
    */
   handleClick(element, event) {
     const action = element.getAttribute?.("data-action");
@@ -5508,7 +5542,6 @@ var DOMEventIntegration = class {
   }
   /**
    * Handle change events
-   * @private
    */
   handleChange(element, event) {
     const action = element.getAttribute?.("data-action");
@@ -5525,7 +5558,6 @@ var DOMEventIntegration = class {
   }
   /**
    * Handle input events
-   * @private
    */
   handleInput(element, event) {
     const action = element.getAttribute?.("data-action");
@@ -5542,7 +5574,6 @@ var DOMEventIntegration = class {
   }
   /**
    * Handle submit events
-   * @private
    */
   handleSubmit(element, event) {
     const action = element.getAttribute?.("data-action");
@@ -5560,7 +5591,6 @@ var DOMEventIntegration = class {
   }
   /**
    * Handle keydown events
-   * @private
    */
   handleKeydown(element, event) {
     const action = element.getAttribute?.("data-action");
@@ -5583,7 +5613,6 @@ var DOMEventIntegration = class {
   }
   /**
    * Handle focus events
-   * @private
    */
   handleFocus(element, event) {
     this.activeElement = element;
@@ -5595,7 +5624,6 @@ var DOMEventIntegration = class {
   }
   /**
    * Handle blur events
-   * @private
    */
   handleBlur(element, event) {
     if (this.activeElement === element) {
@@ -5609,7 +5637,6 @@ var DOMEventIntegration = class {
   }
   /**
    * Handle data-action attributes
-   * @private
    */
   handleDataAction(element, event, action) {
     if (!action) return;
@@ -5631,7 +5658,6 @@ var DOMEventIntegration = class {
   }
   /**
    * Parse data attributes from an element
-   * @private
    */
   parseDataAttributes(element) {
     if (!element?.attributes) return {};
@@ -5659,7 +5685,6 @@ var DOMEventIntegration = class {
   }
   /**
    * Extract form data from a form element
-   * @private
    */
   extractFormData(formElement) {
     if (!formElement || formElement.tagName !== "FORM") {
@@ -5682,7 +5707,6 @@ var DOMEventIntegration = class {
   }
   /**
    * Check if a key event should trigger an action
-   * @private
    */
   shouldTriggerKeyAction(event) {
     const triggerKeys = ["Enter", "Space", "Escape"];
@@ -5690,7 +5714,6 @@ var DOMEventIntegration = class {
   }
   /**
    * Debounce utility function
-   * @private
    */
   debounce(func, wait) {
     let timeout;
@@ -5705,7 +5728,6 @@ var DOMEventIntegration = class {
   }
   /**
    * Throttle utility function
-   * @private
    */
   throttle(func, limit) {
     let inThrottle;
@@ -6220,8 +6242,98 @@ var eventSystem2 = {
 };
 var events_default = eventSystem2;
 
+// src/components/enhanced-composition.js
+var hoc = {
+  /**
+   * Wrap component with additional props
+   */
+  withProps(additionalProps) {
+    return (Component2) => (props) => {
+      return Component2({ ...props, ...additionalProps });
+    };
+  },
+  /**
+   * Conditional rendering HOC
+   */
+  withCondition(condition) {
+    return (Component2) => (props) => {
+      return condition(props) ? Component2(props) : null;
+    };
+  },
+  /**
+   * Loading state HOC
+   */
+  withLoading(loadingComponent) {
+    return (Component2) => (props) => {
+      return props.loading ? loadingComponent(props) : Component2(props);
+    };
+  },
+  /**
+   * Error boundary HOC
+   */
+  withError(errorComponent) {
+    return (Component2) => (props) => {
+      try {
+        return Component2(props);
+      } catch (error) {
+        return errorComponent({ error, ...props });
+      }
+    };
+  },
+  /**
+   * Memoization HOC
+   */
+  withMemo(getMemoKey) {
+    const cache = /* @__PURE__ */ new Map();
+    return (Component2) => (props) => {
+      const key = getMemoKey ? getMemoKey(props) : JSON.stringify(props);
+      if (cache.has(key)) {
+        return cache.get(key);
+      }
+      const result = Component2(props);
+      cache.set(key, result);
+      return result;
+    };
+  }
+};
+var compose = {
+  /**
+   * Combine multiple components into one
+   */
+  combine(...components) {
+    return (props) => ({
+      fragment: {
+        children: components.map((Component2) => Component2(props))
+      }
+    });
+  },
+  /**
+   * Pipe components through transformations
+   */
+  pipe(...transformers) {
+    return (Component2) => {
+      return transformers.reduce((acc, transformer) => transformer(acc), Component2);
+    };
+  },
+  /**
+   * Branch based on conditions
+   */
+  branch(condition, leftComponent, rightComponent) {
+    return (props) => {
+      return condition(props) ? leftComponent(props) : rightComponent(props);
+    };
+  },
+  /**
+   * Render component or fallback
+   */
+  maybe(Component2, fallback = null) {
+    return (props) => {
+      return Component2 ? Component2(props) : fallback;
+    };
+  }
+};
+
 // src/index.js
-var import_meta = {};
 var scopeCounter = { value: 0 };
 function generateScopeId() {
   return `coh-${scopeCounter.value++}`;
@@ -6275,10 +6387,46 @@ function dangerouslySetInnerContent(content) {
     __trusted: true
   };
 }
+function injectHydrationAttributes(component, options) {
+  if (!component || typeof component !== "object" || Array.isArray(component)) {
+    return component;
+  }
+  const tagName = Object.keys(component)[0];
+  if (!tagName) return component;
+  const props = component[tagName];
+  if (typeof props !== "object" || props === null) return component;
+  const injected = { ...props };
+  if (options.hydratable) {
+    injected["data-hydratable"] = "true";
+  }
+  if (options.island) {
+    injected["data-coherent-island"] = "true";
+  }
+  if (options._islandComponentName) {
+    injected["data-coherent-island-component"] = options._islandComponentName;
+  }
+  return { [tagName]: injected };
+}
+function Island(componentFn) {
+  const componentName = componentFn.name || "Anonymous";
+  return function IslandComponent(props) {
+    const result = componentFn(props);
+    return injectHydrationAttributes(result, {
+      island: true,
+      _islandComponentName: componentName
+    });
+  };
+}
 function render2(obj, options = {}) {
   const scoped = options.scoped ?? options.encapsulate ?? false;
-  const { scoped: _scoped, encapsulate: _encapsulate, ...rendererOptions } = options;
-  const component = scoped ? renderScopedComponent(obj) : obj;
+  const { scoped: _scoped, encapsulate: _encapsulate, hydratable: _hydratable, island: _island, ...rendererOptions } = options;
+  let component = scoped ? renderScopedComponent(obj) : obj;
+  if (typeof component === "function") {
+    component = component(options);
+  }
+  if (_hydratable || _island) {
+    component = injectHydrationAttributes(component, { hydratable: _hydratable, island: _island });
+  }
   return render(component, rendererOptions);
 }
 function renderScopedComponent(component) {
@@ -6348,10 +6496,15 @@ function deepClone2(obj) {
   }
   return cloned;
 }
-var _corePackageJson = JSON.parse(
-  (0, import_node_fs.readFileSync)(new URL("../package.json", import_meta.url), "utf-8")
-);
-var VERSION = _corePackageJson.version;
+var VERSION = "1.0.0-beta.8";
+var fp = {
+  /**
+   * Curried map: fp.map(fn)(array)
+   */
+  map(fn) {
+    return (array) => array.map(fn);
+  }
+};
 var coherent = {
   // Core rendering
   render: render2,
@@ -6422,9 +6575,11 @@ var index_default = coherent;
   FORBIDDEN_CHILDREN,
   GlobalErrorHandler,
   HTMLNestingError,
+  Island,
   LIFECYCLE_PHASES,
   VERSION,
   checkPeerDependencies,
+  compose,
   createActionHandlers,
   createAsyncErrorBoundary,
   createComponent,
@@ -6448,6 +6603,7 @@ var index_default = coherent;
   emitSync,
   evaluateLazy,
   eventSystem,
+  fp,
   getComponent,
   getRegisteredComponents,
   globalDOMIntegration,
@@ -6455,6 +6611,7 @@ var index_default = coherent;
   h,
   handleAction,
   hasChildren,
+  hoc,
   importPeerDependency,
   initializeDOMIntegration,
   isCoherentComponent,
@@ -6497,7 +6654,7 @@ var index_default = coherent;
  * Coherent.js - Object-Based Rendering Framework
  * A pure JavaScript framework for server-side rendering using natural object syntax
  *
- * @version 1.0.0-beta.6
+ * @version 1.0.0-beta.8
  * @author Coherent Framework Team
  * @license MIT
  */