msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

perf: inline default imports into template

Browse Source
pull/13242/head
Ben McCann 2 years ago
parent 47918328d7
commit 84d1cfb2b2
7 changed files with 37 additions and 14 deletions
Show Stats Download Patch File Download Diff File

5
.changeset/seven-shrimps-explode.md
Unescape View File

@ -0,0 +1,5 @@
---
'svelte': patch
---
perf: inline default imports into template

7
packages/svelte/src/compiler/phases/3-transform/client/utils.js
Unescape View File

@ -314,15 +314,12 @@ export function create_derived(state, arg) {
/** /**
* Whether a variable can be referenced directly from template string. * Whether a variable can be referenced directly from template string.
* @param {import('#compiler').Binding | undefined} binding * @param {import('#compiler').Binding} binding
* @returns {boolean} * @returns {boolean}
*/ */
export function can_inline_variable(binding) { export function can_inline_variable(binding) {
return ( return (
!!binding &&
// in a `<script module>` block // in a `<script module>` block
!binding.scope.parent && !binding.scope.parent
// to prevent the need for escaping
binding.initial?.type === 'Literal'
); );
} }

10
packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
Unescape View File

@ -631,7 +631,9 @@ function build_element_attribute_update_assignment(element, node_id, attribute,
} else { } else {
if (inlinable_expression) { if (inlinable_expression) {
context.state.template.push_quasi(` ${name}="`); context.state.template.push_quasi(` ${name}="`);
context.state.template.push_expression(value); context.state.template.push_expression(
inlinable_expression.need_to_escape ? b.call('$.escape', value) : value
);
context.state.template.push_quasi('"'); context.state.template.push_quasi('"');
} else { } else {
state.init.push(update); state.init.push(update);
@ -646,22 +648,24 @@ function build_element_attribute_update_assignment(element, node_id, attribute,
*/ */
function is_inlinable_expression(nodes, state) { function is_inlinable_expression(nodes, state) {
let has_expression_tag = false; let has_expression_tag = false;
let need_to_escape = false;
for (let value of nodes) { for (let value of nodes) {
if (value.type === 'ExpressionTag') { if (value.type === 'ExpressionTag') {
if (value.expression.type === 'Identifier') { if (value.expression.type === 'Identifier') {
const binding = state.scope const binding = state.scope
.owner(value.expression.name) .owner(value.expression.name)
?.declarations.get(value.expression.name); ?.declarations.get(value.expression.name);
if (!can_inline_variable(binding)) { if (!binding || !can_inline_variable(binding)) {
return false; return false;
} }
need_to_escape = need_to_escape || binding.initial?.type !== 'Literal';
} else { } else {
return false; return false;
} }
has_expression_tag = true; has_expression_tag = true;
} }
} }
return has_expression_tag; return { need_to_escape };
} }
/** /**

1
packages/svelte/src/compiler/utils/sanitize_template_string.js
Unescape View File

@ -1,4 +1,5 @@
/** /**
* Escape special characters like ` $ { \
* @param {string} str * @param {string} str
* @returns {string} * @returns {string}
*/ */

16
packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/client/index.svelte.js
Unescape View File

@ -1,19 +1,27 @@
import "svelte/internal/disclose-version"; import "svelte/internal/disclose-version";
import * as $ from "svelte/internal/client"; import * as $ from "svelte/internal/client";
import __IMPORTED_ASSET_0__ from "./foo.svg";
import { counter } from "./some.js";
const __DECLARED_ASSET_0__ = "__VITE_ASSET__2AM7_y_a__ 1440w, __VITE_ASSET__2AM7_y_b__ 960w"; const __DECLARED_ASSET_0__ = "__VITE_ASSET__2AM7_y_a__ 1440w, __VITE_ASSET__2AM7_y_b__ 960w";
const __DECLARED_ASSET_1__ = "__VITE_ASSET__2AM7_y_c__ 1440w, __VITE_ASSET__2AM7_y_d__ 960w"; const __DECLARED_ASSET_1__ = "__VITE_ASSET__2AM7_y_c__ 1440w, __VITE_ASSET__2AM7_y_d__ 960w";
const __DECLARED_ASSET_2__ = "__VITE_ASSET__2AM7_y_e__ 1440w, __VITE_ASSET__2AM7_y_f__ 960w"; const __DECLARED_ASSET_2__ = "__VITE_ASSET__2AM7_y_e__ 1440w, __VITE_ASSET__2AM7_y_f__ 960w";
const __DECLARED_ASSET_3__ = "__VITE_ASSET__2AM7_y_g__"; const __DECLARED_ASSET_3__ = "__VITE_ASSET__2AM7_y_g__";
var root = $.template(`<picture><source srcset="${__DECLARED_ASSET_0__}" type="image/avif"> <source srcset="${__DECLARED_ASSET_1__}" type="image/webp"> <source srcset="${__DECLARED_ASSET_2__}" type="image/png"> <img src="${__DECLARED_ASSET_3__}" alt="production test" width="1440" height="1440"></picture>`); var root = $.template(`<div></div> <img src="${$.escape(__IMPORTED_ASSET_0__)}" alt="default imports are not live bindings so can be inlined"> <picture><source srcset="${__DECLARED_ASSET_0__}" type="image/avif"> <source srcset="${__DECLARED_ASSET_1__}" type="image/webp"> <source srcset="${__DECLARED_ASSET_2__}" type="image/png"> <img src="${__DECLARED_ASSET_3__}" alt="production test" width="1440" height="1440"></picture>`, 1);
export default function Inline_module_vars($$anchor) { export default function Inline_module_vars($$anchor) {
var picture = root(); var fragment = root();
var div = $.first_child(fragment);
div.textContent = `${counter ?? ""} named exports are live bindings so cannot be inlined`;
var img = $.sibling(div, 2);
var picture = $.sibling(img, 2);
var source = $.child(picture); var source = $.child(picture);
var source_1 = $.sibling(source, 2); var source_1 = $.sibling(source, 2);
var source_2 = $.sibling(source_1, 2); var source_2 = $.sibling(source_1, 2);
var img = $.sibling(source_2, 2); var img_1 = $.sibling(source_2, 2);
$.reset(picture); $.reset(picture);
$.append($$anchor, picture); $.append($$anchor, fragment);
} }

4
packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/server/index.svelte.js
Unescape View File

@ -1,4 +1,6 @@
import * as $ from "svelte/internal/server"; import * as $ from "svelte/internal/server";
import __IMPORTED_ASSET_0__ from "./foo.svg";
import { counter } from "./some.js";
const __DECLARED_ASSET_0__ = "__VITE_ASSET__2AM7_y_a__ 1440w, __VITE_ASSET__2AM7_y_b__ 960w"; const __DECLARED_ASSET_0__ = "__VITE_ASSET__2AM7_y_a__ 1440w, __VITE_ASSET__2AM7_y_b__ 960w";
const __DECLARED_ASSET_1__ = "__VITE_ASSET__2AM7_y_c__ 1440w, __VITE_ASSET__2AM7_y_d__ 960w"; const __DECLARED_ASSET_1__ = "__VITE_ASSET__2AM7_y_c__ 1440w, __VITE_ASSET__2AM7_y_d__ 960w";
@ -6,5 +8,5 @@ const __DECLARED_ASSET_2__ = "__VITE_ASSET__2AM7_y_e__ 1440w, __VITE_ASSET__2AM7
const __DECLARED_ASSET_3__ = "__VITE_ASSET__2AM7_y_g__"; const __DECLARED_ASSET_3__ = "__VITE_ASSET__2AM7_y_g__";
export default function Inline_module_vars($$payload) { export default function Inline_module_vars($$payload) {
$$payload.out += `<picture><source${$.attr("srcset", __DECLARED_ASSET_0__)} type="image/avif"> <source${$.attr("srcset", __DECLARED_ASSET_1__)} type="image/webp"> <source${$.attr("srcset", __DECLARED_ASSET_2__)} type="image/png"> <img${$.attr("src", __DECLARED_ASSET_3__)} alt="production test" width="1440" height="1440"></picture>`; $$payload.out += `<div>${$.escape(counter)} named exports are live bindings so cannot be inlined</div> <img${$.attr("src", __IMPORTED_ASSET_0__)} alt="default imports are not live bindings so can be inlined"> <picture><source${$.attr("srcset", __DECLARED_ASSET_0__)} type="image/avif"> <source${$.attr("srcset", __DECLARED_ASSET_1__)} type="image/webp"> <source${$.attr("srcset", __DECLARED_ASSET_2__)} type="image/png"> <img${$.attr("src", __DECLARED_ASSET_3__)} alt="production test" width="1440" height="1440"></picture>`;
} }

6
packages/svelte/tests/snapshot/samples/inline-module-vars/index.svelte
Unescape View File

@ -1,12 +1,18 @@
<svelte:options runes={true} /> <svelte:options runes={true} />
<script module> <script module>
import __IMPORTED_ASSET_0__ from "./foo.svg";
import { counter } from "./some.js";
const __DECLARED_ASSET_0__ = "__VITE_ASSET__2AM7_y_a__ 1440w, __VITE_ASSET__2AM7_y_b__ 960w"; const __DECLARED_ASSET_0__ = "__VITE_ASSET__2AM7_y_a__ 1440w, __VITE_ASSET__2AM7_y_b__ 960w";
const __DECLARED_ASSET_1__ = "__VITE_ASSET__2AM7_y_c__ 1440w, __VITE_ASSET__2AM7_y_d__ 960w"; const __DECLARED_ASSET_1__ = "__VITE_ASSET__2AM7_y_c__ 1440w, __VITE_ASSET__2AM7_y_d__ 960w";
const __DECLARED_ASSET_2__ = "__VITE_ASSET__2AM7_y_e__ 1440w, __VITE_ASSET__2AM7_y_f__ 960w"; const __DECLARED_ASSET_2__ = "__VITE_ASSET__2AM7_y_e__ 1440w, __VITE_ASSET__2AM7_y_f__ 960w";
const __DECLARED_ASSET_3__ = "__VITE_ASSET__2AM7_y_g__"; const __DECLARED_ASSET_3__ = "__VITE_ASSET__2AM7_y_g__";
</script> </script>
<div>{counter} named exports are live bindings so cannot be inlined</div>
<img src={__IMPORTED_ASSET_0__} alt="default imports are not live bindings so can be inlined" />
<picture> <picture>
<source srcset={__DECLARED_ASSET_0__} type="image/avif" /> <source srcset={__DECLARED_ASSET_0__} type="image/avif" />
<source srcset={__DECLARED_ASSET_1__} type="image/webp" /> <source srcset={__DECLARED_ASSET_1__} type="image/webp" />

Write Preview
Loading…
Cancel
Save