svelte2tsx 0.5.9 → 0.5.10

package/index.js

@@ -2440,22 +2440,42 @@ function handleEventHandler$1(htmlx, str, attr, parent) {
  */
 function handleIf$1(htmlx, str, ifBlock, ifScope) {
     const endIf = htmlx.lastIndexOf('{', ifBlock.end - 1);
+    const constTags = extractConstTags(ifBlock.children);
+    const ifConditionEnd = htmlx.indexOf('}', ifBlock.expression.end) + 1;
+    const hasConstTags = !!constTags.length;
+    const endIIFE = createEndIIFE(hasConstTags);
+    const startIIFE = createStartIIFE(hasConstTags);
+    if (hasConstTags) {
+        // {@const hi = exp} <div>{hi}> -> {(() => { const hi = exp; return <> <div>{hi}<div></> })}
+        constTags.forEach((constTag) => {
+            constTag(ifConditionEnd, str);
+        });
+        str.appendRight(ifConditionEnd, 'return <>');
+        if (ifBlock.else) {
+            // {:else} -> </>})()}</> : <>
+            const elseWord = htmlx.lastIndexOf(':else', ifBlock.else.start);
+            const elseStart = htmlx.lastIndexOf('{', elseWord);
+            str.appendLeft(elseStart, endIIFE);
+        }
+    }
     if (ifBlock.elseif) {
         // {:else if expr}  ->  : (expr) ? <>
+        // {:else if expr}{@const ...}  ->  : (expr) ? <>{(() => {const ...; return <>
         const elseIfStart = htmlx.lastIndexOf('{', ifBlock.expression.start);
-        const elseIfConditionEnd = htmlx.indexOf('}', ifBlock.expression.end) + 1;
-        str.overwrite(elseIfStart, ifBlock.expression.start, '</> : (', { contentOnly: true });
-        str.overwrite(withTrailingPropertyAccess$1(str.original, ifBlock.expression.end), elseIfConditionEnd, ') ? <>');
+        str.overwrite(elseIfStart, ifBlock.expression.start, '</> : (', {
+            contentOnly: true
+        });
+        str.overwrite(withTrailingPropertyAccess$1(str.original, ifBlock.expression.end), ifConditionEnd, ') ? <>' + startIIFE);
         ifScope.addElseIf(ifBlock.expression, str);
         if (!ifBlock.else) {
-            str.appendLeft(endIf, '</> : <>');
+            str.appendLeft(endIf, endIIFE + '</> : <>');
         }
         return;
     }
     // {#if expr}  ->  {(expr) ? <>
+    // {#if expr}{@const ...} ->  {(expr) ? <>{(() => {const ...; return <>
     str.overwrite(ifBlock.start, ifBlock.expression.start, '{(', { contentOnly: true });
-    const end = htmlx.indexOf('}', ifBlock.expression.end);
-    str.overwrite(withTrailingPropertyAccess$1(str.original, ifBlock.expression.end), end + 1, ') ? <>', { contentOnly: true });
+    str.overwrite(withTrailingPropertyAccess$1(str.original, ifBlock.expression.end), ifConditionEnd, ') ? <>' + startIIFE, { contentOnly: true });
     ifScope.addNestedIf(ifBlock.expression, str);
     if (ifBlock.else) {
         // {/if}  ->  </> }
@@ -2463,11 +2483,21 @@ function handleIf$1(htmlx, str, ifBlock, ifScope) {
     }
     else {
         // {/if}  ->  </> : <></>}
-        str.overwrite(endIf, ifBlock.end, '</> : <></>}', { contentOnly: true });
+        // {@const ...} -> </>})()}</> : <></>}
+        str.overwrite(endIf, ifBlock.end, endIIFE + '</> : <></>}', {
+            contentOnly: true
+        });
     }
 }
+function createStartIIFE(hasConstTags) {
+    return hasConstTags ? '{(() => {' : '';
+}
+function createEndIIFE(hasConstTags) {
+    return hasConstTags ? '</>})()}' : '';
+}
 /**
  * {:else}   --->   </> : <>
+ * {:else} {@const ...} -> </> : <>{(() => { const ...; return<>
  */
 function handleElse$1(htmlx, str, elseBlock, parent, ifScope) {
     var _a, _b;
@@ -2478,8 +2508,18 @@ function handleElse$1(htmlx, str, elseBlock, parent, ifScope) {
     const elseEnd = htmlx.lastIndexOf('}', elseBlock.start);
     const elseword = htmlx.lastIndexOf(':else', elseEnd);
     const elseStart = htmlx.lastIndexOf('{', elseword);
-    str.overwrite(elseStart, elseEnd + 1, '</> : <>');
+    const constTags = extractConstTags(elseBlock.children);
+    const hasConstTags = !!constTags.length;
+    str.overwrite(elseStart, elseEnd + 1, '</> : <>' + createStartIIFE(hasConstTags));
     ifScope.addElse();
+    if (!hasConstTags) {
+        return;
+    }
+    constTags.forEach((constTag) => {
+        constTag(elseEnd + 1, str);
+    });
+    str.appendRight(elseEnd + 1, 'return <>');
+    str.appendLeft(elseBlock.end, createEndIIFE(true));
 }
 
 var IfType;
@@ -3925,7 +3965,7 @@ function handleAttribute(str, attr, parent, preserveCase, element) {
         return;
     }
     if (attr.value.length == 0) {
-        // attr=""
+        // shouldn't happen
         addAttribute(attributeName, ['""']);
         return;
     }
@@ -3933,6 +3973,11 @@ function handleAttribute(str, attr, parent, preserveCase, element) {
     if (attr.value.length == 1) {
         const attrVal = attr.value[0];
         if (attrVal.type == 'Text') {
+            // Handle the attr="" special case with a transformation that allows mapping of the position
+            if (attrVal.start === attrVal.end) {
+                addAttribute(attributeName, [[attrVal.start - 1, attrVal.end + 1]]);
+                return;
+            }
             const hasBrackets = str.original.lastIndexOf('}', attrVal.end) === attrVal.end - 1 ||
                 str.original.lastIndexOf('}"', attrVal.end) === attrVal.end - 1 ||
                 str.original.lastIndexOf("}'", attrVal.end) === attrVal.end - 1;

package/index.mjs

@@ -2410,22 +2410,42 @@ function handleEventHandler$1(htmlx, str, attr, parent) {
  */
 function handleIf$1(htmlx, str, ifBlock, ifScope) {
     const endIf = htmlx.lastIndexOf('{', ifBlock.end - 1);
+    const constTags = extractConstTags(ifBlock.children);
+    const ifConditionEnd = htmlx.indexOf('}', ifBlock.expression.end) + 1;
+    const hasConstTags = !!constTags.length;
+    const endIIFE = createEndIIFE(hasConstTags);
+    const startIIFE = createStartIIFE(hasConstTags);
+    if (hasConstTags) {
+        // {@const hi = exp} <div>{hi}> -> {(() => { const hi = exp; return <> <div>{hi}<div></> })}
+        constTags.forEach((constTag) => {
+            constTag(ifConditionEnd, str);
+        });
+        str.appendRight(ifConditionEnd, 'return <>');
+        if (ifBlock.else) {
+            // {:else} -> </>})()}</> : <>
+            const elseWord = htmlx.lastIndexOf(':else', ifBlock.else.start);
+            const elseStart = htmlx.lastIndexOf('{', elseWord);
+            str.appendLeft(elseStart, endIIFE);
+        }
+    }
     if (ifBlock.elseif) {
         // {:else if expr}  ->  : (expr) ? <>
+        // {:else if expr}{@const ...}  ->  : (expr) ? <>{(() => {const ...; return <>
         const elseIfStart = htmlx.lastIndexOf('{', ifBlock.expression.start);
-        const elseIfConditionEnd = htmlx.indexOf('}', ifBlock.expression.end) + 1;
-        str.overwrite(elseIfStart, ifBlock.expression.start, '</> : (', { contentOnly: true });
-        str.overwrite(withTrailingPropertyAccess$1(str.original, ifBlock.expression.end), elseIfConditionEnd, ') ? <>');
+        str.overwrite(elseIfStart, ifBlock.expression.start, '</> : (', {
+            contentOnly: true
+        });
+        str.overwrite(withTrailingPropertyAccess$1(str.original, ifBlock.expression.end), ifConditionEnd, ') ? <>' + startIIFE);
         ifScope.addElseIf(ifBlock.expression, str);
         if (!ifBlock.else) {
-            str.appendLeft(endIf, '</> : <>');
+            str.appendLeft(endIf, endIIFE + '</> : <>');
         }
         return;
     }
     // {#if expr}  ->  {(expr) ? <>
+    // {#if expr}{@const ...} ->  {(expr) ? <>{(() => {const ...; return <>
     str.overwrite(ifBlock.start, ifBlock.expression.start, '{(', { contentOnly: true });
-    const end = htmlx.indexOf('}', ifBlock.expression.end);
-    str.overwrite(withTrailingPropertyAccess$1(str.original, ifBlock.expression.end), end + 1, ') ? <>', { contentOnly: true });
+    str.overwrite(withTrailingPropertyAccess$1(str.original, ifBlock.expression.end), ifConditionEnd, ') ? <>' + startIIFE, { contentOnly: true });
     ifScope.addNestedIf(ifBlock.expression, str);
     if (ifBlock.else) {
         // {/if}  ->  </> }
@@ -2433,11 +2453,21 @@ function handleIf$1(htmlx, str, ifBlock, ifScope) {
     }
     else {
         // {/if}  ->  </> : <></>}
-        str.overwrite(endIf, ifBlock.end, '</> : <></>}', { contentOnly: true });
+        // {@const ...} -> </>})()}</> : <></>}
+        str.overwrite(endIf, ifBlock.end, endIIFE + '</> : <></>}', {
+            contentOnly: true
+        });
     }
 }
+function createStartIIFE(hasConstTags) {
+    return hasConstTags ? '{(() => {' : '';
+}
+function createEndIIFE(hasConstTags) {
+    return hasConstTags ? '</>})()}' : '';
+}
 /**
  * {:else}   --->   </> : <>
+ * {:else} {@const ...} -> </> : <>{(() => { const ...; return<>
  */
 function handleElse$1(htmlx, str, elseBlock, parent, ifScope) {
     var _a, _b;
@@ -2448,8 +2478,18 @@ function handleElse$1(htmlx, str, elseBlock, parent, ifScope) {
     const elseEnd = htmlx.lastIndexOf('}', elseBlock.start);
     const elseword = htmlx.lastIndexOf(':else', elseEnd);
     const elseStart = htmlx.lastIndexOf('{', elseword);
-    str.overwrite(elseStart, elseEnd + 1, '</> : <>');
+    const constTags = extractConstTags(elseBlock.children);
+    const hasConstTags = !!constTags.length;
+    str.overwrite(elseStart, elseEnd + 1, '</> : <>' + createStartIIFE(hasConstTags));
     ifScope.addElse();
+    if (!hasConstTags) {
+        return;
+    }
+    constTags.forEach((constTag) => {
+        constTag(elseEnd + 1, str);
+    });
+    str.appendRight(elseEnd + 1, 'return <>');
+    str.appendLeft(elseBlock.end, createEndIIFE(true));
 }
 
 var IfType;
@@ -3895,7 +3935,7 @@ function handleAttribute(str, attr, parent, preserveCase, element) {
         return;
     }
     if (attr.value.length == 0) {
-        // attr=""
+        // shouldn't happen
         addAttribute(attributeName, ['""']);
         return;
     }
@@ -3903,6 +3943,11 @@ function handleAttribute(str, attr, parent, preserveCase, element) {
     if (attr.value.length == 1) {
         const attrVal = attr.value[0];
         if (attrVal.type == 'Text') {
+            // Handle the attr="" special case with a transformation that allows mapping of the position
+            if (attrVal.start === attrVal.end) {
+                addAttribute(attributeName, [[attrVal.start - 1, attrVal.end + 1]]);
+                return;
+            }
             const hasBrackets = str.original.lastIndexOf('}', attrVal.end) === attrVal.end - 1 ||
                 str.original.lastIndexOf('}"', attrVal.end) === attrVal.end - 1 ||
                 str.original.lastIndexOf("}'", attrVal.end) === attrVal.end - 1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte2tsx",
-  "version": "0.5.9",
+  "version": "0.5.10",
   "description": "Convert Svelte components to TSX for type checking",
   "author": "David Pershouse",
   "license": "MIT",
@@ -18,6 +18,7 @@
   "module": "index.mjs",
   "types": "index.d.ts",
   "devDependencies": {
+    "@jridgewell/trace-mapping": "^0.3.9",
     "@rollup/plugin-commonjs": "^15.0.0",
     "@rollup/plugin-json": "^4.0.0",
     "@rollup/plugin-node-resolve": "^9.0.0",
@@ -31,10 +32,9 @@
     "periscopic": "^2.0.2",
     "rollup": "2.52.7",
     "rollup-plugin-delete": "^2.0.0",
-    "source-map": "^0.6.1",
     "source-map-support": "^0.5.16",
     "sourcemap-codec": "^1.4.8",
-    "svelte": "~3.47.0",
+    "svelte": "~3.48.0",
     "tiny-glob": "^0.2.6",
     "tslib": "^1.10.0",
     "typescript": "^4.6.2"