scope

docs/index.html

@@ -7,20 +7,19 @@
     <meta charset="UTF-8" content="">
 
 
-    <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
-    <link rel="manifest" href="site.webmanifest">
-    <link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
+    <link rel="apple-touch-icon" sizes="180x180" href="site/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="site/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="site/favicon-16x16.png">
+    <link rel="manifest" href="site/site.webmanifest">
+    <link rel="mask-icon" href="site/safari-pinned-tab.svg" color="#5bbad5">
     <meta name="msapplication-TileColor" content="#ffc40d">
     <meta name="theme-color" content="#ffffff">
 
-    
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
 
     <link rel="stylesheet"
       href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css">
-<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
 
     <!--IUI 2.0 -->
     <link href="../css/iui.css" rel="stylesheet" />
@@ -86,6 +85,10 @@
 
                     <i-route name="declarative" caption="Declarative Rendering" :content="load(this)">
                     </i-route>
+                    
+                    <i-route name="scope" caption="Scope" :content="load(this)">
+                    </i-route>
+
                     <i-route name="data-flow" caption="Data Flow" :content="load(this)">
                     </i-route>
 
@@ -96,13 +99,14 @@
 
 
 
-                <i-route name="IUI Widgets" caption="IUI Widgets">
+                <i-route name="components" caption="Components">
                 
-                    <i-route name="IUIElement" caption="IUIElement">
-                        
+                    <i-route name="iui-element" caption="IUIElement" :content="load(this)">
+                    </i-route>
+
+                    <i-route name="repeat" caption="Repeat" :content="load(this)">
                     </i-route>
 
-                    <i-index></i-index>
                 </i-route>
 
 

docs/js/docs.js

@@ -11,6 +11,6 @@ async function load(route, skip=false) {
     let content = await fetch(link);
     if (content.status != 200)
         return "Not found " + content.url;
-    var md = marked(await content.text());
+    var md = marked.parse(await content.text());
     return skip ? "<div skip>" + md + "</div>" : md;
 }

docs/md/components/iui-element.md

@@ -0,0 +1,24 @@
+# IUI Element
+
+*IUIElement* is the base class for all IUI components, it extends the HTMLElement, adds more functionality and define itself as a customElement in the browser.
+
+IuI Widgets tags start with `<i-...>` to differentiate them from the built in html tags.
+
+# Initialization Process
+
+When the document is loaded or new HTML is inserted in the document, IUI process of initialization start which consists of
+
+1- IUI.create(rootElement) 
+    create is called on every IUI element in the tree, asking these elements to create themselves, in this phase an element can add more children to itself. (**IUIElement**)
+
+1- IUI.bind(rootElement)
+    IUI.bind ensures that all executable attributes starting with : are compiled and tested for data binding.
+    Any property that is used by the `d` variable will be a candidate for binding, which means IUI will handle any modification on that property. (**IUIElement** and **HTMLElement**)
+
+3- IUI.created(rootElement)
+    Notify every IUI element that the create and bind process has ended. (**IUIElement**)
+
+4- IUI.render(element)
+    Render invokes the data binding functions and sets the element text nodes and attributes to the value returned by the binding functions. The process is recursive to all children in the element tree (**IUIElement** and **HTMLElement**)
+
+The rootElement is the first `<i-app>` in the document when its loaded.

docs/md/components/repeat.md

@@ -0,0 +1,14 @@
+# I-Repeat
+
+`<i-repeat>` performs a an iteration on an array and builds elements according to the given list
+
+
+<i-codepreview>
+    <i-repeat :data="['Apple', 'Orange', 'Grape']">
+        <div>${d}</div>
+    </i-repeat>
+</i-codepreview>
+
+if the iteration on a specific element is needed, *repeat* attribute must be added to the element.
+
+*Note* each element in the iteration has an index property

docs/md/getting-started/scope.md

@@ -0,0 +1,13 @@
+# Scope Variables
+
+Scope variables are provided during the rendering process to the scripts and declarative rendering functions.
+
+These variables propagate from an element to its children and could be altered or overwritten by any element in the tree so the children of that element receive a new value for these variables.
+
+
+<i-codepreview>
+    <div :scope="{now: new Date()}">
+        <div>Date: ${now.toDateString()}</div>
+        <div>Time: ${now.toTimeString()}</div>
+    </div>
+</i-codepreview>