LOEFD

League of Extraordinary FoundryVTT Developers

package-ideas

Join Server

jsx

Ccalego

9/3/2021

Dammit I want this...

UUUnknown User

9/3/2021

Message Not Public

Ccalego

9/3/2021

1.5 hours before work I can at least see how crazy this is

UUUnknown User

9/3/2021

3 Messages Not Public

Ccalego

9/3/2021

right! "all jsx is" is a render engine just like handlebars.

Ccalego

9/3/2021

https://nanojsx.github.io/

Ccalego

9/3/2021

mmm... is this what i'm looking for?

Ccalego

9/3/2021

https://github.com/loreanvictor/render-jsx

Ccalego

9/3/2021

this maybe

UUUnknown User

9/3/2021

2 Messages Not Public

Ccalego

9/3/2021

I'd look to provide a replacement for "renderTemplate"

Ccalego

9/3/2021

or maybe not a replacement

Ccalego

9/3/2021

but like "renderJsx" and then some way to extend Application with ApplicationJSX yeah

UUUnknown User

9/3/2021

Message Not Public

Ccalego

9/3/2021

is React's JSX really baked in? they don't have a library for this??

UUUnknown User

9/3/2021

3 Messages Not Public

Ccalego

9/3/2021

link me, i'm failing to find react-jsx

UUUnknown User

9/3/2021

3 Messages Not Public

Ccalego

9/3/2021

oh what's preact

Ccalego

9/3/2021

and is that the answer to all our woes?

UUUnknown User

9/3/2021

Message Not Public

Ccalego

9/3/2021

oh standard JSX is ... transpiled into hyperscript?

Ccalego

9/3/2021

wtf

Ccalego

9/3/2021

ugh

UUUnknown User

9/3/2021

3 Messages Not Public

Ccalego

9/3/2021

alright we tryin nanoJSX

UUUnknown User

9/3/2021

2 Messages Not Public

Ccalego

9/3/2021

https://jasonformat.com/wtf-is-jsx/

Ccalego

9/3/2021

https://github.com/hyperhype/hyperscript

Ccalego

9/3/2021

I might vomit

UUUnknown User

9/3/2021

Message Not Public

Ccalego

9/3/2021

var h = require('hyperscript')
h('div#page',
  h('div#header',
    h('h1.classy', 'h', { style: {'background-color': '#22f'} })),
  h('div#menu', { style: {'background-color': '#2f2'} },
    h('ul',
      h('li', 'one'),
      h('li', 'two'),
      h('li', 'three'))),
    h('h2', 'content title',  { style: {'background-color': '#f22'} }),
    h('p',
      "so it's just like a templating engine,\n",
      "but easy to use inline with javascript\n"),
    h('p',
      "the intention is for this to be used to create\n",
      "reusable, interactive html widgets. "))

UUUnknown User

9/3/2021

Message Not Public

Ccalego

9/3/2021

yes

UUUnknown User

9/3/2021

Message Not Public

Ccalego

9/3/2021

very yes

UUUnknown User

9/3/2021

3 Messages Not Public

Ccalego

9/3/2021

was nano the lib you remember seeing?

UUUnknown User

9/3/2021

Message Not Public

Ccalego

9/3/2021

but hyperscript doesn't do jsx out of the box does it?

UUUnknown User

9/3/2021

Message Not Public

Ccalego

9/3/2021

gotchya, and that's what I want to avoid

UUUnknown User

9/3/2021

2 Messages Not Public

Ccalego

9/3/2021

https://github.com/loreanvictor/render-jsx
Another option, looks lighter than nano

UUUnknown User

9/3/2021

Message Not Public

Ccalego

9/3/2021

correct

UUUnknown User

9/3/2021

4 Messages Not Public

Ccalego

9/3/2021

the build step feels extra, this 'should' be as simple as "take string of jsx, parse on the fly, render" ala handlebars

Ccalego

9/3/2021

like surely someone has a library for that

UUUnknown User

9/3/2021

3 Messages Not Public

Ccalego

9/3/2021

right, 'string of jsx' probably not the right words

UUUnknown User

9/3/2021

4 Messages Not Public

Ccalego

9/3/2021

aaaaahhhhhhh

Ccalego

9/3/2021

(╯°□°）╯︵ ┻━┻

UUUnknown User

9/3/2021

3 Messages Not Public

Ccalego

9/3/2021

lol i just found this

UUUnknown User

9/3/2021

2 Messages Not Public

Ccalego

9/3/2021

basically es template string things

UUUnknown User

9/3/2021

Message Not Public

Ccalego

9/3/2021

Proof of concept, this worked great

Ccalego

9/3/2021

ironically

Ccalego

9/3/2021

it needs a build step to bundle in the npm module

Ccalego

9/3/2021

Ccalego

9/3/2021

So I think next step here would be to make a library module

Ccalego

9/3/2021

make some utilities like JsxApplication, renderJsx, etc. to wrap this

Ccalego

9/3/2021

to the

UUUnknown User

9/3/2021

3 Messages Not Public