qwik-particles implementation

[rtomlinson1]

Hi, is there a documentation page for implementing in qwik? I have it set up like this in my component right now, and I'm getting an error about the engine library not finding "document". Do I need to surround the engine file with UseVisibleTask$ or something? I'm new to all this so I apologize if I'm just searching for the wrong information and missing the obvious.

file:///Users/ryantomlinson/qwik-space/qwik-app/node_modules/@tsparticles/engine/esm/Core/Engine.js:177
let domContainer = params.element ?? document.getElementById(id);

import { component$ } from "@builder.io/qwik";
import { tsParticles } from "@tsparticles/engine";
import { loadLinksPreset } from "qwik-particles"
// import { loadFull } from "tsparticles";
//import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too.
// import { loadBasic } from "@tsparticles/basic"; // if you are going to use `loadBasic`, install the "@tsparticles/basic" package too.


export default component$(() => {
    tsParticles.load({ id: "tsparticles", options: { preset: "links" } });
    
  return (
    <>
    <div id="tsparticles" class="gray-trapezoid">
        <h2 class="content-width light-text center-text">What People Are Saying</h2>
        <p class="trapezoid-content light-text center-text italic">...</p>
        <h5 class="content-width light-text center-text">...</h5>
        <a class="primary-button center-text" href="#">Sign Up Today</a>
    </div>
    
    <script src="tsparticles.engine.min.js"></script>
    </>
    
    );
});

[matteobruni]

Hi, is there a documentation page for implementing in qwik? I have it set up like this in my component right now, and I'm getting an error about the engine library not finding "document". Do I need to surround the engine file with UseVisibleTask$ or something? I'm new to all this so I apologize if I'm just searching for the wrong information and missing the obvious.

file:///Users/ryantomlinson/qwik-space/qwik-app/node_modules/@tsparticles/engine/esm/Core/Engine.js:177 let domContainer = params.element ?? document.getElementById(id);

import { component$ } from "@builder.io/qwik";
import { tsParticles } from "@tsparticles/engine";
import { loadLinksPreset } from "qwik-particles"
// import { loadFull } from "tsparticles";
//import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too.
// import { loadBasic } from "@tsparticles/basic"; // if you are going to use `loadBasic`, install the "@tsparticles/basic" package too.


export default component$(() => {
    tsParticles.load({ id: "tsparticles", options: { preset: "links" } });
    
  return (
    <>
    <div id="tsparticles" class="gray-trapezoid">
        <h2 class="content-width light-text center-text">What People Are Saying</h2>
        <p class="trapezoid-content light-text center-text italic">...</p>
        <h5 class="content-width light-text center-text">...</h5>
        <a class="primary-button center-text" href="#">Sign Up Today</a>
    </div>
    
    <script src="tsparticles.engine.min.js"></script>
    </>
    
    );
});

I'm working on the update of the Qwik package for v3 compatibility, you can read more on the dedicated repository when available.

Since it's a client library, it must run always client side.