Support synchronous script block

[KiritaniAyaka]

Summary

Support process script and inject it as a synchronous script block by an is:sync directive.

Background & Motivation

Asynchronous script is a modern feature but synchronous script also plays an important role in some scenes.

For example, in theme switching, it has to check user's preference from local storage(or other places) synchronously; otherwise, async will cause a different theme flash. This is especially obvious when user's network is slow.

Goals

• Do some tasks that must run synchronously (or synchronously execute could provide better user experiences).
• Allow module resolution in sync script blocks.
• Allow minify for sync script blocks.

Example

Proposed API

In a .astro layout file:

<script is:sync>
import { getUserPreference } from '../util/theme';

const { theme } = getUserPreferece();
document.body.dataset.theme = theme;
</script>

export function getUserPreference() {
  // some logic to calculate which theme is select
  // these logics will used in both a layout and a theme switcher component
}

Outputs:

<script>
(function(){
  function a() { /* ... */}; // named as getUserPreferece before process, minify is possible with this API
  var {t}=a();document.body.dataset.theme=t;
})()
</script>

Fallback

We can achieve this currently in Astro by is:inline directive and it could be a fallback if this proposal is not applied.

Although is:inline works, we lose some features provided by Astro, such as optimize and bundle.

In the example above, we have to maintain the logic of getUserPreference in two different places (sync script block and another theme switcher component) because importing local script is unavailable in an is:inline script. And script minify is also impossible with is:inline.

[delucis]

I suspect supporting bundling for inline scripts may be an anti-pattern: it makes it very easy to ship big chunks of JavaScript multiple times in a page by importing a hefty node module.

That said, supporting TypeScript transpilation and inline script minification would be nice, I proposed that here: #995

[KiritaniAyaka]

I think Astro as a tool cannot prevent users import a hefty module fundamentally, but on the other hand, due to the inline script is not complex usually, the lack of support for importing may be acceptable (at least in scenes I went so far).

I'll close this and continue tracking your proposal.