Topics

SolidJS•2y 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🧙OP•2y 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•2y 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•2y 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🧙OP•2y 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•2y 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•2y ago

Cooooooool

DaOfficialWizard🧙OP•2y 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🧙OP•2y 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•2y 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🧙OP•2y 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•2y 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•2y 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🧙OP•2y 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•2y 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🧙OP•2y ago

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

scottvorthmann•2y 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🧙OP•2y 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•2y 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•2y ago

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

DaOfficialWizard🧙OP•2y 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•2y ago

Sure! I’ll handle it in a bit

bigmistqke•2y ago

mb the vzome-shapes branch

scottvorthmann•2y 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🧙OP•2y 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•2y 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🧙OP•2y 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🧙OP•2y ago

DaOfficialWizard🧙OP•2y 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•2y 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🧙OP•2y 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•2y 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•2y 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•2y ago

part 1

scottvorthmann•2y ago

part 2

scottvorthmann•2y ago

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

bigmistqke•2y ago

Nice! Looking forward to watching them!

davedbase•2y 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•2y 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•2y 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•2y ago

looks like that means uploading them again, correct?

davedbase•2y ago

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

scottvorthmann•2y 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•2y 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•2y 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•2y 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•2y ago

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

davedbase•2y ago

No no I mean have those chats in the channel 😉

scottvorthmann•2y ago

oh, yes, of course

davedbase•2y 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•2y ago

all for it!

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

12KMembers

View on Discord

Want results from more Discord servers?

Add your server