Basic slot handling

Author: Timothy Johnson

src/VisibilityButton.svelte

@@ -99,6 +99,11 @@
         on:click={e => ($visibility.block = !$visibility.block)}>
         Blocks
       </li>
+      <li
+        class:checked={$visibility.slot}
+        on:click={e => ($visibility.slot = !$visibility.slot)}>
+        Slots
+      </li>
       <li
         class:checked={$visibility.anchor}
         on:click={e => ($visibility.anchor = !$visibility.anchor)}>

src/nodes/Node.svelte

@@ -2,6 +2,7 @@
   import { visibility, hoveredNodeId, selectedNode } from '../store.js'
   import Element from './Element.svelte'
   import Block from './Block.svelte'
+  import Slot from './Slot.svelte'
   import Text from './Text.svelte'
   import Anchor from './Anchor.svelte'
 
@@ -25,6 +26,7 @@
     element: Element,
     component: Element,
     block: Block,
+    slot: Slot,
     text: Text,
     anchor: Anchor
   }[node.type]

src/nodes/Slot.svelte

@@ -0,0 +1,36 @@
+<script>
+  import Collapse from './Collapse.svelte'
+
+  export let style
+  export let hover
+  export let selected
+  export let tagName
+  export let source
+  export let collapsed
+</script>
+
+<style>
+  div {
+    height: 16px;
+    line-height: 16px;
+  }
+
+  div {
+    color: rgb(0, 116, 232);
+  }
+</style>
+
+<div
+  class="tag-open tag-name"
+  class:hover
+  class:selected
+  {style}
+  on:dblclick={e => (collapsed = !collapsed)}>
+  <Collapse {selected} bind:collapsed />
+  &lt;{tagName}&gt;
+  {#if collapsed}&hellip;&lt;/{tagName}&gt;{/if}
+</div>
+{#if !collapsed}
+  <slot />
+  <div class="tag-close tag-name" class:hover {style}>&lt;/{tagName}&gt;</div>
+{/if}

src/store.js

@@ -4,6 +4,7 @@ export const visibility = writable({
   component: true,
   element: true,
   block: true,
+  slot: true,
   text: true,
   anchor: false
 })

test/src/App.svelte

@@ -4,6 +4,7 @@
   import Blocks from './Blocks.svelte'
   import Bind from './Bind/Bind.svelte'
   import Events from './Events/Events.svelte'
+  import Slots from './Slots/Slots.svelte'
 </script>
 
 <style>
@@ -37,4 +38,5 @@
   <Blocks />
   <Bind />
   <Events />
+  <Slots />
 </div>

test/src/Slots/SlotComponent.svelte

@@ -0,0 +1 @@
+<slot />

test/src/Slots/Slots.svelte

@@ -0,0 +1,10 @@
+<script>
+  import SlotComponent from './SlotComponent.svelte'
+</script>
+
+<div>
+  <p>Render slots.</p>
+  <SlotComponent>
+    <span>Slot content</span>
+  </SlotComponent>
+</div>