stylpp 1.0.0

package/src/runtime/advanced.js

@@ -0,0 +1,293 @@
+/**
+ * STYL++ Advanced Runtime
+ * Integrates physics engine, animations, and advanced effects
+ * Runs in browser for real-time rendering
+ */
+
+const StylppCompiler = require('../compiler/index.js');
+const PhysicsEngine = require('../compiler/physics.js');
+const { AnimationTimeline, EasingFunctions } = require('../compiler/animation.js');
+const { Matrix3D, ParticleSystem, AdvancedFilter } = require('../compiler/effects.js');
+
+class AdvancedStylppRuntime {
+  constructor(options = {}) {
+    this.options = {
+      fps: 60,
+      enablePhysics: true,
+      enableAnimations: true,
+      enableEffects: true,
+      ...options
+    };
+
+    this.compiler = new StylppCompiler({
+      minify: false,
+      sourceMap: false,
+      vendorPrefix: true
+    });
+
+    this.physicsEngine = new PhysicsEngine();
+    this.animationTimelines = new Map();
+    this.particleSystems = new Map();
+    this.frameCallbacks = [];
+    this.running = false;
+    this.lastFrameTime = Date.now();
+    this.fps = 0;
+
+    if (typeof window !== 'undefined') {
+      this.init();
+    }
+  }
+
+  /**
+   * Initialize runtime
+   */
+  init() {
+    this.processTags();
+    this.setupPhysicsElements();
+    this.start();
+  }
+
+  /**
+   * Process STYL++ style tags
+   */
+  processTags() {
+    const stylppTags = document.querySelectorAll('style[type="text/stylpp"]');
+
+    stylppTags.forEach((tag, index) => {
+      const code = tag.textContent;
+      const id = tag.id || `stylpp-${index}`;
+
+      const result = this.compiler.compile(code, `${id}.stylpp`);
+
+      if (result.success) {
+        const styleElement = document.createElement('style');
+        styleElement.type = 'text/css';
+        styleElement.id = `stylpp-compiled-${id}`;
+        styleElement.textContent = result.css;
+        document.head.appendChild(styleElement);
+      } else {
+        console.error(`STYL++ Error in ${id}:`, result.errors[0].message);
+      }
+    });
+  }
+
+  /**
+   * Setup physics for elements with physics attributes
+   */
+  setupPhysicsElements() {
+    if (!this.options.enablePhysics) return;
+
+    // Elements with physics data attributes
+    const physicsElements = document.querySelectorAll('[data-physics]');
+
+    physicsElements.forEach((element) => {
+      const config = {
+        mass: parseFloat(element.dataset.mass || 1),
+        bounce: parseFloat(element.dataset.bounce || 0.6),
+        friction: parseFloat(element.dataset.friction || 0.2),
+        pinned: element.dataset.pinned !== undefined,
+        width: element.offsetWidth,
+        height: element.offsetHeight
+      };
+
+      const id = element.id || `physics-${Math.random().toString(36).substr(2, 9)}`;
+      element.id = id;
+
+      this.physicsEngine.createBody(id, config);
+
+      // Store reference for updates
+      element._physicsId = id;
+    });
+  }
+
+  /**
+   * Create animation for element
+   */
+  animateElement(elementId, keyframes, duration = 1000, easing = 'easeOutCubic') {
+    const timeline = new AnimationTimeline(duration);
+
+    const times = Object.keys(keyframes).map(t => parseInt(t));
+    const minTime = Math.min(...times);
+    const maxTime = Math.max(...times);
+    const range = maxTime - minTime;
+
+    times.forEach(time => {
+      const normalizedTime = ((time - minTime) / range) * duration;
+      timeline.at(normalizedTime, keyframes[time], easing);
+    });
+
+    const element = document.getElementById(elementId);
+    if (!element) return null;
+
+    timeline.onUpdate = (properties) => {
+      Object.entries(properties).forEach(([key, value]) => {
+        if (key.includes('translate') || key.includes('rotate') || key.includes('scale')) {
+          element.style.transform = `${key}(${value}${key.includes('rotate') ? 'deg' : 'px'})`;
+        } else {
+          element.style[key] = `${value}px`;
+        }
+      });
+    };
+
+    this.animationTimelines.set(elementId, timeline);
+    timeline.play();
+
+    return timeline;
+  }
+
+  /**
+   * Create particle effect
+   */
+  createParticleSystem(elementId, config = {}) {
+    const particles = new ParticleSystem(config);
+    this.particleSystems.set(elementId, particles);
+    return particles;
+  }
+
+  /**
+   * Apply advanced filter to element
+   */
+  applyFilter(elementId, filterType, ...args) {
+    const element = document.getElementById(elementId);
+    if (!element) return;
+
+    const filter = AdvancedFilter[filterType](...args);
+
+    if (typeof filter === 'string') {
+      element.style.filter = filter;
+    } else {
+      Object.entries(filter).forEach(([key, value]) => {
+        if (key === 'backdrop') {
+          element.style.backdropFilter = value;
+        } else {
+          element.style[key] = value;
+        }
+      });
+    }
+  }
+
+  /**
+   * Apply 3D transform
+   */
+  apply3DTransform(elementId, transformFn) {
+    const element = document.getElementById(elementId);
+    if (!element) return;
+
+    const matrix = new Matrix3D();
+    transformFn(matrix);
+
+    element.style.transform = matrix.toCSS();
+  }
+
+  /**
+   * Start animation loop
+   */
+  start() {
+    this.running = true;
+    this.loop();
+  }
+
+  /**
+   * Stop animation loop
+   */
+  stop() {
+    this.running = false;
+  }
+
+  /**
+   * Main animation loop
+   */
+  loop = () => {
+    if (!this.running) return;
+
+    const now = Date.now();
+    const deltaTime = (now - this.lastFrameTime) / 1000;
+    this.lastFrameTime = now;
+
+    // Update physics
+    if (this.options.enablePhysics) {
+      this.physicsEngine.step(deltaTime);
+      this.updatePhysicsElements();
+    }
+
+    // Update animations
+    if (this.options.enableAnimations) {
+      this.animationTimelines.forEach((timeline) => {
+        timeline.update(deltaTime * 1000);
+      });
+    }
+
+    // Update particles
+    this.particleSystems.forEach((system) => {
+      system.update(deltaTime);
+    });
+
+    // Run frame callbacks
+    this.frameCallbacks.forEach(callback => callback(deltaTime));
+
+    // Calculate FPS
+    this.fps = 1 / deltaTime;
+
+    requestAnimationFrame(this.loop);
+  };
+
+  /**
+   * Update elements with physics transformations
+   */
+  updatePhysicsElements() {
+    this.physicsEngine.bodies.forEach((body) => {
+      const element = document.getElementById(body.id);
+      if (!element) return;
+
+      element.style.transform = `translate3d(${body.position.x.toFixed(2)}px, ${body.position.y.toFixed(2)}px, 0)`;
+    });
+  }
+
+  /**
+   * Add callback for each frame
+   */
+  onFrame(callback) {
+    this.frameCallbacks.push(callback);
+    return () => {
+      this.frameCallbacks = this.frameCallbacks.filter(cb => cb !== callback);
+    };
+  }
+
+  /**
+   * Get FPS counter
+   */
+  getFPS() {
+    return this.fps.toFixed(1);
+  }
+
+  /**
+   * Create spring layout
+   */
+  createSpringLayout(selectorString) {
+    const elements = document.querySelectorAll(selectorString);
+    const elementIds = Array.from(elements).map((el, i) => {
+      if (!el.id) el.id = `spring-${i}`;
+      return el.id;
+    });
+
+    this.physicsEngine.createSpringLayout(elementIds, {
+      stiffness: 0.3,
+      damping: 0.2,
+      restDistance: 150
+    });
+
+    return elementIds;
+  }
+
+  /**
+   * Compile inline STYL++
+   */
+  compile(code) {
+    return this.compiler.compile(code);
+  }
+}
+
+// Export
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = AdvancedStylppRuntime;
+}

package/src/runtime/browser.js

@@ -0,0 +1,239 @@
+/**
+ * STYL++ Browser Runtime
+ * Enables real-time compilation in the browser
+ * Supports hot reload and error reporting
+ */
+
+const StylppCompiler = require('../compiler/index.js');
+
+class StylppRuntime {
+  constructor(options = {}) {
+    this.options = {
+      hotReload: true,
+      autoCompile: true,
+      showErrors: true,
+      ...options
+    };
+
+    this.compiler = new StylppCompiler(this.options);
+    this.styles = new Map();
+    this.watchers = new Map();
+    this.errors = [];
+
+    this.init();
+  }
+
+  /**
+   * Initialize the runtime
+   */
+  init() {
+    if (typeof window !== 'undefined') {
+      this.processTags();
+      if (this.options.hotReload) {
+        this.setupWebSocket();
+      }
+    }
+  }
+
+  /**
+   * Process all <style type="text/stylpp"> tags
+   */
+  processTags() {
+    const stylppTags = document.querySelectorAll('style[type="text/stylpp"]');
+    
+    stylppTags.forEach((tag, index) => {
+      const code = tag.textContent;
+      const id = tag.id || `stylpp-${index}`;
+      
+      const result = this.compiler.compile(code, `${id}.stylpp`);
+      
+      if (result.success) {
+        const styleElement = document.createElement('style');
+        styleElement.type = 'text/css';
+        styleElement.id = `stylpp-compiled-${id}`;
+        styleElement.textContent = result.css;
+        document.head.appendChild(styleElement);
+        
+        this.styles.set(id, {
+          code: code,
+          css: result.css,
+          element: styleElement,
+          sourceElement: tag
+        });
+      } else {
+        this.handleError(result.errors[0], id);
+      }
+    });
+  }
+
+  /**
+   * Setup WebSocket for hot reload
+   */
+  setupWebSocket() {
+    if (typeof WebSocket !== 'undefined') {
+      try {
+        const ws = new WebSocket('ws://localhost:8765');
+        
+        ws.onmessage = (event) => {
+          const data = JSON.parse(event.data);
+          if (data.type === 'stylpp-change') {
+            this.recompile(data.id, data.code);
+          }
+        };
+
+        ws.onerror = () => {
+          console.log('STYL++ hot reload not available (ws server not running)');
+        };
+      } catch (e) {
+        // WebSocket not available, skip
+      }
+    }
+  }
+
+  /**
+   * Recompile a style
+   * @param {string} id - Style ID
+   * @param {string} code - New code
+   */
+  recompile(id, code) {
+    const result = this.compiler.compile(code, `${id}.stylpp`);
+    
+    if (result.success) {
+      const style = this.styles.get(id);
+      if (style) {
+        style.code = code;
+        style.css = result.css;
+        style.element.textContent = result.css;
+        this.clearError(id);
+      }
+    } else {
+      this.handleError(result.errors[0], id);
+    }
+  }
+
+  /**
+   * Handle compilation error
+   * @param {Object} error - Error object
+   * @param {string} id - Style ID
+   */
+  handleError(error, id) {
+    this.errors.push({ id, error, timestamp: Date.now() });
+    
+    if (this.options.showErrors && typeof console !== 'undefined') {
+      console.error(`STYL++ Error in ${id}:`, error.message);
+    }
+
+    // Display error in UI if available
+    if (typeof document !== 'undefined') {
+      this.displayErrorUI(error, id);
+    }
+  }
+
+  /**
+   * Clear error for a style
+   * @param {string} id - Style ID
+   */
+  clearError(id) {
+    this.errors = this.errors.filter(e => e.id !== id);
+    const errorElement = document.getElementById(`stylpp-error-${id}`);
+    if (errorElement) {
+      errorElement.remove();
+    }
+  }
+
+  /**
+   * Display error in UI
+   * @param {Object} error - Error object
+   * @param {string} id - Style ID
+   */
+  displayErrorUI(error, id) {
+    let errorElement = document.getElementById(`stylpp-error-${id}`);
+    
+    if (!errorElement) {
+      errorElement = document.createElement('div');
+      errorElement.id = `stylpp-error-${id}`;
+      errorElement.style.cssText = `
+        position: fixed;
+        top: 10px;
+        right: 10px;
+        background: #ff4444;
+        color: white;
+        padding: 15px;
+        border-radius: 4px;
+        font-family: monospace;
+        font-size: 12px;
+        max-width: 400px;
+        z-index: 9999;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+      `;
+      document.body.appendChild(errorElement);
+    }
+
+    const message = `
+      <strong>STYL++ Error</strong><br>
+      ${error.message}
+      ${error.line ? `<br>Line: ${error.line}` : ''}
+    `;
+    
+    errorElement.innerHTML = message;
+  }
+
+  /**
+   * Compile and inject code
+   * @param {string} code - STYL++ code
+   * @param {string} id - Unique ID for the style
+   * @returns {Object} Result
+   */
+  compile(code, id = `stylpp-${Date.now()}`) {
+    const result = this.compiler.compile(code, `${id}.stylpp`);
+    
+    if (result.success) {
+      const styleElement = document.createElement('style');
+      styleElement.type = 'text/css';
+      styleElement.id = `stylpp-compiled-${id}`;
+      styleElement.textContent = result.css;
+      document.head.appendChild(styleElement);
+      
+      this.styles.set(id, {
+        code: code,
+        css: result.css,
+        element: styleElement
+      });
+    } else {
+      this.handleError(result.errors[0], id);
+    }
+    
+    return result;
+  }
+
+  /**
+   * Get compiled CSS
+   * @param {string} id - Style ID
+   * @returns {string|null} CSS or null if not found
+   */
+  getCSS(id) {
+    const style = this.styles.get(id);
+    return style ? style.css : null;
+  }
+
+  /**
+   * Get all compiled styles
+   * @returns {Object} Map of all styles
+   */
+  getAllStyles() {
+    return this.styles;
+  }
+
+  /**
+   * Get compilation errors
+   * @returns {Array} Array of errors
+   */
+  getErrors() {
+    return this.errors;
+  }
+}
+
+// Export for use in both Node.js and Browser environments
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = StylppRuntime;
+}