preline icon indicating copy to clipboard operation
preline copied to clipboard

Preline Ui doesn't work with SPA in Qwik

Open Bootstrap-Paradox opened this issue 1 year ago • 1 comments

When using spa navigation using <Link/≥ in the qwik preline does not track events. I'll upload a video of the bug, on navigation no functionality works, but if page is refreshed it works as intended.

i had downloaded this code from -> https://stackblitz.com/edit/preline-v2-qwik-eeekju?file=src%2Fglobal.css it works fine on stackblitz but as i downloaded it to my machine it bugs out.

The video link https://github.com/htmlstreamofficial/preline/assets/53016712/b3232bd9-3354-4403-964f-06e124d72a55

Bootstrap-Paradox avatar Mar 02 '24 06:03 Bootstrap-Paradox

issue is related to preline docs for qwik not being correct and missing important pieces first is how to import preline script in a correct way inside root.tsx

import PrelineUI from "../node_modules/preline/preline.js?raw";
\\
\\
\\
 <script dangerouslySetInnerHTML={PrelineUI as string} />

and then inside layout.tsx or inside the routes that need preline.js

import type { IStaticMethods } from "preline/preline";

declare global {
  interface Window {
    HSStaticMethods: IStaticMethods;
  }
}
  useVisibleTask$(() => {
    window.HSStaticMethods.autoInit();
  });```

im more than happy to make a pr for the docs for qwik if the preline team is okey with that
if not just giving me the page which contains the specific qwik docs and ill update it correctly

LazyClicks avatar Mar 05 '24 19:03 LazyClicks

@LazyClicks thanks for sharing the workaround! We've added a backlink in our docs for this solution. Cheers!

jahaganiev avatar Apr 04 '24 00:04 jahaganiev

@LazyClicks thanks for sharing the workaround! We've added a backlink in our docs for this solution. Cheers!

is it possible to change the qwik docs or mention that this workaround is required to get preline js to work with qwik on production apps?

LazyClicks avatar Apr 06 '24 15:04 LazyClicks