add component definition doc

kbrsh · Jul 16, 2018 · 0f2059c · 0f2059c
1 parent c4fe44d
commit 0f2059c
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 13 deletions.
diff --git a/dist/moon.js b/dist/moon.js
@@ -825,16 +825,16 @@
 	};
 
 	function Moon(options) {
-		var instanceComponent = component("", options);
-		var instance = new instanceComponent();
-
-		var root = instance.root;
-		delete instance.root;
+		var root = options.root;
+		delete options.root;
 
 		if (typeof root === "string") {
 			root = document.querySelector(root);
 		}
 
+		var instanceComponent = component("", options);
+		var instance = new instanceComponent();
+
 		instance.create(root);
 		instance.update();
 

diff --git a/dist/moon.min.js b/dist/moon.min.js
diff --git a/src/index.js b/src/index.js
@@ -4,16 +4,16 @@ import { components } from "./component/components";
 import { config } from "./util/config";
 
 export default function Moon(options) {
-	const instanceComponent = component("", options);
-	const instance = new instanceComponent();
-
-	let root = instance.root;
-	delete instance.root;
+	let root = options.root;
+	delete options.root;
 
 	if (typeof root === "string") {
 		root = document.querySelector(root);
 	}
 
+	const instanceComponent = component("", options);
+	const instance = new instanceComponent();
+
 	instance.create(root);
 	instance.update();
 

diff --git a/web/doc/components.html b/web/doc/components.html
@@ -52,7 +52,44 @@ <h6>Documentation</h6>
 			</div>
 			<div id="content">
 				<h1>Components</h1>
-
+				<p>Components allow you to split up your application into smaller, composable parts called <em>components</em>. Components are constructors that create new instances. They have the same API as the root Moon component, as both are component instances.</p>
+<p>Once a component is registered using <code>Moon.extend</code>, it can be used anywhere with a tag. Component names must start with a capital letter, and component data should be a function in order to create new data for each component instance.</p>
+<pre><code lang="mvl"><span class="gray">&lt;!-- Root View --&gt;</span>
+<span class="red">&lt;Counter</span><span class="red">/&gt;</span>
+<span class="red">&lt;Counter</span><span class="red">/&gt;</span>
+<span class="red">&lt;Counter</span><span class="red">/&gt;</span>
+</code></pre>
+<pre><code lang="mvl"><span class="gray">&lt;!-- Counter View --&gt;</span>
+<span class="red">&lt;button</span> <span class="orange">@click</span>={<span class="blue">update</span>(<span class="green">&quot;count&quot;</span>, count + <span class="orange">1</span>)}<span class="red">&gt;</span>
+    {count}
+<span class="red">&lt;/button</span><span class="red">&gt;</span>
+</code></pre>
+<pre><code lang="js">Moon.<span class="blue">component</span>(<span class="green">&quot;Counter&quot;</span>, <span class="purple">function</span>() {
+    <span class="purple">return</span> {
+        count: <span class="orange">0</span>
+    }
+});
+
+<span class="blue">Moon</span>({
+    root: <span class="green">&quot;#root&quot;</span>
+});
+</code></pre>
+<div id="example-components-definition" class="example"></div>
+
+<script>
+    Moon.extend("Counter", function() {
+        return {
+            view: "<button @click={update(\"count\", count + 1)}>{count}</button>",
+            count: 0
+        }
+    });
+
+    Moon({
+        root: "#example-components-definition",
+        view: "<Counter/><Counter/><Counter/>"
+    });
+</script>
+
 			</div>
 		</div>
 	</body>

diff --git a/web/examples/todo/index.html b/web/examples/todo/index.html
@@ -25,7 +25,7 @@
 	<body>
 		<div id="root"></div>
 
-		<script id="template" type="text/moon">
+		<script type="text/mvl" id="template">
 			<div class="flex direction-vertical justify-center size-full-height container">
 				<div class="todos">
 					<p For={$todo in todos} class={"todo" + ($todo.complete ? " complete" : "")} @click={completeTodo($todo)}>{$todo.value}</p>
@@ -35,6 +35,7 @@
 			</div>
 		</script>
 
+
 		<script src="../../../dist/moon.min.js"></script>
 		<script>
 			Moon({