git.iko.soy/purestack-dev/purescript-plum
on master help sign in
styles
5cb222ciko
plum/index.js+742−221
compare with master
unifiedsplit
@@ -31,6 +31,11 @@
31 };
31 };
32 };
32 };
33 };
33 };
34+ var applyFlipped = function(x) {
35+ return function(f) {
36+ return f(x);
37+ };
38+ };
34
39
35 // output/Data.Functor/foreign.js
40 // output/Data.Functor/foreign.js
36 var arrayMap = function(f) {
41 var arrayMap = function(f) {
@@ -68,6 +73,17 @@
68 var apply = function(dict) {
73 var apply = function(dict) {
69 return dict.apply;
74 return dict.apply;
70 };
75 };
76+ var lift2 = function(dictApply) {
77+ var apply1 = apply(dictApply);
78+ var map4 = map(dictApply.Functor0());
79+ return function(f) {
80+ return function(a) {
81+ return function(b) {
82+ return apply1(map4(f)(a))(b);
83+ };
84+ };
85+ };
86+ };
71
87
72 // output/Control.Applicative/index.js
88 // output/Control.Applicative/index.js
73 var pure = function(dict) {
89 var pure = function(dict) {
@@ -146,6 +162,11 @@
146 };
162 };
147
163
148 // output/Data.Semigroup/foreign.js
164 // output/Data.Semigroup/foreign.js
165+ var concatString = function(s1) {
166+ return function(s2) {
167+ return s1 + s2;
168+ };
169+ };
149 var concatArray = function(xs) {
170 var concatArray = function(xs) {
150 return function(ys) {
171 return function(ys) {
151 if (xs.length === 0) return ys;
172 if (xs.length === 0) return ys;
@@ -162,6 +183,9 @@
162 };
183 };
163 }
184 }
164 };
185 };
186+ var semigroupString = {
187+ append: concatString
188+ };
165 var semigroupRecordNil = {
189 var semigroupRecordNil = {
166 appendRecord: function(v) {
190 appendRecord: function(v) {
167 return function(v1) {
191 return function(v1) {
@@ -193,7 +217,7 @@
193 return function(dictSemigroupRecord) {
217 return function(dictSemigroupRecord) {
194 var appendRecord1 = appendRecord(dictSemigroupRecord);
218 var appendRecord1 = appendRecord(dictSemigroupRecord);
195 return function(dictSemigroup) {
219 return function(dictSemigroup) {
196− var append12 = append(dictSemigroup);
220+ var append1 = append(dictSemigroup);
197 return {
221 return {
198 appendRecord: function(v) {
222 appendRecord: function(v) {
199 return function(ra) {
223 return function(ra) {
@@ -202,7 +226,7 @@
202 var key = reflectSymbol2($$Proxy.value);
226 var key = reflectSymbol2($$Proxy.value);
203 var insert = unsafeSet(key);
227 var insert = unsafeSet(key);
204 var get = unsafeGet(key);
228 var get = unsafeGet(key);
205− return insert(append12(get(ra))(get(rb)))(tail);
229+ return insert(append1(get(ra))(get(rb)))(tail);
206 };
230 };
207 };
231 };
208 }
232 }
@@ -220,6 +244,12 @@
220 return semigroupUnit;
244 return semigroupUnit;
221 }
245 }
222 };
246 };
247+ var monoidString = {
248+ mempty: "",
249+ Semigroup0: function() {
250+ return semigroupString;
251+ }
252+ };
223 var monoidRecordNil = {
253 var monoidRecordNil = {
224 memptyRecord: function(v) {
254 memptyRecord: function(v) {
225 return {};
255 return {};
@@ -293,13 +323,13 @@
293
323
294 // output/Control.Monad/index.js
324 // output/Control.Monad/index.js
295 var ap = function(dictMonad) {
325 var ap = function(dictMonad) {
296− var bind3 = bind(dictMonad.Bind1());
326+ var bind4 = bind(dictMonad.Bind1());
297− var pure3 = pure(dictMonad.Applicative0());
327+ var pure4 = pure(dictMonad.Applicative0());
298 return function(f) {
328 return function(f) {
299 return function(a) {
329 return function(a) {
300− return bind3(f)(function(f$prime) {
330+ return bind4(f)(function(f$prime) {
301− return bind3(a)(function(a$prime) {
331+ return bind4(a)(function(a$prime) {
302− return pure3(f$prime(a$prime));
332+ return pure4(f$prime(a$prime));
303 });
333 });
304 });
334 });
305 };
335 };
@@ -307,15 +337,15 @@
307 };
337 };
308
338
309 // output/Effect/index.js
339 // output/Effect/index.js
310− var $runtime_lazy = function(name14, moduleName, init) {
340+ var $runtime_lazy = function(name15, moduleName, init) {
311− var state2 = 0;
341+ var state3 = 0;
312 var val;
342 var val;
313 return function(lineNumber) {
343 return function(lineNumber) {
314− if (state2 === 2) return val;
344+ if (state3 === 2) return val;
315− if (state2 === 1) throw new ReferenceError(name14 + " was needed before it finished initializing (module " + moduleName + ", line " + lineNumber + ")", moduleName, lineNumber);
345+ if (state3 === 1) throw new ReferenceError(name15 + " was needed before it finished initializing (module " + moduleName + ", line " + lineNumber + ")", moduleName, lineNumber);
316− state2 = 1;
346+ state3 = 1;
317 val = init();
347 val = init();
318− state2 = 2;
348+ state3 = 2;
319 return val;
349 return val;
320 };
350 };
321 };
351 };
@@ -371,6 +401,22 @@
371 return result;
401 return result;
372 };
402 };
373 var replicateImpl = typeof Array.prototype.fill === "function" ? replicateFill : replicatePolyfill;
403 var replicateImpl = typeof Array.prototype.fill === "function" ? replicateFill : replicatePolyfill;
404+ var indexImpl = function(just, nothing, xs, i) {
405+ return i < 0 || i >= xs.length ? nothing : just(xs[i]);
406+ };
407+ var concat = function(xss) {
408+ if (xss.length <= 1e4) {
409+ return Array.prototype.concat.apply([], xss);
410+ }
411+ var result = [];
412+ for (var i = 0, l = xss.length; i < l; i++) {
413+ var xs = xss[i];
414+ for (var j = 0, m = xs.length; j < m; j++) {
415+ result.push(xs[j]);
416+ }
417+ }
418+ return result;
419+ };
374
420
375 // output/Data.Bounded/foreign.js
421 // output/Data.Bounded/foreign.js
376 var topChar = String.fromCharCode(65535);
422 var topChar = String.fromCharCode(65535);
@@ -436,6 +482,52 @@
436 return maybe(a)(identity2);
482 return maybe(a)(identity2);
437 };
483 };
438
484
485+ // output/Data.Identity/index.js
486+ var Identity = function(x) {
487+ return x;
488+ };
489+ var functorIdentity = {
490+ map: function(f) {
491+ return function(m) {
492+ return f(m);
493+ };
494+ }
495+ };
496+ var applyIdentity = {
497+ apply: function(v) {
498+ return function(v1) {
499+ return v(v1);
500+ };
501+ },
502+ Functor0: function() {
503+ return functorIdentity;
504+ }
505+ };
506+ var bindIdentity = {
507+ bind: function(v) {
508+ return function(f) {
509+ return f(v);
510+ };
511+ },
512+ Apply0: function() {
513+ return applyIdentity;
514+ }
515+ };
516+ var applicativeIdentity = {
517+ pure: Identity,
518+ Apply0: function() {
519+ return applyIdentity;
520+ }
521+ };
522+ var monadIdentity = {
523+ Applicative0: function() {
524+ return applicativeIdentity;
525+ },
526+ Bind1: function() {
527+ return bindIdentity;
528+ }
529+ };
530+
439 // output/Effect.Ref/foreign.js
531 // output/Effect.Ref/foreign.js
440 var _new = function(val) {
532 var _new = function(val) {
441 return function() {
533 return function() {
@@ -480,15 +572,15 @@
480 };
572 };
481
573
482 // output/Control.Monad.ST.Internal/index.js
574 // output/Control.Monad.ST.Internal/index.js
483− var $runtime_lazy2 = function(name14, moduleName, init) {
575+ var $runtime_lazy2 = function(name15, moduleName, init) {
484− var state2 = 0;
576+ var state3 = 0;
485 var val;
577 var val;
486 return function(lineNumber) {
578 return function(lineNumber) {
487− if (state2 === 2) return val;
579+ if (state3 === 2) return val;
488− if (state2 === 1) throw new ReferenceError(name14 + " was needed before it finished initializing (module " + moduleName + ", line " + lineNumber + ")", moduleName, lineNumber);
580+ if (state3 === 1) throw new ReferenceError(name15 + " was needed before it finished initializing (module " + moduleName + ", line " + lineNumber + ")", moduleName, lineNumber);
489− state2 = 1;
581+ state3 = 1;
490 val = init();
582 val = init();
491− state2 = 2;
583+ state3 = 2;
492 return val;
584 return val;
493 };
585 };
494 };
586 };
@@ -570,10 +662,54 @@
570 return x;
662 return x;
571 };
663 };
572
664
665+ // output/Safe.Coerce/index.js
666+ var coerce = function() {
667+ return unsafeCoerce2;
668+ };
669+
670+ // output/Data.Newtype/index.js
671+ var coerce2 = /* @__PURE__ */ coerce();
672+ var unwrap = function() {
673+ return coerce2;
674+ };
675+
573 // output/Data.Foldable/index.js
676 // output/Data.Foldable/index.js
574 var foldr = function(dict) {
677 var foldr = function(dict) {
575 return dict.foldr;
678 return dict.foldr;
576 };
679 };
680+ var foldl = function(dict) {
681+ return dict.foldl;
682+ };
683+ var intercalate = function(dictFoldable) {
684+ var foldl2 = foldl(dictFoldable);
685+ return function(dictMonoid) {
686+ var append3 = append(dictMonoid.Semigroup0());
687+ var mempty5 = mempty(dictMonoid);
688+ return function(sep) {
689+ return function(xs) {
690+ var go2 = function(v) {
691+ return function(v1) {
692+ if (v.init) {
693+ return {
694+ init: false,
695+ acc: v1
696+ };
697+ }
698+ ;
699+ return {
700+ init: false,
701+ acc: append3(v.acc)(append3(sep)(v1))
702+ };
703+ };
704+ };
705+ return foldl2(go2)({
706+ init: true,
707+ acc: mempty5
708+ })(xs).acc;
709+ };
710+ };
711+ };
712+ };
577 var foldMapDefaultR = function(dictFoldable) {
713 var foldMapDefaultR = function(dictFoldable) {
578 var foldr2 = foldr(dictFoldable);
714 var foldr2 = foldr(dictFoldable);
579 return function(dictMonoid) {
715 return function(dictMonoid) {
@@ -595,9 +731,6 @@
595 return foldMapDefaultR(foldableArray)(dictMonoid);
731 return foldMapDefaultR(foldableArray)(dictMonoid);
596 }
732 }
597 };
733 };
598− var foldMap = function(dict) {
599− return dict.foldMap;
600− };
601
734
602 // output/Data.Function.Uncurried/foreign.js
735 // output/Data.Function.Uncurried/foreign.js
603 var runFn2 = function(fn) {
736 var runFn2 = function(fn) {
@@ -607,18 +740,106 @@
607 };
740 };
608 };
741 };
609 };
742 };
743+ var runFn4 = function(fn) {
744+ return function(a) {
745+ return function(b) {
746+ return function(c) {
747+ return function(d) {
748+ return fn(a, b, c, d);
749+ };
750+ };
751+ };
752+ };
753+ };
610
754
611− // output/Data.Array/index.js
755+ // output/Data.Traversable/foreign.js
612− var foldMap1 = /* @__PURE__ */ foldMap(foldableArray);
756+ var traverseArrayImpl = /* @__PURE__ */ function() {
613− var append2 = /* @__PURE__ */ append(semigroupArray);
757+ function array1(a) {
758+ return [a];
759+ }
760+ function array2(a) {
761+ return function(b) {
762+ return [a, b];
763+ };
764+ }
765+ function array3(a) {
766+ return function(b) {
767+ return function(c) {
768+ return [a, b, c];
769+ };
770+ };
771+ }
772+ function concat2(xs) {
773+ return function(ys) {
774+ return xs.concat(ys);
775+ };
776+ }
777+ return function(apply2) {
778+ return function(map4) {
779+ return function(pure4) {
780+ return function(f) {
781+ return function(array) {
782+ function go2(bot, top2) {
783+ switch (top2 - bot) {
784+ case 0:
785+ return pure4([]);
786+ case 1:
787+ return map4(array1)(f(array[bot]));
788+ case 2:
789+ return apply2(map4(array2)(f(array[bot])))(f(array[bot + 1]));
790+ case 3:
791+ return apply2(apply2(map4(array3)(f(array[bot])))(f(array[bot + 1])))(f(array[bot + 2]));
792+ default:
793+ var pivot = bot + Math.floor((top2 - bot) / 4) * 2;
794+ return apply2(map4(concat2)(go2(bot, pivot)))(go2(pivot, top2));
795+ }
796+ }
797+ return go2(0, array.length);
798+ };
799+ };
800+ };
801+ };
802+ };
803+ }();
804+
805+ // output/Data.Traversable/index.js
806+ var identity3 = /* @__PURE__ */ identity(categoryFn);
614− var foldMap2 = function(dictMonoid) {
807+ var traverse = function(dict) {
615− return foldMap1(dictMonoid);
808+ return dict.traverse;
616 };
809 };
617− var cons = function(x) {
810+ var sequenceDefault = function(dictTraversable) {
811+ var traverse22 = traverse(dictTraversable);
618− return function(xs) {
812+ return function(dictApplicative) {
619− return append2([x])(xs);
813+ return traverse22(dictApplicative)(identity3);
620 };
814 };
621 };
815 };
816+ var traversableArray = {
817+ traverse: function(dictApplicative) {
818+ var Apply0 = dictApplicative.Apply0();
819+ return traverseArrayImpl(apply(Apply0))(map(Apply0.Functor0()))(pure(dictApplicative));
820+ },
821+ sequence: function(dictApplicative) {
822+ return sequenceDefault(traversableArray)(dictApplicative);
823+ },
824+ Functor0: function() {
825+ return functorArray;
826+ },
827+ Foldable1: function() {
828+ return foldableArray;
829+ }
830+ };
831+
832+ // output/Data.Array/index.js
833+ var intercalate1 = /* @__PURE__ */ intercalate(foldableArray);
834+ var intercalate2 = function(dictMonoid) {
835+ return intercalate1(dictMonoid);
836+ };
837+ var index = /* @__PURE__ */ function() {
838+ return runFn4(indexImpl)(Just.create)(Nothing.value);
839+ }();
840+ var head = function(xs) {
841+ return index(xs)(0);
842+ };
622
843
623 // output/Maquette/foreign.js
844 // output/Maquette/foreign.js
624 var NAMESPACE_W3 = "http://www.w3.org/";
845 var NAMESPACE_W3 = "http://www.w3.org/";
@@ -749,8 +970,8 @@
749 "exitAnimation",
970 "exitAnimation",
750 "updateAnimation"
971 "updateAnimation"
751 ];
972 ];
752− function filterVNodeOnlyProps(name14) {
973+ function filterVNodeOnlyProps(name15) {
753− return !vnodeOnlyProps.includes(name14);
974+ return !vnodeOnlyProps.includes(name15);
754 }
975 }
755 var setProperties = function(domNode, properties, projectionOptions) {
976 var setProperties = function(domNode, properties, projectionOptions) {
756 if (!properties) {
977 if (!properties) {
@@ -1386,6 +1607,11 @@
1386 };
1607 };
1387 };
1608 };
1388 }
1609 }
1610+ function scheduleRender(projector) {
1611+ return function() {
1612+ projector.scheduleRender();
1613+ };
1614+ }
1389 function replace(projector) {
1615 function replace(projector) {
1390 return function(el) {
1616 return function(el) {
1391 return function(render3) {
1617 return function(render3) {
@@ -1400,6 +1626,169 @@
1400 var string = unsafeCoerce2;
1626 var string = unsafeCoerce2;
1401 var h2 = _h;
1627 var h2 = _h;
1402
1628
1629+ // output/Control.Monad.Writer.Class/index.js
1630+ var tell = function(dict) {
1631+ return dict.tell;
1632+ };
1633+
1634+ // output/Control.Monad.Writer.Trans/index.js
1635+ var WriterT = function(x) {
1636+ return x;
1637+ };
1638+ var runWriterT = function(v) {
1639+ return v;
1640+ };
1641+ var mapWriterT = function(f) {
1642+ return function(v) {
1643+ return f(v);
1644+ };
1645+ };
1646+ var functorWriterT = function(dictFunctor) {
1647+ var map4 = map(dictFunctor);
1648+ return {
1649+ map: function(f) {
1650+ return mapWriterT(map4(function(v) {
1651+ return new Tuple(f(v.value0), v.value1);
1652+ }));
1653+ }
1654+ };
1655+ };
1656+ var applyWriterT = function(dictSemigroup) {
1657+ var append3 = append(dictSemigroup);
1658+ return function(dictApply) {
1659+ var apply2 = apply(dictApply);
1660+ var Functor0 = dictApply.Functor0();
1661+ var map4 = map(Functor0);
1662+ var functorWriterT1 = functorWriterT(Functor0);
1663+ return {
1664+ apply: function(v) {
1665+ return function(v1) {
1666+ var k = function(v3) {
1667+ return function(v4) {
1668+ return new Tuple(v3.value0(v4.value0), append3(v3.value1)(v4.value1));
1669+ };
1670+ };
1671+ return apply2(map4(k)(v))(v1);
1672+ };
1673+ },
1674+ Functor0: function() {
1675+ return functorWriterT1;
1676+ }
1677+ };
1678+ };
1679+ };
1680+ var bindWriterT = function(dictSemigroup) {
1681+ var append3 = append(dictSemigroup);
1682+ var applyWriterT1 = applyWriterT(dictSemigroup);
1683+ return function(dictBind) {
1684+ var bind4 = bind(dictBind);
1685+ var Apply0 = dictBind.Apply0();
1686+ var map4 = map(Apply0.Functor0());
1687+ var applyWriterT2 = applyWriterT1(Apply0);
1688+ return {
1689+ bind: function(v) {
1690+ return function(k) {
1691+ return bind4(v)(function(v1) {
1692+ var v2 = k(v1.value0);
1693+ return map4(function(v3) {
1694+ return new Tuple(v3.value0, append3(v1.value1)(v3.value1));
1695+ })(v2);
1696+ });
1697+ };
1698+ },
1699+ Apply0: function() {
1700+ return applyWriterT2;
1701+ }
1702+ };
1703+ };
1704+ };
1705+ var semigroupWriterT = function(dictApply) {
1706+ return function(dictSemigroup) {
1707+ var lift22 = lift2(applyWriterT(dictSemigroup)(dictApply));
1708+ return function(dictSemigroup1) {
1709+ return {
1710+ append: lift22(append(dictSemigroup1))
1711+ };
1712+ };
1713+ };
1714+ };
1715+ var applicativeWriterT = function(dictMonoid) {
1716+ var mempty5 = mempty(dictMonoid);
1717+ var applyWriterT1 = applyWriterT(dictMonoid.Semigroup0());
1718+ return function(dictApplicative) {
1719+ var pure4 = pure(dictApplicative);
1720+ var applyWriterT2 = applyWriterT1(dictApplicative.Apply0());
1721+ return {
1722+ pure: function(a) {
1723+ return pure4(new Tuple(a, mempty5));
1724+ },
1725+ Apply0: function() {
1726+ return applyWriterT2;
1727+ }
1728+ };
1729+ };
1730+ };
1731+ var monadWriterT = function(dictMonoid) {
1732+ var applicativeWriterT1 = applicativeWriterT(dictMonoid);
1733+ var bindWriterT1 = bindWriterT(dictMonoid.Semigroup0());
1734+ return function(dictMonad) {
1735+ var applicativeWriterT22 = applicativeWriterT1(dictMonad.Applicative0());
1736+ var bindWriterT22 = bindWriterT1(dictMonad.Bind1());
1737+ return {
1738+ Applicative0: function() {
1739+ return applicativeWriterT22;
1740+ },
1741+ Bind1: function() {
1742+ return bindWriterT22;
1743+ }
1744+ };
1745+ };
1746+ };
1747+ var monadTellWriterT = function(dictMonoid) {
1748+ var Semigroup0 = dictMonoid.Semigroup0();
1749+ var monadWriterT1 = monadWriterT(dictMonoid);
1750+ return function(dictMonad) {
1751+ var monadWriterT2 = monadWriterT1(dictMonad);
1752+ return {
1753+ tell: function() {
1754+ var $262 = pure(dictMonad.Applicative0());
1755+ var $263 = Tuple.create(unit);
1756+ return function($264) {
1757+ return WriterT($262($263($264)));
1758+ };
1759+ }(),
1760+ Semigroup0: function() {
1761+ return Semigroup0;
1762+ },
1763+ Monad1: function() {
1764+ return monadWriterT2;
1765+ }
1766+ };
1767+ };
1768+ };
1769+ var monoidWriterT = function(dictApplicative) {
1770+ var semigroupWriterT1 = semigroupWriterT(dictApplicative.Apply0());
1771+ return function(dictMonoid) {
1772+ var pure4 = pure(applicativeWriterT(dictMonoid)(dictApplicative));
1773+ var semigroupWriterT2 = semigroupWriterT1(dictMonoid.Semigroup0());
1774+ return function(dictMonoid1) {
1775+ var semigroupWriterT3 = semigroupWriterT2(dictMonoid1.Semigroup0());
1776+ return {
1777+ mempty: pure4(mempty(dictMonoid1)),
1778+ Semigroup0: function() {
1779+ return semigroupWriterT3;
1780+ }
1781+ };
1782+ };
1783+ };
1784+ };
1785+
1786+ // output/Control.Monad.Writer/index.js
1787+ var unwrap2 = /* @__PURE__ */ unwrap();
1788+ var runWriter = function($5) {
1789+ return unwrap2(runWriterT($5));
1790+ };
1791+
1403 // output/Foreign.Object/foreign.js
1792 // output/Foreign.Object/foreign.js
1404 function _copyST(m) {
1793 function _copyST(m) {
1405 return function() {
1794 return function() {
@@ -1416,7 +1805,7 @@
1416 function runST(f) {
1805 function runST(f) {
1417 return f();
1806 return f();
1418 }
1807 }
1419− function _foldM(bind3) {
1808+ function _foldM(bind4) {
1420 return function(f) {
1809 return function(f) {
1421 return function(mz) {
1810 return function(mz) {
1422 return function(m) {
1811 return function(m) {
@@ -1428,7 +1817,7 @@
1428 }
1817 }
1429 for (var k in m) {
1818 for (var k in m) {
1430 if (hasOwnProperty.call(m, k)) {
1819 if (hasOwnProperty.call(m, k)) {
1431− acc = bind3(acc)(g(k));
1820+ acc = bind4(acc)(g(k));
1432 }
1821 }
1433 }
1822 }
1434 return acc;
1823 return acc;
@@ -1506,6 +1895,20 @@
1506 })(s)(m);
1895 })(s)(m);
1507 });
1896 });
1508 };
1897 };
1898+ var fold2 = /* @__PURE__ */ _foldM(applyFlipped);
1899+ var foldMap2 = function(dictMonoid) {
1900+ var append1 = append(dictMonoid.Semigroup0());
1901+ var mempty5 = mempty(dictMonoid);
1902+ return function(f) {
1903+ return fold2(function(acc) {
1904+ return function(k) {
1905+ return function(v) {
1906+ return append1(acc)(f(k)(v));
1907+ };
1908+ };
1909+ })(mempty5);
1910+ };
1911+ };
1509
1912
1510 // output/Record.Unsafe.Union/foreign.js
1913 // output/Record.Unsafe.Union/foreign.js
1511 function unsafeUnionFn(r1, r2) {
1914 function unsafeUnionFn(r1, r2) {
@@ -1527,12 +1930,23 @@
1527 var unsafeUnion = /* @__PURE__ */ runFn2(unsafeUnionFn);
1930 var unsafeUnion = /* @__PURE__ */ runFn2(unsafeUnionFn);
1528
1931
1529 // output/Plum.View/index.js
1932 // output/Plum.View/index.js
1933+ var append2 = /* @__PURE__ */ append(semigroupArray);
1530 var semigroupRecord3 = /* @__PURE__ */ semigroupRecord();
1934 var semigroupRecord3 = /* @__PURE__ */ semigroupRecord();
1531 var childrenIsSymbol = {
1935 var childrenIsSymbol = {
1532 reflectSymbol: function() {
1936 reflectSymbol: function() {
1533 return "children";
1937 return "children";
1534 }
1938 }
1535 };
1939 };
1940+ var downIsSymbol = {
1941+ reflectSymbol: function() {
1942+ return "down";
1943+ }
1944+ };
1945+ var hoverIsSymbol = {
1946+ reflectSymbol: function() {
1947+ return "hover";
1948+ }
1949+ };
1536 var meatIsSymbol = {
1950 var meatIsSymbol = {
1537 reflectSymbol: function() {
1951 reflectSymbol: function() {
1538 return "meat";
1952 return "meat";
@@ -1543,16 +1957,17 @@
1543 return "nerves";
1957 return "nerves";
1544 }
1958 }
1545 };
1959 };
1546− var semigroupRecordCons2 = /* @__PURE__ */ semigroupRecordCons(childrenIsSymbol)()(/* @__PURE__ */ semigroupRecordCons(meatIsSymbol)()(/* @__PURE__ */ semigroupRecordCons(nervesIsSymbol)()(semigroupRecordNil)(semigroupArray))(semigroupArray));
1960+ var semigroupRecordCons2 = /* @__PURE__ */ semigroupRecordCons(childrenIsSymbol)()(/* @__PURE__ */ semigroupRecordCons(downIsSymbol)()(/* @__PURE__ */ semigroupRecordCons(hoverIsSymbol)()(/* @__PURE__ */ semigroupRecordCons(meatIsSymbol)()(/* @__PURE__ */ semigroupRecordCons(nervesIsSymbol)()(semigroupRecordNil)(semigroupArray))(semigroupArray))(semigroupArray))(semigroupArray));
1547 var show2 = /* @__PURE__ */ show(showInt);
1961 var show2 = /* @__PURE__ */ show(showInt);
1548 var show1 = /* @__PURE__ */ show(showNumber);
1962 var show1 = /* @__PURE__ */ show(showNumber);
1963+ var mempty2 = /* @__PURE__ */ mempty(monoidArray);
1549 var monoidRecord2 = /* @__PURE__ */ monoidRecord();
1964 var monoidRecord2 = /* @__PURE__ */ monoidRecord();
1550 var monoidRecordCons2 = /* @__PURE__ */ monoidRecordCons(childrenIsSymbol);
1965 var monoidRecordCons2 = /* @__PURE__ */ monoidRecordCons(childrenIsSymbol);
1551− var monoidRecordCons1 = /* @__PURE__ */ monoidRecordCons(meatIsSymbol)(monoidArray)()(/* @__PURE__ */ monoidRecordCons(nervesIsSymbol)(monoidArray)()(monoidRecordNil));
1966+ var monoidRecordCons1 = /* @__PURE__ */ monoidRecordCons(downIsSymbol)(monoidArray)()(/* @__PURE__ */ monoidRecordCons(hoverIsSymbol)(monoidArray)()(/* @__PURE__ */ monoidRecordCons(meatIsSymbol)(monoidArray)()(/* @__PURE__ */ monoidRecordCons(nervesIsSymbol)(monoidArray)()(monoidRecordNil))));
1552− var mempty2 = /* @__PURE__ */ mempty(/* @__PURE__ */ monoidRecord2(/* @__PURE__ */ monoidRecordCons2(monoidArray)()(monoidRecordCons1)));
1967+ var mempty1 = /* @__PURE__ */ mempty(/* @__PURE__ */ monoidRecord2(/* @__PURE__ */ monoidRecordCons2(monoidArray)()(monoidRecordCons1)));
1553− var append1 = /* @__PURE__ */ append(semigroupArray);
1968+ var foldMap3 = /* @__PURE__ */ foldMap2(monoidString);
1554− var mempty1 = /* @__PURE__ */ mempty(monoidArray);
1969+ var intercalate3 = /* @__PURE__ */ intercalate2(monoidString);
1555− var map2 = /* @__PURE__ */ map(functorArray);
1970+ var map2 = /* @__PURE__ */ map(/* @__PURE__ */ functorWriterT(functorIdentity));
1556 var Px = /* @__PURE__ */ function() {
1971 var Px = /* @__PURE__ */ function() {
1557 function Px2(value0) {
1972 function Px2(value0) {
1558 this.value0 = value0;
1973 this.value0 = value0;
@@ -1908,79 +2323,88 @@
1908 None3.value = new None3();
2323 None3.value = new None3();
1909 return None3;
2324 return None3;
1910 }();
2325 }();
1911− var semigroupUIWith = function(dictSemigroup) {
2326+ var semigroupSkinGrowth = {
1912− var append3 = append(semigroupRecord3(semigroupRecordCons2(dictSemigroup)));
1913− return function(dictSemigroup1) {
1914− var append4 = append(dictSemigroup1);
1915− return {
1916− append: function(v) {
1917− return function(v1) {
1918− return new UI(append3(v.value0)(v1.value0), append4(v.value1)(v1.value1));
1919− };
1920− }
1921− };
1922− };
1923− };
1924− var semigroupSkin = {
1925 append: function(v) {
2327 append: function(v) {
1926 return function(v1) {
2328 return function(v1) {
1927 return union(v)(v1);
2329 return union(v)(v1);
1928 };
2330 };
1929 }
2331 }
1930 };
2332 };
1931− var append22 = /* @__PURE__ */ append(semigroupSkin);
2333+ var bindWriterT2 = /* @__PURE__ */ bindWriterT(semigroupSkinGrowth)(bindIdentity);
2334+ var discard2 = /* @__PURE__ */ discard(discardUnit)(bindWriterT2);
2335+ var bind2 = /* @__PURE__ */ bind(bindWriterT2);
2336+ var append22 = /* @__PURE__ */ append(/* @__PURE__ */ semigroupWriterT(applyIdentity)(semigroupSkinGrowth)(semigroupArray));
1932 var semigroupMutation = {
2337 var semigroupMutation = {
1933 append: function(v) {
2338 append: function(v) {
1934 return function(v1) {
2339 return function(v1) {
1935 return {
2340 return {
1936− extraSkin: append22(v.extraSkin)(v1.extraSkin)
2341+ extraSkin: append2(v.extraSkin)(v1.extraSkin)
1937 };
2342 };
1938 };
2343 };
1939 }
2344 }
1940 };
2345 };
1941− var renderableColor = {
2346+ var semigroupGenericUI = function(dictSemigroup) {
1942− render: function(v) {
2347+ var append3 = append(semigroupRecord3(semigroupRecordCons2(dictSemigroup)));
1943− return "rgba(" + (show2(v.r) + ("," + (show2(v.g) + ("," + (show2(v.b) + ("," + (show1(v.a) + ")")))))));
1944− }
1945− };
1946− var monoidUIWith = function(dictMonoid) {
1947− var mempty42 = mempty(monoidRecord2(monoidRecordCons2(dictMonoid)()(monoidRecordCons1)));
1948− var semigroupUIWith1 = semigroupUIWith(dictMonoid.Semigroup0());
1949− return function(dictMonoid1) {
2348+ return function(dictSemigroup1) {
1950− var semigroupUIWith2 = semigroupUIWith1(dictMonoid1.Semigroup0());
2349+ var append4 = append(dictSemigroup1);
1951 return {
2350 return {
1952− mempty: new UI(mempty42, mempty(dictMonoid1)),
2351+ append: function(v) {
1953− Semigroup0: function() {
2352+ return function(v1) {
1954− return semigroupUIWith2;
2353+ return new UI(append3(v.value0)(v1.value0), append4(v.value1)(v1.value1));
2354+ };
1955 }
2355 }
1956 };
2356 };
1957 };
2357 };
1958 };
2358 };
1959− var monoidSkin = {
2359+ var renderableColor = {
2360+ render: function(v) {
2361+ return "rgba(" + (show2(v.r) + ("," + (show2(v.g) + ("," + (show2(v.b) + ("," + (show1(v.a) + ")")))))));
2362+ },
2363+ renderKey: function(v) {
2364+ return show2(v.r) + ("-" + (show2(v.g) + ("-" + (show2(v.b) + ("-" + show1(v.a))))));
2365+ }
2366+ };
2367+ var monoidSkinGrowth = {
1960 mempty: empty2,
2368 mempty: empty2,
1961 Semigroup0: function() {
2369 Semigroup0: function() {
1962− return semigroupSkin;
2370+ return semigroupSkinGrowth;
1963 }
2371 }
1964 };
2372 };
1965− var mempty22 = /* @__PURE__ */ mempty(monoidSkin);
2373+ var tell2 = /* @__PURE__ */ tell(/* @__PURE__ */ monadTellWriterT(monoidSkinGrowth)(monadIdentity));
1966− var foldMap3 = /* @__PURE__ */ foldMap2(monoidSkin);
2374+ var applicativeWriterT2 = /* @__PURE__ */ applicativeWriterT(monoidSkinGrowth)(applicativeIdentity);
2375+ var pure2 = /* @__PURE__ */ pure(applicativeWriterT2);
2376+ var mempty22 = /* @__PURE__ */ mempty(/* @__PURE__ */ monoidWriterT(applicativeIdentity)(monoidSkinGrowth)(monoidArray));
2377+ var traverse2 = /* @__PURE__ */ traverse(traversableArray)(applicativeWriterT2);
1967 var monoidMutation = {
2378 var monoidMutation = {
1968 mempty: {
2379 mempty: {
1969− extraSkin: mempty22
2380+ extraSkin: mempty2
1970 },
2381 },
1971 Semigroup0: function() {
2382 Semigroup0: function() {
1972 return semigroupMutation;
2383 return semigroupMutation;
1973 }
2384 }
1974 };
2385 };
1975 var mempty3 = /* @__PURE__ */ mempty(monoidMutation);
2386 var mempty3 = /* @__PURE__ */ mempty(monoidMutation);
1976− var functorUIWith = {
2387+ var monoidGenericUI = function(dictMonoid) {
2388+ var mempty42 = mempty(monoidRecord2(monoidRecordCons2(dictMonoid)()(monoidRecordCons1)));
2389+ var semigroupGenericUI1 = semigroupGenericUI(dictMonoid.Semigroup0());
2390+ return function(dictMonoid1) {
2391+ var semigroupGenericUI2 = semigroupGenericUI1(dictMonoid1.Semigroup0());
2392+ return {
2393+ mempty: new UI(mempty42, mempty(dictMonoid1)),
2394+ Semigroup0: function() {
2395+ return semigroupGenericUI2;
2396+ }
2397+ };
2398+ };
2399+ };
2400+ var functorGenericUI = {
1977 map: function(f) {
2401 map: function(f) {
1978 return function(v) {
2402 return function(v) {
1979 return new UI(v.value0, f(v.value1));
2403 return new UI(v.value0, f(v.value1));
1980 };
2404 };
1981 }
2405 }
1982 };
2406 };
1983− var applyUIWith = function(dictMonoid) {
2407+ var applyGenericUI = function(dictMonoid) {
1984 var append3 = append(semigroupRecord3(semigroupRecordCons2(dictMonoid.Semigroup0())));
2408 var append3 = append(semigroupRecord3(semigroupRecordCons2(dictMonoid.Semigroup0())));
1985 return {
2409 return {
1986 apply: function(v) {
2410 apply: function(v) {
@@ -1989,13 +2413,13 @@
1989 };
2413 };
1990 },
2414 },
1991 Functor0: function() {
2415 Functor0: function() {
1992− return functorUIWith;
2416+ return functorGenericUI;
1993 }
2417 }
1994 };
2418 };
1995 };
2419 };
1996− var bindUIWith = function(dictMonoid) {
2420+ var bindGenericUI = function(dictMonoid) {
1997 var append3 = append(semigroupRecord3(semigroupRecordCons2(dictMonoid.Semigroup0())));
2421 var append3 = append(semigroupRecord3(semigroupRecordCons2(dictMonoid.Semigroup0())));
1998− var applyUIWith1 = applyUIWith(dictMonoid);
2422+ var applyGenericUI1 = applyGenericUI(dictMonoid);
1999 return {
2423 return {
2000 bind: function(v) {
2424 bind: function(v) {
2001 return function(f) {
2425 return function(f) {
@@ -2004,28 +2428,49 @@
2004 };
2428 };
2005 },
2429 },
2006 Apply0: function() {
2430 Apply0: function() {
2007− return applyUIWith1;
2431+ return applyGenericUI1;
2008 }
2432 }
2009 };
2433 };
2010 };
2434 };
2011 var text = function(s) {
2435 var text = function(s) {
2012 return function(v) {
2436 return function(v) {
2013 return new UI({
2437 return new UI({
2014− nerves: mempty2.nerves,
2438+ nerves: mempty1.nerves,
2015− meat: mempty2.meat,
2439+ meat: mempty1.meat,
2440+ hover: mempty1.hover,
2441+ down: mempty1.down,
2016− children: [{
2442+ children: [new Tuple({
2017 meat: v.value0.meat,
2443 meat: v.value0.meat,
2018 nerves: v.value0.nerves,
2444 nerves: v.value0.nerves,
2445+ hover: v.value0.hover,
2446+ down: v.value0.down
2019− bones: new Text(s)
2447+ }, new Text(s))]
2020− }]
2021 }, v.value1);
2448 }, v.value1);
2022 };
2449 };
2023 };
2450 };
2451+ var styleSkinGrowth = function(v) {
2452+ return foldMap3(function(className) {
2453+ return function(v1) {
2454+ return "." + (className + ("{" + (v1.key + (":" + (v1.value + ";}")))));
2455+ };
2456+ })(v);
2457+ };
2024− var sk = function(key) {
2458+ var sk = function(cName) {
2025− return function(val) {
2459+ return function(key) {
2026− return singleton2(key)(val);
2460+ return function(value12) {
2461+ return discard2(tell2(singleton2(cName)({
2462+ key,
2463+ value: value12
2464+ })))(function() {
2465+ return pure2([cName]);
2466+ });
2467+ };
2027 };
2468 };
2028 };
2469 };
2470+ var renderKey = function(dict) {
2471+ return dict.renderKey;
2472+ };
2473+ var renderKey1 = /* @__PURE__ */ renderKey(renderableColor);
2029 var render = function(dict) {
2474 var render = function(dict) {
2030 return dict.render;
2475 return dict.render;
2031 };
2476 };
@@ -2052,18 +2497,42 @@
2052 return "min(" + (show2(v.value0) + ("px," + (render(renderableLength)(v.value1) + ")")));
2497 return "min(" + (show2(v.value0) + ("px," + (render(renderableLength)(v.value1) + ")")));
2053 }
2498 }
2054 ;
2499 ;
2055− throw new Error("Failed pattern match at Plum.View (line 258, column 12 - line 263, column 62): " + [v.constructor.name]);
2500+ throw new Error("Failed pattern match at Plum.View (line 295, column 12 - line 300, column 62): " + [v.constructor.name]);
2501+ },
2502+ renderKey: function(v) {
2503+ if (v instanceof Px) {
2504+ return show2(v.value0);
2505+ }
2506+ ;
2507+ if (v instanceof Fit) {
2508+ return "fit-content";
2509+ }
2510+ ;
2511+ if (v instanceof Fill) {
2512+ return "fill";
2513+ }
2514+ ;
2515+ if (v instanceof Max2) {
2516+ return "max-" + (show2(v.value0) + ("-" + renderKey(renderableLength)(v.value1)));
2517+ }
2518+ ;
2519+ if (v instanceof Min2) {
2520+ return "min-" + (show2(v.value0) + ("-" + renderKey(renderableLength)(v.value1)));
2521+ }
2522+ ;
2523+ throw new Error("Failed pattern match at Plum.View (line 301, column 15 - line 306, column 56): " + [v.constructor.name]);
2056 }
2524 }
2057 };
2525 };
2526+ var renderKey2 = /* @__PURE__ */ renderKey(renderableLength);
2058 var render2 = /* @__PURE__ */ render(renderableLength);
2527 var render2 = /* @__PURE__ */ render(renderableLength);
2059 var skin = function(ctx) {
2528 var skin = function(ctx) {
2060 return function(v) {
2529 return function(v) {
2061 if (v instanceof Spacing) {
2530 if (v instanceof Spacing) {
2062− return sk("gap")(show2(v.value0) + ("px " + (show2(v.value1) + "px")));
2531+ return sk("spacing-" + (show2(v.value0) + ("-" + show2(v.value1))))("gap")(show2(v.value0) + ("px " + (show2(v.value1) + "px")));
2063 }
2532 }
2064 ;
2533 ;
2065 if (v instanceof Explain) {
2534 if (v instanceof Explain) {
2066− return sk("border")("dashed magenta");
2535+ return sk("explain")("border")("dashed magenta");
2067 }
2536 }
2068 ;
2537 ;
2069 if (v instanceof Align) {
2538 if (v instanceof Align) {
@@ -2076,17 +2545,7 @@
2076 }
2545 }
2077 ;
2546 ;
2078 if (ctx instanceof Grid) {
2547 if (ctx instanceof Grid) {
2079− return sk(function() {
2080− if (v.value0 instanceof X) {
2081− return "justify-items";
2082− }
2083− ;
2084− if (v.value0 instanceof Y) {
2085− return "align-items";
2086− }
2087− ;
2088− throw new Error("Failed pattern match at Plum.View (line 215, column 9 - line 217, column 29): " + [v.value0.constructor.name]);
2089− }())(function() {
2548+ var v1 = function() {
2090 if (v.value1 instanceof Start) {
2549 if (v.value1 instanceof Start) {
2091 return "start";
2550 return "start";
2092 }
2551 }
@@ -2099,121 +2558,135 @@
2099 return "end";
2558 return "end";
2100 }
2559 }
2101 ;
2560 ;
2102− throw new Error("Failed pattern match at Plum.View (line 219, column 9 - line 222, column 23): " + [v.value1.constructor.name]);
2561+ throw new Error("Failed pattern match at Plum.View (line 244, column 13 - line 247, column 27): " + [v.value1.constructor.name]);
2103− }());
2562+ }();
2563+ var k = function() {
2564+ if (v.value0 instanceof X) {
2565+ return "justify-items";
2566+ }
2567+ ;
2568+ if (v.value0 instanceof Y) {
2569+ return "align-items";
2570+ }
2571+ ;
2572+ throw new Error("Failed pattern match at Plum.View (line 239, column 13 - line 241, column 33): " + [v.value0.constructor.name]);
2573+ }();
2574+ return sk("align-grid-" + (k + ("-" + v1)))(k)(v1);
2104 }
2575 }
2105 ;
2576 ;
2106 if (ctx instanceof Flexbox) {
2577 if (ctx instanceof Flexbox) {
2107− return sk(function() {
2578+ var v1 = function() {
2108− var v1 = new Tuple(ctx.value0, v.value0);
2109− if (v1.value0 instanceof X && v1.value1 instanceof X) {
2579+ if (v.value1 instanceof Start) {
2110− return "justify-content";
2580+ return "flex-start";
2111 }
2581 }
2112 ;
2582 ;
2113− if (v1.value0 instanceof X && v1.value1 instanceof Y) {
2583+ if (v.value1 instanceof Center) {
2114− return "align-items";
2584+ return "center";
2115 }
2585 }
2116 ;
2586 ;
2117− if (v1.value0 instanceof Y && v1.value1 instanceof X) {
2587+ if (v.value1 instanceof End) {
2118− return "align-items";
2588+ return "flex-end";
2119 }
2589 }
2120 ;
2590 ;
2591+ throw new Error("Failed pattern match at Plum.View (line 263, column 13 - line 266, column 32): " + [v.value1.constructor.name]);
2592+ }();
2593+ var k = function() {
2594+ var v2 = new Tuple(ctx.value0, v.value0);
2121− if (v1.value0 instanceof Y && v1.value1 instanceof Y) {
2595+ if (v2.value0 instanceof X && v2.value1 instanceof X) {
2122 return "justify-content";
2596 return "justify-content";
2123 }
2597 }
2124 ;
2598 ;
2125− throw new Error("Failed pattern match at Plum.View (line 226, column 9 - line 230, column 38): " + [v1.constructor.name]);
2126− }())(function() {
2127− if (v.value1 instanceof Start) {
2599+ if (v2.value0 instanceof X && v2.value1 instanceof Y) {
2128− return "flex-start";
2600+ return "align-items";
2129 }
2601 }
2130 ;
2602 ;
2131− if (v.value1 instanceof Center) {
2603+ if (v2.value0 instanceof Y && v2.value1 instanceof X) {
2132− return "center";
2604+ return "align-items";
2133 }
2605 }
2134 ;
2606 ;
2135− if (v.value1 instanceof End) {
2607+ if (v2.value0 instanceof Y && v2.value1 instanceof Y) {
2136− return "flex-end";
2608+ return "justify-content";
2137 }
2609 }
2138 ;
2610 ;
2139− throw new Error("Failed pattern match at Plum.View (line 232, column 9 - line 235, column 28): " + [v.value1.constructor.name]);
2611+ throw new Error("Failed pattern match at Plum.View (line 255, column 13 - line 259, column 42): " + [v2.constructor.name]);
2140− }());
2612+ }();
2613+ return sk("align-flexbox-" + (k + ("-" + v1)))(k)(v1);
2141 }
2614 }
2142 ;
2615 ;
2143− throw new Error("Failed pattern match at Plum.View (line 211, column 26 - line 236, column 8): " + [ctx.constructor.name]);
2616+ throw new Error("Failed pattern match at Plum.View (line 233, column 26 - line 269, column 51): " + [ctx.constructor.name]);
2144 }
2617 }
2145 ;
2618 ;
2146 if (v instanceof Width) {
2619 if (v instanceof Width) {
2147− return sk("width")(render2(v.value0));
2620+ return sk("width-" + renderKey2(v.value0))("width")(render2(v.value0));
2148 }
2621 }
2149 ;
2622 ;
2150 if (v instanceof Height) {
2623 if (v instanceof Height) {
2151− return sk("height")(render2(v.value0));
2624+ return sk("width-" + renderKey2(v.value0))("height")(render2(v.value0));
2152 }
2625 }
2153 ;
2626 ;
2154 if (v instanceof Wrapped) {
2627 if (v instanceof Wrapped) {
2155 if (ctx instanceof Flexbox) {
2628 if (ctx instanceof Flexbox) {
2156− return sk("flex-wrap")("wrap");
2629+ return sk("wrapped")("flex-wrap")("wrap");
2157 }
2630 }
2158 ;
2631 ;
2159− return mempty22;
2632+ return pure2([]);
2160 }
2633 }
2161 ;
2634 ;
2162 if (v instanceof BackgroundColor) {
2635 if (v instanceof BackgroundColor) {
2163− return sk("background-color")(render1(v.value0));
2636+ return sk("bg-color-" + renderKey1(v.value0))("background-color")(render1(v.value0));
2164 }
2637 }
2165 ;
2638 ;
2166 if (v instanceof Padding) {
2639 if (v instanceof Padding) {
2167− return sk("padding")(show2(v.value0.top) + ("px " + (show2(v.value0.right) + ("px " + (show2(v.value0.bottom) + ("px " + (show2(v.value0.left) + "px")))))));
2640+ return sk("padding-" + (show2(v.value0.top) + ("-" + (show2(v.value0.right) + ("-" + (show2(v.value0.bottom) + ("-" + show2(v.value0.left))))))))("padding")(show2(v.value0.top) + ("px " + (show2(v.value0.right) + ("px " + (show2(v.value0.bottom) + ("px " + (show2(v.value0.left) + "px")))))));
2168 }
2641 }
2169 ;
2642 ;
2170 if (v instanceof Spread) {
2643 if (v instanceof Spread) {
2171 if (ctx instanceof Flexbox) {
2644 if (ctx instanceof Flexbox) {
2172− return sk("justify-content")("space-between");
2645+ return sk("spread")("justify-content")("space-between");
2173 }
2646 }
2174 ;
2647 ;
2175− return mempty22;
2648+ return pure2([]);
2176 }
2649 }
2177 ;
2650 ;
2178 if (v instanceof Opacity) {
2651 if (v instanceof Opacity) {
2179− return sk("opacity")(show1(v.value0));
2652+ return sk("opacity-" + show1(v.value0))("opacity")(show1(v.value0));
2180 }
2653 }
2181 ;
2654 ;
2182 if (v instanceof Pointer) {
2655 if (v instanceof Pointer) {
2183− return sk("cursor")("pointer");
2656+ return sk("pointer")("cursor")("pointer");
2184 }
2657 }
2185 ;
2658 ;
2186 if (v instanceof Move) {
2659 if (v instanceof Move) {
2187− return sk("transform")("translate(" + (show2(v.value0.x) + ("px, " + (show2(v.value0.y) + ")"))));
2660+ return sk("move-" + (show2(v.value0.x) + ("-" + show2(v.value0.y))))("transform")("translate(" + (show2(v.value0.x) + ("px, " + (show2(v.value0.y) + "px)"))));
2188 }
2661 }
2189 ;
2662 ;
2190 if (v instanceof Clip && v.value0 instanceof X) {
2663 if (v instanceof Clip && v.value0 instanceof X) {
2191− return sk("overflow-x")("hidden");
2664+ return sk("clip-x")("overflow-x")("hidden");
2192 }
2665 }
2193 ;
2666 ;
2194 if (v instanceof Clip && v.value0 instanceof Y) {
2667 if (v instanceof Clip && v.value0 instanceof Y) {
2195− return sk("overflow-y")("hidden");
2668+ return sk("clip-y")("overflow-y")("hidden");
2196 }
2669 }
2197 ;
2670 ;
2198− throw new Error("Failed pattern match at Plum.View (line 208, column 12 - line 252, column 37): " + [v.constructor.name]);
2671+ throw new Error("Failed pattern match at Plum.View (line 230, column 12 - line 288, column 46): " + [v.constructor.name]);
2199 };
2672 };
2200 };
2673 };
2201 var hWith = function(elem2) {
2674 var hWith = function(elem2) {
2202 return function(props) {
2675 return function(props) {
2203− return function(v) {
2676+ return function(classes) {
2204 return function(children) {
2677 return function(children) {
2205 return h2(elem2)(unsafeUnion(props)({
2678 return h2(elem2)(unsafeUnion(props)({
2206− styles: v
2679+ "class": intercalate3(" ")(classes)
2207 }))(children);
2680 }))(children);
2208 };
2681 };
2209 };
2682 };
2210 };
2683 };
2211 };
2684 };
2212 var h3 = function(elem2) {
2685 var h3 = function(elem2) {
2213− return function(v) {
2686+ return function(classes) {
2214 return function(children) {
2687 return function(children) {
2215 return h2(elem2)({
2688 return h2(elem2)({
2216− styles: v
2689+ "class": intercalate3(" ")(classes)
2217 })(children);
2690 })(children);
2218 };
2691 };
2219 };
2692 };
@@ -2224,9 +2697,13 @@
2224 var widthFill = [new Width(Fill.value), new Height(Fill.value)];
2697 var widthFill = [new Width(Fill.value), new Height(Fill.value)];
2225 var alignCenter = [new Align(X.value, Center.value), new Align(Y.value, Center.value)];
2698 var alignCenter = [new Align(X.value, Center.value), new Align(Y.value, Center.value)];
2226 var skn = function(ctx) {
2699 var skn = function(ctx) {
2227− return append22(foldMap3(skin(ctx))(append1(v1.meat)(append1(function() {
2700+ return map2(function($424) {
2701+ return function(v2) {
2702+ return append2(v2)(v.extraSkin);
2703+ }(concat($424));
2704+ })(traverse2(skin(ctx))(append2(v1.value0.meat)(append2(function() {
2228 if (ctx instanceof Span) {
2705 if (ctx instanceof Span) {
2229− return mempty1;
2706+ return mempty2;
2230 }
2707 }
2231 ;
2708 ;
2232 if (ctx instanceof Grid) {
2709 if (ctx instanceof Grid) {
@@ -2241,7 +2718,7 @@
2241 return widthFill;
2718 return widthFill;
2242 }
2719 }
2243 ;
2720 ;
2244− throw new Error("Failed pattern match at Plum.View (line 310, column 16 - line 314, column 35): " + [ctx.constructor.name]);
2721+ throw new Error("Failed pattern match at Plum.View (line 368, column 16 - line 372, column 35): " + [ctx.constructor.name]);
2245 }())(function() {
2722 }())(function() {
2246 if (ctx instanceof Grid) {
2723 if (ctx instanceof Grid) {
2247 return alignCenter;
2724 return alignCenter;
@@ -2252,88 +2729,125 @@
2252 }
2729 }
2253 ;
2730 ;
2254 if (ctx instanceof Span) {
2731 if (ctx instanceof Span) {
2255− return mempty1;
2732+ return mempty2;
2256 }
2733 }
2257 ;
2734 ;
2258 if (ctx instanceof Generic) {
2735 if (ctx instanceof Generic) {
2259 return alignCenter;
2736 return alignCenter;
2260 }
2737 }
2261 ;
2738 ;
2262− throw new Error("Failed pattern match at Plum.View (line 315, column 16 - line 319, column 37): " + [ctx.constructor.name]);
2739+ throw new Error("Failed pattern match at Plum.View (line 373, column 16 - line 377, column 37): " + [ctx.constructor.name]);
2263− }()))))(v.extraSkin);
2740+ }()))));
2264 };
2741 };
2265− if (v1.bones instanceof Text) {
2742+ if (v1.value1 instanceof Text) {
2743+ return map2(function(c) {
2266− return h3("span")(skn(Span.value))([string(v1.bones.value0)]);
2744+ return h3("span")(c)([string(v1.value1.value0)]);
2745+ })(skn(Span.value));
2267 }
2746 }
2268 ;
2747 ;
2269− if (v1.bones instanceof Wrapper) {
2748+ if (v1.value1 instanceof Wrapper) {
2270− return h3("div")(append22(skn(new Flexbox(X.value)))(append22(sk("display")("flex"))(sk("flex-direction")("row"))))([growSkin(fire)(mempty3)(v1.bones.value0)]);
2749+ return bind2(append22(skn(new Flexbox(X.value)))(append22(sk("display-flex")("display")("flex"))(sk("flex-direction-row")("flex-direction")("row"))))(function(classes) {
2750+ return bind2(growSkin(fire)(mempty3)(v1.value1.value0))(function(x$prime) {
2751+ return pure2(h3("div")(classes)([x$prime]));
2752+ });
2753+ });
2271 }
2754 }
2272 ;
2755 ;
2273− if (v1.bones instanceof Stack) {
2756+ if (v1.value1 instanceof Stack) {
2274− return h3("div")(append22(skn(Grid.value))(sk("display")("grid")))(map2(growSkin(fire)({
2757+ return bind2(append22(skn(Grid.value))(sk("display-grid")("display")("grid")))(function(classes) {
2275− extraSkin: append22(sk("grid-row")("1"))(sk("grid-column")("1"))
2758+ return bind2(append22(sk("grid-row-1")("grid-row")("1"))(sk("grid-column-1")("grid-column")("1")))(function(extraSkin) {
2276− }))(v1.bones.value0));
2759+ return bind2(traverse2(growSkin(fire)({
2760+ extraSkin
2761+ }))(v1.value1.value0))(function(children$prime) {
2762+ return pure2(h3("div")(classes)(children$prime));
2763+ });
2764+ });
2765+ });
2277 }
2766 }
2278 ;
2767 ;
2279− if (v1.bones instanceof Row) {
2768+ if (v1.value1 instanceof Row) {
2280− return h3("div")(append22(skn(new Flexbox(X.value)))(append22(sk("display")("flex"))(sk("flex-direction")("row"))))(map2(growSkin(fire)(mempty3))(v1.bones.value0));
2769+ return bind2(append22(skn(new Flexbox(X.value)))(append22(sk("display-flex")("display")("flex"))(sk("flex-direction-row")("flex-direction")("row"))))(function(classes) {
2770+ return bind2(traverse2(growSkin(fire)(mempty3))(v1.value1.value0))(function(children$prime) {
2771+ return pure2(h3("div")(classes)(children$prime));
2772+ });
2773+ });
2281 }
2774 }
2282 ;
2775 ;
2283− if (v1.bones instanceof Column) {
2776+ if (v1.value1 instanceof Column) {
2284− return h3("div")(append22(skn(new Flexbox(Y.value)))(append22(sk("display")("flex"))(sk("flex-direction")("column"))))(map2(growSkin(fire)(mempty3))(v1.bones.value0));
2777+ return bind2(append22(skn(new Flexbox(Y.value)))(append22(sk("display-flex")("display")("flex"))(sk("flex-direction-column")("flex-direction")("column"))))(function(classes) {
2778+ return bind2(traverse2(growSkin(fire)(mempty3))(v1.value1.value0))(function(children$prime) {
2779+ return pure2(h3("div")(classes)(children$prime));
2780+ });
2781+ });
2285 }
2782 }
2286 ;
2783 ;
2287− if (v1.bones instanceof Link) {
2784+ if (v1.value1 instanceof Link) {
2785+ return bind2(append22(skn(new Flexbox(X.value)))(append22(sk("display-flex")("display")("flex"))(sk("flex-direction-row")("flex-direction")("row"))))(function(classes) {
2786+ return bind2(growSkin(fire)(mempty3)(v1.value1.value2))(function(child$prime) {
2288− return hWith("a")({
2787+ return pure2(hWith("a")({
2289− href: v1.bones.value0,
2788+ href: v1.value1.value0,
2290− rel: "noopener noreferrer",
2789+ rel: "noopener noreferrer",
2291− target: function() {
2790+ target: function() {
2292− if (v1.bones.value1.newTab) {
2791+ if (v1.value1.value1.newTab) {
2293− return "_blank";
2792+ return "_blank";
2294− }
2793+ }
2295− ;
2794+ ;
2296− return "_self";
2795+ return "_self";
2297− }()
2796+ }()
2298− })(append22(skn(new Flexbox(X.value)))(append22(sk("display")("flex"))(sk("flex-direction")("row"))))([growSkin(fire)(mempty3)(v1.bones.value2)]);
2797+ })(classes)([child$prime]));
2798+ });
2799+ });
2299 }
2800 }
2300 ;
2801 ;
2301− if (v1.bones instanceof Download) {
2802+ if (v1.value1 instanceof Download) {
2302− return hWith("a")({
2303− href: v1.bones.value0,
2304− download: fromMaybe("")(v1.bones.value1.filename)
2305− })(append22(skn(new Flexbox(X.value)))(append22(sk("display")("flex"))(sk("flex-direction")("row"))))([growSkin(fire)(mempty3)(v1.bones.value2)]);
2803+ return bind2(append22(skn(new Flexbox(X.value)))(append22(sk("display-flex")("display")("flex"))(sk("flex-direction-row")("flex-direction")("row"))))(function(classes) {
2804+ return bind2(growSkin(fire)(mempty3)(v1.value1.value2))(function(child$prime) {
2805+ return pure2(hWith("a")({
2806+ href: v1.value1.value0,
2807+ download: fromMaybe("")(v1.value1.value1.filename)
2808+ })(classes)([child$prime]));
2809+ });
2810+ });
2306 }
2811 }
2307 ;
2812 ;
2308− if (v1.bones instanceof Image2) {
2813+ if (v1.value1 instanceof Image2) {
2814+ return map2(function(c) {
2309− return hWith("img")({
2815+ return hWith("img")({
2310− src: v1.bones.value0,
2816+ src: v1.value1.value0,
2311− alt: v1.bones.value1.description
2817+ alt: v1.value1.value1.description
2818+ })(c)([]);
2312− })(skn(Generic.value))([]);
2819+ })(skn(Generic.value));
2313 }
2820 }
2314 ;
2821 ;
2315− if (v1.bones instanceof None) {
2822+ if (v1.value1 instanceof None) {
2316− return h3("div")(mempty22)([]);
2823+ return pure2(h3("div")(mempty2)([]));
2317 }
2824 }
2318 ;
2825 ;
2319− throw new Error("Failed pattern match at Plum.View (line 322, column 5 - line 346, column 32): " + [v1.bones.constructor.name]);
2826+ throw new Error("Failed pattern match at Plum.View (line 380, column 3 - line 421, column 37): " + [v1.value1.constructor.name]);
2320 };
2827 };
2321 };
2828 };
2322 };
2829 };
2323 var grow = function(fire) {
2830 var grow = function(fire) {
2324 return function(v) {
2831 return function(v) {
2325− return growSkin(fire)(mempty3)(v);
2832+ var v1 = runWriter(growSkin(fire)(mempty3)(v));
2833+ return {
2834+ node: v1.value0,
2835+ style: styleSkinGrowth(v1.value1)
2836+ };
2326 };
2837 };
2327 };
2838 };
2328 var column = function(v) {
2839 var column = function(v) {
2329 return new UI({
2840 return new UI({
2330− nerves: mempty2.nerves,
2841+ nerves: mempty1.nerves,
2331− meat: mempty2.meat,
2842+ meat: mempty1.meat,
2843+ hover: mempty1.hover,
2844+ down: mempty1.down,
2332− children: [{
2845+ children: [new Tuple({
2333 meat: v.value0.meat,
2846 meat: v.value0.meat,
2334 nerves: v.value0.nerves,
2847 nerves: v.value0.nerves,
2848+ hover: v.value0.hover,
2849+ down: v.value0.down
2335− bones: new Column(v.value0.children)
2850+ }, new Column(v.value0.children))]
2336− }]
2337 }, v.value1);
2851 }, v.value1);
2338 };
2852 };
2339
2853
@@ -2382,39 +2896,46 @@
2382 }
2896 }
2383
2897
2384 // output/Plum/index.js
2898 // output/Plum/index.js
2385− var bind2 = /* @__PURE__ */ bind(bindEffect);
2899+ var bind3 = /* @__PURE__ */ bind(bindEffect);
2386− var map4 = /* @__PURE__ */ map(functorArray);
2387 var outerStyle = "html,body{height:100%;padding:0;margin:0;}";
2900 var outerStyle = "html,body{height:100%;padding:0;margin:0;}";
2388 var run3 = function(id) {
2901 var run3 = function(id) {
2389 return function(plum2) {
2902 return function(plum2) {
2390 return function __do() {
2903 return function __do() {
2391− var modelRef = bind2(plum2.init)($$new)();
2904+ var modelRef = bind3(plum2.init)($$new)();
2392− var v = bind2(bind2(windowImpl)(document2))(function() {
2905+ var v = bind3(bind3(windowImpl)(document2))(function() {
2393− var $12 = getElementById(id);
2906+ var $21 = getElementById(id);
2394− return function($13) {
2907+ return function($22) {
2395− return $12(toNonElementParentNode($13));
2908+ return $21(toNonElementParentNode($22));
2396 };
2909 };
2397 }())();
2910 }())();
2398 if (v instanceof Just) {
2911 if (v instanceof Just) {
2399 var projector = createProjector();
2912 var projector = createProjector();
2400 return replace(projector)(v.value0)(function __do2() {
2913 return replace(projector)(v.value0)(function __do2() {
2401 var model = read(modelRef)();
2914 var model = read(modelRef)();
2915+ var v1 = plum2.view(model);
2916+ var v2 = head(v1.value0.children);
2917+ if (v2 instanceof Nothing) {
2918+ return h2("div")({})([]);
2919+ }
2920+ ;
2921+ if (v2 instanceof Just) {
2402− var el = map4(grow(function(msg) {
2922+ var v3 = grow(function(msg) {
2403− return function __do3() {
2923+ return function __do3() {
2404− var m = read(modelRef)();
2924+ var m = read(modelRef)();
2405− var m_ = plum2.update(msg)(m)();
2925+ var m_ = plum2.update(msg)(m)();
2406− return write(m_)(modelRef)();
2926+ write(m_)(modelRef)();
2407− };
2927+ return scheduleRender(projector)();
2408− }))(function() {
2928+ };
2409− var v1 = plum2.view(model);
2410− return v1.value0.children;
2411− }());
2929+ })(v2.value0);
2412− return h2("div")({
2930+ return h2("div")({
2413− styles: {
2931+ styles: {
2414− height: "100%",
2932+ height: "100%",
2415− width: "100%"
2933+ width: "100%"
2416− }
2934+ }
2417− })(cons(h2("style")({})([string(outerStyle)]))(el));
2935+ })([h2("style")({})([string(outerStyle + v3.style)]), v3.node]);
2936+ }
2937+ ;
2938+ throw new Error("Failed pattern match at Plum (line 35, column 20 - line 52, column 94): " + [v2.constructor.name]);
2418 })();
2939 })();
2419 }
2940 }
2420 ;
2941 ;
@@ -2422,27 +2943,27 @@
2422 return unit;
2943 return unit;
2423 }
2944 }
2424 ;
2945 ;
2425− throw new Error("Failed pattern match at Plum (line 26, column 92 - line 42, column 25): " + [v.constructor.name]);
2946+ throw new Error("Failed pattern match at Plum (line 26, column 92 - line 54, column 25): " + [v.constructor.name]);
2426 };
2947 };
2427 };
2948 };
2428 };
2949 };
2429
2950
2430 // output/Main/index.js
2951 // output/Main/index.js
2431− var pure2 = /* @__PURE__ */ pure(applicativeEffect);
2952+ var pure3 = /* @__PURE__ */ pure(applicativeEffect);
2432− var discard2 = /* @__PURE__ */ discard(discardUnit)(/* @__PURE__ */ bindUIWith(monoidArray));
2953+ var discard3 = /* @__PURE__ */ discard(discardUnit)(/* @__PURE__ */ bindGenericUI(monoidArray));
2433− var mempty4 = /* @__PURE__ */ mempty(/* @__PURE__ */ monoidUIWith(monoidUnit)(monoidUnit));
2954+ var mempty4 = /* @__PURE__ */ mempty(/* @__PURE__ */ monoidGenericUI(monoidUnit)(monoidUnit));
2434 var plum = {
2955 var plum = {
2435− init: /* @__PURE__ */ pure2({
2956+ init: /* @__PURE__ */ pure3({
2436 text: "Test"
2957 text: "Test"
2437 }),
2958 }),
2438 view: function(model) {
2959 view: function(model) {
2439− return column(discard2(text("hi")(mempty4))(function() {
2960+ return column(discard3(text("hi")(mempty4))(function() {
2440 return text("hello")(mempty4);
2961 return text("hello")(mempty4);
2441 }));
2962 }));
2442 },
2963 },
2443 update: function(msg) {
2964 update: function(msg) {
2444 return function(model) {
2965 return function(model) {
2445− return pure2({
2966+ return pure3({
2446 text: "Button pressed"
2967 text: "Button pressed"
2447 });
2968 });
2448 };
2969 };
plum/spago.dhall+2
@@ -4,6 +4,7 @@
4 , "console"
4 , "console"
5 , "debug"
5 , "debug"
6 , "effect"
6 , "effect"
7+ , "foldable-traversable"
7 , "foreign-object"
8 , "foreign-object"
8 , "integers"
9 , "integers"
9 , "maybe"
10 , "maybe"
@@ -12,6 +13,7 @@
12 , "record"
13 , "record"
13 , "refs"
14 , "refs"
14 , "strings-extra"
15 , "strings-extra"
16+ , "transformers"
15 , "tuples"
17 , "tuples"
16 , "typelevel-prelude"
18 , "typelevel-prelude"
17 , "unsafe-coerce"
19 , "unsafe-coerce"
plum/src/Plum.purs+24−15
@@ -3,6 +3,7 @@ module Plum (Plum, run) where
3import Prelude
3import Prelude
4
4
5import Data.Array ((:))
5import Data.Array ((:))
6+import Data.Array as Array
6import Data.Maybe (Maybe(..))
7import Data.Maybe (Maybe(..))
7import Effect (Effect)
8import Effect (Effect)
8import Effect.Ref as Ref
9import Effect.Ref as Ref
@@ -27,21 +28,29 @@ run id plum = do
27 projector <- Maquette.createProjector
28 projector <- Maquette.createProjector
28 Maquette.replace projector element do
29 Maquette.replace projector element do
29 model <- Ref.read modelRef
30 model <- Ref.read modelRef
31+
30− let
32+ ( let
31− el = map
33+ UI { children } _ = plum.view model
34+ in
35+ pure $ case Array.head children of
36+ Nothing -> Maquette.h "div" {} []
37+ Just child ->
38+ let
39+ { node, style } =
32− ( grow
40+ ( grow
33− ( \msg -> do
41+ ( \msg -> do
34− m <- Ref.read modelRef
42+ m <- Ref.read modelRef
35− m_ <- plum.update msg m
43+ m_ <- plum.update msg m
36− Ref.write m_ modelRef
44+ Ref.write m_ modelRef
37− Maquette.scheduleRender projector
45+ Maquette.scheduleRender projector
38− )
46+ )
39− )
47+ ) child
40− (let UI { children } _ = plum.view model in children)
48+ in
41− pure $ Maquette.h
49+ Maquette.h
42− "div"
50+ "div"
43− { styles: { height: "100%", width: "100%" } }
51+ { styles: { height: "100%", width: "100%" } }
44− (Maquette.h "style" {} [ Maquette.string outerStyle ] : el)
52+ [ Maquette.h "style" {} [ Maquette.string (outerStyle <> style) ], node ]
53+ )
45 Nothing -> pure unit
54 Nothing -> pure unit
46
55
47outerStyle :: String
56outerStyle :: String
plum/src/Plum/View.purs+132−70
@@ -31,10 +31,12 @@ module Plum.View
31
31
32import Prelude
32import Prelude
33
33
34+import Control.Monad.Writer (Writer, runWriter, tell)
34import Data.Array as Array
35import Data.Array as Array
35import Data.Int as Int
36import Data.Int as Int
36import Data.Maybe (Maybe(..))
37import Data.Maybe (Maybe(..))
37import Data.Maybe as Maybe
38import Data.Maybe as Maybe
39+import Data.Traversable (traverse)
38import Data.Tuple.Nested (type (/\), (/\))
40import Data.Tuple.Nested (type (/\), (/\))
39import Effect (Effect)
41import Effect (Effect)
40import Foreign.Object (Object)
42import Foreign.Object (Object)
@@ -42,6 +44,7 @@ import Foreign.Object as Object
42import Maquette (VNode, string)
44import Maquette (VNode, string)
43import Maquette as Maquette
45import Maquette as Maquette
44import Record.Unsafe.Union as Record
46import Record.Unsafe.Union as Record
47+import Web.HTML (ClassName)
45
48
46type GenericUIView children msg =
49type GenericUIView children msg =
47 { nerves :: Array (Nerve msg)
50 { nerves :: Array (Nerve msg)
@@ -165,11 +168,11 @@ image :: forall msg a. String -> { description :: String } -> GenericUI Unit msg
165image url description (UI { nerves, meat, hover, down } a) =
168image url description (UI { nerves, meat, hover, down } a) =
166 UI (mempty :: UIView msg) { children = [ { meat, nerves, hover, down } /\ Image url description ] } a
169 UI (mempty :: UIView msg) { children = [ { meat, nerves, hover, down } /\ Image url description ] } a
167
170
168−h :: String -> Skin -> Array VNode -> VNode
171+h :: String -> Classes -> Array VNode -> VNode
169−h elem (Skin styles) children = Maquette.h elem { styles } children
172+h elem classes children = Maquette.h elem { class: Array.intercalate " " classes } children
170
173
171−hWith :: forall props. String -> Record props -> Skin -> Array VNode -> VNode
174+hWith :: forall props. String -> Record props -> Classes -> Array VNode -> VNode
172−hWith elem props (Skin styles) children = Maquette.h elem (Record.unsafeUnion props { styles }) children
175+hWith elem props classes children = Maquette.h elem (Record.unsafeUnion props { class: Array.intercalate " " classes }) children
173
176
174data Length = Px Int | Fill | Fit | Max Int Length | Min Int Length
177data Length = Px Int | Fill | Fit | Max Int Length | Min Int Length
175
178
@@ -210,8 +213,10 @@ none = mempty /\ None
210
213
211newtype Skin = Skin (Object String)
214newtype Skin = Skin (Object String)
212
215
213−sk :: String -> String -> Skin
216+sk :: String -> String -> String -> Writer SkinGrowth Classes
217+sk cName key value = do
214−sk key val = Skin $ Object.singleton key val
218+ tell $ SkinGrowth $ Object.singleton cName { key, value }
219+ pure [ cName ]
215
220
216instance Semigroup Skin where
221instance Semigroup Skin where
217 append (Skin x) (Skin y) = Skin $ Object.union x y
222 append (Skin x) (Skin y) = Skin $ Object.union x y
@@ -221,55 +226,70 @@ instance Monoid Skin where
221
226
222data Context = Grid | Flexbox Direction | Generic | Span
227data Context = Grid | Flexbox Direction | Generic | Span
223
228
224−skin :: Context -> Meat -> Skin
229+skin :: Context -> Meat -> Writer SkinGrowth Classes
225skin ctx = case _ of
230skin ctx = case _ of
226− Spacing x y -> sk "gap" (show x <> "px " <> show y <> "px")
231+ Spacing x y -> sk ("spacing-" <> show x <> "-" <> show y) "gap" (show x <> "px " <> show y <> "px")
227− Explain -> sk "border" "dashed magenta"
232+ Explain -> sk "explain" "border" "dashed magenta"
228 Align dir alignment -> case ctx of
233 Align dir alignment -> case ctx of
229 Generic -> mempty
234 Generic -> mempty
230 Span -> mempty
235 Span -> mempty
231− Grid -> sk
236+ Grid ->
237+ let
238+ k =
232− ( case dir of
239+ ( case dir of
233− X -> "justify-items"
240+ X -> "justify-items"
234− Y -> "align-items"
241+ Y -> "align-items"
235− )
242+ )
243+ v =
236− ( case alignment of
244+ ( case alignment of
237− Start -> "start"
245+ Start -> "start"
238− Center -> "center"
246+ Center -> "center"
239− End -> "end"
247+ End -> "end"
240− )
248+ )
241−
249+ in
250+ sk ("align-grid-" <> k <> "-" <> v) k v
251+
242− Flexbox flexDir -> sk
252+ Flexbox flexDir ->
253+ let
254+ k =
243− ( case flexDir /\ dir of
255+ ( case flexDir /\ dir of
244− X /\ X -> "justify-content"
256+ X /\ X -> "justify-content"
245− X /\ Y -> "align-items"
257+ X /\ Y -> "align-items"
246− Y /\ X -> "align-items"
258+ Y /\ X -> "align-items"
247− Y /\ Y -> "justify-content"
259+ Y /\ Y -> "justify-content"
248− )
260+ )
261+
262+ v =
249− ( case alignment of
263+ ( case alignment of
250− Start -> "flex-start"
264+ Start -> "flex-start"
251− Center -> "center"
265+ Center -> "center"
252− End -> "flex-end"
266+ End -> "flex-end"
253− )
267+ )
268+ in
269+ sk ("align-flexbox-" <> k <> "-" <> v) k v
254− Width l -> sk "width" (render l)
270+ Width l -> sk ("width-" <> renderKey l) "width" (render l)
255− Height l -> sk "height" (render l)
271+ Height l -> sk ("width-" <> renderKey l) "height" (render l)
256 Wrapped -> case ctx of
272 Wrapped -> case ctx of
257− Flexbox _ -> sk "flex-wrap" "wrap"
273+ Flexbox _ -> sk "wrapped" "flex-wrap" "wrap"
258− _ -> mempty
274+ _ -> pure []
259− BackgroundColor color -> sk "background-color" (render color)
275+ BackgroundColor color -> sk ("bg-color-" <> renderKey color) "background-color" (render color)
260 Padding { top, right, bottom, left } ->
276 Padding { top, right, bottom, left } ->
277+ sk
278+ ("padding-" <> show top <> "-" <> show right <> "-" <> show bottom <> "-" <> show left)
279+ "padding"
261− sk "padding" (show top <> "px " <> show right <> "px " <> show bottom <> "px " <> show left <> "px")
280+ (show top <> "px " <> show right <> "px " <> show bottom <> "px " <> show left <> "px")
262 Spread -> case ctx of
281 Spread -> case ctx of
263− Flexbox _ -> sk "justify-content" "space-between"
282+ Flexbox _ -> sk "spread" "justify-content" "space-between"
264− _ -> mempty
283+ _ -> pure []
265− Opacity o -> sk "opacity" (show o)
284+ Opacity o -> sk ("opacity-" <> show o) "opacity" (show o)
266− Pointer -> sk "cursor" "pointer"
285+ Pointer -> sk "pointer" "cursor" "pointer"
267− Move { x, y } -> sk "transform" ("translate(" <> show x <> "px, " <> show y <> ")")
286+ Move { x, y } -> sk ("move-" <> show x <> "-" <> show y) "transform" ("translate(" <> show x <> "px, " <> show y <> "px)")
268− Clip X -> sk "overflow-x" "hidden"
287+ Clip X -> sk "clip-x" "overflow-x" "hidden"
269− Clip Y -> sk "overflow-y" "hidden"
288+ Clip Y -> sk "clip-y" "overflow-y" "hidden"
270
289
271class Renderable x where
290class Renderable x where
272 render :: x -> String
291 render :: x -> String
292+ renderKey :: x -> String
273
293
274instance Renderable Length where
294instance Renderable Length where
275 render = case _ of
295 render = case _ of
@@ -278,6 +298,12 @@ instance Renderable Length where
278 Fill -> "100%"
298 Fill -> "100%"
279 Max px l -> "max(" <> show px <> "px," <> render l <> ")"
299 Max px l -> "max(" <> show px <> "px," <> render l <> ")"
280 Min px l -> "min(" <> show px <> "px," <> render l <> ")"
300 Min px l -> "min(" <> show px <> "px," <> render l <> ")"
301+ renderKey = case _ of
302+ Px px -> show px
303+ Fit -> "fit-content"
304+ Fill -> "fill"
305+ Max px l -> "max-" <> show px <> "-" <> renderKey l
306+ Min px l -> "min-" <> show px <> "-" <> renderKey l
281
307
282newtype Color = Color { r :: Int, g :: Int, b :: Int, a :: Number }
308newtype Color = Color { r :: Int, g :: Int, b :: Int, a :: Number }
283
309
@@ -295,6 +321,7 @@ rgba r g b a = Color { r: Int.round (r * 255.0), g: Int.round (g * 255.0), b: In
295
321
296instance Renderable Color where
322instance Renderable Color where
297 render (Color { r, g, b, a }) = "rgba(" <> show r <> "," <> show g <> "," <> show b <> "," <> show a <> ")"
323 render (Color { r, g, b, a }) = "rgba(" <> show r <> "," <> show g <> "," <> show b <> "," <> show a <> ")"
324+ renderKey (Color { r, g, b, a }) = show r <> "-" <> show g <> "-" <> show b <> "-" <> show a
298
325
299data Bones :: Type -> Type
326data Bones :: Type -> Type
300data Bones msg
327data Bones msg
@@ -308,7 +335,9 @@ data Bones msg
308 | Image String { description :: String }
335 | Image String { description :: String }
309 | None
336 | None
310
337
338+type Classes = Array String
339+
311−newtype Mutation = Mutation { extraSkin :: Skin }
340+newtype Mutation = Mutation { extraSkin :: Classes }
312
341
313instance Semigroup Mutation where
342instance Semigroup Mutation where
314 append (Mutation x) (Mutation y) = Mutation { extraSkin: x.extraSkin <> y.extraSkin }
343 append (Mutation x) (Mutation y) = Mutation { extraSkin: x.extraSkin <> y.extraSkin }
@@ -316,13 +345,25 @@ instance Semigroup Mutation where
316instance Monoid Mutation where
345instance Monoid Mutation where
317 mempty = Mutation { extraSkin: mempty }
346 mempty = Mutation { extraSkin: mempty }
318
347
348+newtype SkinGrowth = SkinGrowth (Object { key :: String, value :: String })
349+
350+styleSkinGrowth :: SkinGrowth -> String
351+styleSkinGrowth (SkinGrowth o) =
352+ Object.foldMap (\className { key, value } -> "." <> className <> "{" <> key <> ":" <> value <> ";}") o
353+
354+instance Semigroup SkinGrowth where
355+ append (SkinGrowth x) (SkinGrowth y) = SkinGrowth $ Object.union x y
356+
357+instance Monoid SkinGrowth where
358+ mempty = SkinGrowth Object.empty
359+
319−growSkin :: forall msg. (msg -> Effect Unit) -> Mutation -> View msg -> VNode
360+growSkin :: forall msg. (msg -> Effect Unit) -> Mutation -> View msg -> Writer SkinGrowth VNode
320−growSkin fire (Mutation mutation) ({ meat, hover, down, nerves } /\ bones) =
361+growSkin fire (Mutation mutation) ({ meat, hover, down, nerves } /\ bones) = do
321 let
362 let
322 alignCenter = [ Align X Center, Align Y Center ]
363 alignCenter = [ Align X Center, Align Y Center ]
323 widthFill = [ Width Fill, Height Fill ]
364 widthFill = [ Width Fill, Height Fill ]
324 skn ctx =
365 skn ctx =
325− Array.foldMap (skin ctx)
366+ ((_ <> mutation.extraSkin) <<< Array.concat) <$> traverse (skin ctx)
326 ( meat
367 ( meat
327 <> case ctx of
368 <> case ctx of
328 Span -> mempty
369 Span -> mempty
@@ -334,33 +375,54 @@ growSkin fire (Mutation mutation) ({ meat, hover, down, nerves } /\ bones) =
334 Flexbox _ -> alignCenter
375 Flexbox _ -> alignCenter
335 Span -> mempty
376 Span -> mempty
336 Generic -> alignCenter
377 Generic -> alignCenter
337− ) <> mutation.extraSkin
378+ )
338− in
379+
339− case bones of
380+ case bones of
340− Text t -> h "span" (skn Span) [ string t ]
381+ Text t -> (\c -> h "span" c [ string t ]) <$> (skn Span)
382+ Wrapper x -> do
341− Wrapper x -> h "div" (skn (Flexbox X) <> sk "display" "flex" <> sk "flex-direction" "row") [ growSkin fire mempty x ]
383+ classes <- (skn (Flexbox X) <> sk "display-flex" "display" "flex" <> sk "flex-direction-row" "flex-direction" "row")
384+ x' <- growSkin fire mempty x
385+ pure $ h "div" classes [ x' ]
386+ Stack children -> do
342− Stack children -> h "div" (skn Grid <> sk "display" "grid")
387+ classes <- (skn Grid <> sk "display-grid" "display" "grid")
388+ extraSkin <- sk "grid-row-1" "grid-row" "1" <> sk "grid-column-1" "grid-column" "1"
343− (map (growSkin fire $ Mutation { extraSkin: sk "grid-row" "1" <> sk "grid-column" "1" }) children)
389+ children' <- (traverse (growSkin fire $ Mutation { extraSkin }) children)
390+ pure $ h "div" classes children'
391+
392+ Row children -> do
344− Row children -> h "div" (skn (Flexbox X) <> sk "display" "flex" <> sk "flex-direction" "row")
393+ classes <- (skn (Flexbox X) <> sk "display-flex" "display" "flex" <> sk "flex-direction-row" "flex-direction" "row")
345− (map (growSkin fire mempty) children)
394+ children' <- traverse (growSkin fire mempty) children
395+ pure $ h "div" classes children'
396+ Column children -> do
346− Column children -> h "div" (skn (Flexbox Y) <> sk "display" "flex" <> sk "flex-direction" "column")
397+ classes <- (skn (Flexbox Y) <> sk "display-flex" "display" "flex" <> sk "flex-direction-column" "flex-direction" "column")
347− (map (growSkin fire mempty) children)
398+ children' <- traverse (growSkin fire mempty) children
399+ pure $ h "div" classes children'
348− Link href { newTab } child -> hWith "a"
400+ Link href { newTab } child -> do
401+ classes <- (skn (Flexbox X) <> sk "display-flex" "display" "flex" <> sk "flex-direction-row" "flex-direction" "row")
402+ child' <- growSkin fire mempty child
403+ pure $ hWith "a"
349 { href
404 { href
350 , rel: "noopener noreferrer"
405 , rel: "noopener noreferrer"
351 , target: if newTab then "_blank" else "_self"
406 , target: if newTab then "_blank" else "_self"
352 }
407 }
353− (skn (Flexbox X) <> sk "display" "flex" <> sk "flex-direction" "row")
408+ classes
354− [ growSkin fire mempty child ]
409+ [ child' ]
355
410
356− Download href { filename } child -> hWith "a"
411+ Download href { filename } child -> do
412+ classes <- (skn (Flexbox X) <> sk "display-flex" "display" "flex" <> sk "flex-direction-row" "flex-direction" "row")
413+ child' <- growSkin fire mempty child
414+ pure $ hWith "a"
357 { href
415 { href
358 , download: Maybe.fromMaybe "" filename
416 , download: Maybe.fromMaybe "" filename
359 }
417 }
360− (skn (Flexbox X) <> sk "display" "flex" <> sk "flex-direction" "row")
418+ classes
361− [ growSkin fire mempty child ]
419+ [ child' ]
362− Image src { description } -> hWith "img" { src, alt: description } (skn Generic) []
420+ Image src { description } -> (\c -> hWith "img" { src, alt: description } c []) <$> (skn Generic)
363− None -> h "div" mempty []
421+ None -> pure $ h "div" mempty []
364
422
365−grow :: forall msg. (msg -> Effect Unit) -> View msg -> VNode
423+grow :: forall msg. (msg -> Effect Unit) -> View msg -> { node :: VNode, style :: String }
424+grow fire v =
425+ let
366−grow fire v = growSkin fire mempty v
426+ node /\ skinGrowth = runWriter (growSkin fire mempty v)
427+ in
428+ { node, style: styleSkinGrowth skinGrowth }