Proposal: render as customElements mode #37

Shinyaigeek · 2021-10-13T06:30:41Z

Shinyaigeek
Oct 13, 2021

nanojsx is very small UI library, so I think this is also useful for making web-components. Actually, svelte provides customElement mode to build svelte component as web-components.

I know, svelte includes runtime and compiler, and nano-jsx does not have a compiler, so nano-jsx cannot provide a similar solution, so I propose another render function to render (define) nano-jsx components as web-components like below.

// example
import Nano from 'nano-jsx'

const HelloNano = (props) => <h1>Hello {props.name}!</h1>

Nano.defineAsCustomElement("hello-nano", HelloNano)

<body>
  <hello-nano name=“hoge” />
</body>

Maybe, Nano.defineAsCustomElement will be a simple wrapper for customElements.define and Nano.render, but this will be very useful.

I want to hear your opinion about this, and If you like it, I want to work on this.

yandeu · 2021-10-13T09:37:28Z

yandeu
Oct 13, 2021
Maintainer

I have never used web-compomemts before. What would be the advantage of web-components?

1 reply

Shinyaigeek Oct 13, 2021
Author

I feel some benefits for web-components like below,

you can use components independently of which UI library is used at the application level, such as React, Vue, or nano-jsx
ShadowDOM allows DOM manipulation and styling effects to be closed within web components
You don't need to use UI libraries such as React or Vue to use components, just load them with script tags in HTML to use components with encapsulated logic and UI, even if you are not familiar with the JS ecosystem

In the current status, we should use traditional procedural DOM manipulation to make web-components with vanilla js, this is very troublesome. svelte with customElements mode, and lit is a solution to make web-components with declarative DOM manipulation. nano-jsx is a very light library, so I feel nano-jsx can be also a good solution to make web-components with declarative DOM manipulation. Also, creating web-components with nano-jsx has the novelty of being able to create web-components with React-like APIs and JSX.

Shinyaigeek · 2021-10-14T06:00:04Z

Shinyaigeek
Oct 14, 2021
Author

I have done some simple prototyping of this, https://github.com/Shinyaigeek/nano/blob/feature/define-as-web-coponents-mode/src/customElementsMode.ts, and have actually run it. I've tried it.

https://github.com/Shinyaigeek/nano-jsx-web-components-prototyping

0 replies

yandeu · 2021-10-14T10:55:06Z

yandeu
Oct 14, 2021
Maintainer

Now that I see the code, it looks like it makes sense to add this.

But of course, the built-in UI elements should not be shipped as web components since they have to run isomorphic on node.js and deno.

But I feel it is a good idea to let users build reusable components for the web.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Proposal: render as customElements mode #37

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 3 comments 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Proposal: render as customElements mode #37

Uh oh!

Uh oh!

Shinyaigeek Oct 13, 2021

Replies: 3 comments · 1 reply

Uh oh!

yandeu Oct 13, 2021 Maintainer

Uh oh!

Shinyaigeek Oct 13, 2021 Author

Uh oh!

Shinyaigeek Oct 14, 2021 Author

Uh oh!

yandeu Oct 14, 2021 Maintainer

Shinyaigeek
Oct 13, 2021

Replies: 3 comments 1 reply

yandeu
Oct 13, 2021
Maintainer

Shinyaigeek Oct 13, 2021
Author

Shinyaigeek
Oct 14, 2021
Author

yandeu
Oct 14, 2021
Maintainer