@expo/html-elements 0.12.2 → 0.12.4

package/src/primitives/RNWView.tsx

@@ -0,0 +1,178 @@
+/**
+ * Copyright (c) Expo.
+ * Copyright (c) Nicolas Gallagher.
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import * as React from 'react';
+import StyleSheet from 'react-native-web/dist/exports/StyleSheet';
+import TextAncestorContext from 'react-native-web/dist/exports/Text/TextAncestorContext';
+import { ViewProps } from 'react-native-web/dist/exports/View/types';
+import createElement from 'react-native-web/dist/exports/createElement';
+import * as forwardedProps from 'react-native-web/dist/modules/forwardedProps';
+import pick from 'react-native-web/dist/modules/pick';
+import useElementLayout from 'react-native-web/dist/modules/useElementLayout';
+import { useLocaleContext, getLocaleDirection } from 'react-native-web/dist/modules/useLocale';
+import useMergeRefs from 'react-native-web/dist/modules/useMergeRefs';
+import usePlatformMethods from 'react-native-web/dist/modules/usePlatformMethods';
+import useResponderEvents from 'react-native-web/dist/modules/useResponderEvents';
+
+const forwardPropsList = Object.assign(
+  {},
+  forwardedProps.defaultProps,
+  forwardedProps.accessibilityProps,
+  forwardedProps.clickProps,
+  forwardedProps.defaultProps,
+  forwardedProps.accessibilityProps,
+  forwardedProps.clickProps,
+  forwardedProps.focusProps,
+  forwardedProps.keyboardProps,
+  forwardedProps.mouseProps,
+  forwardedProps.touchProps,
+  forwardedProps.styleProps,
+  {
+    href: true,
+    lang: true,
+    onScroll: true,
+    onWheel: true,
+    pointerEvents: true,
+  }
+);
+
+function pickProps(props: React.ComponentProps<any>) {
+  return pick(props, forwardPropsList);
+}
+
+/**
+ * This is the View from react-native-web copied out in order to supply a custom `__element` property.
+ * In the past, you could use `createElement` to create an element with a custom HTML element, but this changed
+ * somewhere between 0.14...0.17.
+ */
+
+function View(props: ViewProps) {
+  const {
+    __element,
+    hrefAttrs,
+    onLayout,
+    onMoveShouldSetResponder,
+    onMoveShouldSetResponderCapture,
+    onResponderEnd,
+    onResponderGrant,
+    onResponderMove,
+    onResponderReject,
+    onResponderRelease,
+    onResponderStart,
+    onResponderTerminate,
+    onResponderTerminationRequest,
+    onScrollShouldSetResponder,
+    onScrollShouldSetResponderCapture,
+    onSelectionChangeShouldSetResponder,
+    onSelectionChangeShouldSetResponderCapture,
+    onStartShouldSetResponder,
+    onStartShouldSetResponderCapture,
+    ref: forwardedRef,
+    ...rest
+  } = props as any;
+
+  // if (process.env.NODE_ENV !== 'production') {
+  //   React.Children.toArray(props.children).forEach((item) => {
+  //     if (typeof item === 'string') {
+  //       console.error(`Unexpected text node: ${item}. A text node cannot be a child of a <View>.`);
+  //     }
+  //   });
+  // }
+
+  const hasTextAncestor = React.use(TextAncestorContext);
+  const hostRef = React.useRef(null);
+  const { direction: contextDirection } = useLocaleContext();
+
+  useElementLayout(hostRef, onLayout);
+  useResponderEvents(hostRef, {
+    onMoveShouldSetResponder,
+    onMoveShouldSetResponderCapture,
+    onResponderEnd,
+    onResponderGrant,
+    onResponderMove,
+    onResponderReject,
+    onResponderRelease,
+    onResponderStart,
+    onResponderTerminate,
+    onResponderTerminationRequest,
+    onScrollShouldSetResponder,
+    onScrollShouldSetResponderCapture,
+    onSelectionChangeShouldSetResponder,
+    onSelectionChangeShouldSetResponderCapture,
+    onStartShouldSetResponder,
+    onStartShouldSetResponderCapture,
+  });
+
+  let component = __element ?? 'div';
+
+  const langDirection = props.lang != null ? getLocaleDirection(props.lang) : null;
+  const componentDirection = props.dir || langDirection;
+  const writingDirection = componentDirection || contextDirection;
+
+  const supportedProps = pickProps(rest);
+  supportedProps.dir = componentDirection;
+  supportedProps.style = [styles.view$raw, hasTextAncestor && styles.inline, props.style];
+  if (props.href != null) {
+    component = 'a';
+    if (hrefAttrs != null) {
+      const { download, rel, target } = hrefAttrs;
+      if (download != null) {
+        supportedProps.download = download;
+      }
+      if (rel != null) {
+        supportedProps.rel = rel;
+      }
+      if (typeof target === 'string') {
+        supportedProps.target = target.charAt(0) !== '_' ? '_' + target : target;
+      }
+    }
+  }
+
+  const platformMethodsRef = usePlatformMethods(supportedProps);
+  const setRef = useMergeRefs(hostRef, platformMethodsRef, forwardedRef);
+
+  return createElement(
+    component,
+    {
+      ...supportedProps,
+      ref: setRef,
+    },
+    // @ts-expect-error TODO(cedric): 'writingDirection' does not exist in type 'ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...>'
+    { writingDirection }
+  );
+}
+
+if (__DEV__) {
+  View.displayName = 'View';
+}
+
+const styles = StyleSheet.create({
+  view$raw: {
+    alignItems: 'stretch',
+    backgroundColor: 'transparent',
+    border: '0 solid black',
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexBasis: 'auto',
+    flexDirection: 'column',
+    flexShrink: 0,
+    listStyle: 'none',
+    margin: 0,
+    minHeight: 0,
+    minWidth: 0,
+    padding: 0,
+    position: 'relative',
+    textDecoration: 'none',
+    zIndex: 0,
+  },
+  inline: {
+    display: 'inline-flex',
+  },
+});
+
+export default View;

package/src/primitives/Table.ts

@@ -0,0 +1,14 @@
+import { ClassAttributes, ComponentProps, ComponentType } from 'react';
+
+import Text from './Text';
+
+type NativeTextProps = ComponentProps<typeof Text> & ClassAttributes<typeof Text>;
+
+export type TableTextProps = NativeTextProps & {
+  /** @platform web */
+  colSpan?: number | string;
+  /** @platform web */
+  rowSpan?: number | string;
+};
+
+export const TableText = Text as ComponentType<TableTextProps>;

package/src/primitives/Text.tsx

@@ -0,0 +1,68 @@
+import { ClassAttributes, ComponentProps, ComponentType } from 'react';
+import { StyleProp, Text as NativeText, TextStyle as NativeTextStyle } from 'react-native';
+
+import { WebViewStyle } from './View';
+import { createSafeStyledView } from '../css/createSafeStyledView';
+
+// https://github.com/necolas/react-native-web/issues/832
+
+type NativeTextProps = ComponentProps<typeof NativeText> & ClassAttributes<typeof NativeText>;
+
+export interface WebTextStyle {
+  /** string is only available on web */
+  fontSize?: NativeTextStyle['fontSize'] | string;
+  /** string is only available on web */
+  lineHeight?: NativeTextStyle['lineHeight'] | string;
+  /** @platform web */
+  fontFeatureSettings?: string;
+  /** @platform web */
+  textIndent?: string;
+  /** @platform web */
+  textOverflow?: string;
+  /** @platform web */
+  textRendering?: string;
+  /** @platform web */
+  textTransform?: string;
+  /** @platform web */
+  unicodeBidi?: string;
+  /** @platform web */
+  wordWrap?: string;
+}
+
+export type TextStyle = Omit<NativeTextStyle, 'position' | 'fontSize' | 'lineHeight'> &
+  WebTextStyle &
+  WebViewStyle;
+
+export type WebTextProps = {
+  style?: StyleProp<TextStyle>;
+  /** @platform web */
+  tabIndex?: number;
+  /** @platform web */
+  'aria-level'?: number;
+  /**
+   * @deprecated use `aria-level` instead.
+   * @platform web
+   */
+  accessibilityLevel?: number;
+  /** @platform web */
+  href?: string;
+  /** @deprecated use the prop `hrefAttrs={{ target: '...' }}` instead. */
+  target?: string;
+  /** @platform web */
+  hrefAttrs?: {
+    /** @platform web */
+    target?: string;
+    /** @platform web */
+    rel?: string;
+    /** @platform web */
+    download?: boolean | string;
+  };
+  /** @platform web */
+  lang?: string;
+};
+
+export type TextProps = Omit<NativeTextProps, 'style'> & WebTextProps;
+
+const Text = NativeText as ComponentType<TextProps>;
+
+export default createSafeStyledView(Text) as ComponentType<TextProps>;

package/src/primitives/View.tsx

@@ -0,0 +1,145 @@
+import { ClassAttributes, ComponentProps, ComponentType } from 'react';
+import {
+  StyleProp,
+  View as NativeView,
+  ViewStyle as NativeViewStyle,
+  BoxShadowValue,
+  FilterFunction,
+  type ColorValue,
+} from 'react-native';
+
+import { createDevView } from './createDevView';
+import { createSafeStyledView } from '../css/createSafeStyledView';
+
+// https://github.com/necolas/react-native-web/issues/832
+
+type NativeViewProps = ComponentProps<typeof NativeView> & ClassAttributes<typeof NativeView>;
+
+/**
+ * https://baconbrix.gitbook.io/react-native-web/primitives/view
+ */
+export interface WebViewStyle {
+  /** @platform web */
+  backdropFilter?: string;
+  /** @platform web */
+  animationDelay?: string;
+  /** @platform web */
+  animationDirection?: string;
+  /** @platform web */
+  animationDuration?: string;
+  /** @platform web */
+  animationFillMode?: string;
+  /** @platform web */
+  animationName?: string | any[];
+  /** @platform web */
+  animationIterationCount?: number | 'infinite';
+  /** @platform web */
+  animationPlayState?: string;
+  /** @platform web */
+  animationTimingFunction?: string;
+  /** @platform web */
+  backgroundAttachment?: string;
+  /** @platform web */
+  backgroundBlendMode?: string;
+  /** @platform web */
+  backgroundClip?: string;
+  /** @platform web */
+  backgroundImage?: string;
+  /** @platform web */
+  backgroundOrigin?: 'border-box' | 'content-box' | 'padding-box';
+  /** @platform web */
+  backgroundPosition?: string;
+  /** @platform web */
+  backgroundRepeat?: string;
+  /** @platform web */
+  backgroundSize?: string;
+  /** @platform web */
+  boxShadow?: string | readonly BoxShadowValue[];
+  /** @platform web */
+  boxSizing?: string;
+  /** @platform web */
+  clip?: string;
+  /** @platform web */
+  cursor?: string;
+  /** @platform web */
+  filter?: string | readonly FilterFunction[];
+  /** @platform web */
+  gridAutoColumns?: string;
+  /** @platform web */
+  gridAutoFlow?: string;
+  /** @platform web */
+  gridAutoRows?: string;
+  /** @platform web */
+  gridColumnEnd?: string;
+  /** @platform web */
+  gridColumnGap?: string;
+  /** @platform web */
+  gridColumnStart?: string;
+  /** @platform web */
+  gridRowEnd?: string;
+  /** @platform web */
+  gridRowGap?: string;
+  /** @platform web */
+  gridRowStart?: string;
+  /** @platform web */
+  gridTemplateColumns?: string;
+  /** @platform web */
+  gridTemplateRows?: string;
+  /** @platform web */
+  gridTemplateAreas?: string;
+  /** @platform web */
+  outline?: string;
+  /** @platform web */
+  outlineColor?: ColorValue;
+  /** @platform web */
+  overflowX?: string;
+  /** @platform web */
+  overflowY?: string;
+  /** @platform web */
+  overscrollBehavior?: 'auto' | 'contain' | 'none';
+  /** @platform web */
+  overscrollBehaviorX?: 'auto' | 'contain' | 'none';
+  /** @platform web */
+  overscrollBehaviorY?: 'auto' | 'contain' | 'none';
+  /** @platform web */
+  perspective?: string;
+  /** @platform web */
+  perspectiveOrigin?: string;
+  /** @platform web */
+  touchAction?: string;
+  /** @platform web */
+  transformOrigin?: string | (string | number)[];
+  /** @platform web */
+  transitionDelay?: string;
+  /** @platform web */
+  transitionDuration?: string;
+  /** @platform web */
+  transitionProperty?: string;
+  /** @platform web */
+  transitionTimingFunction?: string;
+  /** @platform web */
+  userSelect?: string;
+  /** @platform web */
+  visibility?: string;
+  /** @platform web */
+  willChange?: string;
+  /** @platform web */
+  position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
+}
+
+export type ViewStyle = Omit<NativeViewStyle, 'position'> & WebViewStyle;
+
+export type WebViewProps = {
+  style?: StyleProp<ViewStyle>;
+};
+
+export type ViewProps = WebViewProps & Omit<NativeViewProps, 'style'>;
+
+let View = NativeView as ComponentType<ViewProps>;
+
+if (process.env.NODE_ENV !== 'production') {
+  // Add better errors and warnings in development builds.
+  View = createDevView(NativeView) as ComponentType<ViewProps>;
+}
+
+export default createSafeStyledView(View) as ComponentType<ViewProps>;

package/src/primitives/__tests__/__snapshots__/createDevView.test.ios.tsx.snap.ios

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`warns about unwrapped strings 1`] = `
+<View>
+  <Text
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "backgroundColor": "firebrick",
+          "color": "white",
+        },
+      ]
+    }
+  >
+    Unwrapped text: "
+    <Text
+      style={
+        {
+          "fontWeight": "bold",
+        }
+      }
+    >
+      Hey
+    </Text>
+    "
+  </Text>
+</View>
+`;

package/src/primitives/__tests__/__snapshots__/createDevView.test.tsx.snap.android

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`warns about unwrapped strings 1`] = `
+<View>
+  <Text
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "backgroundColor": "firebrick",
+          "color": "white",
+        },
+      ]
+    }
+  >
+    Unwrapped text: "
+    <Text
+      style={
+        {
+          "fontWeight": "bold",
+        }
+      }
+    >
+      Hey
+    </Text>
+    "
+  </Text>
+</View>
+`;

package/src/primitives/__tests__/__snapshots__/createDevView.test.tsx.snap.ios

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`warns about unwrapped strings 1`] = `
+<View>
+  <Text
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "backgroundColor": "firebrick",
+          "color": "white",
+        },
+      ]
+    }
+  >
+    Unwrapped text: "
+    <Text
+      style={
+        {
+          "fontWeight": "bold",
+        }
+      }
+    >
+      Hey
+    </Text>
+    "
+  </Text>
+</View>
+`;

package/src/primitives/__tests__/__snapshots__/createDevView.test.tsx.snap.web

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`warns about unwrapped strings 1`] = `
+<div
+  className="css-view-g5y9jx"
+  dir={null}
+  ref={[Function]}
+>
+  <div
+    className="css-text-146c3p1 r-bottom-1p0dtai r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-backgroundColor-1kfbv51 r-color-jwli3a"
+    dir="auto"
+    ref={[Function]}
+  >
+    Unwrapped text: "
+    <span
+      className="css-textHasAncestor-1jxf684"
+      dir={null}
+      ref={[Function]}
+      style={
+        {
+          "fontWeight": "bold",
+        }
+      }
+    >
+      Hey
+    </span>
+    "
+  </div>
+</div>
+`;

package/src/primitives/__tests__/__snapshots__/createDevView.test.web.tsx.snap.web

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`warns about unwrapped strings 1`] = `
+<div
+  className="css-view-175oi2r"
+  dir={null}
+>
+  <div
+    className="css-text-1rynq56 r-bottom-1p0dtai r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-backgroundColor-1kfbv51 r-color-jwli3a"
+    dir="auto"
+  >
+    Unwrapped text: "
+    <span
+      className="css-textHasAncestor-1qaijid"
+      dir={null}
+      style={
+        {
+          "fontWeight": "bold",
+        }
+      }
+    >
+      Hey
+    </span>
+    "
+  </div>
+</div>
+`;

package/src/primitives/__tests__/createDevView.test.tsx

@@ -0,0 +1,53 @@
+import { render } from '@testing-library/react-native';
+import * as React from 'react';
+import { Platform, View as NativeView } from 'react-native';
+
+import { createDevView } from '../createDevView';
+
+export const View = createDevView(NativeView);
+
+const originalConsoleError = console.error;
+const originalConsoleWarn = console.warn;
+
+beforeEach(() => {
+  console.error = jest.fn();
+  console.warn = jest.fn();
+});
+afterAll(() => {
+  console.error = originalConsoleError;
+  console.warn = originalConsoleWarn;
+});
+
+it('renders', () => {
+  // Ensure no errors
+  expect(() =>
+    render(
+      <View>
+        <View />
+      </View>
+    )
+  ).not.toThrow();
+});
+
+it('asserts react-dom elements', () => {
+  const instance = (
+    <View>
+      <div />
+    </View>
+  );
+
+  if (Platform.OS === 'web') {
+    // Ensure no errors
+    expect(() => render(instance)).not.toThrow();
+  } else {
+    expect(() => render(instance)).toThrow(/Using unsupported React DOM element/);
+  }
+});
+
+it('warns about unwrapped strings', () => {
+  // Ensure no errors
+  const { toJSON } = render(<View>Hey</View>);
+  expect(toJSON()).toMatchSnapshot();
+
+  expect(console.warn).toHaveBeenCalledTimes(1);
+});

package/src/primitives/createDevView.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Platform, StyleSheet, Text } from 'react-native';
+
+function useChildren(inputChildren: React.ReactNode) {
+  return React.useMemo(() => {
+    const children: React.ReactNode[] = [];
+    React.Children.forEach(inputChildren, (child) => {
+      if (child == null || typeof child === 'boolean') {
+      } else if (
+        typeof child === 'string' ||
+        typeof child === 'number' ||
+        typeof child === 'bigint'
+      ) {
+        // Wrap text in a Text component.
+        let message = `Invalid raw text as a child of View: "${child}"${
+          child === '' ? ` [empty string]` : ''
+        }.`;
+        message += ' Wrap the text contents with a Text element or remove it.';
+        console.warn(message);
+        children.push(
+          <Text style={[StyleSheet.absoluteFill, styles.error]}>
+            Unwrapped text: "<Text style={{ fontWeight: 'bold' }}>{child}</Text>"
+          </Text>
+        );
+      } else if ('type' in child && typeof child?.type === 'string' && Platform.OS !== 'web') {
+        // Disallow untransformed react-dom elements on native.
+        throw new Error(`Using unsupported React DOM element: <${child.type} />`);
+      } else {
+        children.push(child);
+      }
+    });
+    return children;
+  }, [inputChildren]);
+}
+
+/** Extend a view with a `children` filter that asserts more helpful warnings/errors. */
+export function createDevView<TView extends React.ComponentType<any>>(View: TView) {
+  return function DevView({ children, ...props }: any) {
+    return <View {...props} children={useChildren(children)} />;
+  };
+}
+
+const styles = StyleSheet.create({
+  error: {
+    backgroundColor: 'firebrick',
+    color: 'white',
+  },
+});

package/src/ts-declarations/process.d.ts

@@ -0,0 +1,7 @@
+interface Process {
+  env: {
+    [key: string]: string | undefined;
+  };
+}
+
+declare const process: Process;