mtrl 0.2.9 → 0.3.0

package/src/core/composition/features/structure.ts

@@ -1,22 +0,0 @@
-// src/core/composition/features/structure.ts
-
-/**
- * Adds structure definition to component without creating DOM
- * Now uses the structure from the baseConfig
- * 
- * @param configuration
- * @returns Component enhancer with structure definition
- */
-export const withStructure = (config: SliderConfig) => component => {
-  // Use the structure definition from the config
-  if (!config.structureDefinition) {
-    console.warn('No structure definition found in slider config');
-    return component;
-  }
-  
-  // Return enhanced component with structure definition
-  return {
-    ...component,
-    structureDefinition: config.structureDefinition
-  };
-};

package/src/core/layout/index.js

@@ -1,95 +0,0 @@
-import { isObject } from '../utils'
-
-const createComponent = (Component, options = {}) => {
-  // Check if Component is a class (has prototype) or function
-  const isClass = Component.prototype && Component.prototype.constructor === Component
-
-  if (isClass) {
-    return new Component(options)
-  }
-
-  return Component(options)
-}
-
-/**
- * Recursively creates components based on a provided schema.
- *
- * @param {Array} schema - An array of components or sub-schemas.
- * @param {HTMLElement} container - The container for the current level of components.
- * @param {Object} [structure={}] - An accumulator object for components, keyed by name.
- * @param {number} [level=0] - The current level of recursion.
- * @returns {Object} The structure containing all created components.
- */
-const createLayout = (schema, container, structure = {}, level = 0, components = []) => {
-  level++
-  let component
-  const object = {}
-  const fragment = document.createDocumentFragment()
-
-  if (!Array.isArray(schema)) {
-    console.error('Schema is not an array!', container, level, schema)
-  }
-
-  for (let i = 0; i < schema.length; i++) {
-    let name
-    let options = {}
-
-    if (schema[i] instanceof Object && typeof schema[i] === 'function') {
-      if (isObject(schema[i + 1])) {
-        options = schema[i + 1]
-      } else if (isObject(schema[i + 2])) {
-        options = schema[i + 2]
-      }
-
-      if (options.id) {
-        name = options.id
-      } else if (typeof schema[i + 1] === 'string') {
-        name = schema[i + 1]
-        if (!schema[i].isElement && !schema[i].isComponent) {
-          options.name = name
-        }
-      }
-
-      component = createComponent(schema[i], options)
-
-      const element = component.element || component
-      if (level === 1) structure.element = element
-
-      if (name) {
-        structure[name] = component
-        components.push([name, component])
-      }
-
-      if (component) {
-        if (component.insert) component.insert(fragment)
-        else fragment.appendChild(element)
-
-        if (container) {
-          // console.log('container', container)
-          component._container = container
-          if (component.onInserted) component.onInserted(container)
-        }
-      }
-    } else if (Array.isArray(schema[i])) {
-      if (!component) component = container
-      createLayout(schema[i], component, structure, level, components)
-    }
-  }
-
-  if (container && fragment.hasChildNodes()) {
-    const wrapper = container.element || container
-    wrapper.appendChild(fragment)
-  }
-
-  function get (name) {
-    return structure[name] || null
-  }
-
-  object.component = structure
-  object.components = components
-  object.get = get
-
-  return object
-}
-
-export default createLayout

package/src/core/structure.ts

@@ -1,288 +0,0 @@
-// src/core/structure.ts
-import { createElement } from './dom/create';
-
-/**
- * Type definitions for structure creation
- */
-export interface ComponentLike {
-  element: HTMLElement;
-  destroy?: () => void;
-  [key: string]: any;
-}
-
-export interface ElementDefinition {
-  name?: string;
-  creator?: Function;
-  options?: Record<string, any>;
-  children?: Record<string, ElementDefinition>;
-}
-
-export interface StructureDefinition {
-  element?: ElementDefinition;
-  [key: string]: ElementDefinition | any;
-}
-
-/**
- * Structure result interface with separated structure and utility functions
- */
-export interface StructureResult {
-  // The raw structure object with all components
-  structure: Record<string, any>;
-  
-  // Reference to the root element for convenience 
-  element: HTMLElement | ComponentLike;
-  
-  // Utility functions
-  get: (name: string) => any;
-  getAll: () => Record<string, any>;
-  destroy: () => void;
-}
-
-/**
- * Checks if a value is a component object (has an element property)
- * Uses a faster property check before the instanceof check
- * @param value Value to check
- * @returns True if the value is a component-like object
- */
-function isComponentLike(value: any): value is ComponentLike {
-  return value && 
-         typeof value === 'object' && 
-         'element' in value && 
-         value.element instanceof HTMLElement;
-}
-
-/**
- * Creates a document fragment for faster DOM operations when appending multiple children
- * @returns DocumentFragment
- */
-function createFragment(): DocumentFragment {
-  return document.createDocumentFragment();
-}
-
-/**
- * Creates a DOM or component structure based on a structure definition
- * @param definition Structure definition object
- * @param parentElement Optional parent element to attach structure to
- * @returns Object containing the structure and utility functions
- */
-export function createStructure(
-  definition: StructureDefinition, 
-  parentElement: HTMLElement | null = null
-): StructureResult {
-  // Use object literal instead of empty object for faster property access
-  const structure: Record<string, any> = Object.create(null);
-  
-  // Special case for root component creation
-  if (definition.element && !parentElement) {
-    const elementDef = definition.element;
-    const createElementFn = elementDef.creator || createElement;
-    const rootComponent = createElementFn(elementDef.options);
-    const rootElement = isComponentLike(rootComponent) ? rootComponent.element : rootComponent;
-    
-    structure.element = rootComponent;
-    
-    if (elementDef.name) {
-      structure[elementDef.name] = rootComponent;
-    }
-    
-    if (elementDef.children) {
-      // Use fragment for better performance when appending multiple children
-      const fragment = createFragment();
-      let childKeys = Object.keys(elementDef.children);
-      
-      // Process all children first and collect their structures
-      const childStructures = new Array(childKeys.length);
-      
-      for (let i = 0; i < childKeys.length; i++) {
-        const key = childKeys[i];
-        const childDef = elementDef.children[key];
-        
-        // Create child structure and attach to fragment temporarily
-        const childResult = createStructure({ [key]: childDef }, fragment);
-        childStructures[i] = childResult.structure;
-      }
-      
-      // Append fragment to root element (single DOM operation)
-      rootElement.appendChild(fragment);
-      
-      // Now merge all child structures into the main structure
-      for (let i = 0; i < childStructures.length; i++) {
-        Object.assign(structure, childStructures[i]);
-      }
-    }
-    
-    // Create and return the result object with utility functions
-    return createStructureResult(structure);
-  }
-  
-  // Use fragment if we have multiple elements to append to the parent
-  const fragment = parentElement ? createFragment() : null;
-  const keys = Object.keys(definition);
-  const keyLength = keys.length;
-  
-  // Pre-allocate arrays for better performance
-  const elements = new Array(keyLength);
-  const childStructuresToMerge = [];
-  
-  // First pass: create all elements
-  for (let i = 0; i < keyLength; i++) {
-    const key = keys[i];
-    const def = definition[key];
-    
-    // Skip if no definition
-    if (!def) {
-      elements[i] = null;
-      continue;
-    }
-    
-    // Create the element
-    const createElementFn = def.creator || createElement;
-    const created = createElementFn(def.options);
-    elements[i] = created;
-    
-    // Add to structure
-    structure[key] = created;
-    
-    // Add element to structure with its name if different from key
-    if (def.name && def.name !== key) {
-      structure[def.name] = created;
-    }
-  }
-  
-  // Second pass: handle children and append to parent
-  for (let i = 0; i < keyLength; i++) {
-    const key = keys[i];
-    const def = definition[key];
-    const created = elements[i];
-    
-    if (!created || !def) continue;
-    
-    // Get the actual DOM element
-    const element = isComponentLike(created) ? created.element : created;
-    
-    // Append to fragment
-    if (fragment) {
-      fragment.appendChild(element);
-    }
-    
-    // Process children recursively
-    if (def.children) {
-      const childResult = createStructure(def.children, element);
-      childStructuresToMerge.push(childResult.structure);
-    }
-  }
-  
-  // Append fragment to parent (single DOM operation)
-  if (parentElement && fragment) {
-    parentElement.appendChild(fragment);
-  }
-  
-  // Merge all child structures at once
-  for (let i = 0; i < childStructuresToMerge.length; i++) {
-    Object.assign(structure, childStructuresToMerge[i]);
-  }
-  
-  // Create and return the result object with utility functions
-  return createStructureResult(structure);
-}
-
-/**
- * Creates a result object with the structure and utility functions
- * @param structure The raw structure object
- * @returns Result object with structure and utility functions
- */
-function createStructureResult(structure: Record<string, any>): StructureResult {
-  return {
-    // Raw structure object
-    structure,
-    
-    // Root element reference for convenience
-    element: structure.element,
-    
-    /**
-     * Gets a component by name
-     * @param name Component name
-     * @returns Component if found, null otherwise
-     */
-    get: (name: string): any => {
-      return structure[name] || null;
-    },
-    
-    /**
-     * Gets all components in a flattened map
-     * @returns Object with all components
-     */
-    getAll: (): Record<string, any> => {
-      return flattenStructure(structure);
-    },
-    
-    /**
-     * Destroys the structure, cleaning up all components
-     */
-    destroy: (): void => {
-      // Clean up the root element if it exists
-      if (structure.element) {
-        // If element is a component with a destroy method, call it
-        if (isComponentLike(structure.element) && typeof structure.element.destroy === 'function') {
-          structure.element.destroy();
-        } 
-        // Otherwise, if it's a DOM element or component, remove it from the DOM
-        else if (isComponentLike(structure.element) && structure.element.element.parentNode) {
-          structure.element.element.parentNode.removeChild(structure.element.element);
-        }
-        else if (structure.element instanceof HTMLElement && structure.element.parentNode) {
-          structure.element.parentNode.removeChild(structure.element);
-        }
-      }
-      
-      // Clean up all other components in the structure
-      Object.keys(structure).forEach(key => {
-        if (key === 'element') {
-          return; // Already handled element
-        }
-        
-        const item = structure[key];
-        
-        // Handle component objects
-        if (isComponentLike(item) && typeof item.destroy === 'function') {
-          item.destroy();
-        }
-        // Handle DOM elements
-        else if (item instanceof HTMLElement && item.parentNode) {
-          item.parentNode.removeChild(item);
-        }
-      });
-    }
-  };
-}
-
-/**
- * Flattens a nested structure into a simple object with element and component references
- * Optimized version that avoids unnecessary type checks where possible
- * @param structure Structure object
- * @returns Flattened structure with all elements and components
- */
-export function flattenStructure(structure: Record<string, any>): Record<string, any> {
-  const flattened: Record<string, any> = Object.create(null);
-  const keys = Object.keys(structure);
-  
-  for (let i = 0; i < keys.length; i++) {
-    const key = keys[i];
-    const value = structure[key];
-    
-    // Fast path for common cases
-    if (value instanceof HTMLElement || 
-        (value && typeof value === 'object' && 'element' in value)) {
-      flattened[key] = value;
-      continue;
-    }
-    
-    // Skip functions and other non-element/component objects
-    if (typeof value !== 'function' && 
-        (value instanceof Element || isComponentLike(value))) {
-      flattened[key] = value;
-    }
-  }
-  
-  return flattened;
-}