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

package/dist/esm/modules/useMergeRefs/__tests__/index-test.mjs

@@ -0,0 +1,102 @@
+import { cleanup, render } from "@testing-library/react";
+import * as React from "react";
+import { act } from "react-dom/test-utils";
+import useMergeRefs from "../index.mjs";
+import { jsx } from "react/jsx-runtime";
+describe("modules/useMergeRefs/index.js", () => {
+  function TestComponent({
+    refs,
+    ...rest
+  }) {
+    const mergedRef = useMergeRefs(...refs);
+    return /* @__PURE__ */jsx("div", {
+      ref: mergedRef,
+      ...rest
+    });
+  }
+  afterEach(cleanup);
+  test("handles no refs", () => {
+    act(() => {
+      render(/* @__PURE__ */jsx(TestComponent, {
+        refs: []
+      }));
+    });
+  });
+  test("merges any number of varying refs", () => {
+    const callbackRef1 = jest.fn();
+    const callbackRef2 = jest.fn();
+    const objectRef1 = React.createRef();
+    const objectRef2 = React.createRef();
+    const nullRef = null;
+    act(() => {
+      render(/* @__PURE__ */jsx(TestComponent, {
+        refs: [callbackRef1, callbackRef2, objectRef1, objectRef2, nullRef]
+      }));
+    });
+    expect(callbackRef1).toHaveBeenCalledTimes(1);
+    expect(callbackRef2).toHaveBeenCalledTimes(1);
+    expect(objectRef1.current).toBeInstanceOf(HTMLDivElement);
+    expect(objectRef2.current).toBeInstanceOf(HTMLDivElement);
+  });
+  test("ref is called when ref changes", () => {
+    const ref = jest.fn();
+    const nextRef = jest.fn();
+    let rerender;
+    act(() => {
+      ;
+      ({
+        rerender
+      } = render(/* @__PURE__ */jsx(TestComponent, {
+        refs: [ref]
+      })));
+    });
+    expect(ref).toHaveBeenCalled();
+    act(() => {
+      rerender(/* @__PURE__ */jsx(TestComponent, {
+        refs: [nextRef]
+      }));
+    });
+    expect(nextRef).toHaveBeenCalled();
+  });
+  test("ref is not called for each rerender", () => {
+    const ref = jest.fn();
+    let rerender;
+    act(() => {
+      ;
+      ({
+        rerender
+      } = render(/* @__PURE__ */jsx(TestComponent, {
+        refs: [ref]
+      })));
+    });
+    expect(ref).toHaveBeenCalledTimes(1);
+    act(() => {
+      rerender(/* @__PURE__ */jsx(TestComponent, {
+        refs: [ref]
+      }));
+    });
+    expect(ref).toHaveBeenCalledTimes(1);
+  });
+  test("ref is not called for props changes", () => {
+    const ref = jest.fn();
+    let rerender;
+    act(() => {
+      ;
+      ({
+        rerender
+      } = render(/* @__PURE__ */jsx(TestComponent, {
+        id: "foo",
+        refs: [ref]
+      })));
+    });
+    expect(ref).toHaveBeenCalledTimes(1);
+    act(() => {
+      rerender(/* @__PURE__ */jsx(TestComponent, {
+        id: "bar",
+        refs: [ref]
+      }));
+    });
+    expect(ref).toHaveBeenCalledTimes(1);
+  });
+});
+//# sourceMappingURL=index-test.mjs.map

package/dist/esm/modules/useMergeRefs/__tests__/index-test.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["cleanup","render","React","act","useMergeRefs","jsx","describe","TestComponent","refs","rest","mergedRef","ref","afterEach","test","callbackRef1","jest","fn","callbackRef2","objectRef1","createRef","objectRef2","nullRef","expect","toHaveBeenCalledTimes","current","toBeInstanceOf","HTMLDivElement","nextRef","rerender","toHaveBeenCalled","id"],"sources":["../../../../../src/modules/useMergeRefs/__tests__/index-test.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/modules/useMergeRefs/index.mjs

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { mergeRefs } from "../mergeRefs/index.mjs";
+function useMergeRefs(...args) {
+  return React.useMemo(() => mergeRefs(...args),
+  // eslint-disable-next-line
+  [...args]);
+}
+export { useMergeRefs };
+//# sourceMappingURL=index.mjs.map

package/dist/esm/modules/useMergeRefs/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","mergeRefs","useMergeRefs","args","useMemo"],"sources":["../../../../src/modules/useMergeRefs/index.tsx"],"sourcesContent":[null],"mappings":"AASA,YAAYA,KAAA,MAAW;AAEvB,SAASC,SAAA,QAAiB;AAEnB,SAASC,aAAA,GACXC,IAAA,EACiC;EACpC,OAAOH,KAAA,CAAMI,OAAA,CACX,MAAMH,SAAA,CAAU,GAAGE,IAAI;EAAA;EAEvB,CAAC,GAAGA,IAAI,CACV;AACF","ignoreList":[]}

package/dist/esm/modules/usePlatformMethods/index.mjs

@@ -0,0 +1,17 @@
+import { createMeasure, createMeasureInWindow, createMeasureLayout } from "@hanzogui/use-element-layout";
+import { useStable } from "../useStable/index.mjs";
+function usePlatformMethods({
+  pointerEvents,
+  style
+}) {
+  const ref = useStable(() => hostNode => {
+    if (hostNode != null) {
+      hostNode.measure = createMeasure(hostNode);
+      hostNode.measureLayout = createMeasureLayout(hostNode);
+      hostNode.measureInWindow = createMeasureInWindow(hostNode);
+    }
+  });
+  return ref;
+}
+export { usePlatformMethods };
+//# sourceMappingURL=index.mjs.map

package/dist/esm/modules/usePlatformMethods/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["createMeasure","createMeasureInWindow","createMeasureLayout","useStable","usePlatformMethods","pointerEvents","style","ref","hostNode","measure","measureLayout","measureInWindow"],"sources":["../../../../src/modules/usePlatformMethods/index.tsx"],"sourcesContent":[null],"mappings":"AASA,SACEA,aAAA,EACAC,qBAAA,EACAC,mBAAA,QACK;AAEP,SAASC,SAAA,QAAiB;AAMnB,SAASC,mBAAmB;EACjCC,aAAA;EACAC;AACF,GAG4B;EAG1B,MAAMC,GAAA,GAAMJ,SAAA,CAAU,MAAOK,QAAA,IAAkB;IAC7C,IAAIA,QAAA,IAAY,MAAM;MACpBA,QAAA,CAASC,OAAA,GAAUT,aAAA,CAAcQ,QAAQ;MACzCA,QAAA,CAASE,aAAA,GAAgBR,mBAAA,CAAoBM,QAAQ;MACrDA,QAAA,CAASG,eAAA,GAAkBV,qBAAA,CAAsBO,QAAQ;IAC3D;EACF,CAAC;EAED,OAAOD,GAAA;AACT","ignoreList":[]}

package/dist/esm/modules/useStable/__tests__/index-test.mjs

@@ -0,0 +1,99 @@
+import * as ReactDOM from "react-dom";
+import { act } from "react-dom/test-utils";
+import useStable from "../index.mjs";
+import { jsx } from "react/jsx-runtime";
+function createRoot(rootNode) {
+  return {
+    render(element) {
+      ReactDOM.render(element, rootNode);
+    }
+  };
+}
+describe("useStable", () => {
+  let root;
+  let rootNode;
+  let spy = {};
+  const TestComponent = ({
+    initialValueCallback
+  }) => {
+    const value = useStable(initialValueCallback);
+    spy.value = value;
+    return null;
+  };
+  beforeEach(() => {
+    spy = {};
+    rootNode = document.createElement("div");
+    document.body.appendChild(rootNode);
+    root = createRoot(rootNode);
+  });
+  afterEach(() => {
+    root.render(null);
+    document.body.removeChild(rootNode);
+    rootNode = null;
+    root = null;
+  });
+  test("correctly sets the initial value", () => {
+    const initialValueCallback = () => 5;
+    act(() => {
+      root.render(/* @__PURE__ */jsx(TestComponent, {
+        initialValueCallback
+      }));
+    });
+    expect(spy.value).toBe(5);
+  });
+  test("does not change the value", () => {
+    let counter = 0;
+    const initialValueCallback = () => counter++;
+    act(() => {
+      root.render(/* @__PURE__ */jsx(TestComponent, {
+        initialValueCallback
+      }));
+    });
+    expect(spy.value).toBe(0);
+    act(() => {
+      root.render(/* @__PURE__ */jsx(TestComponent, {
+        initialValueCallback
+      }));
+    });
+    expect(spy.value).toBe(0);
+  });
+  test("only calls the callback once", () => {
+    let counter = 0;
+    const initialValueCallback = () => counter++;
+    act(() => {
+      root.render(/* @__PURE__ */jsx(TestComponent, {
+        initialValueCallback
+      }));
+    });
+    expect(counter).toBe(1);
+    act(() => {
+      root.render(/* @__PURE__ */jsx(TestComponent, {
+        initialValueCallback
+      }));
+    });
+    expect(counter).toBe(1);
+  });
+  test("does not change the value if the callback initially returns null", () => {
+    let counter = 0;
+    const initialValueCallback = () => {
+      if (counter === 0) {
+        counter++;
+        return null;
+      }
+      return counter++;
+    };
+    act(() => {
+      root.render(/* @__PURE__ */jsx(TestComponent, {
+        initialValueCallback
+      }));
+    });
+    expect(spy.value).toBe(null);
+    act(() => {
+      root.render(/* @__PURE__ */jsx(TestComponent, {
+        initialValueCallback
+      }));
+    });
+    expect(spy.value).toBe(null);
+  });
+});
+//# sourceMappingURL=index-test.mjs.map

package/dist/esm/modules/useStable/__tests__/index-test.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["ReactDOM","act","useStable","jsx","createRoot","rootNode","render","element","describe","root","spy","TestComponent","initialValueCallback","value","beforeEach","document","createElement","body","appendChild","afterEach","removeChild","test","expect","toBe","counter"],"sources":["../../../../../src/modules/useStable/__tests__/index-test.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/modules/useStable/index.mjs

@@ -0,0 +1,11 @@
+import * as React from "react";
+const UNINITIALIZED = typeof Symbol === "function" && typeof /* @__PURE__ */Symbol() === "symbol" ? /* @__PURE__ */Symbol() : Object.freeze({});
+function useStable(getInitialValue) {
+  const ref = React.useRef(UNINITIALIZED);
+  if (ref.current === UNINITIALIZED) {
+    ref.current = getInitialValue();
+  }
+  return ref.current;
+}
+export { useStable };
+//# sourceMappingURL=index.mjs.map

package/dist/esm/modules/useStable/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","UNINITIALIZED","Symbol","Object","freeze","useStable","getInitialValue","ref","useRef","current"],"sources":["../../../../src/modules/useStable/index.tsx"],"sourcesContent":[null],"mappings":"AASA,YAAYA,KAAA,MAAW;AAEvB,MAAMC,aAAA,GACJ,OAAOC,MAAA,KAAW,cAAc,OAAO,eAAAA,MAAA,CAAO,MAAM,WAChD,eAAAA,MAAA,CAAO,IACPC,MAAA,CAAOC,MAAA,CAAO,CAAC,CAAC;AAEf,SAASC,UAAaC,eAAA,EAA6B;EACxD,MAAMC,GAAA,GAAMP,KAAA,CAAMQ,MAAA,CAAYP,aAAa;EAC3C,IAAIM,GAAA,CAAIE,OAAA,KAAYR,aAAA,EAAe;IACjCM,GAAA,CAAIE,OAAA,GAAUH,eAAA,CAAgB;EAChC;EAEA,OAAOC,GAAA,CAAIE,OAAA;AACb","ignoreList":[]}

package/dist/esm/styleTypes.mjs

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=styleTypes.mjs.map

package/dist/esm/styleTypes.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":[],"sourcesContent":[],"mappings":"","ignoreList":[]}

package/dist/esm/types.mjs

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=types.mjs.map

package/dist/esm/types.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":[],"sourcesContent":[],"mappings":"","ignoreList":[]}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@hanzogui/react-native-web-internals",
+  "version": "2.0.0-rc.41-hanzoai.5",
+  "description": "React Native for Web",
+  "keywords": [
+    "react",
+    "react-component",
+    "react-native",
+    "web"
+  ],
+  "license": "MIT",
+  "files": [
+    "types",
+    "dist",
+    "src"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "main": "dist/cjs",
+  "module": "dist/esm",
+  "typings": "./types/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./types/index.d.ts",
+      "browser": "./dist/esm/index.mjs",
+      "module": "./dist/esm/index.mjs",
+      "import": "./dist/esm/index.mjs",
+      "require": "./dist/cjs/index.cjs"
+    }
+  },
+  "scripts": {
+    "build": "hanzogui-build --skip-native",
+    "watch": "hanzogui-build --skip-native --watch",
+    "clean": "hanzogui-build clean",
+    "clean:build": "hanzogui-build clean:build"
+  },
+  "dependencies": {
+    "@hanzogui/normalize-css-color": "2.0.0-rc.41-hanzoai.5",
+    "@hanzogui/react-native-use-pressable": "2.0.0-rc.41-hanzoai.5",
+    "@hanzogui/react-native-use-responder-events": "2.0.0-rc.41-hanzoai.5",
+    "@hanzogui/simple-hash": "2.0.0-rc.41-hanzoai.5",
+    "@hanzogui/use-element-layout": "2.0.0-rc.41-hanzoai.5",
+    "@hanzogui/web": "2.0.0-rc.41-hanzoai.5"
+  },
+  "devDependencies": {
+    "@hanzogui/build": "2.0.0-rc.41-hanzoai.5",
+    "react": ">=19",
+    "react-dom": "*"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": "*"
+  },
+  "tags": [
+    "react"
+  ]
+}

package/src/StyleSheet/__tests__/compiler-createReactDOMStyle-test.tsx

@@ -0,0 +1,236 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import createReactDOMStyle from '../compiler/createReactDOMStyle'
+
+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', () => {
+      // is flex-basis applied?
+      expect(createReactDOMStyle({ flexBasis: '25%' })).toEqual({
+        flexBasis: '25%',
+      })
+
+      // can flex-basis override the 'flex' expansion?
+      expect(createReactDOMStyle({ flex: 1, flexBasis: '25%' })).toEqual({
+        flex: 1,
+        flexBasis: '25%',
+      })
+    })
+
+    test('flexShrink overrides', () => {
+      // is flex-shrink applied?
+      expect(createReactDOMStyle({ flexShrink: 1 })).toEqual({
+        flexShrink: 1,
+      })
+
+      // can flex-shrink override the 'flex' expansion?
+      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', () => {
+    // passthrough if transform value is ever a string
+    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)',
+      })
+    })
+  })
+})