kylefang/nativewind
1
0
Fork 0
mirror of https://github.com/zhigang1992/nativewind.git synced 2026-06-15 10:17:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: rename allowModules and blockmodules

Browse Source 
BREAKING CHANGES:

- allowModules has been renamed to allowModuleTransform
- blockModules has been renamed to blockModuleTransform
This commit is contained in:
Mark Lawlor
2022-05-05 11:19:08 +10:00
parent 172c4d561a
commit cae86cf93e
12 changed files with 41 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
README.md
View File

@@ -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` <br />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` <br />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

6
__tests__/visitor/allow-modules-with-content/code.tsx
View File

@@ -7,8 +7,10 @@ export function Test() {
return (
<TailwindProvider>
<Text className="font-bold">Hello world!</Text>
<MotiText className="font-bold">Not in allowModules</MotiText>
<TestComponent className="font-bold">Not in allowModules</TestComponent>
<MotiText className="font-bold">Not in allowModuleTransform</MotiText>
<TestComponent className="font-bold">
Not in allowModuleTransform
</TestComponent>
</TailwindProvider>
);
}

2
__tests__/visitor/allow-modules-with-content/options.json
View File

@@ -1,4 +1,4 @@
{
"allowModules": ["react-native"],
"allowModuleTransform": ["react-native"],
"tailwindConfigPath": "./allow-modules-with-content/tailwind.config.js"
}

6
__tests__/visitor/allow-modules-with-content/output.tsx
View File

@@ -10,8 +10,10 @@ export function Test() {
<StyledComponent className="font-bold" component={Text}>
Hello world!
</StyledComponent>
<MotiText className="font-bold">Not in allowModules</MotiText>
<TestComponent className="font-bold">Not in allowModules</TestComponent>
<MotiText className="font-bold">Not in allowModuleTransform</MotiText>
<TestComponent className="font-bold">
Not in allowModuleTransform
</TestComponent>
</TailwindProvider>
);
}

2
__tests__/visitor/allow-modules/code.tsx
View File

@@ -7,7 +7,7 @@ export function Test() {
<TailwindProvider>
<View className="container">
<Text className="font-bold">Hello world!</Text>
<MotiText className="font-bold">Not in allowModules</MotiText>
<MotiText className="font-bold">Not in allowModuleTransform</MotiText>
</View>
</TailwindProvider>
);

2
__tests__/visitor/allow-modules/options.json
View File

@@ -1,3 +1,3 @@
{
"allowModules": ["react-native"]
"allowModuleTransform": ["react-native"]
}

2
__tests__/visitor/allow-modules/output.tsx
View File

@@ -10,7 +10,7 @@ export function Test() {
<StyledComponent className="font-bold" component={Text}>
Hello world!
</StyledComponent>
<MotiText className="font-bold">Not in allowModules</MotiText>
<MotiText className="font-bold">Not in allowModuleTransform</MotiText>
</StyledComponent>
</TailwindProvider>
);

2
__tests__/visitor/block-modules/options.json
View File

@@ -1,3 +1,3 @@
{
"blockModules": ["moti"]
"blockModuleTransform": ["moti"]
}

6
src/babel/root-visitor.ts
View File

@@ -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,

4
src/babel/types.d.ts vendored
View File

@@ -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;

10
src/babel/utils/allowed-paths.ts
View File

@@ -10,20 +10,20 @@ const defaultContent: NonNullable<TailwindConfig["content"]> = {
};
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,
};
}

17
src/babel/utils/get-import-blocked-components.ts
View File

@@ -19,7 +19,12 @@ export function getImportBlockedComponents(
path: NodePath<ImportDeclaration>,
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 =