lukejacksonn / ijk

Transforms arrays into virtual dom trees; a terse alternative to JSX and h
MIT License
467 stars 17 forks source link

Can I have a text node and another element as children/siblings...? #11

Closed slacktracer closed 6 years ago

slacktracer commented 6 years ago

I mean, I thought I could this:

[
  'main',
  [
    [
      'label',
      [
        'examiners',
        [
          'input',
          {
            checked: state.section === 'examiners',
            name: 'section',
            onclick: () => actions.changeSection('examiners'),
            type: 'radio'
          }
        ]
      ]
    ]
]

But it does not work. Should it be possible? Am I missing something?

lukejacksonn commented 6 years ago

I think you are missing some square brackets.. you can't have nodes as direct children. All children have to be in an array unless they are textual.

For example this is allowed:

['h1', 'Hello World']

But this is not:

['div', ['h1', 'Hello World']]

You would have to write that like this:

['div', [
  ['h1', 'Hello World']
]]
slacktracer commented 6 years ago

You mean I can have this:

['div', [
  ['h1', 'Hello World'],
  'some other text here'
]]

Like:

<div>
  <h1>Hello World</h1>
  some other text here
</div>

One child is an element and the other is a simple text node... 🤔

Update - I tested it, but I got this (inspecting on Chrome):

<div><h1>Hello World</h1><s>o</s></div>
lukejacksonn commented 6 years ago

Ahh I see what you are saying now. Humm, yes that does seem like a bug! Have you made an attempt to fix it at all? I will have a look at it now.

lukejacksonn commented 6 years ago

@slacktracer you can now! Hope that helps. Let me know how you get on 👍

slacktracer commented 6 years ago

@lukejacksonn

Hey, hi. Sorry! I did not have the time to look into a possible solution. I had to stay away from my current project for a few days. I will see the commit now to have a better understand of what was the problem so I can, perhaps, help in the future with some other issue. Thank you very much. =)

lukejacksonn commented 6 years ago

No worries, it took me a while to get back to you anyway as I was ill that week. The cost of this implementation was an extra check for typeof node === 'string' which is not the end of the world and makes for better parity with how hyperapp and preact behave anyway, which I think is a good thing. So thank you 🙇