vndb/mithril-vndb
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

init state, fix examples

Browse source
This commit is contained in:
Leo Horie 2016-05-15 11:14:38 -04:00
parent 5265697cb2
commit 5ec06e7c08
9 changed files with 137 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

34
examples/editor-bundle/index.html Normal file
View file

@ -0,0 +1,34 @@
<!doctype html>
<html>
<head>
<title>Markdown Editor</title>
<style>
html,body {height:100%;margin:0;}
h1,h2,h3,h4,h5,h6,p {margin:0 0 10px;}
#editor {display:flex;height:100%;}
.editor-input,.editor-preview {box-sizing:border-box;height:100%;margin:0;padding:10px;width:50%;}
.editor-input {border:0;border-right:1px solid #ccc;outline:none;resize:none;}
</style>
</head>
<body>
<div id="editor"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
<script src="../../module/module.js"></script>
<script src="../../mithril.js"></script>
<script>
var m = require("../../mithril")
var Editor = {
data: "# Markdown Editor\n\nType on the left panel and see the result on the right panel",
view: function(vnode) {
return [
m("textarea.editor-input", {oninput: function(e) {vnode.state.data = e.target.value}}, vnode.state.data),
m(".editor-preview", m.trust(marked(vnode.state.data))),
]
}
}
m.mount(document.getElementById("editor"), Editor)
</script>
</body>
</html>

43
examples/editor/index.html Normal file
View file

@ -0,0 +1,43 @@
<!doctype html>
<html>
<head>
<title>Markdown Editor</title>
<style>
html,body {height:100%;margin:0;}
h1,h2,h3,h4,h5,h6,p {margin:0 0 10px;}
#editor {display:flex;height:100%;}
.editor-input,.editor-preview {box-sizing:border-box;height:100%;margin:0;padding:10px;width:50%;}
.editor-input {border:0;border-right:1px solid #ccc;outline:none;resize:none;}
</style>
</head>
<body>
<div id="editor"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
<script src="../../module/module.js"></script>
<script src="../../render/node.js"></script>
<script src="../../render/hyperscript.js"></script>
<script src="../../render/render.js"></script>
<script src="../../render/trust.js"></script>
<script>
var m = require("../../render/hyperscript")
var renderer = require("../../render/render")(window)
renderer.setEventCallback(run)
var trust = require("../../render/trust")
var Editor = {
data: "# Markdown Editor\n\nType on the left panel and see the result on the right panel",
view: function(vnode) {
return [
m("textarea.editor-input", {oninput: function(e) {vnode.state.data = e.target.value}}, vnode.state.data),
m(".editor-preview", trust(marked(vnode.state.data))),
]
}
}
function run() {
renderer.render(document.getElementById("editor"), m(Editor))
}
run()
</script>
</body>
</html>

8
examples/threaditjs/app.js
View file

@ -3,8 +3,8 @@ T.time("Setup");
var request = require("../../request/request")(window, Promise).ajax var request = require("../../request/request")(window, Promise).ajax
var m = require("../../render/hyperscript") var m = require("../../render/hyperscript")
var trust = require("../../render/trust") var trust = require("../../render/trust")
var render = require("../../render/render")(window, run).render var renderer = require("../../render/render")(window)
var router = require("../../router/router")(window, "#") var router = require("../../router/router")(window)
//API calls //API calls
var api = { var api = {
@ -178,16 +178,18 @@ var Reply = {
} }
//router //router
renderer.setEventCallback(run)
function run() { function run() {
replayRoute() replayRoute()
} }
var root = document.getElementById("app") var root = document.getElementById("app")
router.setPrefix("#")
var replayRoute = router.defineRoutes({ var replayRoute = router.defineRoutes({
"/thread/:id" : Thread, "/thread/:id" : Thread,
"/" : Home "/" : Home
}, function(view, args) { }, function(view, args) {
render(root, [m(view, args)]) renderer.render(root, [m(view, args)])
}, function() { }, function() {
router.setPath("/") router.setPath("/")
}) })

8
examples/todomvc/todomvc.js
View file

@ -1,6 +1,6 @@
var m = require("../../render/hyperscript") var m = require("../../render/hyperscript")
var render = require("../../render/render")(window, run).render var renderer = require("../../render/render")(window)
var router = require("../../router/router")(window, "#") var router = require("../../router/router")(window)
//model //model
var todos = loadData() var todos = loadData()
@ -124,14 +124,16 @@ function view() {
var root = document.getElementById("todoapp") var root = document.getElementById("todoapp")
var raf var raf
renderer.setEventCallback(run)
function run() { function run() {
cancelAnimationFrame(raf) cancelAnimationFrame(raf)
raf = requestAnimationFrame(function() { raf = requestAnimationFrame(function() {
saveData() saveData()
render(root, view()) renderer.render(root, view())
}) })
} }
router.setPrefix("#")
router.defineRoutes({ router.defineRoutes({
"/": "all", "/": "all",
"/active": "active", "/active": "active",

34
mithril.js
View file

@ -78,6 +78,7 @@ function hyperscript(selector) {
} }
if (typeof selector === "string") return selectorCache[selector](attrs || {}, Node.normalizeChildren(children)) if (typeof selector === "string") return selectorCache[selector](attrs || {}, Node.normalizeChildren(children))
return Node(selector, attrs && attrs.key, attrs || {}, Node.normalizeChildren(children), undefined, undefined) return Node(selector, attrs && attrs.key, attrs || {}, Node.normalizeChildren(children), undefined, undefined)
} }
@ -113,10 +114,7 @@ var createRenderer = function($window) {
} }
function createNode(vnode, hooks) { function createNode(vnode, hooks) {
var tag = vnode.tag var tag = vnode.tag
if (vnode.attrs) { if (vnode.attrs != null) initLifecycle(vnode.attrs, vnode, hooks)
if (vnode.attrs.oninit) vnode.attrs.oninit.call(vnode, vnode)
if (vnode.attrs.oncreate) hooks.push(vnode.attrs.oncreate.bind(vnode, vnode))
}
if (typeof tag === "string") { if (typeof tag === "string") {
switch (tag) { switch (tag) {
case "#": return createText(vnode) case "#": return createText(vnode)
@ -184,8 +182,10 @@ var createRenderer = function($window) {
return element return element
} }
function createComponent(vnode, hooks) { function createComponent(vnode, hooks) {
vnode.state = copy(vnode.tag)
initLifecycle(vnode.tag, vnode, hooks) initLifecycle(vnode.tag, vnode, hooks)
vnode.instance = Node.normalize(vnode.tag.view.call(vnode, vnode)) vnode.instance = Node.normalize(vnode.tag.view.call(vnode.state, vnode))
var element = createNode(vnode.instance, hooks) var element = createNode(vnode.instance, hooks)
vnode.dom = vnode.instance.dom vnode.dom = vnode.instance.dom
vnode.domSize = vnode.instance.domSize vnode.domSize = vnode.instance.domSize
@ -324,7 +324,7 @@ var createRenderer = function($window) {
} }
} }
function updateComponent(parent, old, vnode, hooks, nextSibling, recycling) { function updateComponent(parent, old, vnode, hooks, nextSibling, recycling) {
vnode.instance = Node.normalize(vnode.tag.view.call(vnode, vnode)) vnode.instance = Node.normalize(vnode.tag.view.call(vnode.state, vnode))
updateLifecycle(vnode.tag, vnode, hooks, recycling) updateLifecycle(vnode.tag, vnode, hooks, recycling)
updateNode(parent, old.instance, vnode.instance, hooks, nextSibling, recycling) updateNode(parent, old.instance, vnode.instance, hooks, nextSibling, recycling)
vnode.dom = vnode.instance.dom vnode.dom = vnode.instance.dom
@ -545,6 +545,20 @@ var createRenderer = function($window) {
} }
return false return false
} }
function copy(data) {
if (data instanceof Array) {
var output = []
for (var i = 0; i < data.length; i++) output[i] = copy(data[i])
return output
}
else if (typeof data === "object") {
var output = {}
for (var i in data) output[i] = copy(data[i])
return output
}
return data
}
function render(dom, vnodes) { function render(dom, vnodes) {
var hooks = [] var hooks = []
@ -564,13 +578,15 @@ var createRenderer = function($window) {
var createMounter = function($window, redraw) { var createMounter = function($window, redraw) {
return function(root, component) { return function(root, component) {
var render = createRenderer($window, draw).render var renderer = createRenderer($window)
renderer.setEventCallback(draw)
function draw() { function draw() {
render(root, component) renderer.render(root, {tag: component})
} }
redraw.run = redraw redraw.run = draw
draw()
} }
} }

8
mount.js
View file

@ -2,12 +2,14 @@ var createRenderer = require("./render/render")
module.exports = function($window, redraw) { module.exports = function($window, redraw) {
return function(root, component) { return function(root, component) {
var render = createRenderer($window, draw).render var renderer = createRenderer($window)
renderer.setEventCallback(draw)
function draw() { function draw() {
render(root, component) renderer.render(root, {tag: component})
} }
redraw.run = redraw redraw.run = draw
draw()
} }
} }

1
render/hyperscript.js
View file

@ -63,6 +63,7 @@ function hyperscript(selector) {
} }
if (typeof selector === "string") return selectorCache[selector](attrs || {}, Node.normalizeChildren(children)) if (typeof selector === "string") return selectorCache[selector](attrs || {}, Node.normalizeChildren(children))
return Node(selector, attrs && attrs.key, attrs || {}, Node.normalizeChildren(children), undefined, undefined) return Node(selector, attrs && attrs.key, attrs || {}, Node.normalizeChildren(children), undefined, undefined)
} }

20
render/render.js
View file

@ -87,8 +87,10 @@ module.exports = function($window) {
return element return element
} }
function createComponent(vnode, hooks) { function createComponent(vnode, hooks) {
vnode.state = copy(vnode.tag)
initLifecycle(vnode.tag, vnode, hooks) initLifecycle(vnode.tag, vnode, hooks)
vnode.instance = Node.normalize(vnode.tag.view.call(vnode, vnode)) vnode.instance = Node.normalize(vnode.tag.view.call(vnode.state, vnode))
var element = createNode(vnode.instance, hooks) var element = createNode(vnode.instance, hooks)
vnode.dom = vnode.instance.dom vnode.dom = vnode.instance.dom
vnode.domSize = vnode.instance.domSize vnode.domSize = vnode.instance.domSize
@ -227,7 +229,7 @@ module.exports = function($window) {
} }
} }
function updateComponent(parent, old, vnode, hooks, nextSibling, recycling) { function updateComponent(parent, old, vnode, hooks, nextSibling, recycling) {
vnode.instance = Node.normalize(vnode.tag.view.call(vnode, vnode)) vnode.instance = Node.normalize(vnode.tag.view.call(vnode.state, vnode))
updateLifecycle(vnode.tag, vnode, hooks, recycling) updateLifecycle(vnode.tag, vnode, hooks, recycling)
updateNode(parent, old.instance, vnode.instance, hooks, nextSibling, recycling) updateNode(parent, old.instance, vnode.instance, hooks, nextSibling, recycling)
vnode.dom = vnode.instance.dom vnode.dom = vnode.instance.dom
@ -448,6 +450,20 @@ module.exports = function($window) {
} }
return false return false
} }
function copy(data) {
if (data instanceof Array) {
var output = []
for (var i = 0; i < data.length; i++) output[i] = copy(data[i])
return output
}
else if (typeof data === "object") {
var output = {}
for (var i in data) output[i] = copy(data[i])
return output
}
return data
}
function render(dom, vnodes) { function render(dom, vnodes) {
var hooks = [] var hooks = []

1
render/tests/test-input.js
View file

@ -14,6 +14,7 @@ o.spec("form inputs", function() {
}) })
o.afterEach(function() { o.afterEach(function() {
while (root.firstChild) root.removeChild(root.firstChild) while (root.firstChild) root.removeChild(root.firstChild)
root.vnodes = null
}) })
o.spec("input", function() { o.spec("input", function() {