├── .github ├── FUNDING.yml └── workflows │ └── nodejs.yml ├── .gitignore ├── .husky ├── .gitignore └── commit-msg ├── CHANGELOG.md ├── LICENSE ├── README.md ├── apps └── solid │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src │ ├── App.tsx │ ├── assets │ │ └── favicon.ico │ ├── index.css │ └── index.tsx │ ├── tsconfig.json │ └── vite.config.ts ├── components └── solid │ ├── .editorconfig │ ├── .eslintignore │ ├── .eslintrc │ ├── .gitignore │ ├── CHANGELOG.md │ ├── LICENSE │ ├── README.md │ ├── env.d.ts │ ├── package.json │ ├── src │ ├── IParticlesProps.ts │ ├── Particles.tsx │ └── index.tsx │ ├── test │ ├── index.test.tsx │ └── server.test.tsx │ ├── tsconfig.json │ ├── tsup.config.ts │ ├── typedoc.json │ └── vitest.config.ts ├── lerna.json ├── package.json ├── pnpm-lock.yaml ├── pnpm-workspace.yaml └── renovate.json /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: matteobruni,tsparticles 4 | -------------------------------------------------------------------------------- /.github/workflows/nodejs.yml: -------------------------------------------------------------------------------- 1 | name: Node.js CI 2 | on: 3 | push: 4 | branches: 5 | - main 6 | - legacy 7 | pull_request: 8 | branches: 9 | - main 10 | - legacy 11 | 12 | #env: 13 | #NX_CLOUD_DISTRIBUTED_EXECUTION: true 14 | #NX_CLOUD_ACCESS_TOKEN: '${{ secrets.NX_CLOUD_ACCESS_TOKEN }}' 15 | #NX_BRANCH: '${{github.event.pull_request.number || github.ref_name}}' 16 | 17 | jobs: 18 | 19 | main: 20 | runs-on: ubuntu-latest 21 | if: ${{ github.event_name != 'pull_request' }} 22 | steps: 23 | - uses: actions/checkout@eef61447b9ff4aafe5dcd4e0bbf5d482be7e7871 # v4 24 | name: Checkout [main] 25 | with: 26 | fetch-depth: 0 27 | #- name: Derive appropriate SHAs for base and head for `nx affected` commands 28 | # uses: nrwl/nx-set-shas@v3 29 | - uses: actions/setup-node@v4 30 | with: 31 | node-version: '18' 32 | - uses: pnpm/action-setup@v2.4.1 33 | name: Install pnpm 34 | id: pnpm-install 35 | with: 36 | version: 8 37 | run_install: false 38 | - name: Get pnpm version 39 | id: pnpm-version 40 | run: | 41 | echo "$(pnpm --version)" 42 | 43 | - name: Get pnpm store directory 44 | id: pnpm-cache 45 | run: | 46 | echo "::set-output name=pnpm_cache_dir::$(pnpm store path)" 47 | 48 | - uses: actions/cache@v4 49 | name: Setup pnpm cache 50 | with: 51 | path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }} 52 | key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} 53 | restore-keys: | 54 | ${{ runner.os }}-pnpm-store- 55 | - run: pnpm install --no-frozen-lockfile 56 | #- run: npx nx-cloud start-ci-run 57 | #- run: pnpm run prettify:ci:readme 58 | - run: npx lerna run build:ci #--concurrency 3 59 | #- run: npx nx-cloud stop-all-agents 60 | pr: 61 | runs-on: ubuntu-latest 62 | if: ${{ github.event_name == 'pull_request' }} 63 | steps: 64 | - uses: actions/checkout@eef61447b9ff4aafe5dcd4e0bbf5d482be7e7871 # v4 65 | with: 66 | ref: ${{ github.event.pull_request.head.ref }} 67 | repository: ${{ github.event.pull_request.head.repo.full_name }} 68 | fetch-depth: 0 69 | #- name: Derive appropriate SHAs for base and head for `nx affected` commands 70 | # uses: nrwl/nx-set-shas@v3 71 | - uses: actions/setup-node@v4 72 | with: 73 | node-version: '18' 74 | - uses: pnpm/action-setup@v2.4.1 75 | name: Install pnpm 76 | id: pnpm-install 77 | with: 78 | version: 8 79 | run_install: false 80 | - name: Get pnpm version 81 | id: pnpm-version 82 | run: | 83 | echo "$(pnpm --version)" 84 | 85 | - name: Get pnpm store directory 86 | id: pnpm-cache 87 | run: | 88 | echo "::set-output name=pnpm_cache_dir::$(pnpm store path)" 89 | 90 | - uses: actions/cache@v4 91 | name: Setup pnpm cache 92 | with: 93 | path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }} 94 | key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} 95 | restore-keys: | 96 | ${{ runner.os }}-pnpm-store- 97 | - run: pnpm install --no-frozen-lockfile 98 | #- run: npx nx-cloud start-ci-run 99 | #- run: pnpm run prettify:ci:readme 100 | - run: npx lerna run build:ci #--concurrency 3 101 | #- run: npx nx-cloud stop-all-agents 102 | - run: echo ${{ github.repository_owner }} 103 | - run: echo ${{ github.actor }} 104 | 105 | # agents: 106 | # runs-on: ubuntu-latest 107 | # name: Nx Agent 108 | # timeout-minutes: 60 109 | # strategy: 110 | # matrix: 111 | # agent: [ 1, 2, 3 ] 112 | # steps: 113 | # - uses: actions/checkout@v3 114 | # - uses: actions/setup-node@v3 115 | # with: 116 | # node-version: '18' 117 | # - uses: pnpm/action-setup@v2.2.2 118 | # name: Install pnpm 119 | # id: pnpm-install 120 | # with: 121 | # version: 8 122 | # run_install: false 123 | # - name: Get pnpm version 124 | # id: pnpm-version 125 | # run: | 126 | # echo "$(pnpm --version)" 127 | # 128 | # - name: Get pnpm store directory 129 | # id: pnpm-cache 130 | # run: | 131 | # echo "::set-output name=pnpm_cache_dir::$(pnpm store path)" 132 | # 133 | # - uses: actions/cache@v3 134 | # name: Setup pnpm cache 135 | # with: 136 | # path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }} 137 | # key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} 138 | # restore-keys: | 139 | # ${{ runner.os }}-pnpm-store- 140 | # - run: pnpm install --no-frozen-lockfile 141 | # - name: Start Nx Agent ${{ matrix.agent }} 142 | # run: npx nx-cloud start-agent 143 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ## Ignore Visual Studio temporary files, build results, and 2 | ## files generated by popular Visual Studio add-ons. 3 | ## 4 | ## Get latest from https://github.com/github/gitignore/blob/master/VisualStudio.gitignore 5 | 6 | # User-specific files 7 | *.rsuser 8 | *.suo 9 | *.user 10 | *.userosscache 11 | *.sln.docstates 12 | 13 | # User-specific files (MonoDevelop/Xamarin Studio) 14 | *.userprefs 15 | 16 | # Mono auto generated files 17 | mono_crash.* 18 | 19 | # Build results 20 | [Dd]ebug/ 21 | [Dd]ebugPublic/ 22 | [Rr]elease/ 23 | [Rr]eleases/ 24 | x64/ 25 | x86/ 26 | [Aa][Rr][Mm]/ 27 | [Aa][Rr][Mm]64/ 28 | bld/ 29 | [Bb]in/ 30 | [Oo]bj/ 31 | [Ll]og/ 32 | [Ll]ogs/ 33 | 34 | # Visual Studio 2015/2017 cache/options directory 35 | .vs/ 36 | # Uncomment if you have tasks that create the project's static files in wwwroot 37 | #wwwroot/ 38 | 39 | # Visual Studio 2017 auto generated files 40 | Generated\ Files/ 41 | 42 | # MSTest test Results 43 | [Tt]est[Rr]esult*/ 44 | [Bb]uild[Ll]og.* 45 | 46 | # NUnit 47 | *.VisualState.xml 48 | TestResult.xml 49 | nunit-*.xml 50 | 51 | # Build Results of an ATL Project 52 | [Dd]ebugPS/ 53 | [Rr]eleasePS/ 54 | dlldata.c 55 | 56 | # Benchmark Results 57 | BenchmarkDotNet.Artifacts/ 58 | 59 | # .NET Core 60 | project.lock.json 61 | project.fragment.lock.json 62 | artifacts/ 63 | 64 | # StyleCop 65 | StyleCopReport.xml 66 | 67 | # Files built by Visual Studio 68 | *_i.c 69 | *_p.c 70 | *_h.h 71 | *.ilk 72 | *.meta 73 | *.obj 74 | *.iobj 75 | *.pch 76 | *.pdb 77 | *.ipdb 78 | *.pgc 79 | *.pgd 80 | *.rsp 81 | *.sbr 82 | *.tlb 83 | *.tli 84 | *.tlh 85 | *.tmp 86 | *.tmp_proj 87 | *_wpftmp.csproj 88 | *.log 89 | *.vspscc 90 | *.vssscc 91 | .builds 92 | *.pidb 93 | *.svclog 94 | *.scc 95 | 96 | # Chutzpah Test files 97 | _Chutzpah* 98 | 99 | # Visual C++ cache files 100 | ipch/ 101 | *.aps 102 | *.ncb 103 | *.opendb 104 | *.opensdf 105 | *.sdf 106 | *.cachefile 107 | *.VC.db 108 | *.VC.VC.opendb 109 | 110 | # Visual Studio profiler 111 | *.psess 112 | *.vsp 113 | *.vspx 114 | *.sap 115 | 116 | # Visual Studio Trace Files 117 | *.e2e 118 | 119 | # TFS 2012 Local Workspace 120 | $tf/ 121 | 122 | # Guidance Automation Toolkit 123 | *.gpState 124 | 125 | # ReSharper is a .NET coding add-in 126 | _ReSharper*/ 127 | *.[Rr]e[Ss]harper 128 | *.DotSettings.user 129 | 130 | # JustCode is a .NET coding add-in 131 | .JustCode 132 | 133 | # TeamCity is a build add-in 134 | _TeamCity* 135 | 136 | # DotCover is a Code Coverage Tool 137 | *.dotCover 138 | 139 | # AxoCover is a Code Coverage Tool 140 | .axoCover/* 141 | !.axoCover/settings.json 142 | 143 | # Visual Studio code coverage results 144 | *.coverage 145 | *.coveragexml 146 | 147 | # NCrunch 148 | _NCrunch_* 149 | .*crunch*.local.xml 150 | nCrunchTemp_* 151 | 152 | # MightyMoose 153 | *.mm.* 154 | AutoTest.Net/ 155 | 156 | # Web workbench (sass) 157 | .sass-cache/ 158 | 159 | # Installshield output folder 160 | [Ee]xpress/ 161 | 162 | # DocProject is a documentation generator add-in 163 | DocProject/buildhelp/ 164 | DocProject/Help/*.HxT 165 | DocProject/Help/*.HxC 166 | DocProject/Help/*.hhc 167 | DocProject/Help/*.hhk 168 | DocProject/Help/*.hhp 169 | DocProject/Help/Html2 170 | DocProject/Help/html 171 | 172 | # Click-Once directory 173 | publish/ 174 | 175 | # Publish Web Output 176 | *.[Pp]ublish.xml 177 | *.azurePubxml 178 | # Note: Comment the next line if you want to checkin your web deploy settings, 179 | # but database connection strings (with potential passwords) will be unencrypted 180 | *.pubxml 181 | *.publishproj 182 | 183 | # Microsoft Azure Web App publish settings. Comment the next line if you want to 184 | # checkin your Azure Web App publish settings, but sensitive information contained 185 | # in these scripts will be unencrypted 186 | PublishScripts/ 187 | 188 | # NuGet Packages 189 | *.nupkg 190 | # NuGet Symbol Packages 191 | *.snupkg 192 | # The packages folder can be ignored because of Package Restore 193 | **/[Pp]ackages/* 194 | # except build/, which is used as an MSBuild target. 195 | !**/[Pp]ackages/build/ 196 | # Uncomment if necessary however generally it will be regenerated when needed 197 | #!**/[Pp]ackages/repositories.config 198 | # NuGet v3's project.json files produces more ignorable files 199 | *.nuget.props 200 | *.nuget.targets 201 | 202 | # Microsoft Azure Build Output 203 | csx/ 204 | *.build.csdef 205 | 206 | # Microsoft Azure Emulator 207 | ecf/ 208 | rcf/ 209 | 210 | # Windows Store app package directories and files 211 | AppPackages/ 212 | BundleArtifacts/ 213 | Package.StoreAssociation.xml 214 | _pkginfo.txt 215 | *.appx 216 | *.appxbundle 217 | *.appxupload 218 | 219 | # Visual Studio cache files 220 | # files ending in .cache can be ignored 221 | *.[Cc]ache 222 | # but keep track of directories ending in .cache 223 | !?*.[Cc]ache/ 224 | 225 | # Others 226 | ClientBin/ 227 | ~$* 228 | *~ 229 | *.dbmdl 230 | *.dbproj.schemaview 231 | *.jfm 232 | *.pfx 233 | *.publishsettings 234 | orleans.codegen.cs 235 | 236 | # Including strong name files can present a security risk 237 | # (https://github.com/github/gitignore/pull/2483#issue-259490424) 238 | #*.snk 239 | 240 | # Since there are multiple workflows, uncomment next line to ignore bower_components 241 | # (https://github.com/github/gitignore/pull/1529#issuecomment-104372622) 242 | #bower_components/ 243 | 244 | # RIA/Silverlight projects 245 | Generated_Code/ 246 | 247 | # Backup & report files from converting an old project file 248 | # to a newer Visual Studio version. Backup files are not needed, 249 | # because we have git ;-) 250 | _UpgradeReport_Files/ 251 | Backup*/ 252 | UpgradeLog*.XML 253 | UpgradeLog*.htm 254 | ServiceFabricBackup/ 255 | *.rptproj.bak 256 | 257 | # SQL Server files 258 | *.mdf 259 | *.ldf 260 | *.ndf 261 | 262 | # Business Intelligence projects 263 | *.rdl.data 264 | *.bim.layout 265 | *.bim_*.settings 266 | *.rptproj.rsuser 267 | *- [Bb]ackup.rdl 268 | *- [Bb]ackup ([0-9]).rdl 269 | *- [Bb]ackup ([0-9][0-9]).rdl 270 | 271 | # Microsoft Fakes 272 | FakesAssemblies/ 273 | 274 | # GhostDoc plugin setting file 275 | *.GhostDoc.xml 276 | 277 | # Node.js Tools for Visual Studio 278 | .ntvs_analysis.dat 279 | node_modules/ 280 | 281 | # Visual Studio 6 build log 282 | *.plg 283 | 284 | # Visual Studio 6 workspace options file 285 | *.opt 286 | 287 | # Visual Studio 6 auto-generated workspace file (contains which files were open etc.) 288 | *.vbw 289 | 290 | # Visual Studio LightSwitch build output 291 | **/*.HTMLClient/GeneratedArtifacts 292 | **/*.DesktopClient/GeneratedArtifacts 293 | **/*.DesktopClient/ModelManifest.xml 294 | **/*.Server/GeneratedArtifacts 295 | **/*.Server/ModelManifest.xml 296 | _Pvt_Extensions 297 | 298 | # Paket dependency manager 299 | .paket/paket.exe 300 | paket-files/ 301 | 302 | # FAKE - F# Make 303 | .fake/ 304 | 305 | # CodeRush personal settings 306 | .cr/personal 307 | 308 | # Python Tools for Visual Studio (PTVS) 309 | __pycache__/ 310 | *.pyc 311 | 312 | # Cake - Uncomment if you are using it 313 | # tools/** 314 | # !tools/packages.config 315 | 316 | # Tabs Studio 317 | *.tss 318 | 319 | # Telerik's JustMock configuration file 320 | *.jmconfig 321 | 322 | # BizTalk build output 323 | *.btp.cs 324 | *.btm.cs 325 | *.odx.cs 326 | *.xsd.cs 327 | 328 | # OpenCover UI analysis results 329 | OpenCover/ 330 | 331 | # Azure Stream Analytics local run output 332 | ASALocalRun/ 333 | 334 | # MSBuild Binary and Structured Log 335 | *.binlog 336 | 337 | # NVidia Nsight GPU debugger configuration file 338 | *.nvuser 339 | 340 | # MFractors (Xamarin productivity tool) working folder 341 | .mfractor/ 342 | 343 | # Local History for Visual Studio 344 | .localhistory/ 345 | 346 | # BeatPulse healthcheck temp database 347 | healthchecksdb 348 | 349 | # Backup folder for Package Reference Convert tool in Visual Studio 2017 350 | MigrationBackup/ 351 | 352 | # Ionide (cross platform F# VS Code tools) working folder 353 | .ionide/ 354 | 355 | .DS_Store 356 | dist/ 357 | tmp/ 358 | build/ 359 | 360 | .idea/ 361 | .vscode/ 362 | .nyc_output/ 363 | coverage/ 364 | .codacy-coverage/ 365 | 366 | package-lock.json 367 | yarn.lock 368 | 369 | size-plugin.json 370 | size-plugin-ssr.json 371 | 372 | .parcel-cache 373 | -------------------------------------------------------------------------------- /.husky/.gitignore: -------------------------------------------------------------------------------- 1 | _ -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | npx --no -- commitlint --edit "" 5 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. 4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 5 | 6 | # 3.0.0 (2023-12-29) 7 | 8 | 9 | ### Bug Fixes 10 | 11 | * **deps:** update dependency lerna to v7 ([e2bc4e9](https://github.com/tsparticles/solid/commit/e2bc4e99262b43c48d6714f4892ada260de5f762)) 12 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Matteo Bruni 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org) 2 | 3 | # @tsparticles/solid 4 | 5 | [![npm](https://img.shields.io/npm/v/@tsparticles/solid)](https://www.npmjs.com/package/@tsparticles/solid) [![npm](https://img.shields.io/npm/dm/@tsparticles/solid)](https://www.npmjs.com/package/@tsparticles/solid) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni) 6 | 7 | Official [tsParticles](https://github.com/matteobruni/tsparticles) solid component 8 | 9 | [![Slack](https://particles.js.org/images/slack.png)](https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI) [![Discord](https://particles.js.org/images/discord.png)](https://discord.gg/hACwv45Hme) [![Telegram](https://particles.js.org/images/telegram.png)](https://t.me/tsparticles) 10 | 11 | [![tsParticles Product Hunt](https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=186113&theme=light)](https://www.producthunt.com/posts/tsparticles?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-tsparticles") 12 | 13 | ## Installation 14 | 15 | ```shell 16 | npm install @tsparticles/solid 17 | ``` 18 | 19 | or 20 | 21 | ```shell 22 | yarn add @tsparticles/solid 23 | ``` 24 | 25 | ## How to use 26 | 27 | ### Code 28 | 29 | Examples: 30 | 31 | _Remote url_ 32 | 33 | ```javascript 34 | import Particles from "@tsparticles/solid"; 35 | 36 | function App() { 37 | const [ init, setInit ] = createSignal(false); 38 | 39 | createEffect(() => { 40 | if (init()) { 41 | return; 42 | } 43 | 44 | initParticlesEngine(async (engine) => { 45 | // this loads the tsparticles package bundle, it's the easiest method for getting everything ready 46 | // starting from v2 you can add only the features you need reducing the bundle size 47 | await loadFull(engine); 48 | }).then(() => { 49 | setInit(true); 50 | }) 51 | }); 52 | 53 | return ( 54 |
55 | {init() && } 60 |
61 | ); 62 | } 63 | ``` 64 | 65 | _Options object_ 66 | 67 | ```javascript 68 | import Particles from "@tsparticles/solid"; 69 | 70 | function App() { 71 | const [ init, setInit ] = createSignal(false); 72 | 73 | createEffect(() => { 74 | if (init()) { 75 | return; 76 | } 77 | 78 | initParticlesEngine(async (engine) => { 79 | // this loads the tsparticles package bundle, it's the easiest method for getting everything ready 80 | // starting from v2 you can add only the features you need reducing the bundle size 81 | await loadFull(engine); 82 | }).then(() => { 83 | setInit(true); 84 | }) 85 | }); 86 | 87 | return ( 88 |
89 | {init() && } 101 |
102 | ); 103 | } 104 | ``` 105 | 106 | ### Props 107 | 108 | | Prop | Type | Definition | 109 | |-----------------|----------|---------------------------------------------------------------------------------------------------------------------------------------------| 110 | | id | string | The id of the element. | 111 | | width | string | The width of the canvas. | 112 | | height | string | The height of the canvas. | 113 | | options | object | The options of the particles instance. | 114 | | url | string | The remote options url, called using an AJAX request | 115 | | style | object | The style of the canvas element. | 116 | | className | string | The class name of the canvas wrapper. | 117 | | canvasClassName | string | the class name of the canvas. | 118 | | container | object | The instance of the [particles container](https://particles.js.org/docs/modules/Core_Container.html) | 119 | | particlesloaded | function | This function is called when particles are correctly loaded in canvas, the current container is the parameter and you can customize it here | 120 | 121 | Find your parameters configuration [here](https://particles.js.org). 122 | 123 | ## Demos 124 | 125 | You can see the official sample created using CodeSandbox [here](https://codesandbox.io/s/condescending-dan-7e0r9) 126 | 127 | The demo website is [here](https://particles.js.org) 128 | 129 | 130 | 131 | There's also a CodePen collection actively maintained and updated [here](https://codepen.io/collection/DPOage) 132 | 133 | 134 | -------------------------------------------------------------------------------- /apps/solid/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .DS_Store -------------------------------------------------------------------------------- /apps/solid/README.md: -------------------------------------------------------------------------------- 1 | 2 | # Example App 3 | 4 | This project was bootstrapped by following the 5 | [Solid Getting Started](https://www.solidjs.com/guides/getting-started) guide 6 | using to following command. 7 | 8 | ```bash 9 | npx degit solidjs/templates/ts solid 10 | ``` 11 | 12 | ## Usage 13 | 14 | Those templates dependencies are maintained via [pnpm](https://pnpm.io) via 15 | `pnpm up -Lri`. 16 | 17 | This is the reason you see a `pnpm-lock.yaml`. That being said, any package 18 | manager will work. This file can be safely be removed once you clone a 19 | template. 20 | 21 | ```bash 22 | npm install # or pnpm install or yarn install 23 | ``` 24 | 25 | Learn more on the [Solid Website](https://solidjs.com) and come chat with us 26 | on our [Discord](https://discord.com/invite/solidjs) 27 | 28 | ## Available Scripts 29 | 30 | In the project directory, you can run: 31 | 32 | ### `npm run dev` or `npm start` 33 | 34 | Runs the app in the development mode. 35 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 36 | 37 | The page will reload if you make edits. 38 | 39 | ### `npm run build` 40 | 41 | Builds the app for production to the `dist` folder. 42 | It correctly bundles Solid in production mode and optimizes the build for the 43 | best performance. 44 | 45 | The build is minified and the filenames include the hashes. 46 | Your app is ready to be deployed! 47 | 48 | ## Deployment 49 | 50 | You can deploy the `dist` folder to any static host provider 51 | (netlify, surge, now, etc.) 52 | -------------------------------------------------------------------------------- /apps/solid/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Solid App 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /apps/solid/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vite-template-solid", 3 | "version": "0.0.0", 4 | "description": "", 5 | "scripts": { 6 | "start": "vite", 7 | "dev": "vite", 8 | "build": "vite build", 9 | "serve": "vite preview" 10 | }, 11 | "license": "MIT", 12 | "devDependencies": { 13 | "solid-devtools": "^0.29.2", 14 | "typescript": "^5.3.3", 15 | "vite": "^5.0.11", 16 | "vite-plugin-solid": "^2.8.2" 17 | }, 18 | "dependencies": { 19 | "@tsparticles/configs": "^3.5.0", 20 | "@tsparticles/engine": "^3.5.0", 21 | "@tsparticles/solid": "workspace:*", 22 | "solid-js": "^1.8.11", 23 | "tsparticles": "^3.5.0" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /apps/solid/src/App.tsx: -------------------------------------------------------------------------------- 1 | import configs from "@tsparticles/configs"; 2 | import type { Component } from 'solid-js'; 3 | import { createSignal, Show } from "solid-js"; 4 | import { loadFull } from "tsparticles"; 5 | import Particles, { initParticlesEngine } from "@tsparticles/solid"; 6 | 7 | const App: Component = () => { 8 | const init = initParticlesEngine(loadFull) 9 | const [config, setConfig] = createSignal(configs.basic) 10 | 11 | setTimeout(() => setConfig(configs.absorbers), 1000) 12 | 13 | return ( 14 | 15 | 16 | 17 | ); 18 | }; 19 | 20 | export default App; 21 | -------------------------------------------------------------------------------- /apps/solid/src/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/solid/621bcb4b2cb3e34c4e1d5285c7eac4401849f355/apps/solid/src/assets/favicon.ico -------------------------------------------------------------------------------- /apps/solid/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /apps/solid/src/index.tsx: -------------------------------------------------------------------------------- 1 | /* @refresh reload */ 2 | import { render } from 'solid-js/web'; 3 | 4 | import './index.css'; 5 | import App from './App'; 6 | 7 | const root = document.getElementById('root'); 8 | 9 | if (import.meta.env.DEV && !(root instanceof HTMLElement)) { 10 | throw new Error( 11 | 'Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?', 12 | ); 13 | } 14 | 15 | render(() => , root!); 16 | -------------------------------------------------------------------------------- /apps/solid/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "strict": true, 4 | "target": "ESNext", 5 | "module": "ESNext", 6 | "moduleResolution": "node", 7 | "allowSyntheticDefaultImports": true, 8 | "esModuleInterop": true, 9 | "jsx": "preserve", 10 | "jsxImportSource": "solid-js", 11 | "types": ["vite/client"], 12 | "noEmit": true, 13 | "isolatedModules": true, 14 | }, 15 | } 16 | -------------------------------------------------------------------------------- /apps/solid/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import solidPlugin from 'vite-plugin-solid'; 3 | // import devtools from 'solid-devtools/vite'; 4 | 5 | export default defineConfig({ 6 | plugins: [ 7 | /* 8 | Uncomment the following line to enable solid-devtools. 9 | For more info see https://github.com/thetarnav/solid-devtools/tree/main/packages/extension#readme 10 | */ 11 | // devtools(), 12 | solidPlugin(), 13 | ], 14 | server: { 15 | port: 3000, 16 | }, 17 | build: { 18 | target: 'esnext', 19 | }, 20 | }); 21 | -------------------------------------------------------------------------------- /components/solid/.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | -------------------------------------------------------------------------------- /components/solid/.eslintignore: -------------------------------------------------------------------------------- 1 | cjs 2 | node_modules 3 | umd -------------------------------------------------------------------------------- /components/solid/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "parser": "@typescript-eslint/parser", 4 | "plugins": ["@typescript-eslint", "no-only-tests", "eslint-comments"], 5 | "ignorePatterns": ["node_modules", "dist", "dev", "tsup.config.ts", "vitest.config.ts"], 6 | "parserOptions": { 7 | "project": "./tsconfig.json", 8 | "tsconfigRootDir": ".", 9 | "sourceType": "module" 10 | }, 11 | "rules": { 12 | "prefer-const": "warn", 13 | "no-console": "warn", 14 | "no-debugger": "warn", 15 | "@typescript-eslint/no-unused-vars": [ 16 | "warn", 17 | { 18 | "argsIgnorePattern": "^_", 19 | "varsIgnorePattern": "^_", 20 | "caughtErrorsIgnorePattern": "^_" 21 | } 22 | ], 23 | "@typescript-eslint/no-unnecessary-type-assertion": "warn", 24 | "@typescript-eslint/no-unnecessary-condition": "warn", 25 | "@typescript-eslint/no-useless-empty-export": "warn", 26 | "no-only-tests/no-only-tests": "warn", 27 | "eslint-comments/no-unused-disable": "warn" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /components/solid/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .DS_Store 4 | 5 | # tsup 6 | tsup.config.bundled_*.{m,c,}s 7 | -------------------------------------------------------------------------------- /components/solid/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. 4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 5 | 6 | # 3.0.0 (2023-12-29) 7 | 8 | **Note:** Version bump only for package @tsparticles/solid 9 | 10 | 11 | 12 | 13 | 14 | ## [2.9.3](https://github.com/matteobruni/tsparticles/compare/solid-particles@2.9.2...solid-particles@2.9.3) (2023-02-12) 15 | 16 | **Note:** Version bump only for package solid-particles 17 | 18 | ## [2.9.2](https://github.com/matteobruni/tsparticles/compare/solid-particles@2.9.1...solid-particles@2.9.2) (2023-02-12) 19 | 20 | **Note:** Version bump only for package solid-particles 21 | 22 | ## [2.9.1](https://github.com/matteobruni/tsparticles/compare/solid-particles@2.9.0...solid-particles@2.9.1) (2023-02-11) 23 | 24 | **Note:** Version bump only for package solid-particles 25 | 26 | # [2.9.0](https://github.com/matteobruni/tsparticles/compare/solid-particles@2.8.0...solid-particles@2.9.0) (2023-02-10) 27 | 28 | **Note:** Version bump only for package solid-particles 29 | 30 | # [2.8.0](https://github.com/matteobruni/tsparticles/compare/solid-particles@2.7.1...solid-particles@2.8.0) (2023-01-18) 31 | 32 | **Note:** Version bump only for package solid-particles 33 | 34 | ## [2.7.1](https://github.com/matteobruni/tsparticles/compare/solid-particles@2.7.0...solid-particles@2.7.1) (2022-12-25) 35 | 36 | **Note:** Version bump only for package solid-particles 37 | 38 | # [2.7.0](https://github.com/matteobruni/tsparticles/compare/solid-particles@2.6.0...solid-particles@2.7.0) (2022-12-23) 39 | 40 | **Note:** Version bump only for package solid-particles 41 | 42 | # [2.6.0](https://github.com/matteobruni/tsparticles/compare/solid-particles@2.5.3...solid-particles@2.6.0) (2022-12-06) 43 | 44 | **Note:** Version bump only for package solid-particles 45 | 46 | ## [2.5.3](https://github.com/matteobruni/tsparticles/compare/solid-particles@2.5.2...solid-particles@2.5.3) (2022-11-07) 47 | 48 | **Note:** Version bump only for package solid-particles 49 | 50 | ## [2.5.2](https://github.com/matteobruni/tsparticles/compare/solid-particles@2.5.1...solid-particles@2.5.2) (2022-11-07) 51 | 52 | **Note:** Version bump only for package solid-particles 53 | 54 | ## [2.5.1](https://github.com/matteobruni/tsparticles/compare/solid-particles@2.5.0...solid-particles@2.5.1) (2022-11-03) 55 | 56 | **Note:** Version bump only for package solid-particles 57 | 58 | # [2.5.0](https://github.com/matteobruni/tsparticles/compare/solid-particles@2.4.0...solid-particles@2.5.0) (2022-11-02) 59 | 60 | **Note:** Version bump only for package solid-particles 61 | 62 | # [2.4.0](https://github.com/matteobruni/tsparticles/compare/solid-particles@2.3.3...solid-particles@2.4.0) (2022-10-30) 63 | 64 | **Note:** Version bump only for package solid-particles 65 | 66 | ## [2.3.3](https://github.com/matteobruni/tsparticles/compare/solid-particles@2.3.2...solid-particles@2.3.3) (2022-09-30) 67 | 68 | **Note:** Version bump only for package solid-particles 69 | 70 | ## [2.3.2](https://github.com/matteobruni/tsparticles/compare/solid-particles@2.3.1...solid-particles@2.3.2) (2022-09-21) 71 | 72 | **Note:** Version bump only for package solid-particles 73 | 74 | ## [2.3.1](https://github.com/matteobruni/tsparticles/compare/solid-particles@2.3.0...solid-particles@2.3.1) (2022-09-13) 75 | 76 | **Note:** Version bump only for package solid-particles 77 | 78 | # [2.3.0](https://github.com/matteobruni/tsparticles/compare/solid-particles@2.2.4...solid-particles@2.3.0) (2022-09-11) 79 | 80 | **Note:** Version bump only for package solid-particles 81 | 82 | ## [2.2.4](https://github.com/matteobruni/tsparticles/compare/solid-particles@2.2.2...solid-particles@2.2.4) (2022-08-26) 83 | 84 | **Note:** Version bump only for package solid-particles 85 | 86 | ## [2.2.3](https://github.com/matteobruni/tsparticles/compare/solid-particles@2.2.2...solid-particles@2.2.3) (2022-08-21) 87 | 88 | **Note:** Version bump only for package solid-particles 89 | 90 | ## [2.2.2](https://github.com/matteobruni/tsparticles/compare/solid-particles@2.2.1...solid-particles@2.2.2) (2022-08-16) 91 | 92 | ### Bug Fixes 93 | 94 | - fixed double mouse events on mobile using pointer events, closes [#4622](https://github.com/matteobruni/tsparticles/issues/4622) ([1019fa4](https://github.com/matteobruni/tsparticles/commit/1019fa431f8a43cbd45d6adeb5adf94433e6e04b)) 95 | 96 | ## [2.2.1](https://github.com/matteobruni/tsparticles/compare/solid-particles@2.2.0...solid-particles@2.2.1) (2022-08-12) 97 | 98 | **Note:** Version bump only for package solid-particles 99 | 100 | # [2.2.0](https://github.com/matteobruni/tsparticles/compare/solid-particles@2.1.4...solid-particles@2.2.0) (2022-08-11) 101 | 102 | ### Bug Fixes 103 | 104 | - **deps:** update dependency riot to v7 ([116fa3f](https://github.com/matteobruni/tsparticles/commit/116fa3f0808bb8e1e3df767513ebcb82c2f9e0e5)) 105 | - **readme:** fix error 404 links ([21bd331](https://github.com/matteobruni/tsparticles/commit/21bd3315437050c6cbc48d7ad2ed8f522937385f)) 106 | 107 | ## [2.1.4](https://github.com/matteobruni/tsparticles/compare/solid-particles@2.1.3...solid-particles@2.1.4) (2022-07-28) 108 | 109 | **Note:** Version bump only for package solid-particles 110 | 111 | ## [2.1.3](https://github.com/matteobruni/tsparticles/compare/solid-particles@2.1.2...solid-particles@2.1.3) (2022-07-01) 112 | 113 | **Note:** Version bump only for package solid-particles 114 | 115 | ## [2.1.2](https://github.com/matteobruni/tsparticles/compare/solid-particles@2.1.1...solid-particles@2.1.2) (2022-07-01) 116 | 117 | **Note:** Version bump only for package solid-particles 118 | 119 | ## [2.1.1](https://github.com/matteobruni/tsparticles/compare/solid-particles@2.1.0...solid-particles@2.1.1) (2022-07-01) 120 | 121 | **Note:** Version bump only for package solid-particles 122 | 123 | # [2.1.0](https://github.com/matteobruni/tsparticles/compare/solid-particles@2.0.6...solid-particles@2.1.0) (2022-06-18) 124 | 125 | ### Bug Fixes 126 | 127 | - **deps:** update dependency @capacitor/core to v3.5.0 ([581bb7e](https://github.com/matteobruni/tsparticles/commit/581bb7e2f4f6aceb3535daf9223954a80f2daa81)) 128 | - **deps:** update dependency gh-pages to v4 ([cf6e957](https://github.com/matteobruni/tsparticles/commit/cf6e9577132afcec26410f7321fcf5ffcfb05930)) 129 | - **deps:** update dependency minify to v9 ([a12fb3e](https://github.com/matteobruni/tsparticles/commit/a12fb3e6f2a94677b4be32ebc69a17b085d2f3d2)) 130 | - **deps:** update react monorepo to v18.1.0 ([6b45793](https://github.com/matteobruni/tsparticles/commit/6b457937c41d7681a2135dfcb6ff220e578f22bb)) 131 | - fixed class attributes on solid component ([639680a](https://github.com/matteobruni/tsparticles/commit/639680a663d865eb71b1986607f11e20fd7a24ca)) 132 | 133 | ## [2.0.6](https://github.com/matteobruni/tsparticles/compare/solid-particles@2.0.5...solid-particles@2.0.6) (2022-04-16) 134 | 135 | **Note:** Version bump only for package solid-particles 136 | 137 | ## [2.0.5](https://github.com/matteobruni/tsparticles/compare/solid-particles@2.0.4...solid-particles@2.0.5) (2022-04-14) 138 | 139 | **Note:** Version bump only for package solid-particles 140 | 141 | ## [2.0.4](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.43.1...solid-particles@2.0.4) (2022-04-06) 142 | 143 | ### Bug Fixes 144 | 145 | - **deps:** update dependency @ionic/angular to v6 ([b20503f](https://github.com/matteobruni/tsparticles/commit/b20503ff2a29f6c8617f42c764c8a868fc334c5f)) 146 | - **deps:** update dependency sirv-cli to v2 ([176dc1d](https://github.com/matteobruni/tsparticles/commit/176dc1dc15c080032ad2f2addc59be6efce6248d)) 147 | - **deps:** update react monorepo to v18 ([3f6aa46](https://github.com/matteobruni/tsparticles/commit/3f6aa46e399d0092ae13ba494db86256c0d05c40)) 148 | - fixed some components init functions, they must be async ([0541dfa](https://github.com/matteobruni/tsparticles/commit/0541dfa82fb04264e2cd01ffd25e458b72847fdb)) 149 | 150 | ### Features 151 | 152 | - async presets ([86f3038](https://github.com/matteobruni/tsparticles/commit/86f3038bfc336744e88bb3d6ab7dfd4a36ada4e6)) 153 | - splitting engine from slim and full bundles (v2) ([268b78c](https://github.com/matteobruni/tsparticles/commit/268b78c12d6c54069893d27643cfe7a30f3be777)) 154 | 155 | ## [2.0.3](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.42.1...solid-particles@2.0.3) (2022-03-11) 156 | 157 | ### Bug Fixes 158 | 159 | - **deps:** update dependency @ionic/angular to v6 ([b20503f](https://github.com/matteobruni/tsparticles/commit/b20503ff2a29f6c8617f42c764c8a868fc334c5f)) 160 | - **deps:** update dependency sirv-cli to v2 ([176dc1d](https://github.com/matteobruni/tsparticles/commit/176dc1dc15c080032ad2f2addc59be6efce6248d)) 161 | - fixed some components init functions, they must be async ([0541dfa](https://github.com/matteobruni/tsparticles/commit/0541dfa82fb04264e2cd01ffd25e458b72847fdb)) 162 | 163 | ### Features 164 | 165 | - async presets ([86f3038](https://github.com/matteobruni/tsparticles/commit/86f3038bfc336744e88bb3d6ab7dfd4a36ada4e6)) 166 | - splitting engine from slim and full bundles (v2) ([268b78c](https://github.com/matteobruni/tsparticles/commit/268b78c12d6c54069893d27643cfe7a30f3be777)) 167 | 168 | ## [2.0.2](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.41.4...solid-particles@2.0.2) (2022-02-21) 169 | 170 | ### Bug Fixes 171 | 172 | - **deps:** update dependency @ionic/angular to v6 ([b20503f](https://github.com/matteobruni/tsparticles/commit/b20503ff2a29f6c8617f42c764c8a868fc334c5f)) 173 | - **deps:** update dependency sirv-cli to v2 ([176dc1d](https://github.com/matteobruni/tsparticles/commit/176dc1dc15c080032ad2f2addc59be6efce6248d)) 174 | - fixed some components init functions, they must be async ([0541dfa](https://github.com/matteobruni/tsparticles/commit/0541dfa82fb04264e2cd01ffd25e458b72847fdb)) 175 | 176 | ### Features 177 | 178 | - async presets ([86f3038](https://github.com/matteobruni/tsparticles/commit/86f3038bfc336744e88bb3d6ab7dfd4a36ada4e6)) 179 | - splitting engine from slim and full bundles (v2) ([268b78c](https://github.com/matteobruni/tsparticles/commit/268b78c12d6c54069893d27643cfe7a30f3be777)) 180 | 181 | ## [1.43.1](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.43.0...solid-particles@1.43.1) (2022-04-06) 182 | 183 | **Note:** Version bump only for package solid-particles 184 | 185 | # [1.43.0](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.42.4...solid-particles@1.43.0) (2022-04-04) 186 | 187 | **Note:** Version bump only for package solid-particles 188 | 189 | ## [1.42.4](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.42.3...solid-particles@1.42.4) (2022-03-20) 190 | 191 | **Note:** Version bump only for package solid-particles 192 | 193 | ## [1.42.3](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.42.2...solid-particles@1.42.3) (2022-03-18) 194 | 195 | **Note:** Version bump only for package solid-particles 196 | 197 | ## [1.42.2](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.42.1...solid-particles@1.42.2) (2022-03-14) 198 | 199 | **Note:** Version bump only for package solid-particles 200 | 201 | ## [1.42.1](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.42.0...solid-particles@1.42.1) (2022-03-09) 202 | 203 | **Note:** Version bump only for package solid-particles 204 | 205 | # [1.42.0](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.41.6...solid-particles@1.42.0) (2022-03-08) 206 | 207 | **Note:** Version bump only for package solid-particles 208 | 209 | ## [2.0.1](https://github.com/matteobruni/tsparticles/compare/solid-particles@2.0.0...solid-particles@2.0.1) (2022-02-15) 210 | 211 | ## [1.41.6](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.41.5...solid-particles@1.41.6) (2022-03-03) 212 | 213 | **Note:** Version bump only for package solid-particles 214 | 215 | ## [1.41.5](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.41.4...solid-particles@1.41.5) (2022-02-24) 216 | 217 | **Note:** Version bump only for package solid-particles 218 | 219 | ## [1.41.4](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.41.3...solid-particles@1.41.4) (2022-02-20) 220 | 221 | **Note:** Version bump only for package solid-particles 222 | 223 | ## [1.41.3](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.41.2...solid-particles@1.41.3) (2022-02-19) 224 | 225 | **Note:** Version bump only for package solid-particles 226 | 227 | ## [1.41.2](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.41.1...solid-particles@1.41.2) (2022-02-16) 228 | 229 | **Note:** Version bump only for package solid-particles 230 | 231 | # [2.0.0](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.41.1...solid-particles@2.0.0) (2022-02-15) 232 | 233 | ### Bug Fixes 234 | 235 | - **deps:** update dependency @ionic/angular to v6 ([b20503f](https://github.com/matteobruni/tsparticles/commit/b20503ff2a29f6c8617f42c764c8a868fc334c5f)) 236 | - **deps:** update dependency sirv-cli to v2 ([176dc1d](https://github.com/matteobruni/tsparticles/commit/176dc1dc15c080032ad2f2addc59be6efce6248d)) 237 | - fixed some components init functions, they must be async ([0541dfa](https://github.com/matteobruni/tsparticles/commit/0541dfa82fb04264e2cd01ffd25e458b72847fdb)) 238 | 239 | ### Features 240 | 241 | - async presets ([86f3038](https://github.com/matteobruni/tsparticles/commit/86f3038bfc336744e88bb3d6ab7dfd4a36ada4e6)) 242 | - splitting engine from slim and full bundles (v2) ([268b78c](https://github.com/matteobruni/tsparticles/commit/268b78c12d6c54069893d27643cfe7a30f3be777)) 243 | 244 | # [2.0.0-beta.5](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.22.2...solid-particles@2.0.0-beta.5) (2022-01-30) 245 | 246 | ### Bug Fixes 247 | 248 | - **deps:** update dependency @ionic/angular to v6 ([b20503f](https://github.com/matteobruni/tsparticles/commit/b20503ff2a29f6c8617f42c764c8a868fc334c5f)) 249 | - **deps:** update dependency sirv-cli to v2 ([176dc1d](https://github.com/matteobruni/tsparticles/commit/176dc1dc15c080032ad2f2addc59be6efce6248d)) 250 | 251 | ## [1.41.1](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.41.0...solid-particles@1.41.1) (2022-02-14) 252 | 253 | **Note:** Version bump only for package solid-particles 254 | 255 | # [1.41.0](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.40.2...solid-particles@1.41.0) (2022-02-10) 256 | 257 | **Note:** Version bump only for package solid-particles 258 | 259 | ## [1.40.2](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.40.1...solid-particles@1.40.2) (2022-02-07) 260 | 261 | **Note:** Version bump only for package solid-particles 262 | 263 | ## [1.40.1](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.40.0...solid-particles@1.40.1) (2022-02-06) 264 | 265 | **Note:** Version bump only for package solid-particles 266 | 267 | # [1.40.0](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.22.3...solid-particles@1.40.0) (2022-02-04) 268 | 269 | **Note:** Version bump only for package solid-particles 270 | 271 | ## [1.22.3](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.22.2...solid-particles@1.22.3) (2022-02-02) 272 | 273 | ### Features 274 | 275 | - async presets ([86f3038](https://github.com/matteobruni/tsparticles/commit/86f3038bfc336744e88bb3d6ab7dfd4a36ada4e6)) 276 | - splitting engine from slim and full bundles (v2) ([268b78c](https://github.com/matteobruni/tsparticles/commit/268b78c12d6c54069893d27643cfe7a30f3be777)) 277 | 278 | - updated fpsLimit default value to 120 build: updated all presets to have a fpsLimit of 120 ([d1eff05](https://github.com/matteobruni/tsparticles/commit/d1eff050224c4d65727c0abc3f100d70d3807eb8)) 279 | 280 | # [2.0.0-beta.4](https://github.com/matteobruni/tsparticles/compare/solid-particles@2.0.0-beta.3...solid-particles@2.0.0-beta.4) (2021-12-07) 281 | 282 | ### Features 283 | 284 | - async presets ([86f3038](https://github.com/matteobruni/tsparticles/commit/86f3038bfc336744e88bb3d6ab7dfd4a36ada4e6)) 285 | 286 | ## [1.22.2](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.22.1...solid-particles@1.22.2) (2022-01-29) 287 | 288 | **Note:** Version bump only for package solid-particles 289 | 290 | ## [1.22.1](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.22.0...solid-particles@1.22.1) (2022-01-26) 291 | 292 | **Note:** Version bump only for package solid-particles 293 | 294 | # [1.22.0](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.21.0...solid-particles@1.22.0) (2022-01-08) 295 | 296 | **Note:** Version bump only for package solid-particles 297 | 298 | # [1.21.0](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.20.6...solid-particles@1.21.0) (2021-12-29) 299 | 300 | **Note:** Version bump only for package solid-particles 301 | 302 | ## [1.20.6](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.20.5...solid-particles@1.20.6) (2021-12-24) 303 | 304 | ### Bug Fixes 305 | 306 | - fixed some readmes ([93f371a](https://github.com/matteobruni/tsparticles/commit/93f371ab82a5074d34ec7632ade41edc3dbf0ec7)) 307 | 308 | # [2.0.0-beta.3](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.20.5...solid-particles@2.0.0-beta.3) (2021-12-04) 309 | 310 | ### Features 311 | 312 | - splitting engine from slim and full bundles (v2) ([268b78c](https://github.com/matteobruni/tsparticles/commit/268b78c12d6c54069893d27643cfe7a30f3be777)) 313 | 314 | # [2.0.0-beta.2](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.18.4...solid-particles@2.0.0-beta.2) (2021-10-06) 315 | 316 | ### Features 317 | 318 | - splitting engine from slim and full bundles (v2) ([268b78c](https://github.com/matteobruni/tsparticles/commit/268b78c12d6c54069893d27643cfe7a30f3be777)) 319 | 320 | # [2.0.0-beta.1](https://github.com/matteobruni/tsparticles/compare/solid-particles@2.0.0-beta.0...solid-particles@2.0.0-beta.1) (2021-10-06) 321 | 322 | ## [1.20.5](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.20.4...solid-particles@1.20.5) (2021-11-28) 323 | 324 | **Note:** Version bump only for package solid-particles 325 | 326 | ## [1.20.4](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.20.3...solid-particles@1.20.4) (2021-11-17) 327 | 328 | **Note:** Version bump only for package solid-particles 329 | 330 | ## [1.20.3](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.20.2...solid-particles@1.20.3) (2021-11-05) 331 | 332 | **Note:** Version bump only for package solid-particles 333 | 334 | ## [1.20.2](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.20.1...solid-particles@1.20.2) (2021-10-31) 335 | 336 | **Note:** Version bump only for package solid-particles 337 | 338 | ## [1.20.1](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.20.0...solid-particles@1.20.1) (2021-10-30) 339 | 340 | **Note:** Version bump only for package solid-particles 341 | 342 | # [1.20.0](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.19.0...solid-particles@1.20.0) (2021-10-28) 343 | 344 | **Note:** Version bump only for package solid-particles 345 | 346 | # [1.19.0](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.18.4...solid-particles@1.19.0) (2021-10-14) 347 | 348 | **Note:** Version bump only for package solid-particles 349 | 350 | ## [1.18.4](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.18.3...solid-particles@1.18.4) (2021-10-06) 351 | 352 | **Note:** Version bump only for package solid-particles 353 | 354 | # [2.0.0-beta.0](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.18.3...solid-particles@2.0.0-beta.0) (2021-10-06) 355 | 356 | ### Features 357 | 358 | - splitting engine from slim and full bundles (v2) ([268b78c](https://github.com/matteobruni/tsparticles/commit/268b78c12d6c54069893d27643cfe7a30f3be777)) 359 | 360 | ## [1.18.3](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.18.2...solid-particles@1.18.3) (2021-10-03) 361 | 362 | **Note:** Version bump only for package solid-particles 363 | 364 | ## [1.18.2](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.18.1...solid-particles@1.18.2) (2021-09-27) 365 | 366 | **Note:** Version bump only for package solid-particles 367 | 368 | ## [1.18.1](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.18.0...solid-particles@1.18.1) (2021-09-20) 369 | 370 | **Note:** Version bump only for package solid-particles 371 | 372 | # [1.18.0](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.17.1...solid-particles@1.18.0) (2021-09-18) 373 | 374 | **Note:** Version bump only for package solid-particles 375 | 376 | ## [1.17.1](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.17.0...solid-particles@1.17.1) (2021-09-15) 377 | 378 | **Note:** Version bump only for package solid-particles 379 | 380 | # [1.17.0](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.16.3...solid-particles@1.17.0) (2021-08-23) 381 | 382 | ### Bug Fixes 383 | 384 | - **deps:** pin dependencies ([23be870](https://github.com/matteobruni/tsparticles/commit/23be8708d698e1e37a18f2ed292cbccffb0f1e47)) 385 | - **deps:** update all ([d9f0ff2](https://github.com/matteobruni/tsparticles/commit/d9f0ff2f8c4ac269aaad5077492746e3da8fb422)) 386 | 387 | ### Features 388 | 389 | - improved move path generators ([9b67377](https://github.com/matteobruni/tsparticles/commit/9b67377f9208a005b122e312ad4ad3c95a50deb7)) 390 | 391 | ## [1.16.3](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.16.2...solid-particles@1.16.3) (2021-08-10) 392 | 393 | ### Features 394 | 395 | - added new methods to particle class ([5743453](https://github.com/matteobruni/tsparticles/commit/5743453906001569f262888aa54539ad4e1463ac)) 396 | 397 | ## [1.16.2](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.16.1...solid-particles@1.16.2) (2021-07-31) 398 | 399 | **Note:** Version bump only for package solid-particles 400 | 401 | ## [1.16.1](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.16.0...solid-particles@1.16.1) (2021-07-29) 402 | 403 | **Note:** Version bump only for package solid-particles 404 | 405 | # [1.16.0](https://github.com/matteobruni/tsparticles/compare/solid-particles@1.15.0...solid-particles@1.16.0) (2021-07-29) 406 | 407 | **Note:** Version bump only for package solid-particles 408 | -------------------------------------------------------------------------------- /components/solid/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Matteo Bruni 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /components/solid/README.md: -------------------------------------------------------------------------------- 1 | [![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org) 2 | 3 | # @tsparticles/solid 4 | 5 | [![npm](https://img.shields.io/npm/v/@tsparticles/solid)](https://www.npmjs.com/package/@tsparticles/solid) [![npm](https://img.shields.io/npm/dm/@tsparticles/solid)](https://www.npmjs.com/package/@tsparticles/solid) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni) 6 | 7 | Official [tsParticles](https://github.com/matteobruni/tsparticles) solid component 8 | 9 | [![Slack](https://particles.js.org/images/slack.png)](https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI) [![Discord](https://particles.js.org/images/discord.png)](https://discord.gg/hACwv45Hme) [![Telegram](https://particles.js.org/images/telegram.png)](https://t.me/tsparticles) 10 | 11 | [![tsParticles Product Hunt](https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=186113&theme=light)](https://www.producthunt.com/posts/tsparticles?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-tsparticles") 12 | 13 | ## Installation 14 | 15 | ```shell 16 | npm install @tsparticles/solid 17 | ``` 18 | 19 | or 20 | 21 | ```shell 22 | yarn add @tsparticles/solid 23 | ``` 24 | 25 | ## How to use 26 | 27 | ### Code 28 | 29 | Examples: 30 | 31 | _Remote url_ 32 | 33 | ```javascript 34 | import Particles from "@tsparticles/solid"; 35 | 36 | function App() { 37 | const [init, setInit] = createSignal(false); 38 | 39 | createEffect(() => { 40 | if (init()) { 41 | return; 42 | } 43 | 44 | initParticlesEngine(async engine => { 45 | // this loads the tsparticles package bundle, it's the easiest method for getting everything ready 46 | // starting from v2 you can add only the features you need reducing the bundle size 47 | await loadFull(engine); 48 | }).then(() => { 49 | setInit(true); 50 | }); 51 | }); 52 | 53 | return ( 54 |
55 | {init() && } 56 |
57 | ); 58 | } 59 | ``` 60 | 61 | _Options object_ 62 | 63 | ```javascript 64 | import Particles from "@tsparticles/solid"; 65 | 66 | function App() { 67 | const [init, setInit] = createSignal(false); 68 | 69 | createEffect(() => { 70 | if (init()) { 71 | return; 72 | } 73 | 74 | initParticlesEngine(async engine => { 75 | // this loads the tsparticles package bundle, it's the easiest method for getting everything ready 76 | // starting from v2 you can add only the features you need reducing the bundle size 77 | await loadFull(engine); 78 | }).then(() => { 79 | setInit(true); 80 | }); 81 | }); 82 | 83 | return ( 84 |
85 | {init() && ( 86 | 98 | )} 99 |
100 | ); 101 | } 102 | ``` 103 | 104 | ### Props 105 | 106 | | Prop | Type | Definition | 107 | | --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------- | 108 | | id | string | The id of the element. | 109 | | width | string | The width of the canvas. | 110 | | height | string | The height of the canvas. | 111 | | options | object | The options of the particles instance. | 112 | | url | string | The remote options url, called using an AJAX request | 113 | | style | object | The style of the canvas element. | 114 | | className | string | The class name of the canvas wrapper. | 115 | | canvasClassName | string | the class name of the canvas. | 116 | | container | object | The instance of the [particles container](https://particles.js.org/docs/modules/Core_Container.html) | 117 | | particlesloaded | function | This function is called when particles are correctly loaded in canvas, the current container is the parameter and you can customize it here | 118 | 119 | Find your parameters configuration [here](https://particles.js.org). 120 | 121 | ## Demos 122 | 123 | You can see the official sample created using CodeSandbox [here](https://codesandbox.io/s/condescending-dan-7e0r9) 124 | 125 | The demo website is [here](https://particles.js.org) 126 | 127 | 128 | 129 | There's also a CodePen collection actively maintained and updated [here](https://codepen.io/collection/DPOage) 130 | 131 | 132 | -------------------------------------------------------------------------------- /components/solid/env.d.ts: -------------------------------------------------------------------------------- 1 | declare global { 2 | interface ImportMeta { 3 | env: { 4 | NODE_ENV: 'production' | 'development' 5 | PROD: boolean 6 | DEV: boolean 7 | } 8 | } 9 | namespace NodeJS { 10 | interface ProcessEnv { 11 | NODE_ENV: 'production' | 'development' 12 | PROD: boolean 13 | DEV: boolean 14 | } 15 | } 16 | } 17 | 18 | export {} 19 | -------------------------------------------------------------------------------- /components/solid/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@tsparticles/solid", 3 | "version": "3.0.0", 4 | "description": "Official tsParticles Solid Component - Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.js.", 5 | "license": "MIT", 6 | "author": "Matteo Bruni ", 7 | "homepage": "https://particles.js.org", 8 | "type": "module", 9 | "main": "./dist/index.js", 10 | "module": "./dist/index.js", 11 | "types": "./dist/index.d.ts", 12 | "publishConfig": { 13 | "access": "public" 14 | }, 15 | "files": [ 16 | "dist" 17 | ], 18 | "bugs": { 19 | "url": "https://github.com/tsparticles/solid/issues" 20 | }, 21 | "repository": { 22 | "url": "https://github.com/tsparticles/solid", 23 | "directory": "components/solid", 24 | "type": "git" 25 | }, 26 | "funding": [ 27 | { 28 | "type": "github", 29 | "url": "https://github.com/sponsors/matteobruni" 30 | }, 31 | { 32 | "type": "github", 33 | "url": "https://github.com/sponsors/tsparticles" 34 | }, 35 | { 36 | "type": "buymeacoffee", 37 | "url": "https://www.buymeacoffee.com/matteobruni" 38 | } 39 | ], 40 | "keywords": [ 41 | "front-end", 42 | "frontend", 43 | "tsparticles", 44 | "particles.js", 45 | "particlesjs", 46 | "particles", 47 | "particle", 48 | "canvas", 49 | "jsparticles", 50 | "xparticles", 51 | "particles-js", 52 | "particles-bg", 53 | "particles-bg-vue", 54 | "particles-ts", 55 | "particles.ts", 56 | "react-particles-js", 57 | "react-particles.js", 58 | "react-particles", 59 | "react", 60 | "reactjs", 61 | "vue-particles", 62 | "ngx-particles", 63 | "angular-particles", 64 | "particleground", 65 | "solid", 66 | "vue", 67 | "vuejs", 68 | "preact", 69 | "preactjs", 70 | "jquery", 71 | "angularjs", 72 | "angular", 73 | "typescript", 74 | "javascript", 75 | "animation", 76 | "web", 77 | "html5", 78 | "web-design", 79 | "webdesign", 80 | "css", 81 | "html", 82 | "css3", 83 | "animated", 84 | "background", 85 | "confetti", 86 | "canvas", 87 | "fireworks", 88 | "fireworks-js", 89 | "confetti-js", 90 | "confettijs", 91 | "fireworksjs", 92 | "canvas-confetti" 93 | ], 94 | "exports": { 95 | "solid": { 96 | "development": "./dist/dev.jsx", 97 | "import": "./dist/index.jsx" 98 | }, 99 | "development": { 100 | "import": { 101 | "types": "./dist/index.d.ts", 102 | "default": "./dist/dev.js" 103 | } 104 | }, 105 | "import": { 106 | "types": "./dist/index.d.ts", 107 | "default": "./dist/index.js" 108 | } 109 | }, 110 | "prettier": "@tsparticles/prettier-config", 111 | "scripts": { 112 | "check": "tsc", 113 | "build": "pnpm run prettify && pnpm run lint && tsup", 114 | "build:ci": "pnpm run prettify:ci && pnpm run lint:ci && tsup", 115 | "test": "concurrently pnpm:test:*", 116 | "test:client": "vitest", 117 | "test:ssr": "pnpm run test:client --mode ssr", 118 | "lint": "concurrently \"pnpm:lint:code --fix\" pnpm:lint:types", 119 | "lint:ci": "concurrently pnpm:lint:code pnpm:lint:types", 120 | "lint:code": "eslint --ignore-path .gitignore --max-warnings 0 src/**/*.{js,ts,tsx,jsx}", 121 | "lint:types": "tsc --noEmit", 122 | "update-deps": "pnpm up -Li", 123 | "prettify": "prettier --write \"src/**/*.{js,ts,json,css,tsx,jsx}\" \"README.md\"", 124 | "prettify:ci": "prettier --check \"src/**/*.{js,ts,json,css,tsx,jsx}\" \"README.md\"", 125 | "prepack": "pnpm build", 126 | "prepare": "pnpm build", 127 | "prepublishOnly": "pnpm build" 128 | }, 129 | "peerDependencies": { 130 | "@tsparticles/engine": ">=1.0.0", 131 | "solid-js": ">=1.0.0" 132 | }, 133 | "devDependencies": { 134 | "@tsparticles/engine": "^3.5.0", 135 | "@tsparticles/prettier-config": "^2.1.6", 136 | "@types/node": "^20.12.12", 137 | "@typescript-eslint/eslint-plugin": "^7.9.0", 138 | "@typescript-eslint/parser": "^7.9.0", 139 | "concurrently": "^8.2.2", 140 | "esbuild": "^0.21.3", 141 | "esbuild-plugin-solid": "^0.6.0", 142 | "eslint": "^8.56.0", 143 | "eslint-plugin-eslint-comments": "^3.2.0", 144 | "eslint-plugin-no-only-tests": "^3.1.0", 145 | "jsdom": "^24.0.0", 146 | "prettier": "3.0.0", 147 | "solid-js": "^1.8.17", 148 | "tsup": "^8.0.2", 149 | "tsup-preset-solid": "^2.2.0", 150 | "typescript": "^5.4.5", 151 | "vite": "^5.2.11", 152 | "vite-plugin-solid": "^2.10.2", 153 | "vitest": "^1.6.0" 154 | }, 155 | "browser": {}, 156 | "typesVersions": {} 157 | } 158 | -------------------------------------------------------------------------------- /components/solid/src/IParticlesProps.ts: -------------------------------------------------------------------------------- 1 | import type { Container, ISourceOptions } from "@tsparticles/engine"; 2 | import { JSX } from "solid-js"; 3 | 4 | export interface IParticlesProps { 5 | id?: string; 6 | width?: string; 7 | height?: string; 8 | options?: ISourceOptions; 9 | url?: string; 10 | params?: ISourceOptions; 11 | style?: JSX.CSSProperties; 12 | class?: string; 13 | canvasClass?: string; 14 | container?: { current: Container }; 15 | // prettier-ignore 16 | particlesLoaded?: (container: Container) => Promise; 17 | } 18 | -------------------------------------------------------------------------------- /components/solid/src/Particles.tsx: -------------------------------------------------------------------------------- 1 | import { tsParticles } from "@tsparticles/engine"; 2 | import { createEffect, createResource, JSX, mergeProps, on, onCleanup, onMount } from "solid-js"; 3 | import type { IParticlesProps } from "./IParticlesProps"; 4 | 5 | /** 6 | * @param (props:IParticlesProps) Particles component properties 7 | */ 8 | const Particles = (props: IParticlesProps): JSX.Element => { 9 | const config = mergeProps({ id: "tsparticles" }, props); 10 | 11 | onMount(() => { 12 | const [container] = createResource( 13 | () => ({ 14 | id: config.id, 15 | options: config.params ?? config.options ?? {}, 16 | url: config.url, 17 | }), 18 | data => tsParticles.load(data), 19 | ); 20 | 21 | createEffect( 22 | on(container, container => { 23 | if (!container) return; 24 | config.particlesLoaded?.(container); 25 | onCleanup(() => container.destroy()); 26 | }), 27 | ); 28 | }); 29 | 30 | return ( 31 |
32 | 40 |
41 | ); 42 | }; 43 | 44 | export default Particles; 45 | -------------------------------------------------------------------------------- /components/solid/src/index.tsx: -------------------------------------------------------------------------------- 1 | import { Engine, tsParticles } from "@tsparticles/engine"; 2 | import { createResource, Resource } from "solid-js"; 3 | import type { IParticlesProps } from "./IParticlesProps"; 4 | import Particles from "./Particles"; 5 | 6 | // prettier-ignore 7 | function initParticlesEngine(cb: (engine: Engine) => Promise): Resource { 8 | tsParticles.init(); 9 | const [resource] = createResource(() => cb(tsParticles).then(() => true as const)); 10 | return resource; 11 | } 12 | 13 | export default Particles; 14 | export { initParticlesEngine, IParticlesProps, Particles }; 15 | -------------------------------------------------------------------------------- /components/solid/test/index.test.tsx: -------------------------------------------------------------------------------- 1 | import { createRoot } from "solid-js"; 2 | import { isServer } from "solid-js/web"; 3 | import { describe, expect, it } from "vitest"; 4 | import { Particles } from "../src"; 5 | 6 | describe("environment", () => { 7 | it("runs on client", () => { 8 | expect(typeof window).toBe("object"); 9 | expect(isServer).toBe(false); 10 | }); 11 | }); 12 | 13 | describe("Particles", () => { 14 | it("renders a Particles-component", () => { 15 | createRoot(() => { 16 | const container = () as HTMLDivElement; 17 | expect(container.outerHTML).toBe('
'); 18 | }); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /components/solid/test/server.test.tsx: -------------------------------------------------------------------------------- 1 | import { isServer, renderToString } from "solid-js/web"; 2 | import { describe, expect, it } from "vitest"; 3 | import { Particles } from "../src"; 4 | 5 | describe("environment", () => { 6 | it("runs on server", () => { 7 | expect(typeof window).toBe("undefined"); 8 | expect(isServer).toBe(true); 9 | }); 10 | }); 11 | 12 | describe("Particles", () => { 13 | it("renders a Particles-component", () => { 14 | const string = renderToString(() => ); 15 | expect(string).toBe('
'); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /components/solid/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "strict": true, 4 | "target": "ESNext", 5 | "module": "ESNext", 6 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 7 | "moduleResolution": "node", 8 | "resolveJsonModule": true, 9 | "esModuleInterop": true, 10 | "noEmit": true, 11 | "isolatedModules": true, 12 | "skipLibCheck": true, 13 | "allowSyntheticDefaultImports": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noUncheckedIndexedAccess": true, 16 | "jsx": "preserve", 17 | "jsxImportSource": "solid-js", 18 | "types": [], 19 | "baseUrl": "." 20 | }, 21 | "exclude": ["node_modules", "dist", "./dev"] 22 | } 23 | -------------------------------------------------------------------------------- /components/solid/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "tsup"; 2 | import * as preset from "tsup-preset-solid"; 3 | 4 | const preset_options: preset.PresetOptions = { 5 | // array or single object 6 | entries: [ 7 | // default entry (index) 8 | { 9 | // entries with '.tsx' extension will have `solid` export condition generated 10 | entry: "src/index.tsx", 11 | // will generate a separate development entry 12 | dev_entry: true, 13 | }, 14 | ], 15 | // Set to `true` to remove all `console.*` calls and `debugger` statements in prod builds 16 | drop_console: true, 17 | // Set to `true` to generate a CommonJS build alongside ESM 18 | // cjs: true, 19 | }; 20 | 21 | const CI = 22 | process.env["CI"] === "true" || 23 | process.env["GITHUB_ACTIONS"] === "true" || 24 | process.env["CI"] === '"1"' || 25 | process.env["GITHUB_ACTIONS"] === '"1"'; 26 | 27 | export default defineConfig(config => { 28 | const watching = !!config.watch; 29 | 30 | const parsed_options = preset.parsePresetOptions(preset_options, watching); 31 | 32 | if (!watching && !CI) { 33 | const package_fields = preset.generatePackageExports(parsed_options); 34 | 35 | console.log(`package.json: \n\n${JSON.stringify(package_fields, null, 2)}\n\n`); 36 | 37 | // will update ./package.json with the correct export fields 38 | preset.writePackageJson(package_fields); 39 | } 40 | 41 | return preset.generateTsupOptions(parsed_options); 42 | }); 43 | -------------------------------------------------------------------------------- /components/solid/typedoc.json: -------------------------------------------------------------------------------- 1 | { 2 | "includes": "./markdown", 3 | "entryPoints": [ 4 | "./src/" 5 | ], 6 | "entryPointStrategy": "expand", 7 | "name": "tsParticles Angular Component", 8 | "includeVersion": true, 9 | "hideGenerator": true, 10 | "out": "./docs", 11 | "validation": { 12 | "invalidLink": true, 13 | "notDocumented": true 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /components/solid/vitest.config.ts: -------------------------------------------------------------------------------- 1 | import solidPlugin from "vite-plugin-solid"; 2 | import { defineConfig } from "vitest/config"; 3 | 4 | export default defineConfig(({ mode }) => { 5 | // to test in server environment, run with "--mode ssr" or "--mode test:ssr" flag 6 | // loads only server.test.ts file 7 | const testSSR = mode === "test:ssr" || mode === "ssr"; 8 | 9 | return { 10 | plugins: [ 11 | solidPlugin({ 12 | // https://github.com/solidjs/solid-refresh/issues/29 13 | hot: false, 14 | // For testing SSR we need to do a SSR JSX transform 15 | solid: { generate: testSSR ? "ssr" : "dom" }, 16 | }), 17 | ], 18 | test: { 19 | watch: false, 20 | isolate: !testSSR, 21 | env: { 22 | NODE_ENV: testSSR ? "production" : "development", 23 | DEV: testSSR ? "" : "1", 24 | SSR: testSSR ? "1" : "", 25 | PROD: testSSR ? "1" : "", 26 | }, 27 | environment: testSSR ? "node" : "jsdom", 28 | transformMode: { web: [/\.[jt]sx$/] }, 29 | ...(testSSR 30 | ? { 31 | include: ["test/server.test.{ts,tsx}"], 32 | } 33 | : { 34 | include: ["test/*.test.{ts,tsx}"], 35 | exclude: ["test/server.test.{ts,tsx}"], 36 | }), 37 | }, 38 | resolve: { 39 | conditions: testSSR ? ["node"] : ["browser", "development"], 40 | }, 41 | }; 42 | }); 43 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "node_modules/lerna/schemas/lerna-schema.json", 3 | "packages": [ 4 | "apps/*", 5 | "components/*" 6 | ], 7 | "version": "3.0.0", 8 | "npmClient": "pnpm", 9 | "conventionalCommits": true, 10 | "command": { 11 | "version": { 12 | "message": "chore(release): published new version" 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@tsparticles/solid-workspace", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "build": "lerna run build" 7 | }, 8 | "license": "MIT", 9 | "dependencies": { 10 | "@commitlint/cli": "^18.4.3", 11 | "@commitlint/config-conventional": "^18.4.3", 12 | "husky": "^9.0.0", 13 | "lerna": "^8.0.1" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - 'apps/*' 3 | - 'components/*' 4 | -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://docs.renovatebot.com/renovate-schema.json", 3 | "extends": [ 4 | "config:base" 5 | ] 6 | } 7 | --------------------------------------------------------------------------------