hello-mynx/html.mx at main · monode-dev/hello-mynx · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
js"console.log(mx_wantLit(`Hello World`));"
constructHtmlElement[
  role:- "div"
  onClick: []: ()
  style: unstyledCss
  \children: [] \
]: JsObj !<< (
  \ We need to pass a non-reactive object to ".appendChild". \
  js"let newElement = document.createElement(`div`)"

  \ Element \
  js"newElement.onclick = onClick"
  \ newElement.role <= role \
  js"mx_watchWrite(
    role,
    (value) => {
      newElement.role = value;
    },
  );"

  \ Style \
  js"for (let [propKey, propVal] of Object.entries(mx_wantLit(style))) {
    mx_watchWrite(
      style[propKey],
      (value) => {
        newElement.style[propKey] = value;
      },
    );
  }"

  \ Children \
  \ js"mx_doOnChange(
    actionToDo: () => {
      // Remove previous children
      while (newElement.firstChild) {
        newElement.removeChild(newElement.firstChild);
      }
      //Add new children
      for (let child of mx_wantLit(children)) {
        newElement.appendChild(mx_wantLit(child));
      }
    },
    triggers: [children?.mx_onChange],
  );" \

  js"return newElement;"
)

colors: [
  white:- "#ffffffff"
  almostWhite:- "#f9fafdff"
  pink:- "#e91e63ff"
  red:- "#f44336ff"
  orange:- "#ff9800ff"
  yellow:- "#ffea00ff"
  green:- "#4caf50ff"
  teal:- "#009688ff"
  blue:- "#2196f3ff"
  purple:- "#9c27b0ff"
  brown:- "#795548ff"
  grey:- "#9e9e9eff"
  black:- "#000000ff"
  transparent:- "#ffffff00"
]

unstyledCss:- [
  display :- ""
  boxSizing :- ""
  width :- ""
  minWidth :- ""
  maxWidth :- ""
  height :- ""
  minHeight :- ""
  maxHeight :- ""
  flexBasis :- ""
  borderRadius :- ""
  \ border: "none" \
  outline :- ""
  outlineOffset :- ""
  backgroundColor :- ""
  boxShadow :- ""
  \ Padding \
  padding :- ""
  position :- ""
  \ margin :- "" \
  justifyContent :- ""
  alignItems :- ""
  flexDirection :- ""
  flexWrap :- ""
  overflowX :- ""
  overflowY :- ""
  scrollbarWidth :- ""
  scrollbarColor :- ""
  rowGap :- ""
  columnGap :- ""
  fontFamily :- ""
  fontSize :- ""
  fontWeight :- ""
  fontStyle :- ""
  textDecoration :- ""
  textAlign :- ""
  color:- ""
]
CssStyle: unstyledCss