callmeberzerker

callmeberzerker

Storm that brings no calm.

Member Since 9 years ago

Skopje, Macedonia

Experience Points
14
follower
Lessons Completed
39
follow
Lessons Completed
177
stars
Best Reply Awards
7
repos

145 contributions in the last year

Pinned
⚡ chaos.mk personal website
⚡ Demo using svelte-dnd-action, svelte-final-form, quill as html editor etc
⚡ NextJS + MDX starter with examples (Linting, Styled Components, Chakra UI)
⚡ Custom themes for Files
Activity
Nov
27
1 day ago
Nov
25
3 days ago
started
started time in 3 days ago
Nov
20
1 week ago
Nov
15
1 week ago
Nov
3
3 weeks ago
started
started time in 3 weeks ago
Nov
2
3 weeks ago
Activity icon
issue

callmeberzerker issue comment emotion-js/emotion

callmeberzerker
callmeberzerker

@emotion/styled: Add Transient Props

The problem

In 5.1.0, styled-components introduced transient props. Props prefixed with a dollar sign ($) are "mark[ed] as transient and styled-components knows not to add it to the rendered DOM element or pass it further down the component hierarchy".

Proposed solution

This would be useful functionality to support -- I am exploring migrating from styled-components to @emotion/styled.

Alternative solutions

None suggested. The intent is to follow this implementation detail introduced by another CSS-in-JS project.

Additional context

Material UI v4 -> v5 is migrating to emotion, and my project uses styled-components today. I'm trying to get my codebase to coalesce around a single CSS in JS solution, and the fewer the API differences there are, the lower the barrier to migration is.

callmeberzerker
callmeberzerker

A lot of people new to frontend code get bitten by this, rest spreading a bunch of props on a styled component, only to notice way to late that suddenly there are a bunch of additional properties on the HTML tag making it invalid, render ugly or other horrible things.

Transient props is an elegant solution, yea sure you can already do it now but its not convenient, passing around the same function for every styled component. Indeed since v5 release of material UI I expect a lot more people will get bitten by this eventually

Exactly, and I don't understand the resistance to implement this functionality. This is the only real reason why I am still using styled-components (or mui-styled-engine-sc) vs the default engine in [email protected] which is emotion.

I don't wanna be bothered to create:

const TabsStyled = styled(MuiTabs, {
  shouldForwardProp: prop =>
    isPropValid(prop) && prop.startsWith('$')
})`
   color: ${props =>
    props.$myCustomVariantThatStartsWithDollarSign ? 'hotpink' : 'turquoise'};

`

And the last thing I need is yet another styled import (wrapper) in my codebase (babel-macros also don't work if the files are imported from elsewhere, but don't quote me on that). I currently have this issue on my watchlist but I would want clear indication from emotion team if they would add this, or we should just settle on using styled-components if we want this kind of functionality out of the box.

Oct
28
1 month ago
Oct
25
1 month ago
started
started time in 1 month ago
Oct
17
1 month ago
started
started time in 1 month ago
Oct
16
1 month ago
Activity icon
issue

callmeberzerker issue remix-run/react-router

callmeberzerker
callmeberzerker

[V6] [Feature] Getting `usePrompt` and `useBlocker` back in the router

I think in general most people won't be able to upgrade to v6 since in the latest beta usePrompt and useBlocker are removed.

Most apps rely on the usePrompt or Prompt to prevent navigation in case the user has unsaved changes (aka the form is dirty).

With this issue maybe we can have some feedback on why they (usePrompt, Prompt) were removed (they worked fine in the previous beta version v6.0.0-beta.6) and what makes them problematic, what's the outlook for getting them back in the router and potentially userland solutions to this problem.

Oct
15
1 month ago
started
started time in 1 month ago
Oct
8
1 month ago
Activity icon
issue

callmeberzerker issue comment microsoft/TypeScript

callmeberzerker
callmeberzerker

Auto-imports: fix some exports being incorrectly stored as re-exports of others due to key conflict

Fixes #45763 Fixes #45784

callmeberzerker
callmeberzerker

I just tested this and it works fine for my react project. useEffect, useState etc. are not wrongly imported from react-transition-group anymore.

Activity icon
issue

callmeberzerker issue comment expo/expo

callmeberzerker
callmeberzerker

Root userInterfaceStyle does not apply on Android in Expo Go

Summary

{
  "expo": {
    "userInterfaceStyle": "automatic",
  }
}

this will not change the user interface style behavior to allow for both light and dark themes, instead you need to set it on the Android key

{
  "expo": {
    "userInterfaceStyle": "automatic",
    "android": {
      "userInterfaceStyle": "automatic"
    }
  }
}

The root key does work as expected on iOS

Managed or bare workflow? If you have ios/ or android/ directories in your project, the answer is bare!

managed

What platform(s) does this occur on?

Android

SDK Version (managed workflow only)

42

Environment

  Expo CLI 4.7.2 environment info:
    System:
      OS: macOS 11.2.3
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 14.15.2 - ~/.nvm/versions/node/v14.15.2/bin/node
      Yarn: 1.22.10 - /usr/local/bin/yarn
      npm: 6.14.13 - ~/.nvm/versions/node/v14.15.2/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    Managers:
      CocoaPods: 1.10.1 - /usr/local/bin/pod
    SDKs:
      iOS SDK:
        Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
      Android SDK:
        API Levels: 26, 28, 29, 30
        Build Tools: 26.0.3, 28.0.3, 29.0.2, 29.0.3, 30.0.2, 30.0.3
        System Images: android-26 | Google APIs Intel x86 Atom_64, android-29 | Google Play Intel x86 Atom, android-30 | Google APIs Intel x86 Atom
        Android NDK: 21.0.6113669
    IDEs:
      Android Studio: 4.1 AI-201.8743.12.41.7042882
      Xcode: 12.5/12E262 - /usr/bin/xcodebuild
    npmPackages:
      expo: ~42.0.0 => 42.0.0
      react: 16.13.1 => 16.13.1
      react-dom: 16.13.1 => 16.13.1
      react-native: https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz => 0.63.2
      react-native-web: ~0.13.12 => 0.13.18
    npmGlobalPackages:
      expo-cli: 4.7.2
    Expo Workflow: managed

Reproducible demo or steps to reproduce from a blank project

https://github.com/brentvatne/schemes

Run the project on Android and toggle between light/dark themes, notice the text doesn't update. Now add "userInterfaceStyle": "automatic" under the "android" key and reload the app (not just fast refresh, full reload) and notice it works as expected.

callmeberzerker
callmeberzerker

@brentvatne I can completely understand that decision. The weird thing is that now when using expo-cli to create a new project with navigation (aka batteries included template) comes also with dark / light theme color configuration. It's just that the dark theme doesn't work. That's why I would consider this a bug.

Oct
7
1 month ago
Activity icon
issue

callmeberzerker issue comment expo/expo

callmeberzerker
callmeberzerker

Root userInterfaceStyle does not apply on Android in Expo Go

Summary

{
  "expo": {
    "userInterfaceStyle": "automatic",
  }
}

this will not change the user interface style behavior to allow for both light and dark themes, instead you need to set it on the Android key

{
  "expo": {
    "userInterfaceStyle": "automatic",
    "android": {
      "userInterfaceStyle": "automatic"
    }
  }
}

The root key does work as expected on iOS

Managed or bare workflow? If you have ios/ or android/ directories in your project, the answer is bare!

managed

What platform(s) does this occur on?

Android

SDK Version (managed workflow only)

42

Environment

  Expo CLI 4.7.2 environment info:
    System:
      OS: macOS 11.2.3
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 14.15.2 - ~/.nvm/versions/node/v14.15.2/bin/node
      Yarn: 1.22.10 - /usr/local/bin/yarn
      npm: 6.14.13 - ~/.nvm/versions/node/v14.15.2/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    Managers:
      CocoaPods: 1.10.1 - /usr/local/bin/pod
    SDKs:
      iOS SDK:
        Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
      Android SDK:
        API Levels: 26, 28, 29, 30
        Build Tools: 26.0.3, 28.0.3, 29.0.2, 29.0.3, 30.0.2, 30.0.3
        System Images: android-26 | Google APIs Intel x86 Atom_64, android-29 | Google Play Intel x86 Atom, android-30 | Google APIs Intel x86 Atom
        Android NDK: 21.0.6113669
    IDEs:
      Android Studio: 4.1 AI-201.8743.12.41.7042882
      Xcode: 12.5/12E262 - /usr/bin/xcodebuild
    npmPackages:
      expo: ~42.0.0 => 42.0.0
      react: 16.13.1 => 16.13.1
      react-dom: 16.13.1 => 16.13.1
      react-native: https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz => 0.63.2
      react-native-web: ~0.13.12 => 0.13.18
    npmGlobalPackages:
      expo-cli: 4.7.2
    Expo Workflow: managed

Reproducible demo or steps to reproduce from a blank project

https://github.com/brentvatne/schemes

Run the project on Android and toggle between light/dark themes, notice the text doesn't update. Now add "userInterfaceStyle": "automatic" under the "android" key and reload the app (not just fast refresh, full reload) and notice it works as expected.

callmeberzerker
callmeberzerker

@brentvatne

Sorry for the confusion -> after I set "userInterfaceStyle": "automatic" in the android object it definitely works. Thank you.

I just created a new (first 😅) expo project and I think this should be by default there, correct?

Activity icon
issue

callmeberzerker issue comment expo/expo

callmeberzerker
callmeberzerker

Root userInterfaceStyle does not apply on Android in Expo Go

Summary

{
  "expo": {
    "userInterfaceStyle": "automatic",
  }
}

this will not change the user interface style behavior to allow for both light and dark themes, instead you need to set it on the Android key

{
  "expo": {
    "userInterfaceStyle": "automatic",
    "android": {
      "userInterfaceStyle": "automatic"
    }
  }
}

The root key does work as expected on iOS

Managed or bare workflow? If you have ios/ or android/ directories in your project, the answer is bare!

managed

What platform(s) does this occur on?

Android

SDK Version (managed workflow only)

42

Environment

  Expo CLI 4.7.2 environment info:
    System:
      OS: macOS 11.2.3
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 14.15.2 - ~/.nvm/versions/node/v14.15.2/bin/node
      Yarn: 1.22.10 - /usr/local/bin/yarn
      npm: 6.14.13 - ~/.nvm/versions/node/v14.15.2/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    Managers:
      CocoaPods: 1.10.1 - /usr/local/bin/pod
    SDKs:
      iOS SDK:
        Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
      Android SDK:
        API Levels: 26, 28, 29, 30
        Build Tools: 26.0.3, 28.0.3, 29.0.2, 29.0.3, 30.0.2, 30.0.3
        System Images: android-26 | Google APIs Intel x86 Atom_64, android-29 | Google Play Intel x86 Atom, android-30 | Google APIs Intel x86 Atom
        Android NDK: 21.0.6113669
    IDEs:
      Android Studio: 4.1 AI-201.8743.12.41.7042882
      Xcode: 12.5/12E262 - /usr/bin/xcodebuild
    npmPackages:
      expo: ~42.0.0 => 42.0.0
      react: 16.13.1 => 16.13.1
      react-dom: 16.13.1 => 16.13.1
      react-native: https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz => 0.63.2
      react-native-web: ~0.13.12 => 0.13.18
    npmGlobalPackages:
      expo-cli: 4.7.2
    Expo Workflow: managed

Reproducible demo or steps to reproduce from a blank project

https://github.com/brentvatne/schemes

Run the project on Android and toggle between light/dark themes, notice the text doesn't update. Now add "userInterfaceStyle": "automatic" under the "android" key and reload the app (not just fast refresh, full reload) and notice it works as expected.

callmeberzerker
callmeberzerker

I just started with expo but I can confirm that the useColorScheme() on Android (real device, Pixel 3XL) returns light even though in my system preferences it is set as dark.

Oct
6
1 month ago
Oct
5
1 month ago
Activity icon
issue

callmeberzerker issue comment mallowigi/material-dev-tools

callmeberzerker
callmeberzerker

Tab elements are being cut off when enabling chrome devtools.

The tab(s) are being cut off and have three dots instead of the full tab name(s). This happens even when the screen is maxiumized.

image

callmeberzerker
callmeberzerker

This is still not fixed right?

Activity icon
fork

callmeberzerker forked files-community/Custom-themes

⚡ Custom themes for Files
callmeberzerker MIT License Updated
fork time in 1 month ago
Activity icon
issue

callmeberzerker issue comment emotion-js/emotion

callmeberzerker
callmeberzerker

@emotion/styled: Add Transient Props

The problem

In 5.1.0, styled-components introduced transient props. Props prefixed with a dollar sign ($) are "mark[ed] as transient and styled-components knows not to add it to the rendered DOM element or pass it further down the component hierarchy".

Proposed solution

This would be useful functionality to support -- I am exploring migrating from styled-components to @emotion/styled.

Alternative solutions

None suggested. The intent is to follow this implementation detail introduced by another CSS-in-JS project.

Additional context

Material UI v4 -> v5 is migrating to emotion, and my project uses styled-components today. I'm trying to get my codebase to coalesce around a single CSS in JS solution, and the fewer the API differences there are, the lower the barrier to migration is.

callmeberzerker
callmeberzerker

has there been any progress on this or any changes of opinion if it should be done? this is really needed for DX, plus styled-components API parity...

Oct
3
1 month ago
Previous