TW & SvelteKit : best practice ?

[arjarn]

Hi, I'm testing TW Element with Sveltekit and having some issues :

• Sidebar in my layout contain accordion and nesting collapsing block. If I'm using auto init in my +page.svelte, Sidebar is re-init.

• Issue with dynamic block if it have TW Element like :

{#if show} 
  [DatePicker Component]
{/if}

In this case, how initialise DatePicker ?

My question is, what's best practice for using TW elements with Sveltekit ?
How initialisate components ? JS way only ?
In this case, it seem heavy...

And last, if anybody have example of JS initialisation for accordion, it may be great : all my attempt fail 😕

[juujisai]

Hi! We have prepared a svelte integration tutorial. You can check it out here:
https://tw-elements.com/docs/standard/integrations/svelte-integration/

[arjarn]

Thanx for your reply, I'm already check it and test several thing but having other issues with Sveltekit.
I'm hoping somebody can give me feedback after using this combo.

[juujisai]

Generally we encourage everyone to use the initTE method to initialize our components. Initialization via JS may be difficult for some components but there are plans to make it easier to use (or atleast add more examples to the docs).

You can try to call the initTE method on the parent components but when an element was not present at the moment of calling the method, it won't be initialized.

Issue with dynamic block if it have TW Element like [...] :

I think the best thing to do would be to use the initTE method inside the component that will be mounted dynamicaly. Although either via JS and initTE methods should work properly. There may be a need for checking whether a component was initialized before or not though (simple if statement would be enough).

Sidebar in my layout contain accordion and nesting collapsing block. If I'm using auto init in my +page.svelte, Sidebar is re-init.

Do you mean that the sidenav is initializing more than once? Did you try adding some type of if statement to check whether the component was already initialized? For example, !wasInitialized && initTE( { ... } )

And last, if anybody have example of JS initialisation for accordion, it may be great : all my attempt fail

Collapse component is difficult to initialize via JS. The difficulty comes from the fact that we have to add the event listeners for the triggers by ourselves. Checkout this code bellow, this should let you to initialize the Accordion (Collapse) properly

const collapseElementList = [].slice.call(
  document.querySelectorAll("[data-te-collapse-item]")
);
const collapseList = collapseElementList.map((collapseEl) => {
  return new Collapse(collapseEl, {
    toggle: false,
  });
});

const collapseTrigger = document.querySelectorAll("[data-te-collapse-init]");
collapseTrigger.forEach((trigger) =>
  trigger.addEventListener("click", (e) => {
    const target = e.target.dataset.teTarget.replace("#", "");
    const targetEl = collapseList.find((el) => el._element.id === target);
    targetEl.toggle();
  })
);

BTW, We are working on tutorials update at this very moment, so let us know if something was missing and should be added.

[arjarn]

All seem OK after refactoring my app : as you're advising, I'm using initTE in general case with data-te.*.
Now, I having only 2 or 3 JS initialisation.

I think having several specific cases but not insurmountable.

Thanx for your long explain and futur tutorial.