React dependency

What:

Is it possible to remove the react dependency? Meaning are you using features that are specific to React to achieve this (by curiosity which?)? I wonder if this could be packaged in a web component, leveraging the native slot mechanism.

Why:

This would extend the audience of the component to other frameworks but more importantly vanilla-JS.

How:

I don’t know about the underlying code for this component. However, the web component standard allows you to get components children as slots. You could use the slot name to indicate placeholding for the Thumbnail, Header, Footer components. Haven’t given too much thoughts about that, but what I have in mind is something like this:

<Composition areas={areasMobile} areasMd={areasTablet} gap={20}>
        <slot name='Thumbnail'>
          <Thumbnail src={imageUrl} alt={title} />
        </slot>
        <h3><slot name-'Header' >{title}</slot></h3>
        <slot name='Footer' padding={10} paddingMd={20}>
          <Footer>...</Footer>
        </slot>
  </Composition>

The Stencil compiler may help along the way with some of that work.

[brucou]

Artem, that’s duly noted. I am still busy with writing a clone of the conduit app with my state machine library. But I already had a look with Svelte, and it looks a little bit more complicated than I thought, when it comes to styling. But I’ll get back to it in 2020. Happy new year in advance!

Bruno Couriol Twitter: https://twitter.com/bricoi1

On Thu, Dec 26, 2019 at 10:59 AM Artem Zakharchenko < [e-mail]> wrote:

As of 0.12.0 release Atomic Layout is split into two packages:

1. @atomic-layout/core that contains all the core functionality (breakpoints calculations, styles generation). This _still depends on React).
2. atomic-layout that contains components/hooks declarations, reusing the core library.

In the future, if we decide to make the library framework-agnostic, it would be a question to properly abstracting React-dependent parts in @atomic-layout/core, and adjusting “rendering” packages (like atomic-layout).

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/kettanaito/atomic-layout/issues/245?email_source=notifications&email_token=AB3QEAJXFKDUK73BEZMHOV3Q2R6AZA5CNFSM4JJHY3T2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHVK5KA#issuecomment-569028264, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB3QEAPDPICCELXS46Y2KMTQ2R6AZANCNFSM4JJHY3TQ .

[brucou]

Thanks for the additional information! I will let you know when I reach a conclusion,