From 761796a5513ea24802eaaa46833c0c52b0861d83 Mon Sep 17 00:00:00 2001 From: Simon Date: Sun, 3 Jul 2022 14:55:32 +0200 Subject: [PATCH 1/2] (fix) adjust element typings for new transformation: use svelte:body instad of sveltebody --- packages/svelte2tsx/src/htmlxtojsx_v2/nodes/Element.ts | 4 ++-- packages/svelte2tsx/svelte-jsx.d.ts | 10 +++++----- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/Element.ts b/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/Element.ts index 4c6c9b968..1abd0fe74 100644 --- a/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/Element.ts +++ b/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/Element.ts @@ -98,9 +98,9 @@ export class Element { // remove the colon: svelte:xxx -> sveltexxx const nodeName = `svelte${this.node.name.substring(7)}`; this._name = '$$_' + nodeName + this.computeDepth(); - this.startTransformation.push(`{ ${createElement}("${nodeName}", {`); + this.startTransformation.push(`{ ${createElement}("${this.node.name}", {`); this.addNameConstDeclaration = () => - (this.startTransformation[0] = `{ const ${this._name} = ${createElement}("${nodeName}", {`); + (this.startTransformation[0] = `{ const ${this._name} = ${createElement}("${this.node.name}", {`); break; } case 'svelte:element': { diff --git a/packages/svelte2tsx/svelte-jsx.d.ts b/packages/svelte2tsx/svelte-jsx.d.ts index 1d3d2dded..77da6d931 100644 --- a/packages/svelte2tsx/svelte-jsx.d.ts +++ b/packages/svelte2tsx/svelte-jsx.d.ts @@ -294,11 +294,11 @@ declare namespace svelteHTML { view: SVGProps; // Svelte specific - sveltewindow: HTMLProps & SvelteWindowProps; - sveltebody: HTMLProps; - sveltefragment: { slot?: string; }; - svelteoptions: { [name: string]: any }; - sveltehead: { [name: string]: any }; + 'svelte:window': HTMLProps & SvelteWindowProps; + 'svelte:body': HTMLProps; + 'svelte:fragment': { slot?: string; }; + 'svelte:options': { [name: string]: any }; + 'svelte:head': { [name: string]: any }; [name: string]: { [name: string]: any }; } From d4ef848ca683d5c1d142290ce6529268f2d8e0f0 Mon Sep 17 00:00:00 2001 From: Simon Date: Sun, 3 Jul 2022 15:02:32 +0200 Subject: [PATCH 2/2] test --- .../htmlx2jsx/samples/action-svelte-body/expectedv2.js | 2 +- .../samples/binding-this-svelte-body/expectedv2.js | 2 +- .../samples/if-nested-slot-let-shadowed/expectedv2.js | 4 ++-- .../htmlx2jsx/samples/svelte-fragment/expectedv2.js | 8 ++++---- .../htmlx2jsx/samples/sveltehead-title/expectedv2.js | 2 +- .../samples/accessors-config-attr-false/expectedv2.ts | 2 +- .../samples/const-tag-component/expectedv2.ts | 6 +++--- .../samples/event-bubble-svelte-element/expectedv2.ts | 4 ++-- .../expectedv2.ts | 2 +- .../uses-accessors-attr-not-present/expectedv2.ts | 2 +- .../samples/uses-accessors-attr-present/expectedv2.ts | 2 +- .../uses-accessors-mustachetag-false/expectedv2.ts | 2 +- .../uses-accessors-mustachetag-true/expectedv2.ts | 2 +- .../samples/uses-svelte-components/expectedv2.ts | 10 +++++----- 14 files changed, 25 insertions(+), 25 deletions(-) diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/action-svelte-body/expectedv2.js b/packages/svelte2tsx/test/htmlx2jsx/samples/action-svelte-body/expectedv2.js index 926ea7c5c..ea3887a87 100644 --- a/packages/svelte2tsx/test/htmlx2jsx/samples/action-svelte-body/expectedv2.js +++ b/packages/svelte2tsx/test/htmlx2jsx/samples/action-svelte-body/expectedv2.js @@ -1 +1 @@ - { svelteHTML.createElement("sveltebody", { });__sveltets_2_ensureAction(blink(svelteHTML.mapElementTag('body')));} \ No newline at end of file + { svelteHTML.createElement("svelte:body", { });__sveltets_2_ensureAction(blink(svelteHTML.mapElementTag('body')));} \ No newline at end of file diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/binding-this-svelte-body/expectedv2.js b/packages/svelte2tsx/test/htmlx2jsx/samples/binding-this-svelte-body/expectedv2.js index fc82c6f80..5e03943bf 100644 --- a/packages/svelte2tsx/test/htmlx2jsx/samples/binding-this-svelte-body/expectedv2.js +++ b/packages/svelte2tsx/test/htmlx2jsx/samples/binding-this-svelte-body/expectedv2.js @@ -1 +1 @@ - { const $$_sveltebody0 = svelteHTML.createElement("sveltebody", { });element = $$_sveltebody0;} \ No newline at end of file + { const $$_sveltebody0 = svelteHTML.createElement("svelte:body", { });element = $$_sveltebody0;} \ No newline at end of file diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/if-nested-slot-let-shadowed/expectedv2.js b/packages/svelte2tsx/test/htmlx2jsx/samples/if-nested-slot-let-shadowed/expectedv2.js index 70bf22689..9f5e3e847 100644 --- a/packages/svelte2tsx/test/htmlx2jsx/samples/if-nested-slot-let-shadowed/expectedv2.js +++ b/packages/svelte2tsx/test/htmlx2jsx/samples/if-nested-slot-let-shadowed/expectedv2.js @@ -11,7 +11,7 @@ if(hello && hello1){ hello; } }Comp} - {const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,hello,} = $$_Comp0.$$slot_def["named1"];$$_$$;{ svelteHTML.createElement("sveltefragment", { }); + {const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,hello,} = $$_Comp0.$$slot_def["named1"];$$_$$;{ svelteHTML.createElement("svelte:fragment", { }); if(hello){ hello; } @@ -67,7 +67,7 @@ if(hello && hello1){ }else{ hello; bye; } - {const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,hello,} = $$_Comp0.$$slot_def["named1"];$$_$$;{ svelteHTML.createElement("sveltefragment", { }); + {const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,hello,} = $$_Comp0.$$slot_def["named1"];$$_$$;{ svelteHTML.createElement("svelte:fragment", { }); if(hello && bye){ hello; bye; } else if (hello && bye){ diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/svelte-fragment/expectedv2.js b/packages/svelte2tsx/test/htmlx2jsx/samples/svelte-fragment/expectedv2.js index abf40a1c5..313266094 100644 --- a/packages/svelte2tsx/test/htmlx2jsx/samples/svelte-fragment/expectedv2.js +++ b/packages/svelte2tsx/test/htmlx2jsx/samples/svelte-fragment/expectedv2.js @@ -1,19 +1,19 @@ { const $$_Component0C = __sveltets_2_ensureComponent(Component); const $$_Component0 = new $$_Component0C({ target: __sveltets_2_any(), props: {}}); - { svelteHTML.createElement("sveltefragment", {}); + { svelteHTML.createElement("svelte:fragment", {}); { svelteHTML.createElement("p", {}); } } - {const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,} = $$_Component0.$$slot_def["named"];$$_$$;{ svelteHTML.createElement("sveltefragment", { }); + {const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,} = $$_Component0.$$slot_def["named"];$$_$$;{ svelteHTML.createElement("svelte:fragment", { }); { svelteHTML.createElement("p", {}); } }} Component} { const $$_Component0C = __sveltets_2_ensureComponent(Component); const $$_Component0 = new $$_Component0C({ target: __sveltets_2_any(), props: {}}); - {const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,foo,bar:baz,} = $$_Component0.$$slot_def.default;$$_$$;{ svelteHTML.createElement("sveltefragment", { }); + {const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,foo,bar:baz,} = $$_Component0.$$slot_def.default;$$_$$;{ svelteHTML.createElement("svelte:fragment", { }); { svelteHTML.createElement("p", {});foo; baz; } }} - {const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,foo,bar:baz,} = $$_Component0.$$slot_def["named"];$$_$$;{ svelteHTML.createElement("sveltefragment", { }); + {const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,foo,bar:baz,} = $$_Component0.$$slot_def["named"];$$_$$;{ svelteHTML.createElement("svelte:fragment", { }); { svelteHTML.createElement("p", {});foo; baz; } }} Component} \ No newline at end of file diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/sveltehead-title/expectedv2.js b/packages/svelte2tsx/test/htmlx2jsx/samples/sveltehead-title/expectedv2.js index 99b023e72..709e7318c 100644 --- a/packages/svelte2tsx/test/htmlx2jsx/samples/sveltehead-title/expectedv2.js +++ b/packages/svelte2tsx/test/htmlx2jsx/samples/sveltehead-title/expectedv2.js @@ -1,3 +1,3 @@ - { svelteHTML.createElement("sveltehead", {}); + { svelteHTML.createElement("svelte:head", {}); { svelteHTML.createElement("title", {}); } } \ No newline at end of file diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/accessors-config-attr-false/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/accessors-config-attr-false/expectedv2.ts index 76c685516..187d5b656 100644 --- a/packages/svelte2tsx/test/svelte2tsx/samples/accessors-config-attr-false/expectedv2.ts +++ b/packages/svelte2tsx/test/svelte2tsx/samples/accessors-config-attr-false/expectedv2.ts @@ -3,7 +3,7 @@ let foo: number = undefined/*Ωignore_startΩ*/;foo = __sveltets_1_any(foo);/*Ωignore_endΩ*/; ; -async () => { { svelteHTML.createElement("svelteoptions", { "accessors":false,});} +async () => { { svelteHTML.createElement("svelte:options", { "accessors":false,});} }; return { props: {foo: foo}, slots: {}, getters: {}, events: {} }} diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/const-tag-component/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/const-tag-component/expectedv2.ts index 6cfe66b3a..106bcdbd8 100644 --- a/packages/svelte2tsx/test/svelte2tsx/samples/const-tag-component/expectedv2.ts +++ b/packages/svelte2tsx/test/svelte2tsx/samples/const-tag-component/expectedv2.ts @@ -14,21 +14,21 @@ function render() { async () => { { const $$_Component0C = __sveltets_2_ensureComponent(Component); const $$_Component0 = new $$_Component0C({ target: __sveltets_2_any(), props: {box,}}); - {const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,box,} = $$_Component0.$$slot_def["box1"];$$_$$;{ svelteHTML.createElement("sveltefragment", { }); + {const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,box,} = $$_Component0.$$slot_def["box1"];$$_$$;{ svelteHTML.createElement("svelte:fragment", { }); const {area, volume} = calculate(box.width, box.height, constant); const perimeter = (box.width + box.height) * constant; const [width, height, sum] = [box.width * constant, box.height, box.width * constant + box.height]; { svelteHTML.createElement("div", {});area; volume; perimeter; width; height; sum; } }} - {const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,width,height,} = $$_Component0.$$slot_def["box2"];$$_$$;{ svelteHTML.createElement("sveltefragment", { }); + {const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,width,height,} = $$_Component0.$$slot_def["box2"];$$_$$;{ svelteHTML.createElement("svelte:fragment", { }); const {area, volume} = calculate(width, height, constant); const perimeter = (width + height) * constant; const [_width, _height, sum] = [width * constant, height, width * constant + height]; { svelteHTML.createElement("div", {});area; volume; perimeter; _width; _height; sum; } }} - {const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,box:{width, height},} = $$_Component0.$$slot_def.default;$$_$$;{ svelteHTML.createElement("sveltefragment", { }); + {const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,box:{width, height},} = $$_Component0.$$slot_def.default;$$_$$;{ svelteHTML.createElement("svelte:fragment", { }); const {area, volume} = calculate(width, height, constant); const perimeter = (width + height) * constant; const [_width, _height, sum] = [width * constant, height, width * constant + height]; diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/event-bubble-svelte-element/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/event-bubble-svelte-element/expectedv2.ts index e001594ea..d65196c96 100644 --- a/packages/svelte2tsx/test/svelte2tsx/samples/event-bubble-svelte-element/expectedv2.ts +++ b/packages/svelte2tsx/test/svelte2tsx/samples/event-bubble-svelte-element/expectedv2.ts @@ -1,7 +1,7 @@ /// ;function render() { -async () => { { svelteHTML.createElement("sveltebody", { "onclick":undefined,}); } - { svelteHTML.createElement("sveltewindow", { "onresize":undefined,}); }}; +async () => { { svelteHTML.createElement("svelte:body", { "onclick":undefined,}); } + { svelteHTML.createElement("svelte:window", { "onresize":undefined,}); }}; return { props: {}, slots: {}, getters: {}, events: {'click':__sveltets_1_mapBodyEvent('click'), 'resize':__sveltets_1_mapWindowEvent('resize')} }} export default class Input__SvelteComponent_ extends __sveltets_1_createSvelte2TsxComponent(__sveltets_1_partial(__sveltets_1_with_any_event(render()))) { diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/script-inside-head-after-toplevel-script/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/script-inside-head-after-toplevel-script/expectedv2.ts index a52d14b96..a21a8ca2a 100644 --- a/packages/svelte2tsx/test/svelte2tsx/samples/script-inside-head-after-toplevel-script/expectedv2.ts +++ b/packages/svelte2tsx/test/svelte2tsx/samples/script-inside-head-after-toplevel-script/expectedv2.ts @@ -9,7 +9,7 @@ async () => { { svelteHTML.createElement("div", {}); - { svelteHTML.createElement("sveltehead", {}); + { svelteHTML.createElement("svelte:head", {}); { svelteHTML.createElement("link", { "rel":`stylesheet`,"href":`/lib/jodit.es2018.min.css`,});} }}; diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/uses-accessors-attr-not-present/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/uses-accessors-attr-not-present/expectedv2.ts index 238247013..83da8160b 100644 --- a/packages/svelte2tsx/test/svelte2tsx/samples/uses-accessors-attr-not-present/expectedv2.ts +++ b/packages/svelte2tsx/test/svelte2tsx/samples/uses-accessors-attr-not-present/expectedv2.ts @@ -4,7 +4,7 @@ let foo: number = undefined/*Ωignore_startΩ*/;foo = __sveltets_1_any(foo);/*Ωignore_endΩ*/ const bar: string = '' ; -async () => { { svelteHTML.createElement("svelteoptions", {});} +async () => { { svelteHTML.createElement("svelte:options", {});} }; return { props: {foo: foo , bar: bar}, slots: {}, getters: {bar: bar}, events: {} }} diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/uses-accessors-attr-present/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/uses-accessors-attr-present/expectedv2.ts index 39426dc4e..649458feb 100644 --- a/packages/svelte2tsx/test/svelte2tsx/samples/uses-accessors-attr-present/expectedv2.ts +++ b/packages/svelte2tsx/test/svelte2tsx/samples/uses-accessors-attr-present/expectedv2.ts @@ -7,7 +7,7 @@ const bar: string = '' ; -async () => { { svelteHTML.createElement("svelteoptions", {"accessors":true,});} +async () => { { svelteHTML.createElement("svelte:options", {"accessors":true,});} }; return { props: {foo: foo , foo2: foo2 , class: clazz , bar: bar}, slots: {}, getters: {bar: bar}, events: {} }} diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/uses-accessors-mustachetag-false/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/uses-accessors-mustachetag-false/expectedv2.ts index f5ffa64c6..59199bd08 100644 --- a/packages/svelte2tsx/test/svelte2tsx/samples/uses-accessors-mustachetag-false/expectedv2.ts +++ b/packages/svelte2tsx/test/svelte2tsx/samples/uses-accessors-mustachetag-false/expectedv2.ts @@ -4,7 +4,7 @@ let foo: number = undefined/*Ωignore_startΩ*/;foo = __sveltets_1_any(foo);/*Ωignore_endΩ*/ const bar: string = '' ; -async () => { { svelteHTML.createElement("svelteoptions", { "accessors":false,});} +async () => { { svelteHTML.createElement("svelte:options", { "accessors":false,});} }; return { props: {foo: foo , bar: bar}, slots: {}, getters: {bar: bar}, events: {} }} diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/uses-accessors-mustachetag-true/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/uses-accessors-mustachetag-true/expectedv2.ts index f944b7c63..ddc53ae33 100644 --- a/packages/svelte2tsx/test/svelte2tsx/samples/uses-accessors-mustachetag-true/expectedv2.ts +++ b/packages/svelte2tsx/test/svelte2tsx/samples/uses-accessors-mustachetag-true/expectedv2.ts @@ -7,7 +7,7 @@ const bar: string = '' ; -async () => { { svelteHTML.createElement("svelteoptions", { "accessors":true,});} +async () => { { svelteHTML.createElement("svelte:options", { "accessors":true,});} }; return { props: {foo: foo , foo2: foo2 , class: clazz , bar: bar}, slots: {}, getters: {bar: bar}, events: {} }} diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/uses-svelte-components/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/uses-svelte-components/expectedv2.ts index 334209e1e..b1b203480 100644 --- a/packages/svelte2tsx/test/svelte2tsx/samples/uses-svelte-components/expectedv2.ts +++ b/packages/svelte2tsx/test/svelte2tsx/samples/uses-svelte-components/expectedv2.ts @@ -6,13 +6,13 @@ async () => {if(true){ { const $$_svelte_component0C = __sveltets_2_ensureComponent(testComponent); new $$_svelte_component0C({ target: __sveltets_2_any(), props: { "propa":5,}}); { svelteHTML.createElement("h1", {}); } } - { svelteHTML.createElement("sveltewindow", { "onclick":e => {},});} - { svelteHTML.createElement("sveltebody", { "onclick":e => {},});} - { svelteHTML.createElement("sveltehead", {}); + { svelteHTML.createElement("svelte:window", { "onclick":e => {},});} + { svelteHTML.createElement("svelte:body", { "onclick":e => {},});} + { svelteHTML.createElement("svelte:head", {}); { svelteHTML.createElement("h1", {}); } } - { svelteHTML.createElement("svelteoptions", {});} - { svelteHTML.createElement("sveltefragment", {});}}; + { svelteHTML.createElement("svelte:options", {});} + { svelteHTML.createElement("svelte:fragment", {});}}; return { props: {}, slots: {}, getters: {}, events: {} }} export default class Input__SvelteComponent_ extends __sveltets_1_createSvelte2TsxComponent(__sveltets_1_partial(__sveltets_1_with_any_event(render()))) {