SvelteKit and Flowbite JS

[rhscjohn-dev]

I'm having a hard time integrating Flowbite JS into SvelteKit.

I started with something simple: Alert - Dismissible. The docs say: Dismissing the alerts can be done by using the data-collapse-toggle="alertId" data attribute where alertId is the id of the whole alert component.

I think is found the appropriate code in 2 files - flowbite.bundle.js locate under the dist folder and collapse.js located under src/components folder. Which of the two javascript files should I try to use?

Worst case I could just add my own clickHandler event.

Index.svelte

<script>

</script>

<div class="bg-gray-100">
  <h1 class="text-pink-500 text-2xl text-center">Welcome to SvelteKit</h1>
  <p>
    Visit <a
      href="https://kit.svelte.dev"
      class="font-semibold hover:text-blue-800 underline">kit.svelte.dev</a
    > to read the documentation
  </p>
  <p>
    Visit <a
      href="https://flowbite.com/"
      class="font-semibold hover:text-blue-800 underline">flowbit.com</a
    > to read the documentation
  </p>
</div>

<div class="m-1 text-xl text-center">Alerts Dismissable</div>

<div class="flex bg-blue-100 rounded-lg p-4" id="alertId" role="alert">
  <svg
    class="w-5 h-5 text-blue-700 flex-shrink-0"
    fill="currentColor"
    viewBox="0 0 20 20"
    xmlns="http://www.w3.org/2000/svg"
    ><path
      fill-rule="evenodd"
      d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
      clip-rule="evenodd"
    /></svg
  >
  <div class="ml-3 text-sm font-medium text-blue-700">
    A simple info alert. Give it a click if you like.
  </div>
  <button
    type="button"
    class="ml-auto -mx-1.5 -my-1.5 bg-blue-100 text-blue-500 rounded-lg focus:ring-2 focus:ring-blue-400 p-1.5 hover:bg-blue-200 inline-flex h-8 w-8"
    data-collapse-toggle="alertId"
    aria-label="Close"
  >
    <span class="sr-only">Dismiss</span>
    <svg
      class="w-5 h-5"
      fill="currentColor"
      viewBox="0 0 20 20"
      xmlns="http://www.w3.org/2000/svg"
      ><path
        fill-rule="evenodd"
        d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
        clip-rule="evenodd"
      /></svg
    >
  </button>
</div>

[rhscjohn-dev]

Update. Made changes to the script section.

<script>
  import { onMount } from "svelte";

  onMount(async () => {
    console.log("onMount");
    await import("@themesberg/flowbite");
  });
</script>

The alert is not removed from the page. In Chrome, right clicked on the alert and selected inspect. I clicked on the X button and hidden was added to the class but the alert still appeared on the page. Clicked on the X button again and hidden was removed from the class. Look's like the reactivity of Svelte is not registering the change to the class.

So the question is how important is the content of flowbite.bundle.js to the overall functionality of Flowbite.

If I choose not to use flowbite.bundle.js, what parts of flowbite gets broken?

[rhscjohn-dev]

Here is my Svelte solution to providing the functionality of flowbite.bundle.js to an Alert Dismissible.

It is unclear what the ramifications are, going forward, when not including flowbite.bundle.js in a SvelteKit app!!!

index.svelte

<script>
  let alertElement; // reference to alert element via bind:this(alertElement)
  // handle button click event
  function onClickBtnClose(event) {
    console.log(`onClickBtnClose: id(${alertElement.id})`, event);
    alertElement.classList.toggle("hidden");
  }
</script>

<div class="bg-gray-100">
  <h1 class="text-pink-500 text-2xl text-center">Welcome to SvelteKit</h1>
  <p>
    Visit <a
      href="https://kit.svelte.dev"
      class="font-semibold hover:text-blue-800 underline">kit.svelte.dev</a
    > to read the documentation
  </p>
  <p>
    Visit <a
      href="https://flowbite.com/"
      class="font-semibold hover:text-blue-800 underline">flowbit.com</a
    > to read the documentation
  </p>
</div>

<div class="m-1 text-xl text-center">Alerts Dismissable</div>
<!-- note use of bind:this{} to generate reference to the element-->
<div
  bind:this={alertElement}
  class="flex bg-blue-100 rounded-lg p-4"
  id="alertId"
  role="alert"
>
  <svg
    class="w-5 h-5 text-blue-700 flex-shrink-0"
    fill="currentColor"
    viewBox="0 0 20 20"
    xmlns="http://www.w3.org/2000/svg"
    ><path
      fill-rule="evenodd"
      d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
      clip-rule="evenodd"
    /></svg
  >
  <div class="ml-3 text-sm font-medium text-blue-700">
    A simple info alert. Give it a click if you like.
  </div>
  <!-- note the use of on:click={} -->
  <button
    on:click={onClickBtnClose}
    type="button"
    class="ml-auto -mx-1.5 -my-1.5 bg-blue-100 text-blue-500 rounded-lg focus:ring-2 focus:ring-blue-400 p-1.5 hover:bg-blue-200 inline-flex h-8 w-8"
    data-collapse-toggle="alertId"
    aria-label="Close"
  >
    <span class="sr-only">Dismiss</span>
    <svg
      class="w-5 h-5"
      fill="currentColor"
      viewBox="0 0 20 20"
      xmlns="http://www.w3.org/2000/svg"
      ><path
        fill-rule="evenodd"
        d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
        clip-rule="evenodd"
      /></svg
    >
  </button>
</div>

[rhscjohn-dev]

An alternative solution is to use Svelte Actions.

Create a javascript file, called flowbite.js and place it somewhere under the lib directory. This file will contain code from the flowbite.bundle.js file. Initially this file contains code tp handle the data attribute: data-collapse-toggle.

lib/UI/flowbite.js

// Toggle target elements using [data-collapse-toggle]
const toggleCollapse = (elementId, show = true) => {
  const collapseEl = document.getElementById(elementId);
  if (show) {
    collapseEl.classList.remove('hidden');
  } else {
    collapseEl.classList.add('hidden');
  }
}

export function collapse (node) {
  console.log('flowbite:collapse() node.id: ', node.id);
  const collapseToggleEl = node.querySelector('[data-collapse-toggle]')
  if (collapseToggleEl) {
    let collapseId = collapseToggleEl.getAttribute('data-collapse-toggle');
    collapseToggleEl.addEventListener('click', function () {
      toggleCollapse(collapseId, node.classList.contains('hidden'));
    });
  } else {
    console.error(`attribute id(${node.id}) does not have a corresponding data-* attribute: data-collapse-toggle `)
  }
  return {
    destroy () {
      //  clean up code
      // ?? remove EventListner
    },
  };
}
//

Now to use an alert that is dimmissable is to import collapse function flowbite.js and and the Sevelte template use:action.

index.svelte

<script>
  import { collapse } from "$lib/UI/flowbite";
</script>

<!-- Alerts - dismissable -->
<div
  use:collapse
  id="alert-1"
  class="flex bg-blue-100 rounded-lg p-4 mb-4"
  role="alert"
>
  <svg
    class="w-5 h-5 text-blue-700 flex-shrink-0"
    fill="currentColor"
    viewBox="0 0 20 20"
    xmlns="http://www.w3.org/2000/svg"
    ><path
      fill-rule="evenodd"
      d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
      clip-rule="evenodd"
    /></svg
  >
  <div class="ml-3 text-sm font-medium text-blue-700">
    A simple info alert with an <a
      href="\"
      class="font-semibold hover:text-blue-800 underline">example link</a
    >. Give it a click if you like.
  </div>
  <button
    type="button"
    class="ml-auto -mx-1.5 -my-1.5 bg-blue-100 text-blue-500 rounded-lg focus:ring-2 focus:ring-blue-400 p-1.5 hover:bg-blue-200 inline-flex h-8 w-8"
    data-collapse-toggle="alert-1"
    aria-label="Close"
  >
    <span class="sr-only">Close</span>
    <svg
      class="w-5 h-5"
      fill="currentColor"
      viewBox="0 0 20 20"
      xmlns="http://www.w3.org/2000/svg"
      ><path
        fill-rule="evenodd"
        d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
        clip-rule="evenodd"
      /></svg
    >
  </button>
</div>

[zoltanszogyenyi]

Thanks @rhscjohn-dev for providing an alternative solution. We're really looking into making Flowbite fully compatible with JS libraries and frameworks like React, Svelte, Vue.js, and Angular. Currently the interactive elements and JS is based on a rather classic method of data attributes and event listeners, but this doesn't really work with modern state oriented JS libraries.

Would you be willing helping us find a solution making it compatible?

Thanks!

[Rar9]

https://flowbite-svelte.com/