Svelte 3.52 with typescript has breaking changes with TwicPics

[Korayem]

npm package isn't up to date with latest Svelte changes I followed the instructions in official docs and got the following error:

    "resource": "/Users/***/Carousel.svelte",
    "owner": "_generated_diagnostic_collection_name_#4",
    "code": "2345",
    "severity": 8,
    "message": "Argument of type 'SvelteComponentTyped<Attributes, undefined, undefined>' is not assignable to parameter of type 'ConstructorOfATypedSvelteComponent'.\n\nPossible causes:\n
- You use the instance type of a component where you should use the constructor type\n
- Type definitions are missing for this Svelte Component. If you are using Svelte 3.31+, use SvelteComponentTyped to add a definition:\n  
- import type { SvelteComponentTyped } from \"svelte\";\n  class ComponentName extends SvelteComponentTyped<{propertyName: string;}> {}",
    "source": "ts",
    "startLineNumber": 14,
    "startColumn": 10,
    "endLineNumber": 14,
    "endColumn": 17
}]```

[mbgspcii]

Hi @Korayem.

Thank you for opening this issue.

Can you confirm that the error only appears in IDE and that your images are displayed or are you experiencing a problem during the build?

Obviously notice that we encounter this problem as soon as we use typescript and this whatever the version of svelte...

There is obviously a type error that we will have to fix.

Thanks again for the feedback.

Regards.

[Korayem]

Thanks for your response @mbgspcii

Indeed, I thought it might be a warning so I proceeded to run my sveltekit app but got this error:

This caused my page not to render...

I think Sveltekit is less forgiving than Svelte :)

[Korayem]

In case it helps, I am running latest sveltekit so I don't have App.svelte as per the documentation..

So I initialize TwicPic in my root +layout.svelte

<script lang="ts">
  import { installTwicPics } from '@twicpics/components/svelte3';
  import '@twicpics/components/style.css';

  installTwicPics({
    // domain is mandatory
    domain: 'https://my-domain.twic.pics'
  });
</script>

Then in my pages/components

<script lang="ts">
  import { TwicImg } from '@twicpics/components/svelte3';

</script>
<div>
    <TwicImg src={photo} />
</div>

[Korayem]

@mbgspcii It may also be due to svelte embracing vite vs rollup in the past?

[mbgspcii]

HI @Korayem

Using components with SvelteKit is a bit tricky: SvelteKit evolves very fast and there are still a lot of breaking changes. At the moment, TwicPics components are not SSR compatible with SvelteKit. If you don't need the ssr mode, you can add export const ssr = false; in the /routes/+layout.js file

This file is not created by default. If it doesn't exist in your project, just add it with the single line const ssr = false;

Should normally work then.

Setting the TwicPics installation in layout.svelte will work as long as it is the base layout of the application (gg).

Adapting TwicPics components to sveltekit's SRR mode is on our roadmap but not at the top of the list.

Tell us if the temporary deactivation of the ssr mode is problematic.

Hoping it helps.

Thank you for your feedback.

Regards.

Miguel

[Korayem]

Hey Miguel @mbgspcii

Thanks again for the detailed response

I do need SSR in my project :)

Good news is, I managed to get Twicpic working in sveltekit. What I've done is extracted from the twipics project all the svelte specific code and added it manually to my project and it works like a charm. Needed a bit of tweaking here and there but it's working fine with SSR.

This should do for now till you guys support Sveltekit. Here's what I copied

• src/_/* > lib/twicpic/*
• src/svelte3/* > components/* (did some changes here to make it work)

BTW, @Rich-Harris announced RC in the last Svelte Summit (about a month ago) that SvelteKit won't have any breaking changes as they lock down Kit for 1.0.0 final release. So it's safe to prep up Twicpic if breaking changes was put this at lower priority.

[mbgspcii]

Great++ @Korayem

Thanks for the feedback and again bravo for adapting the TwicComponents to your SvelteKit project. We'll let you know as soon as we've adapted our components to SvelteKit.

Sincere greetings.

Miguel

[Korayem]

@mbgspcii I gave this another search to see what can be done to use the npm package with sveltekit without getting the error: <TwicPic is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules.

I found this documented way of loading external packages client-side

So this is what I have now +layout.svelte regular init code from twicpics docs

<script lang="ts">
  import { installTwicPics } from '@twicpics/components/svelte3';
  import '@twicpics/components/style.css';

  installTwicPics({
    // domain is mandatory
    domain: 'https://my-domain.twic.pics'
  });
</script>

A dummy wrapper for TwicImg (the same can be done for TwicVideo) using the instructions from sveltekit docs components/TwicImg.svelte

<script lang="ts">
  import { onMount } from 'svelte';

  export let src;
  export let alt;
  export let classProp;

  //
  let TwicImg;

  onMount(async () => {
    const module = await import('@twicpics/components/svelte3');
    TwicImg = module.TwicImg;
  });
</script>

<svelte:component
  this={TwicImg}
  {src}
  {alt}
  class={classProp}
/>

Then in any page to use TwicImg

<script lang="ts">
  import TwicImg from '$components/TwicImg.svelte';
</script>

<TwicImg alt="" classProp="" src="" />

Note: I changed props class to classProp since class is reserved

The caveat with this approach is that SSR generates the page WITHOUT any <img> in the html, and all is done work to show images by changing the DOM is done client-side, which is slower and defeats the purpose of SSR

The 2nd approach people mentioned but couldn't figure out is to inform vite to precompile twicpics (requires installing the package as devDependency using -D). But I couldn't make this work... vite.config.js

  optimizeDeps: {
        include: [ '@twicpics/components/svelte3' ]
      },

Looking forward to having twicpics native sveltekit support

[mbgspcii]

Hi @Korayem I thank you for the time you spend to solve this problem. We have come to the same conclusion as you. We are looking for a solution that will allow the use of SSR. This task is scheduled in a near future. We will keep you informed of our progress. Sincerely yours.

Miguel

[angelokeirsebilck]

Any updates on this?

[raremiroir]

Am also facing this issue. Thanks @Korayem for your at least temporary solution 🙏

[mbgspcii]

Hi. We are currently modifying the generation of our Svelte3 components. Once this step is done we will be able to expose TwicPics components usable with SvelteKit. Sincerely yours.

Miguel

[mbgspcii]

Hi @Korayem, @angelokeirsebilck and @raremiroir.

We have just deployed version 0.15.0 of our components.

In this version we now support SvelteKit. This version also fixes Svelte Components typing.

Sorry for the delay and we hope you will be satisfied with this version.

Thanks again for using TwicPics and feel free to send us your feedback.

Sincerely yours.

Miguel

[Korayem]

Thank you @mbgspcii!

Will give it a whirl

[raremiroir]

Works like a charm, thanks @mbgspcii !