Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

<script tag import> in {curly brace syntax} is not processed like a simple <script tag import> in Astro template file #10685

Closed
1 task
EKliptus opened this issue Apr 4, 2024 · 3 comments
Labels
needs response Issue needs response from OP

Comments

@EKliptus
Copy link

EKliptus commented Apr 4, 2024

Astro Info

Astro                    v4.5.10
Node                     v20.10.0
System                   Windows (x64)
Package Manager          pnpm
Output                   static
Adapter                  none
Integrations             @astrojs/sitemap

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

First of all, I thought it was a problem with the vitePwa plugin, where from my first issue on their github here :
vite-pwa/vite-plugin-pwa#694
In fact it's more due to the way the Astro template syntax works, in my opinion this is inconsistent:

In a .astro file, in template part :

  1. when I wrote <script src="/src/pwa.ts"></script> , the typescript file was process and bundle as expected .
    but
  2. when I do the same import in a {...} block (sorry I don't know this block type name in Astro template) like this :
    {true && <script src="/src/pwa.ts"></script>}
    the pwa.ts file is not processed and bundled and the generated html source code is : <script src="/src/pwa.ts"></script>

What's the expected result?

In a Astro template file, for JS or TS script import in a {...} :
{true && <script src="/src/pwa.ts"></script>}
The ts (or js) script should be processed and bundled as if it were written <script src="/src/pwa.ts"></script> in the astro file.

Link to Minimal Reproducible Example

https://gitlab.com/ekliptus49/vite-plugin-pwa-astro-minimal-sw-issue/-/blob/master/src/pages/index.astro

Participation

  • I am willing to submit a pull request for this issue.
@github-actions github-actions bot added the needs triage Issue needs to be triaged label Apr 4, 2024
@lilnasy
Copy link
Contributor

lilnasy commented Apr 5, 2024

Do you need to add the is:inline directive?

https://docs.astro.build/en/reference/directives-reference/#isinline

@ematipico ematipico added needs response Issue needs response from OP and removed needs triage Issue needs to be triaged labels Apr 8, 2024
@matthewp
Copy link
Contributor

matthewp commented Apr 8, 2024

They are expecting it to be bundled.

This is a design constraint and intentional. All of your scripts are bundled together at the page level. If some are conditional they can't be bundled together. So they are treated as inline and not optimized.

There's no way to have conditional scripts that get bundled.

@matthewp matthewp closed this as completed Apr 8, 2024
@EKliptus
Copy link
Author

They are expecting it to be bundled.

This is a design constraint and intentional. All of your scripts are bundled together at the page level. If some are conditional they can't be bundled together. So they are treated as inline and not optimized.

There's no way to have conditional scripts that get bundled.

Thanks you for this response.
In my case I have try with this code in the astro file :

<script>
  import { BUILD_Config } from "@data/configs";
  BUILD_Config.PWA.ENABLE && import("../pwa.ts");
</script>

It appears to work like I expect.
I see the pwa.ts (ts file) is processed ! and bundled I think like a "static script load tag".
May be not bundled in the hoisted.xxx.js file but in a separate pwa.xxx.js

Is there is a problem to do this ?

Thanks you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
needs response Issue needs response from OP
Projects
None yet
Development

No branches or pull requests

4 participants