@vuedx/compiler-tsx - npm Package Compare versions

Comparing version 0.3.1-insiders-1605496438.0 to 0.3.1-insiders-1605961078.0

dist/index.cjs.js

@@ -68,4 +68,5 @@ 'use strict';
 }
+// TODO: Move it to ast helpers maybe
 function getComponentName(fileName) {
-    return Path__default['default'].posix.basename(fileName).replace(/\.vue$/, '');
+    return Path__default['default'].posix.basename(fileName).replace(/\.(vue|ts|tsx|js|jsx)$/, '');
 }
@@ -460,3 +461,5 @@ function processBogusComment(content) {
                         exp: component.named === true
-                            ? `{ ${component.name != null ? component.name + ' as ' : ''}${name} }`
+                            ? `{ ${component.name != null && component.name !== name
+                                ? component.name + ' as '
+                                : ''}${name} }`
                             : name,
@@ -474,3 +477,3 @@ path: component.path,
             const startTag = compilerCore.createSimpleExpression(name, false, createLoc(node.loc, node.loc.source.indexOf(node.tag), node.tag.length), false);
-            const attributes = getJSXAttributes(node);
+            const attributes = generateJSXAttributes(node);
             if (node.isSelfClosing) {
@@ -505,89 +508,158 @@ node.codegenNode = compilerCore.createCompoundExpression([
 }
-function getJSXAttributes(node, context) {
+const ControlDirectiveNameRE = /^(if|for|else-if|else|slot)$/;
+function generateJSXAttributes(node, context) {
     const result = [];
-    node.props.forEach((dir, index) => {
-        var _a;
+    const alreadyProcessed = new Set();
+    node.props.forEach((dir) => {
         if (templateAstTypes.isAttributeNode(dir)) {
-            result.push(' ', compilerCore.createSimpleExpression(dir.name, false, createLoc(dir.loc, 0, dir.name.length)));
-            if (dir.value != null) {
-                result.push('=', compilerCore.createSimpleExpression(dir.value.loc.source, false, dir.value.loc));
-            }
+            result.push(...generateAttribute(dir));
         }
-        else if (dir.name === 'bind') {
-            if (templateAstTypes.isSimpleExpressionNode(dir.arg)) {
-                if (dir.arg.isStatic || dir.arg.content === 'key') {
-                    dir.arg.isStatic = false;
-                    result.push(' ', dir.arg);
-                    if (dir.exp != null)
-                        result.push('={', dir.exp, '}');
-                }
-                else {
-                    result.push(' {...({[', dir.arg, ']: ');
-                    if (dir.exp != null)
-                        result.push(dir.exp);
-                    else
-                        result.push('true');
-                    result.push('})}');
-                }
+        else if (ControlDirectiveNameRE.test(dir.name) ||
+            alreadyProcessed.has(dir)) ;
+        else {
+            switch (dir.name) {
+                case 'bind':
+                    result.push(...generateVBind(dir));
+                    break;
+                case 'on':
+                    result.push(...generateVOn(dir));
+                    break;
+                case 'model':
+                    result.push(...generateVModel(dir, node));
+                    break;
+                default:
+                    {
+                        const code = generateCustomDirective(dir, node, alreadyProcessed);
+                        result.push(...code);
+                    }
+                    break;
             }
-            else if (dir.exp != null) {
-                result.push(' {...(', dir.exp, ')}');
-            }
         }
-        else if (dir.name === 'on') {
-            const exp = templateAstTypes.isSimpleExpressionNode(dir.exp)
-                ? compilerCore.isSimpleIdentifier(dir.exp.content.trim())
-                    ? [dir.exp]
-                    : dir.exp.content.includes('$event')
-                        ? ['$event =>', dir.exp]
-                        : ['() => ', dir.exp]
-                : ['() => {}'];
-            result.push(' ');
-            if (templateAstTypes.isSimpleExpressionNode(dir.arg)) {
-                if (dir.arg.isStatic) {
-                    result.push(compilerCore.createSimpleExpression(camelCase__default['default']('on-' + dir.arg.content), false, dir.arg.loc), '={', ...exp, '}');
-                }
-                else {
-                    result.push('{...({[', dir.arg, ']: ', ...exp, '})}');
-                }
+    });
+    return result;
+}
+function generateCustomDirective(dir, node, alreadyProcessed) {
+    const code = [];
+    const dirs = node.props.filter((prop) => templateAstTypes.isDirectiveNode(prop) && prop.name === dir.name);
+    dirs.forEach((dir) => alreadyProcessed.add(dir));
+    code.push(` v-${dir.name}={`);
+    const isMultiValue = dirs.length > 1;
+    if (isMultiValue)
+        code.push('[');
+    dirs.forEach((dir) => {
+        var _a, _b;
+        code.push('{');
+        code.push('arg:', (_a = dir.arg) !== null && _a !== void 0 ? _a : 'undefined', ',');
+        code.push('exp:', (_b = dir.exp) !== null && _b !== void 0 ? _b : 'undefined', ',');
+        // TODO: Maybe array?
+        code.push('modifiers: {');
+        dir.modifiers.forEach((modifier) => {
+            code.push(modifier, ':true,');
+        });
+        code.push('}');
+        code.push('}');
+        if (isMultiValue)
+            code.push(',');
+    });
+    if (isMultiValue)
+        code.push(']');
+    code.push('}');
+    return code;
+}
+function generateVModel(dir, node) {
+    var _a;
+    const code = [];
+    const exp = (_a = dir.exp) !== null && _a !== void 0 ? _a : 'null';
+    const isNativeInput = /^(input|textarea|select)$/.test(node.tag);
+    if (isNativeInput && dir.arg == null) {
+        const isCheckboxOrRadio = node.props.some((prop) => templateAstTypes.isAttributeNode(prop) &&
+            (prop.name === 'radio' || prop.name === 'checkbox'));
+        const type = `Event & {target:${getHTMLElementType(node.tag)}}`;
+        code.push(` ${isCheckboxOrRadio ? 'checked' : 'value'}={`, exp, '}  ');
+        code.push(`onChange={($event) => (`, exp, ' = ', dir.modifiers.includes('number')
+            ? `Number(($event as ${type}).target.value)`
+            : `($event as ${type}).target.value`, ')}');
+    }
+    else {
+        code.push(' ');
+        if (templateAstTypes.isSimpleExpressionNode(dir.arg)) {
+            if (dir.arg.isStatic) {
+                code.push(dir.arg, '={', exp, '}');
             }
-            else if (dir.exp != null) {
-                result.push('{...(', dir.exp, ')}');
-            }
-        }
-        else if (dir.name === 'model') {
-            const exp = (_a = dir.exp) !== null && _a !== void 0 ? _a : 'null';
-            result.push(' ');
-            if (templateAstTypes.isSimpleExpressionNode(dir.arg)) {
-                if (dir.arg.isStatic) {
-                    result.push(dir.arg, '={', exp, '}');
-                }
-                else {
-                    result.push('{...({[', dir.arg, ']: ', exp, '})}');
-                }
-            }
             else {
-                result.push('modelValue={', exp, '}');
+                code.push('{...({[', dir.arg, ']: ', exp, '})}');
             }
-            result.push(' ');
-            const arg = templateAstTypes.isSimpleExpressionNode(dir.arg)
-                ? dir.arg.isStatic
-                    ? ["'", 'onUpdate:' + dir.arg.content, "'"]
-                    : [`['onUpdate:' + `, dir.arg, `]`]
-                : [`'onUpdate:modelValue'`];
-            result.push(`{...({`, ...arg, ': $event => ', exp, ' = $event', '})}');
-            if (templateAstTypes.isSimpleExpressionNode(dir.arg))
-                dir.arg.isStatic = false;
         }
-        else if (dir.name === 'slot') ;
         else {
-            result.push(` __directive_${dir.name}_${index}={[`);
-            if (templateAstTypes.isSimpleExpressionNode(dir.arg) && !dir.arg.isStatic)
-                result.push(dir.arg, ',');
+            code.push('modelValue={', exp, '}');
+        }
+        code.push(' ');
+        const arg = templateAstTypes.isSimpleExpressionNode(dir.arg)
+            ? dir.arg.isStatic
+                ? ["'", 'onUpdate:' + dir.arg.content, "'"]
+                : [`['onUpdate:' + `, dir.arg, `]`]
+            : [`'onUpdate:modelValue'`];
+        code.push(`{...({`, ...arg, ': $event => ', exp, ' = $event', '})}');
+        if (templateAstTypes.isSimpleExpressionNode(dir.arg))
+            dir.arg.isStatic = false;
+    }
+    return code;
+}
+function generateAttribute(attr, node) {
+    const code = [];
+    if (attr.name === 'class' || attr.name === 'style')
+        return [];
+    code.push(' ', compilerCore.createSimpleExpression(attr.name, false, createLoc(attr.loc, 0, attr.name.length)));
+    if (attr.value != null) {
+        code.push('=', compilerCore.createSimpleExpression(attr.value.loc.source, false, attr.value.loc));
+    }
+    return code;
+}
+const InlineVOnHandlerRE = /\bfunction\b|\b=>\b/;
+function generateVOn(dir, node) {
+    const code = [];
+    const exp = templateAstTypes.isSimpleExpressionNode(dir.exp)
+        ? compilerCore.isSimpleIdentifier(dir.exp.content.trim()) ||
+            InlineVOnHandlerRE.test(dir.exp.content)
+            ? [dir.exp]
+            : dir.exp.content.includes('$event')
+                ? ['$event =>', dir.exp]
+                : ['() => ', dir.exp]
+        : ['() => {}'];
+    code.push(' ');
+    if (templateAstTypes.isSimpleExpressionNode(dir.arg)) {
+        if (dir.arg.isStatic) {
+            code.push(compilerCore.createSimpleExpression(camelCase__default['default']('on-' + dir.arg.content), false, dir.arg.loc), '={', ...exp, '}');
+        }
+        else {
+            code.push('{...({[', dir.arg, ']: ', ...exp, '})}');
+        }
+    }
+    else if (dir.exp != null) {
+        code.push('{...(', dir.exp, ')}');
+    }
+    return code;
+}
+function generateVBind(dir, node) {
+    const code = [];
+    if (templateAstTypes.isSimpleExpressionNode(dir.arg)) {
+        if (dir.arg.isStatic || dir.arg.content === 'key') {
+            dir.arg.isStatic = false;
+            code.push(' ', dir.arg);
             if (dir.exp != null)
-                result.push(dir.exp, ',');
-            result.push(']}');
+                code.push('={', dir.exp, '}');
         }
-    });
-    return result;
+        else {
+            code.push(' {...({[', dir.arg, ']: ');
+            if (dir.exp != null)
+                code.push(dir.exp);
+            else
+                code.push('true');
+            code.push('})}');
+        }
+    }
+    else if (dir.exp != null) {
+        code.push(' {...(', dir.exp, ')}');
+    }
+    return code;
 }
@@ -637,3 +709,57 @@ function getChildren(node, context) {
 }
+function getHTMLElementType(tag) {
+    switch (tag) {
+        case 'input':
+            return 'HTMLInputElement';
+        case 'textarea':
+            return 'HTMLTextAreaElement';
+        case 'select':
+            return 'HTMLSelectElement';
+        default:
+            return 'HTMLElement';
+    }
+}
 
+function createTransformIf(addIdentifer) {
+    return compilerCore.createStructuralDirectiveTransform(/^(if|else-if|else)$/, (node, dir, context) => {
+        const exp = dir.exp;
+        const content = exp === null || exp === void 0 ? void 0 : exp.content;
+        if (templateAstTypes.isSimpleExpressionNode(dir.exp)) {
+            trackIdentifiers(dir.exp.content, context, addIdentifer);
+        }
+        return compilerCore.processIf(node, dir, context, (ifNode, branch, isRoot) => {
+            return () => {
+                let hasElse = false;
+                if (exp != null) {
+                    exp.content = content !== null && content !== void 0 ? content : 'true';
+                    branch.condition = exp;
+                }
+                ifNode.codegenNode = compilerCore.createCompoundExpression([
+                    '{',
+                    ...ifNode.branches.flatMap((branch) => {
+                        hasElse = hasElse || branch.condition == null;
+                        return branch.condition != null
+                            ? [
+                                '(',
+                                branch.condition,
+                                ') ? (',
+                                ...normalizeChildren(branch.children),
+                                ') :',
+                            ]
+                            : ['(', ...normalizeChildren(branch.children), ')'];
+                    }),
+                    `${hasElse ? '' : 'null'}}`,
+                ]);
+            };
+        });
+    });
+}
+function normalizeChildren(children) {
+    return children.length === 0
+        ? ['null']
+        : children.length === 1
+            ? children
+            : ['<>', ...children, '</>'];
+}
+
 function createInterpolationTransform(options) {
@@ -650,2 +776,11 @@ return function transform(node, context) {
 }
+const typeHelpers = {
+    'v-for': [
+        `declare function _renderList(source: string, renderItem: (value: string, index: number) => any): any[];`,
+        `declare function _renderList(source: number, renderItem: (value: number, index: number) => any): any[];`,
+        `declare function _renderList<T>(source: T[], renderItem: (value: T, index: number) => any): any[];`,
+        `declare function _renderList<T>(source: Iterable<T>, renderItem: (value: T, index: number) => any): any[];`,
+        `declare function _renderList<T extends object>(source: T, renderItem: <K extends keyof T>(value: T[K], key: K, index: number) => any): any[];`,
+    ].join('\n'),
+};
 const components = {};
@@ -726,2 +861,3 @@ function compile(template, options) {
             createTransformFor((id) => identifiers.add(id)),
+            createTransformIf((id) => identifiers.add(id)),
             createExpressionTracker((id) => identifiers.add(id)),
@@ -735,3 +871,4 @@ createElementTransform(config),
     });
-    [compilerCore.OPEN_BLOCK, compilerCore.CREATE_BLOCK, compilerCore.CREATE_VNODE, compilerCore.FRAGMENT].forEach((helper) => {
+    const hasVFor = ast.helpers.includes(compilerCore.RENDER_LIST);
+    [compilerCore.OPEN_BLOCK, compilerCore.CREATE_BLOCK, compilerCore.CREATE_VNODE, compilerCore.FRAGMENT, compilerCore.RENDER_LIST].forEach((helper) => {
         const index = ast.helpers.indexOf(helper);
@@ -763,2 +900,3 @@ if (index >= 0)
                     push([
+                        hasVFor ? typeHelpers['v-for'] : null,
                         'declare const __completionsTrigger: InstanceType<typeof _Ctx>',
@@ -768,3 +906,5 @@ '__completionsTrigger./*@@vue:completions*/$props',
                         '',
-                    ].join('\n'));
+                    ]
+                        .filter((value) => value != null)
+                        .join('\n'));
                 }
@@ -771,0 +911,0 @@ if ((node === null || node === void 0 ? void 0 : node.loc) != null &&

dist/index.esm.js

@@ -1,2 +0,2 @@
-import { findDir, isSimpleIdentifier, createStructuralDirectiveTransform, createSimpleExpression, processFor, createCallExpression, RENDER_LIST, createCompoundExpression, createFunctionExpression, createForLoopParams, buildSlots, WITH_CTX, baseParse, transform, OPEN_BLOCK, CREATE_BLOCK, CREATE_VNODE, FRAGMENT, generate } from '@vue/compiler-core';
+import { findDir, isSimpleIdentifier, createStructuralDirectiveTransform, createSimpleExpression, processFor, createCallExpression, RENDER_LIST, createCompoundExpression, createFunctionExpression, createForLoopParams, buildSlots, WITH_CTX, processIf, baseParse, transform, OPEN_BLOCK, CREATE_BLOCK, CREATE_VNODE, FRAGMENT, generate } from '@vue/compiler-core';
 import { isInterpolationNode, isSimpleExpressionNode, isElementNode, isDirectiveNode, traverse as traverse$1, isComponentNode, isAttributeNode, isCommentNode, isTextNode, isIfNode, isForNode } from '@vuedx/template-ast-types';
@@ -59,4 +59,5 @@ import Path from 'path';
 }
+// TODO: Move it to ast helpers maybe
 function getComponentName(fileName) {
-    return Path.posix.basename(fileName).replace(/\.vue$/, '');
+    return Path.posix.basename(fileName).replace(/\.(vue|ts|tsx|js|jsx)$/, '');
 }
@@ -451,3 +452,5 @@ function processBogusComment(content) {
                         exp: component.named === true
-                            ? `{ ${component.name != null ? component.name + ' as ' : ''}${name} }`
+                            ? `{ ${component.name != null && component.name !== name
+                                ? component.name + ' as '
+                                : ''}${name} }`
                             : name,
@@ -465,3 +468,3 @@ path: component.path,
             const startTag = createSimpleExpression(name, false, createLoc(node.loc, node.loc.source.indexOf(node.tag), node.tag.length), false);
-            const attributes = getJSXAttributes(node);
+            const attributes = generateJSXAttributes(node);
             if (node.isSelfClosing) {
@@ -496,89 +499,158 @@ node.codegenNode = createCompoundExpression([
 }
-function getJSXAttributes(node, context) {
+const ControlDirectiveNameRE = /^(if|for|else-if|else|slot)$/;
+function generateJSXAttributes(node, context) {
     const result = [];
-    node.props.forEach((dir, index) => {
-        var _a;
+    const alreadyProcessed = new Set();
+    node.props.forEach((dir) => {
         if (isAttributeNode(dir)) {
-            result.push(' ', createSimpleExpression(dir.name, false, createLoc(dir.loc, 0, dir.name.length)));
-            if (dir.value != null) {
-                result.push('=', createSimpleExpression(dir.value.loc.source, false, dir.value.loc));
-            }
+            result.push(...generateAttribute(dir));
         }
-        else if (dir.name === 'bind') {
-            if (isSimpleExpressionNode(dir.arg)) {
-                if (dir.arg.isStatic || dir.arg.content === 'key') {
-                    dir.arg.isStatic = false;
-                    result.push(' ', dir.arg);
-                    if (dir.exp != null)
-                        result.push('={', dir.exp, '}');
-                }
-                else {
-                    result.push(' {...({[', dir.arg, ']: ');
-                    if (dir.exp != null)
-                        result.push(dir.exp);
-                    else
-                        result.push('true');
-                    result.push('})}');
-                }
+        else if (ControlDirectiveNameRE.test(dir.name) ||
+            alreadyProcessed.has(dir)) ;
+        else {
+            switch (dir.name) {
+                case 'bind':
+                    result.push(...generateVBind(dir));
+                    break;
+                case 'on':
+                    result.push(...generateVOn(dir));
+                    break;
+                case 'model':
+                    result.push(...generateVModel(dir, node));
+                    break;
+                default:
+                    {
+                        const code = generateCustomDirective(dir, node, alreadyProcessed);
+                        result.push(...code);
+                    }
+                    break;
             }
-            else if (dir.exp != null) {
-                result.push(' {...(', dir.exp, ')}');
-            }
         }
-        else if (dir.name === 'on') {
-            const exp = isSimpleExpressionNode(dir.exp)
-                ? isSimpleIdentifier(dir.exp.content.trim())
-                    ? [dir.exp]
-                    : dir.exp.content.includes('$event')
-                        ? ['$event =>', dir.exp]
-                        : ['() => ', dir.exp]
-                : ['() => {}'];
-            result.push(' ');
-            if (isSimpleExpressionNode(dir.arg)) {
-                if (dir.arg.isStatic) {
-                    result.push(createSimpleExpression(camelCase('on-' + dir.arg.content), false, dir.arg.loc), '={', ...exp, '}');
-                }
-                else {
-                    result.push('{...({[', dir.arg, ']: ', ...exp, '})}');
-                }
+    });
+    return result;
+}
+function generateCustomDirective(dir, node, alreadyProcessed) {
+    const code = [];
+    const dirs = node.props.filter((prop) => isDirectiveNode(prop) && prop.name === dir.name);
+    dirs.forEach((dir) => alreadyProcessed.add(dir));
+    code.push(` v-${dir.name}={`);
+    const isMultiValue = dirs.length > 1;
+    if (isMultiValue)
+        code.push('[');
+    dirs.forEach((dir) => {
+        var _a, _b;
+        code.push('{');
+        code.push('arg:', (_a = dir.arg) !== null && _a !== void 0 ? _a : 'undefined', ',');
+        code.push('exp:', (_b = dir.exp) !== null && _b !== void 0 ? _b : 'undefined', ',');
+        // TODO: Maybe array?
+        code.push('modifiers: {');
+        dir.modifiers.forEach((modifier) => {
+            code.push(modifier, ':true,');
+        });
+        code.push('}');
+        code.push('}');
+        if (isMultiValue)
+            code.push(',');
+    });
+    if (isMultiValue)
+        code.push(']');
+    code.push('}');
+    return code;
+}
+function generateVModel(dir, node) {
+    var _a;
+    const code = [];
+    const exp = (_a = dir.exp) !== null && _a !== void 0 ? _a : 'null';
+    const isNativeInput = /^(input|textarea|select)$/.test(node.tag);
+    if (isNativeInput && dir.arg == null) {
+        const isCheckboxOrRadio = node.props.some((prop) => isAttributeNode(prop) &&
+            (prop.name === 'radio' || prop.name === 'checkbox'));
+        const type = `Event & {target:${getHTMLElementType(node.tag)}}`;
+        code.push(` ${isCheckboxOrRadio ? 'checked' : 'value'}={`, exp, '}  ');
+        code.push(`onChange={($event) => (`, exp, ' = ', dir.modifiers.includes('number')
+            ? `Number(($event as ${type}).target.value)`
+            : `($event as ${type}).target.value`, ')}');
+    }
+    else {
+        code.push(' ');
+        if (isSimpleExpressionNode(dir.arg)) {
+            if (dir.arg.isStatic) {
+                code.push(dir.arg, '={', exp, '}');
             }
-            else if (dir.exp != null) {
-                result.push('{...(', dir.exp, ')}');
-            }
-        }
-        else if (dir.name === 'model') {
-            const exp = (_a = dir.exp) !== null && _a !== void 0 ? _a : 'null';
-            result.push(' ');
-            if (isSimpleExpressionNode(dir.arg)) {
-                if (dir.arg.isStatic) {
-                    result.push(dir.arg, '={', exp, '}');
-                }
-                else {
-                    result.push('{...({[', dir.arg, ']: ', exp, '})}');
-                }
-            }
             else {
-                result.push('modelValue={', exp, '}');
+                code.push('{...({[', dir.arg, ']: ', exp, '})}');
             }
-            result.push(' ');
-            const arg = isSimpleExpressionNode(dir.arg)
-                ? dir.arg.isStatic
-                    ? ["'", 'onUpdate:' + dir.arg.content, "'"]
-                    : [`['onUpdate:' + `, dir.arg, `]`]
-                : [`'onUpdate:modelValue'`];
-            result.push(`{...({`, ...arg, ': $event => ', exp, ' = $event', '})}');
-            if (isSimpleExpressionNode(dir.arg))
-                dir.arg.isStatic = false;
         }
-        else if (dir.name === 'slot') ;
         else {
-            result.push(` __directive_${dir.name}_${index}={[`);
-            if (isSimpleExpressionNode(dir.arg) && !dir.arg.isStatic)
-                result.push(dir.arg, ',');
+            code.push('modelValue={', exp, '}');
+        }
+        code.push(' ');
+        const arg = isSimpleExpressionNode(dir.arg)
+            ? dir.arg.isStatic
+                ? ["'", 'onUpdate:' + dir.arg.content, "'"]
+                : [`['onUpdate:' + `, dir.arg, `]`]
+            : [`'onUpdate:modelValue'`];
+        code.push(`{...({`, ...arg, ': $event => ', exp, ' = $event', '})}');
+        if (isSimpleExpressionNode(dir.arg))
+            dir.arg.isStatic = false;
+    }
+    return code;
+}
+function generateAttribute(attr, node) {
+    const code = [];
+    if (attr.name === 'class' || attr.name === 'style')
+        return [];
+    code.push(' ', createSimpleExpression(attr.name, false, createLoc(attr.loc, 0, attr.name.length)));
+    if (attr.value != null) {
+        code.push('=', createSimpleExpression(attr.value.loc.source, false, attr.value.loc));
+    }
+    return code;
+}
+const InlineVOnHandlerRE = /\bfunction\b|\b=>\b/;
+function generateVOn(dir, node) {
+    const code = [];
+    const exp = isSimpleExpressionNode(dir.exp)
+        ? isSimpleIdentifier(dir.exp.content.trim()) ||
+            InlineVOnHandlerRE.test(dir.exp.content)
+            ? [dir.exp]
+            : dir.exp.content.includes('$event')
+                ? ['$event =>', dir.exp]
+                : ['() => ', dir.exp]
+        : ['() => {}'];
+    code.push(' ');
+    if (isSimpleExpressionNode(dir.arg)) {
+        if (dir.arg.isStatic) {
+            code.push(createSimpleExpression(camelCase('on-' + dir.arg.content), false, dir.arg.loc), '={', ...exp, '}');
+        }
+        else {
+            code.push('{...({[', dir.arg, ']: ', ...exp, '})}');
+        }
+    }
+    else if (dir.exp != null) {
+        code.push('{...(', dir.exp, ')}');
+    }
+    return code;
+}
+function generateVBind(dir, node) {
+    const code = [];
+    if (isSimpleExpressionNode(dir.arg)) {
+        if (dir.arg.isStatic || dir.arg.content === 'key') {
+            dir.arg.isStatic = false;
+            code.push(' ', dir.arg);
             if (dir.exp != null)
-                result.push(dir.exp, ',');
-            result.push(']}');
+                code.push('={', dir.exp, '}');
         }
-    });
-    return result;
+        else {
+            code.push(' {...({[', dir.arg, ']: ');
+            if (dir.exp != null)
+                code.push(dir.exp);
+            else
+                code.push('true');
+            code.push('})}');
+        }
+    }
+    else if (dir.exp != null) {
+        code.push(' {...(', dir.exp, ')}');
+    }
+    return code;
 }
@@ -628,3 +700,57 @@ function getChildren(node, context) {
 }
+function getHTMLElementType(tag) {
+    switch (tag) {
+        case 'input':
+            return 'HTMLInputElement';
+        case 'textarea':
+            return 'HTMLTextAreaElement';
+        case 'select':
+            return 'HTMLSelectElement';
+        default:
+            return 'HTMLElement';
+    }
+}
 
+function createTransformIf(addIdentifer) {
+    return createStructuralDirectiveTransform(/^(if|else-if|else)$/, (node, dir, context) => {
+        const exp = dir.exp;
+        const content = exp === null || exp === void 0 ? void 0 : exp.content;
+        if (isSimpleExpressionNode(dir.exp)) {
+            trackIdentifiers(dir.exp.content, context, addIdentifer);
+        }
+        return processIf(node, dir, context, (ifNode, branch, isRoot) => {
+            return () => {
+                let hasElse = false;
+                if (exp != null) {
+                    exp.content = content !== null && content !== void 0 ? content : 'true';
+                    branch.condition = exp;
+                }
+                ifNode.codegenNode = createCompoundExpression([
+                    '{',
+                    ...ifNode.branches.flatMap((branch) => {
+                        hasElse = hasElse || branch.condition == null;
+                        return branch.condition != null
+                            ? [
+                                '(',
+                                branch.condition,
+                                ') ? (',
+                                ...normalizeChildren(branch.children),
+                                ') :',
+                            ]
+                            : ['(', ...normalizeChildren(branch.children), ')'];
+                    }),
+                    `${hasElse ? '' : 'null'}}`,
+                ]);
+            };
+        });
+    });
+}
+function normalizeChildren(children) {
+    return children.length === 0
+        ? ['null']
+        : children.length === 1
+            ? children
+            : ['<>', ...children, '</>'];
+}
+
 function createInterpolationTransform(options) {
@@ -641,2 +767,11 @@ return function transform(node, context) {
 }
+const typeHelpers = {
+    'v-for': [
+        `declare function _renderList(source: string, renderItem: (value: string, index: number) => any): any[];`,
+        `declare function _renderList(source: number, renderItem: (value: number, index: number) => any): any[];`,
+        `declare function _renderList<T>(source: T[], renderItem: (value: T, index: number) => any): any[];`,
+        `declare function _renderList<T>(source: Iterable<T>, renderItem: (value: T, index: number) => any): any[];`,
+        `declare function _renderList<T extends object>(source: T, renderItem: <K extends keyof T>(value: T[K], key: K, index: number) => any): any[];`,
+    ].join('\n'),
+};
 const components = {};
@@ -717,2 +852,3 @@ function compile(template, options) {
             createTransformFor((id) => identifiers.add(id)),
+            createTransformIf((id) => identifiers.add(id)),
             createExpressionTracker((id) => identifiers.add(id)),
@@ -726,3 +862,4 @@ createElementTransform(config),
     });
-    [OPEN_BLOCK, CREATE_BLOCK, CREATE_VNODE, FRAGMENT].forEach((helper) => {
+    const hasVFor = ast.helpers.includes(RENDER_LIST);
+    [OPEN_BLOCK, CREATE_BLOCK, CREATE_VNODE, FRAGMENT, RENDER_LIST].forEach((helper) => {
         const index = ast.helpers.indexOf(helper);
@@ -754,2 +891,3 @@ if (index >= 0)
                     push([
+                        hasVFor ? typeHelpers['v-for'] : null,
                         'declare const __completionsTrigger: InstanceType<typeof _Ctx>',
@@ -759,3 +897,5 @@ '__completionsTrigger./*@@vue:completions*/$props',
                         '',
-                    ].join('\n'));
+                    ]
+                        .filter((value) => value != null)
+                        .join('\n'));
                 }
@@ -762,0 +902,0 @@ if ((node === null || node === void 0 ? void 0 : node.loc) != null &&

package.json

 {
 	"name": "@vuedx/compiler-tsx",
-	"version": "0.3.1-insiders-1605496438.0",
+	"version": "0.3.1-insiders-1605961078.0",
 	"description": "",
@@ -18,3 +18,3 @@ "main": "dist/index.cjs.js",
 		"@vue/compiler-core": "^3.0.1",
-		"@vuedx/template-ast-types": "0.3.1-insiders-1605496438.0",
+		"@vuedx/template-ast-types": "0.3.1-insiders-1605961078.0",
 		"lodash.camelcase": "^4.3.0"
@@ -24,4 +24,4 @@ },
 		"@types/lodash.camelcase": "^4.3.6",
-		"@vuedx/analyze": "0.3.1-insiders-1605496438.0",
-		"@vuedx/compiler-sfc": "0.3.1-insiders-1605496438.0",
+		"@vuedx/analyze": "0.3.1-insiders-1605961078.0",
+		"@vuedx/compiler-sfc": "0.3.1-insiders-1605961078.0",
 		"chalk": "^4.1.0",
@@ -28,0 +28,0 @@ "cli-highlight": "^2.1.4",

No alert changes

Improved metrics

Total package byte prevSize

211270

increased by16.91%

Lines of code

1877

increased by17.39%

Dependency changes

• + Added@vuedx/template-ast-types@0.3.1-insiders-1605961078.0(transitive)

• - Removed@vuedx/template-ast-types@0.3.1-insiders-1605496438.0(transitive)

• Updated@vuedx/template-ast-types@0.3.1-insiders-1605961078.0