babel-plugin-react-native-web-tv 0.21.2-tv.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/README.md

@@ -0,0 +1,60 @@
+# babel-plugin-react-native-web
+
+[![npm version][package-badge]][package-url] [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://reactjs.org/docs/how-to-contribute.html#your-first-pull-request)
+
+A Babel plugin that will alias `react-native` to `react-native-web` and exclude
+any modules not required by your app (keeping bundle size down).
+
+In this TV fork, the plugin behavior is unchanged and works for TV exports as well
+(for example `TVFocusGuideView`, `TVEventHandler`, and `useTVEventHandler`) when
+they are imported from `react-native`.
+
+## Installation
+
+
+```
+# For the TV fork:
+npm install --save-dev babel-plugin-react-native-web-tv
+# For upstream:
+# npm install --save-dev babel-plugin-react-native-web
+```
+
+## Usage
+
+**.babelrc**
+
+```
+{
+  "plugins": [
+    ["react-native-web-tv", { commonjs: true }]
+  ]
+}
+```
+
+You should configure the plugin to match the module format used by your
+bundler. Most modern bundlers will use a package's ES modules by default (i.e.,
+if `package.json` has a `module` field). But if you need the plugin to rewrite
+import paths to point to CommonJS modules, you must set the `commonjs` option
+to `true`.
+
+## Example
+
+NOTE: `react-native-web` internal paths are _not stable_ and you must not rely
+on them. Always use the Babel plugin to optimize your build. What follows is an
+example of the rewrite performed by the plugin.
+
+**Before**
+
+```js
+import { StyleSheet, View } from 'react-native';
+```
+
+**After**
+
+```js
+import StyleSheet from 'react-native-web/dist/exports/StyleSheet';
+import View from 'react-native-web/dist/exports/View';
+```
+
+[package-badge]: https://img.shields.io/npm/v/babel-plugin-react-native-web.svg?style=flat
+[package-url]: https://www.npmjs.com/package/babel-plugin-react-native-web

package/index.js

@@ -0,0 +1,5 @@
+// Allow dynamic package name for publish-time renaming
+const plugin = require('./src');
+// Always rewrite react-native and react-native-web imports to the correct TV fork paths
+plugin.packageName = require('./package.json').name;
+module.exports = plugin;

package/package.json

@@ -0,0 +1,18 @@
+{
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "name": "babel-plugin-react-native-web-tv",
+  "version": "0.21.2-tv.5",
+  "description": "Babel plugin for React Native Web for TV",
+  "main": "index.js",
+  "devDependencies": {
+    "babel-plugin-tester": "^10.1.0"
+  },
+  "author": "Nicolas Gallagher",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/hps1978/react-native-web-tv.git"
+  }
+}

package/src/__tests__/__snapshots__/index-test.js.snap

@@ -0,0 +1,141 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Rewrite react-native to react-native-web export from "react-native": export from "react-native" 1`] = `
+
+export { View } from 'react-native';
+export { StyleSheet, Text, unstable_createElement } from 'react-native';
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+export { default as View } from 'react-native-web/dist/exports/View';
+export { default as StyleSheet } from 'react-native-web/dist/exports/StyleSheet';
+export { default as Text } from 'react-native-web/dist/exports/Text';
+export { default as unstable_createElement } from 'react-native-web/dist/exports/createElement';
+
+
+`;
+
+exports[`Rewrite react-native to react-native-web export from "react-native-web": export from "react-native-web" 1`] = `
+
+export { View } from 'react-native-web';
+export { StyleSheet, Text, unstable_createElement } from 'react-native-web';
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+export { default as View } from 'react-native-web/dist/exports/View';
+export { default as StyleSheet } from 'react-native-web/dist/exports/StyleSheet';
+export { default as Text } from 'react-native-web/dist/exports/Text';
+export { default as unstable_createElement } from 'react-native-web/dist/exports/createElement';
+
+
+`;
+
+exports[`Rewrite react-native to react-native-web import from "react-native": import from "react-native" 1`] = `
+
+import ReactNative from 'react-native';
+import { View } from 'react-native';
+import { Invalid, View as MyView } from 'react-native';
+import { useLocaleContext } from 'react-native';
+import * as ReactNativeModules from 'react-native';
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+import ReactNative from 'react-native-web/dist/index';
+import View from 'react-native-web/dist/exports/View';
+import { Invalid } from 'react-native-web/dist/index';
+import MyView from 'react-native-web/dist/exports/View';
+import useLocaleContext from 'react-native-web/dist/exports/useLocaleContext';
+import * as ReactNativeModules from 'react-native-web/dist/index';
+
+
+`;
+
+exports[`Rewrite react-native to react-native-web import from "react-native": import from "react-native" 2`] = `
+
+import ReactNative from 'react-native';
+import { View } from 'react-native';
+import { Invalid, View as MyView } from 'react-native';
+import * as ReactNativeModules from 'react-native';
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+import ReactNative from 'react-native-web/dist/cjs/index';
+import View from 'react-native-web/dist/cjs/exports/View';
+import { Invalid } from 'react-native-web/dist/cjs/index';
+import MyView from 'react-native-web/dist/cjs/exports/View';
+import * as ReactNativeModules from 'react-native-web/dist/cjs/index';
+
+
+`;
+
+exports[`Rewrite react-native to react-native-web import from "react-native-web": import from "react-native-web" 1`] = `
+
+import { unstable_createElement } from 'react-native-web';
+import { StyleSheet, View, Pressable, processColor } from 'react-native-web';
+import * as ReactNativeModules from 'react-native-web';
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+import unstable_createElement from 'react-native-web/dist/exports/createElement';
+import StyleSheet from 'react-native-web/dist/exports/StyleSheet';
+import View from 'react-native-web/dist/exports/View';
+import Pressable from 'react-native-web/dist/exports/Pressable';
+import processColor from 'react-native-web/dist/exports/processColor';
+import * as ReactNativeModules from 'react-native-web/dist/index';
+
+
+`;
+
+exports[`Rewrite react-native to react-native-web require "react-native": require "react-native" 1`] = `
+
+const ReactNative = require('react-native');
+const { View } = require('react-native');
+const { StyleSheet, Pressable } = require('react-native');
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+const ReactNative = require('react-native-web/dist/index');
+const View = require('react-native-web/dist/exports/View').default;
+const StyleSheet = require('react-native-web/dist/exports/StyleSheet').default;
+const Pressable = require('react-native-web/dist/exports/Pressable').default;
+
+
+`;
+
+exports[`Rewrite react-native to react-native-web require "react-native": require "react-native" 2`] = `
+
+const ReactNative = require('react-native');
+const { View } = require('react-native');
+const { StyleSheet, Pressable } = require('react-native');
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+const ReactNative = require('react-native-web/dist/cjs/index');
+const View = require('react-native-web/dist/cjs/exports/View').default;
+const StyleSheet =
+  require('react-native-web/dist/cjs/exports/StyleSheet').default;
+const Pressable =
+  require('react-native-web/dist/cjs/exports/Pressable').default;
+
+
+`;
+
+exports[`Rewrite react-native to react-native-web require "react-native-web": require "react-native-web" 1`] = `
+
+const ReactNative = require('react-native-web');
+const { unstable_createElement } = require('react-native-web');
+const { StyleSheet, View, Pressable, processColor } = require('react-native-web');
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+const ReactNative = require('react-native-web/dist/index');
+const unstable_createElement =
+  require('react-native-web/dist/exports/createElement').default;
+const StyleSheet = require('react-native-web/dist/exports/StyleSheet').default;
+const View = require('react-native-web/dist/exports/View').default;
+const Pressable = require('react-native-web/dist/exports/Pressable').default;
+const processColor =
+  require('react-native-web/dist/exports/processColor').default;
+
+
+`;

package/src/__tests__/index-test.js

@@ -0,0 +1,79 @@
+const plugin = require('..');
+const pluginTester = require('babel-plugin-tester').default;
+
+const tests = [
+  // import react-native
+  {
+    title: 'import from "react-native"',
+    code: `import ReactNative from 'react-native';
+import { View } from 'react-native';
+import { Invalid, View as MyView } from 'react-native';
+import { useLocaleContext } from 'react-native';
+import * as ReactNativeModules from 'react-native';`,
+    snapshot: true
+  },
+  {
+    title: 'import from "react-native"',
+    code: `import ReactNative from 'react-native';
+import { View } from 'react-native';
+import { Invalid, View as MyView } from 'react-native';
+import * as ReactNativeModules from 'react-native';`,
+    snapshot: true,
+    pluginOptions: { commonjs: true }
+  },
+  {
+    title: 'import from "react-native-web"',
+    code: `import { unstable_createElement } from 'react-native-web';
+import { StyleSheet, View, Pressable, processColor } from 'react-native-web';
+import * as ReactNativeModules from 'react-native-web';`,
+    snapshot: true
+  },
+  {
+    title: 'export from "react-native"',
+    code: `export { View } from 'react-native';
+export { StyleSheet, Text, unstable_createElement } from 'react-native';`,
+    snapshot: true
+  },
+  {
+    title: 'export from "react-native-web"',
+    code: `export { View } from 'react-native-web';
+export { StyleSheet, Text, unstable_createElement } from 'react-native-web';`,
+    snapshot: true
+  },
+  // require react-native
+  {
+    title: 'require "react-native"',
+    code: `const ReactNative = require('react-native');
+const { View } = require('react-native');
+const { StyleSheet, Pressable } = require('react-native');`,
+    snapshot: true
+  },
+  {
+    title: 'require "react-native"',
+    code: `const ReactNative = require('react-native');
+const { View } = require('react-native');
+const { StyleSheet, Pressable } = require('react-native');`,
+    snapshot: true,
+    pluginOptions: { commonjs: true }
+  },
+  {
+    title: 'require "react-native-web"',
+    code: `const ReactNative = require('react-native-web');
+const { unstable_createElement } = require('react-native-web');
+const { StyleSheet, View, Pressable, processColor } = require('react-native-web');`,
+    snapshot: true
+  }
+];
+
+pluginTester({
+  babelOptions: {
+    generatorOpts: {
+      jsescOption: {
+        quotes: 'single'
+      }
+    }
+  },
+  plugin,
+  pluginName: 'Rewrite react-native to react-native-web',
+  tests
+});

package/src/index.js

@@ -0,0 +1,150 @@
+const moduleMap = require('./moduleMap');
+
+const isCommonJS = (opts) => opts.commonjs === true;
+
+const getDistLocation = (importName, opts) => {
+  const format = isCommonJS(opts) ? 'cjs/' : '';
+  const internalName =
+    importName === 'unstable_createElement' ? 'createElement' : importName;
+  if (internalName === 'index') {
+    return `react-native-web/dist/${format}index`;
+  } else if (internalName && moduleMap[internalName]) {
+    return `react-native-web/dist/${format}exports/${internalName}`;
+  }
+};
+
+const isReactNativeRequire = (t, node) => {
+  const { declarations } = node;
+  if (declarations.length > 1) {
+    return false;
+  }
+  const { id, init } = declarations[0];
+  return (
+    (t.isObjectPattern(id) || t.isIdentifier(id)) &&
+    t.isCallExpression(init) &&
+    t.isIdentifier(init.callee) &&
+    init.callee.name === 'require' &&
+    init.arguments.length === 1 &&
+    (init.arguments[0].value === 'react-native' ||
+      init.arguments[0].value === 'react-native-web')
+  );
+};
+
+const isReactNativeModule = ({ source, specifiers }) =>
+  source &&
+  (source.value === 'react-native' || source.value === 'react-native-web') &&
+  specifiers.length;
+
+module.exports = function ({ types: t }) {
+  return {
+    name: 'Rewrite react-native to react-native-web',
+    visitor: {
+      ImportDeclaration(path, state) {
+        const { specifiers } = path.node;
+        if (isReactNativeModule(path.node)) {
+          const imports = specifiers
+            .map((specifier) => {
+              if (t.isImportSpecifier(specifier)) {
+                const importName = specifier.imported.name;
+                const distLocation = getDistLocation(importName, state.opts);
+
+                if (distLocation) {
+                  return t.importDeclaration(
+                    [
+                      t.importDefaultSpecifier(
+                        t.identifier(specifier.local.name)
+                      )
+                    ],
+                    t.stringLiteral(distLocation)
+                  );
+                }
+              }
+              return t.importDeclaration(
+                [specifier],
+                t.stringLiteral(getDistLocation('index', state.opts))
+              );
+            })
+            .filter(Boolean);
+
+          path.replaceWithMultiple(imports);
+        }
+      },
+      ExportNamedDeclaration(path, state) {
+        const { specifiers } = path.node;
+        if (isReactNativeModule(path.node)) {
+          const exports = specifiers
+            .map((specifier) => {
+              if (t.isExportSpecifier(specifier)) {
+                const exportName = specifier.exported.name;
+                const localName = specifier.local.name;
+                const distLocation = getDistLocation(localName, state.opts);
+
+                if (distLocation) {
+                  return t.exportNamedDeclaration(
+                    null,
+                    [
+                      t.exportSpecifier(
+                        t.identifier('default'),
+                        t.identifier(exportName)
+                      )
+                    ],
+                    t.stringLiteral(distLocation)
+                  );
+                }
+              }
+              return t.exportNamedDeclaration(
+                null,
+                [specifier],
+                t.stringLiteral(getDistLocation('index', state.opts))
+              );
+            })
+            .filter(Boolean);
+
+          path.replaceWithMultiple(exports);
+        }
+      },
+      VariableDeclaration(path, state) {
+        if (isReactNativeRequire(t, path.node)) {
+          const { id } = path.node.declarations[0];
+          if (t.isObjectPattern(id)) {
+            const imports = id.properties
+              .map((identifier) => {
+                const distLocation = getDistLocation(
+                  identifier.key.name,
+                  state.opts
+                );
+                if (distLocation) {
+                  return t.variableDeclaration(path.node.kind, [
+                    t.variableDeclarator(
+                      t.identifier(identifier.value.name),
+                      t.memberExpression(
+                        t.callExpression(t.identifier('require'), [
+                          t.stringLiteral(distLocation)
+                        ]),
+                        t.identifier('default')
+                      )
+                    )
+                  ]);
+                }
+              })
+              .filter(Boolean);
+
+            path.replaceWithMultiple(imports);
+          } else if (t.isIdentifier(id)) {
+            const name = id.name;
+            const importIndex = t.variableDeclaration(path.node.kind, [
+              t.variableDeclarator(
+                t.identifier(name),
+                t.callExpression(t.identifier('require'), [
+                  t.stringLiteral(getDistLocation('index', state.opts))
+                ])
+              )
+            ]);
+
+            path.replaceWith(importIndex);
+          }
+        }
+      }
+    }
+  };
+};

package/src/moduleMap.js

@@ -0,0 +1,66 @@
+// THIS FILE IS AUTOMATICALLY GENERATED. DO NOT EDIT.
+module.exports = {
+  AccessibilityInfo: true,
+  ActivityIndicator: true,
+  Alert: true,
+  Animated: true,
+  AppRegistry: true,
+  AppState: true,
+  Appearance: true,
+  BackHandler: true,
+  Button: true,
+  CheckBox: true,
+  Clipboard: true,
+  DeviceEventEmitter: true,
+  Dimensions: true,
+  Easing: true,
+  FlatList: true,
+  I18nManager: true,
+  Image: true,
+  ImageBackground: true,
+  InputAccessoryView: true,
+  InteractionManager: true,
+  Keyboard: true,
+  KeyboardAvoidingView: true,
+  LayoutAnimation: true,
+  Linking: true,
+  LogBox: true,
+  Modal: true,
+  NativeEventEmitter: true,
+  NativeModules: true,
+  PanResponder: true,
+  Picker: true,
+  PixelRatio: true,
+  Platform: true,
+  Pressable: true,
+  ProgressBar: true,
+  RefreshControl: true,
+  SafeAreaView: true,
+  ScrollView: true,
+  SectionList: true,
+  Share: true,
+  StatusBar: true,
+  StyleSheet: true,
+  Switch: true,
+  TV: true,
+  Text: true,
+  TextInput: true,
+  Touchable: true,
+  TouchableHighlight: true,
+  TouchableNativeFeedback: true,
+  TouchableOpacity: true,
+  TouchableWithoutFeedback: true,
+  UIManager: true,
+  Vibration: true,
+  View: true,
+  VirtualizedList: true,
+  YellowBox: true,
+  createElement: true,
+  findNodeHandle: true,
+  processColor: true,
+  render: true,
+  unmountComponentAtNode: true,
+  useColorScheme: true,
+  useLocaleContext: true,
+  useWindowDimensions: true
+};