@coherent.js/web-components 1.0.0-beta.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Coherent.js Team
+
+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

@@ -0,0 +1,53 @@
+# @coherent.js/web-components
+
+Web Components integration for Coherent.js, enabling custom elements and Shadow DOM support.
+
+## Installation
+
+```bash
+npm install @coherent.js/web-components
+```
+
+## Usage
+
+### Define Custom Elements
+
+```js
+import { defineComponent } from '@coherent.js/web-components';
+
+const ButtonComponent = {
+  button: {
+    className: 'custom-button',
+    text: 'Click me',
+    onclick: 'console.log("Clicked!")'
+  }
+};
+
+defineComponent('coherent-button', ButtonComponent);
+```
+
+### Shadow DOM Components
+
+```js
+import { defineComponent } from '@coherent.js/web-components';
+
+defineComponent('coherent-card', {
+  div: {
+    className: 'card',
+    children: [
+      { h2: { text: 'Card Title' } },
+      { p: { text: 'Card content goes here' } }
+    ]
+  }
+}, { 
+  shadowDOM: true,
+  styles: '.card { padding: 1rem; border: 1px solid #ddd; }'
+});
+```
+
+## Features
+
+- Custom element registration
+- Shadow DOM encapsulation
+- Style isolation
+- Coherent.js component integration

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@coherent.js/web-components",
+  "version": "1.0.0-beta.2",
+  "description": "Web Components integration for Coherent.js",
+  "type": "module",
+  "main": "src/index.js",
+  "exports": {
+    ".": "./src/index.js"
+  },
+  "keywords": [
+    "web-components",
+    "custom-elements",
+    "coherent",
+    "ssr"
+  ],
+  "author": "Coherent.js Team",
+  "license": "MIT",
+  "dependencies": {
+    "@coherent.js/core": "1.0.0-beta.2"
+  },
+  "devDependencies": {
+    "vitest": "^3.2.4"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Tomdrouv1/coherent.js.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "types": "./types/index.d.ts",
+  "files": [
+    "LICENSE",
+    "README.md",
+    "types/"
+  ],
+  "scripts": {
+    "build": "node build.mjs",
+    "test": "vitest"
+  }
+}

package/src/index.js

@@ -0,0 +1,60 @@
+/**
+ * Coherent.js Web Components Integration
+ * Provides custom element and web component utilities
+ */
+
+import { render } from '@coherent.js/core';
+
+/**
+ * Define a Coherent.js component as a custom element
+ */
+export function defineComponent(name, component, options = {}) {
+  if (typeof window === 'undefined') {
+    // Server-side: just return a placeholder
+    return { name, component, options };
+  }
+
+  if (!window.customElements) {
+    throw new Error('Custom Elements API not supported');
+  }
+
+  class CoherentElement extends HTMLElement {
+    constructor() {
+      super();
+      this.component = component;
+      this.options = options;
+    }
+
+    connectedCallback() {
+      this.render();
+    }
+
+    render() {
+      const html = render(this.component);
+      if (this.options.shadow) {
+        const shadow = this.attachShadow({ mode: 'open' });
+        shadow.innerHTML = html;
+      } else {
+        this.innerHTML = html;
+      }
+    }
+  }
+
+  window.customElements.define(name, CoherentElement);
+  return CoherentElement;
+}
+
+/**
+ * Integration utilities
+ */
+export function integrateWithWebComponents(_runtime) {
+  return {
+    defineComponent: (name, component, options) => defineComponent(name, component, options)
+  };
+}
+
+export function defineCoherentElement(name, component, options = {}) {
+  return defineComponent(name, component, options);
+}
+
+export { defineComponent as default };

package/types/index.d.ts

@@ -0,0 +1,178 @@
+/**
+ * Coherent.js Web Components TypeScript Definitions
+ * @module @coherent.js/web-components
+ */
+
+// ===== Web Component Integration Types =====
+
+export interface ComponentOptions {
+  shadow?: boolean;
+  mode?: 'open' | 'closed';
+  delegatesFocus?: boolean;
+  observedAttributes?: string[];
+  props?: Record<string, {
+    type?: StringConstructor | NumberConstructor | BooleanConstructor | ObjectConstructor | ArrayConstructor;
+    default?: any;
+    required?: boolean;
+    validator?: (value: any) => boolean;
+  }>;
+  lifecycle?: {
+    connected?: () => void;
+    disconnected?: () => void;
+    adopted?: () => void;
+    attributeChanged?: (name: string, oldValue: string | null, newValue: string | null) => void;
+  };
+}
+
+export interface CoherentElementConstructor {
+  new (): CoherentElement;
+  prototype: CoherentElement;
+}
+
+export interface CoherentElement extends HTMLElement {
+  component: any;
+  options: ComponentOptions;
+  render(): void;
+  update(props?: Record<string, any>): void;
+  hydrate(data?: any): void;
+}
+
+/**
+ * Define a Coherent.js component as a custom element
+ *
+ * @param name - Custom element tag name (must contain a hyphen)
+ * @param component - Coherent.js component object or function
+ * @param options - Configuration options for the custom element
+ * @returns The custom element constructor
+ *
+ * @example
+ * ```typescript
+ * const MyButton = { button: { text: 'Click me' } };
+ * defineComponent('my-button', MyButton, { shadow: true });
+ * ```
+ */
+export function defineComponent(
+  name: string,
+  component: any | ((props: any) => any),
+  options?: ComponentOptions
+): CoherentElementConstructor;
+
+/**
+ * Integration utilities for web components runtime
+ */
+export function integrateWithWebComponents(runtime: any): void;
+
+/**
+ * Register multiple components at once
+ *
+ * @example
+ * ```typescript
+ * registerComponents({
+ *   'my-button': MyButton,
+ *   'my-card': MyCard
+ * });
+ * ```
+ */
+export function registerComponents(components: Record<string, any>, options?: ComponentOptions): void;
+
+/**
+ * Check if a custom element is defined
+ */
+export function isComponentDefined(name: string): boolean;
+
+/**
+ * Wait for a custom element to be defined
+ */
+export function whenDefined(name: string): Promise<CoherentElementConstructor>;
+
+/**
+ * Upgrade an element to a custom element
+ */
+export function upgradeElement(element: Element): void;
+
+/**
+ * Create a Coherent.js component from a custom element
+ */
+export function fromCustomElement(element: HTMLElement): any;
+
+/**
+ * Helper for creating reactive properties on custom elements
+ */
+export interface PropertyDeclaration {
+  type?: StringConstructor | NumberConstructor | BooleanConstructor | ObjectConstructor | ArrayConstructor;
+  attribute?: boolean | string;
+  reflect?: boolean;
+  converter?: (value: string) => any;
+  default?: any;
+}
+
+export function createProperty(declaration: PropertyDeclaration): PropertyDecorator;
+
+/**
+ * Decorator for defining properties on custom elements
+ * @experimental
+ */
+export function property(declaration?: PropertyDeclaration): PropertyDecorator;
+
+/**
+ * Decorator for defining custom element tag name
+ * @experimental
+ */
+export function customElement(tagName: string): ClassDecorator;
+
+// ===== Event System Types =====
+
+export interface EventOptions {
+  bubbles?: boolean;
+  composed?: boolean;
+  cancelable?: boolean;
+  detail?: any;
+}
+
+export function createEvent(type: string, options?: EventOptions): CustomEvent;
+export function dispatchCustomEvent(element: Element, type: string, options?: EventOptions): boolean;
+
+// ===== Slot Utilities Types =====
+
+export interface SlotChangeEvent extends Event {
+  target: HTMLSlotElement;
+}
+
+export function getSlotContent(element: Element, slotName?: string): Node[];
+export function hasSlotContent(element: Element, slotName?: string): boolean;
+export function onSlotChange(element: Element, callback: (event: SlotChangeEvent) => void, slotName?: string): () => void;
+
+// ===== Shadow DOM Utilities Types =====
+
+export interface ShadowRootInit {
+  mode: 'open' | 'closed';
+  delegatesFocus?: boolean;
+  slotAssignment?: 'manual' | 'named';
+}
+
+export function createShadowRoot(element: Element, init: ShadowRootInit): ShadowRoot;
+export function adoptStyles(shadowRoot: ShadowRoot, styles: string | CSSStyleSheet[]): void;
+export function getShadowRoot(element: Element): ShadowRoot | null;
+
+// ===== Template Utilities Types =====
+
+export function createTemplate(html: string): HTMLTemplateElement;
+export function cloneTemplate(template: HTMLTemplateElement): DocumentFragment;
+export function renderToTemplate(component: any): HTMLTemplateElement;
+
+// ===== Lifecycle Hooks =====
+
+export interface LifecycleHooks {
+  onConnected?: () => void;
+  onDisconnected?: () => void;
+  onAdopted?: () => void;
+  onAttributeChanged?: (name: string, oldValue: string | null, newValue: string | null) => void;
+  onPropertyChanged?: (name: string, oldValue: any, newValue: any) => void;
+}
+
+export function createLifecycleManager(hooks: LifecycleHooks): {
+  connected(): void;
+  disconnected(): void;
+  adopted(): void;
+  attributeChanged(name: string, oldValue: string | null, newValue: string | null): void;
+};