@ynor/ynor 1.0.5 → 1.0.6

package/README.md

@@ -16,7 +16,8 @@ A lightweight, next-generation JavaScript extension framework inspired by Svelte
 ## Project Structure
 
 
-`📁 ynor/
+```
+📁 ynor/
 ├── 📁 .svelte-kit/
 │   ├── 📁 generated/
 │   │   ├── 📁 client/
@@ -108,4 +109,4 @@ no extension: 2 files
 .txt: 1 file
 
 Generated: 29/06/2026, 11:57:18 am
-`
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ynor/ynor",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "⚡ Lightweight next-gen JS extension framework like Svelte",
   "type": "module",
   "main": "./src/lib/core/index.js",

package/src/lib/core/compiler.js

@@ -186,17 +186,40 @@ export default class ${className} extends YnorComponent {
     return this._element;
   }
 
-  _renderComponent(componentName) {
-    const Component = runtime.components.get(componentName);
-    if (!Component) {
-      console.warn(\`Component "\${componentName}" not found\`);
-      return '';
+  // In generateComponent, update _renderComponent
+
+_renderComponent(componentName, attributes = '') {
+  const Component = runtime.components.get(componentName);
+  if (!Component) {
+    console.warn(\`Component "\${componentName}" not found\`);
+    return '';
+  }
+  
+  // Parse attributes into props
+  const props = {};
+  if (attributes) {
+    // Parse on:click_menu={toggleSidebar} -> props.on_click_menu = this.toggleSidebar
+    const attrRegex = /([a-zA-Z_:][a-zA-Z0-9_:]*)=["{]([^"}]+)["}]/g;
+    let match;
+    while ((match = attrRegex.exec(attributes)) !== null) {
+      const key = match[1].replace(/:/g, '_');
+      const value = match[2].trim();
+      // Check if it's a function reference on this
+      if (this[value] && typeof this[value] === 'function') {
+        props[key] = this[value].bind(this);
+      } else {
+        props[key] = value;
+      }
     }
-    const tempDiv = document.createElement('div');
-    const instance = new Component({ target: tempDiv });
-    instance.$mount();
-    return tempDiv.innerHTML;
   }
+  
+  console.log(\`🔧 Rendering component "\${componentName}" with props:\`, props);
+  
+  const tempDiv = document.createElement('div');
+  const instance = new Component({ target: tempDiv, props });
+  instance.$mount();
+  return tempDiv.innerHTML;
+}
 
   _bindEvents(container) {
     const clickElements = container.querySelectorAll('[data-on-click]');
@@ -316,6 +339,8 @@ transformScript(script) {
 
   // src/lib/core/compiler.js - Fix processTemplate
 
+// src/lib/core/compiler.js - Replace processTemplate with this version
+
 processTemplate(template) {
   if (!template) {
     return '';
@@ -323,22 +348,28 @@ processTemplate(template) {
   
   let processed = template;
   
-  // Handle component tags
+  // FIRST: Handle component tags with attributes - This must come before simple tags
+  // Matches <ComponentName attr1={value1} attr2={value2} ... />
+  processed = processed.replace(/<([A-Z][a-zA-Z0-9]*)\s+([^>]*?)\s*\/>/g, (match, componentName, attributes) => {
+    console.log('🔧 Processing component with attributes:', componentName, attributes);
+    // Pass attributes as props
+    return '${this._renderComponent("' + componentName + '", "' + attributes.trim() + '")}';
+  });
+  
+  // Handle simple component tags without attributes
   processed = processed.replace(/<([A-Z][a-zA-Z0-9]*)\s*\/>/g, (match, componentName) => {
     return '${this._renderComponent("' + componentName + '")}';
   });
   
-  // Handle on:click={handler} - FIX THIS
+  // Handle on:click={handler}
   processed = processed.replace(/on:([a-zA-Z]+)=\{([^}]+)\}/g, (match, event, handler) => {
-    // Store the handler name as a data attribute
     return `data-on-${event}="${handler.trim()}"`;
   });
   
   // Handle expressions {variable}
   processed = processed.replace(/\{([^}]+)\}/g, (match, expr) => {
     const trimmed = expr.trim();
-    // For simple variables, access from this
-    return '${this.' + trimmed + ' !== undefined ? this.' + trimmed + ' : 0}';
+    return '${this.' + trimmed + '}';
   });
   
   // Handle class:active={condition}