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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Nicolas Gallagher.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/cjs/StyleSheet/__tests__/compiler-createReactDOMStyle-test.cjs

@@ -0,0 +1,265 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var import_createReactDOMStyle = __toESM(require("../compiler/createReactDOMStyle.cjs"), 1);
+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 = (0, import_createReactDOMStyle.default)(reactNativeStyle);
+    const secondStyle = (0, import_createReactDOMStyle.default)(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((0, import_createReactDOMStyle.default)(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((0, import_createReactDOMStyle.default)({
+      aspectRatio: 9 / 16
+    })).toEqual({
+      aspectRatio: "0.5625"
+    });
+  });
+  describe("flexbox styles", () => {
+    test("flex: -1", () => {
+      expect((0, import_createReactDOMStyle.default)({
+        flex: -1
+      })).toEqual({
+        flexGrow: 0,
+        flexShrink: 1,
+        flexBasis: "auto"
+      });
+    });
+    test("flex: 0", () => {
+      expect((0, import_createReactDOMStyle.default)({
+        flex: 0
+      })).toEqual({
+        flex: 0
+      });
+    });
+    test("flex: 1", () => {
+      expect((0, import_createReactDOMStyle.default)({
+        flex: 1
+      })).toEqual({
+        flex: 1
+      });
+    });
+    test("flex: 10", () => {
+      expect((0, import_createReactDOMStyle.default)({
+        flex: 10
+      })).toEqual({
+        flex: 10
+      });
+    });
+    test("flexBasis overrides", () => {
+      expect((0, import_createReactDOMStyle.default)({
+        flexBasis: "25%"
+      })).toEqual({
+        flexBasis: "25%"
+      });
+      expect((0, import_createReactDOMStyle.default)({
+        flex: 1,
+        flexBasis: "25%"
+      })).toEqual({
+        flex: 1,
+        flexBasis: "25%"
+      });
+    });
+    test("flexShrink overrides", () => {
+      expect((0, import_createReactDOMStyle.default)({
+        flexShrink: 1
+      })).toEqual({
+        flexShrink: 1
+      });
+      expect((0, import_createReactDOMStyle.default)({
+        flex: 1,
+        flexShrink: 2
+      })).toEqual({
+        flex: 1,
+        flexShrink: 2
+      });
+    });
+  });
+  describe("fontFamily", () => {
+    test("general case", () => {
+      expect((0, import_createReactDOMStyle.default)({
+        fontFamily: "Georgia, Times, serif"
+      })).toMatchInlineSnapshot(`
+        {
+          "fontFamily": "Georgia, Times, serif",
+        }
+      `);
+    });
+    test('"monospace"', () => {
+      expect((0, import_createReactDOMStyle.default)({
+        fontFamily: "monospace"
+      })).toMatchInlineSnapshot(`
+        {
+          "fontFamily": "monospace,monospace",
+        }
+      `);
+    });
+    test('"System"', () => {
+      expect((0, import_createReactDOMStyle.default)({
+        fontFamily: "System"
+      })).toMatchInlineSnapshot(`
+        {
+          "fontFamily": "-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif",
+        }
+      `);
+      expect((0, import_createReactDOMStyle.default)({
+        font: "14px System"
+      })).toMatchInlineSnapshot(`
+        {
+          "font": "14px -apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif",
+        }
+      `);
+    });
+    test('"Noto, System"', () => {
+      expect((0, import_createReactDOMStyle.default)({
+        fontFamily: "Noto, System"
+      })).toMatchInlineSnapshot(`
+        {
+          "fontFamily": "Noto,-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif",
+        }
+      `);
+      expect((0, import_createReactDOMStyle.default)({
+        font: "14px Noto, System"
+      })).toMatchInlineSnapshot(`
+        {
+          "font": "14px Noto, -apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif",
+        }
+      `);
+    });
+    test('"Noto, BlinkMacSystemFont"', () => {
+      expect((0, import_createReactDOMStyle.default)({
+        fontFamily: "Noto, BlinkMacSystemFont"
+      })).toMatchInlineSnapshot(`
+        {
+          "fontFamily": "Noto,BlinkMacSystemFont",
+        }
+      `);
+    });
+  });
+  test("fontVariant", () => {
+    expect((0, import_createReactDOMStyle.default)({
+      fontVariant: ["common-ligatures", "small-caps"]
+    })).toEqual({
+      fontVariant: "common-ligatures small-caps"
+    });
+  });
+  test("textAlignVertical", () => {
+    expect((0, import_createReactDOMStyle.default)({
+      textAlignVertical: "center"
+    })).toEqual({
+      verticalAlign: "middle"
+    });
+  });
+  describe("transform", () => {
+    test("string", () => {
+      const transform = "perspective(50px) scaleX(20) translateX(20px) rotate(20deg)";
+      const style = {
+        transform
+      };
+      const resolved = (0, import_createReactDOMStyle.default)(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 = (0, import_createReactDOMStyle.default)(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)"
+      });
+    });
+  });
+});

package/dist/cjs/StyleSheet/__tests__/compiler-test.cjs

@@ -0,0 +1,419 @@
+var import_compiler = require("../compiler/index.cjs");
+describe("StyleSheet/compile", () => {
+  describe("atomic", () => {
+    test("converts style to atomic CSS", () => {
+      const result = (0, import_compiler.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 = (0, import_compiler.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 = (0, import_compiler.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((0, import_compiler.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((0, import_compiler.inline)(initial, isRTL)).toEqual(initial);
+        });
+        test(`ignores "left" values for ${dir}`, () => {
+          const initial = {
+            clear: "left",
+            float: "left",
+            textAlign: "left",
+            transitionProperty: "left"
+          };
+          expect((0, import_compiler.inline)(initial, isRTL)).toEqual(initial);
+        });
+        test(`ignores "right" values for ${dir}`, () => {
+          const initial = {
+            clear: "right",
+            float: "right",
+            textAlign: "right",
+            transitionProperty: "right"
+          };
+          expect((0, import_compiler.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((0, import_compiler.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((0, import_compiler.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((0, import_compiler.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((0, import_compiler.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((0, import_compiler.inline)(isRTL ? initialRTL : initialLTR, isRTL)).toEqual(isRTL ? expectedRTL : expectedLTR);
+        });
+      });
+    });
+  });
+});