feat: run biome check on src files #556

jeremybarbet · 2025-02-04T09:41:46Z

Summary

So there is already a biome lint command, but no check --write command to format following the json config.

Added yarn check alias of biome check --write
Run the command for all src files

I am not sure what's your preferences for the formatter config.

Originally it was:

"javascript": {
  "formatter": {
    "indentStyle": "tab",
    "indentWidth": 4,
  },
},
"json": {
  "formatter": {
    "indentStyle": "tab",
    "indentWidth": 2,
  },
}

However, all the files were manually formatted with spaces instead so I run the check --write with:

"javascript/json": {
  "formatter": {
    "indentStyle": "space",
    "indentWidth": 4,
  },
}

Let me know if you want to change that config to whatever you prefer. Just thinking formatting javascript/json with the same config makes the DX easier.

Edit:

Do you want to run biome check on the CI to make sure it's correctly formatted?

vercel · 2025-02-04T09:41:50Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-native-unistyles-2.0	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 5, 2025 0:24am
react-native-unistyles-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 5, 2025 0:24am

jeremybarbet · 2025-02-04T09:42:25Z

src/components/ScopedTheme.tsx

-            {mappedChildren}
-        </React.Fragment>
-    )
+    return <>{mappedChildren}</>


Only line where I fixed a biome lint warning

Can we force <React.Fragment>, I'm not a big fan of <></>

Alright, in this case the warning was because the fragment was unnecessary so I removed it

jpudysz · 2025-02-05T10:04:03Z

Hey @jeremybarbet thanks for the PR. I'm not sure I want this to be implemented as I'm not a big fan of how it formats the code.

I'm not sure if this should be configured further, but i will point the places.

jpudysz · 2025-02-05T10:04:37Z

src/components/ScopedTheme.tsx

-            {mappedChildren}
-        </React.Fragment>
-    )
+    return <>{mappedChildren}</>


Can we force <React.Fragment>, I'm not a big fan of <></>

jpudysz · 2025-02-05T10:05:13Z

src/components/native/ImageBackground.tsx

-                UnistylesShadowRegistry.add(ref, imageClassNames?.hash)
-            }}
+            ref={
+                isServer()


what about it ? Can we tweak it? Looks bad

Same as comment below, related to ternary formatting biomejs/biome#2388

jpudysz · 2025-02-05T10:05:42Z

src/components/native/Pressable.native.tsx

-                const unistyles = typeof style === 'function'
-                    ? style({ pressed: false })
-                    : style
+                const unistyles = typeof style === 'function' ? style({ pressed: false }) : style


why it's once in multiple lines and sometimes in single line?

This is the default Biome's formatting for ternary, there is a discussion opened about it but no away at the moment to configure it

jpudysz · 2025-02-05T10:05:54Z

src/components/native/Pressable.native.tsx

-                    ? style(state)
-                    : getStyles(style as unknown as Record<string, any>)
+                const unistyles =
+                    typeof style === 'function' ? style(state) : getStyles(style as unknown as Record<string, any>)


can we increase line width?

I increased it to 130 but it may happen if it goes over that limit

jpudysz · 2025-02-05T10:06:03Z

src/components/native/Pressable.tsx

-                // @ts-expect-error hidden from TS
-                UnistylesShadowRegistry.add(storedRef, classNames?.hash)
+            ref={
+                isServer()


jpudysz · 2025-02-05T10:06:54Z

src/components/native/Pressable.tsx

 import { isServer } from '../../web/utils'

 type Variants = Record<string, string | boolean | undefined>
 type WebPressableState = {
-    pressed: boolean,
-    hovered: boolean,
+    pressed: boolean


can we have commas in types?

I did change trailingCommas: 'none' to fix one of your comment below, but it then removes commas for both types and interfaces

jpudysz · 2025-02-05T10:07:05Z

src/core/createUnistylesElement.tsx

-                    }
-                }}
+                ref={
+                    isServer()


jpudysz · 2025-02-05T10:08:17Z

src/core/warn.ts

-        const unistylesKeys = Object
-            .keys(style)
-            .filter(key => key.startsWith('unistyles-'))
+        const unistylesKeys = Object.keys(style).filter(key => key.startsWith('unistyles-'))


what if I prefer my style?

I added an example, you can do // biome-ignore format: I like it better this way but it's a bit cumbersome to do

jpudysz · 2025-02-05T10:08:55Z

src/hooks/useMedia.ts

@@ -42,6 +44,6 @@ export const useMedia = (config: { mq: symbol }) => {
    useEffect(() => () => disposeRef.current(), [])

    return {
-        isVisible
+        isVisible,


im not sure about trailing commas

Fixed it with trailingCommas: 'none'

jeremybarbet · 2025-02-05T12:40:16Z

As stated in Biome documentation, their formatter is very opinionated, similar to how prettier works.

Unfortunately (or fortunately), it can't be configured in many ways. Which make sense, the goal is to create/follow an industry standard.

If you prefer to follow your own formatting, I would then suggest disabling the formatter all together. It would be too much of an hassle to use biome-ignore here and there and make your life even harder.

Alternative, is to not think about it, and let the formatter take all these decisions for you and let it handle for you. I used to be like you before and having a very strong opinion on how things should be formatted; then I tried prettier and never looked back.

Feel free to close this PR if you are not happy with the latest configuration changes. I'll be happy to open another PR to remove the formatter instead.

jpudysz · 2025-02-06T13:15:30Z

I really appreciate your contribution, @jeremybarbet, as you've already submitted a few great PRs. I think I'm going to skip this one since we don't use any code formatters in Codemask. We have our own rules that neither Prettier nor Biome can support.

Of course, we might miss some spots, but that's okay.

I hope you won't be upset, as I know this took you some time.

jeremybarbet · 2025-02-06T13:22:21Z

No worries, I understand! Thanks for taking the time to look at it!

Cheers

feat: run biome check on src files

807848b

jeremybarbet commented Feb 4, 2025

View reviewed changes

vercel bot deployed to Preview – react-native-unistyles-2.0 February 4, 2025 09:42 View deployment

vercel bot deployed to Preview – react-native-unistyles-docs February 4, 2025 09:43 View deployment

fix: re-apply tsc comments correctly

d774d5c

vercel bot deployed to Preview – react-native-unistyles-2.0 February 4, 2025 09:46 View deployment

vercel bot deployed to Preview – react-native-unistyles-docs February 4, 2025 09:47 View deployment

jpudysz requested changes Feb 5, 2025

View reviewed changes

chore: update trailingCommas and lineWidth

60bb1e2

vercel bot deployed to Preview – react-native-unistyles-2.0 February 5, 2025 12:23 View deployment

vercel bot deployed to Preview – react-native-unistyles-docs February 5, 2025 12:24 View deployment

jpudysz closed this Feb 6, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: run biome check on src files #556

feat: run biome check on src files #556

jeremybarbet commented Feb 4, 2025 •

edited

Loading

vercel bot commented Feb 4, 2025 •

edited

Loading

jeremybarbet Feb 4, 2025

jpudysz Feb 5, 2025

jeremybarbet Feb 5, 2025 •

edited

Loading

jpudysz commented Feb 5, 2025

jpudysz Feb 5, 2025

jpudysz Feb 5, 2025

jeremybarbet Feb 5, 2025

jpudysz Feb 5, 2025

jeremybarbet Feb 5, 2025

jpudysz Feb 5, 2025

jeremybarbet Feb 5, 2025

jpudysz Feb 5, 2025

jpudysz Feb 5, 2025

jeremybarbet Feb 5, 2025

jpudysz Feb 5, 2025

jpudysz Feb 5, 2025

jeremybarbet Feb 5, 2025

jpudysz Feb 5, 2025

jeremybarbet Feb 5, 2025

jeremybarbet commented Feb 5, 2025

jpudysz commented Feb 6, 2025

jeremybarbet commented Feb 6, 2025

feat: run biome check on src files #556

feat: run biome check on src files #556

Conversation

jeremybarbet commented Feb 4, 2025 • edited Loading

Summary

vercel bot commented Feb 4, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jeremybarbet Feb 5, 2025 • edited Loading

Choose a reason for hiding this comment

jpudysz commented Feb 5, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jeremybarbet commented Feb 5, 2025

jpudysz commented Feb 6, 2025

jeremybarbet commented Feb 6, 2025

jeremybarbet commented Feb 4, 2025 •

edited

Loading

vercel bot commented Feb 4, 2025 •

edited

Loading

jeremybarbet Feb 5, 2025 •

edited

Loading