Thank you very much for the tip. This works great. The only thing to note – the compiler was unhappy about using a param name of node in the call to render_node/1. It was only happy to have the param as assigns
mcgingras
0
olivermt
@msaraiva, suggestions on how to best to Gettext?
Ideally we would have something like this:
<GetText bindings={{ name: name }}>Hello %{name}</GetText>
But slot based approach doesnt match well with how we do macros and the plurality will be harder to handle, so maybe something like:
<GetText
bindings={{ name: name }}
count={{ some_int }}
text={{"Hello to you, my name is %{name}"}}
plural={{"Hello to all of you %{count}, my name is %{name}"}}
>
Or maybe a combination?
<GetText
bindings={{ name: name }}
count={{ some_int }}
plural={{"Hello to all of you %{count}, my name is %{name}"}}
>Hello to you, my name is %{name}</GetText>
… or just stick to <%= ngettext ... ? 
Edit: Rawdogging ngettext doesnt work actually, as it wont work inside the H sigil.
Edit2: I realize that to get this to be compile-time, it has to be
{{ gettext("Some text.") }} directly in the template.
0
darraghenright
Hi Marlus.
I’m wondering if the source code for the Surface docs site is published anywhere? I’m very curious to look at the form example in the contexts section in particular, for reference.
I’ve been refactoring Surface into a LiveView based project and so far it’s been an absolute joy, everything has been so easy so far and the templates are super readable.
Thanks!
3
msaraiva
Broadway Core Team
Hi @darraghenright!
The website’s source code is now available at GitHub - surface-ui/surface_site: Documentation website for the Surface project. · GitHub.
3
darraghenright
stevensonmt
Just reading the docs and I think I love the “typed slottables” feature. The resulting template seems so much clearer to me than the template slot=... form.
1
darraghenright
Speaking of templates, I am using AlpineJS to do something like the following:
<div x-data="{ showModal: false}">
<button @click="showModal = true">show modal</button>
<template x-if="showModal">
<div class="modal">
...
<button @click="showModal = false">close</button>
</div>
</template>
</div>
I’m not using x-show because I want to remove the content from the DOM (I don’t want to leave things like partially completed form elements in the DOM after the modal has closed).
I am getting the following error, and I’m not sure what it means — I haven’t found anything in the docs that explains it yet:
CaseClauseError
no case clause matching:{:error, "cannot render <div> (templates are only allowed as children elements of components, but found template for default)"}
Does anyone have any thoughts? Thanks!
EDIT: Still curious about this error but thinking about what I am trying to do, and it seems like it might be a better idea to control this sort of thing in the LV (which is what I was doing initially). Still trying to find where to draw that line between LV/Surface and Alpine.
0
sfusato
I think Alpine’s <template> is conflicting with Surface’s <template> that is used for named slots.
0
darraghenright
Ah yes, of course. Haven’t really used named slots yet, just read about them a little. Makes sense.
In the end I went back to my original implementation, but took a lead the Dialog example to encapsulate some logic and use send_update/2 — works beautifully!
I think I’ll reduce my usage of Alpine to really simple scenarios that can be done with x-show or where simple transitions are required.
Thanks @sfusato!
0