components!

Author: yyx990803

README.md

@@ -41,18 +41,18 @@ If you don't want the auto init, remove the `init` attribute and move the script
 </script>
 ```
 
-Or, use the ES modules build:
+Or, use the ES module build:
 
 ```html
 <script type="module">
   import { createApp } from 'https://unpkg.com/petite-vue?module'
   createApp().mount()
-<script>
+</script>
 ```
 
 ### Root Scope
 
-The `createApp` function accepts a data object that serves as the root scope for all expressions. This can be used for simple global state management:
+The `createApp` function accepts a data object that serves as the root scope for all expressions. This can be used to bootstrap simple, one-off apps:
 
 ```html
 <script type="module">
@@ -140,6 +140,9 @@ There are no components, but logic can be shared across the app or encapsulated
       count: props.initialCount,
       inc() {
         this.count++
+      },
+      mounted() {
+        console.log(`I'm mounted!`)
       }
     }
   }
@@ -149,7 +152,12 @@ There are no components, but logic can be shared across the app or encapsulated
   }).mount()
 </script>
 
-<div v-scope="ComponentLike({ initialCount: 10 })">
+<div v-scope="ComponentLike({ initialCount: 1 })" @mounted="mounted">
+  <p>{{ count }}</p>
+  <button @click="inc">increment</button>
+</div>
+
+<div v-scope="ComponentLike({ initialCount: 2 })">
   <p>{{ count }}</p>
   <button @click="inc">increment</button>
 </div>

examples/tree.html

@@ -0,0 +1,88 @@
+<script type="module">
+  import { createApp } from '../src'
+
+  const treeData = {
+    name: 'My Tree',
+    children: [
+      { name: 'hello' },
+      { name: 'wat' },
+      {
+        name: 'child folder',
+        children: [
+          {
+            name: 'child folder',
+            children: [{ name: 'hello' }, { name: 'wat' }]
+          },
+          { name: 'hello' },
+          { name: 'wat' },
+          {
+            name: 'child folder',
+            children: [{ name: 'hello' }, { name: 'wat' }]
+          }
+        ]
+      }
+    ]
+  }
+
+  function TreeItem(model) {
+    return {
+      $template: '#item-template',
+      model,
+      open: false,
+      get isFolder() {
+        return model.children && model.children.length
+      },
+      toggle() {
+        if (this.isFolder) {
+          this.open = !this.open
+        }
+      },
+      changeType() {
+        if (!this.isFolder) {
+          model.children = []
+          this.addChild()
+          this.open = true
+        }
+      },
+      addChild() {
+        model.children.push({
+          name: 'new stuff'
+        })
+      }
+    }
+  }
+
+  createApp({
+    TreeItem,
+    treeData
+  }).mount()
+</script>
+
+<template id="item-template">
+  <div :class="{ bold: isFolder }" @click="toggle" @dblclick="changeType">
+    <span>{{ model.name }}</span>
+    <span v-if="isFolder">[{{open ? '-' : '+'}}]</span>
+  </div>
+  <ul v-show="open" v-if="isFolder">
+    <li v-for="model in model.children" v-scope="TreeItem(model)"></li>
+    <li class="add" @click="addChild">+</li>
+  </ul>
+</template>
+
+<p>Double click an item to turn it into a folder.</p>
+<ul v-scope>
+  <li class="item" v-scope="TreeItem(treeData)"></li>
+</ul>
+
+<style>
+  body {
+    font-family: Menlo, Consolas, monospace;
+    color: #444;
+  }
+  .item {
+    cursor: pointer;
+  }
+  .bold {
+    font-weight: bold;
+  }
+</style>

index.html

@@ -5,18 +5,19 @@ <h2>Examples</h2>
   <li><a href="/examples/grid.html">Grid</a></li>
   <li><a href="/examples/markdown.html">Markdown</a></li>
   <li><a href="/examples/svg.html">SVG</a></li>
+  <li><a href="/examples/tree.html">Tree</a></li>
 </ul>
 
 <h2>Tests</h2>
 <ul>
-  <li><a href="/tests/data.html">v-scope</a></li>
+  <li><a href="/tests/scope.html">v-scope</a></li>
   <li><a href="/tests/effect.html">v-effect</a></li>
   <li><a href="/tests/bind.html">v-bind</a></li>
   <li><a href="/tests/on.html">v-on</a></li>
   <li><a href="/tests/if.html">v-if</a></li>
   <li><a href="/tests/for.html">v-for</a></li>
   <li><a href="/tests/model.html">v-model</a></li>
-  <li><a href="/tests/reuse.html">Logic Reuse</a></li>
+  <li><a href="/tests/multi-mount.html">Multi mount</a></li>
 </ul>
 
 <style>

tests/component.html

@@ -0,0 +1,24 @@
+<script type="module">
+  import { createApp, reactive } from '../src'
+
+  function MyComp() {
+    return {
+      $template: '#comp',
+      count: 0,
+      get plusOne() {
+        return this.count + 1
+      }
+    }
+  }
+
+  createApp({
+    MyComp
+  }).mount()
+</script>
+
+<template id="comp">
+  {{ count }} {{ plusOne }}
+  <button @click="count++">++</button>
+</template>
+
+<div v-scope="MyComp()"></div>

tests/multi-mount.html

@@ -0,0 +1,30 @@
+<script type="module">
+  import { createApp, reactive } from '../src'
+
+  const store = reactive({
+    count: 0,
+    inc() {
+      this.count++
+    }
+  })
+
+  createApp({
+    store,
+    count: 1
+  }).mount('#app1')
+
+  createApp({
+    store,
+    count: 2
+  }).mount('#app2')
+</script>
+
+<div id="app1">
+  Global count {{ store.count }}
+  Local count {{ count }}
+</div>
+
+<div id="app2">
+  Global count {{ store.count }}
+  Local count {{ count }}
+</div>