git.iko.soy/purestack-dev/purescript-plum
on master help sign in
10 files changed+730−3419
since splitsnapshots
unifiedsplit
.gitignore+1 plum/index.js−2312 plum/spago.dhall+7 plum/src/Main.purs+44−13 plum/src/Maquette.js−953 plum/src/Maquette.purs−33 plum/src/Plum.purs+61−17 plum/src/Plum/View.purs+571−91 plum/src/Snabbdom.js+1 plum/src/Snabbdom.purs+45
.gitignore+1
@@ -8,3 +8,4 @@
88/.purs*
99/.psa*
1010/.spago
11+plum/index.js
plum/index.jsdeleted−2312
@@ -1,2312 +0,0 @@
1−(() => {
2− // output/Control.Semigroupoid/index.js
3− var semigroupoidFn = {
4− compose: function(f) {
5− return function(g) {
6− return function(x) {
7− return f(g(x));
8− };
9− };
10− }
11− };
12−
13− // output/Control.Category/index.js
14− var identity = function(dict) {
15− return dict.identity;
16− };
17− var categoryFn = {
18− identity: function(x) {
19− return x;
20− },
21− Semigroupoid0: function() {
22− return semigroupoidFn;
23− }
24− };
25−
26− // output/Data.Boolean/index.js
27− var otherwise = true;
28−
29− // output/Data.Function/index.js
30− var flip = function(f) {
31− return function(b) {
32− return function(a) {
33− return f(a)(b);
34− };
35− };
36− };
37− var $$const = function(a) {
38− return function(v) {
39− return a;
40− };
41− };
42−
43− // output/Data.Functor/foreign.js
44− var arrayMap = function(f) {
45− return function(arr) {
46− var l = arr.length;
47− var result = new Array(l);
48− for (var i = 0; i < l; i++) {
49− result[i] = f(arr[i]);
50− }
51− return result;
52− };
53− };
54−
55− // output/Data.Unit/foreign.js
56− var unit = void 0;
57−
58− // output/Data.Functor/index.js
59− var map = function(dict) {
60− return dict.map;
61− };
62− var functorArray = {
63− map: arrayMap
64− };
65−
66− // output/Control.Apply/index.js
67− var apply = function(dict) {
68− return dict.apply;
69− };
70−
71− // output/Control.Applicative/index.js
72− var pure = function(dict) {
73− return dict.pure;
74− };
75− var liftA1 = function(dictApplicative) {
76− var apply2 = apply(dictApplicative.Apply0());
77− var pure1 = pure(dictApplicative);
78− return function(f) {
79− return function(a) {
80− return apply2(pure1(f))(a);
81− };
82− };
83− };
84−
85− // output/Data.Array/foreign.js
86− var rangeImpl = function(start2, end) {
87− var step2 = start2 > end ? -1 : 1;
88− var result = new Array(step2 * (end - start2) + 1);
89− var i = start2, n = 0;
90− while (i !== end) {
91− result[n++] = i;
92− i += step2;
93− }
94− result[n] = i;
95− return result;
96− };
97− var replicateFill = function(count, value12) {
98− if (count < 1) {
99− return [];
100− }
101− var result = new Array(count);
102− return result.fill(value12);
103− };
104− var replicatePolyfill = function(count, value12) {
105− var result = [];
106− var n = 0;
107− for (var i = 0; i < count; i++) {
108− result[n++] = value12;
109− }
110− return result;
111− };
112− var replicateImpl = typeof Array.prototype.fill === "function" ? replicateFill : replicatePolyfill;
113−
114− // output/Data.Semigroup/foreign.js
115− var concatArray = function(xs) {
116− return function(ys) {
117− if (xs.length === 0) return ys;
118− if (ys.length === 0) return xs;
119− return xs.concat(ys);
120− };
121− };
122−
123− // output/Data.Semigroup/index.js
124− var semigroupArray = {
125− append: concatArray
126− };
127− var append = function(dict) {
128− return dict.append;
129− };
130−
131− // output/Control.Bind/foreign.js
132− var arrayBind = typeof Array.prototype.flatMap === "function" ? function(arr) {
133− return function(f) {
134− return arr.flatMap(f);
135− };
136− } : function(arr) {
137− return function(f) {
138− var result = [];
139− var l = arr.length;
140− for (var i = 0; i < l; i++) {
141− var xs = f(arr[i]);
142− var k = xs.length;
143− for (var j = 0; j < k; j++) {
144− result.push(xs[j]);
145− }
146− }
147− return result;
148− };
149− };
150−
151− // output/Control.Bind/index.js
152− var bind = function(dict) {
153− return dict.bind;
154− };
155− var bindFlipped = function(dictBind) {
156− return flip(bind(dictBind));
157− };
158−
159− // output/Control.Monad/index.js
160− var ap = function(dictMonad) {
161− var bind3 = bind(dictMonad.Bind1());
162− var pure3 = pure(dictMonad.Applicative0());
163− return function(f) {
164− return function(a) {
165− return bind3(f)(function(f$prime) {
166− return bind3(a)(function(a$prime) {
167− return pure3(f$prime(a$prime));
168− });
169− });
170− };
171− };
172− };
173−
174− // output/Data.Bounded/foreign.js
175− var topInt = 2147483647;
176− var bottomInt = -2147483648;
177− var topChar = String.fromCharCode(65535);
178− var bottomChar = String.fromCharCode(0);
179− var topNumber = Number.POSITIVE_INFINITY;
180− var bottomNumber = Number.NEGATIVE_INFINITY;
181−
182− // output/Data.Ord/foreign.js
183− var unsafeCompareImpl = function(lt) {
184− return function(eq2) {
185− return function(gt) {
186− return function(x) {
187− return function(y) {
188− return x < y ? lt : x === y ? eq2 : gt;
189− };
190− };
191− };
192− };
193− };
194− var ordIntImpl = unsafeCompareImpl;
195−
196− // output/Data.Eq/foreign.js
197− var refEq = function(r1) {
198− return function(r2) {
199− return r1 === r2;
200− };
201− };
202− var eqIntImpl = refEq;
203−
204− // output/Data.Eq/index.js
205− var eqInt = {
206− eq: eqIntImpl
207− };
208−
209− // output/Data.Ordering/index.js
210− var LT = /* @__PURE__ */ function() {
211− function LT2() {
212− }
213− ;
214− LT2.value = new LT2();
215− return LT2;
216− }();
217− var GT = /* @__PURE__ */ function() {
218− function GT2() {
219− }
220− ;
221− GT2.value = new GT2();
222− return GT2;
223− }();
224− var EQ = /* @__PURE__ */ function() {
225− function EQ2() {
226− }
227− ;
228− EQ2.value = new EQ2();
229− return EQ2;
230− }();
231−
232− // output/Data.Ord/index.js
233− var ordInt = /* @__PURE__ */ function() {
234− return {
235− compare: ordIntImpl(LT.value)(EQ.value)(GT.value),
236− Eq0: function() {
237− return eqInt;
238− }
239− };
240− }();
241−
242− // output/Data.Bounded/index.js
243− var top = function(dict) {
244− return dict.top;
245− };
246− var boundedInt = {
247− top: topInt,
248− bottom: bottomInt,
249− Ord0: function() {
250− return ordInt;
251− }
252− };
253− var bottom = function(dict) {
254− return dict.bottom;
255− };
256−
257− // output/Data.Show/foreign.js
258− var showIntImpl = function(n) {
259− return n.toString();
260− };
261− var showNumberImpl = function(n) {
262− var str = n.toString();
263− return isNaN(str + ".0") ? str : str + ".0";
264− };
265−
266− // output/Data.Show/index.js
267− var showNumber = {
268− show: showNumberImpl
269− };
270− var showInt = {
271− show: showIntImpl
272− };
273− var show = function(dict) {
274− return dict.show;
275− };
276−
277− // output/Data.Maybe/index.js
278− var identity2 = /* @__PURE__ */ identity(categoryFn);
279− var Nothing = /* @__PURE__ */ function() {
280− function Nothing2() {
281− }
282− ;
283− Nothing2.value = new Nothing2();
284− return Nothing2;
285− }();
286− var Just = /* @__PURE__ */ function() {
287− function Just2(value0) {
288− this.value0 = value0;
289− }
290− ;
291− Just2.create = function(value0) {
292− return new Just2(value0);
293− };
294− return Just2;
295− }();
296− var maybe = function(v) {
297− return function(v1) {
298− return function(v2) {
299− if (v2 instanceof Nothing) {
300− return v;
301− }
302− ;
303− if (v2 instanceof Just) {
304− return v1(v2.value0);
305− }
306− ;
307− throw new Error("Failed pattern match at Data.Maybe (line 237, column 1 - line 237, column 51): " + [v.constructor.name, v1.constructor.name, v2.constructor.name]);
308− };
309− };
310− };
311− var fromMaybe = function(a) {
312− return maybe(a)(identity2);
313− };
314−
315− // output/Data.Monoid/index.js
316− var monoidArray = {
317− mempty: [],
318− Semigroup0: function() {
319− return semigroupArray;
320− }
321− };
322− var mempty = function(dict) {
323− return dict.mempty;
324− };
325−
326− // output/Effect/foreign.js
327− var pureE = function(a) {
328− return function() {
329− return a;
330− };
331− };
332− var bindE = function(a) {
333− return function(f) {
334− return function() {
335− return f(a())();
336− };
337− };
338− };
339−
340− // output/Effect/index.js
341− var $runtime_lazy = function(name14, moduleName, init) {
342− var state2 = 0;
343− var val;
344− return function(lineNumber) {
345− if (state2 === 2) return val;
346− if (state2 === 1) throw new ReferenceError(name14 + " was needed before it finished initializing (module " + moduleName + ", line " + lineNumber + ")", moduleName, lineNumber);
347− state2 = 1;
348− val = init();
349− state2 = 2;
350− return val;
351− };
352− };
353− var monadEffect = {
354− Applicative0: function() {
355− return applicativeEffect;
356− },
357− Bind1: function() {
358− return bindEffect;
359− }
360− };
361− var bindEffect = {
362− bind: bindE,
363− Apply0: function() {
364− return $lazy_applyEffect(0);
365− }
366− };
367− var applicativeEffect = {
368− pure: pureE,
369− Apply0: function() {
370− return $lazy_applyEffect(0);
371− }
372− };
373− var $lazy_functorEffect = /* @__PURE__ */ $runtime_lazy("functorEffect", "Effect", function() {
374− return {
375− map: liftA1(applicativeEffect)
376− };
377− });
378− var $lazy_applyEffect = /* @__PURE__ */ $runtime_lazy("applyEffect", "Effect", function() {
379− return {
380− apply: ap(monadEffect),
381− Functor0: function() {
382− return $lazy_functorEffect(0);
383− }
384− };
385− });
386− var functorEffect = /* @__PURE__ */ $lazy_functorEffect(20);
387−
388− // output/Effect.Ref/foreign.js
389− var _new = function(val) {
390− return function() {
391− return { value: val };
392− };
393− };
394− var read = function(ref) {
395− return function() {
396− return ref.value;
397− };
398− };
399− var write = function(val) {
400− return function(ref) {
401− return function() {
402− ref.value = val;
403− };
404− };
405− };
406−
407− // output/Effect.Ref/index.js
408− var $$new = _new;
409−
410− // output/Control.Monad.ST.Internal/foreign.js
411− var map_ = function(f) {
412− return function(a) {
413− return function() {
414− return f(a());
415− };
416− };
417− };
418− var pure_ = function(a) {
419− return function() {
420− return a;
421− };
422− };
423− var bind_ = function(a) {
424− return function(f) {
425− return function() {
426− return f(a())();
427− };
428− };
429− };
430−
431− // output/Control.Monad.ST.Internal/index.js
432− var $runtime_lazy2 = function(name14, moduleName, init) {
433− var state2 = 0;
434− var val;
435− return function(lineNumber) {
436− if (state2 === 2) return val;
437− if (state2 === 1) throw new ReferenceError(name14 + " was needed before it finished initializing (module " + moduleName + ", line " + lineNumber + ")", moduleName, lineNumber);
438− state2 = 1;
439− val = init();
440− state2 = 2;
441− return val;
442− };
443− };
444− var functorST = {
445− map: map_
446− };
447− var monadST = {
448− Applicative0: function() {
449− return applicativeST;
450− },
451− Bind1: function() {
452− return bindST;
453− }
454− };
455− var bindST = {
456− bind: bind_,
457− Apply0: function() {
458− return $lazy_applyST(0);
459− }
460− };
461− var applicativeST = {
462− pure: pure_,
463− Apply0: function() {
464− return $lazy_applyST(0);
465− }
466− };
467− var $lazy_applyST = /* @__PURE__ */ $runtime_lazy2("applyST", "Control.Monad.ST.Internal", function() {
468− return {
469− apply: ap(monadST),
470− Functor0: function() {
471− return functorST;
472− }
473− };
474− });
475−
476− // output/Data.Foldable/foreign.js
477− var foldrArray = function(f) {
478− return function(init) {
479− return function(xs) {
480− var acc = init;
481− var len = xs.length;
482− for (var i = len - 1; i >= 0; i--) {
483− acc = f(xs[i])(acc);
484− }
485− return acc;
486− };
487− };
488− };
489− var foldlArray = function(f) {
490− return function(init) {
491− return function(xs) {
492− var acc = init;
493− var len = xs.length;
494− for (var i = 0; i < len; i++) {
495− acc = f(acc)(xs[i]);
496− }
497− return acc;
498− };
499− };
500− };
501−
502− // output/Data.Tuple/index.js
503− var Tuple = /* @__PURE__ */ function() {
504− function Tuple2(value0, value1) {
505− this.value0 = value0;
506− this.value1 = value1;
507− }
508− ;
509− Tuple2.create = function(value0) {
510− return function(value1) {
511− return new Tuple2(value0, value1);
512− };
513− };
514− return Tuple2;
515− }();
516−
517− // output/Unsafe.Coerce/foreign.js
518− var unsafeCoerce2 = function(x) {
519− return x;
520− };
521−
522− // output/Data.Foldable/index.js
523− var foldr = function(dict) {
524− return dict.foldr;
525− };
526− var foldMapDefaultR = function(dictFoldable) {
527− var foldr2 = foldr(dictFoldable);
528− return function(dictMonoid) {
529− var append3 = append(dictMonoid.Semigroup0());
530− var mempty3 = mempty(dictMonoid);
531− return function(f) {
532− return foldr2(function(x) {
533− return function(acc) {
534− return append3(f(x))(acc);
535− };
536− })(mempty3);
537− };
538− };
539− };
540− var foldableArray = {
541− foldr: foldrArray,
542− foldl: foldlArray,
543− foldMap: function(dictMonoid) {
544− return foldMapDefaultR(foldableArray)(dictMonoid);
545− }
546− };
547− var foldMap = function(dict) {
548− return dict.foldMap;
549− };
550−
551− // output/Data.Function.Uncurried/foreign.js
552− var runFn2 = function(fn) {
553− return function(a) {
554− return function(b) {
555− return fn(a, b);
556− };
557− };
558− };
559−
560− // output/Data.Array/index.js
561− var foldMap1 = /* @__PURE__ */ foldMap(foldableArray);
562− var range2 = /* @__PURE__ */ runFn2(rangeImpl);
563− var foldMap2 = function(dictMonoid) {
564− return foldMap1(dictMonoid);
565− };
566−
567− // output/Maquette/foreign.js
568− var NAMESPACE_W3 = "http://www.w3.org/";
569− var NAMESPACE_SVG = NAMESPACE_W3 + "2000/svg";
570− var NAMESPACE_XLINK = NAMESPACE_W3 + "1999/xlink";
571− var emptyArray = [];
572− var extend2 = function(base, overrides) {
573− var result = {};
574− Object.keys(base).forEach(function(key) {
575− result[key] = base[key];
576− });
577− if (overrides) {
578− Object.keys(overrides).forEach(function(key) {
579− result[key] = overrides[key];
580− });
581− }
582− return result;
583− };
584− var same = function(vnode1, vnode2) {
585− if (vnode1.vnodeSelector !== vnode2.vnodeSelector) {
586− return false;
587− }
588− if (vnode1.properties && vnode2.properties) {
589− if (vnode1.properties.key !== vnode2.properties.key) {
590− return false;
591− }
592− return vnode1.properties.bind === vnode2.properties.bind;
593− }
594− return !vnode1.properties && !vnode2.properties;
595− };
596− var checkStyleValue = function(styleValue) {
597− if (typeof styleValue !== "string") {
598− throw new Error("Style values must be strings");
599− }
600− };
601− var findIndexOfChild = function(children, sameAs, start2) {
602− if (sameAs.vnodeSelector !== "") {
603− for (var i = start2; i < children.length; i++) {
604− if (same(children[i], sameAs)) {
605− return i;
606− }
607− }
608− }
609− return -1;
610− };
611− var checkDistinguishable = function(childNodes, indexToCheck, parentVNode, operation) {
612− var childNode = childNodes[indexToCheck];
613− if (childNode.vnodeSelector === "") {
614− return;
615− }
616− var properties = childNode.properties;
617− var key = properties ? properties.key === void 0 ? properties.bind : properties.key : void 0;
618− if (!key) {
619− for (var i = 0; i < childNodes.length; i++) {
620− if (i !== indexToCheck) {
621− var node = childNodes[i];
622− if (same(node, childNode)) {
623− throw {
624− error: new Error(parentVNode.vnodeSelector + " had a " + childNode.vnodeSelector + " child " + (operation === "added" ? operation : "removed") + ", but there is now more than one. You must add unique key properties to make them distinguishable."),
625− parentNode: parentVNode,
626− childNode
627− };
628− }
629− }
630− }
631− }
632− };
633− var nodeAdded = function(vNode) {
634− if (vNode.properties) {
635− var enterAnimation = vNode.properties.enterAnimation;
636− if (enterAnimation) {
637− enterAnimation(vNode.domNode, vNode.properties);
638− }
639− }
640− };
641− var removedNodes = [];
642− var requestedIdleCallback = false;
643− var visitRemovedNode = function(node) {
644− (node.children || []).forEach(visitRemovedNode);
645− if (node.properties && node.properties.afterRemoved) {
646− node.properties.afterRemoved.apply(node.properties.bind || node.properties, [
647− node.domNode
648− ]);
649− }
650− };
651− var processPendingNodeRemovals = function() {
652− requestedIdleCallback = false;
653− removedNodes.forEach(visitRemovedNode);
654− removedNodes.length = 0;
655− };
656− var scheduleNodeRemoval = function(vNode) {
657− removedNodes.push(vNode);
658− if (!requestedIdleCallback) {
659− requestedIdleCallback = true;
660− if (typeof window !== "undefined" && "requestIdleCallback" in window) {
661− window.requestIdleCallback(processPendingNodeRemovals, { timeout: 16 });
662− } else {
663− setTimeout(processPendingNodeRemovals, 16);
664− }
665− }
666− };
667− var nodeToRemove = function(vNode) {
668− var domNode = vNode.domNode;
669− if (vNode.properties) {
670− var exitAnimation = vNode.properties.exitAnimation;
671− if (exitAnimation) {
672− domNode.style.pointerEvents = "none";
673− var removeDomNode = function() {
674− if (domNode.parentNode) {
675− domNode.parentNode.removeChild(domNode);
676− scheduleNodeRemoval(vNode);
677− }
678− };
679− exitAnimation(domNode, removeDomNode, vNode.properties);
680− return;
681− }
682− }
683− if (domNode.parentNode) {
684− domNode.parentNode.removeChild(domNode);
685− scheduleNodeRemoval(vNode);
686− }
687− };
688− var vnodeOnlyProps = [
689− "afterCreate",
690− "afterUpdate",
691− "afterRemoved",
692− "enterAnimation",
693− "exitAnimation",
694− "updateAnimation"
695− ];
696− function filterVNodeOnlyProps(name14) {
697− return !vnodeOnlyProps.includes(name14);
698− }
699− var setProperties = function(domNode, properties, projectionOptions) {
700− if (!properties) {
701− return;
702− }
703− var eventHandlerInterceptor = projectionOptions.eventHandlerInterceptor;
704− var propNames = Object.keys(properties).filter(filterVNodeOnlyProps);
705− var propCount = propNames.length;
706− for (var i = 0; i < propCount; i++) {
707− var propName = propNames[i];
708− var propValue = properties[propName];
709− if (propName === "className") {
710− throw new Error('Property "className" is not supported, use "class".');
711− } else if (propName === "class") {
712− toggleClasses(domNode, propValue, true);
713− } else if (propName === "classes") {
714− var classNames = Object.keys(propValue);
715− var classNameCount = classNames.length;
716− for (var j = 0; j < classNameCount; j++) {
717− var className = classNames[j];
718− if (propValue[className]) {
719− domNode.classList.add(className);
720− }
721− }
722− } else if (propName === "styles") {
723− var styleNames = Object.keys(propValue);
724− var styleCount = styleNames.length;
725− for (var j = 0; j < styleCount; j++) {
726− var styleName = styleNames[j];
727− var styleValue = propValue[styleName];
728− if (styleValue) {
729− checkStyleValue(styleValue);
730− projectionOptions.styleApplyer(domNode, styleName, styleValue);
731− }
732− }
733− } else if (propName === "on" && propValue) {
734− for (var _i = 0, _a = Object.entries(properties.on); _i < _a.length; _i++) {
735− var _b = _a[_i], key = _b[0], handler = _b[1];
736− var listener = typeof handler === "function" ? handler : handler.listener;
737− if (eventHandlerInterceptor) {
738− listener = eventHandlerInterceptor(key, listener, domNode, properties);
739− }
740− if (listener) {
741− domNode.addEventListener(key, listener, typeof handler === "function" ? void 0 : handler.options);
742− }
743− }
744− } else if (propName !== "key" && propValue !== null && propValue !== void 0) {
745− var type = typeof propValue;
746− if (type === "function") {
747− if (propName.lastIndexOf("on", 0) === 0) {
748− if (eventHandlerInterceptor) {
749− propValue = eventHandlerInterceptor(propName, propValue, domNode, properties);
750− }
751− }
752− domNode[propName] = propValue;
753− } else if (projectionOptions.namespace === NAMESPACE_SVG) {
754− if (propName === "href") {
755− domNode.setAttributeNS(NAMESPACE_XLINK, propName, propValue);
756− } else {
757− domNode.setAttribute(propName, propValue);
758− }
759− } else if (type === "string" && propName !== "value" && propName !== "innerHTML") {
760− domNode.setAttribute(propName, propValue);
761− } else {
762− domNode[propName] = propValue;
763− }
764− }
765− }
766− };
767− var addChildren = function(domNode, children, projectionOptions) {
768− if (!children) {
769− return;
770− }
771− for (var _i = 0, children_1 = children; _i < children_1.length; _i++) {
772− var child = children_1[_i];
773− createDom(child, domNode, void 0, projectionOptions);
774− }
775− };
776− var initPropertiesAndChildren = function(domNode, vnode, projectionOptions) {
777− addChildren(domNode, vnode.children, projectionOptions);
778− if (vnode.text) {
779− domNode.textContent = vnode.text;
780− }
781− setProperties(domNode, vnode.properties, projectionOptions);
782− if (vnode.properties && vnode.properties.afterCreate) {
783− vnode.properties.afterCreate.apply(vnode.properties.bind || vnode.properties, [
784− domNode,
785− projectionOptions,
786− vnode.vnodeSelector,
787− vnode.properties,
788− vnode.children
789− ]);
790− }
791− };
792− var createDom = function(vnode, parentNode, insertBefore, projectionOptions) {
793− var _a;
794− var domNode;
795− var start2 = 0;
796− var vnodeSelector = vnode.vnodeSelector;
797− var doc = parentNode.ownerDocument;
798− if (vnodeSelector === "") {
799− if (vnode.domNode) {
800− vnode.domNode.nodeValue = vnode.text;
801− } else {
802− domNode = vnode.domNode = doc.createTextNode(vnode.text);
803− if (insertBefore !== void 0) {
804− parentNode.insertBefore(domNode, insertBefore);
805− } else {
806− parentNode.appendChild(domNode);
807− }
808− }
809− } else {
810− for (var i = 0; i <= vnodeSelector.length; ++i) {
811− var c = vnodeSelector.charAt(i);
812− if (i === vnodeSelector.length || c === "." || c === "#") {
813− var type = vnodeSelector.charAt(start2 - 1);
814− var found = vnodeSelector.slice(start2, i);
815− if (type === ".") {
816− domNode.classList.add(found);
817− } else if (type === "#") {
818− domNode.id = found;
819− } else {
820− if (found === "svg") {
821− projectionOptions = extend2(projectionOptions, {
822− namespace: NAMESPACE_SVG
823− });
824− }
825− if (projectionOptions.namespace !== void 0) {
826− domNode = vnode.domNode = doc.createElementNS(projectionOptions.namespace, found);
827− } else {
828− domNode = vnode.domNode = vnode.domNode || (((_a = vnode.properties) === null || _a === void 0 ? void 0 : _a.is) ? doc.createElement(found, { is: vnode.properties.is }) : doc.createElement(found));
829− if (found === "input" && vnode.properties && vnode.properties.type !== void 0) {
830− domNode.setAttribute("type", vnode.properties.type);
831− }
832− }
833− if (insertBefore !== void 0) {
834− parentNode.insertBefore(domNode, insertBefore);
835− } else if (domNode.parentNode !== parentNode) {
836− parentNode.appendChild(domNode);
837− }
838− }
839− start2 = i + 1;
840− }
841− }
842− initPropertiesAndChildren(domNode, vnode, projectionOptions);
843− }
844− };
845− var updateDom;
846− var toggleClasses = function(domNode, classes, on2) {
847− if (!classes) {
848− return;
849− }
850− classes.split(" ").forEach(function(classToToggle) {
851− if (classToToggle) {
852− domNode.classList.toggle(classToToggle, on2);
853− }
854− });
855− };
856− var updateProperties = function(domNode, previousProperties, properties, projectionOptions) {
857− if (!properties) {
858− return;
859− }
860− var propertiesUpdated = false;
861− var propNames = Object.keys(properties).filter(filterVNodeOnlyProps);
862− var propCount = propNames.length;
863− for (var i = 0; i < propCount; i++) {
864− var propName = propNames[i];
865− var propValue = properties[propName];
866− var previousValue = previousProperties[propName];
867− if (propName === "class") {
868− if (previousValue !== propValue) {
869− toggleClasses(domNode, previousValue, false);
870− toggleClasses(domNode, propValue, true);
871− }
872− } else if (propName === "classes") {
873− var classList = domNode.classList;
874− var classNames = Object.keys(propValue);
875− var classNameCount = classNames.length;
876− for (var j = 0; j < classNameCount; j++) {
877− var className = classNames[j];
878− var on2 = !!propValue[className];
879− var previousOn = !!previousValue[className];
880− if (on2 === previousOn) {
881− continue;
882− }
883− propertiesUpdated = true;
884− if (on2) {
885− classList.add(className);
886− } else {
887− classList.remove(className);
888− }
889− }
890− } else if (propName === "styles") {
891− var styleNames = Object.keys(propValue);
892− var styleCount = styleNames.length;
893− for (var j = 0; j < styleCount; j++) {
894− var styleName = styleNames[j];
895− var newStyleValue = propValue[styleName];
896− var oldStyleValue = previousValue[styleName];
897− if (newStyleValue === oldStyleValue) {
898− continue;
899− }
900− propertiesUpdated = true;
901− if (newStyleValue) {
902− checkStyleValue(newStyleValue);
903− projectionOptions.styleApplyer(domNode, styleName, newStyleValue);
904− } else {
905− projectionOptions.styleApplyer(domNode, styleName, "");
906− }
907− }
908− } else {
909− if (!propValue && typeof previousValue === "string") {
910− propValue = "";
911− }
912− if (propName === "value") {
913− var domValue = domNode[propName];
914− if (domValue !== propValue && // The 'value' in the DOM tree !== newValue
915− propValue !== previousValue) {
916− domNode[propName] = propValue;
917− }
918− if (propValue !== previousValue) {
919− propertiesUpdated = true;
920− }
921− } else if (propValue !== previousValue) {
922− var type = typeof propValue;
923− if (type !== "function" || !projectionOptions.eventHandlerInterceptor) {
924− if (projectionOptions.namespace === NAMESPACE_SVG) {
925− if (propName === "href") {
926− domNode.setAttributeNS(NAMESPACE_XLINK, propName, propValue);
927− } else {
928− domNode.setAttribute(propName, propValue);
929− }
930− } else if (type === "string" && propName !== "innerHTML") {
931− if (propName === "role" && propValue === "") {
932− domNode.removeAttribute(propName);
933− } else {
934− domNode.setAttribute(propName, propValue);
935− }
936− } else if (domNode[propName] !== propValue) {
937− domNode[propName] = propValue;
938− }
939− propertiesUpdated = true;
940− }
941− }
942− }
943− }
944− return propertiesUpdated;
945− };
946− var updateChildren = function(vnode, domNode, oldChildren, newChildren, projectionOptions) {
947− if (oldChildren === newChildren) {
948− return false;
949− }
950− oldChildren = oldChildren || emptyArray;
951− newChildren = newChildren || emptyArray;
952− var oldChildrenLength = oldChildren.length;
953− var newChildrenLength = newChildren.length;
954− var oldIndex = 0;
955− var newIndex = 0;
956− var i;
957− var textUpdated = false;
958− while (newIndex < newChildrenLength) {
959− var oldChild = oldIndex < oldChildrenLength ? oldChildren[oldIndex] : void 0;
960− var newChild = newChildren[newIndex];
961− if (oldChild !== void 0 && same(oldChild, newChild)) {
962− textUpdated = updateDom(oldChild, newChild, projectionOptions, domNode, oldChildren) || textUpdated;
963− oldIndex++;
964− } else {
965− var findOldIndex = findIndexOfChild(oldChildren, newChild, oldIndex + 1);
966− if (findOldIndex >= 0) {
967− for (i = oldIndex; i < findOldIndex; i++) {
968− nodeToRemove(oldChildren[i]);
969− checkDistinguishable(oldChildren, i, vnode, "removed");
970− }
971− textUpdated = updateDom(oldChildren[findOldIndex], newChild, projectionOptions, domNode, oldChildren) || textUpdated;
972− oldIndex = findOldIndex + 1;
973− } else {
974− createDom(newChild, domNode, oldIndex < oldChildrenLength ? oldChildren[oldIndex].domNode : void 0, projectionOptions);
975− nodeAdded(newChild);
976− checkDistinguishable(newChildren, newIndex, vnode, "added");
977− }
978− }
979− newIndex++;
980− }
981− if (oldChildrenLength > oldIndex) {
982− for (i = oldIndex; i < oldChildrenLength; i++) {
983− nodeToRemove(oldChildren[i]);
984− checkDistinguishable(oldChildren, i, vnode, "removed");
985− }
986− }
987− return textUpdated;
988− };
989− updateDom = function(previous, vnode, projectionOptions, parentNode, oldChildren) {
990− var domNode = previous.domNode;
991− var textUpdated = false;
992− if (previous === vnode) {
993− return false;
994− }
995− var updated = false;
996− if (vnode.vnodeSelector === "") {
997− if (vnode.text !== previous.text) {
998− var newTextNode = domNode.ownerDocument.createTextNode(vnode.text);
999− try {
1000− parentNode.replaceChild(newTextNode, domNode);
1001− } catch (e) {
1002− parentNode.replaceChild(newTextNode, parentNode.childNodes[oldChildren.indexOf(previous)]);
1003− }
1004− vnode.domNode = newTextNode;
1005− textUpdated = true;
1006− return textUpdated;
1007− }
1008− vnode.domNode = domNode;
1009− } else {
1010− if (vnode.vnodeSelector.lastIndexOf("svg", 0) === 0) {
1011− projectionOptions = extend2(projectionOptions, {
1012− namespace: NAMESPACE_SVG
1013− });
1014− }
1015− if (previous.text !== vnode.text) {
1016− updated = true;
1017− if (vnode.text === void 0) {
1018− domNode.removeChild(domNode.firstChild);
1019− } else {
1020− domNode.textContent = vnode.text;
1021− }
1022− }
1023− vnode.domNode = domNode;
1024− updated = updateChildren(vnode, domNode, previous.children, vnode.children, projectionOptions) || updated;
1025− updated = updateProperties(domNode, previous.properties, vnode.properties, projectionOptions) || updated;
1026− if (vnode.properties && vnode.properties.afterUpdate) {
1027− vnode.properties.afterUpdate.apply(vnode.properties.bind || vnode.properties, [
1028− domNode,
1029− projectionOptions,
1030− vnode.vnodeSelector,
1031− vnode.properties,
1032− vnode.children
1033− ]);
1034− }
1035− }
1036− if (updated && vnode.properties && vnode.properties.updateAnimation) {
1037− vnode.properties.updateAnimation(domNode, vnode.properties, previous.properties);
1038− }
1039− return textUpdated;
1040− };
1041− var createProjection = function(vnode, projectionOptions) {
1042− return {
1043− getLastRender: function() {
1044− return vnode;
1045− },
1046− update: function(updatedVnode) {
1047− if (vnode.vnodeSelector !== updatedVnode.vnodeSelector) {
1048− throw new Error("The selector for the root VNode may not be changed. (consider using dom.merge and add one extra level to the virtual DOM)");
1049− }
1050− var previousVNode = vnode;
1051− vnode = updatedVnode;
1052− updateDom(previousVNode, updatedVnode, projectionOptions, previousVNode.domNode.parentNode, [previousVNode]);
1053− },
1054− domNode: vnode.domNode
1055− };
1056− };
1057− var DEFAULT_PROJECTION_OPTIONS = {
1058− namespace: void 0,
1059− performanceLogger: function() {
1060− return void 0;
1061− },
1062− eventHandlerInterceptor: void 0,
1063− styleApplyer: function(domNode, styleName, value12) {
1064− if (styleName.charAt(0) === "-") {
1065− domNode.style.setProperty(styleName, value12);
1066− } else {
1067− domNode.style[styleName] = value12;
1068− }
1069− }
1070− };
1071− var applyDefaultProjectionOptions = function(projectorOptions) {
1072− return extend2(DEFAULT_PROJECTION_OPTIONS, projectorOptions);
1073− };
1074− var dom = {
1075− /**
1076− * Creates a real DOM tree from `vnode`. The [[Projection]] object returned will contain the resulting DOM Node in
1077− * its [[Projection.domNode|domNode]] property.
1078− * This is a low-level method. Users will typically use a [[Projector]] instead.
1079− * @param vnode - The root of the virtual DOM tree that was created using the [[h]] function. NOTE: [[VNode]]
1080− * objects may only be rendered once.
1081− * @param projectionOptions - Options to be used to create and update the projection.
1082− * @returns The [[Projection]] which also contains the DOM Node that was created.
1083− */
1084− create: function(vnode, projectionOptions) {
1085− projectionOptions = applyDefaultProjectionOptions(projectionOptions);
1086− createDom(vnode, document.createElement("div"), void 0, projectionOptions);
1087− return createProjection(vnode, projectionOptions);
1088− },
1089− /**
1090− * Appends a new child node to the DOM which is generated from a [[VNode]].
1091− * This is a low-level method. Users will typically use a [[Projector]] instead.
1092− * @param parentNode - The parent node for the new child node.
1093− * @param vnode - The root of the virtual DOM tree that was created using the [[h]] function. NOTE: [[VNode]]
1094− * objects may only be rendered once.
1095− * @param projectionOptions - Options to be used to create and update the [[Projection]].
1096− * @returns The [[Projection]] that was created.
1097− */
1098− append: function(parentNode, vnode, projectionOptions) {
1099− projectionOptions = applyDefaultProjectionOptions(projectionOptions);
1100− createDom(vnode, parentNode, void 0, projectionOptions);
1101− return createProjection(vnode, projectionOptions);
1102− },
1103− /**
1104− * Inserts a new DOM node which is generated from a [[VNode]].
1105− * This is a low-level method. Users wil typically use a [[Projector]] instead.
1106− * @param beforeNode - The node that the DOM Node is inserted before.
1107− * @param vnode - The root of the virtual DOM tree that was created using the [[h]] function.
1108− * NOTE: [[VNode]] objects may only be rendered once.
1109− * @param projectionOptions - Options to be used to create and update the projection, see [[createProjector]].
1110− * @returns The [[Projection]] that was created.
1111− */
1112− insertBefore: function(beforeNode, vnode, projectionOptions) {
1113− projectionOptions = applyDefaultProjectionOptions(projectionOptions);
1114− createDom(vnode, beforeNode.parentNode, beforeNode, projectionOptions);
1115− return createProjection(vnode, projectionOptions);
1116− },
1117− /**
1118− * Merges a new DOM node which is generated from a [[VNode]] with an existing DOM Node.
1119− * This means that the virtual DOM and the real DOM will have one overlapping element.
1120− * Therefore the selector for the root [[VNode]] will be ignored, but its properties and children will be applied to the Element provided.
1121− * This is a low-level method. Users wil typically use a [[Projector]] instead.
1122− * @param element - The existing element to adopt as the root of the new virtual DOM. Existing attributes and child nodes are preserved.
1123− * @param vnode - The root of the virtual DOM tree that was created using the [[h]] function. NOTE: [[VNode]] objects
1124− * may only be rendered once.
1125− * @param projectionOptions - Options to be used to create and update the projection, see [[createProjector]].
1126− * @returns The [[Projection]] that was created.
1127− */
1128− merge: function(element, vnode, projectionOptions) {
1129− projectionOptions = applyDefaultProjectionOptions(projectionOptions);
1130− vnode.domNode = element;
1131− initPropertiesAndChildren(element, vnode, projectionOptions);
1132− return createProjection(vnode, projectionOptions);
1133− },
1134− /**
1135− * Replaces an existing DOM node with a node generated from a [[VNode]].
1136− * This is a low-level method. Users will typically use a [[Projector]] instead.
1137− * @param element - The node for the [[VNode]] to replace.
1138− * @param vnode - The root of the virtual DOM tree that was created using the [[h]] function. NOTE: [[VNode]]
1139− * objects may only be rendered once.
1140− * @param projectionOptions - Options to be used to create and update the [[Projection]].
1141− * @returns The [[Projection]] that was created.
1142− */
1143− replace: function(element, vnode, projectionOptions) {
1144− projectionOptions = applyDefaultProjectionOptions(projectionOptions);
1145− createDom(vnode, element.parentNode, element, projectionOptions);
1146− element.parentNode.removeChild(element);
1147− return createProjection(vnode, projectionOptions);
1148− }
1149− };
1150− var toTextVNode = function(data) {
1151− return {
1152− vnodeSelector: "",
1153− properties: void 0,
1154− children: void 0,
1155− text: data.toString(),
1156− domNode: null
1157− };
1158− };
1159− var appendChildren = function(parentSelector, insertions, main2) {
1160− for (var i = 0, length_1 = insertions.length; i < length_1; i++) {
1161− var item = insertions[i];
1162− if (Array.isArray(item)) {
1163− appendChildren(parentSelector, item, main2);
1164− } else {
1165− if (item !== null && item !== void 0 && item !== false) {
1166− if (typeof item === "string") {
1167− item = toTextVNode(item);
1168− }
1169− main2.push(item);
1170− }
1171− }
1172− }
1173− };
1174− function h(selector, properties, children) {
1175− if (Array.isArray(properties)) {
1176− children = properties;
1177− properties = void 0;
1178− } else if (properties && (typeof properties === "string" || properties.vnodeSelector) || children && (typeof children === "string" || children.vnodeSelector)) {
1179− throw new Error("h called with invalid arguments");
1180− }
1181− var text5;
1182− var flattenedChildren;
1183− if (children && children.length === 1 && typeof children[0] === "string") {
1184− text5 = children[0];
1185− } else if (children) {
1186− flattenedChildren = [];
1187− appendChildren(selector, children, flattenedChildren);
1188− if (flattenedChildren.length === 0) {
1189− flattenedChildren = void 0;
1190− }
1191− }
1192− return {
1193− vnodeSelector: selector,
1194− properties,
1195− children: flattenedChildren,
1196− text: text5 === "" ? void 0 : text5,
1197− domNode: null
1198− };
1199− }
1200− var createParentNodePath = function(node, rootNode) {
1201− var parentNodePath = [];
1202− while (node && node !== rootNode) {
1203− parentNodePath.push(node);
1204− node = node.parentNode;
1205− }
1206− return parentNodePath;
1207− };
1208− var find2;
1209− if (Array.prototype.find) {
1210− find2 = function(items, predicate) {
1211− return items.find(predicate);
1212− };
1213− } else {
1214− find2 = function(items, predicate) {
1215− return items.filter(predicate)[0];
1216− };
1217− }
1218− var findVNodeByParentNodePath = function(vnode, parentNodePath) {
1219− var result = vnode;
1220− parentNodePath.forEach(function(node) {
1221− result = result && result.children ? find2(result.children, function(child) {
1222− return child.domNode === node;
1223− }) : void 0;
1224− });
1225− return result;
1226− };
1227− var createEventHandlerInterceptor = function(projector, getProjection, performanceLogger) {
1228− return function(propertyName, eventHandler, domNode, properties) {
1229− return modifiedEventHandler;
1230− };
1231− function modifiedEventHandler(evt) {
1232− var _a, _b;
1233− performanceLogger("domEvent", evt);
1234− var projection = getProjection();
1235− var parentNodePath = createParentNodePath(evt.currentTarget, projection.domNode);
1236− parentNodePath.reverse();
1237− var matchingVNode = findVNodeByParentNodePath(projection.getLastRender(), parentNodePath);
1238− projector.scheduleRender();
1239− var result;
1240− if (matchingVNode) {
1241− var listener = (_b = (_a = matchingVNode.properties["on" + evt.type]) !== null && _a !== void 0 ? _a : matchingVNode.properties.on[evt.type].listener) !== null && _b !== void 0 ? _b : matchingVNode.properties.on[evt.type];
1242− result = listener.apply(matchingVNode.properties.bind || this, arguments);
1243− }
1244− performanceLogger("domEventProcessed", evt);
1245− return result;
1246− }
1247− };
1248− var createProjector = function(projectorOptions) {
1249− var projector;
1250− var projectionOptions = applyDefaultProjectionOptions(projectorOptions);
1251− var performanceLogger = projectionOptions.performanceLogger;
1252− var renderCompleted = true;
1253− var scheduled;
1254− var stopped = false;
1255− var projections = [];
1256− var renderFunctions = [];
1257− var addProjection = function(domFunction, node, renderFunction) {
1258− var projection;
1259− var getProjection = function() {
1260− return projection;
1261− };
1262− projectionOptions.eventHandlerInterceptor = createEventHandlerInterceptor(projector, getProjection, performanceLogger);
1263− projection = domFunction(node, renderFunction(), projectionOptions);
1264− projections.push(projection);
1265− renderFunctions.push(renderFunction);
1266− };
1267− var doRender = function() {
1268− scheduled = void 0;
1269− if (!renderCompleted) {
1270− return;
1271− }
1272− renderCompleted = false;
1273− performanceLogger("renderStart", void 0);
1274− for (var i = 0; i < projections.length; i++) {
1275− var updatedVnode = renderFunctions[i]();
1276− performanceLogger("rendered", void 0);
1277− projections[i].update(updatedVnode);
1278− performanceLogger("patched", void 0);
1279− }
1280− performanceLogger("renderDone", void 0);
1281− renderCompleted = true;
1282− };
1283− projector = {
1284− renderNow: doRender,
1285− scheduleRender: function() {
1286− if (!scheduled && !stopped) {
1287− scheduled = requestAnimationFrame(doRender);
1288− }
1289− },
1290− stop: function() {
1291− if (scheduled) {
1292− cancelAnimationFrame(scheduled);
1293− scheduled = void 0;
1294− }
1295− stopped = true;
1296− },
1297− resume: function() {
1298− stopped = false;
1299− renderCompleted = true;
1300− projector.scheduleRender();
1301− },
1302− append: function(parentNode, renderFunction) {
1303− addProjection(dom.append, parentNode, renderFunction);
1304− },
1305− insertBefore: function(beforeNode, renderFunction) {
1306− addProjection(dom.insertBefore, beforeNode, renderFunction);
1307− },
1308− merge: function(domNode, renderFunction) {
1309− addProjection(dom.merge, domNode, renderFunction);
1310− },
1311− replace: function(domNode, renderFunction) {
1312− addProjection(dom.replace, domNode, renderFunction);
1313− },
1314− detach: function(renderFunction) {
1315− for (var i = 0; i < renderFunctions.length; i++) {
1316− if (renderFunctions[i] === renderFunction) {
1317− renderFunctions.splice(i, 1);
1318− return projections.splice(i, 1)[0];
1319− }
1320− }
1321− throw new Error("renderFunction was not found");
1322− }
1323− };
1324− return projector;
1325− };
1326− function _h(selector) {
1327− return function(properties) {
1328− return function(children) {
1329− return h(selector, properties, children);
1330− };
1331− };
1332− }
1333− function replace(projector) {
1334− return function(el) {
1335− return function(render3) {
1336− return function() {
1337− projector.replace(el, render3);
1338− };
1339− };
1340− };
1341− }
1342−
1343− // output/Maquette/index.js
1344− var string = unsafeCoerce2;
1345− var h2 = _h;
1346−
1347− // output/Data.Int/foreign.js
1348− var fromNumberImpl = function(just) {
1349− return function(nothing) {
1350− return function(n) {
1351− return (n | 0) === n ? just(n) : nothing;
1352− };
1353− };
1354− };
1355− var toNumber = function(n) {
1356− return n;
1357− };
1358−
1359− // output/Data.Number/foreign.js
1360− var isFiniteImpl = isFinite;
1361− var round = Math.round;
1362−
1363− // output/Data.Int/index.js
1364− var top2 = /* @__PURE__ */ top(boundedInt);
1365− var bottom2 = /* @__PURE__ */ bottom(boundedInt);
1366− var fromNumber = /* @__PURE__ */ function() {
1367− return fromNumberImpl(Just.create)(Nothing.value);
1368− }();
1369− var unsafeClamp = function(x) {
1370− if (!isFiniteImpl(x)) {
1371− return 0;
1372− }
1373− ;
1374− if (x >= toNumber(top2)) {
1375− return top2;
1376− }
1377− ;
1378− if (x <= toNumber(bottom2)) {
1379− return bottom2;
1380− }
1381− ;
1382− if (otherwise) {
1383− return fromMaybe(0)(fromNumber(x));
1384− }
1385− ;
1386− throw new Error("Failed pattern match at Data.Int (line 72, column 1 - line 72, column 29): " + [x.constructor.name]);
1387− };
1388− var round2 = function($37) {
1389− return unsafeClamp(round($37));
1390− };
1391−
1392− // output/Foreign.Object/foreign.js
1393− function _copyST(m) {
1394− return function() {
1395− var r = {};
1396− for (var k in m) {
1397− if (hasOwnProperty.call(m, k)) {
1398− r[k] = m[k];
1399− }
1400− }
1401− return r;
1402− };
1403− }
1404− var empty2 = {};
1405− function runST(f) {
1406− return f();
1407− }
1408− function _foldM(bind3) {
1409− return function(f) {
1410− return function(mz) {
1411− return function(m) {
1412− var acc = mz;
1413− function g(k2) {
1414− return function(z) {
1415− return f(z)(k2)(m[k2]);
1416− };
1417− }
1418− for (var k in m) {
1419− if (hasOwnProperty.call(m, k)) {
1420− acc = bind3(acc)(g(k));
1421− }
1422− }
1423− return acc;
1424− };
1425− };
1426− };
1427− }
1428− function toArrayWithKey(f) {
1429− return function(m) {
1430− var r = [];
1431− for (var k in m) {
1432− if (hasOwnProperty.call(m, k)) {
1433− r.push(f(k)(m[k]));
1434− }
1435− }
1436− return r;
1437− };
1438− }
1439− var keys = Object.keys || toArrayWithKey(function(k) {
1440− return function() {
1441− return k;
1442− };
1443− });
1444−
1445− // output/Foreign.Object.ST/foreign.js
1446− var newImpl = function() {
1447− return {};
1448− };
1449− function poke2(k) {
1450− return function(v) {
1451− return function(m) {
1452− return function() {
1453− m[k] = v;
1454− return m;
1455− };
1456− };
1457− };
1458− }
1459−
1460− // output/Foreign.Object/index.js
1461− var bindFlipped2 = /* @__PURE__ */ bindFlipped(bindST);
1462− var thawST = _copyST;
1463− var singleton2 = function(k) {
1464− return function(v) {
1465− return runST(bindFlipped2(poke2(k)(v))(newImpl));
1466− };
1467− };
1468− var mutate = function(f) {
1469− return function(m) {
1470− return runST(function __do() {
1471− var s = thawST(m)();
1472− f(s)();
1473− return s;
1474− });
1475− };
1476− };
1477− var foldM = function(dictMonad) {
1478− var bind1 = bind(dictMonad.Bind1());
1479− var pure1 = pure(dictMonad.Applicative0());
1480− return function(f) {
1481− return function(z) {
1482− return _foldM(bind1)(f)(pure1(z));
1483− };
1484− };
1485− };
1486− var foldM1 = /* @__PURE__ */ foldM(monadST);
1487− var union = function(m) {
1488− return mutate(function(s) {
1489− return foldM1(function(s$prime) {
1490− return function(k) {
1491− return function(v) {
1492− return poke2(k)(v)(s$prime);
1493− };
1494− };
1495− })(s)(m);
1496− });
1497− };
1498−
1499− // output/Record.Unsafe.Union/foreign.js
1500− function unsafeUnionFn(r1, r2) {
1501− var copy = {};
1502− for (var k1 in r2) {
1503− if ({}.hasOwnProperty.call(r2, k1)) {
1504− copy[k1] = r2[k1];
1505− }
1506− }
1507− for (var k2 in r1) {
1508− if ({}.hasOwnProperty.call(r1, k2)) {
1509− copy[k2] = r1[k2];
1510− }
1511− }
1512− return copy;
1513− }
1514−
1515− // output/Record.Unsafe.Union/index.js
1516− var unsafeUnion = /* @__PURE__ */ runFn2(unsafeUnionFn);
1517−
1518− // output/Plum.View/index.js
1519− var show2 = /* @__PURE__ */ show(showInt);
1520− var show1 = /* @__PURE__ */ show(showNumber);
1521− var append1 = /* @__PURE__ */ append(semigroupArray);
1522− var mempty2 = /* @__PURE__ */ mempty(monoidArray);
1523− var map2 = /* @__PURE__ */ map(functorArray);
1524− var Px = /* @__PURE__ */ function() {
1525− function Px2(value0) {
1526− this.value0 = value0;
1527− }
1528− ;
1529− Px2.create = function(value0) {
1530− return new Px2(value0);
1531− };
1532− return Px2;
1533− }();
1534− var Fill = /* @__PURE__ */ function() {
1535− function Fill2() {
1536− }
1537− ;
1538− Fill2.value = new Fill2();
1539− return Fill2;
1540− }();
1541− var Fit = /* @__PURE__ */ function() {
1542− function Fit2() {
1543− }
1544− ;
1545− Fit2.value = new Fit2();
1546− return Fit2;
1547− }();
1548− var Max2 = /* @__PURE__ */ function() {
1549− function Max3(value0, value1) {
1550− this.value0 = value0;
1551− this.value1 = value1;
1552− }
1553− ;
1554− Max3.create = function(value0) {
1555− return function(value1) {
1556− return new Max3(value0, value1);
1557− };
1558− };
1559− return Max3;
1560− }();
1561− var Min2 = /* @__PURE__ */ function() {
1562− function Min3(value0, value1) {
1563− this.value0 = value0;
1564− this.value1 = value1;
1565− }
1566− ;
1567− Min3.create = function(value0) {
1568− return function(value1) {
1569− return new Min3(value0, value1);
1570− };
1571− };
1572− return Min3;
1573− }();
1574− var X = /* @__PURE__ */ function() {
1575− function X2() {
1576− }
1577− ;
1578− X2.value = new X2();
1579− return X2;
1580− }();
1581− var Y = /* @__PURE__ */ function() {
1582− function Y2() {
1583− }
1584− ;
1585− Y2.value = new Y2();
1586− return Y2;
1587− }();
1588− var Grid = /* @__PURE__ */ function() {
1589− function Grid2() {
1590− }
1591− ;
1592− Grid2.value = new Grid2();
1593− return Grid2;
1594− }();
1595− var Flexbox = /* @__PURE__ */ function() {
1596− function Flexbox2(value0) {
1597− this.value0 = value0;
1598− }
1599− ;
1600− Flexbox2.create = function(value0) {
1601− return new Flexbox2(value0);
1602− };
1603− return Flexbox2;
1604− }();
1605− var Generic = /* @__PURE__ */ function() {
1606− function Generic2() {
1607− }
1608− ;
1609− Generic2.value = new Generic2();
1610− return Generic2;
1611− }();
1612− var Span = /* @__PURE__ */ function() {
1613− function Span2() {
1614− }
1615− ;
1616− Span2.value = new Span2();
1617− return Span2;
1618− }();
1619− var Start = /* @__PURE__ */ function() {
1620− function Start2() {
1621− }
1622− ;
1623− Start2.value = new Start2();
1624− return Start2;
1625− }();
1626− var Center = /* @__PURE__ */ function() {
1627− function Center2() {
1628− }
1629− ;
1630− Center2.value = new Center2();
1631− return Center2;
1632− }();
1633− var End = /* @__PURE__ */ function() {
1634− function End2() {
1635− }
1636− ;
1637− End2.value = new End2();
1638− return End2;
1639− }();
1640− var Spacing = /* @__PURE__ */ function() {
1641− function Spacing2(value0, value1) {
1642− this.value0 = value0;
1643− this.value1 = value1;
1644− }
1645− ;
1646− Spacing2.create = function(value0) {
1647− return function(value1) {
1648− return new Spacing2(value0, value1);
1649− };
1650− };
1651− return Spacing2;
1652− }();
1653− var Explain = /* @__PURE__ */ function() {
1654− function Explain2() {
1655− }
1656− ;
1657− Explain2.value = new Explain2();
1658− return Explain2;
1659− }();
1660− var Align = /* @__PURE__ */ function() {
1661− function Align2(value0, value1) {
1662− this.value0 = value0;
1663− this.value1 = value1;
1664− }
1665− ;
1666− Align2.create = function(value0) {
1667− return function(value1) {
1668− return new Align2(value0, value1);
1669− };
1670− };
1671− return Align2;
1672− }();
1673− var Width = /* @__PURE__ */ function() {
1674− function Width2(value0) {
1675− this.value0 = value0;
1676− }
1677− ;
1678− Width2.create = function(value0) {
1679− return new Width2(value0);
1680− };
1681− return Width2;
1682− }();
1683− var Height = /* @__PURE__ */ function() {
1684− function Height2(value0) {
1685− this.value0 = value0;
1686− }
1687− ;
1688− Height2.create = function(value0) {
1689− return new Height2(value0);
1690− };
1691− return Height2;
1692− }();
1693− var Wrapped = /* @__PURE__ */ function() {
1694− function Wrapped2() {
1695− }
1696− ;
1697− Wrapped2.value = new Wrapped2();
1698− return Wrapped2;
1699− }();
1700− var BackgroundColor = /* @__PURE__ */ function() {
1701− function BackgroundColor2(value0) {
1702− this.value0 = value0;
1703− }
1704− ;
1705− BackgroundColor2.create = function(value0) {
1706− return new BackgroundColor2(value0);
1707− };
1708− return BackgroundColor2;
1709− }();
1710− var Padding = /* @__PURE__ */ function() {
1711− function Padding2(value0) {
1712− this.value0 = value0;
1713− }
1714− ;
1715− Padding2.create = function(value0) {
1716− return new Padding2(value0);
1717− };
1718− return Padding2;
1719− }();
1720− var Spread = /* @__PURE__ */ function() {
1721− function Spread2() {
1722− }
1723− ;
1724− Spread2.value = new Spread2();
1725− return Spread2;
1726− }();
1727− var Opacity = /* @__PURE__ */ function() {
1728− function Opacity2(value0) {
1729− this.value0 = value0;
1730− }
1731− ;
1732− Opacity2.create = function(value0) {
1733− return new Opacity2(value0);
1734− };
1735− return Opacity2;
1736− }();
1737− var Pointer = /* @__PURE__ */ function() {
1738− function Pointer2() {
1739− }
1740− ;
1741− Pointer2.value = new Pointer2();
1742− return Pointer2;
1743− }();
1744− var Move = /* @__PURE__ */ function() {
1745− function Move2(value0) {
1746− this.value0 = value0;
1747− }
1748− ;
1749− Move2.create = function(value0) {
1750− return new Move2(value0);
1751− };
1752− return Move2;
1753− }();
1754− var Clip = /* @__PURE__ */ function() {
1755− function Clip2(value0) {
1756− this.value0 = value0;
1757− }
1758− ;
1759− Clip2.create = function(value0) {
1760− return new Clip2(value0);
1761− };
1762− return Clip2;
1763− }();
1764− var Column = /* @__PURE__ */ function() {
1765− function Column2(value0) {
1766− this.value0 = value0;
1767− }
1768− ;
1769− Column2.create = function(value0) {
1770− return new Column2(value0);
1771− };
1772− return Column2;
1773− }();
1774− var Row = /* @__PURE__ */ function() {
1775− function Row2(value0) {
1776− this.value0 = value0;
1777− }
1778− ;
1779− Row2.create = function(value0) {
1780− return new Row2(value0);
1781− };
1782− return Row2;
1783− }();
1784− var Stack = /* @__PURE__ */ function() {
1785− function Stack2(value0) {
1786− this.value0 = value0;
1787− }
1788− ;
1789− Stack2.create = function(value0) {
1790− return new Stack2(value0);
1791− };
1792− return Stack2;
1793− }();
1794− var Wrapper = /* @__PURE__ */ function() {
1795− function Wrapper2(value0) {
1796− this.value0 = value0;
1797− }
1798− ;
1799− Wrapper2.create = function(value0) {
1800− return new Wrapper2(value0);
1801− };
1802− return Wrapper2;
1803− }();
1804− var Text = /* @__PURE__ */ function() {
1805− function Text2(value0) {
1806− this.value0 = value0;
1807− }
1808− ;
1809− Text2.create = function(value0) {
1810− return new Text2(value0);
1811− };
1812− return Text2;
1813− }();
1814− var Link = /* @__PURE__ */ function() {
1815− function Link2(value0, value1, value22) {
1816− this.value0 = value0;
1817− this.value1 = value1;
1818− this.value2 = value22;
1819− }
1820− ;
1821− Link2.create = function(value0) {
1822− return function(value1) {
1823− return function(value22) {
1824− return new Link2(value0, value1, value22);
1825− };
1826− };
1827− };
1828− return Link2;
1829− }();
1830− var Download = /* @__PURE__ */ function() {
1831− function Download2(value0, value1, value22) {
1832− this.value0 = value0;
1833− this.value1 = value1;
1834− this.value2 = value22;
1835− }
1836− ;
1837− Download2.create = function(value0) {
1838− return function(value1) {
1839− return function(value22) {
1840− return new Download2(value0, value1, value22);
1841− };
1842− };
1843− };
1844− return Download2;
1845− }();
1846− var semigroupSkin = {
1847− append: function(v) {
1848− return function(v1) {
1849− return union(v)(v1);
1850− };
1851− }
1852− };
1853− var append2 = /* @__PURE__ */ append(semigroupSkin);
1854− var semigroupMutation = {
1855− append: function(v) {
1856− return function(v1) {
1857− return {
1858− extraSkin: append2(v.extraSkin)(v1.extraSkin)
1859− };
1860− };
1861− }
1862− };
1863− var renderableColor = {
1864− render: function(v) {
1865− return "rgba(" + (show2(v.r) + ("," + (show2(v.g) + ("," + (show2(v.b) + ("," + (show1(v.a) + ")")))))));
1866− }
1867− };
1868− var monoidSkin = {
1869− mempty: empty2,
1870− Semigroup0: function() {
1871− return semigroupSkin;
1872− }
1873− };
1874− var mempty1 = /* @__PURE__ */ mempty(monoidSkin);
1875− var foldMap3 = /* @__PURE__ */ foldMap2(monoidSkin);
1876− var monoidMutation = {
1877− mempty: {
1878− extraSkin: mempty1
1879− },
1880− Semigroup0: function() {
1881− return semigroupMutation;
1882− }
1883− };
1884− var mempty22 = /* @__PURE__ */ mempty(monoidMutation);
1885− var view = function(nerves) {
1886− return function(meat) {
1887− return function(bones) {
1888− return {
1889− nerves,
1890− meat,
1891− bones
1892− };
1893− };
1894− };
1895− };
1896− var sk = function(key) {
1897− return function(val) {
1898− return singleton2(key)(val);
1899− };
1900− };
1901− var rgb = function(r) {
1902− return function(g) {
1903− return function(b) {
1904− return {
1905− r: round2(r * 255),
1906− g: round2(g * 255),
1907− b: round2(b * 255),
1908− a: 1
1909− };
1910− };
1911− };
1912− };
1913− var render = function(dict) {
1914− return dict.render;
1915− };
1916− var render1 = /* @__PURE__ */ render(renderableColor);
1917− var renderableLength = {
1918− render: function(v) {
1919− if (v instanceof Px) {
1920− return show2(v.value0) + "px";
1921− }
1922− ;
1923− if (v instanceof Fit) {
1924− return "fit-content";
1925− }
1926− ;
1927− if (v instanceof Fill) {
1928− return "100%";
1929− }
1930− ;
1931− if (v instanceof Max2) {
1932− return "max(" + (show2(v.value0) + ("px," + (render(renderableLength)(v.value1) + ")")));
1933− }
1934− ;
1935− if (v instanceof Min2) {
1936− return "min(" + (show2(v.value0) + ("px," + (render(renderableLength)(v.value1) + ")")));
1937− }
1938− ;
1939− throw new Error("Failed pattern match at Plum.View (line 131, column 12 - line 136, column 62): " + [v.constructor.name]);
1940− }
1941− };
1942− var render2 = /* @__PURE__ */ render(renderableLength);
1943− var skin = function(ctx) {
1944− return function(v) {
1945− if (v instanceof Spacing) {
1946− return sk("gap")(show2(v.value0) + ("px " + (show2(v.value1) + "px")));
1947− }
1948− ;
1949− if (v instanceof Explain) {
1950− return sk("border")("dashed magenta");
1951− }
1952− ;
1953− if (v instanceof Align) {
1954− if (ctx instanceof Generic) {
1955− return mempty1;
1956− }
1957− ;
1958− if (ctx instanceof Span) {
1959− return mempty1;
1960− }
1961− ;
1962− if (ctx instanceof Grid) {
1963− return sk(function() {
1964− if (v.value0 instanceof X) {
1965− return "justify-items";
1966− }
1967− ;
1968− if (v.value0 instanceof Y) {
1969− return "align-items";
1970− }
1971− ;
1972− throw new Error("Failed pattern match at Plum.View (line 88, column 9 - line 90, column 29): " + [v.value0.constructor.name]);
1973− }())(function() {
1974− if (v.value1 instanceof Start) {
1975− return "start";
1976− }
1977− ;
1978− if (v.value1 instanceof Center) {
1979− return "center";
1980− }
1981− ;
1982− if (v.value1 instanceof End) {
1983− return "end";
1984− }
1985− ;
1986− throw new Error("Failed pattern match at Plum.View (line 92, column 9 - line 95, column 23): " + [v.value1.constructor.name]);
1987− }());
1988− }
1989− ;
1990− if (ctx instanceof Flexbox) {
1991− return sk(function() {
1992− var v1 = new Tuple(ctx.value0, v.value0);
1993− if (v1.value0 instanceof X && v1.value1 instanceof X) {
1994− return "justify-content";
1995− }
1996− ;
1997− if (v1.value0 instanceof X && v1.value1 instanceof Y) {
1998− return "align-items";
1999− }
2000− ;
2001− if (v1.value0 instanceof Y && v1.value1 instanceof X) {
2002− return "align-items";
2003− }
2004− ;
2005− if (v1.value0 instanceof Y && v1.value1 instanceof Y) {
2006− return "justify-content";
2007− }
2008− ;
2009− throw new Error("Failed pattern match at Plum.View (line 99, column 9 - line 103, column 38): " + [v1.constructor.name]);
2010− }())(function() {
2011− if (v.value1 instanceof Start) {
2012− return "flex-start";
2013− }
2014− ;
2015− if (v.value1 instanceof Center) {
2016− return "center";
2017− }
2018− ;
2019− if (v.value1 instanceof End) {
2020− return "flex-end";
2021− }
2022− ;
2023− throw new Error("Failed pattern match at Plum.View (line 105, column 9 - line 108, column 28): " + [v.value1.constructor.name]);
2024− }());
2025− }
2026− ;
2027− throw new Error("Failed pattern match at Plum.View (line 84, column 26 - line 109, column 8): " + [ctx.constructor.name]);
2028− }
2029− ;
2030− if (v instanceof Width) {
2031− return sk("width")(render2(v.value0));
2032− }
2033− ;
2034− if (v instanceof Height) {
2035− return sk("height")(render2(v.value0));
2036− }
2037− ;
2038− if (v instanceof Wrapped) {
2039− if (ctx instanceof Flexbox) {
2040− return sk("flex-wrap")("wrap");
2041− }
2042− ;
2043− return mempty1;
2044− }
2045− ;
2046− if (v instanceof BackgroundColor) {
2047− return sk("background-color")(render1(v.value0));
2048− }
2049− ;
2050− if (v instanceof Padding) {
2051− return sk("padding")(show2(v.value0.top) + ("px " + (show2(v.value0.right) + ("px " + (show2(v.value0.bottom) + ("px " + (show2(v.value0.left) + "px")))))));
2052− }
2053− ;
2054− if (v instanceof Spread) {
2055− if (ctx instanceof Flexbox) {
2056− return sk("justify-content")("space-between");
2057− }
2058− ;
2059− return mempty1;
2060− }
2061− ;
2062− if (v instanceof Opacity) {
2063− return sk("opacity")(show1(v.value0));
2064− }
2065− ;
2066− if (v instanceof Pointer) {
2067− return sk("cursor")("pointer");
2068− }
2069− ;
2070− if (v instanceof Move) {
2071− return sk("transform")("translate(" + (show2(v.value0.x) + ("px, " + (show2(v.value0.y) + ")"))));
2072− }
2073− ;
2074− if (v instanceof Clip && v.value0 instanceof X) {
2075− return sk("overflow-x")("hidden");
2076− }
2077− ;
2078− if (v instanceof Clip && v.value0 instanceof Y) {
2079− return sk("overflow-y")("hidden");
2080− }
2081− ;
2082− throw new Error("Failed pattern match at Plum.View (line 81, column 12 - line 125, column 37): " + [v.constructor.name]);
2083− };
2084− };
2085− var hWith = function(el) {
2086− return function(props) {
2087− return function(v) {
2088− return function(children) {
2089− return h2(el)(unsafeUnion(props)({
2090− styles: v
2091− }))(children);
2092− };
2093− };
2094− };
2095− };
2096− var h3 = function(el) {
2097− return function(v) {
2098− return function(children) {
2099− return h2(el)({
2100− styles: v
2101− })(children);
2102− };
2103− };
2104− };
2105− var growSkin = function(fire) {
2106− return function(v) {
2107− return function(v1) {
2108− var widthFill = [new Width(Fill.value), new Height(Fill.value)];
2109− var alignCenter = [new Align(X.value, Center.value), new Align(Y.value, Center.value)];
2110− var skn = function(ctx) {
2111− return append2(foldMap3(skin(ctx))(append1(v1.meat)(append1(function() {
2112− if (ctx instanceof Span) {
2113− return mempty2;
2114− }
2115− ;
2116− if (ctx instanceof Grid) {
2117− return widthFill;
2118− }
2119− ;
2120− if (ctx instanceof Flexbox) {
2121− return widthFill;
2122− }
2123− ;
2124− if (ctx instanceof Generic) {
2125− return widthFill;
2126− }
2127− ;
2128− throw new Error("Failed pattern match at Plum.View (line 181, column 16 - line 185, column 35): " + [ctx.constructor.name]);
2129− }())(function() {
2130− if (ctx instanceof Grid) {
2131− return alignCenter;
2132− }
2133− ;
2134− if (ctx instanceof Flexbox) {
2135− return alignCenter;
2136− }
2137− ;
2138− if (ctx instanceof Span) {
2139− return mempty2;
2140− }
2141− ;
2142− if (ctx instanceof Generic) {
2143− return alignCenter;
2144− }
2145− ;
2146− throw new Error("Failed pattern match at Plum.View (line 186, column 16 - line 190, column 37): " + [ctx.constructor.name]);
2147− }()))))(v.extraSkin);
2148− };
2149− if (v1.bones instanceof Text) {
2150− return h3("span")(skn(Span.value))([string(v1.bones.value0)]);
2151− }
2152− ;
2153− if (v1.bones instanceof Wrapper) {
2154− return h3("div")(append2(skn(new Flexbox(X.value)))(append2(sk("display")("flex"))(sk("flex-direction")("row"))))([growSkin(fire)(mempty22)(v1.bones.value0)]);
2155− }
2156− ;
2157− if (v1.bones instanceof Stack) {
2158− return h3("div")(append2(skn(Grid.value))(sk("display")("grid")))(map2(growSkin(fire)({
2159− extraSkin: append2(sk("grid-row")("1"))(sk("grid-column")("1"))
2160− }))(v1.bones.value0));
2161− }
2162− ;
2163− if (v1.bones instanceof Row) {
2164− return h3("div")(append2(skn(new Flexbox(X.value)))(append2(sk("display")("flex"))(sk("flex-direction")("row"))))(map2(growSkin(fire)(mempty22))(v1.bones.value0));
2165− }
2166− ;
2167− if (v1.bones instanceof Column) {
2168− return h3("div")(append2(skn(new Flexbox(Y.value)))(append2(sk("display")("flex"))(sk("flex-direction")("column"))))(map2(growSkin(fire)(mempty22))(v1.bones.value0));
2169− }
2170− ;
2171− if (v1.bones instanceof Link) {
2172− return hWith("a")({
2173− href: v1.bones.value0,
2174− rel: "noopener noreferrer",
2175− target: function() {
2176− if (v1.bones.value1.newTab) {
2177− return "_blank";
2178− }
2179− ;
2180− return "_self";
2181− }()
2182− })(append2(skn(new Flexbox(X.value)))(append2(sk("display")("flex"))(sk("flex-direction")("row"))))([growSkin(fire)(mempty22)(v1.bones.value2)]);
2183− }
2184− ;
2185− if (v1.bones instanceof Download) {
2186− return hWith("a")({
2187− href: v1.bones.value0,
2188− download: fromMaybe("")(v1.bones.value1.filename)
2189− })(append2(skn(new Flexbox(X.value)))(append2(sk("display")("flex"))(sk("flex-direction")("row"))))([growSkin(fire)(mempty22)(v1.bones.value2)]);
2190− }
2191− ;
2192− throw new Error("Failed pattern match at Plum.View (line 193, column 5 - line 215, column 39): " + [v1.bones.constructor.name]);
2193− };
2194− };
2195− };
2196− var grow = function(fire) {
2197− return function(v) {
2198− return growSkin(fire)(mempty22)(v);
2199− };
2200− };
2201−
2202− // output/Web.DOM.NonElementParentNode/foreign.js
2203− function _getElementById(id) {
2204− return function(node) {
2205− return function() {
2206− return node.getElementById(id);
2207− };
2208− };
2209− }
2210−
2211− // output/Data.Nullable/foreign.js
2212− function nullable(a, r, f) {
2213− return a == null ? r : f(a);
2214− }
2215−
2216− // output/Data.Nullable/index.js
2217− var toMaybe = function(n) {
2218− return nullable(n, Nothing.value, Just.create);
2219− };
2220−
2221− // output/Web.DOM.NonElementParentNode/index.js
2222− var map3 = /* @__PURE__ */ map(functorEffect);
2223− var getElementById = function(eid) {
2224− var $2 = map3(toMaybe);
2225− var $3 = _getElementById(eid);
2226− return function($4) {
2227− return $2($3($4));
2228− };
2229− };
2230−
2231− // output/Web.HTML/foreign.js
2232− var windowImpl = function() {
2233− return window;
2234− };
2235−
2236− // output/Web.HTML.HTMLDocument/index.js
2237− var toNonElementParentNode = unsafeCoerce2;
2238−
2239− // output/Web.HTML.Window/foreign.js
2240− function document2(window2) {
2241− return function() {
2242− return window2.document;
2243− };
2244− }
2245−
2246− // output/Plum/index.js
2247− var bind2 = /* @__PURE__ */ bind(bindEffect);
2248− var outerStyle = "html,body{height:100%;padding:0;margin:0;}";
2249− var run3 = function(id) {
2250− return function(plum2) {
2251− return function __do() {
2252− var modelRef = bind2(plum2.init)($$new)();
2253− var v = bind2(bind2(windowImpl)(document2))(function() {
2254− var $6 = getElementById(id);
2255− return function($7) {
2256− return $6(toNonElementParentNode($7));
2257− };
2258− }())();
2259− if (v instanceof Just) {
2260− var projector = createProjector();
2261− return replace(projector)(v.value0)(function __do2() {
2262− var model = read(modelRef)();
2263− var el = grow(function(msg) {
2264− return function __do3() {
2265− var m = read(modelRef)();
2266− var m_ = plum2.update(msg)(m)();
2267− return write(m_)(modelRef)();
2268− };
2269− })(plum2.view(model));
2270− return h2("div")({
2271− styles: {
2272− height: "100%",
2273− width: "100%"
2274− }
2275− })([h2("style")({})([string(outerStyle)]), el]);
2276− })();
2277− }
2278− ;
2279− if (v instanceof Nothing) {
2280− return unit;
2281− }
2282− ;
2283− throw new Error("Failed pattern match at Plum (line 25, column 92 - line 39, column 25): " + [v.constructor.name]);
2284− };
2285− };
2286− };
2287−
2288− // output/Main/index.js
2289− var pure2 = /* @__PURE__ */ pure(applicativeEffect);
2290− var map4 = /* @__PURE__ */ map(functorArray);
2291− var plum = {
2292− init: /* @__PURE__ */ pure2({
2293− text: "Test"
2294− }),
2295− view: function(model) {
2296− return view([])([])(new Column([view([])([])(new Link("https://iko.soy", {
2297− newTab: false
2298− }, view([])([])(new Text("my website")))), view([])([])(new Row(map4($$const(view([])([new BackgroundColor(rgb(1)(0)(0))])(new Text("hello"))))(range2(1)(100))))]));
2299− },
2300− update: function(msg) {
2301− return function(model) {
2302− return pure2({
2303− text: "Button pressed"
2304− });
2305− };
2306− }
2307− };
2308− var main = /* @__PURE__ */ run3("plum")(plum);
2309−
2310− // <stdin>
2311− main();
2312−})();
plum/spago.dhall+7
@@ -4,20 +4,27 @@
44 , "console"
55 , "debug"
66 , "effect"
7+ , "foldable-traversable"
78 , "foreign-object"
9+ , "functions"
810 , "integers"
11+ , "literals"
912 , "maybe"
1013 , "numbers"
1114 , "prelude"
1215 , "record"
1316 , "refs"
17+ , "strings"
1418 , "strings-extra"
19+ , "transformers"
1520 , "tuples"
1621 , "typelevel-prelude"
1722 , "unsafe-coerce"
1823 , "untagged-union"
1924 , "web-dom"
25+ , "web-events"
2026 , "web-html"
27+ , "web-uievents"
2128 ]
2229, packages = ../packages.dhall
2330, sources = [ "src/**/*.purs", "test/**/*.purs" ]
plum/src/Main.purs+44−13
@@ -1,28 +1,59 @@
11module Main where
22
3+import Plum.View
34import Prelude
45
5−import Data.Array as Array
66import Effect (Effect)
77import Plum as Plum
8−import Plum.View (Bones(..), Meat(..), rgb, view)
98
109main :: Effect Unit
1110main = do
1211 Plum.run "plum" plum
1312
14−type Model = { text :: String }
13+type Model = { text :: String, numberOfClicks :: Int }
1514
16−plum :: Plum.Plum Unit Model
15+data Msg = Clicked | UpdateText String
16+
17+plum :: Plum.Plum Msg Model
1718plum =
18− { init: pure { text: "Test" }
19− , view: \model ->
20− view [] []
21− ( Column
22− [ view [] [] (Link "https://iko.soy" { newTab: false } $ view [] [] (Text "my website"))
23− , view [] [] (Row $ Array.range 1 100 # map (const $ view [] [ BackgroundColor (rgb 1.0 0.0 0.0) ] (Text "hello")))
24− ]
25− )
19+ { init: pure { text: "Test", numberOfClicks: 0 }
20+ , view: \model -> do
21+ column do
22+ stack do
23+ align Y End
24+ height Fit
25+ row do
26+ align Y End
27+ column do
28+ bgColor $ rgb 0.0 0.0 0.0
29+ height (Px 10)
30+ column mempty
31+ pure unit
32+ column do
33+ font "sans-serif"
34+ column do
35+ height (Px 100)
36+ width Fit
37+ align Y Start
38+ width Fill
39+ column $ do
40+ width Fill
41+ width Fit
42+ height Fit
43+ text "PureStack" do
44+ fontSize 72
45+ fontWeight 1000
46+ column do
47+ bgColor $ rgb 0.0 0.0 0.0
48+ height (Px 10)
49+ width Fill
50+ column do
51+ width Fill
52+ row do
53+ text (model.text <> ": " <> show model.numberOfClicks) mempty
54+ onClick Clicked
55+ textInput { onChange: UpdateText, value: model.text } mempty
2656 , update: \msg model -> case msg of
27− _ -> pure { text: "Button pressed" }
57+ Clicked -> pure model { text = "Button pressed", numberOfClicks = model.numberOfClicks + 1 }
58+ UpdateText text -> pure model { text = text }
2859 }
plum/src/Maquette.jsdeleted−953
@@ -1,953 +0,0 @@
1−'use strict';
2−
3−var NAMESPACE_W3 = "http://www.w3.org/";
4−var NAMESPACE_SVG = NAMESPACE_W3 + "2000/svg";
5−var NAMESPACE_XLINK = NAMESPACE_W3 + "1999/xlink";
6−var emptyArray = [];
7−var extend = function (base, overrides) {
8− var result = {};
9− Object.keys(base).forEach(function (key) {
10− result[key] = base[key];
11− });
12− if (overrides) {
13− Object.keys(overrides).forEach(function (key) {
14− result[key] = overrides[key];
15− });
16− }
17− return result;
18−};
19−var same = function (vnode1, vnode2) {
20− if (vnode1.vnodeSelector !== vnode2.vnodeSelector) {
21− return false;
22− }
23− if (vnode1.properties && vnode2.properties) {
24− if (vnode1.properties.key !== vnode2.properties.key) {
25− return false;
26− }
27− return vnode1.properties.bind === vnode2.properties.bind;
28− }
29− return !vnode1.properties && !vnode2.properties;
30−};
31−var checkStyleValue = function (styleValue) {
32− if (typeof styleValue !== "string") {
33− throw new Error("Style values must be strings");
34− }
35−};
36−var findIndexOfChild = function (children, sameAs, start) {
37− if (sameAs.vnodeSelector !== "") {
38− // Never scan for text-nodes
39− for (var i = start; i < children.length; i++) {
40− if (same(children[i], sameAs)) {
41− return i;
42− }
43− }
44− }
45− return -1;
46−};
47−var checkDistinguishable = function (childNodes, indexToCheck, parentVNode, operation) {
48− var childNode = childNodes[indexToCheck];
49− if (childNode.vnodeSelector === "") {
50− return; // Text nodes need not be distinguishable
51− }
52− var properties = childNode.properties;
53− var key = properties
54− ? properties.key === undefined
55− ? properties.bind
56− : properties.key
57− : undefined;
58− if (!key) {
59− // A key is just assumed to be unique
60− for (var i = 0; i < childNodes.length; i++) {
61− if (i !== indexToCheck) {
62− var node = childNodes[i];
63− if (same(node, childNode)) {
64− throw {
65− error: new Error(parentVNode.vnodeSelector + " had a " + childNode.vnodeSelector + " child " + (operation === "added" ? operation : "removed") + ", but there is now more than one. You must add unique key properties to make them distinguishable."),
66− parentNode: parentVNode,
67− childNode: childNode,
68− };
69− }
70− }
71− }
72− }
73−};
74−var nodeAdded = function (vNode) {
75− if (vNode.properties) {
76− var enterAnimation = vNode.properties.enterAnimation;
77− if (enterAnimation) {
78− enterAnimation(vNode.domNode, vNode.properties);
79− }
80− }
81−};
82−var removedNodes = [];
83−var requestedIdleCallback = false;
84−var visitRemovedNode = function (node) {
85− (node.children || []).forEach(visitRemovedNode);
86− if (node.properties && node.properties.afterRemoved) {
87− node.properties.afterRemoved.apply(node.properties.bind || node.properties, [
88− node.domNode,
89− ]);
90− }
91−};
92−var processPendingNodeRemovals = function () {
93− requestedIdleCallback = false;
94− removedNodes.forEach(visitRemovedNode);
95− removedNodes.length = 0;
96−};
97−var scheduleNodeRemoval = function (vNode) {
98− removedNodes.push(vNode);
99− if (!requestedIdleCallback) {
100− requestedIdleCallback = true;
101− if (typeof window !== "undefined" && "requestIdleCallback" in window) {
102− window.requestIdleCallback(processPendingNodeRemovals, { timeout: 16 });
103− }
104− else {
105− setTimeout(processPendingNodeRemovals, 16);
106− }
107− }
108−};
109−var nodeToRemove = function (vNode) {
110− var domNode = vNode.domNode;
111− if (vNode.properties) {
112− var exitAnimation = vNode.properties.exitAnimation;
113− if (exitAnimation) {
114− domNode.style.pointerEvents = "none";
115− var removeDomNode = function () {
116− if (domNode.parentNode) {
117− domNode.parentNode.removeChild(domNode);
118− scheduleNodeRemoval(vNode);
119− }
120− };
121− exitAnimation(domNode, removeDomNode, vNode.properties);
122− return;
123− }
124− }
125− if (domNode.parentNode) {
126− domNode.parentNode.removeChild(domNode);
127− scheduleNodeRemoval(vNode);
128− }
129−};
130−var vnodeOnlyProps = [
131− "afterCreate",
132− "afterUpdate",
133− "afterRemoved",
134− "enterAnimation",
135− "exitAnimation",
136− "updateAnimation",
137−];
138−function filterVNodeOnlyProps(name) {
139− return !vnodeOnlyProps.includes(name);
140−}
141−var setProperties = function (domNode, properties, projectionOptions) {
142− if (!properties) {
143− return;
144− }
145− var eventHandlerInterceptor = projectionOptions.eventHandlerInterceptor;
146− var propNames = Object.keys(properties).filter(filterVNodeOnlyProps);
147− var propCount = propNames.length;
148− for (var i = 0; i < propCount; i++) {
149− var propName = propNames[i];
150− var propValue = properties[propName];
151− if (propName === "className") {
152− throw new Error('Property "className" is not supported, use "class".');
153− }
154− else if (propName === "class") {
155− toggleClasses(domNode, propValue, true);
156− }
157− else if (propName === "classes") {
158− // object with string keys and boolean values
159− var classNames = Object.keys(propValue);
160− var classNameCount = classNames.length;
161− for (var j = 0; j < classNameCount; j++) {
162− var className = classNames[j];
163− if (propValue[className]) {
164− domNode.classList.add(className);
165− }
166− }
167− }
168− else if (propName === "styles") {
169− // object with string keys and string (!) values
170− var styleNames = Object.keys(propValue);
171− var styleCount = styleNames.length;
172− for (var j = 0; j < styleCount; j++) {
173− var styleName = styleNames[j];
174− var styleValue = propValue[styleName];
175− if (styleValue) {
176− checkStyleValue(styleValue);
177− projectionOptions.styleApplyer(domNode, styleName, styleValue);
178− }
179− }
180− }
181− else if (propName === "on" && propValue) {
182− // object with string keys and function values
183− for (var _i = 0, _a = Object.entries(properties.on); _i < _a.length; _i++) {
184− var _b = _a[_i], key = _b[0], handler = _b[1];
185− var listener = typeof handler === "function" ? handler : handler.listener;
186− if (eventHandlerInterceptor) {
187− listener = eventHandlerInterceptor(key, listener, domNode, properties);
188− }
189− if (listener) {
190− domNode.addEventListener(key, listener, typeof handler === "function" ? undefined : handler.options);
191− }
192− }
193− }
194− else if (propName !== "key" && propValue !== null && propValue !== undefined) {
195− var type = typeof propValue;
196− if (type === "function") {
197− if (propName.lastIndexOf("on", 0) === 0) {
198− // lastIndexOf(,0)===0 -> startsWith
199− if (eventHandlerInterceptor) {
200− propValue = eventHandlerInterceptor(propName, propValue, domNode, properties); // intercept eventhandlers
201− }
202− }
203− domNode[propName] = propValue;
204− }
205− else if (projectionOptions.namespace === NAMESPACE_SVG) {
206− if (propName === "href") {
207− domNode.setAttributeNS(NAMESPACE_XLINK, propName, propValue);
208− }
209− else {
210− // all SVG attributes are read-only in DOM, so...
211− domNode.setAttribute(propName, propValue);
212− }
213− }
214− else if (type === "string" && propName !== "value" && propName !== "innerHTML") {
215− domNode.setAttribute(propName, propValue);
216− }
217− else {
218− domNode[propName] = propValue;
219− }
220− }
221− }
222−};
223−var addChildren = function (domNode, children, projectionOptions) {
224− if (!children) {
225− return;
226− }
227− for (var _i = 0, children_1 = children; _i < children_1.length; _i++) {
228− var child = children_1[_i];
229− createDom(child, domNode, undefined, projectionOptions);
230− }
231−};
232−var initPropertiesAndChildren = function (domNode, vnode, projectionOptions) {
233− addChildren(domNode, vnode.children, projectionOptions); // children before properties, needed for value property of <select>.
234− if (vnode.text) {
235− domNode.textContent = vnode.text;
236− }
237− setProperties(domNode, vnode.properties, projectionOptions);
238− if (vnode.properties && vnode.properties.afterCreate) {
239− vnode.properties.afterCreate.apply(vnode.properties.bind || vnode.properties, [
240− domNode,
241− projectionOptions,
242− vnode.vnodeSelector,
243− vnode.properties,
244− vnode.children,
245− ]);
246− }
247−};
248−var createDom = function (vnode, parentNode, insertBefore, projectionOptions) {
249− var _a;
250− var domNode;
251− var start = 0;
252− var vnodeSelector = vnode.vnodeSelector;
253− var doc = parentNode.ownerDocument;
254− if (vnodeSelector === "") {
255− if (vnode.domNode) {
256− vnode.domNode.nodeValue = vnode.text;
257− }
258− else {
259− domNode = vnode.domNode = doc.createTextNode(vnode.text);
260− if (insertBefore !== undefined) {
261− parentNode.insertBefore(domNode, insertBefore);
262− }
263− else {
264− parentNode.appendChild(domNode);
265− }
266− }
267− }
268− else {
269− for (var i = 0; i <= vnodeSelector.length; ++i) {
270− var c = vnodeSelector.charAt(i);
271− if (i === vnodeSelector.length || c === "." || c === "#") {
272− var type = vnodeSelector.charAt(start - 1);
273− var found = vnodeSelector.slice(start, i);
274− if (type === ".") {
275− domNode.classList.add(found);
276− }
277− else if (type === "#") {
278− domNode.id = found;
279− }
280− else {
281− if (found === "svg") {
282− projectionOptions = extend(projectionOptions, {
283− namespace: NAMESPACE_SVG,
284− });
285− }
286− if (projectionOptions.namespace !== undefined) {
287− domNode = vnode.domNode = doc.createElementNS(projectionOptions.namespace, found);
288− }
289− else {
290− domNode = vnode.domNode =
291− vnode.domNode ||
292− (((_a = vnode.properties) === null || _a === void 0 ? void 0 : _a.is) ? doc.createElement(found, { is: vnode.properties.is })
293− : doc.createElement(found));
294− if (found === "input" && vnode.properties && vnode.properties.type !== undefined) {
295− // IE8 and older don't support setting input type after the DOM Node has been added to the document
296− domNode.setAttribute("type", vnode.properties.type);
297− }
298− }
299− if (insertBefore !== undefined) {
300− parentNode.insertBefore(domNode, insertBefore);
301− }
302− else if (domNode.parentNode !== parentNode) {
303− parentNode.appendChild(domNode);
304− }
305− }
306− start = i + 1;
307− }
308− }
309− initPropertiesAndChildren(domNode, vnode, projectionOptions);
310− }
311−};
312−var updateDom;
313−/**
314− * Adds or removes classes from an Element
315− * @param domNode the element
316− * @param classes a string separated list of classes
317− * @param on true means add classes, false means remove
318− */
319−var toggleClasses = function (domNode, classes, on) {
320− if (!classes) {
321− return;
322− }
323− classes.split(" ").forEach(function (classToToggle) {
324− if (classToToggle) {
325− domNode.classList.toggle(classToToggle, on);
326− }
327− });
328−};
329−var updateProperties = function (domNode, previousProperties, properties, projectionOptions) {
330− if (!properties) {
331− return;
332− }
333− var propertiesUpdated = false;
334− var propNames = Object.keys(properties).filter(filterVNodeOnlyProps);
335− var propCount = propNames.length;
336− for (var i = 0; i < propCount; i++) {
337− var propName = propNames[i];
338− // assuming that properties will be nullified instead of missing is by design
339− var propValue = properties[propName];
340− var previousValue = previousProperties[propName];
341− if (propName === "class") {
342− if (previousValue !== propValue) {
343− toggleClasses(domNode, previousValue, false);
344− toggleClasses(domNode, propValue, true);
345− }
346− }
347− else if (propName === "classes") {
348− var classList = domNode.classList;
349− var classNames = Object.keys(propValue);
350− var classNameCount = classNames.length;
351− for (var j = 0; j < classNameCount; j++) {
352− var className = classNames[j];
353− var on = !!propValue[className];
354− var previousOn = !!previousValue[className];
355− if (on === previousOn) {
356− continue;
357− }
358− propertiesUpdated = true;
359− if (on) {
360− classList.add(className);
361− }
362− else {
363− classList.remove(className);
364− }
365− }
366− }
367− else if (propName === "styles") {
368− var styleNames = Object.keys(propValue);
369− var styleCount = styleNames.length;
370− for (var j = 0; j < styleCount; j++) {
371− var styleName = styleNames[j];
372− var newStyleValue = propValue[styleName];
373− var oldStyleValue = previousValue[styleName];
374− if (newStyleValue === oldStyleValue) {
375− continue;
376− }
377− propertiesUpdated = true;
378− if (newStyleValue) {
379− checkStyleValue(newStyleValue);
380− projectionOptions.styleApplyer(domNode, styleName, newStyleValue);
381− }
382− else {
383− projectionOptions.styleApplyer(domNode, styleName, "");
384− }
385− }
386− }
387− else {
388− if (!propValue && typeof previousValue === "string") {
389− propValue = "";
390− }
391− if (propName === "value") {
392− // value can be manipulated by the user directly and using event.preventDefault() is not an option
393− var domValue = domNode[propName];
394− if (domValue !== propValue && // The 'value' in the DOM tree !== newValue
395− propValue !== previousValue // Only update the value if the vdom changed
396− ) {
397− // The edge cases are described in the tests
398− domNode[propName] = propValue; // Reset the value, even if the virtual DOM did not change
399− } // else do not update the domNode, otherwise the cursor position would be changed
400− if (propValue !== previousValue) {
401− propertiesUpdated = true;
402− }
403− }
404− else if (propValue !== previousValue) {
405− var type = typeof propValue;
406− if (type !== "function" || !projectionOptions.eventHandlerInterceptor) {
407− // Function updates are expected to be handled by the EventHandlerInterceptor
408− if (projectionOptions.namespace === NAMESPACE_SVG) {
409− if (propName === "href") {
410− domNode.setAttributeNS(NAMESPACE_XLINK, propName, propValue);
411− }
412− else {
413− // all SVG attributes are read-only in DOM, so...
414− domNode.setAttribute(propName, propValue);
415− }
416− }
417− else if (type === "string" && propName !== "innerHTML") {
418− if (propName === "role" && propValue === "") {
419− domNode.removeAttribute(propName);
420− }
421− else {
422− domNode.setAttribute(propName, propValue);
423− }
424− }
425− else if (domNode[propName] !== propValue) {
426− // Comparison is here for side-effects in Edge with scrollLeft and scrollTop
427− domNode[propName] = propValue;
428− }
429− propertiesUpdated = true;
430− }
431− }
432− }
433− }
434− return propertiesUpdated;
435−};
436−var updateChildren = function (vnode, domNode, oldChildren, newChildren, projectionOptions) {
437− if (oldChildren === newChildren) {
438− return false;
439− }
440− oldChildren = oldChildren || emptyArray;
441− newChildren = newChildren || emptyArray;
442− var oldChildrenLength = oldChildren.length;
443− var newChildrenLength = newChildren.length;
444− var oldIndex = 0;
445− var newIndex = 0;
446− var i;
447− var textUpdated = false;
448− while (newIndex < newChildrenLength) {
449− var oldChild = oldIndex < oldChildrenLength ? oldChildren[oldIndex] : undefined;
450− var newChild = newChildren[newIndex];
451− if (oldChild !== undefined && same(oldChild, newChild)) {
452− textUpdated =
453− updateDom(oldChild, newChild, projectionOptions, domNode, oldChildren) || textUpdated;
454− oldIndex++;
455− }
456− else {
457− var findOldIndex = findIndexOfChild(oldChildren, newChild, oldIndex + 1);
458− if (findOldIndex >= 0) {
459− // Remove preceding missing children
460− for (i = oldIndex; i < findOldIndex; i++) {
461− nodeToRemove(oldChildren[i]);
462− checkDistinguishable(oldChildren, i, vnode, "removed");
463− }
464− textUpdated =
465− updateDom(oldChildren[findOldIndex], newChild, projectionOptions, domNode, oldChildren) ||
466− textUpdated;
467− oldIndex = findOldIndex + 1;
468− }
469− else {
470− // New child
471− createDom(newChild, domNode, oldIndex < oldChildrenLength ? oldChildren[oldIndex].domNode : undefined, projectionOptions);
472− nodeAdded(newChild);
473− checkDistinguishable(newChildren, newIndex, vnode, "added");
474− }
475− }
476− newIndex++;
477− }
478− if (oldChildrenLength > oldIndex) {
479− // Remove child fragments
480− for (i = oldIndex; i < oldChildrenLength; i++) {
481− nodeToRemove(oldChildren[i]);
482− checkDistinguishable(oldChildren, i, vnode, "removed");
483− }
484− }
485− return textUpdated;
486−};
487−updateDom = function (previous, vnode, projectionOptions, parentNode, oldChildren) {
488− var domNode = previous.domNode;
489− var textUpdated = false;
490− if (previous === vnode) {
491− return false; // By contract, VNode objects may not be modified anymore after passing them to maquette
492− }
493− var updated = false;
494− if (vnode.vnodeSelector === "") {
495− if (vnode.text !== previous.text) {
496− var newTextNode = domNode.ownerDocument.createTextNode(vnode.text);
497− try {
498− parentNode.replaceChild(newTextNode, domNode);
499− }
500− catch (e) {
501− // Text nodes can be substituted by google translate
502− parentNode.replaceChild(newTextNode, parentNode.childNodes[oldChildren.indexOf(previous)]);
503− }
504− vnode.domNode = newTextNode;
505− textUpdated = true;
506− return textUpdated;
507− }
508− vnode.domNode = domNode;
509− }
510− else {
511− if (vnode.vnodeSelector.lastIndexOf("svg", 0) === 0) {
512− // lastIndexOf(needle,0)===0 means StartsWith
513− projectionOptions = extend(projectionOptions, {
514− namespace: NAMESPACE_SVG,
515− });
516− }
517− if (previous.text !== vnode.text) {
518− updated = true;
519− if (vnode.text === undefined) {
520− domNode.removeChild(domNode.firstChild); // the only textnode presumably
521− }
522− else {
523− domNode.textContent = vnode.text;
524− }
525− }
526− vnode.domNode = domNode;
527− updated =
528− updateChildren(vnode, domNode, previous.children, vnode.children, projectionOptions) ||
529− updated;
530− updated =
531− updateProperties(domNode, previous.properties, vnode.properties, projectionOptions) ||
532− updated;
533− if (vnode.properties && vnode.properties.afterUpdate) {
534− vnode.properties.afterUpdate.apply(vnode.properties.bind || vnode.properties, [
535− domNode,
536− projectionOptions,
537− vnode.vnodeSelector,
538− vnode.properties,
539− vnode.children,
540− ]);
541− }
542− }
543− if (updated && vnode.properties && vnode.properties.updateAnimation) {
544− vnode.properties.updateAnimation(domNode, vnode.properties, previous.properties);
545− }
546− return textUpdated;
547−};
548−var createProjection = function (vnode, projectionOptions) {
549− return {
550− getLastRender: function () { return vnode; },
551− update: function (updatedVnode) {
552− if (vnode.vnodeSelector !== updatedVnode.vnodeSelector) {
553− throw new Error("The selector for the root VNode may not be changed. (consider using dom.merge and add one extra level to the virtual DOM)");
554− }
555− var previousVNode = vnode;
556− vnode = updatedVnode;
557− updateDom(previousVNode, updatedVnode, projectionOptions, previousVNode.domNode.parentNode, [previousVNode]);
558− },
559− domNode: vnode.domNode,
560− };
561−};
562−
563−var DEFAULT_PROJECTION_OPTIONS = {
564− namespace: undefined,
565− performanceLogger: function () { return undefined; },
566− eventHandlerInterceptor: undefined,
567− styleApplyer: function (domNode, styleName, value) {
568− if (styleName.charAt(0) === "-") {
569− // CSS variables must be set using setProperty
570− domNode.style.setProperty(styleName, value);
571− }
572− else {
573− // properties like 'backgroundColor' must be set as a js-property
574− domNode.style[styleName] = value;
575− }
576− },
577−};
578−var applyDefaultProjectionOptions = function (projectorOptions) {
579− return extend(DEFAULT_PROJECTION_OPTIONS, projectorOptions);
580−};
581−export var dom = {
582− /**
583− * Creates a real DOM tree from `vnode`. The [[Projection]] object returned will contain the resulting DOM Node in
584− * its [[Projection.domNode|domNode]] property.
585− * This is a low-level method. Users will typically use a [[Projector]] instead.
586− * @param vnode - The root of the virtual DOM tree that was created using the [[h]] function. NOTE: [[VNode]]
587− * objects may only be rendered once.
588− * @param projectionOptions - Options to be used to create and update the projection.
589− * @returns The [[Projection]] which also contains the DOM Node that was created.
590− */
591− create: function (vnode, projectionOptions) {
592− projectionOptions = applyDefaultProjectionOptions(projectionOptions);
593− createDom(vnode, document.createElement("div"), undefined, projectionOptions);
594− return createProjection(vnode, projectionOptions);
595− },
596− /**
597− * Appends a new child node to the DOM which is generated from a [[VNode]].
598− * This is a low-level method. Users will typically use a [[Projector]] instead.
599− * @param parentNode - The parent node for the new child node.
600− * @param vnode - The root of the virtual DOM tree that was created using the [[h]] function. NOTE: [[VNode]]
601− * objects may only be rendered once.
602− * @param projectionOptions - Options to be used to create and update the [[Projection]].
603− * @returns The [[Projection]] that was created.
604− */
605− append: function (parentNode, vnode, projectionOptions) {
606− projectionOptions = applyDefaultProjectionOptions(projectionOptions);
607− createDom(vnode, parentNode, undefined, projectionOptions);
608− return createProjection(vnode, projectionOptions);
609− },
610− /**
611− * Inserts a new DOM node which is generated from a [[VNode]].
612− * This is a low-level method. Users wil typically use a [[Projector]] instead.
613− * @param beforeNode - The node that the DOM Node is inserted before.
614− * @param vnode - The root of the virtual DOM tree that was created using the [[h]] function.
615− * NOTE: [[VNode]] objects may only be rendered once.
616− * @param projectionOptions - Options to be used to create and update the projection, see [[createProjector]].
617− * @returns The [[Projection]] that was created.
618− */
619− insertBefore: function (beforeNode, vnode, projectionOptions) {
620− projectionOptions = applyDefaultProjectionOptions(projectionOptions);
621− createDom(vnode, beforeNode.parentNode, beforeNode, projectionOptions);
622− return createProjection(vnode, projectionOptions);
623− },
624− /**
625− * Merges a new DOM node which is generated from a [[VNode]] with an existing DOM Node.
626− * This means that the virtual DOM and the real DOM will have one overlapping element.
627− * Therefore the selector for the root [[VNode]] will be ignored, but its properties and children will be applied to the Element provided.
628− * This is a low-level method. Users wil typically use a [[Projector]] instead.
629− * @param element - The existing element to adopt as the root of the new virtual DOM. Existing attributes and child nodes are preserved.
630− * @param vnode - The root of the virtual DOM tree that was created using the [[h]] function. NOTE: [[VNode]] objects
631− * may only be rendered once.
632− * @param projectionOptions - Options to be used to create and update the projection, see [[createProjector]].
633− * @returns The [[Projection]] that was created.
634− */
635− merge: function (element, vnode, projectionOptions) {
636− projectionOptions = applyDefaultProjectionOptions(projectionOptions);
637− vnode.domNode = element;
638− initPropertiesAndChildren(element, vnode, projectionOptions);
639− return createProjection(vnode, projectionOptions);
640− },
641− /**
642− * Replaces an existing DOM node with a node generated from a [[VNode]].
643− * This is a low-level method. Users will typically use a [[Projector]] instead.
644− * @param element - The node for the [[VNode]] to replace.
645− * @param vnode - The root of the virtual DOM tree that was created using the [[h]] function. NOTE: [[VNode]]
646− * objects may only be rendered once.
647− * @param projectionOptions - Options to be used to create and update the [[Projection]].
648− * @returns The [[Projection]] that was created.
649− */
650− replace: function (element, vnode, projectionOptions) {
651− projectionOptions = applyDefaultProjectionOptions(projectionOptions);
652− createDom(vnode, element.parentNode, element, projectionOptions);
653− element.parentNode.removeChild(element);
654− return createProjection(vnode, projectionOptions);
655− },
656−};
657−
658−var toTextVNode = function (data) {
659− return {
660− vnodeSelector: "",
661− properties: undefined,
662− children: undefined,
663− text: data.toString(),
664− domNode: null,
665− };
666−};
667−var appendChildren = function (parentSelector, insertions, main) {
668− for (var i = 0, length_1 = insertions.length; i < length_1; i++) {
669− var item = insertions[i];
670− if (Array.isArray(item)) {
671− appendChildren(parentSelector, item, main);
672− }
673− else {
674− if (item !== null && item !== undefined && item !== false) {
675− if (typeof item === "string") {
676− item = toTextVNode(item);
677− }
678− main.push(item);
679− }
680− }
681− }
682−};
683−function h(selector, properties, children) {
684− if (Array.isArray(properties)) {
685− children = properties;
686− properties = undefined;
687− }
688− else if ((properties && (typeof properties === "string" || properties.vnodeSelector)) ||
689− (children && (typeof children === "string" || children.vnodeSelector))) {
690− throw new Error("h called with invalid arguments");
691− }
692− var text;
693− var flattenedChildren;
694− // Recognize a common special case where there is only a single text node
695− if (children && children.length === 1 && typeof children[0] === "string") {
696− text = children[0];
697− }
698− else if (children) {
699− flattenedChildren = [];
700− appendChildren(selector, children, flattenedChildren);
701− if (flattenedChildren.length === 0) {
702− flattenedChildren = undefined;
703− }
704− }
705− return {
706− vnodeSelector: selector,
707− properties: properties,
708− children: flattenedChildren,
709− text: text === "" ? undefined : text,
710− domNode: null,
711− };
712−}
713−
714−var createParentNodePath = function (node, rootNode) {
715− var parentNodePath = [];
716− while (node && node !== rootNode) {
717− parentNodePath.push(node);
718− node = node.parentNode;
719− }
720− return parentNodePath;
721−};
722−var find;
723−if (Array.prototype.find) {
724− find = function (items, predicate) { return items.find(predicate); };
725−}
726−else {
727− find = function (items, predicate) { return items.filter(predicate)[0]; };
728−}
729−var findVNodeByParentNodePath = function (vnode, parentNodePath) {
730− var result = vnode;
731− parentNodePath.forEach(function (node) {
732− result =
733− result && result.children
734− ? find(result.children, function (child) { return child.domNode === node; })
735− : undefined;
736− });
737− return result;
738−};
739−var createEventHandlerInterceptor = function (projector, getProjection, performanceLogger) {
740− return function (propertyName, eventHandler, domNode, properties) { return modifiedEventHandler; };
741− function modifiedEventHandler(evt) {
742− var _a, _b;
743− performanceLogger("domEvent", evt);
744− var projection = getProjection();
745− var parentNodePath = createParentNodePath(evt.currentTarget, projection.domNode);
746− parentNodePath.reverse();
747− var matchingVNode = findVNodeByParentNodePath(projection.getLastRender(), parentNodePath);
748− projector.scheduleRender();
749− var result;
750− if (matchingVNode) {
751− /* eslint-disable prefer-rest-params */
752− var listener = (_b = (_a = matchingVNode.properties["on" + evt.type]) !== null && _a !== void 0 ? _a : matchingVNode.properties.on[evt.type].listener) !== null && _b !== void 0 ? _b : matchingVNode.properties.on[evt.type];
753− result = listener.apply(matchingVNode.properties.bind || this, arguments);
754− /* eslint-enable prefer-rest-params */
755− }
756− performanceLogger("domEventProcessed", evt);
757− return result;
758− }
759−};
760−/**
761− * Creates a [[Projector]] instance using the provided projectionOptions.
762− *
763− * For more information, see [[Projector]].
764− *
765− * @param projectorOptions Options that influence how the DOM is rendered and updated.
766− */
767−export var createProjector = function (projectorOptions) {
768− var projector;
769− var projectionOptions = applyDefaultProjectionOptions(projectorOptions);
770− var performanceLogger = projectionOptions.performanceLogger;
771− var renderCompleted = true;
772− var scheduled;
773− var stopped = false;
774− var projections = [];
775− var renderFunctions = []; // matches the projections array
776− var addProjection = function (
777− /* one of: dom.append, dom.insertBefore, dom.replace, dom.merge */
778− domFunction,
779− /* the parameter of the domFunction */
780− node, renderFunction) {
781− var projection;
782− var getProjection = function () { return projection; };
783− projectionOptions.eventHandlerInterceptor = createEventHandlerInterceptor(projector, getProjection, performanceLogger);
784− projection = domFunction(node, renderFunction(), projectionOptions);
785− projections.push(projection);
786− renderFunctions.push(renderFunction);
787− };
788− var doRender = function () {
789− scheduled = undefined;
790− if (!renderCompleted) {
791− return; // The last render threw an error, it should have been logged in the browser console.
792− }
793− renderCompleted = false;
794− performanceLogger("renderStart", undefined);
795− for (var i = 0; i < projections.length; i++) {
796− var updatedVnode = renderFunctions[i]();
797− performanceLogger("rendered", undefined);
798− projections[i].update(updatedVnode);
799− performanceLogger("patched", undefined);
800− }
801− performanceLogger("renderDone", undefined);
802− renderCompleted = true;
803− };
804− projector = {
805− renderNow: doRender,
806− scheduleRender: function () {
807− if (!scheduled && !stopped) {
808− scheduled = requestAnimationFrame(doRender);
809− }
810− },
811− stop: function () {
812− if (scheduled) {
813− cancelAnimationFrame(scheduled);
814− scheduled = undefined;
815− }
816− stopped = true;
817− },
818− resume: function () {
819− stopped = false;
820− renderCompleted = true;
821− projector.scheduleRender();
822− },
823− append: function (parentNode, renderFunction) {
824− addProjection(dom.append, parentNode, renderFunction);
825− },
826− insertBefore: function (beforeNode, renderFunction) {
827− addProjection(dom.insertBefore, beforeNode, renderFunction);
828− },
829− merge: function (domNode, renderFunction) {
830− addProjection(dom.merge, domNode, renderFunction);
831− },
832− replace: function (domNode, renderFunction) {
833− addProjection(dom.replace, domNode, renderFunction);
834− },
835− detach: function (renderFunction) {
836− for (var i = 0; i < renderFunctions.length; i++) {
837− if (renderFunctions[i] === renderFunction) {
838− renderFunctions.splice(i, 1);
839− return projections.splice(i, 1)[0];
840− }
841− }
842− throw new Error("renderFunction was not found");
843− },
844− };
845− return projector;
846−};
847−
848−/**
849− * Creates a [[CalculationCache]] object, useful for caching [[VNode]] trees.
850− * In practice, caching of [[VNode]] trees is not needed, because achieving 60 frames per second is almost never a problem.
851− * For more information, see [[CalculationCache]].
852− *
853− * @param <Result> The type of the value that is cached.
854− */
855−export var createCache = function () {
856− var cachedInputs;
857− var cachedOutcome;
858− return {
859− invalidate: function () {
860− cachedOutcome = undefined;
861− cachedInputs = undefined;
862− },
863− result: function (inputs, calculation) {
864− if (cachedInputs) {
865− for (var i = 0; i < inputs.length; i++) {
866− if (cachedInputs[i] !== inputs[i]) {
867− cachedOutcome = undefined;
868− }
869− }
870− }
871− if (!cachedOutcome) {
872− cachedOutcome = calculation();
873− cachedInputs = inputs;
874− }
875− return cachedOutcome;
876− },
877− };
878−};
879−
880−/**
881− * Creates a {@link Mapping} instance that keeps an array of result objects synchronized with an array of source objects.
882− * See {@link http://maquettejs.org/docs/arrays.html Working with arrays}.
883− *
884− * @param <Source> The type of source items. A database-record for instance.
885− * @param <Target> The type of target items. A [[MaquetteComponent]] for instance.
886− * @param getSourceKey `function(source)` that must return a key to identify each source object. The result must either be a string or a number.
887− * @param createResult `function(source, index)` that must create a new result object from a given source. This function is identical
888− * to the `callback` argument in `Array.map(callback)`.
889− * @param updateResult `function(source, target, index)` that updates a result to an updated source.
890− */
891−export var createMapping = function (getSourceKey, createResult, updateResult) {
892− var keys = [];
893− var results = [];
894− return {
895− results: results,
896− map: function (newSources) {
897− var newKeys = newSources.map(getSourceKey);
898− var oldTargets = results.slice();
899− var oldIndex = 0;
900− for (var i = 0; i < newSources.length; i++) {
901− var source = newSources[i];
902− var sourceKey = newKeys[i];
903− if (sourceKey === keys[oldIndex]) {
904− results[i] = oldTargets[oldIndex];
905− updateResult(source, oldTargets[oldIndex], i);
906− oldIndex++;
907− }
908− else {
909− var found = false;
910− for (var j = 1; j < keys.length + 1; j++) {
911− var searchIndex = (oldIndex + j) % keys.length;
912− if (keys[searchIndex] === sourceKey) {
913− results[i] = oldTargets[searchIndex];
914− updateResult(newSources[i], oldTargets[searchIndex], i);
915− oldIndex = searchIndex + 1;
916− found = true;
917− break;
918− }
919− }
920− if (!found) {
921− results[i] = createResult(source, i);
922− }
923− }
924− }
925− results.length = newSources.length;
926− keys = newKeys;
927− },
928− };
929−};
930−
931−export function _h(selector) {
932− return function (properties) {
933− return function (children) {
934− return h(selector, properties, children)
935− }
936− }
937−}
938−
939−export function scheduleRender(projector) {
940− return function () {
941− projector.scheduleRender()
942− }
943−}
944−
945−export function replace(projector) {
946− return function (el) {
947− return function (render) {
948− return function () {
949− projector.replace(el, render)
950− }
951− }
952− }
953−}
plum/src/Maquette.pursdeleted−33
@@ -1,33 +0,0 @@
1−module Maquette
2− ( Projector
3− , createProjector
4− , string
5− , VNode
6− , h
7− , replace
8− , scheduleRender
9− ) where
10−
11−import Prelude
12−
13−import Effect (Effect)
14−import Unsafe.Coerce (unsafeCoerce)
15−import Web.DOM (Element)
16−
17−foreign import data Projector :: Type
18−
19−foreign import createProjector :: Effect Projector
20−
21−foreign import data VNode :: Type
22−
23−foreign import _h :: forall props. String -> { | props } -> Array VNode -> VNode
24−
25−h :: forall props. String -> Record props -> Array VNode -> VNode
26−h = _h
27−
28−string :: String -> VNode
29−string = unsafeCoerce
30−
31−foreign import scheduleRender :: Projector -> Effect Unit
32−
33−foreign import replace :: Projector -> Element -> Effect VNode -> Effect Unit
plum/src/Plum.purs+61−17
@@ -2,12 +2,16 @@ module Plum (Plum, run) where
22
33import Prelude
44
5+import Data.Array as Array
56import Data.Maybe (Maybe(..))
67import Effect (Effect)
8+import Effect.Console (log)
79import Effect.Ref as Ref
8−import Maquette (h)
9−import Maquette as Maquette
10−import Plum.View (View, grow)
10+import Foreign.Object as Object
11+import Literals.Undefined (undefined)
12+import Plum.View (GenericUI(..), UI, grow)
13+import Snabbdom as Snabbdom
14+import Untagged.Union (asOneOf)
1115import Web.DOM.NonElementParentNode (getElementById) as Web
1216import Web.HTML (window) as Web
1317import Web.HTML.HTMLDocument (toNonElementParentNode) as Web
@@ -16,26 +20,66 @@ import Web.HTML.Window (document) as Web
1620type Plum msg model =
1721 { init :: Effect model
1822 , update :: msg -> model -> Effect model
19− , view :: model -> View msg
23+ , view :: model -> UI msg Unit
2024 }
2125
2226run :: forall msg model. String -> Plum msg model -> Effect Unit
2327run id plum = do
24− modelRef <- plum.init >>= Ref.new
2528 Web.window >>= Web.document >>= Web.getElementById id <<< Web.toNonElementParentNode >>= case _ of
2629 Just element -> do
27− projector <- Maquette.createProjector
28− Maquette.replace projector element do
29− model <- Ref.read modelRef
30− let
31− el = grow
32− ( \msg -> do
33− m <- Ref.read modelRef
34− m_ <- plum.update msg m
35− Ref.write m_ modelRef
36− )
37− (plum.view model)
38− pure $ Maquette.h "div" { styles: { height: "100%", width: "100%" } } [ Maquette.h "style" {} [ Maquette.string outerStyle ], el ]
30+ let node = Snabbdom.toVNode element
31+ patch <- Snabbdom.init
32+ initModel <- plum.init
33+ modelRef <- Ref.new { model: initModel, lastNode: node }
34+ let
35+ view model = do
36+ let UI { children } _ = plum.view model
37+ case Array.uncons children of
38+ Just { head: child } -> do
39+ let
40+ { node, style } = grow
41+ ( \msg -> do
42+ log "in"
43+ { model: m, lastNode } <- Ref.read modelRef
44+ m_ <- plum.update msg m
45+ node <- view m_
46+ newNode <- patch lastNode node
47+ Ref.write { model: m_, lastNode: newNode } modelRef
48+ pure unit
49+ )
50+ child
51+ pure $
52+ Snabbdom.h "div"
53+ { attrs: Object.empty
54+ , on: Object.empty
55+ , style: Object.empty
56+ , props: Object.empty
57+ }
58+ [ Snabbdom.h "style"
59+ { attrs: Object.empty
60+ , on: Object.empty
61+ , style: Object.empty
62+ , props: Object.empty
63+ }
64+ []
65+ (asOneOf $ outerStyle <> style)
66+ , node
67+ ]
68+ (asOneOf undefined)
69+ Nothing -> pure $
70+ Snabbdom.h "div"
71+ { attrs: Object.empty
72+ , on: Object.empty
73+ , style: Object.empty
74+ , props: Object.empty
75+ }
76+ []
77+ (asOneOf undefined)
78+ newNode <- view initModel
79+ newNode_ <- patch node newNode
80+ log "patched"
81+ Ref.write { model: initModel, lastNode: newNode_ } modelRef
82+ pure unit
3983 Nothing -> pure unit
4084
4185outerStyle :: String
plum/src/Plum/View.purs+571−91
@@ -1,8 +1,13 @@
11module Plum.View
22 ( View
3− , view
43 , Nerve(..)
54 , Meat(..)
5+ , Font
6+ , BorderStyle(..)
7+ , Corner(..)
8+ , Shadow(..)
9+ , ShadowCfg
10+ , Side(..)
611 , Bones(..)
712 , grow
813 , Direction(..)
@@ -13,28 +18,224 @@ module Plum.View
1318 , rgba255
1419 , rgb
1520 , rgba
21+ , UI
22+ , GenericUI(..)
23+ , GenericUIView
24+ , column
25+ , row
26+ , stack
27+ , text
28+ , link
29+ , newTabLink
30+ , download
31+ , downloadAs
32+ , image
33+ , textInput
34+ , spacing
35+ , explain
36+ , align
37+ , width
38+ , height
39+ , wrapped
40+ , bgColor
41+ , padding
42+ , spread
43+ , opacity
44+ , pointer
45+ , move
46+ , clip
47+ , borders
48+ , border
49+ , borderStyle
50+ , roundAll
51+ , round
52+ , shadow
53+ , innerShadow
54+ , onHover
55+ , onMouseDown
56+ , font
57+ , fontSize
58+ , fontWeight
59+ , onClick
1660 ) where
1761
1862import Prelude
1963
64+import Control.Monad.Writer (Writer, runWriter, tell)
65+import Control.Monad.Writer.Trans (mapWriterT)
66+import Data.Array (foldMap)
2067import Data.Array as Array
68+import Data.Array.NonEmpty (concatMap)
2169import Data.Int as Int
22−import Data.Maybe (Maybe)
70+import Data.Maybe (Maybe(..))
2371import Data.Maybe as Maybe
24−import Data.Tuple.Nested ((/\))
72+import Data.String as String
73+import Data.Traversable (traverse)
74+import Data.TraversableWithIndex (traverseWithIndex)
75+import Data.Tuple.Nested (type (/\), (/\))
2576import Effect (Effect)
2677import Foreign.Object (Object)
2778import Foreign.Object as Object
28−import Maquette (VNode, string)
29−import Maquette as Maquette
30−import Record as Record
31−import Record.Unsafe.Union as Record
32−
33−h :: String -> Skin -> Array VNode -> VNode
34−h el (Skin styles) children = Maquette.h el { styles } children
35−
36−hWith :: forall props. String -> Record props -> Skin -> Array VNode -> VNode
37−hWith el props (Skin styles) children = Maquette.h el (Record.unsafeUnion props { styles }) children
79+import Literals.Undefined (undefined)
80+import Prim.TypeError (class Warn)
81+import Prim.TypeError as TypeError
82+import Snabbdom (VNode)
83+import Snabbdom as Snabbdom
84+import Type.Row.Homogeneous (class Homogeneous)
85+import Unsafe.Coerce (unsafeCoerce)
86+import Untagged.Union (asOneOf)
87+import Web.DOM.Element as Element
88+import Web.DOM.ParentNode (firstElementChild)
89+import Web.Event.Event (Event)
90+import Web.Event.Event as Event
91+import Web.UIEvent.InputEvent as InputEvent
92+import Web.HTML.HTMLInputElement as HTMLInputElement
93+
94+type GenericUIView children msg =
95+ { nerves :: Array (Nerve msg)
96+ , meat :: Array Meat
97+ , hover :: Array Meat
98+ , down :: Array Meat
99+ , children :: children
100+ }
101+
102+type UIView msg = GenericUIView (Array (View msg)) msg
103+
104+data GenericUI children msg a = UI (GenericUIView children msg) a
105+
106+instance (Semigroup children, Semigroup a) => Semigroup (GenericUI children msg a) where
107+ append (UI v a) (UI v' a') = UI (v <> v') (a <> a')
108+
109+instance (Monoid children, Monoid a) => Monoid (GenericUI children msg a) where
110+ mempty = UI mempty mempty
111+
112+type UI msg a = GenericUI (Array (View msg)) msg a
113+
114+instance Functor (GenericUI children msg) where
115+ map f (UI v a) = UI v $ f a
116+
117+instance Monoid children => Apply (GenericUI children msg) where
118+ apply (UI views f) (UI views' a) = UI (views <> views') (f a)
119+
120+instance Monoid children => Applicative (GenericUI children msg) where
121+ pure = UI mempty
122+
123+instance Monoid children => Bind (GenericUI children msg) where
124+ bind (UI views a) f =
125+ let
126+ UI views' b = f a
127+ in
128+ UI (views <> views') b
129+
130+instance Monoid children => Monad (GenericUI children msg)
131+
132+column :: forall msg. UI msg Unit -> UI msg Unit
133+column (UI { nerves, meat, hover, down, children } _) =
134+ UI (mempty :: UIView msg) { children = [ { meat, nerves, hover, down } /\ Column children ] } unit
135+
136+row :: forall msg a. UI msg a -> UI msg a
137+row (UI { nerves, meat, hover, down, children } a) =
138+ UI (mempty :: UIView msg) { children = [ { meat, nerves, hover, down } /\ Row children ] } a
139+
140+stack :: forall msg a. UI msg a -> UI msg a
141+stack (UI { nerves, meat, hover, down, children } a) =
142+ UI (mempty :: UIView msg) { children = [ { meat, nerves, hover, down } /\ Stack children ] } a
143+
144+text :: forall msg. String -> GenericUI Unit msg Unit -> UI msg Unit
145+text s (UI { nerves, meat, hover, down } a) = UI (mempty :: UIView msg) { children = [ { meat, nerves, hover, down } /\ Text s ] } a
146+
147+link :: forall msg a. String -> UI msg a -> UI msg a
148+link url (UI { nerves, meat, hover, down, children } a) = UI
149+ (mempty :: UIView msg)
150+ { children =
151+ [ { meat
152+ , nerves
153+ , hover
154+ , down
155+ } /\ Link url { newTab: false } (Maybe.fromMaybe none $ Array.head children)
156+ ]
157+ }
158+ a
159+
160+newTabLink :: forall msg a. String -> UI msg a -> UI msg a
161+newTabLink url (UI { nerves, meat, hover, down, children } a) = UI
162+ (mempty :: UIView msg)
163+ { children =
164+ [ { meat
165+ , nerves
166+ , hover
167+ , down
168+ } /\ Link url { newTab: true } (Maybe.fromMaybe none $ Array.head children)
169+ ]
170+ }
171+ a
172+
173+download :: forall msg a. String -> UI msg a -> UI msg a
174+download url (UI { nerves, meat, children, down, hover } a) = UI
175+ (mempty :: UIView msg)
176+ { children =
177+ [ { meat
178+ , nerves
179+ , down
180+ , hover
181+ } /\ Download url { filename: Nothing } (Maybe.fromMaybe none $ Array.head children)
182+ ]
183+ }
184+ a
185+
186+downloadAs :: forall msg a. String -> { filename :: String } -> UI msg a -> UI msg a
187+downloadAs url { filename } (UI { nerves, meat, hover, down, children } a) = UI
188+ (mempty :: UIView msg)
189+ { children =
190+ [ { meat
191+ , nerves
192+ , hover
193+ , down
194+ } /\ Download url { filename: Just filename } (Maybe.fromMaybe none $ Array.head children)
195+ ]
196+ }
197+ a
198+
199+image :: forall msg a. String -> { description :: String } -> GenericUI Unit msg a -> UI msg a
200+image url description (UI { nerves, meat, hover, down } a) =
201+ UI (mempty :: UIView msg) { children = [ { meat, nerves, hover, down } /\ Image url description ] } a
202+
203+textInput :: forall msg a. { value :: String, onChange :: String -> msg } -> GenericUI Unit msg a -> UI msg a
204+textInput props (UI { nerves, meat, hover, down } a) =
205+ UI (mempty :: UIView msg) { children = [ { meat, nerves, hover, down } /\ TextInput props ] } a
206+
207+string :: String -> Classes -> WiredNerves -> String -> VNode
208+string elem classes (WiredNerves on) s =
209+ Snabbdom.h elem
210+ { attrs: Object.singleton "class" (Array.intercalate " " classes)
211+ , on
212+ , style: Object.empty
213+ , props: Object.empty
214+ }
215+ []
216+ (asOneOf s)
217+
218+h :: String -> Classes -> WiredNerves -> Array VNode -> VNode
219+h elem classes (WiredNerves on) children =
220+ Snabbdom.h elem
221+ { attrs: Object.singleton "class" (Array.intercalate " " classes)
222+ , on
223+ , props: Object.empty
224+ , style: Object.empty
225+ }
226+ children
227+ (asOneOf undefined)
228+
229+hWith :: forall props. Homogeneous props String => String -> Record props -> Classes -> WiredNerves -> Array VNode -> VNode
230+hWith elem props classes (WiredNerves on) children =
231+ Snabbdom.h elem
232+ { attrs: Object.singleton "class" (Array.intercalate " " classes)
233+ , on
234+ , props: Object.fromHomogeneous props
235+ , style: Object.empty
236+ }
237+ children
238+ (asOneOf undefined)
38239
39240data Length = Px Int | Fill | Fit | Max Int Length | Min Int Length
40241
@@ -42,6 +243,90 @@ data Alignment = Start | Center | End
42243
43244data Direction = X | Y
44245
246+n :: forall ch msg. Monoid ch => Nerve msg -> GenericUI ch msg Unit
247+n nerve = UI (mempty :: GenericUIView ch msg) { nerves = [ nerve ] } mempty
248+
249+onClick :: forall ch msg. Monoid ch => msg -> GenericUI ch msg Unit
250+onClick msg = n $ OnClick msg
251+
252+m :: forall ch msg. Monoid ch => Meat -> GenericUI ch msg Unit
253+m meat = UI (mempty :: GenericUIView ch msg) { meat = [ meat ] } mempty
254+
255+spacing :: forall ch msg. Monoid ch => { x :: Int, y :: Int } -> GenericUI ch msg Unit
256+spacing { x, y } = m $ Spacing x y
257+
258+explain :: forall ch msg. Monoid ch => Warn (TypeError.Text "Debug explain present") => GenericUI ch msg Unit
259+explain = m Explain
260+
261+align :: forall ch msg. Monoid ch => Direction -> Alignment -> GenericUI ch msg Unit
262+align dir al = m $ Align dir al
263+
264+width :: forall ch msg. Monoid ch => Length -> GenericUI ch msg Unit
265+width l = m $ Width l
266+
267+height :: forall ch msg. Monoid ch => Length -> GenericUI ch msg Unit
268+height l = m $ Height l
269+
270+wrapped :: forall ch msg. Monoid ch => GenericUI ch msg Unit
271+wrapped = m Wrapped
272+
273+bgColor :: forall ch msg. Monoid ch => Color -> GenericUI ch msg Unit
274+bgColor c = m $ BackgroundColor c
275+
276+padding :: forall ch msg. Monoid ch => Side -> Int -> GenericUI ch msg Unit
277+padding s l = m $ Padding s l
278+
279+spread :: forall ch msg. Monoid ch => GenericUI ch msg Unit
280+spread = m Spread
281+
282+opacity :: forall ch msg. Monoid ch => Number -> GenericUI ch msg Unit
283+opacity o = m $ Opacity o
284+
285+pointer :: forall ch msg. Monoid ch => GenericUI ch msg Unit
286+pointer = m Pointer
287+
288+move :: forall ch msg. Monoid ch => { x :: Int, y :: Int } -> GenericUI ch msg Unit
289+move a = m $ Move a
290+
291+clip :: forall ch msg. Monoid ch => Direction -> GenericUI ch msg Unit
292+clip dir = m $ Clip dir
293+
294+onHover :: forall ch msg. Monoid ch => GenericUI Unit msg Unit -> GenericUI ch msg Unit
295+onHover (UI { meat } a) = UI (mempty :: GenericUIView ch msg) { hover = meat } a
296+
297+onMouseDown :: forall ch msg. Monoid ch => GenericUI Unit msg Unit -> GenericUI ch msg Unit
298+onMouseDown (UI { meat } a) = UI (mempty :: GenericUIView ch msg) { down = meat } a
299+
300+borders :: forall ch msg. Monoid ch => Int -> GenericUI ch msg Unit
301+borders l = Array.foldMap (\s -> m $ BorderWidth s l) [ Top, Right, Bottom, Left ]
302+
303+border :: forall ch msg. Monoid ch => Side -> Int -> GenericUI ch msg Unit
304+border s l = m $ BorderWidth s l
305+
306+borderStyle :: forall ch msg. Monoid ch => BorderStyle -> GenericUI ch msg Unit
307+borderStyle s = m $ BorderStyle s
308+
309+roundAll :: forall ch msg. Monoid ch => Int -> GenericUI ch msg Unit
310+roundAll l = Array.foldMap (\c -> m $ Round c l) [ TopLeft, TopRight, BottomRight, BottomLeft ]
311+
312+round :: forall ch msg. Monoid ch => Corner -> Int -> GenericUI ch msg Unit
313+round c l = m $ Round c l
314+
315+shadow :: forall ch msg. Monoid ch => ShadowCfg -> GenericUI ch msg Unit
316+shadow cfg = m $ Shadow $ ShadowCfg cfg
317+
318+innerShadow :: forall ch msg. Monoid ch => ShadowCfg -> GenericUI ch msg Unit
319+innerShadow cfg = m $ InnerShadow $ ShadowCfg cfg
320+
321+font :: forall ch msg. Monoid ch => String -> GenericUI ch msg Unit
322+font f = m $ Font f
323+
324+fontSize :: forall ch msg. Monoid ch => Int -> GenericUI ch msg Unit
325+fontSize f = m $ FontSize f
326+
327+fontWeight :: forall ch msg. Monoid ch => Int -> GenericUI ch msg Unit
328+fontWeight f = m $ FontWeight f
329+
45330data Meat
46331 = Spacing Int Int
47332 | Explain
@@ -50,24 +335,103 @@ data Meat
50335 | Height Length
51336 | Wrapped
52337 | BackgroundColor Color
53− | Padding { top :: Int, right :: Int, bottom :: Int, left :: Int }
338+ | Padding Side Int
54339 | Spread
55340 | Opacity Number
56341 | Pointer
57342 | Move { x :: Int, y :: Int }
58343 | Clip Direction
344+ | BorderWidth Side Int
345+ | BorderStyle BorderStyle
346+ | Round Corner Int
347+ | Shadow Shadow
348+ | InnerShadow Shadow
349+ | FontColor Color
350+ | FontWeight Int
351+ | FontSize Int
352+ | Font Font
353+
354+type Font = String
355+
356+type ShadowCfg = { offset :: { x :: Int, y :: Int }, size :: Number, blur :: Number, color :: Color }
357+
358+newtype Shadow = ShadowCfg ShadowCfg
359+
360+instance Renderable Shadow where
361+ render (ShadowCfg s) = show s.offset.x <> "px " <> show s.offset.y <> "px " <> show s.blur <> "px " <> show s.size <> "px " <> render s.color
362+ renderKey (ShadowCfg s) = show s.offset.x <> "-" <> show s.offset.y <> "-" <> show s.blur <> "-" <> show s.size <> "-" <> renderKey s.color
363+
364+data Corner = TopLeft | TopRight | BottomRight | BottomLeft
365+
366+instance Renderable Corner where
367+ render = case _ of
368+ TopLeft -> "top-left"
369+ TopRight -> "top-right"
370+ BottomRight -> "bottom-right"
371+ BottomLeft -> "bottom-left"
372+ renderKey = case _ of
373+ TopLeft -> "top-left"
374+ TopRight -> "top-right"
375+ BottomRight -> "bottom-right"
376+ BottomLeft -> "bottom-left"
377+
378+data BorderStyle = Solid | Dashed | Dotted
379+
380+instance Renderable BorderStyle where
381+ render = case _ of
382+ Solid -> "solid"
383+ Dashed -> "dashed"
384+ Dotted -> "dotted"
385+ renderKey = case _ of
386+ Solid -> "solid"
387+ Dashed -> "dashed"
388+ Dotted -> "dotted"
389+
390+data Side = Top | Right | Bottom | Left
391+
392+instance Renderable Side where
393+ render = case _ of
394+ Top -> "top"
395+ Right -> "right"
396+ Bottom -> "bottom"
397+ Left -> "left"
398+ renderKey = case _ of
399+ Top -> "top"
400+ Right -> "right"
401+ Bottom -> "bottom"
402+ Left -> "left"
59403
60404data Nerve msg = OnClick msg
61405
62−type View msg = { nerves :: Array (Nerve msg), meat :: Array Meat, bones :: Bones msg }
406+newtype WiredNerves = WiredNerves (Object (Event -> Effect Unit))
407+
408+instance Semigroup WiredNerves where
409+ append (WiredNerves x) (WiredNerves y) =
410+ WiredNerves $ Object.unionWith (\f g ev -> f ev *> g ev) x y
411+
412+instance Monoid WiredNerves where
413+ mempty = WiredNerves Object.empty
414+
415+wireNerve :: forall msg. (msg -> Effect Unit) -> Nerve msg -> WiredNerves
416+wireNerve fire nerve = WiredNerves $ case nerve of
417+ OnClick msg -> Object.singleton "click" $ \_ev -> fire msg
418+
419+type View msg =
420+ { nerves :: Array (Nerve msg)
421+ , meat :: Array Meat
422+ , hover :: Array Meat
423+ , down :: Array Meat
424+ } /\ Bones msg
63425
64−view :: forall msg. Array (Nerve msg) -> Array Meat -> Bones msg -> View msg
65−view nerves meat bones = { nerves, meat, bones }
426+none :: forall msg. View msg
427+none = mempty /\ None
66428
67429newtype Skin = Skin (Object String)
68430
69−sk :: String -> String -> Skin
70−sk key val = Skin $ Object.singleton key val
431+sk :: String -> String -> String -> Writer SkinGrowth Classes
432+sk cName key value = do
433+ tell $ SkinGrowth $ { meat: Object.singleton cName { key, value }, hover: Object.empty, down: Object.empty }
434+ pure [ cName ]
71435
72436instance Semigroup Skin where
73437 append (Skin x) (Skin y) = Skin $ Object.union x y
@@ -77,55 +441,82 @@ instance Monoid Skin where
77441
78442data Context = Grid | Flexbox Direction | Generic | Span
79443
80−skin :: Context -> Meat -> Skin
444+skin :: Context -> Meat -> Writer SkinGrowth Classes
81445skin ctx = case _ of
82− Spacing x y -> sk "gap" (show x <> "px " <> show y <> "px")
83− Explain -> sk "border" "dashed magenta"
446+ Spacing x y -> sk ("spacing-" <> show x <> "-" <> show y) "gap" (show x <> "px " <> show y <> "px")
447+ Explain -> sk "explain" "border" "dashed magenta"
84448 Align dir alignment -> case ctx of
85449 Generic -> mempty
86450 Span -> mempty
87− Grid -> sk
88− ( case dir of
89− X -> "justify-items"
90− Y -> "align-items"
91− )
92− ( case alignment of
93− Start -> "start"
94− Center -> "center"
95− End -> "end"
96− )
97−
98− Flexbox flexDir -> sk
99− ( case flexDir /\ dir of
100− X /\ X -> "justify-content"
101− X /\ Y -> "align-items"
102− Y /\ X -> "align-items"
103− Y /\ Y -> "justify-content"
104− )
105− ( case alignment of
106− Start -> "flex-start"
107− Center -> "center"
108− End -> "flex-end"
109− )
110− Width l -> sk "width" (render l)
111− Height l -> sk "height" (render l)
451+ Grid ->
452+ let
453+ k =
454+ ( case dir of
455+ X -> "justify-items"
456+ Y -> "align-items"
457+ )
458+ v =
459+ ( case alignment of
460+ Start -> "start"
461+ Center -> "center"
462+ End -> "end"
463+ )
464+ in
465+ sk ("align-grid-" <> k <> "-" <> v) k v
466+
467+ Flexbox flexDir ->
468+ let
469+ k =
470+ ( case flexDir /\ dir of
471+ X /\ X -> "justify-content"
472+ X /\ Y -> "align-items"
473+ Y /\ X -> "align-items"
474+ Y /\ Y -> "justify-content"
475+ )
476+
477+ v =
478+ ( case alignment of
479+ Start -> "flex-start"
480+ Center -> "center"
481+ End -> "flex-end"
482+ )
483+ in
484+ sk ("align-flexbox-" <> k <> "-" <> v) k v
485+ Width l -> sk ("width-" <> renderKey l) "width" (render l)
486+ Height l -> sk ("height-" <> renderKey l) "height" (render l)
112487 Wrapped -> case ctx of
113− Flexbox _ -> sk "flex-wrap" "wrap"
114− _ -> mempty
115− BackgroundColor color -> sk "background-color" (render color)
116− Padding { top, right, bottom, left } ->
117− sk "padding" (show top <> "px " <> show right <> "px " <> show bottom <> "px " <> show left <> "px")
488+ Flexbox _ -> sk "wrapped" "flex-wrap" "wrap"
489+ _ -> pure []
490+ BackgroundColor color -> sk ("bg-color-" <> renderKey color) "background-color" (render color)
491+ Padding side l ->
492+ sk
493+ ("padding-" <> renderKey side <> "-" <> show l)
494+ ("padding-" <> render side)
495+ (show l <> "px")
118496 Spread -> case ctx of
119− Flexbox _ -> sk "justify-content" "space-between"
120− _ -> mempty
121− Opacity o -> sk "opacity" (show o)
122− Pointer -> sk "cursor" "pointer"
123− Move { x, y } -> sk "transform" ("translate(" <> show x <> "px, " <> show y <> ")")
124− Clip X -> sk "overflow-x" "hidden"
125− Clip Y -> sk "overflow-y" "hidden"
497+ Flexbox _ -> sk "spread" "justify-content" "space-between"
498+ _ -> pure []
499+ Opacity o -> sk ("opacity-" <> show o) "opacity" (show o)
500+ Pointer -> sk "pointer" "cursor" "pointer"
501+ Move { x, y } -> sk ("move-" <> show x <> "-" <> show y) "transform" ("translate(" <> show x <> "px, " <> show y <> "px)")
502+ Clip X -> sk "clip-x" "overflow-x" "hidden"
503+ Clip Y -> sk "clip-y" "overflow-y" "hidden"
504+ BorderWidth side l -> sk ("border-width-" <> renderKey side <> "-" <> show l) ("border-" <> render side <> "-width") (show l <> "px")
505+ BorderStyle s -> sk ("border-style-" <> renderKey s) "border-style" (render s)
506+ Round corner l -> sk ("round-" <> renderKey corner <> "-" <> show l) ("border-" <> render corner <> "-radius") (show l <> "px")
507+ Shadow s -> sk ("shadow-" <> renderKey s) "box-shadow" (render s)
508+ InnerShadow s -> sk ("inner-shadow-" <> renderKey s) "box-shadow" (render s <> " inset")
509+ FontColor c -> sk ("font-color-" <> renderKey c) "color" (render c)
510+ FontSize l -> sk ("font-size-" <> show l) "font-size" (show l <> "px")
511+ Font f -> sk ("font-" <> removeSpaces f) "font-family" f
512+ FontWeight w -> sk ("font-weight-" <> show w) "font-weight" (show w)
513+
514+removeSpaces :: String -> String
515+removeSpaces = String.replaceAll (String.Pattern " ") (String.Replacement "-")
126516
127517class Renderable x where
128518 render :: x -> String
519+ renderKey :: x -> String
129520
130521instance Renderable Length where
131522 render = case _ of
@@ -134,23 +525,30 @@ instance Renderable Length where
134525 Fill -> "100%"
135526 Max px l -> "max(" <> show px <> "px," <> render l <> ")"
136527 Min px l -> "min(" <> show px <> "px," <> render l <> ")"
528+ renderKey = case _ of
529+ Px px -> show px
530+ Fit -> "fit-content"
531+ Fill -> "fill"
532+ Max px l -> "max-" <> show px <> "-" <> renderKey l
533+ Min px l -> "min-" <> show px <> "-" <> renderKey l
137534
138−newtype Color = Color { r :: Int, g :: Int, b :: Int, a :: Number }
535+newtype Color = Color { r :: Int, g :: Int, b :: Int, a :: Int }
139536
140537rgb255 :: Int -> Int -> Int -> Color
141−rgb255 r g b = Color { r, g, b, a: 1.0 }
538+rgb255 r g b = Color { r, g, b, a: 100 }
142539
143−rgba255 :: Int -> Int -> Int -> Number -> Color
540+rgba255 :: Int -> Int -> Int -> Int -> Color
144541rgba255 r g b a = Color { r, g, b, a }
145542
146543rgb :: Number -> Number -> Number -> Color
147−rgb r g b = Color { r: Int.round (r * 255.0), g: Int.round (g * 255.0), b: Int.round (b * 255.0), a: 1.0 }
544+rgb r g b = Color { r: Int.round (r * 255.0), g: Int.round (g * 255.0), b: Int.round (b * 255.0), a: 100 }
148545
149546rgba :: Number -> Number -> Number -> Number -> Color
150−rgba r g b a = Color { r: Int.round (r * 255.0), g: Int.round (g * 255.0), b: Int.round (b * 255.0), a }
547+rgba r g b a = Color { r: Int.round (r * 255.0), g: Int.round (g * 255.0), b: Int.round (b * 255.0), a: Int.round (a * 100.0) }
151548
152549instance Renderable Color where
153− render (Color { r, g, b, a }) = "rgba(" <> show r <> "," <> show g <> "," <> show b <> "," <> show a <> ")"
550+ render (Color { r, g, b, a }) = "rgb(" <> show r <> "," <> show g <> "," <> show b <> "," <> show a <> "%)"
551+ renderKey (Color { r, g, b, a }) = show r <> "-" <> show g <> "-" <> show b <> "-" <> show a
154552
155553data Bones :: Type -> Type
156554data Bones msg
@@ -162,8 +560,12 @@ data Bones msg
162560 | Link String { newTab :: Boolean } (View msg)
163561 | Download String { filename :: Maybe String } (View msg)
164562 | Image String { description :: String }
563+ | TextInput { value :: String, onChange :: String -> msg }
564+ | None
565+
566+type Classes = Array String
165567
166−newtype Mutation = Mutation { extraSkin :: Skin }
568+newtype Mutation = Mutation { extraSkin :: Classes }
167569
168570instance Semigroup Mutation where
169571 append (Mutation x) (Mutation y) = Mutation { extraSkin: x.extraSkin <> y.extraSkin }
@@ -171,13 +573,36 @@ instance Semigroup Mutation where
171573instance Monoid Mutation where
172574 mempty = Mutation { extraSkin: mempty }
173575
174−growSkin :: forall msg. (msg -> Effect Unit) -> Mutation -> View msg -> VNode
175−growSkin fire (Mutation mutation) { meat, bones } =
576+newtype SkinGrowth = SkinGrowth
577+ { meat :: Object { key :: String, value :: String }
578+ , hover :: Object { key :: String, value :: String }
579+ , down :: Object { key :: String, value :: String }
580+ }
581+
582+styleSkinGrowth :: SkinGrowth -> String
583+styleSkinGrowth (SkinGrowth o) =
584+ Object.foldMap (\className { key, value } -> "." <> className <> "{" <> key <> ":" <> value <> ";}") o.meat
585+ <> Object.foldMap (\className { key, value } -> "." <> className <> "{" <> key <> ":" <> value <> ";}") o.hover
586+ <> Object.foldMap (\className { key, value } -> "." <> className <> "{" <> key <> ":" <> value <> ";}") o.down
587+
588+instance Semigroup SkinGrowth where
589+ append (SkinGrowth x) (SkinGrowth y) = SkinGrowth $
590+ { meat: Object.union x.meat y.meat
591+ , hover: Object.union x.hover y.hover
592+ , down: Object.union x.down y.down
593+ }
594+
595+instance Monoid SkinGrowth where
596+ mempty = SkinGrowth mempty
597+
598+growSkin :: forall msg. (msg -> Effect Unit) -> Mutation -> View msg -> Writer SkinGrowth VNode
599+growSkin fire (Mutation mutation) ({ meat, hover, down, nerves } /\ bones) = do
176600 let
601+ wiredNerves = Array.foldMap (wireNerve fire) nerves
177602 alignCenter = [ Align X Center, Align Y Center ]
178603 widthFill = [ Width Fill, Height Fill ]
179− skn ctx =
180− Array.foldMap (skin ctx)
604+ skn ctx = do
605+ meatClasses <- ((_ <> mutation.extraSkin) <<< Array.concat) <$> traverse (skin ctx)
181606 ( meat
182607 <> case ctx of
183608 Span -> mempty
@@ -189,32 +614,87 @@ growSkin fire (Mutation mutation) { meat, bones } =
189614 Flexbox _ -> alignCenter
190615 Span -> mempty
191616 Generic -> alignCenter
192− ) <> mutation.extraSkin
193− in
194− case bones of
195− Text t -> h "span" (skn Span) [ string t ]
196− Wrapper x -> h "div" (skn (Flexbox X) <> sk "display" "flex" <> sk "flex-direction" "row") [ growSkin fire mempty x ]
197− Stack children -> h "div" (skn Grid <> sk "display" "grid")
198− (map (growSkin fire $ Mutation { extraSkin: sk "grid-row" "1" <> sk "grid-column" "1" }) children)
199− Row children -> h "div" (skn (Flexbox X) <> sk "display" "flex" <> sk "flex-direction" "row")
200− (map (growSkin fire mempty) children)
201− Column children -> h "div" (skn (Flexbox Y) <> sk "display" "flex" <> sk "flex-direction" "column")
202− (map (growSkin fire mempty) children)
203− Link href { newTab } child -> hWith "a"
617+ )
618+ let hoverClasses /\ (SkinGrowth hover') = runWriter $ traverse (skin ctx) hover
619+ _ <- traverseWithIndex
620+ ( \key val -> tell $ SkinGrowth $
621+ { meat: Object.empty
622+ , hover: Object.singleton (key <> "-hover:hover") val
623+ , down: Object.empty
624+ }
625+ )
626+ hover'.meat
627+ let downClasses /\ (SkinGrowth down') = runWriter $ traverse (skin ctx) down
628+ _ <- traverseWithIndex
629+ ( \key val -> tell $ SkinGrowth $
630+ { meat: Object.empty
631+ , hover: Object.empty
632+ , down: Object.singleton (key <> "-down:active") val
633+ }
634+ )
635+ down'.meat
636+
637+ pure $ meatClasses <> map (_ <> "-hover") (Array.concat hoverClasses) <> map (_ <> "-down") (Array.concat downClasses)
638+
639+ case bones of
640+ Text t -> (\c -> string "span" c wiredNerves t) <$> (skn Span)
641+ Wrapper x -> do
642+ classes <- (skn (Flexbox X) <> sk "display-flex" "display" "flex" <> sk "flex-direction-row" "flex-direction" "row")
643+ x' <- growSkin fire mempty x
644+ pure $ h "div" classes wiredNerves [ x' ]
645+ Stack children -> do
646+ classes <- (skn Grid <> sk "display-grid" "display" "grid")
647+ extraSkin <- sk "grid-row-1" "grid-row" "1" <> sk "grid-column-1" "grid-column" "1"
648+ children' <- (traverse (growSkin fire $ Mutation { extraSkin }) children)
649+ pure $ h "div" classes wiredNerves children'
650+
651+ Row children -> do
652+ classes <- (skn (Flexbox X) <> sk "display-flex" "display" "flex" <> sk "flex-direction-row" "flex-direction" "row")
653+ children' <- traverse (growSkin fire mempty) children
654+ pure $ h "div" classes wiredNerves children'
655+ Column children -> do
656+ classes <- (skn (Flexbox Y) <> sk "display-flex" "display" "flex" <> sk "flex-direction-column" "flex-direction" "column")
657+ children' <- traverse (growSkin fire mempty) children
658+ pure $ h "div" classes wiredNerves children'
659+ Link href { newTab } child -> do
660+ classes <- (skn (Flexbox X) <> sk "display-flex" "display" "flex" <> sk "flex-direction-row" "flex-direction" "row")
661+ child' <- growSkin fire mempty child
662+ pure $ hWith "a"
204663 { href
205664 , rel: "noopener noreferrer"
206665 , target: if newTab then "_blank" else "_self"
207666 }
208− (skn (Flexbox X) <> sk "display" "flex" <> sk "flex-direction" "row")
209− [ growSkin fire mempty child ]
210−
211− Download href { filename } child -> hWith "a"
667+ classes
668+ wiredNerves
669+ [ child' ]
670+
671+ Download href { filename } child -> do
672+ classes <- (skn (Flexbox X) <> sk "display-flex" "display" "flex" <> sk "flex-direction-row" "flex-direction" "row")
673+ child' <- growSkin fire mempty child
674+ pure $ hWith "a"
212675 { href
213676 , download: Maybe.fromMaybe "" filename
214677 }
215− (skn (Flexbox X) <> sk "display" "flex" <> sk "flex-direction" "row")
216− [ growSkin fire mempty child ]
217− Image src { description } -> hWith "img" { src, alt: description } (skn Generic) []
678+ classes
679+ wiredNerves
680+ [ child' ]
681+ Image src { description } -> (\c -> hWith "img" { src, alt: description } c wiredNerves []) <$> (skn Generic)
682+ TextInput { value, onChange } -> do
683+ classes <- skn Generic
684+ let
685+ onInputNerve = WiredNerves $ Object.singleton "input" $ \ev ->
686+ case Event.currentTarget ev >>= HTMLInputElement.fromEventTarget of
687+ Nothing -> pure unit
688+ Just inputEl -> do
689+ val <- HTMLInputElement.value inputEl
690+ fire $ onChange val
691+ pure $ hWith "input" { value } classes (wiredNerves <> onInputNerve) []
692+ None -> pure $ h "div" mempty wiredNerves []
693+
694+grow :: forall msg. (msg -> Effect Unit) -> View msg -> { node :: VNode, style :: String }
695+grow fire v =
696+ let
697+ node /\ skinGrowth = runWriter (growSkin fire mempty v)
698+ in
699+ { node, style: styleSkinGrowth skinGrowth }
218700
219−grow :: forall msg. (msg -> Effect Unit) -> View msg -> VNode
220−grow fire v = growSkin fire mempty v
plum/src/Snabbdom.jsnew file+1
@@ -0,0 +1 @@
1+function m(f,G){let z,W=G.elm,X=f.data.attrs,Z=G.data.attrs;if(!X&&!Z)return;if(X===Z)return;X=X||{},Z=Z||{};for(z in Z){let K=Z[z];if(X[z]!==K)if(K===!0)W.setAttribute(z,"");else if(K===!1)W.removeAttribute(z);else if(z.charCodeAt(0)!==120)W.setAttribute(z,K);else if(z.charCodeAt(3)===58)W.setAttributeNS("http://www.w3.org/XML/1998/namespace",z,K);else if(z.charCodeAt(5)===58)z.charCodeAt(1)===109?W.setAttributeNS("http://www.w3.org/2000/xmlns/",z,K):W.setAttributeNS("http://www.w3.org/1999/xlink",z,K);else W.setAttribute(z,K)}for(z in X)if(!(z in Z))W.removeAttribute(z)}var s={create:m,update:m};function r(f,G,z){if(typeof f==="function")f.call(G,z,G);else if(typeof f==="object")for(let W=0;W<f.length;W++)r(f[W],G,z)}function G0(f,G){let z=f.type,W=G.data.on;if(W&&W[z])r(W[z],G,f)}function J0(){return function f(G){G0(G,f.vnode)}}function x(f,G){let z=f.data.on,W=f.listener,X=f.elm,Z=G&&G.data.on,K=G&&G.elm,U;if(z===Z)return;if(z&&W){if(!Z)for(U in z)X.removeEventListener(U,W,!1);else for(U in z)if(!Z[U])X.removeEventListener(U,W,!1)}if(Z){let D=G.listener=f.listener||J0();if(D.vnode=G,!z)for(U in Z)K.addEventListener(U,D,!1);else for(U in Z)if(!z[U])K.addEventListener(U,D,!1)}}var l={create:x,update:x,destroy:x};function N(f,G,z,W,X){let Z=G===void 0?void 0:G.key;return{sel:f,data:G,children:z,text:W,elm:X,key:Z}}var u=Array.isArray;function a(f){return typeof f==="string"||typeof f==="number"||f instanceof String||f instanceof Number}function Y0(f,G){return document.createElement(f,G)}function Z0(f,G,z){return document.createElementNS(f,G,z)}function $0(){return I(document.createDocumentFragment())}function B0(f){return document.createTextNode(f)}function q0(f){return document.createComment(f)}function K0(f,G,z){if(S(f)){let W=f;while(W&&S(W))W=I(W).parent;f=W!==null&&W!==void 0?W:f}if(S(G))G=I(G,f);if(z&&S(z))z=I(z).firstChildNode;f.insertBefore(G,z)}function P0(f,G){f.removeChild(G)}function H0(f,G){if(S(G))G=I(G,f);f.appendChild(G)}function t(f){if(S(f)){while(f&&S(f))f=I(f).parent;return f!==null&&f!==void 0?f:null}return f.parentNode}function O0(f){var G;if(S(f)){let z=I(f),W=t(z);if(W&&z.lastChildNode){let X=Array.from(W.childNodes),Z=X.indexOf(z.lastChildNode);return(G=X[Z+1])!==null&&G!==void 0?G:null}return null}return f.nextSibling}function U0(f){return f.tagName}function R0(f,G){f.textContent=G}function T0(f){return f.textContent}function L0(f){return f.nodeType===1}function M0(f){return f.nodeType===3}function D0(f){return f.nodeType===8}function S(f){return f.nodeType===11}function I(f,G){var z,W,X;let Z=f;return(z=Z.parent)!==null&&z!==void 0||(Z.parent=G!==null&&G!==void 0?G:null),(W=Z.firstChildNode)!==null&&W!==void 0||(Z.firstChildNode=f.firstChild),(X=Z.lastChildNode)!==null&&X!==void 0||(Z.lastChildNode=f.lastChild),Z}var E={createElement:Y0,createElementNS:Z0,createTextNode:B0,createDocumentFragment:$0,createComment:q0,insertBefore:K0,removeChild:P0,appendChild:H0,parentNode:t,nextSibling:O0,tagName:U0,setTextContent:R0,getTextContent:T0,isElement:L0,isText:M0,isComment:D0,isDocumentFragment:S};var V=N("",{},[],void 0,void 0);function w(f,G){var z,W;let X=f.key===G.key,Z=((z=f.data)===null||z===void 0?void 0:z.is)===((W=G.data)===null||W===void 0?void 0:W.is),K=f.sel===G.sel,U=!f.sel&&f.sel===G.sel?typeof f.text===typeof G.text:!0;return K&&X&&Z&&U}function A0(){throw new Error("The document fragment is not supported on this platform.")}function j0(f,G){return f.isElement(G)}function F0(f,G){return f.isDocumentFragment(G)}function Q0(f,G,z){var W;let X={};for(let Z=G;Z<=z;++Z){let K=(W=f[Z])===null||W===void 0?void 0:W.key;if(K!==void 0)X[K]=Z}return X}var g0=["create","update","remove","destroy","pre","post"];function n(f,G,z){let W={create:[],update:[],remove:[],destroy:[],pre:[],post:[]},X=G!==void 0?G:E;for(let J of g0)for(let Y of f){let $=Y[J];if($!==void 0)W[J].push($)}function Z(J){let Y=J.id?"#"+J.id:"",$=J.getAttribute("class"),B=$?"."+$.split(" ").join("."):"";return N(X.tagName(J).toLowerCase()+Y+B,{},[],void 0,J)}function K(J){return N(void 0,{},[],void 0,J)}function U(J,Y){return function $(){if(--Y===0){let B=X.parentNode(J);if(B!==null)X.removeChild(B,J)}}}function D(J,Y){var $,B,P,O,L;let q,R=J.data,M=R===null||R===void 0?void 0:R.hook;($=M===null||M===void 0?void 0:M.init)===null||$===void 0||$.call(M,J);let{children:T,sel:H}=J;if(H==="!")(B=J.text)!==null&&B!==void 0||(J.text=""),J.elm=X.createComment(J.text);else if(H==="")J.elm=X.createTextNode(J.text);else if(H!==void 0){let A=H.indexOf("#"),j=H.indexOf(".",A),F=A>0?A:H.length,b=j>0?j:H.length,i=A!==-1||j!==-1?H.slice(0,Math.min(F,b)):H,p=R===null||R===void 0?void 0:R.ns,_=p===void 0?X.createElement(i,R):X.createElementNS(p,i,R);if(J.elm=_,F<b)_.setAttribute("id",H.slice(F+1,b));if(j>0)_.setAttribute("class",H.slice(b+1).replace(/\./g," "));for(q=0;q<W.create.length;++q)W.create[q](V,J);if(a(J.text)&&(!u(T)||T.length===0))X.appendChild(_,X.createTextNode(J.text));if(u(T))for(q=0;q<T.length;++q){let v=T[q];if(v!=null)X.appendChild(_,D(v,Y))}if(M!==void 0){if((P=M.create)===null||P===void 0||P.call(M,V,J),M.insert!==void 0)Y.push(J)}}else if(((O=z===null||z===void 0?void 0:z.experimental)===null||O===void 0?void 0:O.fragments)&&J.children){J.elm=((L=X.createDocumentFragment)!==null&&L!==void 0?L:A0)();for(q=0;q<W.create.length;++q)W.create[q](V,J);for(q=0;q<J.children.length;++q){let A=J.children[q];if(A!=null)X.appendChild(J.elm,D(A,Y))}}else J.elm=X.createTextNode(J.text);return J.elm}function y(J,Y,$,B,P,O){for(;B<=P;++B){let L=$[B];if(L!=null)X.insertBefore(J,D(L,O),Y)}}function k(J){var Y,$;let B=J.data;if(B!==void 0){($=(Y=B===null||B===void 0?void 0:B.hook)===null||Y===void 0?void 0:Y.destroy)===null||$===void 0||$.call(Y,J);for(let P=0;P<W.destroy.length;++P)W.destroy[P](J);if(J.children!==void 0)for(let P=0;P<J.children.length;++P){let O=J.children[P];if(O!=null&&typeof O!=="string")k(O)}}}function g(J,Y,$,B){var P,O;for(;$<=B;++$){let L,q=Y[$];if(q!=null)if(q.sel!==void 0){k(q),L=W.remove.length+1;let R=U(q.elm,L);for(let T=0;T<W.remove.length;++T)W.remove[T](q,R);let M=(O=(P=q===null||q===void 0?void 0:q.data)===null||P===void 0?void 0:P.hook)===null||O===void 0?void 0:O.remove;if(M!==void 0)M(q,R);else R()}else if(q.children)k(q),g(J,q.children,0,q.children.length-1);else X.removeChild(J,q.elm)}}function C(J,Y,$,B){let P=0,O=0,L=Y.length-1,q=Y[0],R=Y[L],M=$.length-1,T=$[0],H=$[M],A,j,F,b;while(P<=L&&O<=M)if(q==null)q=Y[++P];else if(R==null)R=Y[--L];else if(T==null)T=$[++O];else if(H==null)H=$[--M];else if(w(q,T))Q(q,T,B),q=Y[++P],T=$[++O];else if(w(R,H))Q(R,H,B),R=Y[--L],H=$[--M];else if(w(q,H))Q(q,H,B),X.insertBefore(J,q.elm,X.nextSibling(R.elm)),q=Y[++P],H=$[--M];else if(w(R,T))Q(R,T,B),X.insertBefore(J,R.elm,q.elm),R=Y[--L],T=$[++O];else{if(A===void 0)A=Q0(Y,P,L);if(j=A[T.key],j===void 0)X.insertBefore(J,D(T,B),q.elm),T=$[++O];else if(A[H.key]===void 0)X.insertBefore(J,D(H,B),X.nextSibling(R.elm)),H=$[--M];else{if(F=Y[j],F.sel!==T.sel)X.insertBefore(J,D(T,B),q.elm);else Q(F,T,B),Y[j]=void 0,X.insertBefore(J,F.elm,q.elm);T=$[++O]}}if(O<=M)b=$[M+1]==null?null:$[M+1].elm,y(J,b,$,O,M,B);if(P<=L)g(J,Y,P,L)}function Q(J,Y,$){var B,P,O,L,q,R,M,T;let H=(B=Y.data)===null||B===void 0?void 0:B.hook;(P=H===null||H===void 0?void 0:H.prepatch)===null||P===void 0||P.call(H,J,Y);let A=Y.elm=J.elm;if(J===Y)return;if(Y.data!==void 0||Y.text!==void 0&&Y.text!==J.text){(O=Y.data)!==null&&O!==void 0||(Y.data={}),(L=J.data)!==null&&L!==void 0||(J.data={});for(let b=0;b<W.update.length;++b)W.update[b](J,Y);(M=(R=(q=Y.data)===null||q===void 0?void 0:q.hook)===null||R===void 0?void 0:R.update)===null||M===void 0||M.call(R,J,Y)}let j=J.children,F=Y.children;if(Y.text===void 0){if(j!==void 0&&F!==void 0){if(j!==F)C(A,j,F,$)}else if(F!==void 0){if(J.text!==void 0)X.setTextContent(A,"");y(A,null,F,0,F.length-1,$)}else if(j!==void 0)g(A,j,0,j.length-1);else if(J.text!==void 0)X.setTextContent(A,"")}else if(J.text!==Y.text){if(j!==void 0)g(A,j,0,j.length-1);X.setTextContent(A,Y.text)}(T=H===null||H===void 0?void 0:H.postpatch)===null||T===void 0||T.call(H,J,Y)}return function J(Y,$){let B,P,O,L=[];for(B=0;B<W.pre.length;++B)W.pre[B]();if(j0(X,Y))Y=Z(Y);else if(F0(X,Y))Y=K(Y);if(w(Y,$))Q(Y,$,L);else if(P=Y.elm,O=X.parentNode(P),D($,L),O!==null)X.insertBefore(O,$.elm,X.nextSibling(P)),g(O,[Y],0,0);for(B=0;B<L.length;++B)L[B].data.hook.insert(L[B]);for(B=0;B<W.post.length;++B)W.post[B]();return $}}var o=typeof(window===null||window===void 0?void 0:window.requestAnimationFrame)==="function"?window.requestAnimationFrame.bind(window):setTimeout,b0=(f)=>{o(()=>{o(f)})},c=!1;function k0(f,G,z){b0(()=>{f[G]=z})}function d(f,G){let z,W,X=G.elm,Z=f.data.style,K=G.data.style;if(!Z&&!K)return;if(Z===K)return;Z=Z||{},K=K||{};let U="delayed"in Z;for(W in Z)if(!(W in K))if(W[0]==="-"&&W[1]==="-")X.style.removeProperty(W);else X.style[W]="";for(W in K)if(z=K[W],W==="delayed"&&K.delayed){for(let D in K.delayed)if(z=K.delayed[D],!U||z!==Z.delayed[D])k0(X.style,D,z)}else if(W!=="remove"&&z!==Z[W])if(W[0]==="-"&&W[1]==="-")X.style.setProperty(W,z);else X.style[W]=z}function N0(f){let G,z,W=f.elm,X=f.data.style;if(!X||!(G=X.destroy))return;for(z in G)W.style[z]=G[z]}function S0(f,G){let z=f.data.style;if(!z||!z.remove){G();return}if(!c)f.elm.offsetLeft,c=!0;let W,X=f.elm,Z=0,K=z.remove,U=0,D=[];for(W in K)D.push(W),X.style[W]=K[W];let k=getComputedStyle(X)["transition-property"].split(", ");for(;Z<k.length;++Z)if(D.indexOf(k[Z])!==-1)U++;X.addEventListener("transitionend",(g)=>{if(g.target===X)--U;if(U===0)G()})}function y0(){c=!1}var e={pre:y0,create:d,update:d,destroy:N0,remove:S0};function f0(f,G){let z,W,X,Z=G.elm,K=f.data.props,U=G.data.props;if(!K&&!U)return;if(K===U)return;K=K||{},U=U||{};for(z in U)if(W=U[z],X=K[z],X!==W&&(z!=="value"||Z[z]!==W))Z[z]=W}var W0={create:f0,update:f0};function h(f,G,z){if(f.ns="http://www.w3.org/2000/svg",z!=="foreignObject"&&G!==void 0)for(let W=0;W<G.length;++W){let X=G[W];if(typeof X==="string")continue;let Z=X.data;if(Z!==void 0)h(Z,X.children,X.sel)}}function I0(f){return f.slice(5).replace(/-([a-z])/g,(G,z)=>z.toUpperCase())}function z0(f,G){var z;let W=G!==void 0?G:E,X;if(W.isElement(f)){let Z=f.id?"#"+f.id:"",K=(z=f.getAttribute("class"))===null||z===void 0?void 0:z.match(/[^\t\r\n\f ]+/g),U=K?"."+K.join("."):"",D=W.tagName(f).toLowerCase()+Z+U,y={},k={},g={},C=[],Q,J,Y,$=f.attributes,B=f.childNodes;for(J=0,Y=$.length;J<Y;J++)if(Q=$[J].nodeName,Q.startsWith("data-"))k[I0(Q)]=$[J].nodeValue||"";else if(Q!=="id"&&Q!=="class")y[Q]=$[J].nodeValue;for(J=0,Y=B.length;J<Y;J++)C.push(z0(B[J],G));if(Object.keys(y).length>0)g.attrs=y;if(Object.keys(k).length>0)g.dataset=k;if(D.startsWith("svg")&&(D.length===3||D[3]==="."||D[3]==="#"))h(g,C,D);return N(D,g,C,void 0,f)}else if(W.isText(f))return X=W.getTextContent(f),N(void 0,void 0,void 0,X,f);else if(W.isComment(f))return X=W.getTextContent(f),N("!",{},[],X,f);else return N("",{},[],void 0,f)}function o0(){return n([s,l,e,W0])}export{N as vnode,z0 as toVNode,o0 as initWithModules};
plum/src/Snabbdom.pursnew file+45
@@ -0,0 +1,45 @@
1+module Snabbdom (h, VNode, init, toVNode) where
2+
3+import Prelude
4+
5+import Data.Function.Uncurried (Fn4, runFn4)
6+import Effect (Effect)
7+import Effect.Uncurried (EffectFn1, EffectFn2, mkEffectFn1, runEffectFn2)
8+import Foreign.Object (Object)
9+import Literals.Undefined (Undefined)
10+import Untagged.Union (type (|+|))
11+import Web.DOM (Element)
12+import Web.Event.Event (Event)
13+
14+foreign import data VNode :: Type
15+
16+foreign import initWithModules :: Effect (EffectFn2 VNode VNode VNode)
17+
18+init :: Effect (VNode -> VNode -> Effect VNode)
19+init = initWithModules <#> runEffectFn2
20+
21+foreign import vnode :: forall props. Fn4 String (Record props) (Array VNode) (String |+| Undefined) VNode
22+
23+h
24+ :: String
25+ -> { attrs :: Object String
26+ , on :: Object (Event -> Effect Unit)
27+ , style :: Object String
28+ , props :: Object String
29+ }
30+ -> Array VNode
31+ -> (String |+| Undefined)
32+ -> VNode
33+h tag props children text = runFn4 vnode
34+ tag
35+ ( props { on = mkEffectFn1 <$> props.on }
36+ :: { attrs :: Object String
37+ , on :: Object (EffectFn1 Event Unit)
38+ , style :: Object String
39+ , props :: Object String
40+ }
41+ )
42+ children
43+ text
44+
45+foreign import toVNode :: Element -> VNode