Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

RE:DOM – Tiny DOM library

redom.js.org

Post reply on HN
Print view View original

1–10 of 84 posts

Re: RE:DOM – Tiny DOM library

#3

Post by tjallingt »

I've never seen this before:

    children(el => [
      el.email = input(props({ type: 'email' })),
      el.pass = input(props({ type: 'pass' })),
      el.submit = button(text('Sign in'))
    ])
Can someone explains what this does and why it is used here? As i understand it this function both modifies the `el` object (whatever that is) and returns an array containing the input elements, but why would you want to do both those things at the same time?

Re: RE:DOM – Tiny DOM library

#4

Post by troym »

tjallingt wrote: post #3

I've never seen this before: children(el => [ el.email = input(props({ type: 'email' })), el.pass = input(props({ type: 'pass' })), el.submit = button(text('Sign in')) ]) Can someone explains what this does and why it is used here? As i understand it this function both modifies the `el` object (whatever that is) and returns an array containing the input elements, but why would you want to do both those things at the…

I'd assume it's argument chaining, e.g.:

> find('elements').clear('contents').add('border')

Re: RE:DOM – Tiny DOM library

#5

Post by lexicality »

tjallingt wrote: post #3

I've never seen this before: children(el => [ el.email = input(props({ type: 'email' })), el.pass = input(props({ type: 'pass' })), el.submit = button(text('Sign in')) ]) Can someone explains what this does and why it is used here? As i understand it this function both modifies the `el` object (whatever that is) and returns an array containing the input elements, but why would you want to do both those things at the…

    children(function(el) {
      var a, b, c;
      a = input(props({ type: 'email' }));
      el.email = a;
      // etc
      return [a, b, c];
    })
Entirely guesswork but: El is the form element you're defining children on. You need to provide references to the elements you're creating so that you can use them later (el.email and friends) but you also need to return them to the children function in an ordered manner so that it can actually attach them into the DOM.

Re: RE:DOM – Tiny DOM library

#6

Post by elcct »

troym wrote: post #4
tjallingt wrote: post #3

I've never seen this before: children(el => [ el.email = input(props({ type: 'email' })), el.pass = input(props({ type: 'pass' })), el.submit = button(text('Sign in')) ]) Can someone explains what this does and why it is used here? As i understand it this function both modifies the `el` object (whatever that is) and returns an array containing the input elements, but why would you want to do both those things at the…

I'd assume it's argument chaining, e.g.: > find('elements').clear('contents').add('border')

somehow that reminds me of delete('facebook').lawyer('up').hit('thegym') ;)

Re: RE:DOM – Tiny DOM library

#7

Post by tjallingt »

lexicality wrote: post #5
tjallingt wrote: post #3

I've never seen this before: children(el => [ el.email = input(props({ type: 'email' })), el.pass = input(props({ type: 'pass' })), el.submit = button(text('Sign in')) ]) Can someone explains what this does and why it is used here? As i understand it this function both modifies the `el` object (whatever that is) and returns an array containing the input elements, but why would you want to do both those things at the…

children(function(el) { var a, b, c; a = input(props({ type: 'email' })); el.email = a; // etc return [a, b, c]; }) Entirely guesswork but: El is the form element you're defining children on. You need to provide references to the elements you're creating so that you can use them later (el.email and friends) but you also need to return them to the children function in an ordered manner so that it can actually attach t…

Aah of course; By reading the source code of the children function I figured the array of elements returned was appended to the parent element. The strange thing was that it was also adding them to `el` object but indeed it appears this is done to maintain a reference to the children so they can be modified later (which I would have seen had i read the example a bit more carefully :S )

I'm still not sure how I feel about that bit of code though but it sure is clever...

Re: RE:DOM – Tiny DOM library

#8

Post by chrismorgan »

tjallingt wrote: post #3

I've never seen this before: children(el => [ el.email = input(props({ type: 'email' })), el.pass = input(props({ type: 'pass' })), el.submit = button(text('Sign in')) ]) Can someone explains what this does and why it is used here? As i understand it this function both modifies the `el` object (whatever that is) and returns an array containing the input elements, but why would you want to do both those things at the…

Here’s what I believe will be an accurate translation of that example to the normal DOM API (without having actually looked at the RE:DOM source code):

    const login = document.createElement('form');
    
    login.email = document.createElement('input');
    login.email.type = 'email';
    
    login.pass = document.createElement('input');
    login.pass.type = 'pass';
    
    login.submit = document.createElement('button');
    login.submit.textContent = 'Sign in';
    
    login.appendChild(login.email);
    login.appendChild(login.pass);
    login.appendChild(login.submit);
    
    login.onsubmit = function(event) {
        event.preventDefault();
        console.log(this.email.value, this.pass.value);
    };
    
    document.body.appendChild(login);
The children call produces an array of objects that are appended to the element, but the callback also takes the wrapping element (in this case `login`), and so to be conveniently able to access it later (`login.email.value`) it also assigns them there. A more conventional JavaScript approach would be to assign email, pass and submit as local variables rather than stuffing them inside the form object.

As for the other example:

    const app = document.createElement('table');
    const tbody = document.createElement('tbody');

    app.appendChild(tbody);

    app.update = function(data) {
        tbody.innerHTML = '';
        for (let row in data.tbody) {
            let tr = document.createElement('tr');
            for (let cell in row) {
                let td = document.createElement('td');
                td.textContent = cell;
                tr.appendChild(td);
            }
            tbody.appendChild(tr);
        }
    }

    document.body.appendChild(app);

    app.update({
        tbody: [
            [1, 2, 3],
        ],
    });
This is rather simpler, frankly. I prefer plain DOM for myself at this level.

Re: RE:DOM – Tiny DOM library

#10

Post by tjallingt »

chrismorgan wrote: post #8
tjallingt wrote: post #3

I've never seen this before: children(el => [ el.email = input(props({ type: 'email' })), el.pass = input(props({ type: 'pass' })), el.submit = button(text('Sign in')) ]) Can someone explains what this does and why it is used here? As i understand it this function both modifies the `el` object (whatever that is) and returns an array containing the input elements, but why would you want to do both those things at the…

Here’s what I believe will be an accurate translation of that example to the normal DOM API (without having actually looked at the RE:DOM source code): const login = document.createElement('form'); login.email = document.createElement('input'); login.email.type = 'email'; login.pass = document.createElement('input'); login.pass.type = 'pass'; login.submit = document.createElement('button'); login.submit.textContent =…

That is a great explanation and after looking at the source code and reading the example more closely that is indeed what appears to happen. I do think that, albeit very clever, it's a confusing pattern though...
Post reply on HN