snice 1.13.2 → 1.13.4

package/dist/src/transitions.js

@@ -0,0 +1,199 @@
+/**
+ * Generic transition system for animating between elements
+ */
+/**
+ * Parse CSS property string into an object
+ */
+function parseStyles(styleString) {
+    const styles = {};
+    styleString.split(';').forEach(rule => {
+        const [prop, value] = rule.split(':').map(s => s.trim());
+        if (prop && value) {
+            styles[prop] = value;
+        }
+    });
+    return styles;
+}
+/**
+ * Perform a transition between two elements
+ */
+export async function performTransition(container, oldElement, newElement, transition = {}) {
+    const outDuration = transition.outDuration || 300;
+    const inDuration = transition.inDuration || 300;
+    const mode = transition.mode || 'sequential';
+    // Default transitions
+    const outStyles = transition.out ? parseStyles(transition.out) : { opacity: '0' };
+    const inStartStyles = { opacity: '0' }; // Always start invisible
+    const inEndStyles = transition.in ? parseStyles(transition.in) : { opacity: '1' };
+    // Set container to relative positioning to allow absolute positioning
+    // Skip for layout elements to avoid jumpy transitions
+    const containerStyle = container.style;
+    const originalPosition = containerStyle.position;
+    const isLayoutElement = container.tagName.includes('-') && container.shadowRoot;
+    if (!isLayoutElement) {
+        containerStyle.position = 'relative';
+    }
+    // Check if elements are slotted (inside a layout)
+    const isSlottedTransition = oldElement.hasAttribute('slot') || newElement.hasAttribute('slot');
+    if (isSlottedTransition) {
+        // For slotted elements, use absolute with width/height for crossfade
+        oldElement.style.position = 'absolute';
+        oldElement.style.width = '100%';
+        oldElement.style.height = '100%';
+        oldElement.style.transition = `opacity ${outDuration}ms ease-in-out`;
+        newElement.style.position = 'absolute';
+        newElement.style.width = '100%';
+        newElement.style.height = '100%';
+        newElement.style.transition = `opacity ${inDuration}ms ease-in-out`;
+    }
+    else {
+        // Original absolute positioning for non-slotted elements
+        oldElement.style.position = 'absolute';
+        oldElement.style.top = '0';
+        oldElement.style.left = '0';
+        oldElement.style.width = '100%';
+        oldElement.style.transition = `all ${outDuration}ms ease-in-out`;
+        newElement.style.position = 'absolute';
+        newElement.style.top = '0';
+        newElement.style.left = '0';
+        newElement.style.width = '100%';
+    }
+    Object.assign(newElement.style, inStartStyles);
+    newElement.style.transition = `all ${inDuration}ms ease-in-out`;
+    // Add new element to container
+    container.appendChild(newElement);
+    // Force browser to calculate styles
+    void newElement.offsetHeight;
+    if (mode === 'simultaneous') {
+        // Start both transitions at once
+        Object.assign(oldElement.style, outStyles);
+        Object.assign(newElement.style, inEndStyles);
+        // Wait for both transitions to complete
+        await new Promise(resolve => setTimeout(resolve, Math.max(outDuration, inDuration)));
+    }
+    else {
+        // Sequential: transition out old, then transition in new
+        Object.assign(oldElement.style, outStyles);
+        await new Promise(resolve => setTimeout(resolve, outDuration));
+        Object.assign(newElement.style, inEndStyles);
+        await new Promise(resolve => setTimeout(resolve, inDuration));
+    }
+    // Cleanup
+    oldElement.remove();
+    if (isSlottedTransition) {
+        // Cleanup for slotted elements
+        newElement.style.position = '';
+        newElement.style.width = '';
+        newElement.style.height = '';
+        newElement.style.transition = '';
+    }
+    else {
+        // Cleanup for non-slotted elements
+        newElement.style.position = '';
+        newElement.style.top = '';
+        newElement.style.left = '';
+        newElement.style.width = '';
+        newElement.style.transition = '';
+    }
+    // Reset any transition styles
+    Object.keys({ ...inStartStyles, ...inEndStyles }).forEach(prop => {
+        newElement.style[prop] = '';
+    });
+    if (!isLayoutElement) {
+        containerStyle.position = originalPosition;
+    }
+}
+/**
+ * Predefined transitions
+ */
+// Fade transition
+export const fadeTransition = {
+    name: 'fade',
+    outDuration: 200,
+    inDuration: 200,
+    out: 'opacity: 0',
+    in: 'opacity: 1',
+    mode: 'simultaneous'
+};
+// Slide transition (from left)
+export const slideTransition = {
+    name: 'slide',
+    outDuration: 300,
+    inDuration: 300,
+    out: 'transform: translateX(-100%)',
+    in: 'transform: translateX(0)',
+    mode: 'sequential'
+};
+// Slide from right
+export const slideRightTransition = {
+    name: 'slide-right',
+    outDuration: 300,
+    inDuration: 300,
+    out: 'transform: translateX(100%)',
+    in: 'transform: translateX(0)',
+    mode: 'sequential'
+};
+// Slide from top
+export const slideUpTransition = {
+    name: 'slide-up',
+    outDuration: 300,
+    inDuration: 300,
+    out: 'transform: translateY(-100%)',
+    in: 'transform: translateY(0)',
+    mode: 'sequential'
+};
+// Slide from bottom
+export const slideDownTransition = {
+    name: 'slide-down',
+    outDuration: 300,
+    inDuration: 300,
+    out: 'transform: translateY(100%)',
+    in: 'transform: translateY(0)',
+    mode: 'sequential'
+};
+// Scale transition
+export const scaleTransition = {
+    name: 'scale',
+    outDuration: 250,
+    inDuration: 250,
+    out: 'transform: scale(0.9); opacity: 0',
+    in: 'transform: scale(1); opacity: 1',
+    mode: 'simultaneous'
+};
+// Rotate transition
+export const rotateTransition = {
+    name: 'rotate',
+    outDuration: 400,
+    inDuration: 400,
+    out: 'transform: rotate(180deg) scale(0.5); opacity: 0',
+    in: 'transform: rotate(0) scale(1); opacity: 1',
+    mode: 'simultaneous'
+};
+// Flip transition
+export const flipTransition = {
+    name: 'flip',
+    outDuration: 400,
+    inDuration: 400,
+    out: 'transform: rotateY(180deg); opacity: 0',
+    in: 'transform: rotateY(0); opacity: 1',
+    mode: 'sequential'
+};
+// Zoom transition
+export const zoomTransition = {
+    name: 'zoom',
+    outDuration: 300,
+    inDuration: 300,
+    out: 'transform: scale(2); opacity: 0',
+    in: 'transform: scale(1); opacity: 1',
+    mode: 'simultaneous'
+};
+// None transition (instant swap)
+export const noneTransition = {
+    name: 'none',
+    outDuration: 0,
+    inDuration: 0,
+    out: '',
+    in: '',
+    mode: 'simultaneous'
+};
+//# sourceMappingURL=transitions.js.map

package/dist/src/transitions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"transitions.js","sourceRoot":"","sources":["../../src/transitions.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,22 +1,20 @@
 {
   "name": "snice",
-  "version": "1.13.2",
+  "version": "1.13.4",
   "type": "module",
   "description": "Imperative TypeScript framework for building vanilla web components with decorators, routing, and controllers. No virtual DOM, no build complexity.",
-  "main": "src/index.ts",
-  "module": "src/index.ts",
-  "types": "src/index.ts",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "bin": {
     "snice": "./bin/snice.js"
   },
   "files": [
-    "src",
+    "dist",
     "components",
     "bin",
     "templates",
     "README.md",
-    "!src/**/*.test.ts",
-    "!src/**/*.spec.ts",
     "!components/**/*.test.ts",
     "!components/**/*.spec.ts",
     "!components/**/*.html",
@@ -62,7 +60,7 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "tsc -p tsconfig.build.json --noEmitOnError false",
     "preview": "vite preview",
     "test": "vitest run",
     "test:watch": "vitest",

package/src/controller.ts

@@ -1,347 +0,0 @@
-import { setupEventHandlers, cleanupEventHandlers } from './events';
-import { setupObservers, cleanupObservers } from './observe';
-import { setupResponseHandlers, cleanupResponseHandlers } from './request-response';
-import { IS_CONTROLLER_CLASS, IS_CONTROLLER_INSTANCE, CONTROLLER_KEY, CONTROLLER_NAME_KEY, CONTROLLER_ID, CONTROLLER_OPERATIONS, NATIVE_CONTROLLER, IS_ELEMENT_CLASS, ROUTER_CONTEXT } from './symbols';
-import { snice } from './global';
-
-type Maybe<T> = T | null | undefined;
-
-export interface IController<T extends HTMLElement = HTMLElement> {
-  element: Maybe<T>;
-  attach(element: T): void | Promise<void>;
-  detach(element: T): void | Promise<void>;
-}
-
-export type ControllerClass<T extends HTMLElement = HTMLElement> = new() => IController<T>;
-
-// Controller-scoped cleanup registry
-class ControllerScope {
-  private cleanupFns: Map<string, Function> = new Map();
-  private pendingOperations: Set<Promise<void>> = new Set();
-  
-  register(key: string, cleanup: Function): void {
-    this.cleanupFns.set(key, cleanup);
-  }
-  
-  unregister(key: string): void {
-    this.cleanupFns.delete(key);
-  }
-  
-  async cleanup(): Promise<void> {
-    // Wait for all pending operations
-    await Promise.all(this.pendingOperations);
-    
-    // Run all cleanup functions
-    for (const cleanup of this.cleanupFns.values()) {
-      try {
-        await cleanup();
-      } catch (error) {
-        console.error('Error during cleanup:', error);
-      }
-    }
-    this.cleanupFns.clear();
-  }
-  
-  async runOperation<T>(operation: () => Promise<T>): Promise<T> {
-    const promise = operation();
-    const voidPromise = promise.then(() => {}, () => {});
-    this.pendingOperations.add(voidPromise);
-    
-    try {
-      const result = await promise;
-      this.pendingOperations.delete(voidPromise);
-      return result;
-    } catch (error) {
-      this.pendingOperations.delete(voidPromise);
-      throw error;
-    }
-  }
-}
-
-/**
- * Decorator to register a controller class with a name
- * @param name The name to register the controller under
- */
-export function controller(name: string) {
-  return function <T extends ControllerClass>(constructor: T) {
-    snice.controllerRegistry.set(name, constructor);
-    // Mark as controller class for channel decorator detection
-    (constructor.prototype as any)[IS_CONTROLLER_CLASS] = true;
-    return constructor;
-  };
-}
-
-/**
- * Attaches a controller to an element
- * @param element The element to attach the controller to
- * @param controllerName The name of the controller to attach
- */
-export async function attachController(element: HTMLElement, controllerName: string): Promise<void> {
-  const existingController = (element as any)[CONTROLLER_KEY] as IController | undefined;
-  const existingName = (element as any)[CONTROLLER_NAME_KEY] as string | undefined;
-  
-  // For native elements, check if this is actually the desired controller
-  const nativeController = (element as any)[NATIVE_CONTROLLER];
-  if (nativeController !== undefined && nativeController !== controllerName) {
-    // This attachment is outdated, skip it
-    return;
-  }
-  
-  if (existingName === controllerName && existingController) {
-    // Already attached and controller exists
-    return;
-  }
-  
-  // If there's an existing controller, detach it first
-  if (existingController) {
-    await detachController(element);
-  }
-  
-  const ControllerClass = snice.controllerRegistry.get(controllerName);
-  if (!ControllerClass) {
-    throw new Error(`Controller "${controllerName}" not found in registry`);
-  }
-  
-  // Create controller instance with unique ID and scope
-  const controllerInstance = new ControllerClass();
-  snice.controllerIdCounter += 1;
-  const controllerId = snice.controllerIdCounter;
-  const scope = new ControllerScope();
-  
-  // Mark this as a controller instance
-  (controllerInstance as any)[IS_CONTROLLER_INSTANCE] = true;
-  (controllerInstance as any)[CONTROLLER_ID] = controllerId;
-  controllerInstance.element = element;
-  
-  // Pass router context from element to controller if it exists
-  const routerContext = (element as any)[ROUTER_CONTEXT];
-  if (routerContext !== undefined) {
-    (controllerInstance as any)[ROUTER_CONTEXT] = routerContext;
-  }
-  
-  // Store references
-  (element as any)[CONTROLLER_KEY] = controllerInstance;
-  (element as any)[CONTROLLER_NAME_KEY] = controllerName;
-  (element as any)[CONTROLLER_OPERATIONS] = scope;
-  
-  // Wait for element to be ready (required)
-  await (element as any).ready;
-  
-  // Run attach in the controller's scope
-  await scope.runOperation(async () => {
-    await controllerInstance.attach(element);
-  });
-  
-  // Setup @on event handlers for controller
-  setupEventHandlers(controllerInstance, element);
-  
-  // Setup @observe observers for controller
-  setupObservers(controllerInstance, element);
-  
-  // Setup @channel handlers for controller
-  setupResponseHandlers(controllerInstance, element);
-  
-  element.dispatchEvent(new CustomEvent('@snice/controller-attached', {
-    detail: { name: controllerName, controller: controllerInstance }
-  }));
-}
-
-/**
- * Detaches a controller from an element
- * @param element The element to detach the controller from
- */
-export async function detachController(element: HTMLElement): Promise<void> {
-  const controllerInstance = (element as any)[CONTROLLER_KEY] as IController | undefined;
-  const controllerName = (element as any)[CONTROLLER_NAME_KEY] as string | undefined;
-  const scope = (element as any)[CONTROLLER_OPERATIONS] as ControllerScope | undefined;
-  
-  if (!controllerInstance) {
-    return;
-  }
-  
-  // Run detach in the controller's scope
-  if (scope) {
-    await scope.runOperation(async () => {
-      await controllerInstance.detach(element);
-    });
-  } else {
-    await controllerInstance.detach(element);
-  }
-  
-  controllerInstance.element = null;
-  
-  // Cleanup @on event handlers for controller
-  cleanupEventHandlers(controllerInstance);
-  
-  // Cleanup @observe observers for controller
-  cleanupObservers(controllerInstance);
-  
-  // Cleanup @channel handlers for controller
-  cleanupResponseHandlers(controllerInstance);
-  
-  // Cleanup the controller scope
-  if (scope) {
-    await scope.cleanup();
-  }
-  
-  // Clean up router context reference
-  delete (controllerInstance as any)[ROUTER_CONTEXT];
-  
-  delete (element as any)[CONTROLLER_KEY];
-  delete (element as any)[CONTROLLER_NAME_KEY];
-  delete (element as any)[CONTROLLER_OPERATIONS];
-  
-  element.dispatchEvent(new CustomEvent('@snice/controller-detached', {
-    detail: { name: controllerName, controller: controllerInstance }
-  }));
-}
-
-/**
- * Gets the controller instance attached to an element
- * @param element The element to get the controller from
- * @returns The controller instance or undefined
- */
-export function getController<T extends IController = IController>(element: HTMLElement): T | undefined {
-  return (element as any)[CONTROLLER_KEY] as T | undefined;
-}
-
-/**
- * Gets the controller scope for an element
- * @param element The element to get the scope from
- * @returns The controller scope or undefined
- */
-export function getControllerScope(element: HTMLElement): ControllerScope | undefined {
-  return (element as any)[CONTROLLER_OPERATIONS] as ControllerScope | undefined;
-}
-
-/**
- * Enable controller support for native HTML elements
- * This sets up a MutationObserver to watch for controller attributes
- * on non-custom elements (elements without hyphens in their tag names)
- */
-export function useNativeElementControllers() {
-  // Return if already initialized
-  if ((globalThis as any).sniceNativeControllersInitialized) {
-    return;
-  }
-  (globalThis as any).sniceNativeControllersInitialized = true;
-
-  // Process elements that already have controller attribute
-  function processElement(element: Element) {
-    if (!(element instanceof HTMLElement)) return;
-    
-    // Skip custom elements (they handle controllers themselves)
-    if (element.tagName.includes('-')) return;
-    
-    // Skip elements that are @element decorated (they have their own controller handling)
-    if ((element as any)[IS_ELEMENT_CLASS]) return;
-    
-    const controllerName = element.getAttribute('controller');
-    const currentControllerName = (element as any)[NATIVE_CONTROLLER];
-    
-    if (controllerName && controllerName !== currentControllerName) {
-      // Controller added or changed
-      (element as any)[NATIVE_CONTROLLER] = controllerName;
-      
-      // For non-custom elements, we need to add the ready promise
-      if (!(element as any).ready) {
-        (element as any).ready = Promise.resolve();
-      }
-      
-      // Detach old controller if exists (don't await - let it run async)
-      if (currentControllerName) {
-        detachController(element as HTMLElement).catch(error => {
-          console.error(`Failed to detach old controller from native element:`, error);
-        });
-      }
-      
-      // Attach the new controller
-      attachController(element as HTMLElement, controllerName).catch(error => {
-        console.error(`Failed to attach controller "${controllerName}" to native element:`, error);
-      });
-    } else if (!controllerName && currentControllerName) {
-      // Controller was removed
-      delete (element as any)[NATIVE_CONTROLLER];
-      // Clear the controller name immediately to allow re-attachment
-      delete (element as any)[CONTROLLER_NAME_KEY];
-      detachController(element as HTMLElement).catch(error => {
-        console.error(`Failed to detach controller from native element:`, error);
-      });
-    }
-  }
-
-  // Set up MutationObserver to watch for controller attributes
-  const observer = new MutationObserver((mutations) => {
-    for (const mutation of mutations) {
-      if (mutation.type === 'attributes' && mutation.attributeName === 'controller') {
-        processElement(mutation.target as Element);
-      } else if (mutation.type === 'childList') {
-        // Process added nodes
-        mutation.addedNodes.forEach(node => {
-          if (node instanceof HTMLElement) {
-            // Process the node itself
-            processElement(node);
-            // Process all descendants with controller attribute
-            node.querySelectorAll('[controller]:not([class*="-"])').forEach(processElement);
-          }
-        });
-      }
-    }
-  });
-
-  // Start observing when DOM is ready
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', () => {
-      // Process existing elements (excluding custom elements)
-      document.querySelectorAll('[controller]:not([class*="-"])').forEach(processElement);
-      
-      // Start observing
-      observer.observe(document.body, {
-        attributes: true,
-        attributeFilter: ['controller'],
-        childList: true,
-        subtree: true
-      });
-    });
-  } else {
-    // DOM already loaded
-    document.querySelectorAll('[controller]:not([class*="-"])').forEach(processElement);
-    
-    observer.observe(document.body, {
-      attributes: true,
-      attributeFilter: ['controller'],
-      childList: true,
-      subtree: true
-    });
-  }
-
-  // Store observer reference for cleanup if needed
-  (globalThis as any).sniceNativeControllerObserver = observer;
-}
-
-/**
- * Stop watching for native element controllers
- */
-export function cleanupNativeElementControllers() {
-  const observer = (globalThis as any).sniceNativeControllerObserver;
-  if (observer) {
-    observer.disconnect();
-    delete (globalThis as any).sniceNativeControllerObserver;
-    delete (globalThis as any).sniceNativeControllersInitialized;
-  }
-}
-
-/**
- * Registers a cleanup function for the current controller
- * @param controller The controller instance
- * @param key A unique key for this cleanup function
- * @param cleanup The cleanup function to register
- */
-export function registerControllerCleanup(controller: IController, key: string, cleanup: Function): void {
-  if (!controller.element) return;
-  
-  const scope = getControllerScope(controller.element as HTMLElement);
-  if (scope) {
-    scope.register(key, cleanup);
-  }
-}