svelte2tsx 0.5.1 → 0.5.2

package/index.js

@@ -3604,10 +3604,7 @@ class InlineComponent {
             // here, falling back to a any-typed component to ensure the user doesn't
             // get weird follup-errors all over the place. The diagnostic error
             // will be on the __sveltets_2_ensureComponent part, giving a more helpful message
-            this._name =
-                '$$_' +
-                    (isSvelteComponentTag ? 'sveltecomponent' : this.node.name) +
-                    this.computeDepth();
+            this._name = '$$_' + sanitizePropName(this.node.name) + this.computeDepth();
             const constructorName = this._name + 'C';
             const nodeNameStart = isSvelteComponentTag
                 ? this.node.expression.start
@@ -3885,12 +3882,22 @@ function handleAttribute(str, attr, parent, preserveCase, element) {
                 parent.type === 'Element' &&
                 numberOnlyAttributes.has(attr.name.toLowerCase()) &&
                 !isNaN(attrVal.data);
-            const quote = ['"', "'"].includes(str.original[attrVal.start - 1])
-                ? str.original[attrVal.start - 1]
-                : '"';
+            const includesTemplateLiteralQuote = attrVal.data.includes('`');
+            const quote = !includesTemplateLiteralQuote
+                ? '`'
+                : ['"', "'"].includes(str.original[attrVal.start - 1])
+                    ? str.original[attrVal.start - 1]
+                    : '"';
             if (!needsNumberConversion) {
                 attributeValue.push(quote);
             }
+            if (includesTemplateLiteralQuote && attrVal.data.split('\n').length > 1) {
+                // Multiline attribute value text which can't be wrapped in a template literal
+                // -> ensure it's still a valid transformation by transforming the actual line break
+                str.overwrite(attrVal.start, attrVal.end, attrVal.data.split('\n').join('\\n'), {
+                    contentOnly: true
+                });
+            }
             attributeValue.push([attrVal.start, attrVal.end]);
             if (!needsNumberConversion) {
                 attributeValue.push(quote);

package/index.mjs

@@ -3574,10 +3574,7 @@ class InlineComponent {
             // here, falling back to a any-typed component to ensure the user doesn't
             // get weird follup-errors all over the place. The diagnostic error
             // will be on the __sveltets_2_ensureComponent part, giving a more helpful message
-            this._name =
-                '$$_' +
-                    (isSvelteComponentTag ? 'sveltecomponent' : this.node.name) +
-                    this.computeDepth();
+            this._name = '$$_' + sanitizePropName(this.node.name) + this.computeDepth();
             const constructorName = this._name + 'C';
             const nodeNameStart = isSvelteComponentTag
                 ? this.node.expression.start
@@ -3855,12 +3852,22 @@ function handleAttribute(str, attr, parent, preserveCase, element) {
                 parent.type === 'Element' &&
                 numberOnlyAttributes.has(attr.name.toLowerCase()) &&
                 !isNaN(attrVal.data);
-            const quote = ['"', "'"].includes(str.original[attrVal.start - 1])
-                ? str.original[attrVal.start - 1]
-                : '"';
+            const includesTemplateLiteralQuote = attrVal.data.includes('`');
+            const quote = !includesTemplateLiteralQuote
+                ? '`'
+                : ['"', "'"].includes(str.original[attrVal.start - 1])
+                    ? str.original[attrVal.start - 1]
+                    : '"';
             if (!needsNumberConversion) {
                 attributeValue.push(quote);
             }
+            if (includesTemplateLiteralQuote && attrVal.data.split('\n').length > 1) {
+                // Multiline attribute value text which can't be wrapped in a template literal
+                // -> ensure it's still a valid transformation by transforming the actual line break
+                str.overwrite(attrVal.start, attrVal.end, attrVal.data.split('\n').join('\\n'), {
+                    contentOnly: true
+                });
+            }
             attributeValue.push([attrVal.start, attrVal.end]);
             if (!needsNumberConversion) {
                 attributeValue.push(quote);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte2tsx",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "Convert Svelte components to TSX for type checking",
   "author": "David Pershouse",
   "license": "MIT",