diff --git a/pub/tree/src/js/components/AnchorComponent.coffee b/pub/tree/src/js/components/AnchorComponent.coffee index 58fa1b05e..1d85b48db 100644 --- a/pub/tree/src/js/components/AnchorComponent.coffee +++ b/pub/tree/src/js/components/AnchorComponent.coffee @@ -1,4 +1,5 @@ -BodyComponent = require './BodyComponent.coffee' +BodyComponent = React.createFactory require './BodyComponent.coffee' +reactify = React.createFactory require './Reactify.coffee' TreeStore = require '../stores/TreeStore.coffee' TreeActions = require '../actions/TreeActions.coffee' @@ -117,7 +118,7 @@ module.exports = recl href = window.tree.basepath path (a {href,key:"arow-#{name}",className:"arow-#{name}"},"") - toText: (elem)-> $(React.renderToStaticMarkup elem).text() + toText: (elem)-> $(React.renderToStaticMarkup reactify manx: elem).text() renderParts: -> [ if @state.pare then _.filter [ diff --git a/pub/tree/src/js/components/BodyComponent.coffee b/pub/tree/src/js/components/BodyComponent.coffee index e78ebf769..ef919c3c6 100644 --- a/pub/tree/src/js/components/BodyComponent.coffee +++ b/pub/tree/src/js/components/BodyComponent.coffee @@ -1,17 +1,16 @@ +reactify = React.createFactory require './Reactify.coffee' + TreeStore = require '../stores/TreeStore.coffee' TreeActions = require '../actions/TreeActions.coffee' -load = require './LoadComponent.coffee' - recl = React.createClass -[div,input,textarea] = [React.DOM.div,React.DOM.input,React.DOM.textarea] +div = React.DOM.div module.exports = recl displayName: "Body" stateFromStore: -> body:TreeStore.getBody() curr:TreeStore.getCurr() - cont:TreeStore.getCont() componentDidMount: -> TreeStore.addChangeListener @_onChangeStore @@ -30,5 +29,4 @@ module.exports = recl @setState @stateFromStore() render: -> (div {}, - (div {id:'body',key:"body"+@state.curr}, - (@state.body ? (div {className:"loading"}, (load {}, ""))))) + (div {id:'body',key:"body"+@state.curr}, (reactify manx: @state.body))) diff --git a/pub/tree/src/js/components/KidsComponent.coffee b/pub/tree/src/js/components/KidsComponent.coffee index e206b98c8..a21352546 100644 --- a/pub/tree/src/js/components/KidsComponent.coffee +++ b/pub/tree/src/js/components/KidsComponent.coffee @@ -1,5 +1,6 @@ TreeStore = require '../stores/TreeStore.coffee' TreeActions = require '../actions/TreeActions.coffee' +reactify = (manx)-> React.createElement window.tree.reactify, {manx} recl = React.createClass [div,a,ul,li,hr] = [React.DOM.div,React.DOM.a,React.DOM.ul,React.DOM.li,React.DOM.hr] @@ -32,5 +33,6 @@ module.exports = recl render: -> div {key:"kids-"+@state.path,className:"kids"}, - for v in _.keys(@state.tree).sort() - [(div {key:v}, @state.cont[@state.path+"/"+v]),(hr {},"")] + unless @gotPath() then (reactify null) + else for v in _.keys(@state.tree).sort() + [(div {key:v}, reactify @state.cont[@state.path+"/"+v]), (hr {},"")] diff --git a/pub/tree/src/js/components/ListComponent.coffee b/pub/tree/src/js/components/ListComponent.coffee index d3f5ef20a..592919ada 100644 --- a/pub/tree/src/js/components/ListComponent.coffee +++ b/pub/tree/src/js/components/ListComponent.coffee @@ -4,6 +4,7 @@ TreeStore = require '../stores/TreeStore.coffee' TreeActions = require '../actions/TreeActions.coffee' load = React.createFactory require './LoadComponent.coffee' +reactify = (manx)-> React.createElement window.tree.reactify, {manx} recl = React.createClass [div,a,ul,li,h1] = [React.DOM.div,React.DOM.a,React.DOM.ul,React.DOM.li,React.DOM.h1] @@ -45,17 +46,16 @@ module.exports = recl a {href,className:(clas preview: @props.dataPreview?)}, if not @props.dataPreview? then (h1 {},item) else if @props.dataType is 'post' - orig = snip.orig head = - gn: 'h1' - c: if snip.meta?.title - [snip.meta.title] - else orig.head - window.tree.reactify + if snip.meta?.title + gn: 'h1' + c: [snip.meta.title] + else snip.head + reactify gn: 'div' - c: [head, (orig.body.slice 0,2)...] - else if @props.titlesOnly? then snip.head - else [snip.head, snip.body] + c: [head, (snip.body.c.slice 0,2)...] + else if @props.titlesOnly? then reactify snip.head + else [(reactify snip.head), (reactify snip.body)] render: -> k = "list" diff --git a/pub/tree/src/js/main.coffee b/pub/tree/src/js/main.coffee index 2aed2768c..617667963 100644 --- a/pub/tree/src/js/main.coffee +++ b/pub/tree/src/js/main.coffee @@ -5,19 +5,9 @@ $ -> React.initializeTouchEvents(true) - codemirror = React.createFactory require './components/CodeMirror.coffee' - head = React.createFactory require './components/AnchorComponent.coffee' - body = React.createFactory require './components/BodyComponent.coffee' - list = React.createFactory require './components/ListComponent.coffee' - kids = React.createFactory require './components/KidsComponent.coffee' - lost = React.createClass - render: -> (React.DOM.div {}, "lost") - components = - kids:kids - list:list - lost:lost - codemirror:codemirror - + head = React.createFactory require './components/AnchorComponent.coffee' + body = React.createFactory require './components/BodyComponent.coffee' + window.tree.reactify = require './components/Reactify.coffee' # sigh window.tree._basepath = window.urb.util.basepath("/") window.tree._basepath += @@ -28,14 +18,6 @@ $ -> if _path.slice(-1) is "/" then _path = _path.slice(0,-1) _path window.tree.fragpath = (path) -> path.replace window.tree._basepath,"" - window.tree.reactify = (obj) -> switch - # manx: {fork: ["string", {gn:"string" ga:{dict:"string"} c:{list:"manx"}}]} - when typeof obj == "string" then obj - when obj.gn? - React.createElement components[obj.gn] ? obj.gn, - obj.ga ? {}, - obj.c.map window.tree.reactify - else throw "Bad react-json #{JSON.stringify obj}" TreeActions = require './actions/TreeActions.coffee' TreePersistence = require './persistence/TreePersistence.coffee' diff --git a/pub/tree/src/js/main.js b/pub/tree/src/js/main.js index 6a43c1767..7b8c9e75d 100644 --- a/pub/tree/src/js/main.js +++ b/pub/tree/src/js/main.js @@ -64,11 +64,13 @@ module.exports = { -},{"../dispatcher/Dispatcher.coffee":8,"../persistence/TreePersistence.coffee":14}],2:[function(require,module,exports){ -var BodyComponent, TreeActions, TreeStore, a, div, recl, ref, +},{"../dispatcher/Dispatcher.coffee":9,"../persistence/TreePersistence.coffee":15}],2:[function(require,module,exports){ +var BodyComponent, TreeActions, TreeStore, a, div, reactify, recl, ref, slice = [].slice; -BodyComponent = require('./BodyComponent.coffee'); +BodyComponent = React.createFactory(require('./BodyComponent.coffee')); + +reactify = React.createFactory(require('./Reactify.coffee')); TreeStore = require('../stores/TreeStore.coffee'); @@ -225,7 +227,9 @@ module.exports = recl({ }, ""); }, toText: function(elem) { - return $(React.renderToStaticMarkup(elem)).text(); + return $(React.renderToStaticMarkup(reactify({ + manx: elem + }))).text(); }, renderParts: function() { var _sibs, ci, curr, j, k, ref1, style, up; @@ -295,26 +299,25 @@ module.exports = recl({ -},{"../actions/TreeActions.coffee":1,"../stores/TreeStore.coffee":15,"./BodyComponent.coffee":3}],3:[function(require,module,exports){ -var TreeActions, TreeStore, div, input, load, recl, ref, textarea; +},{"../actions/TreeActions.coffee":1,"../stores/TreeStore.coffee":16,"./BodyComponent.coffee":3,"./Reactify.coffee":8}],3:[function(require,module,exports){ +var TreeActions, TreeStore, div, reactify, recl; + +reactify = React.createFactory(require('./Reactify.coffee')); TreeStore = require('../stores/TreeStore.coffee'); TreeActions = require('../actions/TreeActions.coffee'); -load = require('./LoadComponent.coffee'); - recl = React.createClass; -ref = [React.DOM.div, React.DOM.input, React.DOM.textarea], div = ref[0], input = ref[1], textarea = ref[2]; +div = React.DOM.div; module.exports = recl({ displayName: "Body", stateFromStore: function() { return { body: TreeStore.getBody(), - curr: TreeStore.getCurr(), - cont: TreeStore.getCont() + curr: TreeStore.getCurr() }; }, componentDidMount: function() { @@ -335,19 +338,18 @@ module.exports = recl({ return this.setState(this.stateFromStore()); }, render: function() { - var ref1; return div({}, div({ id: 'body', key: "body" + this.state.curr - }, (ref1 = this.state.body) != null ? ref1 : div({ - className: "loading" - }, load({}, "")))); + }, reactify({ + manx: this.state.body + }))); } }); -},{"../actions/TreeActions.coffee":1,"../stores/TreeStore.coffee":15,"./LoadComponent.coffee":7}],4:[function(require,module,exports){ +},{"../actions/TreeActions.coffee":1,"../stores/TreeStore.coffee":16,"./Reactify.coffee":8}],4:[function(require,module,exports){ var div, recl, ref, textarea; recl = React.createClass; @@ -372,12 +374,18 @@ module.exports = recl({ },{}],5:[function(require,module,exports){ -var TreeActions, TreeStore, a, div, hr, li, recl, ref, ul; +var TreeActions, TreeStore, a, div, hr, li, reactify, recl, ref, ul; TreeStore = require('../stores/TreeStore.coffee'); TreeActions = require('../actions/TreeActions.coffee'); +reactify = function(manx) { + return React.createElement(window.tree.reactify, { + manx: manx + }); +}; + recl = React.createClass; ref = [React.DOM.div, React.DOM.a, React.DOM.ul, React.DOM.li, React.DOM.hr], div = ref[0], a = ref[1], ul = ref[2], li = ref[3], hr = ref[4]; @@ -424,25 +432,29 @@ module.exports = recl({ className: "kids" }, (function() { var i, len, ref1, results; - ref1 = _.keys(this.state.tree).sort(); - results = []; - for (i = 0, len = ref1.length; i < len; i++) { - v = ref1[i]; - results.push([ - div({ - key: v - }, this.state.cont[this.state.path + "/" + v]), hr({}, "") - ]); + if (!this.gotPath()) { + return reactify(null); + } else { + ref1 = _.keys(this.state.tree).sort(); + results = []; + for (i = 0, len = ref1.length; i < len; i++) { + v = ref1[i]; + results.push([ + div({ + key: v + }, reactify(this.state.cont[this.state.path + "/" + v])), hr({}, "") + ]); + } + return results; } - return results; }).call(this)); } }); -},{"../actions/TreeActions.coffee":1,"../stores/TreeStore.coffee":15}],6:[function(require,module,exports){ -var TreeActions, TreeStore, a, clas, div, h1, li, load, recl, ref, ul, +},{"../actions/TreeActions.coffee":1,"../stores/TreeStore.coffee":16}],6:[function(require,module,exports){ +var TreeActions, TreeStore, a, clas, div, h1, li, load, reactify, recl, ref, ul, slice = [].slice; clas = require('classnames'); @@ -453,6 +465,12 @@ TreeActions = require('../actions/TreeActions.coffee'); load = React.createFactory(require('./LoadComponent.coffee')); +reactify = function(manx) { + return React.createElement(window.tree.reactify, { + manx: manx + }); +}; + recl = React.createClass; ref = [React.DOM.div, React.DOM.a, React.DOM.ul, React.DOM.li, React.DOM.h1], div = ref[0], a = ref[1], ul = ref[2], li = ref[3], h1 = ref[4]; @@ -487,7 +505,7 @@ module.exports = recl({ } }, renderList: function() { - var _keys, head, href, i, item, len, orig, path, ref1, ref2, results, snip; + var _keys, head, href, i, item, len, path, ref1, ref2, results, snip; if (!this.gotPath()) { return div({ className: "loading" @@ -510,13 +528,13 @@ module.exports = recl({ className: clas({ preview: this.props.dataPreview != null }) - }, this.props.dataPreview == null ? h1({}, item) : this.props.dataType === 'post' ? (orig = snip.orig, head = { + }, this.props.dataPreview == null ? h1({}, item) : this.props.dataType === 'post' ? (head = ((ref2 = snip.meta) != null ? ref2.title : void 0) ? { gn: 'h1', - c: ((ref2 = snip.meta) != null ? ref2.title : void 0) ? [snip.meta.title] : orig.head - }, window.tree.reactify({ + c: [snip.meta.title] + } : snip.head, reactify({ gn: 'div', - c: [head].concat(slice.call(orig.body.slice(0, 2))) - })) : this.props.titlesOnly != null ? snip.head : [snip.head, snip.body]))); + c: [head].concat(slice.call(snip.body.c.slice(0, 2))) + })) : this.props.titlesOnly != null ? reactify(snip.head) : [reactify(snip.head), reactify(snip.body)]))); } return results; }, @@ -538,7 +556,7 @@ module.exports = recl({ -},{"../actions/TreeActions.coffee":1,"../stores/TreeStore.coffee":15,"./LoadComponent.coffee":7,"classnames":10}],7:[function(require,module,exports){ +},{"../actions/TreeActions.coffee":1,"../stores/TreeStore.coffee":16,"./LoadComponent.coffee":7,"classnames":11}],7:[function(require,module,exports){ var div, input, recl, ref, textarea; recl = React.createClass; @@ -578,6 +596,60 @@ module.exports = recl({ },{}],8:[function(require,module,exports){ +var codemirror, components, kids, list, load, lost, recl, span; + +recl = React.createClass; + +span = React.DOM.span; + +load = require('./LoadComponent.coffee'); + +codemirror = React.createFactory(require('./CodeMirror.coffee')); + +list = React.createFactory(require('./ListComponent.coffee')); + +kids = React.createFactory(require('./KidsComponent.coffee')); + +lost = React.createFactory(recl({ + render: function() { + return div({}, "lost"); + } +})); + +components = { + kids: kids, + list: list, + lost: lost, + codemirror: codemirror +}; + +module.exports = recl({ + displayName: "Virtual", + render: function() { + return this.walk(this.props.manx); + }, + walk: function(obj, key) { + var ref; + switch (false) { + case !(obj == null): + return span({ + className: "loading" + }, load({}, "")); + case typeof obj !== "string": + return obj; + case obj.gn == null: + return React.createElement((ref = components[obj.gn]) != null ? ref : obj.gn, $.extend({ + key: key + }, obj.ga), obj.c.map(this.walk)); + default: + throw "Bad react-json " + (JSON.stringify(obj)); + } + } +}); + + + +},{"./CodeMirror.coffee":4,"./KidsComponent.coffee":5,"./ListComponent.coffee":6,"./LoadComponent.coffee":7}],9:[function(require,module,exports){ var Dispatcher; Dispatcher = require('flux').Dispatcher; @@ -599,31 +671,18 @@ module.exports = _.extend(new Dispatcher(), { -},{"flux":11}],9:[function(require,module,exports){ +},{"flux":12}],10:[function(require,module,exports){ var rend; rend = React.render; $(function() { - var $body, TreeActions, TreePersistence, body, checkMove, checkScroll, codemirror, components, frag, head, kids, list, lost, po, setSo, so; + var $body, TreeActions, TreePersistence, body, checkMove, checkScroll, frag, head, po, setSo, so; $body = $('body'); React.initializeTouchEvents(true); - codemirror = React.createFactory(require('./components/CodeMirror.coffee')); head = React.createFactory(require('./components/AnchorComponent.coffee')); body = React.createFactory(require('./components/BodyComponent.coffee')); - list = React.createFactory(require('./components/ListComponent.coffee')); - kids = React.createFactory(require('./components/KidsComponent.coffee')); - lost = React.createClass({ - render: function() { - return React.DOM.div({}, "lost"); - } - }); - components = { - kids: kids, - list: list, - lost: lost, - codemirror: codemirror - }; + window.tree.reactify = require('./components/Reactify.coffee'); window.tree._basepath = window.urb.util.basepath("/"); window.tree._basepath += (window.location.pathname.replace(window.tree._basepath, "")).split("/")[0]; window.tree.basepath = function(path) { @@ -640,17 +699,6 @@ $(function() { window.tree.fragpath = function(path) { return path.replace(window.tree._basepath, ""); }; - window.tree.reactify = function(obj) { - var ref, ref1; - switch (false) { - case typeof obj !== "string": - return obj; - case obj.gn == null: - return React.createElement((ref = components[obj.gn]) != null ? ref : obj.gn, (ref1 = obj.ga) != null ? ref1 : {}, obj.c.map(window.tree.reactify)); - default: - throw "Bad react-json " + (JSON.stringify(obj)); - } - }; TreeActions = require('./actions/TreeActions.coffee'); TreePersistence = require('./persistence/TreePersistence.coffee'); frag = window.tree.fragpath(window.location.pathname); @@ -770,7 +818,7 @@ $(function() { -},{"./actions/TreeActions.coffee":1,"./components/AnchorComponent.coffee":2,"./components/BodyComponent.coffee":3,"./components/CodeMirror.coffee":4,"./components/KidsComponent.coffee":5,"./components/ListComponent.coffee":6,"./persistence/TreePersistence.coffee":14}],10:[function(require,module,exports){ +},{"./actions/TreeActions.coffee":1,"./components/AnchorComponent.coffee":2,"./components/BodyComponent.coffee":3,"./components/Reactify.coffee":8,"./persistence/TreePersistence.coffee":15}],11:[function(require,module,exports){ /*! Copyright (c) 2015 Jed Watson. Licensed under the MIT License (MIT), see @@ -821,7 +869,7 @@ $(function() { }()); -},{}],11:[function(require,module,exports){ +},{}],12:[function(require,module,exports){ /** * Copyright (c) 2014-2015, Facebook, Inc. * All rights reserved. @@ -833,7 +881,7 @@ $(function() { module.exports.Dispatcher = require('./lib/Dispatcher') -},{"./lib/Dispatcher":12}],12:[function(require,module,exports){ +},{"./lib/Dispatcher":13}],13:[function(require,module,exports){ /* * Copyright (c) 2014, Facebook, Inc. * All rights reserved. @@ -1085,7 +1133,7 @@ var _prefix = 'ID_'; module.exports = Dispatcher; -},{"./invariant":13}],13:[function(require,module,exports){ +},{"./invariant":14}],14:[function(require,module,exports){ /** * Copyright (c) 2014, Facebook, Inc. * All rights reserved. @@ -1140,7 +1188,7 @@ var invariant = function(condition, format, a, b, c, d, e, f) { module.exports = invariant; -},{}],14:[function(require,module,exports){ +},{}],15:[function(require,module,exports){ module.exports = { get: function(path, query, cb) { var url; @@ -1158,7 +1206,7 @@ module.exports = { -},{}],15:[function(require,module,exports){ +},{}],16:[function(require,module,exports){ var EventEmitter, MessageDispatcher, TreeStore, _cont, _curr, _got_snip, _snip, _tree, clog; EventEmitter = require('events').EventEmitter; @@ -1239,23 +1287,19 @@ TreeStore = _.extend(EventEmitter.prototype, { for (k in kids) { v = kids[k]; _snip[path + "/" + v.name] = { - head: window.tree.reactify({ + head: { gn: 'h1', c: v.head - }), - body: window.tree.reactify({ + }, + body: { gn: 'div', c: v.snip - }), - orig: { - head: v.head, - body: v.snip }, meta: v.meta }; } } else { - _cont[path] = window.tree.reactify({ + _cont[path] = { gn: 'div', c: [ { @@ -1277,7 +1321,7 @@ TreeStore = _.extend(EventEmitter.prototype, { ] } ] - }); + }; } return _got_snip[path] = true; }, @@ -1287,13 +1331,13 @@ TreeStore = _.extend(EventEmitter.prototype, { results = []; for (k in kids) { v = kids[k]; - results.push(_cont[path + "/" + v.name] = window.tree.reactify(v.body)); + results.push(_cont[path + "/" + v.name] = v.body); } return results; }, loadPath: function(path, body, kids) { this.mergePathToTree(path, _.pluck(kids, "name")); - return _cont[path] = window.tree.reactify(body); + return _cont[path] = body; }, getKids: function() { return _.keys(this.getTree(_curr.split("/"))); @@ -1397,7 +1441,7 @@ module.exports = TreeStore; -},{"../dispatcher/Dispatcher.coffee":8,"events":16}],16:[function(require,module,exports){ +},{"../dispatcher/Dispatcher.coffee":9,"events":17}],17:[function(require,module,exports){ // Copyright Joyent, Inc. and other Node contributors. // // Permission is hereby granted, free of charge, to any person obtaining a @@ -1700,4 +1744,4 @@ function isUndefined(arg) { return arg === void 0; } -},{}]},{},[9]); +},{}]},{},[10]); diff --git a/pub/tree/src/js/stores/TreeStore.coffee b/pub/tree/src/js/stores/TreeStore.coffee index 103e5a794..878f75424 100644 --- a/pub/tree/src/js/stores/TreeStore.coffee +++ b/pub/tree/src/js/stores/TreeStore.coffee @@ -47,12 +47,11 @@ TreeStore = _.extend EventEmitter.prototype, { if kids?.length isnt 0 for k,v of kids _snip[path+"/"+v.name] = - head: window.tree.reactify {gn:'h1',c:v.head} - body: window.tree.reactify {gn:'div',c:v.snip} - orig: {head:v.head,body:v.snip} + head: {gn:'h1',c:v.head} + body: {gn:'div',c:v.snip} meta: v.meta else - _cont[path] = window.tree.reactify + _cont[path] = gn: 'div' c: [ {gn:'h1', ga:{className:'error'}, c:['Error: Empty path']} {gn:'div', c:[ @@ -64,11 +63,11 @@ TreeStore = _.extend EventEmitter.prototype, { loadKids: (path,kids) -> @mergePathToTree path,_.pluck(kids,"name") for k,v of kids - _cont[path+"/"+v.name] = window.tree.reactify v.body + _cont[path+"/"+v.name] = v.body loadPath: (path,body,kids) -> @mergePathToTree path,_.pluck(kids,"name") - _cont[path] = window.tree.reactify body + _cont[path] = body getKids: -> _.keys @getTree _curr.split("/") diff --git a/tree/json.hook b/tree/json.hook index 326d59f2d..afb3956fe 100644 --- a/tree/json.hook +++ b/tree/json.hook @@ -1,4 +1,6 @@ :: +:::: /hook/json/tree + :: /? 314 /+ tree /= gas /$ fuel