Skip to content

Commit

Permalink
feat: allow user to specify own imports for babel plugin
Browse files Browse the repository at this point in the history
  • Loading branch information
@jpudysz
jpudysz committed Jan 13, 2025
1 parent 58eb4eb commit ca416d4
Show file tree
Hide file tree
Showing 7 changed files with 165 additions and 163 deletions.
9 changes: 5 additions & 4 deletions example/App2.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { Text as RNText, View } from 'react-native'
import React, { PropsWithChildren } from 'react'
import { StyleSheet, UnistylesVariants } from 'react-native-unistyles'
import { st } from './st'
import './unistyles'

type TextProps = PropsWithChildren & UnistylesVariants<typeof styles> & {
value: number
type TextProps = PropsWithChildren & {
value: number,
size: 'small' | 'large'
}

const Text: React.FunctionComponent<TextProps> = ({ value, children, size }) => {
Expand Down Expand Up @@ -37,7 +38,7 @@ export const App = () => {
)
}

const styles = StyleSheet.create((theme, rt) => ({
const styles = st.create((theme, rt) => ({
container: {
flex: 1,
alignItems: 'center',
Expand Down
3 changes: 2 additions & 1 deletion example/babel.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ module.exports = api => {
plugins: [
[path.join(__dirname, '../plugin'), {
debug: true,
isLocal: true
isLocal: true,
autoProcessImports: ['@lib/theme', './st'],
}],
[
'module-resolver',
Expand Down
5 changes: 5 additions & 0 deletions example/st.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { StyleSheet as st } from 'react-native-unistyles'

export {
st
}
137 changes: 0 additions & 137 deletions plugin/__tests__/ref.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,143 +50,6 @@ pluginTester({
})
`
},
{
title: 'Adds ref if there is any import from React Native',
code: `
import { View, Text } from 'react-native'
export const Example = () => {
return (
<View style={styles.container}>
<Text>Hello world</Text>
</View>
)
}
const styles = StyleSheet.create({
container: {
backgroundColor: 'red'
}
})
`,
output: `
import { Text } from 'react-native-unistyles/components/native/Text'
import { View } from 'react-native-unistyles/components/native/View'
export const Example = () => {
return (
<View style={styles.container}>
<Text>Hello world</Text>
</View>
)
}
const styles = StyleSheet.create({
container: {
backgroundColor: 'red'
}
})
`
},
{
title: 'Adds ref only for React Native components',
code: `
import { View } from 'react-native'
import { Text } from 'custom-lib'
export const Example = () => {
return (
<View style={styles.container}>
<Text style={styles.text}>Hello world</Text>
</View>
)
}
const styles = StyleSheet.create({
container: {
backgroundColor: 'red'
},
text: {
color: 'blue'
}
})
`,
output: `
import { View } from 'react-native-unistyles/components/native/View'
import { Text } from 'custom-lib'
export const Example = () => {
return (
<View style={styles.container}>
<Text style={styles.text}>Hello world</Text>
</View>
)
}
const styles = StyleSheet.create({
container: {
backgroundColor: 'red'
},
text: {
color: 'blue'
}
})
`
},
{
title: 'Preserves user\'s ref',
code: `
import React from 'react'
import { View, Text } from 'react-native'
import { StyleSheet } from 'react-native-unistyles'
export const Example = () => {
let ref = React.useRef()
return (
<View
ref={ref}
style={styles.container}
>
<Text>Hello world</Text>
</View>
)
}
const styles = StyleSheet.create({
container: {
backgroundColor: 'red'
}
})
`,
output: `
import { Text } from 'react-native-unistyles/components/native/Text'
import { View } from 'react-native-unistyles/components/native/View'
import React from 'react'
import { StyleSheet } from 'react-native-unistyles'
export const Example = () => {
let ref = React.useRef()
return (
<View ref={ref} style={styles.container}>
<Text>Hello world</Text>
</View>
)
}
const styles = StyleSheet.create(
{
container: {
backgroundColor: 'red'
}
},
92366683
)
`
},
{
title: 'Preserves user\'s ref as function',
code: `
Expand Down
106 changes: 106 additions & 0 deletions plugin/__tests__/userImports.spec.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
import { pluginTester } from 'babel-plugin-tester'
import plugin from '../'

pluginTester({
plugin,
pluginOptions: {
debug: false,
autoProcessImports: ['@codemask/styles']
},
babelOptions: {
plugins: ['@babel/plugin-syntax-jsx'],
generatorOpts: {
retainLines: true
}
},
tests: [
{
title: 'Should respect user imports',
code: `
import { View, Text } from 'react-native'
import { StyleSheet } from '@codemask/styles'
export const Example = () => {
return (
<View style={styles.container}>
<Text>Hello world</Text>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1
}
})
`,
output: `
import { Text } from 'react-native-unistyles/components/native/Text'
import { View } from 'react-native-unistyles/components/native/View'
import { StyleSheet } from '@codemask/styles'
export const Example = () => {
return (
<View style={styles.container}>
<Text>Hello world</Text>
</View>
)
}
const styles = StyleSheet.create(
{
container: {
flex: 1
}
},
467105739
)
`
},
{
title: 'Should respect user imports event if then changed the name',
code: `
import { View, Text } from 'react-native'
import { s } from '@codemask/styles'
export const Example = () => {
return (
<View style={styles.container}>
<Text>Hello world</Text>
</View>
)
}
const styles = s.create({
container: {
flex: 1
}
})
`,
output: `
import { Text } from 'react-native-unistyles/components/native/Text'
import { View } from 'react-native-unistyles/components/native/View'
import { s } from '@codemask/styles'
export const Example = () => {
return (
<View style={styles.container}>
<Text>Hello world</Text>
</View>
)
}
const styles = s.create(
{
container: {
flex: 1
}
},
467105739
)
`
},
]
})
Loading

0 comments on commit ca416d4

Please sign in to comment.