Topics

SolidJS•14mo ago

DaOfficialWizard🧙

solid-three

Is there an alternative to solid-three it seems to be broken - it fails to work for me, even the basic example.

50 Replies

DaOfficialWizard🧙•14mo ago

import { Canvas } from 'solid-three'
import { Box } from '@components/Box'

const Home = () => {
    return (
        <Canvas
            camera={{
                position: [3, 3, 3],
            }}
            gl={{
                antialias: true,
            }}
            shadows>
            <Box />
            <ambientLight />
            <spotLight position={[0, 5, 10]} intensity={1} />
        </Canvas>
    )
}

export default Home

import { Canvas } from 'solid-three'
import { Box } from '@components/Box'

const Home = () => {
    return (
        <Canvas
            camera={{
                position: [3, 3, 3],
            }}
            gl={{
                antialias: true,
            }}
            shadows>
            <Box />
            <ambientLight />
            <spotLight position={[0, 5, 10]} intensity={1} />
        </Canvas>
    )
}

export default Home

thetarnav•14mo ago

You could look into something like this: https://github.com/bigmistqke/solid-triangle

GitHub

GitHub - bigmistqke/solid-triangle: (WIP) A threejs-wrapper for sol...

(WIP) A threejs-wrapper for solidjs ⚡ by solidjs, threejs and @solid-primitives/jsx-parser - GitHub - bigmistqke/solid-triangle: (WIP) A threejs-wrapper for solidjs ⚡ by solidjs, threejs and @solid...

thetarnav•14mo ago

It doens't use a custom rendered but it's a bit newer Alternatively you could just fork solid-three and try to fix it 🤷‍♂️ I'm sure there are others that would appreciate it

DaOfficialWizard🧙•14mo ago

Yeah, I saw solid triangle, looks really nice but it's not built out enough for me yet. I need the full threejs API for the stuff that I am doing. Guess I'll just have to use vanilla threejs 😅

scottvorthmann•14mo ago

I've been trying solid-three, and I saw exactly that error. It indicates that you're rendering explicitly with solid-three rather than solid-js/web. When you call render() on your root, just use solid-js/web as you would normally. @nksaraf was kind enough to help me past that. I'm currently trying vanilla Three myself, since I'd rather avoid having a black-box between me and Three. I suspect solid-three is not that far from production-ready, and I'd be willing to contribute to getting it there, but without more access to @nksaraf it is too challenging for me. Perhaps we should try to collaborate, @daofficialwizard . We already have two things to contribute: 1. docs about what renderer to use 2. better error message when you get that wrong ...and I can add docs about using it with esbuild rather than Vite. @daofficialwizard @bigmistqke @davedbase @maxflowers @lightning3316 @whoisryosuke I have good news: @nksaraf has agreed to walk me through the solid-three code this Saturday at 10:30AM India time, which is 5AM UTC or 10PM Pacific (on Friday). If any of you are interested and able to join, respond here. (I found your names just by searching this server for solid-three, going back to last August or so.)

bigmistqke•14mo ago

Cooooooool

DaOfficialWizard🧙•14mo ago

Yeah, I did exactly that. That didn't change the error for me. So not sure if this is actually true or not. I never switched how my root how my was rendered. I am now using vanilla three and it's working fine. So I am happy.

DaOfficialWizard🧙•14mo ago

Would be nice to use JSX syntax ;). But vanilla three is fine. I found this - which works great. https://github.com/UstymUkhman/threejs-boilerplate

GitHub

GitHub - UstymUkhman/threejs-boilerplate: Three.js + TypeScript + S...

:fire: Three.js + TypeScript + SolidJS + Vite + Vitest :rocket: - GitHub - UstymUkhman/threejs-boilerplate: Three.js + TypeScript + SolidJS + Vite + Vitest

davedbase•14mo ago

That’s much too early for me but this is a really useful project. I’d be willing to sponsor effort for someone to take this on!

DaOfficialWizard🧙•14mo ago

I'd be open to collaboration 🙂 - i would need to become more familiar with the solid-three library though. It definitely is more enticing to use than vanilla ThreeJS - i just couldn't get it to function properly. i can't attend during those times - could you perhaps record it?

scottvorthmann•14mo ago

Yes, I'm planning to record and share. That sounds very helpful, thank you. I'll DM later to understand what form that would take.

davedbase•14mo ago

It could be a Github Sponsorship or an OC (which is more difficult to setup). I'd however like to see a proper roadmap for the effort, a more established trajectory and time estimate. 🙂

DaOfficialWizard🧙•14mo ago

could you share a snippet on how you fixed the error that started this post - i am spinning up a solid-three test project and i would like to play around with it.

scottvorthmann•14mo ago

I had this:

import { render } from 'solid-three';
...
render( App, document.getElementById( 'root' ) );

import { render } from 'solid-three';
...
render( App, document.getElementById( 'root' ) );

when I should have used

import { render } from 'solid-js/web';

import { render } from 'solid-js/web';

The solid-three renderer is not meant to be used to handle DOM... the fallback to DOM is implemented at compile time, so the correct renderer (dom or universal) call is compiled in for each JSX element transpiled.

DaOfficialWizard🧙•14mo ago

oh, yeah i have that already. Same issue still care to share a github repo? perhaps i've borked something else.

scottvorthmann•14mo ago

The other possibility is that your compilation is only creating calls to the universal renderer, but it seems you would not get far enough to render your Canvas in that case. My solid-three branch is not pushed yet, and I have to leave for work now. I'll share it this afternoon (Pacific time). It looks like the universal renderer is trying to add a DOM child to your Canvas.

DaOfficialWizard🧙•14mo ago

no time constraints 🙂 yeah, that's what i thought too, however the issue goes away when i remove any import of solid-three - any solid-three components cause the error. Which is strange.

scottvorthmann•14mo ago

OK, I've pushed my branch, as well as my changes to my fork of solid-three, which I'm pulling in locally for my app.
This fork is made from another fork by NikolaySuslov, who mostly updated some versions but may have also fixed a couple of bugs. If you try my vzome-shapes branch, you'll see the experiments I did with my own geometry. https://github.com/vorth/solid-three And here is the solid-three branch of my app repo. There's a lot there, and you can certainly ignore everything outside of online. Here is the main entry point for my Solid app. (There are other apps there you should ignore, they are not ported to Solid at all.) https://github.com/vorth/vzome/blob/solid-three/online/src/app/classic/index.jsx If you really want to run it, you'll need to adjust the package.json file reference to your local copy of solid-three. That probably has to be a clone of my fork above.

GitHub

GitHub - vorth/solid-three

Contribute to vorth/solid-three development by creating an account on GitHub.

GitHub

vzome/index.jsx at solid-three · vorth/vzome

Contribute to vorth/vzome development by creating an account on GitHub.

scottvorthmann•14mo ago

@davedbase is it possible to turn this thread into a channel under Ecosystem?

DaOfficialWizard🧙•14mo ago

Thanks, I'll take a look. 😎 Yeah, I was playing with NikolaySuslov's fork as well - that one is the same story for me. I clone, install deps, run Dev - error. So, clearly I am doing something wrong as I can't get the repos themselves to even work. Your fork of solid-three says it's just a fork of Nikolay's fork with no added changes - you sure you synched with your local repo?

davedbase•14mo ago

Sure! I’ll handle it in a bit

bigmistqke•14mo ago

mb the vzome-shapes branch

scottvorthmann•14mo ago

that's correct, my only changes were to the playground app and to the name in package.json, and those changes are on the vzome-shapes branch. Sorry I forgot to mention that.

DaOfficialWizard🧙•14mo ago

Yeah, I saw that. I had to clear my browser cache for some reason. My GitHub UI changed 😅 looks like GitHub just glitched out on me.

bigmistqke•14mo ago

good old cache btw won't be able to join for the zoom but definitely wanna be involved and contribute code (drei-port would be cool) and really happy u are taking initiative. looking forward to the recording w nikhil, I never really understood universal renderer tbh.

DaOfficialWizard🧙•14mo ago

drei-port would be awesome 🙂 So - update on my end. I was able to get the vzome-shapes branch to function. No errors, however when i integrate it into my project - new error this time. So, not exactly sure what i am doing wrong here.

DaOfficialWizard🧙•14mo ago

DaOfficialWizard🧙•14mo ago

For some reason, now my components are breaking. I can't use <h1> tags inside divs? What kind of nonsense is that? My vite.config.ts

import { resolve } from 'path'
import { DOMElements, SVGElements } from 'solid-js/web/dist/dev.cjs'
import { defineConfig } from 'vite'
import glsl from 'vite-plugin-glsl'
import solidPlugin from 'vite-plugin-solid'
export default defineConfig(async (mode) => ({
    assetsInclude: ['**/*.bin', '**/*.fbx', '**/*.glb', '**/*.gltf'],
    resolve: {
        conditions: ['development', 'browser'],
    },
    define: {
        DEBUG: mode.mode !== 'production' && false,
    },
    plugins: [
        solidPlugin({
            solid: {
                moduleName: 'solid-js/web',
                // @ts-ignore
                generate: 'dynamic',
                renderers: [
                    {
                        name: 'dom',
                        moduleName: 'solid-js/web',
                        elements: [...DOMElements.values(), ...SVGElements.values()],
                    },
                    {
                        name: 'universal',
                        moduleName: './src/utils/solid-three/src/renderer.tsx',
                        elements: [],
                    },
                ],
            },
        }),
        glsl({
            compress: mode.mode === 'production',
            root: '/src/shaders/',
        }),
    ],
    build: {
        target: 'esnext',
        sourcemap: true,
    },
    server: {
        port: 3000,
        host: true,
        strictPort: true,
        open: true,
    },
    base: './',
}))

import { resolve } from 'path'
import { DOMElements, SVGElements } from 'solid-js/web/dist/dev.cjs'
import { defineConfig } from 'vite'
import glsl from 'vite-plugin-glsl'
import solidPlugin from 'vite-plugin-solid'
export default defineConfig(async (mode) => ({
    assetsInclude: ['**/*.bin', '**/*.fbx', '**/*.glb', '**/*.gltf'],
    resolve: {
        conditions: ['development', 'browser'],
    },
    define: {
        DEBUG: mode.mode !== 'production' && false,
    },
    plugins: [
        solidPlugin({
            solid: {
                moduleName: 'solid-js/web',
                // @ts-ignore
                generate: 'dynamic',
                renderers: [
                    {
                        name: 'dom',
                        moduleName: 'solid-js/web',
                        elements: [...DOMElements.values(), ...SVGElements.values()],
                    },
                    {
                        name: 'universal',
                        moduleName: './src/utils/solid-three/src/renderer.tsx',
                        elements: [],
                    },
                ],
            },
        }),
        glsl({
            compress: mode.mode === 'production',
            root: '/src/shaders/',
        }),
    ],
    build: {
        target: 'esnext',
        sourcemap: true,
    },
    server: {
        port: 3000,
        host: true,
        strictPort: true,
        open: true,
    },
    base: './',
}))

scottvorthmann•14mo ago

That looks like a templated message coming from solid-three, which is trying to do things like attach a geometry to a mesh, and it is trying to work on DOM elements. Same problem as before, just a different manifestation. I think your compile is never matching the DOMElements condition, and always compiling to universal. Try to figure out how to attach a debugger to the compile step, or just hack some console.log() into the plugin. I tracked down the right line of code last week, let's see if I can remember how I did that. I'm assuming, here, that your actual root render() call is using solid-js/web... that was my initial error, if you recall.

DaOfficialWizard🧙•14mo ago

I do, and yes my actual root render is using the standard solid/web. I thought so too - but If I remove the moduleName for the renderer in vite config, same issue. So, it's vite itself failing to choose a proper renderer.

scottvorthmann•14mo ago

Here is where I put some log statements to see what was happening: https://github.com/ryansolid/dom-expressions/blob/21fdba5bcab25986a2b93003aaace100b2231cdc/packages/babel-plugin-jsx-dom-expressions/src/shared/transform.js#L167

GitHub

dom-expressions/transform.js at 21fdba5bcab25986a2b93003aaace100b22...

A Fine-Grained Runtime for Performant DOM Rendering - dom-expressions/transform.js at 21fdba5bcab25986a2b93003aaace100b2231cdc · ryansolid/dom-expressions

scottvorthmann•14mo ago

Vite is just calling the vite-solid-plugin, which is further using babel-preset-solid, which results in use of dom-expressions. My Zoom with @nksaraf should be starting in about 40 minutes. If you want to be added to our conversation (on Zoom), respond here. Really great session with @nksaraf ... Thank you! I have two Zoom recordings I'll need to upload somewhere to share, unless Discord will accept them...

scottvorthmann•14mo ago

part 1

scottvorthmann•14mo ago

part 2

scottvorthmann•14mo ago

I'll share some notes tomorrow, to summarize... too sleepy now.

bigmistqke•14mo ago

Nice! Looking forward to watching them!

davedbase•14mo ago

@scottvorthmann it looks like you've really taken this effort to the next level. I'd love to support your efforts in any way. First step would be to carve out an ecosystem channel and move this chat out of a thread. Also I'd welcome this project into Solid Community if that's of interest to you. I'd also love to Tweet about the project and encourage it in any way possible. Let me know when might be the right time to do that though!

scottvorthmann•14mo ago

Thanks @davedbase... that all sounds great, but I think it is a bit early to Tweet. This was just the first baby step. Let's get the other steps done first, and I'll get some notes and contributor docs captured.

davedbase•14mo ago

I'll setup the channel at least 🙂 I recommend moving the above videos to the new channel and I can pin them for you

scottvorthmann•14mo ago

looks like that means uploading them again, correct?

davedbase•14mo ago

Yep. This thread will get archived at some point I believe so best to download and upload I think

scottvorthmann•14mo ago

Say, I'm back to debugging my solid-three app, and so far my new knowledge is not helping. This seems to be an issue around reactivity w.r.t. the universal renderer... do you think you'd be able to help?

davedbase•14mo ago

I'm a bit swamped right now and there are others with a far deeper understanding of the reactivity model than me. I'd recommend putting your questions in the #solid-three channel or #support. 🙂

scottvorthmann•14mo ago

NP. Nikhil just responded, and he may help me tonight (his late morning)... Saturday evening for him right now! I'll try the channel, too

davedbase•14mo ago

I'd recommend moving as much of the chat into the new channel. It might help others out to see the interaction Esp. with you and Nikhil since you both are transferring a lot of knowledge

scottvorthmann•14mo ago

just copy-paste? I don't see any move option

davedbase•14mo ago

No no I mean have those chats in the channel 😉

scottvorthmann•14mo ago

oh, yes, of course

davedbase•14mo ago

Sorry not being super descriptive. When I launched Solid Primitives we kept all our convos in a private group chat and when we moved it into our dedicated channel we got a LOT more engagement. Just a suggestion 🙂

scottvorthmann•14mo ago

all for it!

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

11KMembers

View on Discord

Want results from more Discord servers?

Add your server

More Posts

Why is this onClick handler not called? (Playground code)https://playground.solidjs.com/anonymous/b2bfddd1-102a-4f7a-a6e3-5d22846695e4 In the following playg Resources and fetching state kindJust wondering is it okay to fetch with resource then use that to set state, for example on a store Derived value in event handler causing router errorError: Make sure your app is wrapped in a <Router /> when calling an eventhandler. Just trying to lo Efficient reactive rebuild of large derived objectA question about how best to use the reactive primitives for (re)building derived state. I don't thi My app breaks when there is any javascript error.I am aware of ErrorBoundary but my concern is why the whole app just crashes whenever there is any j how to use createResource in Astro SSRI’d like to use createResource in Astro. Right now I’m doing the data fetch in the Astro file and pa Reset signals when same component is navigated toIn my navbar each menu items navigates to the same location which in turn loads the same component: createStore causing warningI am using `createStore` for a lot of my app, to reduce prop drilling and make inter-component commu one of my dependencies is using "buffer"Now I can make it work in the browser?Array of refs - keeps extranuous values - need to reset/sliceHi. I have an array of refs I store in a signal like this. Refs are used in another component to s