S
SolidJS•2y ago
lvl_up

Universal renderer createElement isn't running

I'm working on a custom renderer and I can't get the createElement function to run. I'm not sure if I missed some configuration or I'm misunderstanding. I have an example I'm going off for a basic custom renderer which calls createElement as expected, but in my version and a separate sandbox I'm not getting the expected log. https://codesandbox.io/p/sandbox/awesome-firefly-huojci?file=%2Fsrc%2FApp.tsx%3A16%2C25
awesome-firefly-huojci
CodeSandbox is an online editor tailored for web applications.
7 Replies
lvl_up
lvl_up•2y ago
It looks like it might have to do with a missing babel preset configuration. It's mentioned on the universal readme that it's need. I'll see if I can look more into that. https://github.com/solidjs/solid/tree/main/packages/solid/universal
GitHub
solid/packages/solid/universal at main · solidjs/solid
A declarative, efficient, and flexible JavaScript library for building user interfaces. - solid/packages/solid/universal at main · solidjs/solid
lvl_up
lvl_up•2y ago
All that is being called in my sandbox is the insertNode function on the first div in the <App /> component. I was able to get it working eventually. I needed to set a renderer in the solidPlugin config.
export default defineConfig({
plugins: [
solidPlugin({
solid: {
generate: "universal",
renderers: [
{
name: "universal",
moduleName: "./renderer",
elements: [],
},
],
},
}),
],
server: {
port: 3000,
},
build: {
target: "esnext",
},
});
export default defineConfig({
plugins: [
solidPlugin({
solid: {
generate: "universal",
renderers: [
{
name: "universal",
moduleName: "./renderer",
elements: [],
},
],
},
}),
],
server: {
port: 3000,
},
build: {
target: "esnext",
},
});
My only issue now, is that typescript is throwing an error on the renderers option. The error says it's not a known property.
bigmistqke
bigmistqke•2y ago
Ye universal renderer is a bit finicky to get working... what are u trying to make a renderer for?
bigmistqke
bigmistqke•2y ago
If the order of the children isn't important u can most likely get away with components (that do not return dom-elements) and context to add children to parents (see p.ex https://playground.solidjs.com/anonymous/f5d725d4-f187-4138-ac76-3f537b0f616e). If order of children is important, there is solid-primitives/jsx-tokenizer that u can use too. It allows u to return non-DOM elements and to read them from the parents (p.ex used in https://github.com/bigmistqke/solid-triangle).
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
lvl_up
lvl_up•2y ago
POCs for a custom renderer for Matter/Pixi mainly for learning purposes. I'lll take a look at the example you linked as well. Thanks for taking a look!
bigmistqke
bigmistqke•2y ago
nice 😊 wanted to do a pixi-renderer someday too. lmk how it went + we r making a three-renderer at https://discord.com/channels/722131463138705510/1101885290899054662 matter looks fun!
lvl_up
lvl_up•2y ago
I did go through some of the conversations there, and it looks exciting
Want results from more Discord servers?
Add your server