Svelte 4 support

[rallets]

Hi, I'm wondering if you have any plans to support Svelte 4. Right now I need to force install sveltestrap via npm install --legacy-peer-deps.
I see commit in main, does it means this package is still actively maintained? If so, any plans for a release soon-sh?
Thank you

[rallets]

I played a bit, and I'm able to get typings support in VS Code, but in a ugly way, but I hope it can help you to fix easily in a better way. It looks like the .d.ts are not compatible with Svelte 4.

Once I found the pieces that was breaking the typings, I did add a rollup step in rollup.config.js that copied all the .d.ts in my app under App/typings/sveltestrap-d-ts.

The step is a copy with transforms using the rollup plugin rollup-plugin-copy:

copy({
                targets: [
                    {
                        src: 'node_modules/sveltestrap/**/*.d.ts',
                        dest: 'App/types/sveltestrap-d-ts',
                        transform: (contents, filename) => {
                            let ts = contents.toString();

                            ts = ts.replaceAll('SvelteComponentTyped', 'SvelteComponent');
                            ts = ts.replaceAll('export default class', 'export class');

                            ts = `declare module 'sveltestrap' {\r\n` + ts + `\r\n}`;

                            ts = ts.replaceAll(`Props,
  {},
  { default: {} }
> {}`, 'Props>{}');
                            ts = ts.replaceAll('Props, {}, {}>', 'Props>');

                            ts = ts.replaceAll(`}

export class`, `class?: string;
}

export class`);

                            return ts;
                        }
                    }
                ]
            }),

Unfortunately it's new-line sensible, so it could not work in a pipeline, but for a one-time transformation it could get the job done.

[jonjes]

@rallets I forced installed it, too. And then I noticed that the Modal component wasn't working properly. (The modal backdrop appears, but not the actual modal content.) Is it working for you?
Otherwise, the rest of the sveltestrap components seem to be working ok with svelte 4.

[rallets]

@jonjes currently I don't use Models, only offcanvas, so I haven't checked them.
If you provide a snippet/svelte component I can test it tomorrow.

[bestguy]

Hi, we are planning a Bootstrap 5.3.0 release very soon (this week?) after testing a pre release.
Svelte 4 dropped on us as well unexpectedly.., so will likely need to deal with that after, but might be related to #560 and resolved with that as well.

[bluepuma77]

svelte-file-dropzone just updated package.json to include v4:

  "peerDependencies": {
    "svelte": "^3.54.0 || ^4.0.0"
  },

[kefahi]

Any update on this? I'm happy to engage with testing the pre-release.
Thanks!

[jonjes]

Hi @rallets
Sorry, I just realized that you're waiting on me for an example. Here you go.
https://svelte.dev/repl/38630548a4714255934cc8236f8ac7dc?version=4.1.1

It's using the Svelte REPL running svelte 4.1.1, and all I did was copy and paste the first Modal example from the Sveltestrap Modal page
(https://sveltestrap.js.org/?path=/story/components--modals).

You can click the "Open Modal" button and see that the modal content doesn't appear. Only the gray background appears, and it locks the page because you can't clear it to close the invisible modal.

[rallets]

Hi @jonjes I confirm that it doesn't work for me either.
Comparing with the bootstrap website modal live demo, it looks like the Modal doesn't set the "show" class properly in the modal div. So instead of "modal show" it has only "modal".
Then also a display: block is not set in the same div element.

Until it is fixed, you can think to switch to Offcanvas, those are working for me. Basically you can get the same behavior, you just need to add some classes to mimic the modal "size" attributes. Just ping me if you need those.

[bluepuma77]

I would really prefer a staged approach:

1. Fix the dependencies version so sveltestrap works with current Svelte (package.json):

  "peerDependencies": {
    "svelte": "^3.54.0 || ^4.0.0"
  },

2. Fix the few real issue that seem to exist

[bestguy]

Hey so in testing, another issue with Svelte 4 is we need to update all the TypeScript deps.. deprecation warnings and types complain about class props, etc:
https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md#im-getting-deprecation-warnings-for-sveltejsx--i-want-to-migrate-to-the-new-typings

To avoid breaking Svelte 3 apps, we'll probably have to do a major release to v6 and leave v5 for Svelte 3. I'm hoping this is a simple-ish search/replace fix, will look this weekend.

[bestguy]

Trying to support Svelte 3 & 4 is going to be a pain, so I think what I'll do is:

• Cut a minor release now for Bootstrap 5.3 for Svelte 3 (so like v5.11.0), and leave peer dep issues as is.
• Fix the peer deps by updating minimum to Svelte 4, correct typings, then release a major version (v6.0)

[rallets]

Hi @bestguy I just testet the latest release 5.11 and everything works fine for me.

About the Svelte 4 support, if you want I have already a list of things to change to get svelte 4 typings working better.
Attached the modified code I use in my project, generated via a rollup task (it's not perfect but maybe it could help you to save some time)
sveltestrap-d-ts.zip

The content of the zip file is:

• the rollup task I use to transform your *.d.ts code. You can use it to take a look there to see what/how you need to change your source code for the typings
• sveltestrap-d-ts: your typings, from your latest release 5.11.0, transformed by my rollup task
• sveltestrap: extra typings, to address missing attributes from your typings. I use only few components, so the list is not exhaustive.

As extra request, it will be nice to have an id attribute in the Accordion component, very useful for in-page anchors (f.ex. href="#accordion-id"). Now I need to wrap them with an extra div/section.

Summing up, for what I did experience currently it doesn't work:

1. Modal (see previous messages)
2. backdrop in Offcanvas
   I need to apply

:global(.offcanvas.show ~ .offcanvas-backdrop) {
    opacity: 0.5;
}

not sure exactly what the problem is here.

Thanks for your work.

[bestguy]

This is great @rallets, thanks will review

[benmccann]

I suspect the other issue you'll run into is that the library is using an older version of svelte-jester, which isn't compatible with Svelte 4. That's going to be a decent sized upgrade on it's own. It can be handled separately, so I'd probably recommend doing that separately before the rest of the items to clear a blocker. I added some details in #568