Documentation: Integration with Qwik about preline HOT 7 CLOSED

Thanks for the input @brandiqa!

We've made online playground demo Preline UI + QWIK here: https://stackblitz.com/edit/preline-qwik?file=tailwind.config.js

Step by step Framework Guides will be available soon with the next update.

Cheers!
Jaha

from preline.

Hey folks,

We've just shipped v1.9.0 update with Framework Guides for Qwik here. Thanks a lot @brandiqa for the request and sharing your work around solutions.

Cheers!

from preline.

I've realized PartyTown is not applicable in this context since preline.js is a first party script required for the functioning of the web app, hence I've updated the proposal.

I would also suggest having typescript support. Can discuss that on a separate thread

from preline.

In QWIK @types/preline is required to run properly.

from preline.

In QWIK @types/preline is required to run properly.

Couldn't find the package or code for @types/preline. Kindly clarify what you mean?

from preline.

In regards to TypeScript support, I've come up with a workaround.

I've created the file src/types/preline/index.d.ts within my Qwik project with the following code:

export {};

declare global {
  interface Window {
    HSAccordion: {
      show(accordionEL: HTMLElement): void;
      hide(accordionEL: HTMLElement): void;
    };
    HSCollapse: {
      toggle(collapseEL: HTMLElement): void;
      show(collapseEL: HTMLElement): void;
      hide(collapseEL: HTMLElement): void;
    };
    HSDropdown: {
      open(dropdownEl: HTMLElement): void;
      close(dropdownEl: HTMLElement, noAnimation: boolean): void;
      toggle(dropdownEl: HTMLElement): void;
    };
    HSOverlay: {
      toggle(overlayEL: HTMLElement): void;
      open(overlayEL: HTMLElement): void;
      close(overlayEL: HTMLElement): Promise;
    };
    HSTabs: {
      open(tabToggleEL: HTMLElement): void;
    };
    HSTooltip: {
      show(tooltipEL: HTMLElement): void;
      hide(tooltipEL: HTMLElement): void;
    };
  }
}

Then I've updated tsconfig.json to include the above defintion:

{
  "compilerOptions": {
    "allowJs": true,
    "target": "ES2017",
    "module": "ES2022",
    "lib": ["es2022", "DOM", "WebWorker", "DOM.Iterable"],
    "jsx": "react-jsx",
    "jsxImportSource": "@builder.io/qwik",
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "incremental": true,
    "isolatedModules": true,
    "outDir": "tmp",
    "noEmit": true,
    "types": ["node", "vite/client", "./src/types/preline"],
    "paths": {
      "~/*": ["./src/*"]
    }
  },
  "files": ["./.eslintrc.cjs"],
  "include": ["src", "./*.d.ts"]
}

VSCode Eslint plugin no longer throws warnings when programmatically calling HS functions. Below is an example of how I've used it in Qwik:

export const closeSidebar = () => {
  const sidebarEl = document.getElementById("application-sidebar");
  if (sidebarEl) window.HSOverlay.close(sidebarEl);
};

from preline.

There's a typo in the description:

"Qwick is an instant-loading framework with minimal overhead"

from preline.