Most basic setup documentation?

Open ogrotten opened this issue 4 years ago • 1 comments

I'm looking at https://github.com/krakenjs/zoid/blob/master/docs/example.md

The top codeblock referring to MyLoginComponent, where exactly does that codeblock go?

Further, is there an extremely simplified example available?

the minimum required for making a component available (just showing some text)
the minimum required to embed the component to an html page

Feb 18 '21 00:02 ogrotten

The codeblock referring to MyLoginComponent usually goes in a js file and the url property is referring to the html that you want to embed in the parent page (the Iframe or Popup).

Basic example:

zoidComponent.js:

var MyBasicComponent = zoid.create({
    tag: 'my-basic-component',
    url: new URL('child.html', window.location.href).href
});

parent.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/zoid/9.0.63/zoid.min.js"></script>
    <script src="./zoidComponent.js"></script>
    <title>Parent Page</title>
</head>
<body>
    <main>
        <h1>Parent Page</h1>
        <p>Bellow the IFrame from zoid will be rendered</p>
        <section id="parent-container"></section>
    </main>
</body>
<script>
    MyBasicComponent({
        messageToDisplay: "Hello From Parent",
        onClickHandler: function() {
            console.log("This was triggered from parent")
        }
    }).render('#parent-container');
</script>
</html>

child.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/zoid/9.0.63/zoid.min.js"></script>
    <script src="./zoidComponent.js"></script>
    <title>Child iframe</title>
</head>
<body>
    <input type="text" id="message-box">
    <button id="button-console">Open Console</button>
</body>
<script>
    if (window.xprops.messageToDisplay) {
        document.querySelector('#message-box').value = window.xprops.messageToDisplay;
    }

    document.querySelector('#button-console').addEventListener('click', () => {
        window.xprops.onClickHandler()
    })
</script>
</html>

You can see it running: https://codepen.io/r-vasquez/project/full/AnLRmm Or github: https://github.com/r-vasquez/zoid-basic-examples/tree/main/example-html-js

In the demo repository you can see more examples like this: https://github.com/krakenjs/zoid/tree/master/demo/basic

Mar 31 '21 22:03 r-vasquez