CODEWITHSUNDEEP
typescriptclient-sideastrojs
Brendan
Brendan

Reputation: 19353

Should i use the .0.mts file in Astro for typing client-side JS?

I'm querying for a web-component defined in a separate Astro component file as set out by this pattern.

I'd like typing and so I tried exporting the web-component name in the client-side JS. VSCode then helpfully suggest I import the type from <MyAstroComponent>.astro.0.mts file which seems to work. I wasn't sure if this was resilient though - I can't find any mention of .0.mts files in the docs.

Is this OK practice? If not is there another way to get client-side typing in Astro js? I'd like to avoid using separate .ts files

Here is the code ...

<!-- ImageGeneratorLayout.astro -->

<!-- ... Component HTML here...  -->

<script>
  import type { ThemeId } from "@server/config";
  import type { ImageGenerator } from "./ImageGenerator.astro.0.mts"; // Is this ok?

  customElements.define(
    "image-select-layout",
    class extends HTMLElement {
      setTheme(theme: ThemeId) {
        this.querySelector<ImageGenerator>("image-generator").setTheme(theme);
      }
    }
  );
</script>

<!-- ImageGenerator.astro -->

<image-generator>
  <!-- ... Component HTML here...  -->
</image-generator>

<script>
  import type { ThemeId } from "@server/config";

  export class ImageGenerator extends HTMLElement {
    setTheme(theme: ThemeId) {
      // Do a thing ...
    }
  }

  customElements.define("image-generator", ImageGenerator);
</script>

Upvotes: 2

Views: 26

Answers (0)

Related Questions