Road to 2.0 #41
Replies: 25 comments 85 replies
-
|
As far as dropping |
Beta Was this translation helpful? Give feedback.
-
|
Yeah, I’m just wondering if users need more than two themes: light and dark. If not, then I guess I can drop the context. For React Native, I can use preferences + JSI, and for web, I can use CSS variables. |
Beta Was this translation helpful? Give feedback.
-
|
+1 for only dark/light, esp if it increases DX |
Beta Was this translation helpful? Give feedback.
-
|
I would not prefer only 2 themes. I guess if you decide to go down the route of only 2, I don't mind still using context so if it was kept as legacy would be great. |
Beta Was this translation helpful? Give feedback.
-
|
As far as 2 or more themes — I'd prefer it to be up to devs using the tool. |
Beta Was this translation helpful? Give feedback.
-
|
Postponing it as it has a low priority. |
Beta Was this translation helpful? Give feedback.
-
|
I will keep this task, as the codebase will slightly change. |
Beta Was this translation helpful? Give feedback.
-
|
If anyone is interested code is available on the branch 2.0. |
Beta Was this translation helpful? Give feedback.
-
|
This won't land in the release, I can generate the typescript types by babel plugin but it's not recommended. We will stick to |
Beta Was this translation helpful? Give feedback.
-
|
I have edited my original post to cover what will be available in version 2.0. |
Beta Was this translation helpful? Give feedback.
-
|
Here is my proposal for improved media query syntax. I wasn't satisfied with writing it as plain text.
We can discuss whether to shorten it further to something like: or not. This is a working example (POC) and will help me reduce the time spent parsing the queries. It will also help me minimize the number of TypeScript types. This change is backward compatible as it uses the existing syntax. It will also support single values like:
const stylesheet = createStyleSheet((theme, mq) => ({
// styles
}))Let me know what do you think about it! |
Beta Was this translation helpful? Give feedback.
-
|
Implemented |
Beta Was this translation helpful? Give feedback.
-
|
ICYMI - variants are available from alpha 11!
|
Beta Was this translation helpful? Give feedback.
-
|
What is the point of having a C++ core? Is it performance? How is performance improved if everything is loaded loaded into React state at the end of the day anyway? |
Beta Was this translation helpful? Give feedback.
-
|
There are many benefits and one of them is performance indeed. I have to use useState hook, because otherwise React won't know that component needs to be re-rendered. I can mention few other benefits to highlight the advantages:
Of course that's not all, im still experimenting what to put where: native vs js to get the best performance. I hope that it answers your question. |
Beta Was this translation helpful? Give feedback.
-
|
I've finalized API for plugins:
|
Beta Was this translation helpful? Give feedback.
-
|
Hello, Thank you so much for this upgrade and this library, glad to tell you that I am testing it heavily with you! I had a question in my mind, what is the best way to achieve multiple/nested variants/customizations using this library? On the top of my mind I thought about 2 solutions but honestly neither of them felt super clean and I am checking with you if you have a better third option.
I would prefer if I can keep it as one style instead of combining multiple styles for each variant (the way you have it for single variant), so the question is do you have any other solution for nested variants or a plan to support such thing or what? something like this: https://cva.style/docs/getting-started/variants Thanks again for all of your effort! |
Beta Was this translation helpful? Give feedback.
-
|
I was wondering how much time it will take to request multiple variants. 😅 I guess at this point, instead of a single string, I can accept an object with more keys. But with multiple variants, I should also support compoundVariants. 😭 Thanks for the tests. I will add it to my to-do list as a token of appreciation for your tests.🤫 If you have any other observations, please let me know. 🙏 |
Beta Was this translation helpful? Give feedback.
-
|
Implemented in unistyles.2.0.0-alpha.16 :) |
Beta Was this translation helpful? Give feedback.
-
|
Update on Unistyles-2.0.0-alpha.15 and alpha16. What's new?
Media queriesDue to changes in TypeScript 5.3, my previous workaround for media queries syntax is no longer viable. I have adopted a new syntax that doesn’t confuse the TypeScript engine. Note that this change only affects the syntax for defining media queries, not their functionality.
const stylesheet = createStyleSheet(theme => ({
container: {
width: {
[mq.width(100, 200)]: 200,
[mq.width(undefined, 500).height(200)]: 300
}
}
})
const stylesheet = createStyleSheet(theme => ({
container: {
width: {
[mq.only.width(100, 200)]: 200,
[mq.width(undefined, 500).and.height(200)]: 300
}
}
})TypeScript is now happy, and so do I. If you don't like new syntax with /only/ & /and/ - let me know in the comments. We're still in alpha and it can be adjusted. I'm looking forward to your feedback! VariantsVariants are truly variants now :) You can now specify multiple variants in your stylesheet. A variant is an object that contains variant groups. Each group has a variant key: const stylesheet = createStyleSheet(theme => ({
container: {
variants: {
// groups (any name you like)
size: {
// variant key (any name you like)
small: {
// React Native styles
height: 50,
width: 50
},
medium: {
// or breakpoints!
height: {
xs: 100,
md: 150
},
width: {
xs: 100,
md: 150
}
},
large: {
// or media queries!
height: {
[mq.only.width(200)]: 100,
[mq.only.width('sm')]: 150
},
width: {
[mq.only.width(200)]: 100,
[mq.only.width('sm')]: 150
}
}
},
color: {
// other styles, you can mix them and /primary/ may have another keys than /secondary/
primary: {},
secondary: {},
// this is a special case - if you specify 'default' option it will be automatically selected for no variant
default: {}
},
// other groups
}
}
// other components with other or the same groups/names
})Now, with defined groups we need to select the variant: // means - I don't care about variants, select 'default' if any
const { styles } = useStyles(stylesheet)
// means the same, every key is optional
const { styles } = useStyles(stylesheet, {})
// select only /size/ variant, for /color/ may fallback to 'default'
const { styles } = useStyles(stylesheet, {
// TS will hint you with the available options
size: 'small', // TS: small/medium/large/undefined
})
// select all variants
const { styles } = useStyles(stylesheet, {
size: 'large',
color: 'primary'
})I hope you like it! |
Beta Was this translation helpful? Give feedback.
-
|
On a side note, I feel your library works so good with React Native Navigation by wix, Unistyles 1.x had a provider, and the problem with Wix implementation is that each screen is a tiny react app, so they don't share providers, so I had to have a provider with previous values all over again, with the new C++ implementation and getting rid of this provider it helped me a lot and made my code much cleaner. Also the adaptive theme is an amazing addition, I already had a workaround before to check colorScheme from react-native and set my theme, but now you are handling it and it is making my life easier also. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for the awesome feedback @sharifhh ! |
Beta Was this translation helpful? Give feedback.
-
|
@jpudysz |
Beta Was this translation helpful? Give feedback.
-
|
I was fighting with TypeScript. I will do it later today! 😄 |
Beta Was this translation helpful? Give feedback.
-
|
Released 2.0.0-alpha.18 🚀
|
Beta Was this translation helpful? Give feedback.
-
So do you mean we should allow to use: const { style } = useStyles(stylesheet) // -> select default if any
const { style } = useStyles(stylesheet, {}) // -> select default if any
const { style } = useStyles(stylesheet, {
size: 'large'
}) // -> selects size variant with large option
// but not
const { style } = useStyles(stylesheet, {
size: undefined
}) |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
oh sorry, so my idea was to allow only because why would you have a variant in your styles but won't select it in useStyles? usually we would have a default variant in our component and always pass a variant to useStyles hook I guess the only use case where 'default' is used is when this variant is just a customization for a secondary style (type is for input not for label, but when type is primary I wanna customize my label in that case only) honestly after explaining my suggestion I feel it doesn't make sense 😅, my problem was with readable/easy types, so maybe after you publish the fix for "&" in types, I can test more and see if my suggestion makes any sense after it. Okay so the issue is not the undefined in variants: But this will stay broken: this is the typescript now (ignore that I am accessing test in input, I just did that to see the types of the input in styles) you see the IDE thinks that background will always exist, although that's not right, if I pass undefined or 'test' then background won't be string, it will be undefined |
Beta Was this translation helpful? Give feedback.
-
|
type in the last screenshot should be so again my idea was to enforce type to solve second undefined, but now after thinking about it, it won't fix that. |
Beta Was this translation helpful? Give feedback.
-
|
I don't think it's possible 😞 I guess the second option is better because you will get correct hints that you have such key in your styles.
|
Beta Was this translation helpful? Give feedback.
-
|
I agree, yea honestly typescript is hell with generic union types 😅. anyway man again thank you for the effort to go through my comments ❤️ can't wait to see the stable version |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
I hope next month |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
I also wanted to ask another question: Does the alpha version of v2.0.0 currently support Android? Sorry for having so many questions. |
Beta Was this translation helpful? Give feedback.
-
|
Please read the first post in this thread. You will find all the informations :) |
Beta Was this translation helpful? Give feedback.
-
|
I'm using "react-native-unistyles": "^2.0.0-alpha.17", but I'm encountering a TypeScript error: |
Beta Was this translation helpful? Give feedback.
-
|
I spent the whole day to testing the v2 version. After my tests, I feel that the v2 usage is not as user-friendly as v1. Well, My use case is that I've created a component library, which includes a ConfigProvider component. Users can pass lightTheme and darkTheme vars to this component, and it will provide theme style variables to its child components. This was very easy and intuitive in v1. However, in v2, it requires dynamically |
Beta Was this translation helpful? Give feedback.
-
|
While v2 has indeed improved performance, I believe it shouldn't sacrifice the intuitiveness of use. |
Beta Was this translation helpful? Give feedback.
-
|
@xieyezi you can always keep your custom provider/context and add a listener for that value and change the theme in a useEffect that listens to that state and then update using UnistylesRuntime, or you can just expose a function from your component library. And about types they are not injected variables, you can't pass a theme which doesn't exist in styles folder if your types are correct, make sure you followed the declare module thing and that UnistylesThemes extends your appthemes Share what you have if you want more help, I already set it up in my project and it is working so great and so easy. |
Beta Was this translation helpful? Give feedback.
-
|
I think you missunderstood the API as there are no docs yet.
You can access |
Beta Was this translation helpful? Give feedback.
-
|
@sharifhh Thank you very much for your reply. Can you provide an example of your repo code? |
Beta Was this translation helpful? Give feedback.
-
|
@xieyezi From what I understand you want to dynamically create themes? |
Beta Was this translation helpful? Give feedback.
-
|
@xieyezi they are not props, they are variants inside your stylesheet object, you pass the variant in useStyles and then it will select the right variant for you and return it. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks @sharifhh for the replies when I'm sleeping 🙏 @xieyezi
|
Beta Was this translation helpful? Give feedback.
-
|
IMO your example from above looks like variants :) |
Beta Was this translation helpful? Give feedback.
-
|
variants is good , in my case // button.tsx
import { stylesheet } from "./styles";
...
const { styles } = useStyles(stylesheet, { type, size, plain });
...plain is a variant , which type of boolean. in my styles.ts: // styles.ts
const stylesheet = createStyleSheet((theme) => {
const textTypeStyleMaps = {
default: {
color: theme.buttonDefaultColor
},
danger: {
variants: {
plain: {
color: theme.buttonDangerBackgroundColor
},
default: {
color: theme.buttonDangerColor
}
}
// color: plain ? theme.buttonDangerBackgroundColor : theme.buttonDangerColor // this is origin code
},
primary: {
variants: {
plain: {
color: theme.buttonPrimaryBackgroundColor
},
default: {
color: theme.buttonPrimaryColor
}
}
}
};
return {
text: {
...textTypeStyleMaps
}
};
});
export { stylesheet };is it right? |
Beta Was this translation helpful? Give feedback.
-
|
No, follow the structure: const stylesheet = createStyleSheet((theme) => {
text: {
variants: {
color: {
danger: {
color: theme.buttonDangerColor
},
primary: {
color: theme.buttonPrimaryColor
},
default: {
color: theme.buttonDefaultColor
}
}
}
}
})if you want to have double condition aka compoundVariants you have two options:
const stylesheet = createStyleSheet((theme) => {
text: (isPlain: boolean) => ({
variants: {
color: {
danger: {
color: isPlain
? theme.buttonDangerBackgroundColor
: theme.buttonDangerColor
},
primary: {
// and so on
color: theme.buttonPrimaryColor
},
default: {
color: theme.buttonDefaultColor
}
}
}
})
})or use second variant: const stylesheet = createStyleSheet((theme) => {
text: {
variants: {
color: {
danger: {
color: theme.buttonDangerColor
},
primary: {
color: theme.buttonPrimaryColor
},
default: {
color: theme.buttonDefaultColor
}
},
plain: {
danger: {
color: theme.buttonDangerBackgroundColor
},
primary: {
color: theme.buttonPrimaryBackgroundColor
},
default: {}
}
}
}
})
useStyles(stylesheet, {
color: 'danger',
plain: isPlain ? 'danger' : undefined
}) |
Beta Was this translation helpful? Give feedback.
-
|
Hello everyone! We have just reached beta.1 with FULL Android support, demonstrating the power of a shared core in C++ 🚀 . |
Beta Was this translation helpful? Give feedback.
-
|
I've just released beta.2 with FULL Web support! 🚀 |
Beta Was this translation helpful? Give feedback.
-
|
@jpudysz you are on fire! Thanks for your amazing work, I'm looking forward to the docs and migrate from v1. |
Beta Was this translation helpful? Give feedback.
-
|
I'm working on it, I will do my best to release it next week 🙏 |
Beta Was this translation helpful? Give feedback.
-
|
@jpudysz I guess we have an issue in variants.
What is the expected disabledButton styles in this case? since I am passing 'primary' as variant but 'primary' has no value in disabledButton, it should select default right? It is not selecting default, here is the output of the console: |
Beta Was this translation helpful? Give feedback.
-
|
here is a fix, please check if you think it is good enough |
Beta Was this translation helpful? Give feedback.
-
|
Yeah, that should be the default behaviour 👌 |
Beta Was this translation helpful? Give feedback.
-
|
Hello, I've been trying to test unistyles v2 on an expo (49) app with expo go, but I keep getting the error "Unistyles runtime is not available. Make sure you followed the installation instructions". I wonder if there are some additional steps to take installing v2, or I just have to wait for the release. |
Beta Was this translation helpful? Give feedback.
-
|
It contains C++ bindings. You need to pod install :) expo go is no supported anymore |
Beta Was this translation helpful? Give feedback.
-
|
Alright, thank you, I'll continue with an expo development build. |
Beta Was this translation helpful? Give feedback.
-
|
Hi @jpudysz ! First of all, thank you for your work 👏 I would like to test the lib but I can't build my android app, you will find below my react native info and the build error : React native Infoand Build errorand Note : I'm already using some jsi libs like react-native-mmkv or react-native-quick-base64 and I'm running with react-native-unistyles ^2.0.0-beta.4 |
Beta Was this translation helpful? Give feedback.
-
|
Interesting error, it seems that the path to Thank you for the tests! |
Beta Was this translation helpful? Give feedback.
-
|
Reproduced:
I messed up the paths because I'm testing it locally. |
Beta Was this translation helpful? Give feedback.
-
|
Fixed in beta.5, thanks for pointing it out! |
Beta Was this translation helpful? Give feedback.
-
|
Thank you, I'm able to build the app |
Beta Was this translation helpful? Give feedback.
-
|
It's me again ! When I want to reload my app, I'm getting the following native error : I don't know what this method is suppose to do, so I can't help with that... |
Beta Was this translation helpful? Give feedback.
-
|
I know what it is, checking it now |
Beta Was this translation helpful? Give feedback.
-
|
Patched in 2.0.0-beta.6 🙇 |
Beta Was this translation helpful? Give feedback.
-
|
this happens again in the latest release |
Beta Was this translation helpful? Give feedback.
-
|
I didn't change anything in the native android code |
Beta Was this translation helpful? Give feedback.
-
|
when changing the theme, native alerts don't match it, it matches the device theme. any plans to implement such feature ? |
Beta Was this translation helpful? Give feedback.
-
|
if i change it from where you're doing it, it works. if i change it from the settings (for me is settings > display & brightness), it doesnt work. could you try to change it from the settings as well? |
Beta Was this translation helpful? Give feedback.
-
|
Yeah, works the same: Screen.Recording.2024-03-06.at.20.09.08.mov |
Beta Was this translation helpful? Give feedback.
-
|
thanks. then i will investigate... maybe it's the oneplus os or something... when i find out more, ill report back! |
Beta Was this translation helpful? Give feedback.
-
|
here it's the oneplus settings btw:
|
Beta Was this translation helpful? Give feedback.
-
|
Maybe, unfortunately I don't have any one plus phone 🥲 |
Beta Was this translation helpful? Give feedback.
-
|
Thank you all for the support during these weeks! The last task is to add unit tests as we have somethine like ~82% 😄 |
Beta Was this translation helpful? Give feedback.
-
Unistyles 1.0.0 was designed to run entirely in JavaScript at runtime, providing a strong foundation that many projects can build upon due to its simplicity. While it's already a robust tool, I envision numerous enhancements in the future. My commitment is to continually refine it, ensuring a simple yet powrful API complemented by innovative extensions.
Given the dynamic nature of development, this roadmap might evolve, especially as I delve into diverse subjects to optimize developer experience and performance. To elevate Unistyles even more, my next step is integrating a compiler for generating static stylesheets, alongside inherent support for CSS variables and media queries.
There's a lot of tasks ahead, and I genuinely appreciate all contributions, whether they're PRs, suggestions, or bug fixes. But if you're wondering how to support me even further, a shoutout for Unistyles on Twitter or sponsorship on GitHub would mean the world.
Let's shape the future of React Native styling together! 🦄 🔥 🏁
// EDITED, current roadmap
We can highlight 8 major areas that will be improved in version 2.0:
Before RC:
I have decided to move the custom compiler to version 3.0, as there are already many changes.
My goal is to release it in December 2023.
How to upgrade from Unistyles 1.0. to 2.0?
UnistylesThemecreateUnistyles// styles.ts import { breakpoints } from './breakpoints' +import { lightTheme, darkTheme, otherTheme } from './theme' +type AppBreakpoints = typeof breakpoints +type AppThemes = { + light: typeof lightTheme + dark: typeof darkTheme + other: typeof otherTheme +}declare module(optional)import { breakpoints } from './breakpoints' import { lightTheme, darkTheme, otherTheme } from './theme' type AppBreakpoints = typeof breakpoints type AppThemes = { light: typeof lightTheme dark: typeof darkTheme other: typeof otherTheme } +declare module 'react-native-unistyles' { + export interface UnistylesThemes extends AppThemes {} + export interface UnistylesBreakpoints extends AppBreakpoints {} +}UnistylesRegistry(optional)import { breakpoints } from './breakpoints' import { lightTheme, darkTheme, otherTheme } from './theme' type AppBreakpoints = typeof breakpoints type AppThemes = { light: typeof lightTheme dark: typeof darkTheme other: typeof otherTheme } declare module 'react-native-unistyles' { export interface UnistylesThemes extends AppThemes {} export interface UnistylesBreakpoints extends AppBreakpoints {} } +UnistylesRegistry + .addThemes({ + light: lightTheme, + dark: darkThemem, + otherTheme: otherTheme + }) + .addBreakpoints(breakpoints) + .addConfig({ + adaptiveThemes: true + })Full example (configuration):
Full example (component):
More examples are here:
https://github.com/jpudysz/react-native-unistyles/tree/2.0/examples/expo/src/examples
Beta Was this translation helpful? Give feedback.
All reactions