Each block iteration

Author: Timothy Johnson

src/ComponentView.svelte

@@ -53,7 +53,7 @@
       id={$selectedNode.id}
       header="State"
       entries={$selectedNode.detail.ctx} />
-  {:else if $selectedNode.type == 'block'}
+  {:else if $selectedNode.type == 'block' || $selectedNode.type == 'iteration'}
     <PropertyList
       readOnly
       id={$selectedNode.id}

src/client/index.js

@@ -99,6 +99,7 @@ function serializeNode(node) {
       break
     }
 
+    case 'iteration':
     case 'block': {
       const { ctx, source } = node.detail
       serialized.detail = {

src/nodes/Iteration.svelte

@@ -0,0 +1,20 @@
+<script>
+  export let style
+  export let hover
+  export let selected
+  export let source
+</script>
+
+<style>
+  div {
+    height: 16px;
+    line-height: 16px;
+  }
+
+  div {
+    color: rgb(151, 164, 179);
+  }
+</style>
+
+<div class:hover class:selected {style}>&#8618;</div>
+<slot />

src/nodes/Node.svelte

@@ -3,6 +3,7 @@
   import Element from './Element.svelte'
   import Block from './Block.svelte'
   import Slot from './Slot.svelte'
+  import Iteration from './Iteration.svelte'
   import Text from './Text.svelte'
   import Anchor from './Anchor.svelte'
 
@@ -27,6 +28,7 @@
     component: Element,
     block: Block,
     slot: Slot,
+    iteration: Iteration,
     text: Text,
     anchor: Anchor
   }[node.type]
@@ -103,8 +105,10 @@
         <span style={`left: ${depth * 12 + 2}px`} />
       {/if}
       <ul>
-        {#each node.children as node (node.id)}
-          <svelte:self {node} depth={depth + 1} />
+        {#each node.children as child (child.id)}
+          <svelte:self
+            node={child}
+            depth={node.type == 'iteration' ? depth : depth + 1} />
         {/each}
       </ul>
     </svelte:component>

src/store.js

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