SolidJS•2y ago

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

Ye universal renderer is a bit finicky to get working... what are u trying to make a renderer for?

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

I did go through some of the conversations there, and it looks exciting

Gaming

Programming

Universal renderer createElement isn't running