SolidJS•7mo ago

Return non DOM element as component with hyper dom expressions

I'd like to create a declarative api that uses components that are not part of the DOM tree. Sort of like this Canvas API:

function Example(props) {
  return h(Canvas,
    h(Bezier,{points:[]}
  )
}

function Example(props) {
  return h(Canvas,
    h(Bezier,{points:[]}
  )
}

I'm just not sure how to implement to Bezier so it can also receive events.

4 Replies

bigmistqke•7mo ago

i played around with this idea at https://github.com/bigmistqke/solid-canvas

GitHub

GitHub - bigmistqke/solid-canvas: (WIP) 🎨 A Canvas API-wrapper for ...

(WIP) 🎨 A Canvas API-wrapper for solidjs ⚡ by solid and @solid-primitives/jsx-tokenizer - bigmistqke/solid-canvas

bigmistqke•7mo ago

I'm just not sure how to implement to Bezier so it can also receive events.

not sure what u mean with this question

FjordWardenOP•7mo ago

Ok, very cool. I've been studying your implementation and it has been a great help. It is one of those things I wonder how you could figure this out without an example. The name jsx-tokenizer is probably not the most descriptive either. I don't actually want to make a canvas api this was just the easiest way to describe the problem by analogy. At any rate thx for your help.

bigmistqke•7mo ago

Lol ye sorry for that name, that's my bad. These days i don't use that package anymore but just do return whatever as unknown as JSX.Element and then read from the children() from the parent. This is what I am doing in solid-three for example, and is also what is done in official packages like solid-router.

Gaming

Programming

Return non DOM element as component with hyper dom expressions