dy
Re-usable sprae components?
I am currently thinkering a bit with having the same sprae component render in two different contexts (on the same page, an admin interface and the user-facing part) but I'm wondering if I'm missing something super obvious on how to make re-usable sprae components.
So far I had two ideas:
- Use a
<template />tag for the sprae HTML, clone that and initialize/inject it in different containers - Wrap the sprae HTML into a native WebComponent and initialize that (seems a bit overkill tbh)
any better and/or already prooven approaches for this kind of scenario?
My humble research didn't reveal useful patterns for organizing components. Until html includes are there, sprae is limited in that regard to snippets style. Arguably there's upsides in that limitation. If that is one-off case, I would suggest trying if-else. Personally I experimented with wrapping into web-components, but until there's declarative custom elements proposal that is messy as you said.
I am open to ideas. Maybe some custom directive might work?
With sprae.start(container) in v12 there's a bit less value in having separate components. Any nodes added to the container that have : attributes will be spraed automatically. So the main value of components that remains is reusable snippets of HTML.
It can be solved with <template :ref="foo">Reusable piece</template> and some custom directive like <div :content="foo"></div>. A bit like SVG defs/use work.
Sprae does not introduce components system. Much like alpine JS, it is just UI snippets. It relies on existing system, either web-components for HTML or functions for JSX.