@hanzogui/react-native-web-internals 2.0.0-rc.41-hanzoai.5

package/dist/esm/StyleSheet/__tests__/compiler-createReactDOMStyle-test.mjs

@@ -0,0 +1,242 @@
+import createReactDOMStyle from "../compiler/createReactDOMStyle.mjs";
+const reactNativeStyle = {
+  boxShadow: "1px 1px 1px 1px #000",
+  borderWidthLeft: 2,
+  borderWidth: 1,
+  borderWidthRight: 3,
+  display: "flex",
+  marginVertical: 0,
+  opacity: 0,
+  shadowColor: "red",
+  shadowOffset: {
+    width: 1,
+    height: 2
+  },
+  resizeMode: "contain"
+};
+describe("compiler/createReactDOMStyle", () => {
+  test("noop on DOM styles", () => {
+    const firstStyle = createReactDOMStyle(reactNativeStyle);
+    const secondStyle = createReactDOMStyle(firstStyle);
+    expect(firstStyle).toEqual(secondStyle);
+  });
+  test("shortform -> longform for inline styles", () => {
+    const style = {
+      borderStyle: "solid",
+      boxSizing: "border-box",
+      borderBottomColor: "white",
+      borderBottomWidth: 1,
+      borderWidth: 0,
+      marginTop: 50,
+      marginVertical: 25,
+      margin: 10,
+      overflow: "hidden",
+      overscrollBehavior: "contain",
+      paddingLeft: 50,
+      paddingHorizontal: 25,
+      padding: 10
+    };
+    expect(createReactDOMStyle(style, true)).toMatchInlineSnapshot(`
+      {
+        "borderBottomColor": "rgba(255,255,255,1.00)",
+        "borderBottomStyle": "solid",
+        "borderBottomWidth": "1px",
+        "borderLeftStyle": "solid",
+        "borderLeftWidth": "0px",
+        "borderRightStyle": "solid",
+        "borderRightWidth": "0px",
+        "borderTopStyle": "solid",
+        "borderTopWidth": "0px",
+        "boxSizing": "border-box",
+        "marginBottom": "25px",
+        "marginLeft": "10px",
+        "marginRight": "10px",
+        "marginTop": "50px",
+        "overflowX": "hidden",
+        "overflowY": "hidden",
+        "overscrollBehaviorX": "contain",
+        "overscrollBehaviorY": "contain",
+        "paddingBottom": "10px",
+        "paddingLeft": "50px",
+        "paddingRight": "25px",
+        "paddingTop": "10px",
+      }
+    `);
+  });
+  test("aspectRatio", () => {
+    expect(createReactDOMStyle({
+      aspectRatio: 9 / 16
+    })).toEqual({
+      aspectRatio: "0.5625"
+    });
+  });
+  describe("flexbox styles", () => {
+    test("flex: -1", () => {
+      expect(createReactDOMStyle({
+        flex: -1
+      })).toEqual({
+        flexGrow: 0,
+        flexShrink: 1,
+        flexBasis: "auto"
+      });
+    });
+    test("flex: 0", () => {
+      expect(createReactDOMStyle({
+        flex: 0
+      })).toEqual({
+        flex: 0
+      });
+    });
+    test("flex: 1", () => {
+      expect(createReactDOMStyle({
+        flex: 1
+      })).toEqual({
+        flex: 1
+      });
+    });
+    test("flex: 10", () => {
+      expect(createReactDOMStyle({
+        flex: 10
+      })).toEqual({
+        flex: 10
+      });
+    });
+    test("flexBasis overrides", () => {
+      expect(createReactDOMStyle({
+        flexBasis: "25%"
+      })).toEqual({
+        flexBasis: "25%"
+      });
+      expect(createReactDOMStyle({
+        flex: 1,
+        flexBasis: "25%"
+      })).toEqual({
+        flex: 1,
+        flexBasis: "25%"
+      });
+    });
+    test("flexShrink overrides", () => {
+      expect(createReactDOMStyle({
+        flexShrink: 1
+      })).toEqual({
+        flexShrink: 1
+      });
+      expect(createReactDOMStyle({
+        flex: 1,
+        flexShrink: 2
+      })).toEqual({
+        flex: 1,
+        flexShrink: 2
+      });
+    });
+  });
+  describe("fontFamily", () => {
+    test("general case", () => {
+      expect(createReactDOMStyle({
+        fontFamily: "Georgia, Times, serif"
+      })).toMatchInlineSnapshot(`
+        {
+          "fontFamily": "Georgia, Times, serif",
+        }
+      `);
+    });
+    test('"monospace"', () => {
+      expect(createReactDOMStyle({
+        fontFamily: "monospace"
+      })).toMatchInlineSnapshot(`
+        {
+          "fontFamily": "monospace,monospace",
+        }
+      `);
+    });
+    test('"System"', () => {
+      expect(createReactDOMStyle({
+        fontFamily: "System"
+      })).toMatchInlineSnapshot(`
+        {
+          "fontFamily": "-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif",
+        }
+      `);
+      expect(createReactDOMStyle({
+        font: "14px System"
+      })).toMatchInlineSnapshot(`
+        {
+          "font": "14px -apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif",
+        }
+      `);
+    });
+    test('"Noto, System"', () => {
+      expect(createReactDOMStyle({
+        fontFamily: "Noto, System"
+      })).toMatchInlineSnapshot(`
+        {
+          "fontFamily": "Noto,-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif",
+        }
+      `);
+      expect(createReactDOMStyle({
+        font: "14px Noto, System"
+      })).toMatchInlineSnapshot(`
+        {
+          "font": "14px Noto, -apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif",
+        }
+      `);
+    });
+    test('"Noto, BlinkMacSystemFont"', () => {
+      expect(createReactDOMStyle({
+        fontFamily: "Noto, BlinkMacSystemFont"
+      })).toMatchInlineSnapshot(`
+        {
+          "fontFamily": "Noto,BlinkMacSystemFont",
+        }
+      `);
+    });
+  });
+  test("fontVariant", () => {
+    expect(createReactDOMStyle({
+      fontVariant: ["common-ligatures", "small-caps"]
+    })).toEqual({
+      fontVariant: "common-ligatures small-caps"
+    });
+  });
+  test("textAlignVertical", () => {
+    expect(createReactDOMStyle({
+      textAlignVertical: "center"
+    })).toEqual({
+      verticalAlign: "middle"
+    });
+  });
+  describe("transform", () => {
+    test("string", () => {
+      const transform = "perspective(50px) scaleX(20) translateX(20px) rotate(20deg)";
+      const style = {
+        transform
+      };
+      const resolved = createReactDOMStyle(style);
+      expect(resolved).toEqual({
+        transform
+      });
+    });
+    test("array", () => {
+      const style = {
+        transform: [{
+          perspective: 50
+        }, {
+          scaleX: 20
+        }, {
+          translateX: 20
+        }, {
+          rotate: "20deg"
+        }, {
+          matrix: [1, 2, 3, 4, 5, 6]
+        }, {
+          matrix3d: [1, 1, 1, 1, 2, 2, 2, 2, 3, 3, 3, 3, 4, 4, 4, 4]
+        }]
+      };
+      const resolved = createReactDOMStyle(style);
+      expect(resolved).toEqual({
+        transform: "perspective(50px) scaleX(20) translateX(20px) rotate(20deg) matrix(1,2,3,4,5,6) matrix3d(1,1,1,1,2,2,2,2,3,3,3,3,4,4,4,4)"
+      });
+    });
+  });
+});
+//# sourceMappingURL=compiler-createReactDOMStyle-test.mjs.map

package/dist/esm/StyleSheet/__tests__/compiler-createReactDOMStyle-test.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["createReactDOMStyle","reactNativeStyle","boxShadow","borderWidthLeft","borderWidth","borderWidthRight","display","marginVertical","opacity","shadowColor","shadowOffset","width","height","resizeMode","describe","test","firstStyle","secondStyle","expect","toEqual","style","borderStyle","boxSizing","borderBottomColor","borderBottomWidth","marginTop","margin","overflow","overscrollBehavior","paddingLeft","paddingHorizontal","padding","toMatchInlineSnapshot","aspectRatio","flex","flexGrow","flexShrink","flexBasis","fontFamily","font","fontVariant","textAlignVertical","verticalAlign","transform","resolved","perspective","scaleX","translateX","rotate","matrix","matrix3d"],"sources":["../../../../src/StyleSheet/__tests__/compiler-createReactDOMStyle-test.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/StyleSheet/__tests__/compiler-test.mjs

@@ -0,0 +1,420 @@
+import { atomic, classic, inline } from "../compiler/index.mjs";
+describe("StyleSheet/compile", () => {
+  describe("atomic", () => {
+    test("converts style to atomic CSS", () => {
+      const result = atomic({
+        animationDirection: ["alternate", "alternate-reverse"],
+        animationKeyframes: [{
+          "0%": {
+            top: 0
+          },
+          "50%": {
+            top: 5
+          },
+          "100%": {
+            top: 10
+          }
+        }, {
+          from: {
+            left: 0
+          },
+          to: {
+            left: 10
+          }
+        }],
+        fontFamily: "System",
+        marginHorizontal: 10,
+        marginStart: 1,
+        marginEnd: 2,
+        placeholderTextColor: "gray",
+        scrollbarWidth: "none",
+        pointerEvents: "box-only",
+        start: "12.34%",
+        textAlign: "start",
+        transform: [{
+          translateX: 50,
+          scale: -1
+        }]
+      });
+      expect(result).toMatchInlineSnapshot(`
+        [
+          {
+            "$$css": true,
+            "$$css$localize": true,
+            "animationDirection": "r-animationDirection-1kmv48j",
+            "animationKeyframes": "r-animationKeyframes-zacbmr",
+            "fontFamily": "r-fontFamily-1qd0xha",
+            "marginEnd": [
+              "r-marginRight-a5pmau",
+              "r-marginLeft-9cviqr",
+            ],
+            "marginHorizontal": "r-marginHorizontal-vlx1xi",
+            "marginStart": [
+              "r-marginLeft-13kc5u0",
+              "r-marginRight-1knfw1x",
+            ],
+            "placeholderTextColor": "r-placeholderTextColor-1418aci",
+            "pointerEvents": "r-pointerEvents-ah5dr5",
+            "scrollbarWidth": "r-scrollbarWidth-2eszeu",
+            "start": [
+              "r-left-2s0hu9",
+              "r-right-1bnbe1j",
+            ],
+            "textAlign": [
+              "r-textAlign-fdjqy7",
+              "r-textAlign-1ff274t",
+            ],
+            "transform": "r-transform-1ehiua4",
+          },
+          [
+            [
+              [
+                ".r-animationDirection-1kmv48j{animation-direction:alternate,alternate-reverse;}",
+              ],
+              2.2,
+            ],
+            [
+              [
+                ".r-animationKeyframes-zacbmr{animation-name:r-animation-8jhqzh,r-animation-5azpl5;}",
+                "@-webkit-keyframes r-animation-8jhqzh{0%{top:0px;}50%{top:5px;}100%{top:10px;}}",
+                "@keyframes r-animation-8jhqzh{0%{top:0px;}50%{top:5px;}100%{top:10px;}}",
+                "@-webkit-keyframes r-animation-5azpl5{from{left:0px;}to{left:10px;}}",
+                "@keyframes r-animation-5azpl5{from{left:0px;}to{left:10px;}}",
+              ],
+              2.2,
+            ],
+            [
+              [
+                ".r-fontFamily-1qd0xha{font-family:-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif;}",
+              ],
+              2.2,
+            ],
+            [
+              [
+                ".r-marginRight-a5pmau{margin-right:2px;}",
+              ],
+              2.2,
+            ],
+            [
+              [
+                ".r-marginLeft-9cviqr{margin-left:2px;}",
+              ],
+              2.2,
+            ],
+            [
+              [
+                ".r-marginHorizontal-vlx1xi{margin-left:10px;margin-right:10px;}",
+              ],
+              2.1,
+            ],
+            [
+              [
+                ".r-marginLeft-13kc5u0{margin-left:1px;}",
+              ],
+              2.2,
+            ],
+            [
+              [
+                ".r-marginRight-1knfw1x{margin-right:1px;}",
+              ],
+              2.2,
+            ],
+            [
+              [
+                ".r-placeholderTextColor-1418aci::-webkit-input-placeholder{color:rgba(128,128,128,1.00);opacity:1;}",
+                ".r-placeholderTextColor-1418aci::-moz-placeholder{color:rgba(128,128,128,1.00);opacity:1;}",
+                ".r-placeholderTextColor-1418aci:-ms-input-placeholder{color:rgba(128,128,128,1.00);opacity:1;}",
+                ".r-placeholderTextColor-1418aci::placeholder{color:rgba(128,128,128,1.00);opacity:1;}",
+              ],
+              2.2,
+            ],
+            [
+              [
+                ".r-pointerEvents-ah5dr5>*{pointer-events:none;}",
+                ".r-pointerEvents-ah5dr5{pointer-events:auto!important;}",
+              ],
+              2.2,
+            ],
+            [
+              [
+                ".r-scrollbarWidth-2eszeu::-webkit-scrollbar{display:none}",
+                ".r-scrollbarWidth-2eszeu{scrollbar-width:none;}",
+              ],
+              2.2,
+            ],
+            [
+              [
+                ".r-left-2s0hu9{left:12.34%;}",
+              ],
+              2.2,
+            ],
+            [
+              [
+                ".r-right-1bnbe1j{right:12.34%;}",
+              ],
+              2.2,
+            ],
+            [
+              [
+                ".r-textAlign-fdjqy7{text-align:left;}",
+              ],
+              2.2,
+            ],
+            [
+              [
+                ".r-textAlign-1ff274t{text-align:right;}",
+              ],
+              2.2,
+            ],
+            [
+              [
+                ".r-transform-1ehiua4{transform:translateX(50px);}",
+              ],
+              2.2,
+            ],
+          ],
+        ]
+      `);
+    });
+  });
+  describe("classic", () => {
+    test("converts style to classic CSS", () => {
+      const result = classic({
+        animationDirection: ["alternate", "alternate-reverse"],
+        animationKeyframes: [{
+          "0%": {
+            top: 0
+          },
+          "50%": {
+            top: 5
+          },
+          "100%": {
+            top: 10
+          }
+        }, {
+          from: {
+            left: 0
+          },
+          to: {
+            left: 10
+          }
+        }],
+        marginHorizontal: 10,
+        font: "14px System",
+        transform: [{
+          translateX: 50,
+          scale: -1
+        }]
+      }, "text");
+      expect(result).toMatchInlineSnapshot(`
+        [
+          {
+            "$$css": true,
+            "css-text-1jr0ypv": "css-text-1jr0ypv",
+          },
+          [
+            [
+              [
+                "@-webkit-keyframes r-animation-8jhqzh{0%{top:0px;}50%{top:5px;}100%{top:10px;}}",
+                "@keyframes r-animation-8jhqzh{0%{top:0px;}50%{top:5px;}100%{top:10px;}}",
+                "@-webkit-keyframes r-animation-5azpl5{from{left:0px;}to{left:10px;}}",
+                "@keyframes r-animation-5azpl5{from{left:0px;}to{left:10px;}}",
+                ".css-text-1jr0ypv{animation-direction:alternate,alternate-reverse;animation-name:r-animation-8jhqzh,r-animation-5azpl5;font:14px -apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif;margin-left:10px;margin-right:10px;transform:translateX(50px);}",
+              ],
+              1,
+            ],
+          ],
+        ]
+      `);
+    });
+  });
+  describe("inline", () => {
+    test("converts style to inline styles", () => {
+      const result = inline({
+        marginHorizontal: 10,
+        display: "flex",
+        flexShrink: 1
+      });
+      expect(result).toMatchInlineSnapshot(`
+        {
+          "display": "flex",
+          "flexShrink": 1,
+          "marginLeft": "10px",
+          "marginRight": "10px",
+        }
+      `);
+    });
+    describe("logical style polyfill", () => {
+      ;
+      [false, true].forEach(isRTL => {
+        const dir = isRTL ? "rtl" : "ltr";
+        test(`ignores "left" properties for ${dir}`, () => {
+          const initial = {
+            borderLeftColor: "rgba(255,0,0,1.00)",
+            borderLeftStyle: "solid",
+            borderLeftWidth: "1px",
+            left: "1px",
+            marginLeft: "5px",
+            paddingLeft: "10px"
+          };
+          expect(inline(initial, isRTL)).toEqual(initial);
+        });
+        test(`ignores "right" properties for ${dir}`, () => {
+          const initial = {
+            borderRightColor: "rgba(255,0,0,1.00)",
+            borderRightStyle: "solid",
+            borderRightWidth: "1px",
+            right: "1px",
+            marginRight: "5px",
+            paddingRight: "10px"
+          };
+          expect(inline(initial, isRTL)).toEqual(initial);
+        });
+        test(`ignores "left" values for ${dir}`, () => {
+          const initial = {
+            clear: "left",
+            float: "left",
+            textAlign: "left",
+            transitionProperty: "left"
+          };
+          expect(inline(initial, isRTL)).toEqual(initial);
+        });
+        test(`ignores "right" values for ${dir}`, () => {
+          const initial = {
+            clear: "right",
+            float: "right",
+            textAlign: "right",
+            transitionProperty: "right"
+          };
+          expect(inline(initial, isRTL)).toEqual(initial);
+        });
+        test(`converts "start" properties for ${dir}`, () => {
+          const initial = {
+            borderStartColor: "red",
+            borderStartStyle: "solid",
+            borderStartWidth: 1,
+            start: 1,
+            marginStart: 5,
+            paddingStart: 10
+          };
+          const expectedLTR = {
+            borderLeftColor: "rgba(255,0,0,1.00)",
+            borderLeftStyle: "solid",
+            borderLeftWidth: "1px",
+            left: "1px",
+            marginLeft: "5px",
+            paddingLeft: "10px"
+          };
+          const expectedRTL = {
+            borderRightColor: "rgba(255,0,0,1.00)",
+            borderRightStyle: "solid",
+            borderRightWidth: "1px",
+            right: "1px",
+            marginRight: "5px",
+            paddingRight: "10px"
+          };
+          expect(inline(initial, isRTL)).toEqual(isRTL ? expectedRTL : expectedLTR);
+        });
+        test(`converts "end" properties for ${dir}`, () => {
+          const initial = {
+            borderEndColor: "red",
+            borderEndStyle: "solid",
+            borderEndWidth: 1,
+            end: 1,
+            marginEnd: 5,
+            paddingEnd: 10
+          };
+          const expectedLTR = {
+            borderRightColor: "rgba(255,0,0,1.00)",
+            borderRightStyle: "solid",
+            borderRightWidth: "1px",
+            right: "1px",
+            marginRight: "5px",
+            paddingRight: "10px"
+          };
+          const expectedRTL = {
+            borderLeftColor: "rgba(255,0,0,1.00)",
+            borderLeftStyle: "solid",
+            borderLeftWidth: "1px",
+            left: "1px",
+            marginLeft: "5px",
+            paddingLeft: "10px"
+          };
+          expect(inline(initial, isRTL)).toEqual(isRTL ? expectedRTL : expectedLTR);
+        });
+        test(`converts "start" values for ${dir}`, () => {
+          const initial = {
+            clear: "start",
+            float: "start",
+            textAlign: "start",
+            transitionProperty: "start"
+          };
+          const expectedLTR = {
+            clear: "left",
+            float: "left",
+            textAlign: "left",
+            transitionProperty: "left"
+          };
+          const expectedRTL = {
+            clear: "right",
+            float: "right",
+            textAlign: "right",
+            transitionProperty: "right"
+          };
+          expect(inline(initial, isRTL)).toEqual(isRTL ? expectedRTL : expectedLTR);
+        });
+        test(`converts "end" values for ${dir}`, () => {
+          const initial = {
+            clear: "end",
+            float: "end",
+            textAlign: "end",
+            transitionProperty: "end"
+          };
+          const expectedLTR = {
+            clear: "right",
+            float: "right",
+            textAlign: "right",
+            transitionProperty: "right"
+          };
+          const expectedRTL = {
+            clear: "left",
+            float: "left",
+            textAlign: "left",
+            transitionProperty: "left"
+          };
+          expect(inline(initial, isRTL)).toEqual(isRTL ? expectedRTL : expectedLTR);
+        });
+        test("end/start properties take precedence over left/right", () => {
+          const initialLTR = {
+            borderStartWidth: 10,
+            borderLeftWidth: 0,
+            end: 10,
+            right: 0,
+            marginStart: 10,
+            marginLeft: 0
+          };
+          const expectedLTR = {
+            borderLeftWidth: "10px",
+            marginLeft: "10px",
+            right: "10px"
+          };
+          const initialRTL = {
+            borderStartWidth: 10,
+            borderRightWidth: 0,
+            end: 10,
+            left: 0,
+            marginStart: 10,
+            marginRight: 0
+          };
+          const expectedRTL = {
+            borderRightWidth: "10px",
+            marginRight: "10px",
+            left: "10px"
+          };
+          expect(inline(isRTL ? initialRTL : initialLTR, isRTL)).toEqual(isRTL ? expectedRTL : expectedLTR);
+        });
+      });
+    });
+  });
+});
+//# sourceMappingURL=compiler-test.mjs.map

package/dist/esm/StyleSheet/__tests__/compiler-test.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["atomic","classic","inline","describe","test","result","animationDirection","animationKeyframes","top","from","left","to","fontFamily","marginHorizontal","marginStart","marginEnd","placeholderTextColor","scrollbarWidth","pointerEvents","start","textAlign","transform","translateX","scale","expect","toMatchInlineSnapshot","font","display","flexShrink","forEach","isRTL","dir","initial","borderLeftColor","borderLeftStyle","borderLeftWidth","marginLeft","paddingLeft","toEqual","borderRightColor","borderRightStyle","borderRightWidth","right","marginRight","paddingRight","clear","float","transitionProperty","borderStartColor","borderStartStyle","borderStartWidth","paddingStart","expectedLTR","expectedRTL","borderEndColor","borderEndStyle","borderEndWidth","end","paddingEnd","initialLTR","initialRTL"],"sources":["../../../../src/StyleSheet/__tests__/compiler-test.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}