Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Aug 02 03:11
    pakastin closed #446
  • Aug 02 03:11
    pakastin commented #446
  • Aug 01 20:43
    TroyMcl opened #446
  • Jul 21 05:23
    dependabot[bot] labeled #445
  • Jul 21 05:23
    dependabot[bot] review_requested #445
  • Jul 21 05:23
    dependabot[bot] opened #445
  • Jul 21 05:23

    dependabot[bot] on npm_and_yarn

    Bump terser from 5.14.0 to 5.14… (compare)

  • Jun 22 20:34
    dependabot[bot] labeled #444
  • Jun 22 20:34
    dependabot[bot] review_requested #444
  • Jun 22 20:34
    dependabot[bot] opened #444
  • Jun 22 20:34

    dependabot[bot] on npm_and_yarn

    Bump shell-quote from 1.7.2 to … (compare)

  • Jun 07 10:32

    pakastin on gh-pages

    Updates (compare)

  • Jun 07 10:32

    pakastin on master

    3.29.0 (compare)

  • Jun 07 10:32

    pakastin on v3.29.0

    3.29.0 (compare)

  • Jun 07 10:31

    pakastin on master

    Don't use DOM memoization (compare)

  • May 31 12:58
    pakastin commented #339
  • May 31 11:57
    aarongeorge commented #339
  • May 31 11:53
    pakastin commented #339
  • May 31 11:43
    aarongeorge commented #339
  • May 31 11:22
    pakastin commented #339
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 :)
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
I used to use native DOM events, that was also good
Components have constructor and update methods, so that you can efficiently update the state, usually even no diffing needed, since browser keeps care of that