Support phoenix liveview

[jmnda-dev]

This PR resolves #486

• add index.phoenix.ts for initializing Flowbite components in Phoenix LiveViews and regular views
• update configs to build for index.phoenix.ts
• update the docs
• add instructions for setup the flowbite-datepicker

[jmnda-dev]

The PR is work in progress, will continue tomorrow, please leave feedback as well.

[zoltanszogyenyi]

Hey @jmnda-dev,

I've checked the progress so far and it looks good! So we need both the load and phx:page-loading-stop events, right?

Cheers,
Zoltan

[jmnda-dev]

So we need both the load and phx:page-loading-stop events, right?

Yeah, that way it will work for both LiveViews and regular Views

[jmnda-dev]

I have added instruction for including the javascript file via CDN, though I have some questions:

1. How do you handle publishing the javascript files to the CDN, and are going to publish flowbite.phoenix.js to a CDN?

2. And also regarding building Flowbite locally, I used npm run build:npm command, it generated a dist and lib folders which I copied to the flowbite folder in assets/node_modules/flowbite, in order to test the built files, am not sure if this is a right way. My question is how do you test your Flowbite builds?

[jmnda-dev]

@zoltanszogyenyi I have not added a datepicker javascript file for Phoenix, I feel it's not necessary, however I have added instructions for setting up the datepicker using flowbite-datepicker.

[zoltanszogyenyi]

Hey @jmnda-dev,

Thanks for the contribution.

1. Files will be published by me via NPM and this will be reflected either on UNPKG or CDNJS shortly after -> everything that is generated inside the dist/ and lib/ folders go there.
2. That is the right way - make sure that both the minified and non minified + mapping files are correctly generated and copied over and that will work good enough -> you can change the name of the package.json file and publish it yourself on a test package and use the automatically generated UNPKG CDN links to test livewire.

Cheers,
Zoltan

[jmnda-dev]

Hi @zoltanszogyenyi, I make a slight change to the Phoenix docs. As for now the generated files, I have checked everything and all looks good on my end.

[gsperka]

@jmnda-dev - thanks for looking into this. I am actually running into the same exact problem with LiveView.

@zoltanszogyenyi - any update on this?

[jmnda-dev]

@jmnda-dev - thanks for looking into this. I am actually running into the same exact problem with LiveView.

@gsperka If you haven't found a solution yet, you can look at a quick fix I mentioned in this issue #486

The work on the PR is done, waiting feedback from @zoltanszogyenyi. If you have any suggestions on this PR let me know.

[zoltanszogyenyi]

Hey @jmnda-dev,

I'll try to include this in the weekend for the next release! Looks pretty good at a first glance.

Cheers,
Zoltan

[selimyoussry]

Hey @jmnda-dev , thanks a lot for the work.

Note this problem is referenced here: https://elixirforum.com/t/tailwind-javascripts-stop-working-after-live-redirects-between-liveviews/50282/13

@zoltanszogyenyi for what it's worth, until this is merged, I've patched our app (which is on Phoenix Liveview + Tailwind latest version) with @jmnda-dev 's work (see below) and FlowbiteJS now works for me. Until then I basically had to deactivate all your JS and kind of reimplement it with custom JS. Not ideal!

Thanks both and have a good Sunday :).

Here's what I did based on the work of this PR

In app.js

import './flowbite'

instead of directly doing import 'flowbite'

In flowbite.ts

/*
  Fetched code from https://github.com/themesberg/flowbite/pull/487
  to support LiveView re-renders and navigation.
  
  Without this patch, Flowbite JS is unusable within LiveView. 
*/

import 'flowbite';
import Events from 'flowbite/lib/esm/dom/events';

// core components
import {
    initAccordions, initCarousels, initCollapses, initDials, initDismisses, initDrawers, initDropdowns,
    initModals, initPopovers, initTabs, initTooltips
} from 'flowbite';

const liveViewLoadEvents = new Events('phx:page-loading-stop', [
    initAccordions,
    initCollapses,
    initCarousels,
    initDismisses,
    initDropdowns,
    initModals,
    initDrawers,
    initTabs,
    initTooltips,
    initPopovers,
    initDials,
]);
liveViewLoadEvents.init();

const regularViewLoadEvents = new Events('load', [
    initAccordions,
    initCollapses,
    initCarousels,
    initDismisses,
    initDropdowns,
    initModals,
    initDrawers,
    initTabs,
    initTooltips,
    initPopovers,
    initDials,
]);
regularViewLoadEvents.init();

[zoltanszogyenyi]

Merged <3.

Will release v1.6.5 soon - will let you peeps know.

[jmnda-dev]

Thank you @zoltanszogyenyi