Topics

SolidJS•3mo ago

Aceternity UI components

I'm attempting to replicate the Sparkles component from https://ui.aceternity.com/components/sparkles. It uses @tsparticles, framer-motion (solid-motionone), and tailwind. I haven't been able to figure out the particles. I'm seeing some warning which are probably informative to someone who's familiar with SolidJS.

* You appear to have multiple instances of Solid. This can lead to unexpected behavior. * computations created outside a createRoot or render will never be disposed * computations created outside a createRoot or render will never be disposed * cleanups created outside a createRoot or render will never be run * computations created outside a createRoot or render will never be disposed

I'm using a codesandbox so this can be viewed easily and forked to play with. https://codesandbox.io/p/sandbox/solid-sparkles-y9gk2j The totally effect should in src/components/SparklesPreview.tsx. I have the base sparkles component at src/components/Sparkles.tsx and I encapsulated the options config for Motion in src/components/sparkleOptions.ts since it's a long config. Finally, I have a basic test for tsparticles at src/components/BasicParticles.tsx . These can all be easily uncommented in src/App.tsx to see how things are working individually. I see the above warning in all the setups, so probably something with tsparticles. Any help would be appreciated.

No description

No description

36 Replies

bigmistqke•3mo ago

i had a quick look at it couldn't see directly something that was wrong i think it might be this @tsparticles package that is causing some problems i would try to make a minimal reproduction with only this @tsparticles and see if you can actually get it to run an aside:

const [init, setInit] = createSignal<boolean>(false);

onMount(() => {
  if (init()) {
    return;
  }

  initParticlesEngine(async (engine: Engine) => {
    await loadSlim(engine);
  }).then(() => {
    setInit(true);
  });
});

const [init, setInit] = createSignal<boolean>(false);

onMount(() => {
  if (init()) {
    return;
  }

  initParticlesEngine(async (engine: Engine) => {
    await loadSlim(engine);
  }).then(() => {
    setInit(true);
  });
});

you can write this a lot nicer with solid's async primitive createResource:

const [init] = createResource(async () => {
  await initParticlesEngine(loadSlim)
  return true;
})

const [init] = createResource(async () => {
  await initParticlesEngine(loadSlim)
  return true;
})

bigmistqke•3mo ago

they have solid-js defined as both a dependency and a peer-dependency, mb that's causing the You appear to have multiple instances of Solid. This can lead to unexpected behavior.

No description

bigmistqke•3mo ago

You appear to have multiple instances of Solid. This can lead to unexpected behavior. this is an actual issue, the other errors could be signs of a memory leak, but will not change behavior. having multiple instances of solid will. lol i think i found it remove opacity-0 from the Motion.div in Sparkles.tsx

agentsmithOP•3mo ago

That looks cool. I'll have to try and find some documentation on that. I don't follow how that works if it's not referencing the Engine as a parameter for the async function and loadSlim. Yeah, I figured that was the issue since it's similar to what you would see in React. I'll have to see about submitting a PR to fix it. I tried this, but I didn't notice any change.

agentsmithOP•3mo ago

If you update the App.tsx to this:

<BasicParticles />
{/* <Sparkles /> */}
{/* <SparklesPreview /> */}

<BasicParticles />
{/* <Sparkles /> */}
{/* <SparklesPreview /> */}

The you will see a sparse tsparticle only implementation that looks like this.

No description

agentsmithOP•3mo ago

If you update App.tsx to this:

{/* <BasicParticles /> */}
<Sparkles />
{/* <SparklesPreview /> */}

{/* <BasicParticles /> */}
<Sparkles />
{/* <SparklesPreview /> */}

The particles do render.

No description

agentsmithOP•3mo ago

It looks like the particles are rendering as expected. This is the using Sparkles with the props to create the effect, but I changed the particleColor to black so it would be visible on the default white background.

{/* <BasicParticles /> */}
{/* <Sparkles /> */}
{/* <SparklesPreview /> */}
<Sparkles
  background="transparent"
  minSize={0.4}
  maxSize={1}
  particleDensity={1200}
  class="w-full h-full"
  particleColor="#000000"
/>

{/* <BasicParticles /> */}
{/* <Sparkles /> */}
{/* <SparklesPreview /> */}
<Sparkles
  background="transparent"
  minSize={0.4}
  maxSize={1}
  particleDensity={1200}
  class="w-full h-full"
  particleColor="#000000"
/>

agentsmithOP•3mo ago

No description

agentsmithOP•3mo ago

I see what's going on. Not sure how to fix it yet. Might be a result of the multiple solidjs instances. Two canvas elements are being created and the sparkles are getting attached to a canvas element that is positioned out of view.

No description

bigmistqke•3mo ago

mm ye strange that's pretty strange

bigmistqke•3mo ago

code looks a bit suspicious https://github.com/tsparticles/solid/blob/main/components/solid/src/Particles.tsx

GitHub

solid/components/solid/src/Particles.tsx at main · tsparticles/solid

Solid.js tsParticles official component. Contribute to tsparticles/solid development by creating an account on GitHub.

bigmistqke•3mo ago

they are destructuring props { className, canvasClassName, loaded, url, width, height } = props which means the props aren't reactive

agentsmithOP•3mo ago

Need to look at the solid version of the library. https://github.com/tsparticles/solid

GitHub

GitHub - tsparticles/solid: Solid.js tsParticles official component

Solid.js tsParticles official component. Contribute to tsparticles/solid development by creating an account on GitHub.

bigmistqke•3mo ago

yes, what i linked to is the solid version

agentsmithOP•3mo ago

Oh, it looked like react when I glanced at the code 😅

bigmistqke•3mo ago

i think this explains it a bit: must have been a hacking project and not really developed properly

No description

bigmistqke•3mo ago

haha yes, exactly 🙂 it's because it kind of is but the component is just a very tiny wrapper around their engine, so wouldn't be too difficult to write your own could even send a pr

if (refContainer) {
  refContainer.current = container;
}

if (refContainer) {
  refContainer.current = container;
}

also a react thingy, there is no refs with .current in solid

agentsmithOP•3mo ago

kinda what I was thinking although I don't know solid well enough yet. The ref thing is definitely suspicious. Well I guess there really isn't that much code. I'm already planning to fork the code so I can see about fixing the depedency issue.

bigmistqke•3mo ago

If u want me to look at some code lmk

agentsmithOP•3mo ago

This took way longer than I hoped and it's still not working, but I have a modern-solid branch of tsparticles here. https://github.com/ralphsmith80/tsparticles-solid/tree/modern-solid There's not a lot of code. Getting the build working with updated tooling was the part that took a while because I couldn't get it to work with the current webpack setup and it was using solid-scripts still. The repo is a monorepo using lerna and pnpm with a src/apps/solid app that is the test app and a src/components/solid which is the @tsparticles/solid library component. I wiped out the test app since it was using solid-scripts and recreated it with npx degit solidjs/templates/ts solid. The main thing to be aware of there, is this line in the package.json "@tsparticles/solid": "workspace:*",, which references the component locally so you can see updates in the app when you rebuild the component. Just run pnpm run build in the components/solid directory after making any changes to produce a new library build that will be picked up by the test app. I updated the library component based on my beginner level understanding of solidjs . It does get pulled in to the app as expected, but there's a console error and it's not rendering the particles. My best guess is that it's a result of tsParticles.dom() not having an element yet here. https://github.com/ralphsmith80/tsparticles-solid/blob/modern-solid/components/solid/src/Particles.tsx#L24 I think the correct way would be to have some signal wrapper around when tsParticles.dom() has a valid element, but I'm not really sure how to go about that short of using something like requestAnimationFrame to poll for tsParticles.dom() to return an element.

bigmistqke•3mo ago

ugh monospace hell is real having some build issues, will look at it more closely at lunch

bigmistqke•3mo ago

made a pr: https://github.com/ralphsmith80/tsparticles-solid/pull/1

GitHub

Modern solid by bigmistqke · Pull Request #1 · ralphsmith80/tsparti...

use solid-lib-starter as base refactored code: fixed props to be reactive with mergeProps removed redundant memo instead of using async function inside a create-effect, use createResource to initi...

bigmistqke•3mo ago

looks fine to me

No description

bigmistqke•3mo ago

i can push it to @tsparticles too maybe initParticlesEngine should return a resource directly? then the consumer doesn't have to wrap it themselves:

const [init] = createResource(() => initParticlesEngine(loadFull).then(() => true))

const [init] = createResource(() => initParticlesEngine(loadFull).then(() => true))

would become

// Resource<true>
const initialised = initParticlesEngine(loadFull).

// Resource<true>
const initialised = initParticlesEngine(loadFull).

mm i broke it somehow fixed it, was some dependency issue ig

agentsmithOP•3mo ago

Thanks! I saw the update come through, but haven't had much time to look at it yet. Got wait til I through all my daily meetings. This looks all good to me, but I need to wrap my head around tsup. I've never used that before. It looks simple enough, but I did a quick sanity check for myself by pulling the relevant code changes while keeping the rollup build and it wasn't working. I want to play around with that a bit to see if I can understand if there's some magic there. Oh, I do have one question about the dist files with the tsup config. It looks like the production files are uglified, but not minified. Am I missing something there. Am I missing something? I'm not seeing how to add a minified option.

bigmistqke•3mo ago

i really hate all that build config stuff myself

bigmistqke•3mo ago

i always just git clone https://github.com/solidjs-community/solid-lib-starter and call it a day

GitHub

GitHub - solidjs-community/solid-lib-starter: SolidJS library start...

SolidJS library starter template. Use it to create your own solid package. - solidjs-community/solid-lib-starter

bigmistqke•3mo ago

the starter template for libraries, maintained by the solid community

It looks like the production files are uglified, but not minified.

it's common not to minify library builds, so consumers can patch them. what you are seeing is the transpiled output of solid.

agentsmithOP•3mo ago

I'm with you there. I didn't realize there was a starter for making libs in solidjs.

bigmistqke•3mo ago

Ye my bad, should have mentioned!

agentsmithOP•3mo ago

That makes sense when working in a dev environment, but shouldn't it still be minified when going to production? This is what I came up using the preset_options.

modify_esbuild_options: (options, buildItem) => {
    // conditionally set minify based for the production build item
    if (buildItem.type.jsx) {
        options.minify = true
    }
    return options
},

modify_esbuild_options: (options, buildItem) => {
    // conditionally set minify based for the production build item
    if (buildItem.type.jsx) {
        options.minify = true
    }
    return options
},

Not sure if that's complete correct. I believe type.jsx indicates the production build as the other types dev and server seem obvious. In this case it reduces the size from 8.3kb to 6kb. ~27% reduction. No back to the original problem 😅 . Thanks for all your help!

bigmistqke•3mo ago

Think the idea is that the consumer minifies when they r building their app code You are welcome!

agentsmithOP•3mo ago

I got it working.

agentsmithOP•3mo ago

No description

agentsmithOP•3mo ago

The gif shows it okay I guess.

bigmistqke•3mo ago

🥳 congrats!

Solid is a declarative reactive Javascript library for creating user interfaces.

12KMembers

View on Discord

Want results from more Discord servers?

Add your server