svelte2tsx 0.5.17 → 0.5.19

package/index.js

@@ -1144,7 +1144,7 @@ function extractTag(htmlx, tag, useNewTransformation) {
         let content = match[4];
         if (!content) {
             if (useNewTransformation) {
-                // Keep tag and transform it properly by removing it
+                // Keep tag and transform it like a regular element
                 content = '';
             }
             else {
@@ -4302,14 +4302,14 @@ function handleEach(str, eachBlock) {
         transforms = [
             `{ const $$_each = __sveltets_2_ensureArray(${containsComma ? '(' : ''}`,
             [eachBlock.expression.start, eachBlock.expression.end],
-            `${containsComma ? ')' : ''}); for(const `,
+            `${containsComma ? ')' : ''}); for(let `,
             [eachBlock.context.start, eachBlock.context.end],
             ' of $$_each){'
         ];
     }
     else {
         transforms = [
-            'for(const ',
+            'for(let ',
             [eachBlock.context.start, eachBlock.context.end],
             ` of __sveltets_2_ensureArray(${containsComma ? '(' : ''}`,
             [eachBlock.expression.start, eachBlock.expression.end],
@@ -4372,7 +4372,7 @@ function handleEventHandler(str, attr, element) {
 function handleIf(str, ifBlock) {
     if (ifBlock.elseif) {
         // {:else if expr}  -->  } else if(expr) {
-        const start = str.original.lastIndexOf('{:', ifBlock.expression.start);
+        const start = str.original.lastIndexOf('{', ifBlock.expression.start);
         str.overwrite(start, ifBlock.expression.start, '} else if (');
     }
     else {
@@ -7111,7 +7111,9 @@ function processSvelteTemplate(str, options) {
     }
     // resolve scripts
     const { scriptTag, moduleScriptTag } = scripts.getTopLevelScriptTags();
-    scripts.blankOtherScriptTags(str);
+    if (options.mode !== 'ts') {
+        scripts.blankOtherScriptTags(str);
+    }
     //resolve stores
     const resolvedStores = stores.getStoreNames();
     return {

package/index.mjs

@@ -1114,7 +1114,7 @@ function extractTag(htmlx, tag, useNewTransformation) {
         let content = match[4];
         if (!content) {
             if (useNewTransformation) {
-                // Keep tag and transform it properly by removing it
+                // Keep tag and transform it like a regular element
                 content = '';
             }
             else {
@@ -4272,14 +4272,14 @@ function handleEach(str, eachBlock) {
         transforms = [
             `{ const $$_each = __sveltets_2_ensureArray(${containsComma ? '(' : ''}`,
             [eachBlock.expression.start, eachBlock.expression.end],
-            `${containsComma ? ')' : ''}); for(const `,
+            `${containsComma ? ')' : ''}); for(let `,
             [eachBlock.context.start, eachBlock.context.end],
             ' of $$_each){'
         ];
     }
     else {
         transforms = [
-            'for(const ',
+            'for(let ',
             [eachBlock.context.start, eachBlock.context.end],
             ` of __sveltets_2_ensureArray(${containsComma ? '(' : ''}`,
             [eachBlock.expression.start, eachBlock.expression.end],
@@ -4342,7 +4342,7 @@ function handleEventHandler(str, attr, element) {
 function handleIf(str, ifBlock) {
     if (ifBlock.elseif) {
         // {:else if expr}  -->  } else if(expr) {
-        const start = str.original.lastIndexOf('{:', ifBlock.expression.start);
+        const start = str.original.lastIndexOf('{', ifBlock.expression.start);
         str.overwrite(start, ifBlock.expression.start, '} else if (');
     }
     else {
@@ -7081,7 +7081,9 @@ function processSvelteTemplate(str, options) {
     }
     // resolve scripts
     const { scriptTag, moduleScriptTag } = scripts.getTopLevelScriptTags();
-    scripts.blankOtherScriptTags(str);
+    if (options.mode !== 'ts') {
+        scripts.blankOtherScriptTags(str);
+    }
     //resolve stores
     const resolvedStores = stores.getStoreNames();
     return {

package/package.json

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

package/svelte-jsx.d.ts

@@ -3,6 +3,9 @@
 declare namespace svelteHTML {
 
   // Every namespace eligible for use needs to implement the following two functions
+  /**
+   * @internal do not use
+   */
   function mapElementTag<K extends keyof ElementTagNameMap>(
     tag: K
   ): ElementTagNameMap[K];
@@ -13,6 +16,9 @@ declare namespace svelteHTML {
     tag: any
   ): any; // needs to be any because used in context of <svelte:element>
 
+  /**
+   * @internal do not use
+   */
   function createElement<Elements extends IntrinsicElements, Key extends keyof Elements>(
     // "undefined | null" because of <svelte:element>
     element: Key | undefined | null, attrs: Elements[Key]
@@ -43,15 +49,223 @@ declare namespace svelteHTML {
   type TransitionEventHandler<T extends EventTarget> = svelte.JSX.TransitionEventHandler<T>;
   type MessageEventHandler<T extends EventTarget> = svelte.JSX.MessageEventHandler<T>;
 
-  // For backwards-compatibility, in case someone enhanced the typings from svelteHtml.HTMLAttributes
+  // For backwards-compatibility and ease-of-use, in case someone enhanced the typings from import('./svelte-html-do-not-use').HTMLAttributes/SVGAttributes
   // eslint-disable-next-line @typescript-eslint/no-empty-interface
   interface HTMLAttributes<T extends EventTarget = any> {}
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  interface SVGAttributes<T extends EventTarget = any> {}
 
+  /**
+   * @internal do not use
+   */
   type EventsWithColon<T> = {[Property in keyof T as Property extends `on${infer Key}` ? `on:${Key}` : Property]?: T[Property] }
-  type WithOldJsxTypings<T> = {[Property in keyof T]?: T[Property] & EventsWithColon<svelte.JSX.IntrinsicElements[Property & string]> & HTMLAttributes }
-  
-  // no "extends svelte.JSX" because else we wouldn't get the references to the right interfaces
-  interface IntrinsicElements extends WithOldJsxTypings<import('./svelte-html-do-not-use').SvelteHTMLElements> {}
+  /**
+   * @internal do not use
+   */
+  type HTMLProps<Property extends string, Override> =
+    // This omit chain ensures that properties manually defined in the new transformation take precedence
+    // over those manually defined in the old, taking precendence over the defaults, to make sth like this possible
+    // https://github.com/sveltejs/language-tools/issues/1352#issuecomment-1248627516
+    Omit<
+      Omit<import('./svelte-html-do-not-use').SvelteHTMLElements[Property], keyof EventsWithColon<svelte.JSX.IntrinsicElements[Property & string]>> & EventsWithColon<svelte.JSX.IntrinsicElements[Property & string]>,
+      keyof Override
+    > & Override;
+  /**
+   * @internal do not use
+   */
+  type RemoveIndex<T> = {
+    [ K in keyof T as string extends K ? never : K ] : T[K]
+  };
+
+  // the following type construct makes sure that we can use the new typings while maintaining backwards-compatibility in case someone enhanced the old typings
+  interface IntrinsicElements extends Omit<RemoveIndex<svelte.JSX.IntrinsicElements>, keyof RemoveIndex<import('./svelte-html-do-not-use').SvelteHTMLElements>> {
+    a: HTMLProps<'a', HTMLAttributes>;
+    abbr: HTMLProps<'abbr', HTMLAttributes>;
+    address: HTMLProps<'address', HTMLAttributes>;
+    area: HTMLProps<'area', HTMLAttributes>;
+    article: HTMLProps<'article', HTMLAttributes>;
+    aside: HTMLProps<'aside', HTMLAttributes>;
+    audio: HTMLProps<'audio', HTMLAttributes>;
+    b: HTMLProps<'b', HTMLAttributes>;
+    base: HTMLProps<'base', HTMLAttributes>;
+    bdi: HTMLProps<'bdi', HTMLAttributes>;
+    bdo: HTMLProps<'bdo', HTMLAttributes>;
+    big: HTMLProps<'big', HTMLAttributes>;
+    blockquote: HTMLProps<'blockquote', HTMLAttributes>;
+    body: HTMLProps<'body', HTMLAttributes>;
+    br: HTMLProps<'br', HTMLAttributes>;
+    button: HTMLProps<'button', HTMLAttributes>;
+    canvas: HTMLProps<'canvas', HTMLAttributes>;
+    caption: HTMLProps<'caption', HTMLAttributes>;
+    cite: HTMLProps<'cite', HTMLAttributes>;
+    code: HTMLProps<'code', HTMLAttributes>;
+    col: HTMLProps<'col', HTMLAttributes>;
+    colgroup: HTMLProps<'colgroup', HTMLAttributes>;
+    data: HTMLProps<'data', HTMLAttributes>;
+    datalist: HTMLProps<'datalist', HTMLAttributes>;
+    dd: HTMLProps<'dd', HTMLAttributes>;
+    del: HTMLProps<'del', HTMLAttributes>;
+    details: HTMLProps<'details', HTMLAttributes>;
+    dfn: HTMLProps<'dfn', HTMLAttributes>;
+    dialog: HTMLProps<'dialog', HTMLAttributes>;
+    div: HTMLProps<'div', HTMLAttributes>;
+    dl: HTMLProps<'dl', HTMLAttributes>;
+    dt: HTMLProps<'dt', HTMLAttributes>;
+    em: HTMLProps<'em', HTMLAttributes>;
+    embed: HTMLProps<'embed', HTMLAttributes>;
+    fieldset: HTMLProps<'fieldset', HTMLAttributes>;
+    figcaption: HTMLProps<'figcaption', HTMLAttributes>;
+    figure: HTMLProps<'figure', HTMLAttributes>;
+    footer: HTMLProps<'footer', HTMLAttributes>;
+    form: HTMLProps<'form', HTMLAttributes>;
+    h1: HTMLProps<'h1', HTMLAttributes>;
+    h2: HTMLProps<'h2', HTMLAttributes>;
+    h3: HTMLProps<'h3', HTMLAttributes>;
+    h4: HTMLProps<'h4', HTMLAttributes>;
+    h5: HTMLProps<'h5', HTMLAttributes>;
+    h6: HTMLProps<'h6', HTMLAttributes>;
+    head: HTMLProps<'head', HTMLAttributes>;
+    header: HTMLProps<'header', HTMLAttributes>;
+    hgroup: HTMLProps<'hgroup', HTMLAttributes>;
+    hr: HTMLProps<'hr', HTMLAttributes>;
+    html: HTMLProps<'html', HTMLAttributes>;
+    i: HTMLProps<'i', HTMLAttributes>;
+    iframe: HTMLProps<'iframe', HTMLAttributes>;
+    img: HTMLProps<'img', HTMLAttributes>;
+    input: HTMLProps<'input', HTMLAttributes>;
+    ins: HTMLProps<'ins', HTMLAttributes>;
+    kbd: HTMLProps<'kbd', HTMLAttributes>;
+    keygen: HTMLProps<'keygen', HTMLAttributes>;
+    label: HTMLProps<'label', HTMLAttributes>;
+    legend: HTMLProps<'legend', HTMLAttributes>;
+    li: HTMLProps<'li', HTMLAttributes>;
+    link: HTMLProps<'link', HTMLAttributes>;
+    main: HTMLProps<'main', HTMLAttributes>;
+    map: HTMLProps<'map', HTMLAttributes>;
+    mark: HTMLProps<'mark', HTMLAttributes>;
+    menu: HTMLProps<'menu', HTMLAttributes>;
+    menuitem: HTMLProps<'menuitem', HTMLAttributes>;
+    meta: HTMLProps<'meta', HTMLAttributes>;
+    meter: HTMLProps<'meter', HTMLAttributes>;
+    nav: HTMLProps<'nav', HTMLAttributes>;
+    noscript: HTMLProps<'noscript', HTMLAttributes>;
+    object: HTMLProps<'object', HTMLAttributes>;
+    ol: HTMLProps<'ol', HTMLAttributes>;
+    optgroup: HTMLProps<'optgroup', HTMLAttributes>;
+    option: HTMLProps<'option', HTMLAttributes>;
+    output: HTMLProps<'output', HTMLAttributes>;
+    p: HTMLProps<'p', HTMLAttributes>;
+    param: HTMLProps<'param', HTMLAttributes>;
+    picture: HTMLProps<'picture', HTMLAttributes>;
+    pre: HTMLProps<'pre', HTMLAttributes>;
+    progress: HTMLProps<'progress', HTMLAttributes>;
+    q: HTMLProps<'q', HTMLAttributes>;
+    rp: HTMLProps<'rp', HTMLAttributes>;
+    rt: HTMLProps<'rt', HTMLAttributes>;
+    ruby: HTMLProps<'ruby', HTMLAttributes>;
+    s: HTMLProps<'s', HTMLAttributes>;
+    samp: HTMLProps<'samp', HTMLAttributes>;
+    slot: HTMLProps<'slot', HTMLAttributes>;
+    script: HTMLProps<'script', HTMLAttributes>;
+    section: HTMLProps<'section', HTMLAttributes>;
+    select: HTMLProps<'select', HTMLAttributes>;
+    small: HTMLProps<'small', HTMLAttributes>;
+    source: HTMLProps<'source', HTMLAttributes>;
+    span: HTMLProps<'span', HTMLAttributes>;
+    strong: HTMLProps<'strong', HTMLAttributes>;
+    style: HTMLProps<'style', HTMLAttributes>;
+    sub: HTMLProps<'sub', HTMLAttributes>;
+    summary: HTMLProps<'summary', HTMLAttributes>;
+    sup: HTMLProps<'sup', HTMLAttributes>;
+    table: HTMLProps<'table', HTMLAttributes>;
+    template: HTMLProps<'template', HTMLAttributes>;
+    tbody: HTMLProps<'tbody', HTMLAttributes>;
+    td: HTMLProps<'td', HTMLAttributes>;
+    textarea: HTMLProps<'textarea', HTMLAttributes>;
+    tfoot: HTMLProps<'tfoot', HTMLAttributes>;
+    th: HTMLProps<'th', HTMLAttributes>;
+    thead: HTMLProps<'thead', HTMLAttributes>;
+    time: HTMLProps<'time', HTMLAttributes>;
+    title: HTMLProps<'title', HTMLAttributes>;
+    tr: HTMLProps<'tr', HTMLAttributes>;
+    track: HTMLProps<'track', HTMLAttributes>;
+    u: HTMLProps<'u', HTMLAttributes>;
+    ul: HTMLProps<'ul', HTMLAttributes>;
+    var: HTMLProps<'var', HTMLAttributes>;
+    video: HTMLProps<'video', HTMLAttributes>;
+    wbr: HTMLProps<'wbr', HTMLAttributes>;
+    webview: HTMLProps<'webview', HTMLAttributes>;
+    // SVG
+    svg: HTMLProps<'svg', SVGAttributes>;
+
+    animate: HTMLProps<'animate', SVGAttributes>;
+    animateMotion: HTMLProps<'animateMotion', SVGAttributes>;
+    animateTransform: HTMLProps<'animateTransform', SVGAttributes>;
+    circle: HTMLProps<'circle', SVGAttributes>;
+    clipPath: HTMLProps<'clipPath', SVGAttributes>;
+    defs: HTMLProps<'defs', SVGAttributes>;
+    desc: HTMLProps<'desc', SVGAttributes>;
+    ellipse: HTMLProps<'ellipse', SVGAttributes>;
+    feBlend: HTMLProps<'feBlend', SVGAttributes>;
+    feColorMatrix: HTMLProps<'feColorMatrix', SVGAttributes>;
+    feComponentTransfer: HTMLProps<'feComponentTransfer', SVGAttributes>;
+    feComposite: HTMLProps<'feComposite', SVGAttributes>;
+    feConvolveMatrix: HTMLProps<'feConvolveMatrix', SVGAttributes>;
+    feDiffuseLighting: HTMLProps<'feDiffuseLighting', SVGAttributes>;
+    feDisplacementMap: HTMLProps<'feDisplacementMap', SVGAttributes>;
+    feDistantLight: HTMLProps<'feDistantLight', SVGAttributes>;
+    feDropShadow: HTMLProps<'feDropShadow', SVGAttributes>;
+    feFlood: HTMLProps<'feFlood', SVGAttributes>;
+    feFuncA: HTMLProps<'feFuncA', SVGAttributes>;
+    feFuncB: HTMLProps<'feFuncB', SVGAttributes>;
+    feFuncG: HTMLProps<'feFuncG', SVGAttributes>;
+    feFuncR: HTMLProps<'feFuncR', SVGAttributes>;
+    feGaussianBlur: HTMLProps<'feGaussianBlur', SVGAttributes>;
+    feImage: HTMLProps<'feImage', SVGAttributes>;
+    feMerge: HTMLProps<'feMerge', SVGAttributes>;
+    feMergeNode: HTMLProps<'feMergeNode', SVGAttributes>;
+    feMorphology: HTMLProps<'feMorphology', SVGAttributes>;
+    feOffset: HTMLProps<'feOffset', SVGAttributes>;
+    fePointLight: HTMLProps<'fePointLight', SVGAttributes>;
+    feSpecularLighting: HTMLProps<'feSpecularLighting', SVGAttributes>;
+    feSpotLight: HTMLProps<'feSpotLight', SVGAttributes>;
+    feTile: HTMLProps<'feTile', SVGAttributes>;
+    feTurbulence: HTMLProps<'feTurbulence', SVGAttributes>;
+    filter: HTMLProps<'filter', SVGAttributes>;
+    foreignObject: HTMLProps<'foreignObject', SVGAttributes>;
+    g: HTMLProps<'g', SVGAttributes>;
+    image: HTMLProps<'image', SVGAttributes>;
+    line: HTMLProps<'line', SVGAttributes>;
+    linearGradient: HTMLProps<'linearGradient', SVGAttributes>;
+    marker: HTMLProps<'marker', SVGAttributes>;
+    mask: HTMLProps<'mask', SVGAttributes>;
+    metadata: HTMLProps<'metadata', SVGAttributes>;
+    mpath: HTMLProps<'mpath', SVGAttributes>;
+    path: HTMLProps<'path', SVGAttributes>;
+    pattern: HTMLProps<'pattern', SVGAttributes>;
+    polygon: HTMLProps<'polygon', SVGAttributes>;
+    polyline: HTMLProps<'polyline', SVGAttributes>;
+    radialGradient: HTMLProps<'radialGradient', SVGAttributes>;
+    rect: HTMLProps<'rect', SVGAttributes>;
+    stop: HTMLProps<'stop', SVGAttributes>;
+    switch: HTMLProps<'switch', SVGAttributes>;
+    symbol: HTMLProps<'symbol', SVGAttributes>;
+    text: HTMLProps<'text', SVGAttributes>;
+    textPath: HTMLProps<'textPath', SVGAttributes>;
+    tspan: HTMLProps<'tspan', SVGAttributes>;
+    use: HTMLProps<'use', SVGAttributes>;
+    view: HTMLProps<'view', SVGAttributes>;
+
+    // Svelte specific
+    'svelte:window': HTMLProps<'svelte:window', HTMLAttributes>;
+    'svelte:body': HTMLProps<'svelte:body', HTMLAttributes>;
+    'svelte:fragment': { slot?: string };
+    'svelte:options': { [name: string]: any };
+    'svelte:head': { [name: string]: any };
+
+    [name: string]: { [name: string]: any };
+  }
+
 }
 
 /**