@ynor/ynor 1.0.1

package/src/lib/core/compiler.js

@@ -0,0 +1,472 @@
+// src/lib/core/compiler.js
+import fs from 'fs';
+import path from 'path';
+import { parse as acornParse } from 'acorn';
+
+// ============================================
+// VERSION
+// ============================================
+export const VERSION = '1.0.0';
+
+// ============================================
+// BASE NODE CLASS
+// ============================================
+class BaseNode {
+  constructor(type, start, end) {
+    this.type = type;
+    this.start = start;
+    this.end = end;
+  }
+}
+
+// ============================================
+// AST NAMESPACE
+// ============================================
+export const AST = {
+  BaseNode,
+  Root: class extends BaseNode {
+    constructor(start, end) {
+      super('Root', start, end);
+      this.options = null;
+      this.fragment = null;
+      this.css = null;
+      this.instance = null;
+      this.module = null;
+      this.comments = [];
+    }
+  },
+  Fragment: class extends BaseNode {
+    constructor(start, end) {
+      super('Fragment', start, end);
+      this.nodes = [];
+    }
+  },
+  Text: class extends BaseNode {
+    constructor(start, end, data, raw) {
+      super('Text', start, end);
+      this.data = data;
+      this.raw = raw || data;
+    }
+  },
+  ExpressionTag: class extends BaseNode {
+    constructor(start, end, expression) {
+      super('ExpressionTag', start, end);
+      this.expression = expression;
+    }
+  },
+};
+
+// ============================================
+// YNOR COMPILER CLASS
+// ============================================
+export class YnorCompiler {
+  constructor(options = {}) {
+    this.options = {
+      generate: 'dom',
+      dev: true,
+      css: 'injected',
+      ...options
+    };
+  }
+
+  compile(content, filename) {
+    let script = '';
+    let template = '';
+    let styles = '';
+
+    console.log('📄 === COMPILING ===', filename);
+    console.log('📄 Content length:', content.length);
+
+    // Check if content is empty
+    if (!content || content.trim() === '') {
+      console.error('❌ Content is empty!');
+      template = `<div style="padding:40px;text-align:center;font-family:system-ui;color:red;">
+        <h1>Error: Empty file</h1>
+        <p>File: ${path.basename(filename)}</p>
+      </div>`;
+      return this.generateComponent(script, template, styles, filename);
+    }
+
+    // Extract template using multiple methods
+    let templateStart = content.indexOf('<template>');
+    let templateEnd = content.indexOf('</template>');
+    
+    if (templateStart === -1) {
+      templateStart = content.indexOf('<template ');
+    }
+    
+    if (templateStart !== -1 && templateEnd !== -1) {
+      const startTagEnd = content.indexOf('>', templateStart) + 1;
+      if (startTagEnd > 0 && startTagEnd < templateEnd) {
+        template = content.substring(startTagEnd, templateEnd).trim();
+        console.log('✅ Template extracted, length:', template.length);
+      } else {
+        template = content.substring(templateStart + 10, templateEnd).trim();
+        console.log('✅ Template extracted (fallback), length:', template.length);
+      }
+    }
+
+    // Extract script
+    const scriptRegex = /<script\s*>([\s\S]*?)<\/script>/;
+    const scriptMatch = content.match(scriptRegex);
+    if (scriptMatch) {
+      script = scriptMatch[1].trim();
+      console.log('✅ Script extracted, length:', script.length);
+    }
+
+    // Extract styles
+    const styleRegex = /<style\s*>([\s\S]*?)<\/style>/;
+    const styleMatch = content.match(styleRegex);
+    if (styleMatch) {
+      styles = styleMatch[1].trim();
+      console.log('✅ Styles extracted, length:', styles.length);
+    }
+
+    // If no template, create fallback without HTML comments
+    if (!template) {
+      console.warn('⚠️ No template found, using fallback');
+      template = `<div style="padding:40px;text-align:center;font-family:system-ui;max-width:600px;margin:20px auto;background:white;border-radius:20px;box-shadow:0 8px 30px rgba(0,0,0,0.08);">
+        <h1 style="color:#4f46e5;">⚡ .ynor</h1>
+        <p style="color:#1e293b;font-size:1.2rem;">Component: ${path.basename(filename)}</p>
+        <div style="background:#fef2f2;padding:20px;border-radius:12px;margin:20px;border:2px solid #fecaca;">
+          <p style="color:#dc2626;font-weight:600;">No template found</p>
+          <p style="color:#64748b;font-size:0.9rem;">Expected to find template section</p>
+          <p style="color:#64748b;font-size:0.8rem;">File: ${path.basename(filename)}</p>
+          <p style="color:#64748b;font-size:0.8rem;">Content length: ${content.length} chars</p>
+        </div>
+      </div>`;
+    }
+
+    return this.generateComponent(script, template, styles, filename);
+  }
+
+  // src/lib/core/compiler.js - Update the generateComponent method
+
+generateComponent(script, template, styles, filename) {
+  const componentName = path.basename(filename, '.ynor');
+  const className = `Ynor${componentName}`;
+  const processedTemplate = this.processTemplate(template);
+  const runtimePath = this.getRuntimePath(filename);
+
+  console.log(`🔧 Generating component: ${componentName}`);
+
+  return `
+// Generated from ${filename}
+import { YnorComponent, runtime } from '${runtimePath}';
+
+export default class ${className} extends YnorComponent {
+  constructor(options) {
+    super(options);
+    this.name = '${componentName}';
+    this._setup();
+  }
+
+  _setup() {
+    // Execute script in the context of 'this'
+    // This ensures all variables and functions are attached to the component instance
+    (function() {
+      // Define variables on 'this'
+      ${script}
+    }).call(this);
+    
+    // Log for debugging
+    console.log('🔧 Component setup complete:', this);
+  }
+
+  render() {
+    const template = \`${processedTemplate}\`;
+    const container = document.createElement('div');
+    container.className = 'ynor-component ynor-${componentName}';
+    container.innerHTML = template;
+    
+    this._bindEvents(container);
+    this._bindInputs(container);
+    
+    this._element = container;
+    return this._element;
+  }
+
+  _renderComponent(componentName) {
+    const Component = runtime.components.get(componentName);
+    if (!Component) {
+      console.warn(\`Component "\${componentName}" not found\`);
+      return '';
+    }
+    const tempDiv = document.createElement('div');
+    const instance = new Component({ target: tempDiv });
+    instance.$mount();
+    return tempDiv.innerHTML;
+  }
+
+  _bindEvents(container) {
+    const clickElements = container.querySelectorAll('[data-on-click]');
+    clickElements.forEach(el => {
+      const handlerName = el.getAttribute('data-on-click');
+      if (this[handlerName]) {
+        el.addEventListener('click', this[handlerName].bind(this));
+      }
+    });
+
+    const changeElements = container.querySelectorAll('[data-on-change]');
+    changeElements.forEach(el => {
+      const handlerName = el.getAttribute('data-on-change');
+      if (this[handlerName]) {
+        el.addEventListener('change', this[handlerName].bind(this));
+      }
+    });
+
+    const keydownElements = container.querySelectorAll('[data-on-keydown]');
+    keydownElements.forEach(el => {
+      const handlerName = el.getAttribute('data-on-keydown');
+      if (this[handlerName]) {
+        el.addEventListener('keydown', this[handlerName].bind(this));
+      }
+    });
+  }
+
+  _bindInputs(container) {
+    const inputs = container.querySelectorAll('[data-bind]');
+    inputs.forEach(el => {
+      const variable = el.getAttribute('data-bind');
+      if (this[variable] !== undefined) {
+        el.value = this[variable];
+        el.addEventListener('input', (e) => {
+          this[variable] = e.target.value;
+          this._update();
+        });
+      }
+    });
+  }
+
+  _update() {
+    if (this._destroyed) return;
+    this.render();
+    if (this._element && this.target) {
+      this.target.innerHTML = '';
+      this.target.appendChild(this._element);
+    }
+  }
+
+  get styles() {
+    return \`${styles}\`;
+  }
+
+  $mount(target) {
+    super.$mount(target);
+    this._injectStyles();
+    return this;
+  }
+
+  _injectStyles() {
+    if (this.styles && !document.getElementById('ynor-${componentName}-styles')) {
+      const styleEl = document.createElement('style');
+      styleEl.id = 'ynor-${componentName}-styles';
+      styleEl.textContent = this.styles;
+      document.head.appendChild(styleEl);
+    }
+  }
+}
+
+runtime.registerComponent('${componentName}', ${className});
+`;
+}
+
+
+transformScript(script) {
+  if (!script) return '';
+  
+  // Simple approach: wrap the script in a function that binds to this
+  // This is safer than trying to parse and transform each line
+  return `
+    // Auto-bind variables and functions to this
+    const self = this;
+    
+    // Simple variables that will be attached to this
+    ${script}
+    
+    // After script execution, attach all local variables to this
+    // This captures any let/const/var declarations
+    const localVars = Object.keys(this).filter(key => key !== 'self');
+    for (const key of localVars) {
+      if (this[key] !== undefined && typeof this[key] !== 'function') {
+        // Already attached
+      }
+    }
+  `;
+}
+
+  getRuntimePath(filename) {
+    const normalizedPath = filename.replace(/\\/g, '/');
+    const fileDir = path.dirname(normalizedPath);
+    const coreDir = path.join(process.cwd(), 'src', 'lib', 'core');
+    
+    let relativePath = path.relative(fileDir, coreDir);
+    relativePath = relativePath.replace(/\\/g, '/');
+    
+    if (!relativePath.startsWith('.')) {
+      relativePath = './' + relativePath;
+    }
+    
+    if (relativePath === './') {
+      relativePath = '.';
+    }
+    
+    return relativePath + '/runtime.js';
+  }
+
+  // src/lib/core/compiler.js - Fix processTemplate
+
+processTemplate(template) {
+  if (!template) {
+    return '';
+  }
+  
+  let processed = template;
+  
+  // Handle component tags
+  processed = processed.replace(/<([A-Z][a-zA-Z0-9]*)\s*\/>/g, (match, componentName) => {
+    return '${this._renderComponent("' + componentName + '")}';
+  });
+  
+  // Handle on:click={handler} - FIX THIS
+  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}';
+  });
+  
+  // Handle class:active={condition}
+  processed = processed.replace(/class:([a-zA-Z-]+)=\{([^}]+)\}/g, (match, className, condition) => {
+    return '${' + condition.trim() + ' ? "' + className + '" : ""}';
+  });
+  
+  // Handle bind:value={variable}
+  processed = processed.replace(/bind:value=\{([^}]+)\}/g, (match, variable) => {
+    return `data-bind="${variable.trim()}" value="\${this.${variable.trim()}}"`;
+  });
+  
+  // Handle #each
+  processed = processed.replace(/{#each\s+([^}]+)\s+as\s+([^}]+)}/g, (match, iterable, item) => {
+    return '${' + iterable.trim() + '.map(' + item.trim() + ' => `';
+  });
+  processed = processed.replace(/{\/each}/g, '`).join("")}');
+  
+  // Handle #if with :else if and :else
+  processed = processed.replace(/{:else if\s+([^}]+)}/g, (match, condition) => {
+    return '` : (' + condition.trim() + ' ? `';
+  });
+  processed = processed.replace(/{:else}/g, '` : `');
+  processed = processed.replace(/{#if\s+([^}]+)}/g, (match, condition) => {
+    return '${' + condition.trim() + ' ? `';
+  });
+  processed = processed.replace(/{\/if}/g, '` : ""}');
+  
+  console.log('📝 Processed template:', processed);
+  
+  return processed;
+}}
+
+// ============================================
+// PARSER
+// ============================================
+export function parse(source, options = {}) {
+  const filename = options.filename || 'unknown.ynor';
+  const root = new AST.Root(0, source.length);
+  
+  const scriptMatch = source.match(/<script\s*>([\s\S]*?)<\/script>/);
+  if (scriptMatch) {
+    try {
+      const program = acornParse(scriptMatch[1], {
+        ecmaVersion: 2022,
+        sourceType: 'module',
+        locations: true,
+        sourceFilename: filename
+      });
+      root.instance = { content: program, context: 'default', attributes: [] };
+    } catch (e) {
+      console.warn('Failed to parse script:', e.message);
+    }
+  }
+  
+  return options.modern ? root : root;
+}
+
+// ============================================
+// COMPILE
+// ============================================
+export function compile(source, options = {}) {
+  const filename = options.filename || 'component.ynor';
+  const compiler = new YnorCompiler(options);
+  const compiled = compiler.compile(source, filename);
+  
+  return {
+    js: { code: compiled, map: null },
+    css: { code: '', map: null },
+    ast: parse(source, { ...options, modern: true }),
+    warnings: [],
+    vars: []
+  };
+}
+
+// ============================================
+// OTHER EXPORTS
+// ============================================
+export function compileModule(source, options = {}) {
+  try {
+    const ast = acornParse(source, {
+      ecmaVersion: 2022,
+      sourceType: 'module',
+      locations: true
+    });
+    return { js: { code: source, map: null }, ast, warnings: [], vars: [] };
+  } catch (error) {
+    throw new Error(`Failed to compile module: ${error.message}`);
+  }
+}
+
+export function migrate(source) {
+  let code = source;
+  code = code.replace(/{#each\s+([^}]+)\s+as\s+([^}]+)}/g, (match, iterable, item) => {
+    return `{#each ${iterable} as ${item}}`;
+  });
+  code = code.replace(/{#if\s+([^}]+)}/g, (match, condition) => {
+    return `{#if ${condition}}`;
+  });
+  return { code };
+}
+
+export function preprocess(source, preprocessor) {
+  return Promise.resolve({ code: source, toString: () => source });
+}
+
+export function print(ast) {
+  return { code: '', map: null };
+}
+
+export function parseCss(source) {
+  return { type: 'StyleSheet', nodes: [] };
+}
+
+export function walk(ast, options) {
+  throw new Error('Please import { walk } from "estree-walker" instead');
+}
+
+export default {
+  VERSION,
+  compile,
+  compileModule,
+  migrate,
+  parse,
+  parseCss,
+  preprocess,
+  print,
+  walk,
+  AST,
+  YnorCompiler
+};

package/src/lib/core/index.js

@@ -0,0 +1,43 @@
+// src/lib/core/index.js
+export {
+  VERSION,
+  compile,
+  compileModule,
+  migrate,
+  parse,
+  parseCss,
+  preprocess,
+  print,
+  walk,
+  AST,
+  YnorCompiler
+} from './compiler.js';
+
+export { ynorPlugin } from './plugin.js';
+
+export {
+  YnorRuntime,
+  YnorComponent,
+  runtime,
+  store,
+  mount
+} from './runtime.js';
+
+// Default export
+export default {
+  VERSION,
+  compile,
+  compileModule,
+  migrate,
+  parse,
+  parseCss,
+  preprocess,
+  print,
+  walk,
+  AST,
+  YnorCompiler,
+  ynorPlugin,
+  runtime,
+  store,
+  mount
+};

package/src/lib/core/plugin.js

@@ -0,0 +1,114 @@
+// src/lib/core/plugin.js
+import fs from 'fs';
+import path from 'path';
+import { YnorCompiler } from './compiler.js';
+
+export function ynorPlugin(options = {}) {
+  const compiler = new YnorCompiler(options);
+
+  return {
+    name: 'vite-plugin-ynor',
+    enforce: 'pre',
+    
+    resolveId(id) {
+      if (id.endsWith('.ynor')) {
+        const root = process.cwd();
+        const possiblePaths = [
+          path.resolve(root, 'src', id),
+          path.resolve(root, 'src', 'lib', 'components', id),
+          path.resolve(root, id),
+        ];
+        
+        if (id.includes('/') || id.includes('\\')) {
+          possiblePaths.unshift(path.resolve(root, id));
+        }
+        
+        for (const p of possiblePaths) {
+          try {
+            if (fs.existsSync(p)) {
+              return p;
+            }
+          } catch (e) {}
+        }
+        
+        console.warn(`⚠️ .ynor file not found: ${id}`);
+        return id;
+      }
+      return null;
+    },
+
+    load(id) {
+      if (id.endsWith('.ynor')) {
+        try {
+          let filePath = id;
+          if (id.startsWith('\0')) {
+            filePath = id.slice(1);
+          }
+          
+          if (filePath.startsWith('virtual:')) {
+            return null;
+          }
+          
+          if (!fs.existsSync(filePath)) {
+            console.warn(`⚠️ .ynor file not found: ${filePath}`);
+            return null;
+          }
+          
+          const content = fs.readFileSync(filePath, 'utf-8');
+          const compiled = compiler.compile(content, filePath);
+          
+          return {
+            code: compiled,
+            map: null
+          };
+        } catch (error) {
+          console.error(`❌ Error compiling .ynor file: ${id}`, error.message);
+          throw error;
+        }
+      }
+      return null;
+    },
+
+    transform(code, id) {
+      if (id.endsWith('.ynor')) {
+        try {
+          let filePath = id;
+          if (id.startsWith('\0')) {
+            filePath = id.slice(1);
+          }
+          
+          if (filePath.startsWith('virtual:')) {
+            return null;
+          }
+          
+          // Always read fresh from disk
+          if (fs.existsSync(filePath)) {
+            const content = fs.readFileSync(filePath, 'utf-8');
+            const compiled = compiler.compile(content, filePath);
+            return {
+              code: compiled,
+              map: null
+            };
+          } else {
+            console.warn(`⚠️ .ynor file not found for transform: ${filePath}`);
+            return null;
+          }
+        } catch (error) {
+          console.error(`❌ Error transforming .ynor file: ${id}`, error.message);
+          throw error;
+        }
+      }
+      return null;
+    },
+
+    handleHotUpdate({ file, server }) {
+      if (file.endsWith('.ynor')) {
+        console.log(`🔄 Hot reload .ynor file: ${file}`);
+        server.ws.send({
+          type: 'full-reload',
+          path: file
+        });
+      }
+    }
+  };
+}