Merge pull request #1 from Authman2/observables

Observables

README.md

@@ -9,11 +9,13 @@
 
 ## Features
 - **Component-Based**: Mosaic components are reusable pieces of code that each keep track of their own state (referred to as "data"), actions, lifecycle functions, and more.
+- **Observable Data Pattern**: Mosaic uses Observables to keep track of changes to a component's data. This means 
+that there is no need to call "setState" or anything like that, instead just change the data directly.
 - **Virtual DOM**: The use of a virtual dom makes updating web apps very fast.
-- **Written in JSX**: You can use jsx or the "h" function that comes with Mosaic to write a component's view.
+- **JSX**: You can use jsx or the "h" function that comes with Mosaic to write a component's view.
 - **Easy to Learn**: The syntax and structure of Mosaic components is meant to make it easy to learn so that it does not require a lot of setup to start using.
 
-## Usage
+## Installation
 The easiest way to use Mosaic is to first install the npm package by using:
 ```shell
 npm install --save @authman2/mosaic
@@ -26,9 +28,7 @@ You will also need to create a .babelrc file so that you can transpile JSX into
 ```js
 {
     "presets": ["env"],
-    "plugins": [["babel-plugin-transform-react-jsx", {
-        "pragma": "h"
-    }]]
+    "plugins": [["babel-plugin-transform-react-jsx", { "pragma": "h" }]]
 }
 ```
 Now you are ready to use Mosaic!
@@ -63,19 +63,17 @@ const NavButton = new Mosaic({
         label: "Default Label",
         buttonTitle: "Default Button Title"
     },
-    actions: function(self) {
-        return {
-            print: function() {
-                console.log(self.data.buttonTitle);
-            }
+    actions: {
+        print: function() {
+            console.log(this.data.buttonTitle);
         }
     },
     view: function() {
         // The data will be passed in from the parent component.
         return (
             <div>
                 <p>{this.data.label}</p>
-                <button onClick={this.actions.print}>
+                <button onclick={this.actions.print}>
                     Click to go to {this.data.buttonTitle}
                 </button>
             </div>
@@ -89,18 +87,11 @@ const app = new Mosaic({
     data: {
       title: "Mosaic App"
     },
-    components: {
-        homeButton: Mosaic.Child(NavButton, { label: "Home Button", buttonTitle: "Home" }),
-        aboutButton: Mosaic.Child(NavButton, { label: "About Button", buttonTitle: "About" }),
-        contactButton: Mosaic.Child(NavButton, { label: "Contact Button", buttonTitle: "Contact" }),
-    },
-    actions: function(thisComponent) {
-      return {
-          sayHello: function() {
-              console.log("Hello World!!");
-              console.log("This component is ", thisComponent);
-          }
-      }
+    actions: {
+        sayHello: function() {
+            console.log("Hello World!!");
+            console.log("This component is ", this);
+        }
     },
     view: function() {
       return (
@@ -110,9 +101,9 @@ const app = new Mosaic({
               <button onClick={this.actions.sayHello}>Click Here</button>
               <br/>
               <br/>
-              { this.homeButton.view() }
-              { this.aboutButton.view() }
-              { this.contactButton.view() }
+              <NavButton data={{ label: "Home", buttonTitle: "Home Button" }}/>
+              <NavButton data={{ label: "About", buttonTitle: "Home Button" }}/>
+              <NavButton data={{ label: "Contact", buttonTitle: "Contact Button" }}/>
           </div>
       )
     }

example/app.css

@@ -0,0 +1,73 @@
+.app {
+    position: absolute;
+    margin: 0px;
+    width: 100%;
+    padding: 0px;
+    min-height: 100%;
+    overflow-y: auto;
+    text-align: center;
+    padding-bottom: 100px;
+    background-color: #4341b5;
+}
+
+.app-title {
+    color: white;
+    font-weight: 300;
+    font-family: 'Avenir';
+}
+
+input {
+    width: 70%;
+    height: 50px;
+    border: none;
+    padding: 15px;
+    font-size: 16px;
+    border-radius: 10px;
+    font-family: 'Avenir';
+}
+
+button {
+    position: relative;
+    width: 20%;
+    height: 50px;
+    border: none;
+    outline: none;
+    display: block;
+    color: white;
+    cursor: pointer;
+    font-size: 14px;
+    margin-top: 10px;
+    margin-left: auto;
+    margin-right: auto;
+    border-radius: 25px;
+    transition-duration: 0.1s;
+    background-color: #6866d8;
+}
+button:hover {
+    color: lightgray;
+    background-color: #5856b9;
+}
+button:active {
+    color: gray;
+    background-color: #333194;
+}
+
+.todo-item {
+    width: 70%;
+    padding: 15px;
+    color: white;
+    cursor: pointer;
+    font-weight: 300;
+    margin-top: 20px;
+    margin-left: auto;
+    margin-right: auto;
+    border-radius: 10px;
+    font-family: 'Avenir';
+    background-color: #6866d8;
+}
+.todo-item:hover {
+    background-color: #5856b9;
+}
+.todo-item:active {
+    background-color: #333194;
+}

example/app.html

@@ -1,6 +1,7 @@
 <html>
     <head>
         <title>Mosaic</title>
+        <link rel='stylesheet' href='./app.css'>
     </head>
 
     <body style='margin: 0px; padding: 0px;'>

example/app.js

@@ -1,42 +1,48 @@
 import { h, Mosaic } from '../src/index';
-import Home from './home';
 
-const root = document.getElementById('root');
-root.innerHTML = '';
+/* Example of a Todo application using Mosaic. */
+const TodoItem = new Mosaic({
+    data: { title: "" },
+    view: function() {
+        return <div class='todo-item' onclick={this.data.deleteTodo}>
+            {this.data.title}
+        </div>
+    }
+});
 
-const appStyles = {
-    width: '100%',
-    color: 'white',
-    paddingTop: '10px',
-    textAlign: 'center',
-    fontFamily: 'Avenir',
-    paddingBottom: '100px',
-    backgroundColor: '#4341B5'
-}
-const app = new Mosaic({
-    element: root,
+const todoApp = new Mosaic({
+    element: document.getElementById('root'),
     data: {
-        title: "Mosaic",
-        subtitle: "A front-end JavaScript library for building user interfaces"
+        todos: ['Click the "Add Todo" button to add another todo item!',
+                'Click on a todo item to delete it.']
     },
-    components: {
-        home1: Mosaic.Child(Home, { instance: 0, componentInstance: "First Home Instance: " }),
-        home2: Mosaic.Child(Home, { instance: 1, componentInstance: "Second Home Instance: " }),
+    actions: {
+        addTodo: function() {
+            let value = document.getElementById('inp').value;
+            document.getElementById('inp').value = '';
+
+            this.data.todos = this.data.todos.concat(value);
+        },
+        deleteTodo: function(todoIndex) {
+            this.data.todos = this.data.todos.filter((_, index) => index !== todoIndex);
+        }
     },
     view: function() {
-        return (
-            <div style={appStyles}>
-                <h1>Welcome to {this.data.title}!</h1>
-                <h4>{this.data.subtitle}</h4>
-                <p>Use the buttons below to try out the counter!</p>
+        return <div class='app'>
+            <h1 class='app-title'>Mosaic Todo List</h1>
+            <input id='inp' type='text' placeholder='Enter your todo item'
+                    onkeypress={(e) => { if(e.keyCode === 13) this.actions.addTodo() }}/>
+            <button onclick={this.actions.addTodo}>Add Todo</button>
 
-                { this.home1.view() }
-                { this.home2.view() }
-            </div>
-        )
-    },
-    created: function() {
-        this.home1.setData({ count: 10 });
+            {
+                this.data.todos.map((todo, index) => {
+                    return <TodoItem data={{
+                            title: todo,
+                            deleteTodo: this.actions.deleteTodo.bind(this, index)
+                        }}/>
+                })
+            }
+        </div>
     }
 });
-app.paint();
+todoApp.paint();

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@authman2/mosaic",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "A front-end JavaScript library for creating user interfaces",
   "main": "src/index.js",
   "scripts": {
@@ -23,5 +23,6 @@
   "devDependencies": {
     "babel-core": "^6.26.3",
     "babel-plugin-transform-react-jsx": "^6.24.1"
-  }
+  },
+  "dependencies": {}
 }