@hanzogui/react-native-web-internals 2.0.0

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":"AAUA,YAAYA,QAAA,MAAc;AAC1B,SAASC,GAAA,QAAW;AAEpB,OAAOC,SAAA,MAAe;AAsCJ,SAAAC,GAAA;AApClB,SAASC,WAAWC,QAAA,EAAU;EAC5B,OAAO;IACLC,OAAOC,OAAA,EAAS;MACdP,QAAA,CAASM,MAAA,CAAOC,OAAA,EAASF,QAAQ;IACnC;EACF;AACF;AAEAG,QAAA,CAAS,aAAa,MAAM;EAC1B,IAAIC,IAAA;IACAJ,QAAA;IACAK,GAAA,GAAM,CAAC;EAEX,MAAMC,aAAA,GAAgBA,CAAC;IAAEC;EAAqB,MAAuB;IACnE,MAAMC,KAAA,GAAQX,SAAA,CAAUU,oBAAoB;IAC5C,OAAAF,GAAA,CAAIG,KAAA,GAAQA,KAAA,EACL;EACT;EAEAC,UAAA,CAAW,MAAM;IACfJ,GAAA,GAAM,CAAC,GACPL,QAAA,GAAWU,QAAA,CAASC,aAAA,CAAc,KAAK,GACvCD,QAAA,CAASE,IAAA,CAAKC,WAAA,CAAYb,QAAQ,GAClCI,IAAA,GAAOL,UAAA,CAAWC,QAAQ;EAC5B,CAAC,GAEDc,SAAA,CAAU,MAAM;IACdV,IAAA,CAAKH,MAAA,CAAO,IAAI,GAChBS,QAAA,CAASE,IAAA,CAAKG,WAAA,CAAYf,QAAQ,GAClCA,QAAA,GAAW,MACXI,IAAA,GAAO;EACT,CAAC,GAEDY,IAAA,CAAK,oCAAoC,MAAM;IAC7C,MAAMT,oBAAA,GAAuBA,CAAA,KAAM;IACnCX,GAAA,CAAI,MAAM;MACRQ,IAAA,CAAKH,MAAA,CAAO,eAAAH,GAAA,CAACQ,aAAA;QAAcC;MAAA,CAA4C,CAAE;IAC3E,CAAC,GACDU,MAAA,CAAOZ,GAAA,CAAIG,KAAK,EAAEU,IAAA,CAAK,CAAC;EAC1B,CAAC,GAEDF,IAAA,CAAK,6BAA6B,MAAM;IACtC,IAAIG,OAAA,GAAU;IACd,MAAMZ,oBAAA,GAAuBA,CAAA,KAAMY,OAAA;IACnCvB,GAAA,CAAI,MAAM;MACRQ,IAAA,CAAKH,MAAA,CAAO,eAAAH,GAAA,CAACQ,aAAA;QAAcC;MAAA,CAA4C,CAAE;IAC3E,CAAC,GACDU,MAAA,CAAOZ,GAAA,CAAIG,KAAK,EAAEU,IAAA,CAAK,CAAC,GACxBtB,GAAA,CAAI,MAAM;MACRQ,IAAA,CAAKH,MAAA,CAAO,eAAAH,GAAA,CAACQ,aAAA;QAAcC;MAAA,CAA4C,CAAE;IAC3E,CAAC,GACDU,MAAA,CAAOZ,GAAA,CAAIG,KAAK,EAAEU,IAAA,CAAK,CAAC;EAC1B,CAAC,GAEDF,IAAA,CAAK,gCAAgC,MAAM;IACzC,IAAIG,OAAA,GAAU;IACd,MAAMZ,oBAAA,GAAuBA,CAAA,KAAMY,OAAA;IACnCvB,GAAA,CAAI,MAAM;MACRQ,IAAA,CAAKH,MAAA,CAAO,eAAAH,GAAA,CAACQ,aAAA;QAAcC;MAAA,CAA4C,CAAE;IAC3E,CAAC,GACDU,MAAA,CAAOE,OAAO,EAAED,IAAA,CAAK,CAAC,GACtBtB,GAAA,CAAI,MAAM;MACRQ,IAAA,CAAKH,MAAA,CAAO,eAAAH,GAAA,CAACQ,aAAA;QAAcC;MAAA,CAA4C,CAAE;IAC3E,CAAC,GACDU,MAAA,CAAOE,OAAO,EAAED,IAAA,CAAK,CAAC;EACxB,CAAC,GAEDF,IAAA,CAAK,oEAAoE,MAAM;IAC7E,IAAIG,OAAA,GAAU;IACd,MAAMZ,oBAAA,GAAuBA,CAAA,KACvBY,OAAA,KAAY,KACdA,OAAA,IACO,QAEFA,OAAA;IAETvB,GAAA,CAAI,MAAM;MACRQ,IAAA,CAAKH,MAAA,CAAO,eAAAH,GAAA,CAACQ,aAAA;QAAcC;MAAA,CAA4C,CAAE;IAC3E,CAAC,GACDU,MAAA,CAAOZ,GAAA,CAAIG,KAAK,EAAEU,IAAA,CAAK,IAAI,GAC3BtB,GAAA,CAAI,MAAM;MACRQ,IAAA,CAAKH,MAAA,CAAO,eAAAH,GAAA,CAACQ,aAAA;QAAcC;MAAA,CAA4C,CAAE;IAC3E,CAAC,GACDU,MAAA,CAAOZ,GAAA,CAAIG,KAAK,EAAEU,IAAA,CAAK,IAAI;EAC7B,CAAC;AACH,CAAC","ignoreList":[]}

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

@@ -0,0 +1,8 @@
+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);
+  return ref.current === UNINITIALIZED && (ref.current = getInitialValue()), 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,IAAW,cAAc,OAAO,eAAAA,MAAA,CAAO,KAAM,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,OAAIM,GAAA,CAAIE,OAAA,KAAYR,aAAA,KAClBM,GAAA,CAAIE,OAAA,GAAUH,eAAA,CAAgB,IAGzBC,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",
+  "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": "hanzo-gui-build --skip-native",
+    "watch": "hanzo-gui-build --skip-native --watch",
+    "clean": "hanzo-gui-build clean",
+    "clean:build": "hanzo-gui-build clean:build"
+  },
+  "dependencies": {
+    "@hanzogui/normalize-css-color": "workspace:*",
+    "@hanzogui/react-native-use-pressable": "workspace:*",
+    "@hanzogui/react-native-use-responder-events": "workspace:*",
+    "@hanzogui/simple-hash": "workspace:*",
+    "@hanzogui/use-element-layout": "workspace:*",
+    "@hanzogui/web": "workspace:*"
+  },
+  "devDependencies": {
+    "@hanzogui/build": "workspace:*",
+    "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)',
+      })
+    })
+  })
+})