@hps1978/react-native-web-tv 0.21.2-tv.0

package/src/exports/StyleSheet/dom/createCSSStyleSheet.js

@@ -0,0 +1,40 @@
+/**
+ * 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.
+ *
+ * @flow strict-local
+ */
+import canUseDOM from '../../../modules/canUseDom';
+
+// $FlowFixMe: HTMLStyleElement is incorrectly typed - https://github.com/facebook/flow/issues/2696
+export default function createCSSStyleSheet(
+  id: string,
+  rootNode?: Document | ShadowRoot,
+  textContent?: string
+): ?CSSStyleSheet {
+  if (canUseDOM) {
+    const root = rootNode != null ? rootNode : document;
+    let element = root.getElementById(id);
+    if (element == null) {
+      element = document.createElement('style');
+      element.setAttribute('id', id);
+      if (typeof textContent === 'string') {
+        element.appendChild(document.createTextNode(textContent));
+      }
+      if (root instanceof ShadowRoot) {
+        root.insertBefore(element, root.firstChild);
+      } else {
+        const head = root.head;
+        if (head) {
+          head.insertBefore(element, head.firstChild);
+        }
+      }
+    }
+    // $FlowFixMe: HTMLElement is incorrectly typed
+    return element.sheet;
+  } else {
+    return null;
+  }
+}

package/src/exports/StyleSheet/dom/createOrderedCSSStyleSheet.js

@@ -0,0 +1,184 @@
+/**
+ * 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.
+ *
+ * @flow strict-local
+ */
+
+type Groups = { [key: number]: { start: ?number, rules: Array<string> } };
+type Selectors = { [key: string]: boolean };
+
+export type OrderedCSSStyleSheet = {|
+  getTextContent: () => string,
+  insert: (cssText: string, groupValue: number) => void
+|};
+
+const slice = Array.prototype.slice;
+
+/**
+ * Order-based insertion of CSS.
+ *
+ * Each rule is associated with a numerically defined group.
+ * Groups are ordered within the style sheet according to their number, with the
+ * lowest first.
+ *
+ * Groups are implemented using marker rules. The selector of the first rule of
+ * each group is used only to encode the group number for hydration. An
+ * alternative implementation could rely on CSSMediaRule, allowing groups to be
+ * treated as a sub-sheet, but the Edge implementation of CSSMediaRule is
+ * broken.
+ * https://developer.mozilla.org/en-US/docs/Web/API/CSSMediaRule
+ * https://gist.github.com/necolas/aa0c37846ad6bd3b05b727b959e82674
+ */
+export default function createOrderedCSSStyleSheet(
+  sheet: ?CSSStyleSheet
+): OrderedCSSStyleSheet {
+  const groups: Groups = {};
+  const selectors: Selectors = {};
+
+  /**
+   * Hydrate approximate record from any existing rules in the sheet.
+   */
+  if (sheet != null) {
+    let group;
+    slice.call(sheet.cssRules).forEach((cssRule, i) => {
+      const cssText = cssRule.cssText;
+      // Create record of existing selectors and rules
+      if (cssText.indexOf('stylesheet-group') > -1) {
+        group = decodeGroupRule(cssRule);
+        groups[group] = { start: i, rules: [cssText] };
+      } else {
+        const selectorText = getSelectorText(cssText);
+        if (selectorText != null) {
+          selectors[selectorText] = true;
+          groups[group].rules.push(cssText);
+        }
+      }
+    });
+  }
+
+  function sheetInsert(sheet, group, text) {
+    const orderedGroups = getOrderedGroups(groups);
+    const groupIndex = orderedGroups.indexOf(group);
+    const nextGroupIndex = groupIndex + 1;
+    const nextGroup = orderedGroups[nextGroupIndex];
+    // Insert rule before the next group, or at the end of the stylesheet
+    const position =
+      nextGroup != null && groups[nextGroup].start != null
+        ? groups[nextGroup].start
+        : sheet.cssRules.length;
+    const isInserted = insertRuleAt(sheet, text, position);
+
+    if (isInserted) {
+      // Set the starting index of the new group
+      if (groups[group].start == null) {
+        groups[group].start = position;
+      }
+      // Increment the starting index of all subsequent groups
+      for (let i = nextGroupIndex; i < orderedGroups.length; i += 1) {
+        const groupNumber = orderedGroups[i];
+        const previousStart = groups[groupNumber].start || 0;
+        groups[groupNumber].start = previousStart + 1;
+      }
+    }
+
+    return isInserted;
+  }
+
+  const OrderedCSSStyleSheet = {
+    /**
+     * The textContent of the style sheet.
+     */
+    getTextContent(): string {
+      return getOrderedGroups(groups)
+        .map((group) => {
+          const rules = groups[group].rules;
+          // Sorting provides deterministic order of styles in group for
+          // build-time extraction of the style sheet.
+          const marker = rules.shift();
+          rules.sort();
+          rules.unshift(marker);
+          return rules.join('\n');
+        })
+        .join('\n');
+    },
+
+    /**
+     * Insert a rule into the style sheet
+     */
+    insert(cssText: string, groupValue: number) {
+      const group = Number(groupValue);
+
+      // Create a new group.
+      if (groups[group] == null) {
+        const markerRule = encodeGroupRule(group);
+        // Create the internal record.
+        groups[group] = { start: null, rules: [markerRule] };
+        // Update CSSOM.
+        if (sheet != null) {
+          sheetInsert(sheet, group, markerRule);
+        }
+      }
+
+      // selectorText is more reliable than cssText for insertion checks. The
+      // browser excludes vendor-prefixed properties and rewrites certain values
+      // making cssText more likely to be different from what was inserted.
+      const selectorText = getSelectorText(cssText);
+      if (selectorText != null && selectors[selectorText] == null) {
+        // Update the internal records.
+        selectors[selectorText] = true;
+        groups[group].rules.push(cssText);
+        // Update CSSOM.
+        if (sheet != null) {
+          const isInserted = sheetInsert(sheet, group, cssText);
+          if (!isInserted) {
+            // Revert internal record change if a rule was rejected (e.g.,
+            // unrecognized pseudo-selector)
+            groups[group].rules.pop();
+          }
+        }
+      }
+    }
+  };
+
+  return OrderedCSSStyleSheet;
+}
+
+/**
+ * Helper functions
+ */
+
+function encodeGroupRule(group) {
+  return `[stylesheet-group="${group}"]{}`;
+}
+
+const groupPattern = /["']/g;
+function decodeGroupRule(cssRule) {
+  return Number(cssRule.selectorText.split(groupPattern)[1]);
+}
+
+function getOrderedGroups(obj: { [key: number]: any }) {
+  return Object.keys(obj)
+    .map(Number)
+    .sort((a, b) => (a > b ? 1 : -1));
+}
+
+const selectorPattern = /\s*([,])\s*/g;
+function getSelectorText(cssText) {
+  const selector = cssText.split('{')[0].trim();
+  return selector !== '' ? selector.replace(selectorPattern, '$1') : null;
+}
+
+function insertRuleAt(root, cssText: string, position: number): boolean {
+  try {
+    // $FlowFixMe: Flow is missing CSSOM types needed to type 'root'.
+    root.insertRule(cssText, position);
+    return true;
+  } catch (e) {
+    // JSDOM doesn't support `CSSSMediaRule#insertRule`.
+    // Also ignore errors that occur from attempting to insert vendor-prefixed selectors.
+    return false;
+  }
+}

package/src/exports/StyleSheet/dom/index.js

@@ -0,0 +1,90 @@
+/**
+ * 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.
+ *
+ * @flow strict-local
+ */
+
+import type { OrderedCSSStyleSheet } from './createOrderedCSSStyleSheet';
+import canUseDOM from '../../../modules/canUseDom';
+import createCSSStyleSheet from './createCSSStyleSheet';
+import createOrderedCSSStyleSheet from './createOrderedCSSStyleSheet';
+
+type Sheet = {
+  ...OrderedCSSStyleSheet,
+  id: string
+};
+
+const defaultId = 'react-native-stylesheet';
+const roots = new WeakMap<Node, number>();
+const sheets = [];
+
+const initialRules = [
+  // minimal top-level reset
+  'html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}',
+  'body{margin:0;}',
+  // minimal form pseudo-element reset
+  'button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}',
+  'input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}'
+];
+
+export function createSheet(
+  root?: HTMLElement,
+  id?: string = defaultId
+): Sheet {
+  let sheet;
+
+  if (canUseDOM) {
+    const rootNode: Node = root != null ? root.getRootNode() : document;
+    // Create the initial style sheet
+    if (sheets.length === 0) {
+      sheet = createOrderedCSSStyleSheet(createCSSStyleSheet(id));
+      initialRules.forEach((rule) => {
+        sheet.insert(rule, 0);
+      });
+      roots.set(rootNode, sheets.length);
+      sheets.push(sheet);
+    } else {
+      const index = roots.get(rootNode);
+      if (index == null) {
+        const initialSheet = sheets[0];
+        // If we're creating a new sheet, populate it with existing styles
+        const textContent =
+          initialSheet != null ? initialSheet.getTextContent() : '';
+        // Cast rootNode to 'any' because Flow types for getRootNode are wrong
+        sheet = createOrderedCSSStyleSheet(
+          createCSSStyleSheet(id, (rootNode: any), textContent)
+        );
+        roots.set(rootNode, sheets.length);
+        sheets.push(sheet);
+      } else {
+        sheet = sheets[index];
+      }
+    }
+  } else {
+    // Create the initial style sheet
+    if (sheets.length === 0) {
+      sheet = createOrderedCSSStyleSheet(createCSSStyleSheet(id));
+      initialRules.forEach((rule) => {
+        sheet.insert(rule, 0);
+      });
+      sheets.push(sheet);
+    } else {
+      sheet = sheets[0];
+    }
+  }
+
+  return {
+    getTextContent() {
+      return sheet.getTextContent();
+    },
+    id,
+    insert(cssText: string, groupValue: number) {
+      sheets.forEach((s) => {
+        s.insert(cssText, groupValue);
+      });
+    }
+  };
+}

package/src/exports/StyleSheet/index.js

@@ -0,0 +1,197 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import { atomic, classic, inline } from './compiler';
+import { createSheet } from './dom';
+import { localizeStyle } from 'styleq/transform-localize-style';
+import { preprocess } from './preprocess';
+import { styleq } from 'styleq';
+import { validate } from './validate';
+import canUseDOM from '../../modules/canUseDom';
+
+const staticStyleMap: WeakMap<Object, Object> = new WeakMap();
+const sheet = createSheet();
+
+const defaultPreprocessOptions = { shadow: true, textShadow: true };
+
+function customStyleq(styles, options: Options = {}) {
+  const { writingDirection, ...preprocessOptions } = options;
+  const isRTL = writingDirection === 'rtl';
+  return styleq.factory({
+    transform(style) {
+      const compiledStyle = staticStyleMap.get(style);
+      if (compiledStyle != null) {
+        return localizeStyle(compiledStyle, isRTL);
+      }
+      return preprocess(style, {
+        ...defaultPreprocessOptions,
+        ...preprocessOptions
+      });
+    }
+  })(styles);
+}
+
+function insertRules(compiledOrderedRules) {
+  compiledOrderedRules.forEach(([rules, order]) => {
+    if (sheet != null) {
+      rules.forEach((rule) => {
+        sheet.insert(rule, order);
+      });
+    }
+  });
+}
+
+function compileAndInsertAtomic(style) {
+  const [compiledStyle, compiledOrderedRules] = atomic(
+    preprocess(style, defaultPreprocessOptions)
+  );
+  insertRules(compiledOrderedRules);
+  return compiledStyle;
+}
+
+function compileAndInsertReset(style, key) {
+  const [compiledStyle, compiledOrderedRules] = classic(style, key);
+  insertRules(compiledOrderedRules);
+  return compiledStyle;
+}
+
+/* ----- API ----- */
+
+const absoluteFillObject = {
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0
+};
+
+const absoluteFill = create({ x: { ...absoluteFillObject } }).x;
+
+/**
+ * create
+ */
+function create<T: Object>(styles: T): $ReadOnly<T> {
+  Object.keys(styles).forEach((key) => {
+    const styleObj = styles[key];
+    // Only compile at runtime if the style is not already compiled
+    if (styleObj != null && styleObj.$$css !== true) {
+      let compiledStyles;
+      if (key.indexOf('$raw') > -1) {
+        compiledStyles = compileAndInsertReset(styleObj, key.split('$raw')[0]);
+      } else {
+        if (process.env.NODE_ENV !== 'production') {
+          validate(styleObj);
+          styles[key] = Object.freeze(styleObj);
+        }
+        compiledStyles = compileAndInsertAtomic(styleObj);
+      }
+      staticStyleMap.set(styleObj, compiledStyles);
+    }
+  });
+  return styles;
+}
+
+/**
+ * compose
+ */
+function compose(style1: any, style2: any): any {
+  if (process.env.NODE_ENV !== 'production') {
+    /* eslint-disable prefer-rest-params */
+    const len = arguments.length;
+    if (len > 2) {
+      const readableStyles = [...arguments].map((a) => flatten(a));
+      throw new Error(
+        `StyleSheet.compose() only accepts 2 arguments, received ${len}: ${JSON.stringify(
+          readableStyles
+        )}`
+      );
+    }
+    /* eslint-enable prefer-rest-params */
+    /*
+    console.warn(
+      'StyleSheet.compose(a, b) is deprecated; use array syntax, i.e., [a,b].'
+    );
+    */
+  }
+  return [style1, style2];
+}
+
+/**
+ * flatten
+ */
+function flatten(...styles: any): { [key: string]: any } {
+  const flatArray = styles.flat(Infinity);
+  const result = {};
+  for (let i = 0; i < flatArray.length; i++) {
+    const style = flatArray[i];
+    if (style != null && typeof style === 'object') {
+      // $FlowFixMe
+      Object.assign(result, style);
+    }
+  }
+  return result;
+}
+
+/**
+ * getSheet
+ */
+function getSheet(): { id: string, textContent: string } {
+  return {
+    id: sheet.id,
+    textContent: sheet.getTextContent()
+  };
+}
+
+/**
+ * resolve
+ */
+type StyleProps = [string, { [key: string]: mixed } | null];
+type Options = {
+  shadow?: boolean,
+  textShadow?: boolean,
+  writingDirection: 'ltr' | 'rtl'
+};
+
+function StyleSheet(styles: any, options?: Options = {}): StyleProps {
+  const isRTL = options.writingDirection === 'rtl';
+  const styleProps: StyleProps = customStyleq(styles, options);
+  if (Array.isArray(styleProps) && styleProps[1] != null) {
+    styleProps[1] = inline(styleProps[1], isRTL);
+  }
+  return styleProps;
+}
+
+StyleSheet.absoluteFill = absoluteFill;
+StyleSheet.absoluteFillObject = absoluteFillObject;
+StyleSheet.create = create;
+StyleSheet.compose = compose;
+StyleSheet.flatten = flatten;
+StyleSheet.getSheet = getSheet;
+// `hairlineWidth` is not implemented using screen density as browsers may
+// round sub-pixel values down to `0`, causing the line not to be rendered.
+StyleSheet.hairlineWidth = 1;
+
+if (canUseDOM && window.__REACT_DEVTOOLS_GLOBAL_HOOK__) {
+  window.__REACT_DEVTOOLS_GLOBAL_HOOK__.resolveRNStyle = StyleSheet.flatten;
+}
+
+export type IStyleSheet = {
+  (styles: $ReadOnlyArray<any>, options?: Options): StyleProps,
+  absoluteFill: Object,
+  absoluteFillObject: Object,
+  create: typeof create,
+  compose: typeof compose,
+  flatten: typeof flatten,
+  getSheet: typeof getSheet,
+  hairlineWidth: number
+};
+
+const stylesheet: IStyleSheet = StyleSheet;
+
+export default stylesheet;