[feat] Implemented a small runtime optimization for SSR

[coryvirok]

Prior to this change, the compiler would generate a template literal that had many purely static string variables nested within it. This change collapses these static strings into the surrounding template literal which should result in (minor) size and performance improvements for the SSR generated code.

Example output before change

// dist/server/entries/pages/index.svelte.js

const FeaturedContent = create_ssr_component(($$result, $$props, $$bindings, slots) => {
  let { imgSrc } = $$props;
  let { heading } = $$props;
  if ($$props.imgSrc === void 0 && $$bindings.imgSrc && imgSrc !== void 0)
    $$bindings.imgSrc(imgSrc);
  if ($$props.heading === void 0 && $$bindings.heading && heading !== void 0)
    $$bindings.heading(heading);
  return `<div><img${add_attribute("src", imgSrc, 0)} class="${"rounded-md"}">
  <h3 class="${"py-6 text-3xl font-bold tracking-tight text-primary sm:text-2xl"}">${escape(heading)}</h3>
  <p class="${"prose font-light text-gray-600"}">${slots.default ? slots.default({}) : ``}</p></div>`;
});

// ...

After this change (note the missing ${} where string literals were added to the surrounding static string.)

const FeaturedContent = create_ssr_component(($$result, $$props, $$bindings, slots) => {
  let { imgSrc } = $$props;
  let { heading } = $$props;
  if ($$props.imgSrc === void 0 && $$bindings.imgSrc && imgSrc !== void 0)
    $$bindings.imgSrc(imgSrc);
  if ($$props.heading === void 0 && $$bindings.heading && heading !== void 0)
    $$bindings.heading(heading);
  return `<div><img${add_attribute("src", imgSrc, 0)} class="rounded-md">
  <h3 class="py-6 text-3xl font-bold tracking-tight text-primary sm:text-2xl">${escape(heading)}</h3>
  <p class="prose font-light text-gray-600">${slots.default ? slots.default({}) : ``}</p></div>`;
});

Before submitting the PR, please make sure you do the following

• [ ] It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
• [x] Prefix your PR title with [feat], [fix], [chore], or [docs].
• [x] This message body should clearly illustrate what problems it solves.
• [x] Ideally, include a test that fails without this PR but passes with it.

Tests

• [x] Run the tests with npm test and lint the project with npm run lint

[benmccann]

It might be nice to add a test for the new method

[coryvirok]

Thanks for the review, @dummdidumm, @Conduitry and @benmccann. I updated the code style to use snake_case for internal vars. I couldn't find any unit tests, so I added a test to the test/js/samples dir to check the generated code vs actual. I made sure to test a few different scenarios where the TemplateLiteral should and should not collapse.

Regarding the client-side optimization, I'm not familiar with that code-path. Can you point me in the right direction?

[coryvirok]

@Conduitry anything blocking this from being merged?

[coryvirok]

@benmccann anything else needed before merging? (I'm just trying to tidy up loose PR ends :)

[benmccann]

Looks good to me, but you will need someone more familiar with the code like Li Hau or Conduitry to sign-off on it

[coryvirok]

Looks good to me, but you will need someone more familiar with the code like Li Hau or Conduitry to sign-off on it

Gotcha, thanks.

[coryvirok]

FYI, just ran this through a microbenchmark and the new approach that this PR implements should be over 87% faster than the current.

The benchmark is testing the approach, not the code itself: https://jsben.ch/GL5Mr

[vercel[bot]]

@dummdidumm is attempting to deploy a commit to the Svelte Team on Vercel.

A member of the Team first needs to authorize it.

[dummdidumm]

Thank you!

[Conduitry]

Released in 3.56.0 - thanks!

[coryvirok]

@dummdidumm thx for simplifying the code!