(feature) list-enhanced

stremann · Dec 13, 2016 · 7acb3ad · 7acb3ad
1 parent 1478060
commit 7acb3ad
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 0 deletions.
diff --git a/examples/list-enhanced/.babelrc b/examples/list-enhanced/.babelrc
@@ -0,0 +1,3 @@
+{
+  "plugins": ["transform-react-jsx"]
+}
diff --git a/examples/list-enhanced/.gitignore b/examples/list-enhanced/.gitignore
@@ -0,0 +1,11 @@
+# Intellij Idea project files
+.idea
+
+# Nodejs installed packages
+node_modules
+
+# Nodejs log file
+npm-debug.log
+
+# Build artifacts
+bundle.js
diff --git a/examples/list-enhanced/index.html b/examples/list-enhanced/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Dompro - List enhanced</title>
+    <link rel="stylesheet" href="./main.css"/>
+</head>
+<body>
+
+<button id="reload">Reload</button>
+<div id="root"></div>
+
+<script src="https://unpkg.com/dompro@latest/dist/dompro.min.js"></script>
+<script src="bundle.js"></script>
+</body>
+</html>
diff --git a/examples/list-enhanced/index.js b/examples/list-enhanced/index.js
@@ -0,0 +1,37 @@
+/** @jsx Dompro.compileJSX */
+
+function log(e) {
+    console.log(e.target.value);
+}
+
+const f = (
+    <ul style="list-style: none;">
+        <li className="item" onClick={() => alert('hi!')}>item 1</li>
+        <li className="item">
+            <input type="checkbox" checked={true} />
+            <input type="text" onInput={log} />
+        </li>
+        {/* this node will always be updated */}
+        <li forceUpdate={true}>text</li>
+    </ul>
+);
+
+const g = (
+    <ul style="list-style: none;">
+        <li className="item item2" onClick={() => alert('hi!')}>item 1</li>
+        <li style="background: red;">
+            <input type="checkbox" checked={false} />
+            <input type="text" onInput={log} />
+        </li>
+        {/* this node will always be updated */}
+        <li forceUpdate={true}>text</li>
+    </ul>
+);
+
+const $root = document.getElementById('root');
+const $reload = document.getElementById('reload');
+
+Dompro.updateDOM($root, f);
+$reload.addEventListener('click', () => {
+    Dompro.updateDOM($root, g, f);
+});
diff --git a/examples/list-enhanced/main.css b/examples/list-enhanced/main.css
@@ -0,0 +1,14 @@
+#root {
+    border: 1px solid black;
+    padding: 10px;
+    margin: 30px 0 0 0;
+}
+
+.item {
+    background: yellow;
+    margin: 10px 0;
+}
+
+.item2 {
+    background: green;
+}
diff --git a/examples/list-enhanced/package.json b/examples/list-enhanced/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "dompro",
+  "version": "0.2.0",
+  "description": "Dompro",
+  "main": "index.js",
+  "scripts": {
+    "build": "babel index.js --out-file bundle.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/stremann/dompro.git"
+  },
+  "keywords": [
+    "dompro",
+    "virtual",
+    "dom",
+    "list",
+    "examples"
+  ],
+  "author": "Roman Stremedlovskyi <stremann@yahoo.com> (https://github.com/stremann)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/stremann/dompro/issues"
+  },
+  "homepage": "https://github.com/stremann/dompro#readme",
+  "devDependencies": {
+    "babel-cli": "^6.18.0",
+    "babel-core": "^6.20.0",
+    "babel-plugin-transform-react-jsx": "^6.8.0"
+  }
+}