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

svelte:options customElement type issue #12886

Closed
m-poh opened this issue Aug 16, 2024 · 3 comments · Fixed by #12903
Closed

svelte:options customElement type issue #12886

m-poh opened this issue Aug 16, 2024 · 3 comments · Fixed by #12903

Comments

@m-poh
Copy link

m-poh commented Aug 16, 2024

Describe the bug

When I use verbose configuration for custom elements, then I get unexpected typescript-related errors when running svelte-check.

Reproduction

<svelte:options
  customElement={{
    tag: "my-component",
    extend: (customElementConstructor) => {
      return class extends customElementConstructor {
        constructor() {
          super()
        }
      }
    },
  }} />

<script lang="ts"></script>

This gives Svelte: Parameter customElementConstructor implicitly has an any type.

Then i silence this with @ts-ignore:

<svelte:options
  customElement={{
    tag: "my-component",
    // @ts-ignore
    extend: (customElementConstructor) => {
      return class extends customElementConstructor {
        constructor() {
          super()
        }
      }
    },
  }} />

<script lang="ts"></script>

Then i extend the configuration for svelte:options with props:

<svelte:options
  customElement={{
    tag: "my-component",
    props: {
      stringValue: { type: "String" },
    },
    // @ts-ignore
    extend: (customElementConstructor) => {
      return class extends customElementConstructor {
        constructor() {
          super()
        }
      }
    },
  }} />

<script lang="ts">
  export let stringValue: string
  let anotherValue: number
</script>

which gives Type annotations can only be used in TypeScript files. (js) for both stringValue and anotherValue

Expected behaviour

no errors for both of the examples

System Info

  • OS: Ubuntu
  • IDE: IntelliJ IDEA
  • svelte-check version: 3.6.9 / 3.8.5

Which package is the issue about?

svelte-check

Additional Information, eg. Screenshots

No response

@m-poh m-poh added the bug label Aug 16, 2024
@jasonlyu123 jasonlyu123 transferred this issue from sveltejs/language-tools Aug 17, 2024
@jasonlyu123 jasonlyu123 changed the title svelte-check incorrectly handles svelte:options svelte:options customElement type issue Aug 17, 2024
@jasonlyu123
Copy link
Member

jasonlyu123 commented Aug 17, 2024

The Type annotations can only be used in TypeScript files. (js) issue has the same reason with sveltejs/language-tools#2155 where the HTML parsing doesn't parse the option correctly so the lang="ts" doesn't get extracted. If you move svelte:options to be after the script tag it should work.

As for the type of the customElement, this needs adjustment with the type definition here therefore transferring. The HTMLProp type seems to override the customElment definition in the "svelte/elements". Probably can just remove the override since you can't add an option to the svelte:options so we don't need to support type enhancement for it.

@m-poh
Copy link
Author

m-poh commented Aug 19, 2024

just to clarify, i think you meant customElementConstructor instead of customElement in "As for the type of the customElement"

@jasonlyu123
Copy link
Member

Not really. The whole customElement option is not typed because it got overridden.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants