Implement Component Slots

[bradleypeabody]

Need to figure out the syntax but basically you should be able to:

<my-component>

    <vg-slot id="header">Gets output wherever my-component wants to put 'header'</vg-slot>

    <vg-slot id="footer">Gets output wherever my-component wants to put 'footer'</vg-slot>

</my-component>

This is a common technique in UI component libraries and lets you tell a UI component "do all your usual fancy stuff but in the section where you have X, this is what you put in there". Fancy data tables, dialog boxes, etc. use this approach.

[bradleypeabody]

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>

[bradleypeabody]

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.

[bradleypeabody]

This is working now: https://www.vugu.org/doc/components#slots