redom/redom

RE:DOM – Tiny turboboosted JavaScript library for creating user interfaces

Juha Lindstedt

@pakastin

Oh sorry, actually that only works in my future test branch..sorry I remembered I already added that update

I mean middleware works, however it doesn’t use the returned elements/options/text as further arguments

Tomer Igal

@tomerigal

But what about components?
Example:
RE:DOM today:

class Lightbox{
  constructor(props, ...childs){
    const style = Object.assign({color:"red"}, props.style || {});

    this.el = el("div.lightbox", {style}, childs);
  }
}

const app = () => {
  return el("div",
            new Lightbox({ style:{color:"green"} },
                         el("h2", "Lightbox h1")
                        )
         )
}

mount(document.body, app());

With el:

class Lightbox{
  constructor(props, ...childs){
    const style = Object.assign({color:"red"}, props.style || {});

    this.el = el("div.lightbox", {style}, childs);
  }
}

const app = () => {
  return el("div",
            /* new Lightbox... */ el(Lightbox, { style:{color: "green"} }, 
                el("h2", "Lightbox h1")
             )
         )
}

mount(document.body, app());

And it will give better support with the JSX transformer

Juha Lindstedt

@pakastin

I recall FRZR used to support that. I think I can add it back..

Mikko Ahlroth

@Nicd

when creating an el, I can do this: el('li', ['Some text', var, 'more text'])

can I change that dynamically? I tried with setChildren and it exploded due to call stack size exceeded

Mikko Ahlroth

@Nicd

I worked around it for now by constructing the whole element again: unmount(parent, elem); elem = el('li', this._getChildElems()); mount(parent, elem);

because if I did setChildren(elem, this.getChildElems()); it recursed forever and died

Juha Lindstedt

@pakastin

I don't quite get what do you mean?

you can also do el('li', 'Some text', var, 'more text') btw.. ;)

setChildren only allows Nodes or components as children, not Strings..

What are you trying to do?

you can do for example setChildren(elem, ['some text', var, 'more text'].map(text))..

import { text } from 'redom' I mean..

Juha Lindstedt

@pakastin

import { text } from 'redom';
...
setChildren(elem, ['some text', var, 'more text'].map(text));

Mikko Ahlroth

@Nicd

well my point was that I had to change a text that had dynamic content inside it

so I made my element with el('li', this._getChildElems()) and the child elems function returned a dynamic list of strings and elements. like ['Some text', el(...), 'some more text']

and that worked with the el but not setChildren, but I will use that text function :)

Mikko Ahlroth

@Nicd

aaand simplified: https://gitlab.com/code-stats/code-stats/compare/ac150fba720ef5b62c857efe2d3f79b1635a4765...74fb1fa448ba3bdb80d5072e1c5ced2802abdf45 :)

thanks!

Juha Lindstedt

@pakastin

👍

yeah, setChildren and mount are helpers for appendChild/insertBefore, so they need Node / component..

el is a bit different, since it's document.createElement helper..

Juha Lindstedt

@pakastin

you could also do a list of <span> components..

however it's quite fast to just use text nodes and setChildren as well..

Mikko Ahlroth

@Nicd

I know I can give list elements context in the list update, but can I give context right at the start so it goes in the constructor?

Juha Lindstedt

@pakastin

Yup!

Mikko Ahlroth

@Nicd

like: this.topLangList = list('div', CombinedLevelProgressComponent); -- can I give CombinedLevelProgressComponent constructor arguments that are given to each item?

Juha Lindstedt

@pakastin

list(View, key, initData)

Mikko Ahlroth

@Nicd

ah, obviously

Juha Lindstedt

@pakastin

new View(initData, item) 😉

Mikko Ahlroth

@Nicd

like list('div', new View({data}, CombinedLevelProgressComponent));?

Mikko Ahlroth

@Nicd

https://files.gitter.im/code-stats/Lobby/aBOs/Screen-Shot-2018-02-19-at-22.43.23.png -- first working thingie on profile page, live updates, made with RE:DOM :)

lots more to come

thanks again for the quick help!

Juha Lindstedt

@pakastin

No worries! 😉

Mikko Ahlroth

@Nicd

can a RE:DOM component return two DOM elements without nesting them inside a wrapper? :P I guess not

MrSorcus

@MrSorcus

can a RE:DOM component return two DOM elements without nesting them inside a wrapper? :P I guess not

redom/redom#93 - Did you read this?

Mikko Ahlroth

@Nicd

cool, not directly related though. I just refactored my code and then noticed CSS Grid doesn't work like I wanted it to

so in the end I don't need the feature anyway :P

I thought I could hide DOM elements with CSS Grid template-areas, but it doesn't work that way

Juha Lindstedt

@pakastin

I've thought about that (multiple elements inside this.el), but let's see..

nawfalhasan

@nawfalhasan

I am totally new to web development. Was doing some basic internet research on js frameworks to choose from. It's a hobby project, so I can expermint. Have a question on redom

Is it suitable for SPA? Redom looks pretty basic view library and I am not sure if it gives my application an architecture. Also, what about routing, state management etc in redom?

Juha Lindstedt

@pakastin

I’ve used RE:DOM to create the whole iDiD digital signage system (idid.fi, idid2.fi), which is single page application

So yeah, it’s very well suited for that purpose as well 🙂

I use it so that I build component hierarchy, where I pass api along. Then I use that to trigger updates to the state.

I also have a requestAnimationFrame throttle, but that’s not required

But you can use whatever state management you like

Where communities thrive

People

Repo info

Activity