tsparticles / astro

tsParticles Astro official component
MIT License
33 stars 4 forks source link

Deprecated Version Warning #23

Open nickwild-999 opened 2 months ago

nickwild-999 commented 2 months ago

When I install this I get a warning and the example code does not run. I have tried changing to @tspacticles/engine but it still is not working. This is the error from the demo code.

Looking into the repo it again I think it seems to be using a deprecated version of ts-particles with a different syntax

[{
    "resource": ".../test.astro",
    "owner": "_generated_diagnostic_collection_name_#1",
    "code": "2307",
    "severity": 8,
    "message": "Cannot find module 'tsparticles-engine' or its corresponding type declarations.",
    "source": "ts",
    "startLineNumber": 24,
    "startColumn": 60,
    "endLineNumber": 24,
    "endColumn": 80
},{
    "resource": ".../test.astro",
    "owner": "_generated_diagnostic_collection_name_#1",
    "code": "2307",
    "severity": 8,
    "message": "Cannot find module 'tsparticles' or its corresponding type declarations.",
    "source": "ts",
    "startLineNumber": 25,
    "startColumn": 28,
    "endLineNumber": 25,
    "endColumn": 41
},{
    "resource": "...test.astro",
    "owner": "_generated_diagnostic_collection_name_#1",
    "code": "2339",
    "severity": 8,
    "message": "Property 'particlesInit' does not exist on type 'Window & typeof globalThis'.",
    "source": "ts",
    "startLineNumber": 30,
    "startColumn": 10,
    "endLineNumber": 30,
    "endColumn": 23
},{
    "resource": "...test.astro",
    "owner": "_generated_diagnostic_collection_name_#1",
    "code": "2339",
    "severity": 8,
    "message": "Property 'particlesLoaded' does not exist on type 'Window & typeof globalThis'.",
    "source": "ts",
    "startLineNumber": 37,
    "startColumn": 10,
    "endLineNumber": 37,
    "endColumn": 25
}]
ataverascrespo commented 2 months ago

Was dealing with this as well. Seems like the astro component is not compatible with TSparticles 3.x yet, so make sure to add these two lines to your package.lock and package-lock.json:

"tsparticles": "2.12",
"tsparticles-engine": "^2.12.0"

then run an npm install, should fix your issue

ataverascrespo commented 2 months ago

Gonna quickly add onto this, since my last comment only fixes the type declaration issues with the module imports, but not the particlesLoaded and particlesInit errors.

To fix that, you'll need to create an index.d.ts file (if you haven't already). In that file, you'll just have to globally declare those properties for the window interface. Here's how I implemented it, for instance.

That should fix the issues with the properties and let you use the sample code from this repo!