Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

working with Components

See original GitHub issue

Hi, sorry for another question in short period of time,

but how can we implement the concept of components correctly with set-dom? what i mean is that let us take the below example

<div id="wrapper">
    <h1>header</h1>
    <component-parent>
        <div>dynamic text</div>
        <component-child-a></component-child-a>
        <component-child-b></component-child-b>
    </component-parent>
</div>

now if dynamic text change, it is no issue, but as you would expect the above component-child-a and component-child-b HTML is just placeholder, when we parse the tags above we replace them with dynamic component’s content ( same like react or any other framework), so let us say they will become as below

<div id="wrapper">
    <h1>header</h1>
    <component-parent>
        <div>dynamic text</div>
        <component-child-a>
            <h1>component content after parsing</h1>
        </component-child-a>
        <component-child-b>
            <component-child-c>component content after parsing</component-child-c>
        </component-child-b>
    </component-parent>
</div>

this problem now is that say we want to change <div>dynamic text</div> on parent component to <div>new dynamic text</div> if we diff again, component-child-a and component-child-b will loose their dynamic injected content. the same would happen if we click a button to inject component dynamically.

the point is that how to avoid that in your experience ?

should set-dom have some option to ignore diffing elements if they start with a tag name, attribute in ignore list somewhere, ? or set-dom already has solution for that ?

the other issue is that how to handle relationship between parent and child components from timing point of view, in simple words how do we guarantee if parent component had attached hook, and there is some code to communicate with child component or vice versa, both of them are available?

i am talking the same as React components and child components and passing params to them.

thanks again in advanced 😃

Issue Analytics

State:
Created 7 years ago
Comments:10 (5 by maintainers)

Top GitHub Comments

1reaction

DylanPierceycommented, Sep 13, 2016

Since set-dom works with strings I just use functions that return strings as my components.

For example with as-html.

index.js

import html from 'as-html'
import setDOM from 'set-dom'

import componentA from './a'
import componentB from './b'

setDOM(document, `
    <html>
        <head>...</head>
        <body>
            <div id="container">
                !${componentA(null, ['world'])}
                !${componentB({ message: 'world' })}
            </div>
        </body>
    </html>
`)

a.js

import html from 'as-html'

export default function componentA (props = {}, children = []) {
    return html`
        <h1>Hello !${children.join('')}</h1>
    `
}

b.js

import html from 'as-html'

export default function componentB (props = {}, children = []) {
    return html`
        <h1>Hello !${props.message}</h1>
    `
}

Does that make sense?

0reactions

devmondocommented, Oct 7, 2016

@DylanPiercey thank you very much man this is awesome!

Top Results From Across the Web

Working with components - 8.0 - Talend Help Center

Talend Open Studio User Guide · What is Talend Studio? · Launching Talend Studio · Configuring Talend Studio · Installing external modules ·...

Working with components

You can rename objects, create, modify, replace, and delete objects, as well as work with components. are contained within a top-level design component...

Working with Components in SketchUp

The organization of components in a SketchUp model greatly affects the speed at which your design and modeling work can progress.

Working with Components - InVision Support

Working with Components. When you create a component, selected layers will be converted into a single, reusable layer and added to your document...

Work with components - Adobe Support

Learn how to work with Components across design systems. ... The first time you create a Component in XD, it becomes a Main...