git.iko.soy/purestack-dev/purescript-plum
on master help sign in
Got basic View working
fd949c8iko
plum/index.js+766−340
compare with master
unifiedsplit
@@ -1,4 +1,18 @@
1(() => {
1(() => {
2+ // output/Data.Function/index.js
3+ var flip = function(f) {
4+ return function(b) {
5+ return function(a) {
6+ return f(a)(b);
7+ };
8+ };
9+ };
10+ var $$const = function(a) {
11+ return function(v) {
12+ return a;
13+ };
14+ };
15+
2 // output/Data.Functor/foreign.js
16 // output/Data.Functor/foreign.js
3 var arrayMap = function(f) {
17 var arrayMap = function(f) {
4 return function(arr) {
18 return function(arr) {
@@ -41,20 +55,52 @@
41 };
55 };
42 };
56 };
43
57
44− // output/Effect/foreign.js
58+ // output/Data.Array/foreign.js
45− var pureE = function(a) {
59+ var rangeImpl = function(start2, end) {
46− return function() {
60+ var step2 = start2 > end ? -1 : 1;
47− return a;
61+ var result = new Array(step2 * (end - start2) + 1);
62+ var i = start2, n = 0;
63+ while (i !== end) {
64+ result[n++] = i;
65+ i += step2;
48− };
66+ }
67+ result[n] = i;
68+ return result;
49 };
69 };
50− var bindE = function(a) {
70+ var replicateFill = function(count, value12) {
51− return function(f) {
71+ if (count < 1) {
72+ return [];
73+ }
74+ var result = new Array(count);
75+ return result.fill(value12);
76+ };
77+ var replicatePolyfill = function(count, value12) {
78+ var result = [];
79+ var n = 0;
80+ for (var i = 0; i < count; i++) {
81+ result[n++] = value12;
82+ }
52− return function() {
83+ return result;
84+ };
85+ var replicateImpl = typeof Array.prototype.fill === "function" ? replicateFill : replicatePolyfill;
86+
87+ // output/Data.Semigroup/foreign.js
88+ var concatArray = function(xs) {
53− return f(a())();
89+ return function(ys) {
54− };
90+ if (xs.length === 0) return ys;
91+ if (ys.length === 0) return xs;
92+ return xs.concat(ys);
55 };
93 };
56 };
94 };
57
95
96+ // output/Data.Semigroup/index.js
97+ var semigroupArray = {
98+ append: concatArray
99+ };
100+ var append = function(dict) {
101+ return dict.append;
102+ };
103+
58 // output/Control.Bind/foreign.js
104 // output/Control.Bind/foreign.js
59 var arrayBind = typeof Array.prototype.flatMap === "function" ? function(arr) {
105 var arrayBind = typeof Array.prototype.flatMap === "function" ? function(arr) {
60 return function(f) {
106 return function(f) {
@@ -79,6 +125,9 @@
79 var bind = function(dict) {
125 var bind = function(dict) {
80 return dict.bind;
126 return dict.bind;
81 };
127 };
128+ var bindFlipped = function(dictBind) {
129+ return flip(bind(dictBind));
130+ };
82
131
83 // output/Control.Monad/index.js
132 // output/Control.Monad/index.js
84 var ap = function(dictMonad) {
133 var ap = function(dictMonad) {
@@ -95,16 +144,69 @@
95 };
144 };
96 };
145 };
97
146
98− // output/Data.Semigroup/index.js
147+ // output/Data.Bounded/foreign.js
148+ var topChar = String.fromCharCode(65535);
149+ var bottomChar = String.fromCharCode(0);
150+ var topNumber = Number.POSITIVE_INFINITY;
151+ var bottomNumber = Number.NEGATIVE_INFINITY;
152+
153+ // output/Data.Show/foreign.js
154+ var showIntImpl = function(n) {
155+ return n.toString();
156+ };
157+
158+ // output/Data.Show/index.js
159+ var showInt = {
160+ show: showIntImpl
161+ };
99− var append = function(dict) {
162+ var show = function(dict) {
100− return dict.append;
163+ return dict.show;
101 };
164 };
102
165
166+ // output/Data.Maybe/index.js
167+ var Nothing = /* @__PURE__ */ function() {
168+ function Nothing2() {
169+ }
170+ ;
171+ Nothing2.value = new Nothing2();
172+ return Nothing2;
173+ }();
174+ var Just = /* @__PURE__ */ function() {
175+ function Just2(value0) {
176+ this.value0 = value0;
177+ }
178+ ;
179+ Just2.create = function(value0) {
180+ return new Just2(value0);
181+ };
182+ return Just2;
183+ }();
184+
103 // output/Data.Monoid/index.js
185 // output/Data.Monoid/index.js
186+ var monoidArray = {
187+ mempty: [],
188+ Semigroup0: function() {
189+ return semigroupArray;
190+ }
191+ };
104 var mempty = function(dict) {
192 var mempty = function(dict) {
105 return dict.mempty;
193 return dict.mempty;
106 };
194 };
107
195
196+ // output/Effect/foreign.js
197+ var pureE = function(a) {
198+ return function() {
199+ return a;
200+ };
201+ };
202+ var bindE = function(a) {
203+ return function(f) {
204+ return function() {
205+ return f(a())();
206+ };
207+ };
208+ };
209+
108 // output/Effect/index.js
210 // output/Effect/index.js
109 var $runtime_lazy = function(name14, moduleName, init) {
211 var $runtime_lazy = function(name14, moduleName, init) {
110 var state2 = 0;
212 var state2 = 0;
@@ -153,44 +255,6 @@
153 });
255 });
154 var functorEffect = /* @__PURE__ */ $lazy_functorEffect(20);
256 var functorEffect = /* @__PURE__ */ $lazy_functorEffect(20);
155
257
156− // output/Data.Bounded/foreign.js
157− var topChar = String.fromCharCode(65535);
158− var bottomChar = String.fromCharCode(0);
159− var topNumber = Number.POSITIVE_INFINITY;
160− var bottomNumber = Number.NEGATIVE_INFINITY;
161−
162− // output/Data.Show/foreign.js
163− var showIntImpl = function(n) {
164− return n.toString();
165− };
166−
167− // output/Data.Show/index.js
168− var showInt = {
169− show: showIntImpl
170− };
171− var show = function(dict) {
172− return dict.show;
173− };
174−
175− // output/Data.Maybe/index.js
176− var Nothing = /* @__PURE__ */ function() {
177− function Nothing2() {
178− }
179− ;
180− Nothing2.value = new Nothing2();
181− return Nothing2;
182− }();
183− var Just = /* @__PURE__ */ function() {
184− function Just2(value0) {
185− this.value0 = value0;
186− }
187− ;
188− Just2.create = function(value0) {
189− return new Just2(value0);
190− };
191− return Just2;
192− }();
193−
194 // output/Effect.Ref/foreign.js
258 // output/Effect.Ref/foreign.js
195 var _new = function(val) {
259 var _new = function(val) {
196 return function() {
260 return function() {
@@ -213,12 +277,169 @@
213 // output/Effect.Ref/index.js
277 // output/Effect.Ref/index.js
214 var $$new = _new;
278 var $$new = _new;
215
279
280+ // output/Control.Monad.ST.Internal/foreign.js
281+ var map_ = function(f) {
282+ return function(a) {
283+ return function() {
284+ return f(a());
285+ };
286+ };
287+ };
288+ var pure_ = function(a) {
289+ return function() {
290+ return a;
291+ };
292+ };
293+ var bind_ = function(a) {
294+ return function(f) {
295+ return function() {
296+ return f(a())();
297+ };
298+ };
299+ };
300+
301+ // output/Control.Monad.ST.Internal/index.js
302+ var $runtime_lazy2 = function(name14, moduleName, init) {
303+ var state2 = 0;
304+ var val;
305+ return function(lineNumber) {
306+ if (state2 === 2) return val;
307+ if (state2 === 1) throw new ReferenceError(name14 + " was needed before it finished initializing (module " + moduleName + ", line " + lineNumber + ")", moduleName, lineNumber);
308+ state2 = 1;
309+ val = init();
310+ state2 = 2;
311+ return val;
312+ };
313+ };
314+ var functorST = {
315+ map: map_
316+ };
317+ var monadST = {
318+ Applicative0: function() {
319+ return applicativeST;
320+ },
321+ Bind1: function() {
322+ return bindST;
323+ }
324+ };
325+ var bindST = {
326+ bind: bind_,
327+ Apply0: function() {
328+ return $lazy_applyST(0);
329+ }
330+ };
331+ var applicativeST = {
332+ pure: pure_,
333+ Apply0: function() {
334+ return $lazy_applyST(0);
335+ }
336+ };
337+ var $lazy_applyST = /* @__PURE__ */ $runtime_lazy2("applyST", "Control.Monad.ST.Internal", function() {
338+ return {
339+ apply: ap(monadST),
340+ Functor0: function() {
341+ return functorST;
342+ }
343+ };
344+ });
345+
346+ // output/Data.Foldable/foreign.js
347+ var foldrArray = function(f) {
348+ return function(init) {
349+ return function(xs) {
350+ var acc = init;
351+ var len = xs.length;
352+ for (var i = len - 1; i >= 0; i--) {
353+ acc = f(xs[i])(acc);
354+ }
355+ return acc;
356+ };
357+ };
358+ };
359+ var foldlArray = function(f) {
360+ return function(init) {
361+ return function(xs) {
362+ var acc = init;
363+ var len = xs.length;
364+ for (var i = 0; i < len; i++) {
365+ acc = f(acc)(xs[i]);
366+ }
367+ return acc;
368+ };
369+ };
370+ };
371+
372+ // output/Data.Tuple/index.js
373+ var Tuple = /* @__PURE__ */ function() {
374+ function Tuple2(value0, value1) {
375+ this.value0 = value0;
376+ this.value1 = value1;
377+ }
378+ ;
379+ Tuple2.create = function(value0) {
380+ return function(value1) {
381+ return new Tuple2(value0, value1);
382+ };
383+ };
384+ return Tuple2;
385+ }();
386+
387+ // output/Unsafe.Coerce/foreign.js
388+ var unsafeCoerce2 = function(x) {
389+ return x;
390+ };
391+
392+ // output/Data.Foldable/index.js
393+ var foldr = function(dict) {
394+ return dict.foldr;
395+ };
396+ var foldMapDefaultR = function(dictFoldable) {
397+ var foldr2 = foldr(dictFoldable);
398+ return function(dictMonoid) {
399+ var append3 = append(dictMonoid.Semigroup0());
400+ var mempty3 = mempty(dictMonoid);
401+ return function(f) {
402+ return foldr2(function(x) {
403+ return function(acc) {
404+ return append3(f(x))(acc);
405+ };
406+ })(mempty3);
407+ };
408+ };
409+ };
410+ var foldableArray = {
411+ foldr: foldrArray,
412+ foldl: foldlArray,
413+ foldMap: function(dictMonoid) {
414+ return foldMapDefaultR(foldableArray)(dictMonoid);
415+ }
416+ };
417+ var foldMap = function(dict) {
418+ return dict.foldMap;
419+ };
420+
421+ // output/Data.Function.Uncurried/foreign.js
422+ var runFn2 = function(fn) {
423+ return function(a) {
424+ return function(b) {
425+ return fn(a, b);
426+ };
427+ };
428+ };
429+
430+ // output/Data.Array/index.js
431+ var foldMap1 = /* @__PURE__ */ foldMap(foldableArray);
432+ var range2 = /* @__PURE__ */ runFn2(rangeImpl);
433+ var foldMap2 = function(dictMonoid) {
434+ return foldMap1(dictMonoid);
435+ };
436+
216 // output/Maquette/foreign.js
437 // output/Maquette/foreign.js
217 var NAMESPACE_W3 = "http://www.w3.org/";
438 var NAMESPACE_W3 = "http://www.w3.org/";
218 var NAMESPACE_SVG = NAMESPACE_W3 + "2000/svg";
439 var NAMESPACE_SVG = NAMESPACE_W3 + "2000/svg";
219 var NAMESPACE_XLINK = NAMESPACE_W3 + "1999/xlink";
440 var NAMESPACE_XLINK = NAMESPACE_W3 + "1999/xlink";
220 var emptyArray = [];
441 var emptyArray = [];
221− var extend = function(base, overrides) {
442+ var extend2 = function(base, overrides) {
222 var result = {};
443 var result = {};
223 Object.keys(base).forEach(function(key) {
444 Object.keys(base).forEach(function(key) {
224 result[key] = base[key];
445 result[key] = base[key];
@@ -467,7 +688,7 @@
467 domNode.id = found;
688 domNode.id = found;
468 } else {
689 } else {
469 if (found === "svg") {
690 if (found === "svg") {
470− projectionOptions = extend(projectionOptions, {
691+ projectionOptions = extend2(projectionOptions, {
471 namespace: NAMESPACE_SVG
692 namespace: NAMESPACE_SVG
472 });
693 });
473 }
694 }
@@ -657,7 +878,7 @@
657 vnode.domNode = domNode;
878 vnode.domNode = domNode;
658 } else {
879 } else {
659 if (vnode.vnodeSelector.lastIndexOf("svg", 0) === 0) {
880 if (vnode.vnodeSelector.lastIndexOf("svg", 0) === 0) {
660− projectionOptions = extend(projectionOptions, {
881+ projectionOptions = extend2(projectionOptions, {
661 namespace: NAMESPACE_SVG
882 namespace: NAMESPACE_SVG
662 });
883 });
663 }
884 }
@@ -718,7 +939,7 @@
718 }
939 }
719 };
940 };
720 var applyDefaultProjectionOptions = function(projectorOptions) {
941 var applyDefaultProjectionOptions = function(projectorOptions) {
721− return extend(DEFAULT_PROJECTION_OPTIONS, projectorOptions);
942+ return extend2(DEFAULT_PROJECTION_OPTIONS, projectorOptions);
722 };
943 };
723 var dom = {
944 var dom = {
724 /**
945 /**
@@ -854,20 +1075,20 @@
854 }
1075 }
855 return parentNodePath;
1076 return parentNodePath;
856 };
1077 };
857− var find;
1078+ var find2;
858 if (Array.prototype.find) {
1079 if (Array.prototype.find) {
859− find = function(items, predicate) {
1080+ find2 = function(items, predicate) {
860 return items.find(predicate);
1081 return items.find(predicate);
861 };
1082 };
862 } else {
1083 } else {
863− find = function(items, predicate) {
1084+ find2 = function(items, predicate) {
864 return items.filter(predicate)[0];
1085 return items.filter(predicate)[0];
865 };
1086 };
866 }
1087 }
867 var findVNodeByParentNodePath = function(vnode, parentNodePath) {
1088 var findVNodeByParentNodePath = function(vnode, parentNodePath) {
868 var result = vnode;
1089 var result = vnode;
869 parentNodePath.forEach(function(node) {
1090 parentNodePath.forEach(function(node) {
870− result = result && result.children ? find(result.children, function(child) {
1091+ result = result && result.children ? find2(result.children, function(child) {
871 return child.domNode === node;
1092 return child.domNode === node;
872 }) : void 0;
1093 }) : void 0;
873 });
1094 });
@@ -935,213 +1156,63 @@
935 if (!scheduled && !stopped) {
1156 if (!scheduled && !stopped) {
936 scheduled = requestAnimationFrame(doRender);
1157 scheduled = requestAnimationFrame(doRender);
937 }
1158 }
938− },
1159+ },
939− stop: function() {
1160+ stop: function() {
940− if (scheduled) {
1161+ if (scheduled) {
941− cancelAnimationFrame(scheduled);
1162+ cancelAnimationFrame(scheduled);
942− scheduled = void 0;
1163+ scheduled = void 0;
943− }
1164+ }
944− stopped = true;
1165+ stopped = true;
945− },
1166+ },
946− resume: function() {
1167+ resume: function() {
947− stopped = false;
1168+ stopped = false;
948− renderCompleted = true;
1169+ renderCompleted = true;
949− projector.scheduleRender();
1170+ projector.scheduleRender();
950− },
1171+ },
951− append: function(parentNode, renderFunction) {
1172+ append: function(parentNode, renderFunction) {
952− addProjection(dom.append, parentNode, renderFunction);
1173+ addProjection(dom.append, parentNode, renderFunction);
953− },
1174+ },
954− insertBefore: function(beforeNode, renderFunction) {
1175+ insertBefore: function(beforeNode, renderFunction) {
955− addProjection(dom.insertBefore, beforeNode, renderFunction);
1176+ addProjection(dom.insertBefore, beforeNode, renderFunction);
956− },
1177+ },
957− merge: function(domNode, renderFunction) {
1178+ merge: function(domNode, renderFunction) {
958− addProjection(dom.merge, domNode, renderFunction);
1179+ addProjection(dom.merge, domNode, renderFunction);
959− },
1180+ },
960− replace: function(domNode, renderFunction) {
1181+ replace: function(domNode, renderFunction) {
961− addProjection(dom.replace, domNode, renderFunction);
1182+ addProjection(dom.replace, domNode, renderFunction);
962− },
1183+ },
963− detach: function(renderFunction) {
1184+ detach: function(renderFunction) {
964− for (var i = 0; i < renderFunctions.length; i++) {
1185+ for (var i = 0; i < renderFunctions.length; i++) {
965− if (renderFunctions[i] === renderFunction) {
1186+ if (renderFunctions[i] === renderFunction) {
966− renderFunctions.splice(i, 1);
1187+ renderFunctions.splice(i, 1);
967− return projections.splice(i, 1)[0];
1188+ return projections.splice(i, 1)[0];
968− }
1189+ }
969− }
1190+ }
970− throw new Error("renderFunction was not found");
1191+ throw new Error("renderFunction was not found");
971− }
1192+ }
972− };
973− return projector;
974− };
975− function _h(selector) {
976− return function(properties) {
977− return function(children) {
978− return h(selector, properties, children);
979− };
980− };
981− }
982− function replace(projector) {
983− return function(el) {
984− return function(render) {
985− return function() {
986− projector.replace(el, render);
987− };
988− };
989− };
990− }
991−
992− // output/Unsafe.Coerce/foreign.js
993− var unsafeCoerce2 = function(x) {
994− return x;
995− };
996−
997− // output/Maquette/index.js
998− var string = unsafeCoerce2;
999− var h2 = _h;
1000−
1001− // output/Data.Array/foreign.js
1002− var replicateFill = function(count, value12) {
1003− if (count < 1) {
1004− return [];
1005− }
1006− var result = new Array(count);
1007− return result.fill(value12);
1008− };
1009− var replicatePolyfill = function(count, value12) {
1010− var result = [];
1011− var n = 0;
1012− for (var i = 0; i < count; i++) {
1013− result[n++] = value12;
1014− }
1015− return result;
1016− };
1017− var replicateImpl = typeof Array.prototype.fill === "function" ? replicateFill : replicatePolyfill;
1018−
1019− // output/Control.Monad.ST.Internal/foreign.js
1020− var map_ = function(f) {
1021− return function(a) {
1022− return function() {
1023− return f(a());
1024− };
1025− };
1026− };
1027− var pure_ = function(a) {
1028− return function() {
1029− return a;
1030− };
1031− };
1032− var bind_ = function(a) {
1033− return function(f) {
1034− return function() {
1035− return f(a())();
1036− };
1037− };
1038− };
1039−
1040− // output/Control.Monad.ST.Internal/index.js
1041− var $runtime_lazy2 = function(name14, moduleName, init) {
1042− var state2 = 0;
1043− var val;
1044− return function(lineNumber) {
1045− if (state2 === 2) return val;
1046− if (state2 === 1) throw new ReferenceError(name14 + " was needed before it finished initializing (module " + moduleName + ", line " + lineNumber + ")", moduleName, lineNumber);
1047− state2 = 1;
1048− val = init();
1049− state2 = 2;
1050− return val;
1051− };
1052− };
1053− var functorST = {
1054− map: map_
1055− };
1056− var monadST = {
1057− Applicative0: function() {
1058− return applicativeST;
1059− },
1060− Bind1: function() {
1061− return bindST;
1062− }
1063− };
1064− var bindST = {
1065− bind: bind_,
1066− Apply0: function() {
1067− return $lazy_applyST(0);
1068− }
1069− };
1070− var applicativeST = {
1071− pure: pure_,
1072− Apply0: function() {
1073− return $lazy_applyST(0);
1074− }
1075− };
1076− var $lazy_applyST = /* @__PURE__ */ $runtime_lazy2("applyST", "Control.Monad.ST.Internal", function() {
1077− return {
1078− apply: ap(monadST),
1079− Functor0: function() {
1080− return functorST;
1081− }
1082− };
1083− });
1084−
1085− // output/Data.Foldable/foreign.js
1086− var foldrArray = function(f) {
1087− return function(init) {
1088− return function(xs) {
1089− var acc = init;
1090− var len = xs.length;
1091− for (var i = len - 1; i >= 0; i--) {
1092− acc = f(xs[i])(acc);
1093− }
1094− return acc;
1095− };
1096 };
1193 };
1194+ return projector;
1097 };
1195 };
1098− var foldlArray = function(f) {
1196+ function _h(selector) {
1099− return function(init) {
1197+ return function(properties) {
1100− return function(xs) {
1198+ return function(children) {
1101− var acc = init;
1199+ return h(selector, properties, children);
1102− var len = xs.length;
1103− for (var i = 0; i < len; i++) {
1104− acc = f(acc)(xs[i]);
1105− }
1106− return acc;
1107 };
1200 };
1108 };
1201 };
1109− };
1202+ }
1110−
1203+ function replace(projector) {
1111− // output/Data.Foldable/index.js
1112− var foldr = function(dict) {
1113− return dict.foldr;
1114− };
1115− var foldMapDefaultR = function(dictFoldable) {
1116− var foldr2 = foldr(dictFoldable);
1117− return function(dictMonoid) {
1204+ return function(el) {
1118− var append2 = append(dictMonoid.Semigroup0());
1119− var mempty2 = mempty(dictMonoid);
1120− return function(f) {
1205+ return function(render) {
1121− return foldr2(function(x) {
1206+ return function() {
1122− return function(acc) {
1207+ projector.replace(el, render);
1123− return append2(f(x))(acc);
1208+ };
1124− };
1125− })(mempty2);
1126 };
1209 };
1127 };
1210 };
1128− };
1211+ }
1129− var foldableArray = {
1130− foldr: foldrArray,
1131− foldl: foldlArray,
1132− foldMap: function(dictMonoid) {
1133− return foldMapDefaultR(foldableArray)(dictMonoid);
1134− }
1135− };
1136− var foldMap = function(dict) {
1137− return dict.foldMap;
1138− };
1139
1212
1140− // output/Data.Array/index.js
1213+ // output/Maquette/index.js
1141− var foldMap1 = /* @__PURE__ */ foldMap(foldableArray);
1214+ var string = unsafeCoerce2;
1142− var foldMap2 = function(dictMonoid) {
1215+ var h2 = _h;
1143− return foldMap1(dictMonoid);
1144− };
1145
1216
1146 // output/Foreign.Object/foreign.js
1217 // output/Foreign.Object/foreign.js
1147 function _copyST(m) {
1218 function _copyST(m) {
@@ -1197,6 +1268,9 @@
1197 });
1268 });
1198
1269
1199 // output/Foreign.Object.ST/foreign.js
1270 // output/Foreign.Object.ST/foreign.js
1271+ var newImpl = function() {
1272+ return {};
1273+ };
1200 function poke2(k) {
1274 function poke2(k) {
1201 return function(v) {
1275 return function(v) {
1202 return function(m) {
1276 return function(m) {
@@ -1209,24 +1283,22 @@
1209 }
1283 }
1210
1284
1211 // output/Foreign.Object/index.js
1285 // output/Foreign.Object/index.js
1286+ var bindFlipped2 = /* @__PURE__ */ bindFlipped(bindST);
1212 var thawST = _copyST;
1287 var thawST = _copyST;
1288+ var singleton2 = function(k) {
1289+ return function(v) {
1290+ return runST(bindFlipped2(poke2(k)(v))(newImpl));
1291+ };
1292+ };
1213 var mutate = function(f) {
1293 var mutate = function(f) {
1214 return function(m) {
1294 return function(m) {
1215 return runST(function __do() {
1295 return runST(function __do() {
1216− var s2 = thawST(m)();
1296+ var s = thawST(m)();
1217− f(s2)();
1297+ f(s)();
1218− return s2;
1298+ return s;
1219 });
1299 });
1220 };
1300 };
1221 };
1301 };
1222− var insert = function(k) {
1223− return function(v) {
1224− return mutate(poke2(k)(v));
1225− };
1226− };
1227− var fromHomogeneous = function() {
1228− return unsafeCoerce2;
1229− };
1230 var foldM = function(dictMonad) {
1302 var foldM = function(dictMonad) {
1231 var bind1 = bind(dictMonad.Bind1());
1303 var bind1 = bind(dictMonad.Bind1());
1232 var pure1 = pure(dictMonad.Applicative0());
1304 var pure1 = pure(dictMonad.Applicative0());
@@ -1238,28 +1310,112 @@
1238 };
1310 };
1239 var foldM1 = /* @__PURE__ */ foldM(monadST);
1311 var foldM1 = /* @__PURE__ */ foldM(monadST);
1240 var union = function(m) {
1312 var union = function(m) {
1241− return mutate(function(s2) {
1313+ return mutate(function(s) {
1242 return foldM1(function(s$prime) {
1314 return foldM1(function(s$prime) {
1243 return function(k) {
1315 return function(k) {
1244 return function(v) {
1316 return function(v) {
1245 return poke2(k)(v)(s$prime);
1317 return poke2(k)(v)(s$prime);
1246 };
1318 };
1247 };
1319 };
1248− })(s2)(m);
1320+ })(s)(m);
1249 });
1321 });
1250 };
1322 };
1251
1323
1252 // output/Plum.View/index.js
1324 // output/Plum.View/index.js
1253− var fromHomogeneous2 = /* @__PURE__ */ fromHomogeneous();
1254 var show2 = /* @__PURE__ */ show(showInt);
1325 var show2 = /* @__PURE__ */ show(showInt);
1326+ var append1 = /* @__PURE__ */ append(semigroupArray);
1327+ var mempty2 = /* @__PURE__ */ mempty(monoidArray);
1255 var map2 = /* @__PURE__ */ map(functorArray);
1328 var map2 = /* @__PURE__ */ map(functorArray);
1329+ var Px = /* @__PURE__ */ function() {
1330+ function Px2(value0) {
1331+ this.value0 = value0;
1332+ }
1333+ ;
1334+ Px2.create = function(value0) {
1335+ return new Px2(value0);
1336+ };
1337+ return Px2;
1338+ }();
1339+ var Fill = /* @__PURE__ */ function() {
1340+ function Fill2() {
1341+ }
1342+ ;
1343+ Fill2.value = new Fill2();
1344+ return Fill2;
1345+ }();
1346+ var Fit = /* @__PURE__ */ function() {
1347+ function Fit2() {
1348+ }
1349+ ;
1350+ Fit2.value = new Fit2();
1351+ return Fit2;
1352+ }();
1353+ var X = /* @__PURE__ */ function() {
1354+ function X2() {
1355+ }
1356+ ;
1357+ X2.value = new X2();
1358+ return X2;
1359+ }();
1360+ var Y = /* @__PURE__ */ function() {
1361+ function Y2() {
1362+ }
1363+ ;
1364+ Y2.value = new Y2();
1365+ return Y2;
1366+ }();
1367+ var Grid = /* @__PURE__ */ function() {
1368+ function Grid2() {
1369+ }
1370+ ;
1371+ Grid2.value = new Grid2();
1372+ return Grid2;
1373+ }();
1256 var Flexbox = /* @__PURE__ */ function() {
1374 var Flexbox = /* @__PURE__ */ function() {
1257− function Flexbox2() {
1375+ function Flexbox2(value0) {
1376+ this.value0 = value0;
1258 }
1377 }
1259 ;
1378 ;
1379+ Flexbox2.create = function(value0) {
1260− Flexbox2.value = new Flexbox2();
1380+ return new Flexbox2(value0);
1381+ };
1261 return Flexbox2;
1382 return Flexbox2;
1262 }();
1383 }();
1384+ var Generic = /* @__PURE__ */ function() {
1385+ function Generic2() {
1386+ }
1387+ ;
1388+ Generic2.value = new Generic2();
1389+ return Generic2;
1390+ }();
1391+ var Span = /* @__PURE__ */ function() {
1392+ function Span2() {
1393+ }
1394+ ;
1395+ Span2.value = new Span2();
1396+ return Span2;
1397+ }();
1398+ var Start = /* @__PURE__ */ function() {
1399+ function Start2() {
1400+ }
1401+ ;
1402+ Start2.value = new Start2();
1403+ return Start2;
1404+ }();
1405+ var Center = /* @__PURE__ */ function() {
1406+ function Center2() {
1407+ }
1408+ ;
1409+ Center2.value = new Center2();
1410+ return Center2;
1411+ }();
1412+ var End = /* @__PURE__ */ function() {
1413+ function End2() {
1414+ }
1415+ ;
1416+ End2.value = new End2();
1417+ return End2;
1418+ }();
1263 var Spacing = /* @__PURE__ */ function() {
1419 var Spacing = /* @__PURE__ */ function() {
1264 function Spacing2(value0, value1) {
1420 function Spacing2(value0, value1) {
1265 this.value0 = value0;
1421 this.value0 = value0;
@@ -1273,91 +1429,356 @@
1273 };
1429 };
1274 return Spacing2;
1430 return Spacing2;
1275 }();
1431 }();
1276− var semigroupRenderedAttribut = {
1432+ var Explain = /* @__PURE__ */ function() {
1433+ function Explain2() {
1434+ }
1435+ ;
1436+ Explain2.value = new Explain2();
1437+ return Explain2;
1438+ }();
1439+ var Align = /* @__PURE__ */ function() {
1440+ function Align2(value0, value1) {
1441+ this.value0 = value0;
1442+ this.value1 = value1;
1443+ }
1444+ ;
1445+ Align2.create = function(value0) {
1446+ return function(value1) {
1447+ return new Align2(value0, value1);
1448+ };
1449+ };
1450+ return Align2;
1451+ }();
1452+ var Width = /* @__PURE__ */ function() {
1453+ function Width2(value0) {
1454+ this.value0 = value0;
1455+ }
1456+ ;
1457+ Width2.create = function(value0) {
1458+ return new Width2(value0);
1459+ };
1460+ return Width2;
1461+ }();
1462+ var Height = /* @__PURE__ */ function() {
1463+ function Height2(value0) {
1464+ this.value0 = value0;
1465+ }
1466+ ;
1467+ Height2.create = function(value0) {
1468+ return new Height2(value0);
1469+ };
1470+ return Height2;
1471+ }();
1472+ var Wrapped = /* @__PURE__ */ function() {
1473+ function Wrapped2() {
1474+ }
1475+ ;
1476+ Wrapped2.value = new Wrapped2();
1477+ return Wrapped2;
1478+ }();
1479+ var Column = /* @__PURE__ */ function() {
1480+ function Column2(value0) {
1481+ this.value0 = value0;
1482+ }
1483+ ;
1484+ Column2.create = function(value0) {
1485+ return new Column2(value0);
1486+ };
1487+ return Column2;
1488+ }();
1489+ var Row = /* @__PURE__ */ function() {
1490+ function Row2(value0) {
1491+ this.value0 = value0;
1492+ }
1493+ ;
1494+ Row2.create = function(value0) {
1495+ return new Row2(value0);
1496+ };
1497+ return Row2;
1498+ }();
1499+ var Stack = /* @__PURE__ */ function() {
1500+ function Stack2(value0) {
1501+ this.value0 = value0;
1502+ }
1503+ ;
1504+ Stack2.create = function(value0) {
1505+ return new Stack2(value0);
1506+ };
1507+ return Stack2;
1508+ }();
1509+ var Wrapper = /* @__PURE__ */ function() {
1510+ function Wrapper2(value0) {
1511+ this.value0 = value0;
1512+ }
1513+ ;
1514+ Wrapper2.create = function(value0) {
1515+ return new Wrapper2(value0);
1516+ };
1517+ return Wrapper2;
1518+ }();
1519+ var Text = /* @__PURE__ */ function() {
1520+ function Text2(value0) {
1521+ this.value0 = value0;
1522+ }
1523+ ;
1524+ Text2.create = function(value0) {
1525+ return new Text2(value0);
1526+ };
1527+ return Text2;
1528+ }();
1529+ var semigroupSkin = {
1277− append: function(v1) {
1530+ append: function(v) {
1531+ return function(v1) {
1532+ return union(v)(v1);
1533+ };
1534+ }
1535+ };
1536+ var append2 = /* @__PURE__ */ append(semigroupSkin);
1537+ var semigroupMutation = {
1538+ append: function(v) {
1278− return function(v2) {
1539+ return function(v1) {
1279 return {
1540 return {
1280− styles: union(v1.styles)(v2.styles)
1541+ extraSkin: append2(v.extraSkin)(v1.extraSkin)
1281 };
1542 };
1282 };
1543 };
1283 }
1544 }
1284 };
1545 };
1285− var monoidRenderedAttribute = {
1546+ var monoidSkin = {
1547+ mempty: empty2,
1548+ Semigroup0: function() {
1549+ return semigroupSkin;
1550+ }
1551+ };
1552+ var mempty1 = /* @__PURE__ */ mempty(monoidSkin);
1553+ var foldMap3 = /* @__PURE__ */ foldMap2(monoidSkin);
1554+ var monoidMutation = {
1286 mempty: {
1555 mempty: {
1287− styles: empty2
1556+ extraSkin: mempty1
1288 },
1557 },
1289 Semigroup0: function() {
1558 Semigroup0: function() {
1290− return semigroupRenderedAttribut;
1559+ return semigroupMutation;
1291 }
1560 }
1292 };
1561 };
1293− var foldMap3 = /* @__PURE__ */ foldMap2(monoidRenderedAttribute);
1562+ var mempty22 = /* @__PURE__ */ mempty(monoidMutation);
1294− var withStyles = function() {
1563+ var view = function(nerves) {
1295− return function(v1) {
1564+ return function(meat) {
1296− return function(styles) {
1565+ return function(bones) {
1297 return {
1566 return {
1298− styles: union(v1.styles)(fromHomogeneous2(styles))
1567+ nerves,
1568+ meat,
1569+ bones
1299 };
1570 };
1300 };
1571 };
1301 };
1572 };
1302 };
1573 };
1303− var withStyles1 = /* @__PURE__ */ withStyles();
1574+ var sk = function(key) {
1304− var unView = function(v1) {
1305− return v1;
1306− };
1307− var spacing = function(x) {
1308− return new Spacing(x, x);
1309− };
1310− var s = function(x) {
1311− return function(v1) {
1312− return string(x);
1313− };
1314− };
1315− var renderAttribute = function(_ctx) {
1316− return function(attr) {
1575+ return function(val) {
1317− return {
1576+ return singleton2(key)(val);
1318− styles: insert("gap")(show2(attr.value0) + ("px " + (show2(attr.value1) + "px")))(empty2)
1319− };
1320 };
1577 };
1321 };
1578 };
1322− var renderAttributes = function(ctx) {
1579+ var length2 = function(v) {
1323− return foldMap3(renderAttribute(ctx));
1580+ if (v instanceof Px) {
1581+ return show2(v.value0) + "px";
1582+ }
1583+ ;
1584+ if (v instanceof Fit) {
1585+ return "fit-content";
1586+ }
1587+ ;
1588+ if (v instanceof Fill) {
1589+ return "100%";
1590+ }
1591+ ;
1592+ throw new Error("Failed pattern match at Plum.View (line 99, column 10 - line 102, column 17): " + [v.constructor.name]);
1324 };
1593 };
1325− var renderWithStyles = function() {
1594+ var skin = function(ctx) {
1326− return function(ctx) {
1595+ return function(v) {
1596+ if (v instanceof Spacing) {
1597+ return sk("gap")(show2(v.value0) + ("px " + (show2(v.value1) + "px")));
1598+ }
1599+ ;
1600+ if (v instanceof Explain) {
1601+ return sk("border")("dashed magenta");
1602+ }
1603+ ;
1604+ if (v instanceof Align) {
1605+ if (ctx instanceof Generic) {
1606+ return mempty1;
1607+ }
1608+ ;
1609+ if (ctx instanceof Span) {
1610+ return mempty1;
1611+ }
1612+ ;
1613+ if (ctx instanceof Grid) {
1327− return function(attrs) {
1614+ return sk(function() {
1615+ if (v.value0 instanceof X) {
1616+ return "justify-items";
1617+ }
1618+ ;
1619+ if (v.value0 instanceof Y) {
1620+ return "align-items";
1621+ }
1622+ ;
1623+ throw new Error("Failed pattern match at Plum.View (line 70, column 9 - line 72, column 29): " + [v.value0.constructor.name]);
1624+ }())(function() {
1625+ if (v.value1 instanceof Start) {
1626+ return "start";
1627+ }
1628+ ;
1629+ if (v.value1 instanceof Center) {
1630+ return "center";
1631+ }
1632+ ;
1633+ if (v.value1 instanceof End) {
1634+ return "end";
1635+ }
1636+ ;
1637+ throw new Error("Failed pattern match at Plum.View (line 74, column 9 - line 77, column 23): " + [v.value1.constructor.name]);
1638+ }());
1639+ }
1640+ ;
1641+ if (ctx instanceof Flexbox) {
1328− return function(styles) {
1642+ return sk(function() {
1329− return withStyles1(renderAttributes(ctx)(attrs))(styles);
1643+ var v1 = new Tuple(ctx.value0, v.value0);
1644+ if (v1.value0 instanceof X && v1.value1 instanceof X) {
1645+ return "justify-content";
1646+ }
1647+ ;
1648+ if (v1.value0 instanceof X && v1.value1 instanceof Y) {
1649+ return "align-items";
1650+ }
1651+ ;
1652+ if (v1.value0 instanceof Y && v1.value1 instanceof X) {
1653+ return "align-items";
1654+ }
1655+ ;
1656+ if (v1.value0 instanceof Y && v1.value1 instanceof Y) {
1657+ return "justify-content";
1658+ }
1659+ ;
1660+ throw new Error("Failed pattern match at Plum.View (line 81, column 9 - line 85, column 38): " + [v1.constructor.name]);
1661+ }())(function() {
1662+ if (v.value1 instanceof Start) {
1663+ return "flex-start";
1664+ }
1665+ ;
1666+ if (v.value1 instanceof Center) {
1667+ return "center";
1668+ }
1669+ ;
1670+ if (v.value1 instanceof End) {
1671+ return "flex-end";
1672+ }
1673+ ;
1674+ throw new Error("Failed pattern match at Plum.View (line 87, column 9 - line 90, column 28): " + [v.value1.constructor.name]);
1675+ }());
1676+ }
1677+ ;
1678+ throw new Error("Failed pattern match at Plum.View (line 66, column 26 - line 91, column 8): " + [ctx.constructor.name]);
1679+ }
1680+ ;
1681+ if (v instanceof Width) {
1682+ return sk("width")(length2(v.value0));
1683+ }
1684+ ;
1685+ if (v instanceof Height) {
1686+ return sk("height")(length2(v.value0));
1330− };
1687+ }
1688+ ;
1689+ if (v instanceof Wrapped) {
1690+ if (ctx instanceof Flexbox) {
1691+ return sk("flex-wrap")("wrap");
1331− };
1692+ }
1693+ ;
1694+ return mempty1;
1695+ }
1696+ ;
1697+ throw new Error("Failed pattern match at Plum.View (line 63, column 12 - line 96, column 16): " + [v.constructor.name]);
1332 };
1698 };
1333 };
1699 };
1334− var renderWithStyles1 = /* @__PURE__ */ renderWithStyles();
1335− var button = function(v1) {
1700+ var h3 = function(el) {
1336− return function(v2) {
1701+ return function(v) {
1337− return function(fire) {
1702+ return function(children) {
1338− return h2("div")({
1703+ return h2(el)({
1339− onclick: fire(v2.onPress)
1704+ styles: v
1340− })([unView(v2.view)(fire)]);
1705+ })(children);
1341 };
1706 };
1342 };
1707 };
1343 };
1708 };
1344− var _v = function(el) {
1709+ var growSkin = function(fire) {
1345− return function(attr) {
1710+ return function(v) {
1346− return function(children) {
1711+ return function(v1) {
1712+ var widthFill = [new Width(Fill.value), new Height(Fill.value)];
1713+ var alignCenter = [new Align(X.value, Center.value), new Align(Y.value, Center.value)];
1347− return function(fire) {
1714+ var skn = function(ctx) {
1348− return h2(el)(attr)(map2(function(v1) {
1715+ return append2(foldMap3(skin(ctx))(append1(v1.meat)(append1(function() {
1716+ if (ctx instanceof Span) {
1717+ return mempty2;
1718+ }
1719+ ;
1720+ if (ctx instanceof Grid) {
1349− return v1(fire);
1721+ return widthFill;
1350− })(children));
1722+ }
1723+ ;
1724+ if (ctx instanceof Flexbox) {
1725+ return widthFill;
1726+ }
1727+ ;
1728+ if (ctx instanceof Generic) {
1729+ return widthFill;
1730+ }
1731+ ;
1732+ throw new Error("Failed pattern match at Plum.View (line 128, column 16 - line 132, column 35): " + [ctx.constructor.name]);
1733+ }())(function() {
1734+ if (ctx instanceof Grid) {
1735+ return alignCenter;
1736+ }
1737+ ;
1738+ if (ctx instanceof Flexbox) {
1739+ return alignCenter;
1740+ }
1741+ ;
1742+ if (ctx instanceof Span) {
1743+ return mempty2;
1744+ }
1745+ ;
1746+ if (ctx instanceof Generic) {
1747+ return alignCenter;
1748+ }
1749+ ;
1750+ throw new Error("Failed pattern match at Plum.View (line 133, column 16 - line 137, column 37): " + [ctx.constructor.name]);
1751+ }()))))(v.extraSkin);
1351 };
1752 };
1753+ if (v1.bones instanceof Text) {
1754+ return h3("span")(skn(Span.value))([string(v1.bones.value0)]);
1755+ }
1756+ ;
1757+ if (v1.bones instanceof Wrapper) {
1758+ return h3("div")(append2(skn(new Flexbox(X.value)))(append2(sk("display")("flex"))(sk("flex-direction")("row"))))([growSkin(fire)(mempty22)(v1.bones.value0)]);
1759+ }
1760+ ;
1761+ if (v1.bones instanceof Stack) {
1762+ return h3("div")(append2(skn(Grid.value))(sk("display")("grid")))(map2(growSkin(fire)({
1763+ extraSkin: append2(sk("grid-row")("1"))(sk("grid-column")("1"))
1764+ }))(v1.bones.value0));
1765+ }
1766+ ;
1767+ if (v1.bones instanceof Row) {
1768+ return h3("div")(append2(skn(new Flexbox(X.value)))(append2(sk("display")("flex"))(sk("flex-direction")("row"))))(map2(growSkin(fire)(mempty22))(v1.bones.value0));
1769+ }
1770+ ;
1771+ if (v1.bones instanceof Column) {
1772+ return h3("div")(append2(skn(new Flexbox(Y.value)))(append2(sk("display")("flex"))(sk("flex-direction")("column"))))(map2(growSkin(fire)(mempty22))(v1.bones.value0));
1773+ }
1774+ ;
1775+ throw new Error("Failed pattern match at Plum.View (line 140, column 5 - line 148, column 46): " + [v1.bones.constructor.name]);
1352 };
1776 };
1353 };
1777 };
1354 };
1778 };
1355− var row = function(attrs) {
1779+ var grow = function(fire) {
1356− return function(children) {
1780+ return function(v) {
1357− return _v("div")(renderWithStyles1(Flexbox.value)(attrs)({
1781+ return growSkin(fire)(mempty22)(v);
1358− display: "flex",
1359− "flex-direction": "row"
1360− }))(children);
1361 };
1782 };
1362 };
1783 };
1363
1784
@@ -1407,6 +1828,7 @@
1407
1828
1408 // output/Plum/index.js
1829 // output/Plum/index.js
1409 var bind2 = /* @__PURE__ */ bind(bindEffect);
1830 var bind2 = /* @__PURE__ */ bind(bindEffect);
1831+ var outerStyle = "html,body{height:100%;padding:0;margin:0;}";
1410 var run3 = function(id) {
1832 var run3 = function(id) {
1411 return function(plum2) {
1833 return function(plum2) {
1412 return function __do() {
1834 return function __do() {
@@ -1421,13 +1843,19 @@
1421 var projector = createProjector();
1843 var projector = createProjector();
1422 return replace(projector)(v.value0)(function __do2() {
1844 return replace(projector)(v.value0)(function __do2() {
1423 var model = read(modelRef)();
1845 var model = read(modelRef)();
1424− return unView(plum2.view(model))(function(msg) {
1846+ var el = grow(function(msg) {
1425 return function __do3() {
1847 return function __do3() {
1426 var m = read(modelRef)();
1848 var m = read(modelRef)();
1427 var m_ = plum2.update(msg)(m)();
1849 var m_ = plum2.update(msg)(m)();
1428 return write(m_)(modelRef)();
1850 return write(m_)(modelRef)();
1429 };
1851 };
1430− });
1852+ })(plum2.view(model));
1853+ return h2("div")({
1854+ styles: {
1855+ height: "100%",
1856+ width: "100%"
1857+ }
1858+ })([el, h2("style")({})([string(outerStyle)])]);
1431 })();
1859 })();
1432 }
1860 }
1433 ;
1861 ;
@@ -1435,22 +1863,20 @@
1435 return unit;
1863 return unit;
1436 }
1864 }
1437 ;
1865 ;
1438− throw new Error("Failed pattern match at Plum (line 24, column 92 - line 36, column 25): " + [v.constructor.name]);
1866+ throw new Error("Failed pattern match at Plum (line 25, column 92 - line 39, column 25): " + [v.constructor.name]);
1439 };
1867 };
1440 };
1868 };
1441 };
1869 };
1442
1870
1443 // output/Main/index.js
1871 // output/Main/index.js
1444 var pure2 = /* @__PURE__ */ pure(applicativeEffect);
1872 var pure2 = /* @__PURE__ */ pure(applicativeEffect);
1873+ var map4 = /* @__PURE__ */ map(functorArray);
1445 var plum = {
1874 var plum = {
1446 init: /* @__PURE__ */ pure2({
1875 init: /* @__PURE__ */ pure2({
1447 text: "Test"
1876 text: "Test"
1448 }),
1877 }),
1449 view: function(model) {
1878 view: function(model) {
1450− return row([spacing(16)])([s(model.text), button([])({
1879+ return view([])([Wrapped.value])(new Column(map4($$const(view([])([])(new Text("hello"))))(range2(1)(100))));
1451− onPress: unit,
1452− view: s("Button")
1453− })]);
1454 },
1880 },
1455 update: function(msg) {
1881 update: function(msg) {
1456 return function(model) {
1882 return function(model) {
plum/spago.dhall+1
@@ -10,6 +10,7 @@
10 , "prelude"
10 , "prelude"
11 , "refs"
11 , "refs"
12 , "strings-extra"
12 , "strings-extra"
13+ , "tuples"
13 , "typelevel-prelude"
14 , "typelevel-prelude"
14 , "unsafe-coerce"
15 , "unsafe-coerce"
15 , "untagged-union"
16 , "untagged-union"
plum/src/Main.purs+3−14
@@ -1,19 +1,11 @@
1module Main where
1module Main where
2
2
3+import Plum.View (Bones(..), view)
3import Prelude
4import Prelude
4−import Web.HTML
5
5
6−import Data.Maybe (Maybe(..))
6+import Data.Array as Array
7import Effect (Effect)
7import Effect (Effect)
8−import Effect.Console (log)
9−import Maquette (createProjector, h, replace, scheduleRender, string)
10import Plum as Plum
8import Plum as Plum
11−import Plum.View (button, s)
12−import Plum.View as V
13−import Web.DOM.NonElementParentNode as Web
14−import Web.HTML as Web
15−import Web.HTML.HTMLDocument as Web
16−import Web.HTML.Window as Web
17
9
18main :: Effect Unit
10main :: Effect Unit
19main = do
11main = do
@@ -25,10 +17,7 @@ plum :: Plum.Plum Unit Model
25plum =
17plum =
26 { init: pure { text: "Test" }
18 { init: pure { text: "Test" }
27 , view: \model ->
19 , view: \model ->
28− V.row [ V.spacing 16 ]
20+ view [] [] (Column $ Array.range 1 100 # map (const $ view [] [] (Text "hello")))
29− [ s model.text
30− , button [] { onPress: unit, view: s "Button" }
31− ]
32 , update: \msg model -> case msg of
21 , update: \msg model -> case msg of
33 _ -> pure { text: "Button pressed" }
22 _ -> pure { text: "Button pressed" }
34 }
23 }
plum/src/Plum.purs+14−8
@@ -5,8 +5,9 @@ import Prelude
5import Data.Maybe (Maybe(..))
5import Data.Maybe (Maybe(..))
6import Effect (Effect)
6import Effect (Effect)
7import Effect.Ref as Ref
7import Effect.Ref as Ref
8+import Maquette (h)
8import Maquette as Maquette
9import Maquette as Maquette
9−import Plum.View (View, unView)
10+import Plum.View (View, grow)
10import Web.DOM.NonElementParentNode (getElementById) as Web
11import Web.DOM.NonElementParentNode (getElementById) as Web
11import Web.HTML (window) as Web
12import Web.HTML (window) as Web
12import Web.HTML.HTMLDocument (toNonElementParentNode) as Web
13import Web.HTML.HTMLDocument (toNonElementParentNode) as Web
@@ -26,11 +27,16 @@ run id plum = do
26 projector <- Maquette.createProjector
27 projector <- Maquette.createProjector
27 Maquette.replace projector element do
28 Maquette.replace projector element do
28 model <- Ref.read modelRef
29 model <- Ref.read modelRef
29− pure $ unView (plum.view model)
30+ let
31+ el = grow
30− ( \msg -> do
32+ ( \msg -> do
31− m <- Ref.read modelRef
33+ m <- Ref.read modelRef
32− m_ <- plum.update msg m
34+ m_ <- plum.update msg m
33− Ref.write m_ modelRef
35+ Ref.write m_ modelRef
34− )
36+ )
35−
37+ (plum.view model)
38+ pure $ Maquette.h "div" { styles: { height: "100%", width: "100%" } } [ el, Maquette.h "style" {} [ Maquette.string outerStyle ] ]
36 Nothing -> pure unit
39 Nothing -> pure unit
40+
41+outerStyle :: String
42+outerStyle = "html,body{height:100%;padding:0;margin:0;}"
plum/src/Plum/View.purs+139−104
@@ -1,114 +1,149 @@
1module Plum.View
1module Plum.View
2 ( View
2 ( View
3− , unView
3+ , view
4− , Attribute
4+ , Nerve(..)
5− , spacing
5+ , Meat(..)
6− , row
6+ , Bones(..)
7− , wrappedRow
7+ , grow
8− , column
8+ , Direction(..)
9− , wrappedColumn
9+ , Alignment(..)
10− , v
10+ , Length(..)
11− , s
12− , button
13 ) where
11 ) where
14
12
15import Prelude
13import Prelude
16
14
17import Data.Array as Array
15import Data.Array as Array
16+import Data.Tuple.Nested ((/\))
18import Effect (Effect)
17import Effect (Effect)
19import Foreign.Object (Object)
18import Foreign.Object (Object)
20import Foreign.Object as Object
19import Foreign.Object as Object
21−import Maquette (VNode, h, string)
20+import Maquette (VNode, string)
22−import Type.Row.Homogeneous (class Homogeneous)
21+import Maquette as Maquette
23−import Unsafe.Coerce (unsafeCoerce)
22+
24−
23+h :: String -> Skin -> Array VNode -> VNode
25−newtype View :: Type -> Type
24+h el (Skin styles) children = Maquette.h el { styles } children
26−newtype View msg = View ((msg -> Effect Unit) -> VNode)
25+
27−
26+data Length = Px Int | Fill | Fit
28−unView :: forall msg. View msg -> (msg -> Effect Unit) -> VNode
27+
29−unView (View node) = node
28+data Alignment = Start | Center | End
30−
29+
31−data Attribute msg =
30+data Direction = X | Y
32− Spacing Int Int
31+
33−
32+data Meat
34−spacing :: forall msg. Int -> Attribute msg
33+ = Spacing Int Int
35−spacing x = Spacing x x
34+ | Explain
36−
35+ | Align Direction Alignment
37−data Context = Flexbox
36+ | Width Length
38−
37+ | Height Length
39−newtype RenderedAttribute = RenderedAttribute { styles :: Object String }
38+ | Wrapped
40−
39+
40+data Nerve msg = OnClick msg
41+
42+type View msg = { nerves :: Array (Nerve msg), meat :: Array Meat, bones :: Bones msg }
43+
44+view :: forall msg. Array (Nerve msg) -> Array Meat -> Bones msg -> View msg
45+view nerves meat bones = { nerves, meat, bones }
46+
47+newtype Skin = Skin (Object String)
48+
49+sk :: String -> String -> Skin
50+sk key val = Skin $ Object.singleton key val
51+
41−instance Semigroup RenderedAttribute where
52+instance Semigroup Skin where
42− append (RenderedAttribute x) (RenderedAttribute y) =
53+ append (Skin x) (Skin y) = Skin $ Object.union x y
43− RenderedAttribute { styles: Object.union x.styles y.styles }
54+
44−
45−instance Monoid RenderedAttribute where
55+instance Monoid Skin where
46− mempty = RenderedAttribute $ { styles: Object.empty }
56+ mempty = Skin Object.empty
47−
57+
48−renderAttribute :: forall msg. Context -> Attribute msg -> RenderedAttribute
58+data Context = Grid | Flexbox Direction | Generic | Span
49−renderAttribute _ctx attr = RenderedAttribute $ case attr of
59+
60+skin :: Context -> Meat -> Skin
61+skin ctx = case _ of
50− Spacing x y -> { styles: Object.insert "gap" (show x <> "px " <> show y <> "px") Object.empty }
62+ Spacing x y -> sk "gap" (show x <> "px " <> show y <> "px")
51−
63+ Explain -> sk "border" "dashed magenta"
52−renderWithStyles :: forall styles msg. Homogeneous styles String => Context -> Array (Attribute msg) -> { | styles } -> RenderedAttribute
64+ Align dir alignment -> case ctx of
53−renderWithStyles ctx attrs styles = withStyles (renderAttributes ctx attrs) styles
65+ Generic -> mempty
54−
66+ Span -> mempty
55−withStyles :: forall styles. Homogeneous styles String => RenderedAttribute -> { | styles } -> RenderedAttribute
67+ Grid -> sk
56−withStyles (RenderedAttribute x) styles =
68+ ( case dir of
57− RenderedAttribute $ { styles: Object.union x.styles (Object.fromHomogeneous styles) }
69+ X -> "justify-items"
58−
70+ Y -> "align-items"
59−renderAttributes :: forall msg. Context -> Array (Attribute msg) -> RenderedAttribute
71+ )
72+ ( case alignment of
73+ Start -> "start"
74+ Center -> "center"
75+ End -> "end"
76+ )
77+
78+ Flexbox flexDir -> sk
79+ ( case flexDir /\ dir of
80+ X /\ X -> "justify-content"
81+ X /\ Y -> "align-items"
82+ Y /\ X -> "align-items"
83+ Y /\ Y -> "justify-content"
84+ )
85+ ( case alignment of
86+ Start -> "flex-start"
87+ Center -> "center"
88+ End -> "flex-end"
89+ )
90+ Width l -> sk "width" (length l)
91+ Height l -> sk "height" (length l)
92+ Wrapped -> case ctx of
93+ Flexbox _ -> sk "flex-wrap" "wrap"
94+ _ -> mempty
95+
96+length :: Length -> String
97+length = case _ of
98+ Px px -> show px <> "px"
99+ Fit -> "fit-content"
100+ Fill -> "100%"
101+
102+data Bones :: Type -> Type
103+data Bones msg
104+ = Column (Array (View msg))
105+ | Row (Array (View msg))
106+ | Stack (Array (View msg))
107+ | Wrapper (View msg)
108+ | Text String
109+
110+newtype Mutation = Mutation { extraSkin :: Skin }
111+
112+instance Semigroup Mutation where
113+ append (Mutation x) (Mutation y) = Mutation { extraSkin: x.extraSkin <> y.extraSkin }
114+
115+instance Monoid Mutation where
116+ mempty = Mutation { extraSkin: mempty }
117+
118+growSkin :: forall msg. (msg -> Effect Unit) -> Mutation -> View msg -> VNode
119+growSkin fire (Mutation mutation) { meat, bones } =
120+ let
121+ alignCenter = [ Align X Center, Align Y Center ]
122+ widthFill = [ Width Fill, Height Fill ]
123+ skn ctx =
60−renderAttributes ctx = Array.foldMap (renderAttribute ctx)
124+ Array.foldMap (skin ctx)
61−
125+ ( meat
62−v :: forall msg. Array (Attribute msg) -> View msg -> View msg
126+ <> case ctx of
63−v _ (View child) = View $ \fire -> h "div" {} [ child fire ]
127+ Span -> mempty
64−
128+ Grid -> widthFill
65−row :: forall msg. Array (Attribute msg) -> Array (View msg) -> View msg
129+ Flexbox _ -> widthFill
66−row attrs children =
130+ Generic -> widthFill
67− _v "div"
131+ <> case ctx of
68− ( renderWithStyles Flexbox attrs
132+ Grid -> alignCenter
69− { display: "flex"
133+ Flexbox _ -> alignCenter
70− , "flex-direction": "row"
134+ Span -> mempty
71− }
135+ Generic -> alignCenter
72− )
136+ ) <> mutation.extraSkin
73− children
137+ in
74−
138+ case bones of
75−wrappedRow :: forall msg. Array (Attribute msg) -> Array (View msg) -> View msg
139+ Text t -> h "span" (skn Span) [ string t ]
76−wrappedRow attrs children =
140+ Wrapper x -> h "div" (skn (Flexbox X) <> sk "display" "flex" <> sk "flex-direction" "row") [ growSkin fire mempty x ]
77− _v "div"
141+ Stack children -> h "div" (skn Grid <> sk "display" "grid")
78− ( renderWithStyles Flexbox attrs
142+ (map (growSkin fire $ Mutation { extraSkin: sk "grid-row" "1" <> sk "grid-column" "1" }) children)
79− { display: "flex"
143+ Row children -> h "div" (skn (Flexbox X) <> sk "display" "flex" <> sk "flex-direction" "row")
80− , "flex-direction": "row"
144+ (map (growSkin fire mempty) children)
81− , "flex-wrap": "wrap"
145+ Column children -> h "div" (skn (Flexbox Y) <> sk "display" "flex" <> sk "flex-direction" "column")
82− }
146+ (map (growSkin fire mempty) children)
83− )
147+
84− children
148+grow :: forall msg. (msg -> Effect Unit) -> View msg -> VNode
85−
149+grow fire v = growSkin fire mempty v
86−column :: forall msg. Array (Attribute msg) -> Array (View msg) -> View msg
87−column attrs children =
88− _v "div"
89− ( renderWithStyles Flexbox attrs
90− { display: "flex"
91− , "flex-direction": "column"
92− }
93− )
94− children
95−
96−wrappedColumn :: forall msg. Array (Attribute msg) -> Array (View msg) -> View msg
97−wrappedColumn attrs children =
98− _v "div"
99− ( renderWithStyles Flexbox attrs
100− { display: "flex"
101− , "flex-direction": "column"
102− , "flex-wrap": "wrap"
103− }
104− )
105− children
106−
107−button :: forall msg. Array (Attribute msg) -> { onPress :: msg, view :: View msg } -> View msg
108−button _ { onPress, view } = View $ \fire -> h "div" { onclick: fire onPress } [ unView view fire ]
109−
110−s :: forall msg. String -> View msg
111−s x = View $ \_ -> string x
112−
113−_v :: forall msg. String -> RenderedAttribute -> Array (View msg) -> View msg
114−_v el attr children = View $ \fire -> h el (unsafeCoerce attr) (map (\(View f) -> f fire) children)