diff --git a/benchmark/index.test.js b/benchmark/index.test.js index 5ae85ef..19e4b8e 100644 --- a/benchmark/index.test.js +++ b/benchmark/index.test.js @@ -32,6 +32,11 @@ suite.add('Styled Components', () => { const results = {} +afterAll(() => { + const result = `const results = ${JSON.stringify(results, null, 2)};\n` + fs.writeFileSync(`${__dirname}/results.js`, result) +}) + it('runs', () => { suite .on('complete', (e) => { @@ -44,7 +49,6 @@ it('runs', () => { let max = first let minFunc = firstFunc - let maxFunc = firstFunc let output = '' @@ -56,7 +60,6 @@ it('runs', () => { if (mean > max) { max = mean - maxFunc = name } const result = mean * 1000 @@ -73,8 +76,3 @@ it('runs', () => { }) .run() }) - -afterAll(() => { - const result = `const results = ${JSON.stringify(results, null, 2)};\n` - fs.writeFileSync(`${__dirname}/results.js`, result) -}) diff --git a/benchmark/results.js b/benchmark/results.js index c383a8f..0893c9a 100644 --- a/benchmark/results.js +++ b/benchmark/results.js @@ -1,3 +1,4 @@ +// eslint-disable-next-line no-unused-vars const results = { Shakl: 0.029_811_424_241_520_11, Emotion: 0.037_209_380_871_224_86, diff --git a/src/index.ts b/src/index.ts index 9ab3ab6..1451b1b 100644 --- a/src/index.ts +++ b/src/index.ts @@ -38,7 +38,7 @@ export type StyledComponent

= React.ForwardR } const styled = -

= {}>( +

= {}>( // eslint-disable-line @typescript-eslint/no-empty-object-type Comp: React.ComponentType

, config: Config = {} ) => diff --git a/test/index.type-test.tsx b/test/index.type-test.tsx index a16dd8c..bc570d8 100644 --- a/test/index.type-test.tsx +++ b/test/index.type-test.tsx @@ -1,75 +1,112 @@ -import React, {Text, ViewStyle} from 'react-native' +import type { ViewStyle } from 'react-native' +import React, { Text } from 'react-native' import styled from '../src/index' import extendedStyled from '../src/rn' -import {useRef} from "react"; -import LinearGradient, { LinearGradientProps } from 'react-native-linear-gradient' +import { useRef } from 'react' +import type { LinearGradientProps } from 'react-native-linear-gradient' +import LinearGradient from 'react-native-linear-gradient' -const StyledText = styled(Text)(({ transparent }: { transparent?: boolean; color: string }) => ({ flex: 1, opacity: transparent ? 0.5 : 1 })) +const StyledText = styled(Text)(({ transparent }: { transparent?: boolean; color: string }) => ({ + flex: 1, + opacity: transparent ? 0.5 : 1, +})) const StyledTextWithAttrs = StyledText.attrs({ color: 'black' }) const StyledTextWithAttrsFromConfig = styled(StyledText, { attrs: { color: 'black' } })() -const StyledScalableText = StyledText.extend(({ big }: { big?: boolean }) => ({ fontSize: big ? 20 : 10 })) +const StyledScalableText = StyledText.extend(({ big }: { big?: boolean }) => ({ + fontSize: big ? 20 : 10, +})) const StyledTextWithObjectProps = styled(Text)({ flex: 1, opacity: 1 }) -const ExtendedStyledText = extendedStyled.Text(({ transparent }: { transparent?: boolean; }) => ({ flex: 1, opacity: transparent ? 0.5 : 1 })) -const ExtendedStyledTextWithStyle = extendedStyled(Text)((props: {specificColor: string}) => ({color: props.specificColor})) -const ExtenedStyledTextWithAttrs = extendedStyled.Text(({ transparent }: { transparent?: boolean; big?:boolean }) => ({ flex: 1, opacity: transparent ? 0.5 : 1 })).attrs(({ big}) => ({ - ellipsizeMode: big ? 'middle' : 'head', +const ExtendedStyledText = extendedStyled.Text(({ transparent }: { transparent?: boolean }) => ({ + flex: 1, + opacity: transparent ? 0.5 : 1, })) +const ExtendedStyledTextWithStyle = extendedStyled(Text)((props: { specificColor: string }) => ({ + color: props.specificColor, +})) +const ExtenedStyledTextWithAttrs = extendedStyled + .Text(({ transparent }: { transparent?: boolean; big?: boolean }) => ({ + flex: 1, + opacity: transparent ? 0.5 : 1, + })) + .attrs(({ big }) => ({ + ellipsizeMode: big ? 'middle' : 'head', + })) -const StyledView = extendedStyled.View({width: 100}) -const StyledViewWithDynamicProps = extendedStyled.View((props: {active: boolean}) => ({width: props.active ? 100 : 50})) +const StyledView = extendedStyled.View({ width: 100 }) +const StyledViewWithDynamicProps = extendedStyled.View((props: { active: boolean }) => ({ + width: props.active ? 100 : 50, +})) const Row = extendedStyled.View((props: { spaced?: boolean; full?: boolean }) => ({ - alignItems: 'center', - flexDirection: 'row', - justifyContent: props.spaced ? 'space-between' : undefined, - width: props.full ? '100%' : undefined, + alignItems: 'center', + flexDirection: 'row', + justifyContent: props.spaced ? 'space-between' : undefined, + width: props.full ? '100%' : undefined, })) +const StyledImage = extendedStyled.Image({ width: 100 }) +const StyledImageWithDynamicProps = extendedStyled.Image((props: { active: boolean }) => ({ + width: props.active ? 100 : 50, +})) -const StyledImage = extendedStyled.Image({width: 100}) -const StyledImageWithDynamicProps = extendedStyled.Image((props: {active: boolean}) => ({width: props.active ? 100 : 50})) - -const StyledTouchable = extendedStyled.Touchable({width: 100}) -const StyledTouchableWithDynamicProps = extendedStyled.Image((props: {active: boolean}) => ({width: props.active ? 100 : 50})) +const StyledTouchable = extendedStyled.Touchable({ width: 100 }) +const StyledTouchableWithDynamicProps = extendedStyled.Image((props: { active: boolean }) => ({ + width: props.active ? 100 : 50, +})) const ViewWithText = extendedStyled.View({}).withChild(StyledText) const extendedWithLinear = Object.assign(extendedStyled, { - LinearGradient: styled(LinearGradient, { - name: 'styled(LinearGradient)', - }) + LinearGradient: styled(LinearGradient, { + name: 'styled(LinearGradient)', + }), }) -const DangerGradient = styled(LinearGradient)().attrs({ colors: ['orange', 'red']}) -const DefaultGradient = extendedWithLinear.LinearGradient({ }).attrs({ - colors: ['blue', 'green'], +const DangerGradient = styled(LinearGradient)().attrs({ colors: ['orange', 'red'] }) +const DefaultGradient = extendedWithLinear.LinearGradient({}).attrs({ + colors: ['blue', 'green'], }) const MyScreen = () => { - const ref = useRef() + const ref = useRef() return ( <> - Hello Transparent World - Hello Transparent World with ref - Color set through .attrs() and therefore not required - Color is set through config.attrs and therefore not required + + Hello Transparent World + + + Hello Transparent World with ref + + + Color set through .attrs() and therefore not required + + + Color is set through config.attrs and therefore not required + {/* should also work without transparent prop */} Hello World {/* @ts-expect-error -- should not work without required color prop */} Hello World {/* @ts-expect-error -- big is only available on StyledScalableText */} - Hello World - Hi + + Hello World + + + Hi + {/* @ts-expect-error -- transparent prop is not allowed */} Hi Hello Extended World - Hello Extended World - Text with inline style + + Hello Extended World + + + Text with inline style + Just a View - - some text - - + + some text + View with dynamic style @@ -77,12 +114,14 @@ const MyScreen = () => { Image with dynamic style Touchable - Touchable with dynamic style + + Touchable with dynamic style + {/* @ts-expect-error -- missing "colors" */} - + {/* doesn't require optional props */}