@allternit/ix 0.1.0 → 0.1.1

package/dist/vue/renderer.js.bak

@@ -1,302 +0,0 @@
-/**
- * Vue Renderer for A2R-IX
- *
- * Renders A2R-IX UI IR to Vue 3 components.
- */
-import { createDefaultCatalog } from '../catalog/registry';
-/**
- * Create Vue renderer
- */
-export function createVueRenderer(config) {
-    const catalog = config.catalog ?? createDefaultCatalog();
-    /**
-     * Generate component definition
-     */
-    function generateComponent(root) {
-        const name = 'A2RIXRoot';
-        // Generate props from state variables
-        const props = {};
-        root.state.variables.forEach((variable) => {
-            props[sanitizeName(variable.path)] = {
-                type: getVueType(variable.type),
-                default: variable.default,
-            };
-        });
-        // Generate setup function
-        const setupLines = [
-            '// A2R-IX Generated Component',
-            "import { ref, computed, watch } from 'vue';",
-            '',
-            '// State',
-        ];
-        // State refs
-        root.state.variables.forEach((variable) => {
-            const varName = sanitizeName(variable.path);
-            setupLines.push(`const ${varName} = ref(props.${varName});`);
-        });
-        // Computed values
-        if (root.state.computed) {
-            setupLines.push('');
-            setupLines.push('// Computed values');
-            root.state.computed.forEach((computed) => {
-                const deps = computed.deps.map(sanitizeName).join(', ');
-                const expr = generateExpression(computed.compute);
-                setupLines.push(`const ${computed.name} = computed(() => {`);
-                setupLines.push(`  return ${expr};`);
-                setupLines.push('});');
-            });
-        }
-        // Event handlers
-        setupLines.push('');
-        setupLines.push('// Event handlers');
-        root.actions.forEach((action) => {
-            setupLines.push(`const ${action.id} = (payload) => {`);
-            setupLines.push(`  emit('${action.id}', payload);`);
-            setupLines.push('};');
-        });
-        // Expose
-        setupLines.push('');
-        setupLines.push('return {');
-        root.state.variables.forEach((variable) => {
-            setupLines.push(`  ${sanitizeName(variable.path)},`);
-        });
-        root.state.computed?.forEach((computed) => {
-            setupLines.push(`  ${computed.name},`);
-        });
-        root.actions.forEach((action) => {
-            setupLines.push(`  ${action.id},`);
-        });
-        setupLines.push('};');
-        // Generate template
-        const template = root.components.map((c) => generateTemplate(c)).join('\n');
-        return {
-            name,
-            props,
-            setup: setupLines.join('\n'),
-            template,
-            styles: root.css,
-        };
-    }
-    /**
-     * Generate template for component
-     */
-    function generateTemplate(component, depth = 0) {
-        const indent = '  '.repeat(depth);
-        const tag = getComponentTag(component.type);
-        // Handle condition
-        if (component.condition) {
-            const condition = generateExpression(component.condition);
-            const inner = generateSingleTemplate(component, depth + 1);
-            return `${indent}<template v-if="${condition}">\n${inner}\n${indent}</template>`;
-        }
-        // Handle repeat
-        if (component.repeat) {
-            return generateRepeatTemplate(component, depth);
-        }
-        return generateSingleTemplate(component, depth);
-    }
-    /**
-     * Generate single component template
-     */
-    function generateSingleTemplate(component, depth) {
-        const indent = '  '.repeat(depth);
-        const tag = getComponentTag(component.type);
-        const props = generateProps(component);
-        const events = generateEvents(component);
-        const propString = [...props, ...events].join(' ');
-        if (component.children && component.children.length > 0) {
-            const children = component.children.map((c) => generateTemplate(c, depth + 1)).join('\n');
-            return `${indent}<${tag}${propString ? ' ' + propString : ''}>\n${children}\n${indent}</${tag}>`;
-        }
-        // Self-closing or with text
-        const textContent = component.props?.children ? escapeHtml(String(component.props.children)) : '';
-        if (textContent) {
-            return `${indent}<${tag}${propString ? ' ' + propString : ''}>${textContent}</${tag}>`;
-        }
-        return `${indent}<${tag}${propString ? ' ' + propString : ''} />`;
-    }
-    /**
-     * Generate repeat template
-     */
-    function generateRepeatTemplate(component, depth) {
-        const indent = '  '.repeat(depth);
-        const repeat = component.repeat;
-        const tag = getComponentTag(component.type);
-        const props = generateProps(component);
-        const events = generateEvents(component);
-        const propString = [...props, ...events].join(' ');
-        const itemsVar = sanitizeName(repeat.items);
-        const asVar = sanitizeName(repeat.as);
-        const indexVar = repeat.indexAs ? sanitizeName(repeat.indexAs) : 'index';
-        let eachBlock = `${indent}<${tag}`;
-        eachBlock += ` v-for="(${asVar}, ${indexVar}) in ${itemsVar}"`;
-        eachBlock += ` :key="${indexVar}"`;
-        if (propString) {
-            eachBlock += ' ' + propString;
-        }
-        if (component.children && component.children.length > 0) {
-            const children = component.children.map((c) => generateTemplate(c, depth + 1)).join('\n');
-            eachBlock += `>\n${children}\n${indent}</${tag}>`;
-        }
-        else {
-            eachBlock += ' />';
-        }
-        return eachBlock;
-    }
-    /**
-     * Generate props string
-     */
-    function generateProps(component) {
-        const props = [];
-        // Regular props
-        Object.entries(component.props || {}).forEach(([key, value]) => {
-            if (key !== 'children') {
-                if (typeof value === 'string') {
-                    props.push(`${key}="${escapeHtml(value)}"`);
-                }
-                else if (typeof value === 'boolean') {
-                    if (value)
-                        props.push(key);
-                }
-                else if (typeof value === 'number') {
-                    props.push(`:${key}="${value}"`);
-                }
-                else {
-                    props.push(`:${key}="${JSON.stringify(value).replace(/"/g, '&quot;')}"`);
-                }
-            }
-        });
-        // Bindings
-        component.bindings?.forEach((binding) => {
-            const stateVar = sanitizeName(binding.statePath);
-            if (binding.direction === 'two-way') {
-                props.push(`v-model:${binding.prop}="${stateVar}"`);
-            }
-            else {
-                props.push(`:${binding.prop}="${stateVar}"`);
-            }
-        });
-        return props;
-    }
-    /**
-     * Generate event handlers
-     */
-    function generateEvents(component) {
-        const events = [];
-        component.events?.forEach((event) => {
-            const vueEvent = getVueEventName(event.event);
-            events.push(`@${vueEvent}="${event.action}($event)"`);
-        });
-        return events;
-    }
-    /**
-     * Get component tag
-     */
-    function getComponentTag(type) {
-        const tagMap = {
-            Box: 'div',
-            Stack: 'div',
-            Text: 'span',
-            Heading: 'h1',
-            Paragraph: 'p',
-            Button: 'button',
-            Input: 'input',
-            TextArea: 'textarea',
-            Select: 'select',
-            Card: 'div',
-            Image: 'img',
-            Icon: 'span',
-            Badge: 'span',
-            List: 'ul',
-            Table: 'table',
-        };
-        return tagMap[type] || type.toLowerCase();
-    }
-    /**
-     * Get Vue type from schema type
-     */
-    function getVueType(type) {
-        const typeMap = {
-            string: 'String',
-            number: 'Number',
-            boolean: 'Boolean',
-            array: 'Array',
-            object: 'Object',
-            any: 'null',
-        };
-        return typeMap[type] || 'null';
-    }
-    /**
-     * Convert event name to Vue format
-     */
-    function getVueEventName(event) {
-        if (event.startsWith('on')) {
-            return event.slice(2).toLowerCase();
-        }
-        return event.toLowerCase();
-    }
-    /**
-     * Generate expression
-     */
-    function generateExpression(expr) {
-        if (expr === null)
-            return 'null';
-        if (typeof expr === 'string')
-            return sanitizeName(expr);
-        if (typeof expr === 'number')
-            return String(expr);
-        if (typeof expr === 'boolean')
-            return String(expr);
-        if (typeof expr === 'object') {
-            if ('$path' in expr) {
-                return sanitizeName(expr.$path);
-            }
-            if ('$expr' in expr) {
-                return expr.$expr;
-            }
-            if ('$cond' in expr) {
-                const [cond, trueVal, falseVal] = expr.$cond;
-                return `${generateExpression(cond)} ? ${generateExpression(trueVal)} : ${generateExpression(falseVal)}`;
-            }
-            if ('$and' in expr) {
-                return expr.$and.map(generateExpression).join(' && ');
-            }
-            if ('$or' in expr) {
-                return expr.$or.map(generateExpression).join(' || ');
-            }
-            if ('$eq' in expr) {
-                const [a, b] = expr.$eq;
-                return `${generateExpression(a)} === ${generateExpression(b)}`;
-            }
-        }
-        return String(expr);
-    }
-    /**
-     * Sanitize variable name
-     */
-    function sanitizeName(path) {
-        return path.replace(/\./g, '_').replace(/[^a-zA-Z0-9_]/g, '');
-    }
-    /**
-     * Escape HTML
-     */
-    function escapeHtml(text) {
-        return text
-            .replace(/&/g, '&amp;')
-            .replace(/</g, '&lt;')
-            .replace(/>/g, '&gt;')
-            .replace(/"/g, '&quot;')
-            .replace(/'/g, '&#039;');
-    }
-    return {
-        generateComponent,
-    };
-}
-/**
- * Compile A2R-IX UI to Vue component definition
- */
-export function compileToVue(root, config = {}) {
-    const renderer = createVueRenderer(config);
-    return renderer.generateComponent(root);
-}
-//# sourceMappingURL=renderer.js.map