I am trying to use Syncfusion/JavaScript component library with Surface (LiveView extension). The problem is that, components created in root layout work normally, but components created by tag in LiveViews blink and print an error.
Syncfusion is added as bundle of all modules, works seamlessly without Phoenix backend.
Acctually I get 2 errors, one originates in Syncfuion bundle itself TypeError: undefined is not an object (evaluating 'i[r].allowReordering') and second originates in Phoenix socket.js TypeError: e.dispatchEvent is not a function. (In 'e.dispatchEvent(i)', 'e.dispatchEvent' is undefined).
It looks like Phoenix has some kind of breaking magic, can anyone explain me what is going on behind scene?
Liveview uses morphdom to patch up the DOM. I do not know what is Syncfusion, but if you want LiveView to keep its hand off some element you need to add phx-update="ignore"
There is some funky stuff you need to do with the System.Config that syncfusion uses to get it running but I don’t think that’s specific to Phoenix. I used their query builder once upon a time which I can try dig up for you.
You have hooks setup that attach whatever in mounted, with phx-update="ignore" on the hook element?
Okay, I have used phx-update="ignore" and it works, but partly. Grid renders, but components like Date Picker doesn’t. Also, the Phoenix’s page loading indicator cannot load up. At the end still I get error TypeError: e.dispatchEvent is not a function. (In 'e.dispatchEvent(i)', 'e.dispatchEvent' is undefined)..
To render component I do not use hooks, just tag next to component root. Would it cause the problem?
Lastly what do I need to setup in Syncfusion with System.Config and how?
How do you plan on using it if you’re not using hooks? You don’t need any info from the LiveView to render the component nor do you plan on sending anything back to the LiveView?
I assume you want to import the JS in app.js, possibly the CSS in app.css and create a hook and component per Syncfusion component.
But I found an alternative by wrapping Syncfusion components into Web Components. By this way I do not need to use hooks to initialize Syncfusion components. Already I am experimenting with rerendering component by passing props in Phoenix render function to see if I can change component appearance without any Elixir<->JS glue code.
