From cae86cf93edfb10133a0b89ee0c1dde907241001 Mon Sep 17 00:00:00 2001 From: Mark Lawlor Date: Thu, 5 May 2022 11:19:08 +1000 Subject: [PATCH] feat: rename allowModules and blockmodules BREAKING CHANGES: - allowModules has been renamed to allowModuleTransform - blockModules has been renamed to blockModuleTransform --- README.md | 14 +++++++------- .../visitor/allow-modules-with-content/code.tsx | 6 ++++-- .../allow-modules-with-content/options.json | 2 +- .../allow-modules-with-content/output.tsx | 6 ++++-- __tests__/visitor/allow-modules/code.tsx | 2 +- __tests__/visitor/allow-modules/options.json | 2 +- __tests__/visitor/allow-modules/output.tsx | 2 +- __tests__/visitor/block-modules/options.json | 2 +- src/babel/root-visitor.ts | 6 +++--- src/babel/types.d.ts | 4 ++-- src/babel/utils/allowed-paths.ts | 10 +++++----- .../utils/get-import-blocked-components.ts | 17 +++++++++++------ 12 files changed, 41 insertions(+), 32 deletions(-) diff --git a/README.md b/README.md index c0fc774..a1e5c33 100644 --- a/README.md +++ b/README.md @@ -277,13 +277,13 @@ module.exports = { }; ``` -| Option | Values | Default | Description | -| -------------- | ----------------------------------------------------- | --------------------------------------------- | ------------------------------------------------------------------------------------------ | -| platform | `native`, `web`, `ios`, `android`, `windows`, `macos` | `native` | Specifies how the className is transformed. | -| hmr | `boolean` | Development: `true`
Production: `false` | Allow fast-refresh of styles | -| tailwindConfig | Path relative to `cwd` | `tailwind.config.js` | Provide a custom `tailwind.config.js`. Useful for setting different settings per platform. | -| allowModules | `*`, `string[]` | `*` | Only transform components from these imported modules. `*` will transform all modules | -| blockModules | `string[]` | `[]` | Do not transform components from these imported modules. | +| Option | Values | Default | Description | +| -------------------- | ----------------------------------------------------- | --------------------------------------------- | ------------------------------------------------------------------------------------------ | +| platform | `native`, `web`, `ios`, `android`, `windows`, `macos` | `native` | Specifies how the className is transformed. | +| hmr | `boolean` | Development: `true`
Production: `false` | Allow fast-refresh of styles | +| tailwindConfig | Path relative to `cwd` | `tailwind.config.js` | Provide a custom `tailwind.config.js`. Useful for setting different settings per platform. | +| allowModuleTransform | `*`, `string[]` | `*` | Only transform components from these imported modules. `*` will transform all modules | +| blockModuleTransform | `string[]` | `[]` | Do not transform components from these imported modules. | ### CLI Options diff --git a/__tests__/visitor/allow-modules-with-content/code.tsx b/__tests__/visitor/allow-modules-with-content/code.tsx index b00cda9..0e3676f 100644 --- a/__tests__/visitor/allow-modules-with-content/code.tsx +++ b/__tests__/visitor/allow-modules-with-content/code.tsx @@ -7,8 +7,10 @@ export function Test() { return ( Hello world! - Not in allowModules - Not in allowModules + Not in allowModuleTransform + + Not in allowModuleTransform + ); } diff --git a/__tests__/visitor/allow-modules-with-content/options.json b/__tests__/visitor/allow-modules-with-content/options.json index fd9bf18..2e7d484 100644 --- a/__tests__/visitor/allow-modules-with-content/options.json +++ b/__tests__/visitor/allow-modules-with-content/options.json @@ -1,4 +1,4 @@ { - "allowModules": ["react-native"], + "allowModuleTransform": ["react-native"], "tailwindConfigPath": "./allow-modules-with-content/tailwind.config.js" } diff --git a/__tests__/visitor/allow-modules-with-content/output.tsx b/__tests__/visitor/allow-modules-with-content/output.tsx index 3a9ffd3..ee8342a 100644 --- a/__tests__/visitor/allow-modules-with-content/output.tsx +++ b/__tests__/visitor/allow-modules-with-content/output.tsx @@ -10,8 +10,10 @@ export function Test() { Hello world! - Not in allowModules - Not in allowModules + Not in allowModuleTransform + + Not in allowModuleTransform + ); } diff --git a/__tests__/visitor/allow-modules/code.tsx b/__tests__/visitor/allow-modules/code.tsx index 6d0a97b..3e7f7d1 100644 --- a/__tests__/visitor/allow-modules/code.tsx +++ b/__tests__/visitor/allow-modules/code.tsx @@ -7,7 +7,7 @@ export function Test() { Hello world! - Not in allowModules + Not in allowModuleTransform ); diff --git a/__tests__/visitor/allow-modules/options.json b/__tests__/visitor/allow-modules/options.json index 16d9ba8..1823c17 100644 --- a/__tests__/visitor/allow-modules/options.json +++ b/__tests__/visitor/allow-modules/options.json @@ -1,3 +1,3 @@ { - "allowModules": ["react-native"] + "allowModuleTransform": ["react-native"] } diff --git a/__tests__/visitor/allow-modules/output.tsx b/__tests__/visitor/allow-modules/output.tsx index 26a732e..8e8421a 100644 --- a/__tests__/visitor/allow-modules/output.tsx +++ b/__tests__/visitor/allow-modules/output.tsx @@ -10,7 +10,7 @@ export function Test() { Hello world! - Not in allowModules + Not in allowModuleTransform ); diff --git a/__tests__/visitor/block-modules/options.json b/__tests__/visitor/block-modules/options.json index 7016e9e..e956343 100644 --- a/__tests__/visitor/block-modules/options.json +++ b/__tests__/visitor/block-modules/options.json @@ -1,3 +1,3 @@ { - "blockModules": ["moti"] + "blockModuleTransform": ["moti"] } diff --git a/src/babel/root-visitor.ts b/src/babel/root-visitor.ts index 216265b..05176d7 100644 --- a/src/babel/root-visitor.ts +++ b/src/babel/root-visitor.ts @@ -23,7 +23,7 @@ export default function rootVisitor( }, }); - const { allowModules, allowRelativeModules } = getAllowedOptions( + const { allowModuleTransform, allowRelativeModules } = getAllowedOptions( tailwindConfig, options ); @@ -48,12 +48,12 @@ export default function rootVisitor( platform: "native", hmr: true, skipTransform: false, - blockModules: [], + blockModuleTransform: [], hasStyledComponentImport: false, hasClassNames: false, ...state, ...state.opts, - allowModules, + allowModuleTransform, allowRelativeModules, blockList: new Set(), hasProvider: false, diff --git a/src/babel/types.d.ts b/src/babel/types.d.ts index 4a14306..56fc8d3 100644 --- a/src/babel/types.d.ts +++ b/src/babel/types.d.ts @@ -3,8 +3,8 @@ import { ViewStyle, TextStyle, ImageStyle } from "react-native"; export type AllowPathOptions = "*" | string[]; export interface TailwindcssReactNativeBabelOptions { - allowModules?: AllowPathOptions; - blockModules?: string[]; + allowModuleTransform?: AllowPathOptions; + blockModuleTransform?: string[]; platform?: "web" | "native"; skipTransform?: false; rem?: number; diff --git a/src/babel/utils/allowed-paths.ts b/src/babel/utils/allowed-paths.ts index 705b87e..4e981b0 100644 --- a/src/babel/utils/allowed-paths.ts +++ b/src/babel/utils/allowed-paths.ts @@ -10,20 +10,20 @@ const defaultContent: NonNullable = { }; interface GetAllowedOptionsOptions { - allowModules: AllowPathOptions; + allowModuleTransform: AllowPathOptions; allowRelativeModules: AllowPathOptions; } export function getAllowedOptions( { content = defaultContent }: TailwindConfig, - { allowModules = "*" }: TailwindcssReactNativeBabelOptions + { allowModuleTransform = "*" }: TailwindcssReactNativeBabelOptions ): GetAllowedOptionsOptions { const contentPaths = Array.isArray(content) ? content : content.files; return { - allowModules: Array.isArray(allowModules) - ? ["react-native", "react-native-web", ...allowModules] - : allowModules, + allowModuleTransform: Array.isArray(allowModuleTransform) + ? ["react-native", "react-native-web", ...allowModuleTransform] + : allowModuleTransform, allowRelativeModules: contentPaths.length === 0 ? "*" : contentPaths, }; } diff --git a/src/babel/utils/get-import-blocked-components.ts b/src/babel/utils/get-import-blocked-components.ts index 82c14df..4f004be 100644 --- a/src/babel/utils/get-import-blocked-components.ts +++ b/src/babel/utils/get-import-blocked-components.ts @@ -19,7 +19,12 @@ export function getImportBlockedComponents( path: NodePath, state: VisitorState ): string[] { - const { allowModules, allowRelativeModules, blockModules, filename } = state; + const { + allowModuleTransform, + allowRelativeModules, + blockModuleTransform, + filename, + } = state; const require = createRequire(filename); const moduleName = path.node.source.value; @@ -67,17 +72,17 @@ export function getImportBlockedComponents( } } else { isNodeModule = true; - isBlocked = micromatch.isMatch(moduleName, blockModules); + isBlocked = micromatch.isMatch(moduleName, blockModuleTransform); isAllowed = - allowModules === "*" + allowModuleTransform === "*" ? true - : micromatch.isMatch(moduleName, allowModules); + : micromatch.isMatch(moduleName, allowModuleTransform); } } if (isNodeModule) { - isBlocked ??= micromatch.isMatch(moduleName, blockModules); - isAllowed ??= micromatch.isMatch(moduleName, allowModules); + isBlocked ??= micromatch.isMatch(moduleName, blockModuleTransform); + isAllowed ??= micromatch.isMatch(moduleName, allowModuleTransform); returnComponentsAsBlocked = isBlocked || !isAllowed; } else { const isNotAllowedRelative =