How to use Svelte components?

[lutuh]

Hello Maximo,

me again 😃

This time I am playing around with Svelte components. More precisely, I am trying to use the svelte-typewriter https://www.npmjs.com/package/svelte-typewriter

I tried to use it according to your the-vue-point example where you use a NavBarLinks Svelte component.

My goal

• Init a new iles project with Svelte support enabled
• Install svelte-typewriter via npm
• Use the Typewriter component in my templates

The browser console says:

runtime-core.esm-bundler.js:38 [Vue warn]: Failed to resolve component: Typewriter
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <Index > 
  at <DefaultLayout key=1 > 
  at <RouterView> 
  at <îles>

What I tried

I looked into the components.d.ts and noted that there was no auto-generated import for the Typewriter component. According to the-vue-point, I added the following line:

declare module 'vue' {
  export interface GlobalComponents {
    // ...
    Typewriter: typeof import('./node_modules/svelte-typewriter/src/Typewriter.svelte')['default']
    // ...
  }
}

But no dice. I added client:none to <Typewriter> due to this discussion #34 but that does not change the error because the Typewriter component cannot even be imported. I also tried importing the Typewriter component in <script setup>.

How to reproduce

Here is a repository https://github.com/lutuh/iles-svelte-test with two commits:

1. Initial iles + Svelte setup
2. Trying to use svelte-typewriter

Thank you very much for pointing me into the right direction on how to properly import a Svelte compoent.

Lucas

[ElMassimo]

@lutuh Since the component is not in the components dir, you will need to do one of the following:

• Create a stub component in src/components/Typewriter.svelte that wraps the component:

  <script>
  import Typewriter from 'svelte-typewriter'
  </script>
  
  <Typewriter/>

• Or import it manually each time you use it:

  <script setup lang="ts">
    import Typewriter from 'svelte-typewriter'
  </script>

• Or create a custom resolver and add it in iles.config.ts:

  components: {
    resolvers: [
        (name) => {
          if (name === 'Typewriter') return { path: 'svelte-typewriter' }
        },
    ],
  },

Once the component is being resolved correctly, you must also add a hydration directive, as mentioned in the warning in the Supported Frameworks section.

<Typewriter client:load/>

When using a wrapper component with the .svelte extension, îles will be able to detect that it's a svelte component.

Otherwise, you might need to explicitly tell îles about it:

<Typewriter client:load using="svelte"/>

[lutuh]

Thank you very much for your answer!

The key insight for me was that one has to use lang="ts" for the manual import. In my case, îles was able to detect the Svelte component automatically, so that I did not have to use using="svelte" in the hydration directive.