react-native-css 2.1.1 → 3.0.0-nightly.19372e8

package/src/babel/import-plugin.ts

@@ -0,0 +1,176 @@
+import { resolve } from "path";
+
+import { type PluginObj } from "@babel/core";
+import type { Statement } from "@babel/types";
+
+import {
+  getInteropRequireDefaultSource,
+  type BabelTypes,
+  type PluginState,
+} from "./helpers";
+import {
+  handleReactNativeIdentifierRequire,
+  handleReactNativeImport,
+  handleReactNativeObjectPatternRequire,
+} from "./react-native";
+import {
+  handleReactNativeWebIdentifierRequire,
+  handleReactNativeWebImport,
+  handleReactNativeWebObjectPatternRequire,
+} from "./react-native-web";
+
+export default function ({
+  types: t,
+}: {
+  types: BabelTypes;
+}): PluginObj<PluginState> {
+  const processed = new WeakSet();
+
+  const thisModuleDist = resolve(__dirname, "../../../dist");
+  const thisModuleSrc = resolve(__dirname, "../../../src");
+
+  function isFromThisModule(filename: string): boolean {
+    return (
+      filename.startsWith(thisModuleDist) || filename.startsWith(thisModuleSrc)
+    );
+  }
+
+  return {
+    name: "Rewrite react-native to react-native-css",
+    visitor: {
+      ImportDeclaration(path, state): void {
+        if (
+          processed.has(path) ||
+          processed.has(path.node) ||
+          isFromThisModule(state.filename)
+        ) {
+          return;
+        }
+
+        const statements =
+          handleReactNativeImport(path.node, t, state.filename) ??
+          handleReactNativeWebImport(path.node, t, state.filename);
+
+        if (!statements) {
+          return;
+        }
+
+        for (const statement of statements) {
+          processed.add(statement);
+        }
+
+        path.replaceWithMultiple(statements);
+      },
+      VariableDeclaration(path, state): void {
+        if (
+          processed.has(path) ||
+          processed.has(path.node) ||
+          isFromThisModule(state.filename)
+        ) {
+          return;
+        }
+
+        const firstDeclaration = path.node.declarations.at(0);
+
+        // We only handle single variable declarations for now.
+        if (path.node.declarations.length > 1) {
+          return;
+        }
+
+        // Skip declarations that are not initialized. eg `let x;`
+        if (!firstDeclaration?.init) {
+          return;
+        }
+
+        const { id, init } = firstDeclaration;
+
+        // We only handle `const <id> = <init>()`
+        if (!t.isCallExpression(init)) {
+          return;
+        }
+
+        // We only handle `const id = <init>() OR const { <id> } = <init>()`
+        if (!(t.isIdentifier(id) || t.isObjectPattern(id))) {
+          return;
+        }
+
+        const initArg = init.arguments.at(0);
+
+        if (!initArg) {
+          return;
+        }
+
+        let statements: Statement[] | undefined;
+
+        // `const <id> = require(<source>);`
+        if (
+          t.isIdentifier(id) &&
+          t.isIdentifier(init.callee, { name: "require" }) &&
+          t.isStringLiteral(initArg)
+        ) {
+          statements =
+            handleReactNativeIdentifierRequire(
+              path,
+              t,
+              id.name,
+              initArg.value,
+              state.filename,
+            ) ??
+            handleReactNativeWebIdentifierRequire(
+              path,
+              t,
+              id.name,
+              initArg.value,
+              state.filename,
+            );
+        } else if (
+          t.isObjectPattern(id) &&
+          t.isIdentifier(init.callee, { name: "require" }) &&
+          t.isStringLiteral(initArg)
+        ) {
+          statements =
+            handleReactNativeObjectPatternRequire(
+              path,
+              t,
+              id,
+              initArg.value,
+              state.filename,
+            ) ??
+            handleReactNativeWebObjectPatternRequire(
+              path,
+              t,
+              id,
+              initArg.value,
+              state.filename,
+            );
+        } else if (
+          t.isIdentifier(id) &&
+          t.isIdentifier(init.callee, { name: "_interopRequireDefault" })
+        ) {
+          // `const <id> = _interopRequireDefault(require(<source>));`
+          const source = getInteropRequireDefaultSource(init, t);
+          if (!source) {
+            return;
+          }
+          statements = handleReactNativeWebIdentifierRequire(
+            path,
+            t,
+            id.name,
+            source,
+            state.filename,
+          );
+        }
+
+        if (!statements) {
+          return;
+        }
+
+        for (const statement of statements) {
+          processed.add(statement);
+        }
+
+        path.replaceWithMultiple(statements);
+      },
+    },
+  };
+}

package/src/babel/index.ts

@@ -0,0 +1,9 @@
+/* eslint-disable */
+module.exports = function () {
+  return {
+    plugins: [
+      require("./import-plugin").default,
+      "react-native-worklets/plugin",
+    ],
+  };
+};

package/src/babel/react-native-web.ts

@@ -0,0 +1,226 @@
+import { resolve } from "path";
+
+import { type NodePath } from "@babel/traverse";
+import tBabelTypes, {
+  type ImportDeclaration,
+  type ObjectPattern,
+  type Statement,
+  type VariableDeclaration,
+} from "@babel/types";
+
+import { allowedModules } from "./allowedModules";
+
+type BabelTypes = typeof tBabelTypes;
+
+function parseReactNativeWebSource(source: string, filename: string) {
+  if (source.startsWith(".")) {
+    source = resolve(filename, source);
+
+    const internalPath = source.split("react-native-web/dist")[1];
+    if (!internalPath) {
+      return;
+    }
+
+    // Strip the absolute system filepath
+    source = `react-native-web/${internalPath}`;
+  }
+
+  if (source === "react-native-web") {
+    return { source: "react-native-css/components" };
+  } else if (source.startsWith("react-native-web/")) {
+    const name = source.split("/").at(-1);
+    if (!name || !allowedModules.has(name)) {
+      return;
+    }
+
+    return {
+      source: `react-native-css/components/${name}`,
+      name,
+    };
+  }
+
+  return;
+}
+
+export function handleReactNativeWebImport(
+  declaration: ImportDeclaration,
+  t: BabelTypes,
+  filename: string,
+): Statement[] | undefined {
+  const { specifiers, source } = declaration;
+
+  const rnwSource = parseReactNativeWebSource(source.value, filename);
+  if (!rnwSource) {
+    return;
+  }
+
+  if (specifiers.length === 0) {
+    return [
+      t.importDeclaration([], t.stringLiteral("react-native-css/components")),
+    ];
+  }
+
+  const statements: Statement[] = [];
+
+  for (const specifier of specifiers) {
+    if (t.isImportDefaultSpecifier(specifier)) {
+      const { source: newSource, name } = rnwSource;
+
+      if (!name) {
+        statements.push(
+          t.importDeclaration(
+            [t.importDefaultSpecifier(specifier.local)],
+            t.stringLiteral(newSource),
+          ),
+        );
+      } else {
+        statements.push(
+          t.importDeclaration(
+            [t.importSpecifier(specifier.local, specifier.local)],
+            t.stringLiteral(`react-native-css/components/${name}`),
+          ),
+        );
+      }
+    } else if (t.isImportNamespaceSpecifier(specifier)) {
+      statements.push(
+        t.importDeclaration(
+          [specifier],
+          t.stringLiteral("react-native-css/components"),
+        ),
+      );
+    } else {
+      const localName = t.isStringLiteral(specifier.imported)
+        ? specifier.imported.value
+        : specifier.imported.name;
+
+      if (!allowedModules.has(localName)) {
+        statements.push(t.importDeclaration([specifier], source));
+      } else {
+        statements.push(
+          t.importDeclaration(
+            [t.importSpecifier(specifier.local, specifier.imported)],
+            t.stringLiteral(`react-native-css/components/${localName}`),
+          ),
+        );
+      }
+    }
+  }
+
+  return statements;
+}
+
+export function handleReactNativeWebIdentifierRequire(
+  path: NodePath<VariableDeclaration>,
+  t: BabelTypes,
+  id: string,
+  source: string,
+  filename: string,
+) {
+  const parsedSource = parseReactNativeWebSource(source, filename);
+
+  if (!parsedSource) {
+    return;
+  }
+
+  const { source: newSource, name } = parsedSource;
+
+  if (name) {
+    return [
+      t.variableDeclaration(path.node.kind, [
+        t.variableDeclarator(
+          t.objectPattern([
+            name === id
+              ? t.objectProperty(
+                  t.identifier(name),
+                  t.identifier(id),
+                  false,
+                  true,
+                )
+              : t.objectProperty(t.identifier(name), t.identifier(id)),
+          ]),
+          t.callExpression(t.identifier("require"), [
+            t.stringLiteral(newSource),
+          ]),
+        ),
+      ]),
+    ];
+  } else {
+    return [
+      t.variableDeclaration(path.node.kind, [
+        t.variableDeclarator(
+          t.identifier(id),
+          t.callExpression(t.identifier("require"), [
+            t.stringLiteral(newSource),
+          ]),
+        ),
+      ]),
+    ];
+  }
+}
+
+export function handleReactNativeWebObjectPatternRequire(
+  path: NodePath<VariableDeclaration>,
+  t: BabelTypes,
+  id: ObjectPattern,
+  source: string,
+  filename: string,
+) {
+  const parsedSource = parseReactNativeWebSource(source, filename);
+
+  // Don't handle `const { Text } = require('react-native-web/dist/cjs/Text');` - we only handle package exports
+  if (!parsedSource || parsedSource.name) {
+    return;
+  }
+
+  const statements: Statement[] = [];
+
+  for (const identifier of id.properties) {
+    if (t.isRestElement(identifier)) {
+      // Bail out on `const { ...rest } = require('react-native-web');`
+      // We need to exit as we do not handle `const { Text, ...rest } = require('react-native-web');`
+      return;
+    } else if (
+      !(t.isIdentifier(identifier.value) && t.isIdentifier(identifier.key))
+    ) {
+      // Bail out on anything that isn't `const { <key>: <identifier> } = require('react-native-web');`
+      return;
+    } else {
+      const name = identifier.key.name;
+
+      if (!allowedModules.has(name)) {
+        statements.push(
+          t.variableDeclaration(path.node.kind, [
+            t.variableDeclarator(
+              t.objectPattern([identifier]),
+              t.callExpression(t.identifier("require"), [
+                t.stringLiteral(source),
+              ]),
+            ),
+          ]),
+        );
+      } else {
+        const newSourceWithName = `react-native-css/components/${name}`;
+
+        statements.push(
+          t.variableDeclaration(path.node.kind, [
+            t.variableDeclarator(
+              t.objectPattern([
+                t.objectProperty(
+                  t.identifier(name),
+                  t.identifier(identifier.value.name),
+                  false,
+                  true,
+                ),
+              ]),
+              t.callExpression(t.identifier("require"), [
+                t.stringLiteral(newSourceWithName),
+              ]),
+            ),
+          ]),
+        );
+      }
+    }
+  }
+
+  return statements;
+}

package/src/babel/react-native.ts

@@ -0,0 +1,226 @@
+import { dirname, resolve } from "path";
+
+import { type NodePath } from "@babel/traverse";
+import tBabelTypes, {
+  type ImportDeclaration,
+  type ObjectPattern,
+  type Statement,
+  type VariableDeclaration,
+} from "@babel/types";
+
+import { allowedModules } from "./allowedModules";
+
+type BabelTypes = typeof tBabelTypes;
+
+function parseReactNativeSource(source: string, filename: string) {
+  if (source.startsWith(".")) {
+    source = resolve(dirname(filename), source);
+
+    const internalPath = source.split("react-native/Libraries/Components/")[1];
+    if (!internalPath) {
+      return;
+    }
+
+    // Strip the absolute system filepath
+    source = `react-native/Libraries/Components/${internalPath}`;
+  }
+
+  if (source === "react-native") {
+    return { source: "react-native-css/components" };
+  } else if (source.startsWith("react-native/")) {
+    const name = source.split("/").at(-1);
+    if (!name || !allowedModules.has(name)) {
+      return;
+    }
+
+    return {
+      source: `react-native-css/components/${name}`,
+      name,
+    };
+  }
+
+  return;
+}
+
+export function handleReactNativeImport(
+  declaration: ImportDeclaration,
+  t: BabelTypes,
+  filename: string,
+): Statement[] | undefined {
+  const { specifiers, source } = declaration;
+
+  const rnwSource = parseReactNativeSource(source.value, filename);
+  if (!rnwSource) {
+    return;
+  }
+
+  if (specifiers.length === 0) {
+    return [
+      t.importDeclaration([], t.stringLiteral("react-native-css/components")),
+    ];
+  }
+
+  const statements: Statement[] = [];
+
+  for (const specifier of specifiers) {
+    if (t.isImportDefaultSpecifier(specifier)) {
+      const { source: newSource, name } = rnwSource;
+
+      if (!name) {
+        statements.push(
+          t.importDeclaration(
+            [t.importDefaultSpecifier(specifier.local)],
+            t.stringLiteral(newSource),
+          ),
+        );
+      } else {
+        statements.push(
+          t.importDeclaration(
+            [t.importSpecifier(specifier.local, specifier.local)],
+            t.stringLiteral(`react-native-css/components/${name}`),
+          ),
+        );
+      }
+    } else if (t.isImportNamespaceSpecifier(specifier)) {
+      statements.push(
+        t.importDeclaration(
+          [specifier],
+          t.stringLiteral("react-native-css/components"),
+        ),
+      );
+    } else {
+      const localName = t.isStringLiteral(specifier.imported)
+        ? specifier.imported.value
+        : specifier.imported.name;
+
+      if (!allowedModules.has(localName)) {
+        statements.push(t.importDeclaration([specifier], source));
+      } else {
+        statements.push(
+          t.importDeclaration(
+            [t.importSpecifier(specifier.local, specifier.imported)],
+            t.stringLiteral(`react-native-css/components/${localName}`),
+          ),
+        );
+      }
+    }
+  }
+
+  return statements;
+}
+
+export function handleReactNativeIdentifierRequire(
+  path: NodePath<VariableDeclaration>,
+  t: BabelTypes,
+  id: string,
+  source: string,
+  filename: string,
+) {
+  const parsedSource = parseReactNativeSource(source, filename);
+
+  if (!parsedSource) {
+    return;
+  }
+
+  const { source: newSource, name } = parsedSource;
+
+  if (name) {
+    return [
+      t.variableDeclaration(path.node.kind, [
+        t.variableDeclarator(
+          t.objectPattern([
+            name === id
+              ? t.objectProperty(
+                  t.identifier(name),
+                  t.identifier(id),
+                  false,
+                  true,
+                )
+              : t.objectProperty(t.identifier(name), t.identifier(id)),
+          ]),
+          t.callExpression(t.identifier("require"), [
+            t.stringLiteral(newSource),
+          ]),
+        ),
+      ]),
+    ];
+  } else {
+    return [
+      t.variableDeclaration(path.node.kind, [
+        t.variableDeclarator(
+          t.identifier(id),
+          t.callExpression(t.identifier("require"), [
+            t.stringLiteral(newSource),
+          ]),
+        ),
+      ]),
+    ];
+  }
+}
+
+export function handleReactNativeObjectPatternRequire(
+  path: NodePath<VariableDeclaration>,
+  t: BabelTypes,
+  id: ObjectPattern,
+  source: string,
+  filename: string,
+) {
+  const parsedSource = parseReactNativeSource(source, filename);
+
+  // Don't handle `const { Text } = require('react-native/Libraries/Text/Text');` - we only handle package exports
+  if (!parsedSource || parsedSource.name) {
+    return;
+  }
+
+  const statements: Statement[] = [];
+
+  for (const identifier of id.properties) {
+    if (t.isRestElement(identifier)) {
+      // Bail out on `const { ...rest } = require('react-native');`
+      // We need to exit as we do not handle `const { Text, ...rest } = require('react-native');`
+      return;
+    } else if (
+      !(t.isIdentifier(identifier.value) && t.isIdentifier(identifier.key))
+    ) {
+      // Bail out on anything that isn't `const { <key>: <identifier> } = require('react-native');`
+      return;
+    } else {
+      const name = identifier.key.name;
+
+      if (!allowedModules.has(name)) {
+        statements.push(
+          t.variableDeclaration(path.node.kind, [
+            t.variableDeclarator(
+              t.objectPattern([identifier]),
+              t.callExpression(t.identifier("require"), [
+                t.stringLiteral(source),
+              ]),
+            ),
+          ]),
+        );
+      } else {
+        const newSourceWithName = `react-native-css/components/${name}`;
+
+        statements.push(
+          t.variableDeclaration(path.node.kind, [
+            t.variableDeclarator(
+              t.objectPattern([
+                t.objectProperty(
+                  t.identifier(name),
+                  t.identifier(identifier.value.name),
+                  false,
+                  true,
+                ),
+              ]),
+              t.callExpression(t.identifier("require"), [
+                t.stringLiteral(newSourceWithName),
+              ]),
+            ),
+          ]),
+        );
+      }
+    }
+  }
+
+  return statements;
+}