From 3a525340fcd03135f618308b1273eab269c6fb75 Mon Sep 17 00:00:00 2001 From: foxdonut Date: Fri, 6 May 2016 17:25:42 -0400 Subject: [PATCH] Added meiosis-tracer. --- todomvc/index.html | 20 +++++++++++--------- todomvc/js/meiosis-tracer.min.js | 2 ++ todomvc/js/meiosis-tracer.min.js.map | 1 + todomvc/vanillajs/main.js | 8 +++++--- todomvc/vanillajs/ready.js | 2 ++ 5 files changed, 21 insertions(+), 12 deletions(-) create mode 100644 todomvc/js/meiosis-tracer.min.js create mode 100644 todomvc/js/meiosis-tracer.min.js.map diff --git a/todomvc/index.html b/todomvc/index.html index 29442fdc..9297a40a 100644 --- a/todomvc/index.html +++ b/todomvc/index.html @@ -1,16 +1,18 @@ - - - Meiosis • TodoMVC - - - - - - + + + Meiosis • TodoMVC + + + + +
+ + + diff --git a/todomvc/js/meiosis-tracer.min.js b/todomvc/js/meiosis-tracer.min.js new file mode 100644 index 00000000..157c3ae8 --- /dev/null +++ b/todomvc/js/meiosis-tracer.min.js @@ -0,0 +1,2 @@ +var meiosisTracer=function(e){function t(n){if(r[n])return r[n].exports;var a=r[n]={exports:{},id:n,loaded:!1};return e[n].call(a.exports,a,a.exports,t),a.loaded=!0,a.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){"use strict";var n=r(1);e.exports=n.meiosisTracer},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0}),t.meiosisTracer=void 0;var a=r(2),i=r(3),d=r(4),c=n(d),u=a.initialModel,o=function(e,t,r){e({receiveUpdate:(0,c["default"])(u,i.updateView)}),(0,i.initialView)(r,t,u)};t.meiosisTracer=o},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r={tracerStates:[],tracerIndex:0};t.initialModel=r},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r="tracerSlider",n="tracerIndex",a="tracerModel",i="tracerUpdate",d=function(e,t){var d=e.model,c=e.update,u=document.getElementById(r);u.setAttribute("max",String(t.tracerStates.length-1)),u.value=String(t.tracerIndex);var o=document.getElementById(n);o.innerHTML=String(t.tracerIndex);var s=document.getElementById(a);s.innerHTML=JSON.stringify(d);var l=document.getElementById(i);l.innerHTML=JSON.stringify(c)},c=function(e,t){return function(r){var n=parseInt(r.target.value,10),a=t.tracerStates[n];e(a.model),t.tracerIndex=n,d(a,t)}},u=function(e){return function(t){try{var r=JSON.parse(t.target.value);e(r)}catch(n){}}},o=function(e,t,d){var o=document.querySelector(e);if(o){var s="
"+String(d.tracerIndex)+"
";o.innerHTML=s,document.getElementById(r).addEventListener("input",c(t,d)),document.getElementById(a).addEventListener("keyup",u(t))}};t.initialView=o,t.updateView=d},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=function(e,t){return function(r,n){var a=JSON.parse(JSON.stringify(r)),i={model:a,update:n};return e.tracerStates.push(i),e.tracerIndex=e.tracerStates.length-1,t(i,e),r}};t["default"]=r}]); +//# sourceMappingURL=meiosis-tracer.min.js.map \ No newline at end of file diff --git a/todomvc/js/meiosis-tracer.min.js.map b/todomvc/js/meiosis-tracer.min.js.map new file mode 100644 index 00000000..aedd9c5b --- /dev/null +++ b/todomvc/js/meiosis-tracer.min.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["webpack:///meiosis-tracer.min.js","webpack:///webpack/bootstrap 604db7573ec20fcb3be7","webpack:///./src/index.js","webpack:///./src/meiosis-tracer.js","webpack:///./src/model.js","webpack:///./src/view.js","webpack:///./src/receiveUpdate.js"],"names":["meiosisTracer","modules","__webpack_require__","moduleId","installedModules","exports","module","id","loaded","call","m","c","p","_meiosisTracer","_interopRequireDefault","obj","__esModule","default","Object","defineProperty","value","undefined","_model","_view","_receiveUpdate","_receiveUpdate2","tracerModel","initialModel","createComponent","renderRoot","selector","receiveUpdate","updateView","initialView","tracerStates","tracerIndex","tracerId","tracerIndexId","tracerModelId","tracerUpdateId","_ref","model","update","tracer","document","getElementById","setAttribute","String","length","innerHTML","tracerModelEl","JSON","stringify","tracerUpdateEl","onSliderChange","evt","index","parseInt","target","snapshot","onModelChange","parse","err","querySelector","viewHtml","addEventListener","view","modelCopy","modelAndUpdate","push"],"mappings":"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","file":"meiosis-tracer.min.js","sourcesContent":["var meiosisTracer =\n/******/ (function(modules) { // webpackBootstrap\n/******/ \t// The module cache\n/******/ \tvar installedModules = {};\n/******/\n/******/ \t// The require function\n/******/ \tfunction __webpack_require__(moduleId) {\n/******/\n/******/ \t\t// Check if module is in cache\n/******/ \t\tif(installedModules[moduleId])\n/******/ \t\t\treturn installedModules[moduleId].exports;\n/******/\n/******/ \t\t// Create a new module (and put it into the cache)\n/******/ \t\tvar module = installedModules[moduleId] = {\n/******/ \t\t\texports: {},\n/******/ \t\t\tid: moduleId,\n/******/ \t\t\tloaded: false\n/******/ \t\t};\n/******/\n/******/ \t\t// Execute the module function\n/******/ \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n/******/\n/******/ \t\t// Flag the module as loaded\n/******/ \t\tmodule.loaded = true;\n/******/\n/******/ \t\t// Return the exports of the module\n/******/ \t\treturn module.exports;\n/******/ \t}\n/******/\n/******/\n/******/ \t// expose the modules object (__webpack_modules__)\n/******/ \t__webpack_require__.m = modules;\n/******/\n/******/ \t// expose the module cache\n/******/ \t__webpack_require__.c = installedModules;\n/******/\n/******/ \t// __webpack_public_path__\n/******/ \t__webpack_require__.p = \"\";\n/******/\n/******/ \t// Load entry module and return exports\n/******/ \treturn __webpack_require__(0);\n/******/ })\n/************************************************************************/\n/******/ ([\n/* 0 */\n/***/ function(module, exports, __webpack_require__) {\n\n\t\"use strict\";\n\t\n\tvar _meiosisTracer = __webpack_require__(1);\n\t\n\tmodule.exports = _meiosisTracer.meiosisTracer;\n\n/***/ },\n/* 1 */\n/***/ function(module, exports, __webpack_require__) {\n\n\t\"use strict\";\n\t\n\tObject.defineProperty(exports, \"__esModule\", {\n\t value: true\n\t});\n\texports.meiosisTracer = undefined;\n\t\n\tvar _model = __webpack_require__(2);\n\t\n\tvar _view = __webpack_require__(3);\n\t\n\tvar _receiveUpdate = __webpack_require__(4);\n\t\n\tvar _receiveUpdate2 = _interopRequireDefault(_receiveUpdate);\n\t\n\tfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\t\n\tvar tracerModel = _model.initialModel;\n\t\n\tvar meiosisTracer = function meiosisTracer(createComponent, renderRoot, selector) {\n\t createComponent({\n\t receiveUpdate: (0, _receiveUpdate2.default)(tracerModel, _view.updateView)\n\t });\n\t (0, _view.initialView)(selector, renderRoot, tracerModel);\n\t};\n\t\n\texports.meiosisTracer = meiosisTracer;\n\n/***/ },\n/* 2 */\n/***/ function(module, exports) {\n\n\t\"use strict\";\n\t\n\tObject.defineProperty(exports, \"__esModule\", {\n\t value: true\n\t});\n\tvar initialModel = {\n\t tracerStates: [],\n\t tracerIndex: 0\n\t};\n\t\n\texports.initialModel = initialModel;\n\n/***/ },\n/* 3 */\n/***/ function(module, exports) {\n\n\t\"use strict\";\n\t\n\tObject.defineProperty(exports, \"__esModule\", {\n\t value: true\n\t});\n\tvar tracerId = \"tracerSlider\";\n\tvar tracerIndexId = \"tracerIndex\";\n\tvar tracerModelId = \"tracerModel\";\n\tvar tracerUpdateId = \"tracerUpdate\";\n\t\n\tvar updateView = function updateView(_ref, tracerModel) {\n\t var model = _ref.model;\n\t var update = _ref.update;\n\t\n\t var tracer = document.getElementById(tracerId);\n\t tracer.setAttribute(\"max\", String(tracerModel.tracerStates.length - 1));\n\t tracer.value = String(tracerModel.tracerIndex);\n\t\n\t var tracerIndex = document.getElementById(tracerIndexId);\n\t tracerIndex.innerHTML = String(tracerModel.tracerIndex);\n\t\n\t var tracerModelEl = document.getElementById(tracerModelId);\n\t tracerModelEl.innerHTML = JSON.stringify(model);\n\t\n\t var tracerUpdateEl = document.getElementById(tracerUpdateId);\n\t tracerUpdateEl.innerHTML = JSON.stringify(update);\n\t};\n\t\n\tvar onSliderChange = function onSliderChange(renderRoot, tracerModel) {\n\t return function (evt) {\n\t var index = parseInt(evt.target.value, 10);\n\t var snapshot = tracerModel.tracerStates[index];\n\t renderRoot(snapshot.model);\n\t tracerModel.tracerIndex = index;\n\t updateView(snapshot, tracerModel);\n\t };\n\t};\n\t\n\tvar onModelChange = function onModelChange(renderRoot) {\n\t return function (evt) {\n\t try {\n\t var model = JSON.parse(evt.target.value);\n\t renderRoot(model);\n\t } catch (err) {\n\t // ignore invalid JSON\n\t }\n\t };\n\t};\n\t\n\tvar initialView = function initialView(selector, renderRoot, tracerModel) {\n\t var target = document.querySelector(selector);\n\t\n\t if (target) {\n\t var viewHtml = \"
\" + \"
\" + String(tracerModel.tracerIndex) + \"
\" + \"\" + \"
\";\n\t\n\t target.innerHTML = viewHtml;\n\t document.getElementById(tracerId).addEventListener(\"input\", onSliderChange(renderRoot, tracerModel));\n\t document.getElementById(tracerModelId).addEventListener(\"keyup\", onModelChange(renderRoot));\n\t }\n\t};\n\t\n\texports.initialView = initialView;\n\texports.updateView = updateView;\n\n/***/ },\n/* 4 */\n/***/ function(module, exports) {\n\n\t\"use strict\";\n\t\n\tObject.defineProperty(exports, \"__esModule\", {\n\t value: true\n\t});\n\tvar receiveUpdate = function receiveUpdate(tracerModel, view) {\n\t return function (model, update) {\n\t var modelCopy = JSON.parse(JSON.stringify(model));\n\t var modelAndUpdate = { model: modelCopy, update: update };\n\t tracerModel.tracerStates.push(modelAndUpdate);\n\t tracerModel.tracerIndex = tracerModel.tracerStates.length - 1;\n\t\n\t view(modelAndUpdate, tracerModel);\n\t\n\t return model;\n\t };\n\t};\n\t\n\texports.default = receiveUpdate;\n\n/***/ }\n/******/ ]);\n\n\n/** WEBPACK FOOTER **\n ** meiosis-tracer.min.js\n **/"," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\texports: {},\n \t\t\tid: moduleId,\n \t\t\tloaded: false\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.loaded = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(0);\n\n\n\n/** WEBPACK FOOTER **\n ** webpack/bootstrap 604db7573ec20fcb3be7\n **/","import { meiosisTracer } from \"./meiosis-tracer\";\n\nmodule.exports = meiosisTracer;\n\n\n\n/** WEBPACK FOOTER **\n ** ./src/index.js\n **/","import { initialModel } from \"./model\";\nimport { initialView, updateView } from \"./view\";\nimport receiveUpdate from \"./receiveUpdate\";\n\nconst tracerModel = initialModel;\n\nconst meiosisTracer = (createComponent, renderRoot, selector) => {\n createComponent({\n receiveUpdate: receiveUpdate(tracerModel, updateView)\n });\n initialView(selector, renderRoot, tracerModel);\n};\n\nexport { meiosisTracer };\n\n\n\n/** WEBPACK FOOTER **\n ** ./src/meiosis-tracer.js\n **/","const initialModel = {\n tracerStates: [],\n tracerIndex: 0\n};\n\nexport { initialModel };\n\n\n\n/** WEBPACK FOOTER **\n ** ./src/model.js\n **/","const tracerId = \"tracerSlider\";\nconst tracerIndexId = \"tracerIndex\";\nconst tracerModelId = \"tracerModel\";\nconst tracerUpdateId = \"tracerUpdate\";\n\nconst updateView = ({model, update}, tracerModel) => {\n const tracer = document.getElementById(tracerId);\n tracer.setAttribute(\"max\", String(tracerModel.tracerStates.length - 1));\n tracer.value = String(tracerModel.tracerIndex);\n\n const tracerIndex = document.getElementById(tracerIndexId);\n tracerIndex.innerHTML = String(tracerModel.tracerIndex);\n\n const tracerModelEl = document.getElementById(tracerModelId);\n tracerModelEl.innerHTML = JSON.stringify(model);\n\n const tracerUpdateEl = document.getElementById(tracerUpdateId);\n tracerUpdateEl.innerHTML = JSON.stringify(update);\n};\n\nconst onSliderChange = (renderRoot, tracerModel) => evt => {\n const index = parseInt(evt.target.value, 10);\n const snapshot = tracerModel.tracerStates[index];\n renderRoot(snapshot.model);\n tracerModel.tracerIndex = index;\n updateView(snapshot, tracerModel);\n};\n\nconst onModelChange = renderRoot => evt => {\n try {\n const model = JSON.parse(evt.target.value);\n renderRoot(model);\n }\n catch (err) {\n // ignore invalid JSON\n }\n};\n\nconst initialView = (selector, renderRoot, tracerModel) => {\n const target = document.querySelector(selector);\n\n if (target) {\n const viewHtml = \"
\" +\n \"
\" + String(tracerModel.tracerIndex) + \"
\" +\n \"\" +\n \"
\";\n\n target.innerHTML = viewHtml;\n document.getElementById(tracerId).addEventListener(\"input\", onSliderChange(renderRoot, tracerModel));\n document.getElementById(tracerModelId).addEventListener(\"keyup\", onModelChange(renderRoot));\n }\n};\n\nexport { initialView, updateView };\n\n\n\n/** WEBPACK FOOTER **\n ** ./src/view.js\n **/","const receiveUpdate = (tracerModel, view) => (model, update) => {\n const modelCopy = JSON.parse(JSON.stringify(model));\n const modelAndUpdate = { model: modelCopy, update };\n tracerModel.tracerStates.push(modelAndUpdate);\n tracerModel.tracerIndex = tracerModel.tracerStates.length - 1;\n\n view(modelAndUpdate, tracerModel);\n\n return model;\n};\n\nexport default receiveUpdate;\n\n\n\n/** WEBPACK FOOTER **\n ** ./src/receiveUpdate.js\n **/"],"sourceRoot":""} \ No newline at end of file diff --git a/todomvc/vanillajs/main.js b/todomvc/vanillajs/main.js index ed6af133..7522bc3b 100644 --- a/todomvc/vanillajs/main.js +++ b/todomvc/vanillajs/main.js @@ -1,6 +1,6 @@ -/*global meiosis, meiosisVanillaJs, window*/ +/*global meiosis, meiosisVanillaJs, meiosisTracer, window*/ (function(ref) { - var Meiosis = meiosis(meiosisVanillaJs.intoSelector("body")); + var Meiosis = meiosis(meiosisVanillaJs.intoId("app")); var createComponent = Meiosis.createComponent; @@ -15,5 +15,7 @@ ref.viewModel(createComponent); - Meiosis.run(Main); + var renderRoot = Meiosis.run(Main); + + meiosisTracer(createComponent, renderRoot, "#tracer"); })(window); diff --git a/todomvc/vanillajs/ready.js b/todomvc/vanillajs/ready.js index 648edb19..4690026d 100644 --- a/todomvc/vanillajs/ready.js +++ b/todomvc/vanillajs/ready.js @@ -42,6 +42,8 @@ actions.deleteTodoId(todoId); }); + document.write("
"); + /* // select the target node var target = document.querySelector("body");