Welcome to Atomico Discussions! #45

UpperCod · 2021-04-03T20:10:38Z

UpperCod
Apr 3, 2021
Maintainer

👋 Welcome Atomico!

We’re using Discussions as a place to connect with other members of our community. We hope that you:

Ask questions you’re wondering about.
Share ideas.
Engage with other community members.
Welcome others and are open-minded. Remember that this is a community we
build together 💪.

ghost · 2021-06-12T13:02:59Z

ghost
Jun 12, 2021

Hi,

I'm trying to make atomicojs to prerender the web component.
But its seems to render the web component content twice.
What would be the easiest way to make sure atomicojs doesn't render twice does adding id's help?

Ex:
https://codesandbox.io/s/sparkling-waterfall-fql9v?file=/index.html:0-746

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <body>
    <my-component name="123">
      <div>
        Name: 123
      </div>
    </my-component>
    <script type="module">
      import { c, html } from "https://unpkg.com/atomico"; // 4.0kB
      function component({ name }) {
        return html`<host>
          <div>
            Name: ${name}
          </div>
        </host>`;
      }
      component.props = {
        name: String
      };
      customElements.define("my-component", c(component));
    </script>
  </body>
</html>

Btw atomicojs is awesome was previously using haunted + lit-html for my project.
Also is it possible to not use virtual dom and just do direct dom replacement like this library https://github.com/forgojs/forgo?

9 replies

UpperCod Jun 27, 2021
Maintainer Author

Sorry for the delay in my answer, I have already added support for symbolId inheritance.

ghost Jun 27, 2021

Thanks UpperCod. For now I have gone with a slightly modified version of lit-html even though it doesn't have rehydration as it renders on top of the existing dom tree and that solved my problem for now. It also doesn't use a vdom which was one of my main interests.

UpperCod Jul 1, 2021
Maintainer Author

I understand that you use a different tool, but I just finished supporting SSR and DOM hydration for Atomico I invite you to try this feature to see if it is useful to you

Example: For this you just have to add the attribute data-hydrate to the component that you want to hydrate.

<my-component name="123" data-hydrate><div>Name: 123</div></my-component>

https://codesandbox.io/s/atomico-hydrate-lwqtv

UpperCod Jul 1, 2021
Maintainer Author

I apologize for having announced it in advance SSR, I am still working on the support of this feature, I need to work on a functional example to share that utility, regarding hydration this api is stable, so it will not have variations.

ghost Jul 2, 2021

Thanks. I will look into it and see if it helps.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Welcome to Atomico Discussions! #45

{{title}}

Replies: 1 comment 9 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

Welcome to Atomico Discussions! #45

UpperCod Apr 3, 2021 Maintainer

👋 Welcome Atomico!

Replies: 1 comment · 9 replies

ghost Jun 12, 2021

UpperCod Jun 27, 2021 Maintainer Author

ghost Jun 27, 2021

UpperCod Jul 1, 2021 Maintainer Author

UpperCod Jul 1, 2021 Maintainer Author

ghost Jul 2, 2021

UpperCod
Apr 3, 2021
Maintainer

Replies: 1 comment 9 replies

ghost
Jun 12, 2021

UpperCod Jun 27, 2021
Maintainer Author

UpperCod Jul 1, 2021
Maintainer Author

UpperCod Jul 1, 2021
Maintainer Author