Comments (3)
In Vue terminology, this breaks down into "named slots" and "scoped slots". Essentially named slots are static named pieces of DOM whereas scoped slots have data passed back in from the component to the caller's DOM generation code as an arg (for example, a slot that is called to generate each row of a dynamic data table). I think we'll just have one mechanism in Vugu which can optionally have args.
Calling a component with slots:
<div>
<!-- call data table with a slice of Item -->
<somelib:data-table :items="c.Items">
<!-- "named slot" approach with just static data -->
<h1 vg-slot="top">My Top Section</h1>
<!-- called for each row -->
<td vg-slot="row" vg-slot-args="item Item">
<span vg-html="item.Name"></span>
</td>
</somelib:data-table>
</div>
Actually, using as the tag name makes it so that slots can easily contain things like just text or multiple tags:
<div>
<!-- call data table with a slice of Item -->
<somelib:data-table :items="c.Items">
<!-- "named slot" approach with just static data -->
<vg-slot name="top">My Top Section</vg-slot>
<!-- called for each row -->
<vg-slot name="row" args="item Item">
<td><span vg-html="item.Name"></span></td>
</vg-slot>
</somelib:data-table>
</div>
from vugu.
More notes on this. It looks like these are going to end up being just functions. So "DefaultSlot" is literally type Comp { DefaultSlot func(...) /*someDOMReturnValue*/ }
. This makes it pretty easy to reason about and allows for type-safe params - afterall it really just becomes syntactic sugar for a callback method.
I don't think we need to distinguish between "named" and "scoped" slots - they are both just callback functions - and they can have whatever params are appropriate or no params at all.
Note sure on the syntax, more ideas (for the slot definition part):
<div>
<pkg:Comp>
<VGSlot ID="DefaultSlot">
<div>Just static stuff here or stuff or referenced from pkg:Comp</div>
</VGSlot>
<VGSlot ID="RowSlot" Params="id string, blah string">
<div VGHtml="id"></div>
</VGSlot>
</pkg:Comp>
OR (only syntax difference - looks nicer but limits slots to having a single parent element,
sadly I think this may be problematic)
<pkg:Comp>
<div vg-slot-id="DefaultSlot">
<div>Just static stuff here or stuff or referenced from pkg:Comp</div>
</div>
<div vg-slot="RowSlot" vg-params="id string, blah string">
<div vg-html="id"></div>
</div>
</pkg:Comp>
</div>
To call a slot from within pkg:Comp, probably something like:
<vg-call-slot id="DefaultSlot" :args='c.SomeData, 123, "abc"'>
... where DefaultSlot is the name of the function to call and the args are the args, translates to:
c.DefaultSlot(c.SomeData, 123, "abc")
Need to figure out what syntax makes the most sense and feels consistent, but I think the idea is sound and will be straightforward to implement.
"name" might be better than "id" - since functions and fields have "name"s. I think using "params" and "args" and "call" are good because they correspond to the code they output and are reasonably intuitive.
The developer will also have to define these fields of type func on their struct (i.e. example at top of this comment), but I don't thats an issue - it's a bit more typing than Vue, but type safe - like many idea are when translated from JS to Go.
from vugu.
This is working now: https://www.vugu.org/doc/components#slots
from vugu.
Related Issues (20)
- Using javascript libaries with Vugu HOT 8
- wiring example not working HOT 1
- Consider using GCSS for CSS preprocessing HOT 1
- Panic: index out of range HOT 2
- This fixes the example in examples/fetch-and-display HOT 1
- MDL latest now is updated after many years neglect HOT 2
- Short form of vg-comp tag stops rendering the parent component
- Render server side and client side HOT 3
- webpack loader support and mixed with vue or react HOT 1
- Abandoned? HOT 9
- The Rendered lifecycle of the subcomponent has not been called HOT 1
- Getting Vugu to v1.0 and into production HOT 19
- TailwindCSS and Vugu HOT 2
- Produce a full production example
- State of vgforms package - do we need this for v1.0? HOT 1
- Request for a volunteer: TinyGo support for v1.0 (or shortly after) HOT 2
- Is the library alive? HOT 1
- Vugu v1.0 ToDo List
- Feedback Request: Do you use the generated `main_was.go`? HOT 3
- js Set can not set Function HOT 9
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vugu.