Skip to content

Latest commit

 

History

History
895 lines (665 loc) · 29.9 KB

next.md

File metadata and controls

895 lines (665 loc) · 29.9 KB
Raw
  • nan issue: nan start or end NaN 22 bytes: 0-22 [ 'bytes: 0', '22' ]

@natew

  • button media queries break due to useStyle hook
  • algolia creds
  • can skip a ton of CSS by disabling prefers color theme setting
    • so long as they use next-theme, or vxrn/color-scheme

@jsherrard

we can turn this pattern:

<style
        // @ts-ignore
        precedence="default"
        key="tamagui-css"
        // @ts-ignore
        href="tamagui-css"
      >
        {config.getCSS()}
      </style>

into just {config.getStyleTag()}

site:

  • clicking links fast will crash

uniswap:

  • remove boolean for SpaceTokens

    • why is a boolean value allowed for SpaceTokens? I see there's a TODO in the tamagui repo. Is there a way for us to restrict that typecheck in our codebase? Seems really bad if it leads to a crash

  • Checkbox disabled prop not disabling on native

  • if Popover can not be portaled that would be useful for some use cases

  • RadioGroup.Indicator can't use AnimatePresence i think because .styleable()

    • styleable shouldn't probably do anything with presence because the child should expect to handle that, at least need to double check taht

  • transform issue:

it looks like transform does not work - console is logging [moti]: Invalid transform value. Needs to be an array. but compiler errors on Types of property 'transform' are incompatible. Type '{ translateX: string; }[]' is not assignable to type 'Transform | undefined'.

https://linear.app/uniswap/issue/WEB-4733/tamagui-transform-needs-array-to-work-but-type-expects-string

  • this isnt applying display flex on lg:

const Layout = styled(Flex, { width: '100%', maxWidth: 1280,

'$platform-web': { display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gridTemplateRows: 'repeat(4, 1fr)', gridColumnGap: '16px', gridRowGap: '16px', },

$lg: { '$platform-web': { display: 'flex', flexDirection: 'column', }, }, })

postable:

  • bring back copy paste on theme tab
  • simplification spree

a way to set styles for children:

// we could just use classnames?

import { Style } from '@tamagui/core'

const Text = styled(Text, {
  className: 'button-item',
})

const Icon = styled(Text, {
  className: 'button-item',
})

const Button = withStaticProperties(ButtonFrame, {
  Icon,
  Text
})

const example = (
  <Button gap="$4">
    {/* prefer not renaming so compiler can optimize: */}
    <Style selector=".button-item" color="$color10">
      {/* all of these 👇 get the styles from ^ */}
      <Button.Text /> 
      <Button.Text />
      <Button.Text />
      <Button.Icon $button-hover={{}} />
    </Style>
  </Button>
)

v2:

  • TODO remove this on v2
  • Text weirdness fixes (explore)

    • remove suppressHighlighting / margin 0 default from Text

    • fix display: inline issue

    • see what react-strict-dom is doing

    • move it to

      where div is flex, span is text only props

      </span>
  • we have some random web-only props accepts on flat props, we should:
    • either implement them universally if easy
    • or else remove them (in favor of $platform-web)
  • $platform- prefixes should go away in favor of just $web, $native etc
  • textAlignVertical is deprecated but make sure we map back from textAlign to textAlignVertical on v2 and then remove it
  • remove Provider need just global config once
  • @tamagui/cli => tamagui
    • tamagui build document/announce
    • tamagui lint fix check and document/announce
  • remove deprecated second argument styled acceptsClassName
    • styled(View, { acceptsClassName }, { acceptsClassName })
  • deprecrate and remove mediaPropOrder
  • tamagui => @tamagui/ui
    • new Button, Input (nice, can be v3), Image (image-next), ScrollView
    • note many are headless
    • fullscreen => inset={0}
      • deprecate fullscreen, make sure inset works
  • remove spacer / space / separator
  • remove the accumulation of styleProps in propMapper
  • remove disableRootThemeClass from settings, change to disableRootThemeClassName
  • defaults onlyAllowShorthands to true, themeClassNameOnRoot to true
  • Cleanup Select/ListItem
    • remove SizableStack (maybe rename to Surface), redo/remove ThemeableStack
    • v2-3 ListItem simplification esp for performance of Select
    • fix Select hover/type/performance
  • remove deprecated
  • document react 19 mode - process.env.TAMAGUI_REACT_19
  • react 0.74 alignment:
  • web alignment, accessibility props, "focusable" => tabIndex
  • move to react native flex compat, styleCompat default to react-native
    • web alignment?
  • move to web compat style apis
  • no more as const needed (ts5) typescript const generic
  • remove deprecated flat settings, prefer createTamagui({ settings: {} })
  • AnimatePresence: remove deprecated props in favor of custom
  • remove nativeID, maybe testID
  • remove dataSet in favor of data- attributes
  • deprecate shadow style props before v2 release and remove in v2
    • "shadow*" style props are deprecated. Use "boxShadow".
  • remove as much of // TODO: remove this in the future when react native a11y API is removed as possible
    • "Enhance with native semantics" can probably go away right

potential

  • deprecate shadow props separated in favor of boxShadow, implement boxShadow
  • sync AnimatePresence with latest changes from framer-motion
  • group => container

stretch

  • @tamagui/core => @tamagui/style
    • styled()
    • @tamagui/style just style({}) export, takes TextProps

v3

  • light-dark()
    • this is an official css thing so would be easy-ish to implement
  • run over components and review for removing some assumptions about size
  • disableInjectCSS should maybe just be automated better or defaulted on
  • flat vs style mode, style moves all tamagui styles into style besides the other psuedos like hover, enter, etc
  • no react-native deps across the ui kit on web
  • html.div, styled('div'), styled(html.div)
  • zero runtime mode
    • all functional styles pre-generate the styles across the possible tokens (if :number it uses SizeTokens, probably have to disallow string and '...' types but could have a way to define the values at build-time)
  • <Theme values={{}} /> dynamic override

v4 and beyond

  • flatMode - no nested objects, everything in flat props
  • plugins
  • SSR safe styled context, something like:

const Context = createStyledContext({ isVertical: { $sm: true, $gtSm: false, }, })

  • seems like vite plugin in basic vxrn app on features/home/HomeLayout.tsx

    • when tamaguiExtract is on, it seems to get stale source code after one save

  • seems like styledContext not overriding defaultVariant

  • useDidFinishSSR can avoid re-renders when disableSSR: true

    • make it export a disable() helper we call from tamagui

  • Select is using focusScope which React.Children.only erroring in most usages

    • we should try and redo FocusScope to not cloneElement at all and instead wrap with an element + display: contents

  • config/v4

    • remove $mono and inter default fonts use system defaults
      • can also export the existing font config as an option for migration
    • must pass in colors separately but it exports the defaults still
    • remove: shouldAddPrefersColorThemes, themeClassNameOnRoot
    • focus styles in the default v3 config are kind of wack
    • automatically handles tree shaking process.env for themes
    • remove some shorthands (shac, less often used ones)

  • as long as you use the nextjs or other new color scheme helpers they always add t_dark/t_light on first render so as long as youre ok with dark mode not working for js-off users, you could turn default the tamagui/config v4 to shouldAddPrefersColorThemes: false

  • lower priority uniswap:

    • seems isnt showing in the checked position
    • with switch, the thumb is not picking up the right surface color, must be a multiple-nested theme issue

  • small win: useTheme() could take a theme name to use a diff theme than the current one

  • very long classnames could be much shorter:

  • _borderBottomRightRadius-_platformweb_5037

  • any tamagui component accepts a function callback to handle passing down styles:

    • {(props, style, state) => {}}
    • makes for easy interop, where asChild is more opaque
    • sets disableClassName true

  • we need to beef up tests:

    • native in general
    • native/web performance
    • nextjs (can add to code/next-site), esp light/dark/animations
    • $group $platform $theme styling

  • uniswap //@ts-expect-error TODO in homepage

  • bug in useMedia + compiler

/theme

Nate:

  • Popover click outside prop

  • ( Pending PRs ) RSD / web alignment

    • follow what RSD is doing + dont go beyond native support eg aspect-ratio
    • simple version is good
    • lower priority - em/rem, other nice web styles that rsd/tailwind has

  • RSC support

    • just simple views like View/Text/etc + no need for nesting themes
    • need to remove context

  • v2 / headless

    • ( Pending PR ) deprecate some createTamagui settings that should move into settings
    • ListItem/Button simplify APIs
    • ( Pending PR ) Image/Input deprecations for web alignment

  • native tests (detox?)

  • 0-runtime mode

  • @tamagui/kit - includes native versions of many things

  • remove RNW - Input, Image

  • Popper arrow logic is bad, needs unstyled support and not to do weird shifting of sizes

  • No need for View + Text (just Element and we can extend it later)

  • force below root dark causing hydration issues

  • Animation + shadowOffset is causing crash in iOS due to object value

    • "auto" too

  • Adapt needs public API to support any adaptation

  • Select Virtualization

  • style()

  • i think acceptTokens + compiler not working (see selectionColor)

  • settings page in takeout SSR hydration issue due to useThemeSetting

  • animatedStyle showing up in animated component snapshot on native

    • add some native snapshots in ci tests

  • addTheme updateTheme regression needs a test

  • type to search on Select regressed

  • // TODO: pulling past the limit breaks scroll on native, need to better make ScrollView

  • icons move from themed() to just styled()

  • native theme change warning logs + theme change speed

  • document popover hoverable + onOpenChange second arg via

  • add $mouse to takeout

  • bug in generated icon props

  • compiler - no need to setup any separate package

  • Remove the need for Text

  • popovers work with no js

  • TODO

    • process.env.TAMAGUI_TARGET === 'native' ? false : props['data-disable-theme']
    • this looks wrong? shouldnt it be the same as on native? we may be doubling them on accident

  • Select ListItemFrame area is messy/slow due to inline styles and complex components

  • propMode

  • make styled() only not accept most non-style props

studio: add outlineColor and the pseudos studio: export for takeout option

outlineWidth get smaller at smaller size

studio:

  • Scale / ScaleSelect should be a Menu with mini visualizations of the lum/sat scales for each

  • gradient style

  • "var" mode where it changes types of $ to var(--)

  • calc?

  • get takeout users studio access

  • studio color scales first class:

    • adding a color/scale really adds a theme
    • but also adds $colorName1 => $colorNameX to base theme

  • check usePropsAndStyle with group props

  • studio: the accent color need an accent color that reverses back

  • studio: make the scales "anchor" around the selected color better

    • exact color should be at the 14 position always

  • studio: add outline, outlineHover, etc

  • studio: add partial transparent for each color step?

  • // TODO breaks next.js themes page

  • alt themes don't change color1-9 so you can't do color2 and then make the alt theme make it more subtle, but they should

  • disableClassName breaking css animation

  • css animateOnly should always force style tag styles

  • 2.0 make it just is the current state with fixes, unstyled across everything, and make various smaller breaking changes in api surfaces that need cleanup

    • recommended config with more strict settings etc
    • a few theme setups you can choose from

  • Takeout theme change needs a server restart / theme builder not re-building on changing colors.ts

  • Theme reset Button not changing

  • ZStack is abs positioning children...

Web:

  • createTamagui({ settings: { webMode: true } })
  • No Text/Stack, just styled.div ?
  • avoids console warning on Text
  • @tamagui/style separate from core
  • instead of validStyleProps use validNONStyleProps
    • that way for web all style props pass through automatically
    • also likely smaller bundle size (smart detect onX)
  • have a CSS mode
  • styled('div')
  • avoid flat style props + plugin for styled() control
  • beforeStyles + afterStyles array

style

  • enables Input taking { autofillSelectedStyle: Style }, or any component accepting a style object as a prop
import { Stack, style } from '@tamagui/core'

// make it so style props accepts either a regular style object
// or something like this (can be exported from core):

type StackStyle = {
  base: ViewStyle
  press?: ViewStyle
  hover?: ViewStyle
  focus?: ViewStyle
}

const mySubStyle: StackStyle = style(Stack, {
  backgroundColor: 'red', // optimizes on web to _bg-red

  pressStyle: {
    backgroundColor: 'blue', // optimizes on web to _press-bg-blue
  }
})

const MyComponent = (props: { accentedStyle?: StackStyle }) => {
  return (
    <Stack style={[accentedStyle]} />
  )
}

config: { settings: { styleStrategy: { type: 'prop', prop: 'sx', acceptFlatStyles: true } } }

HEADLESS=1

  • env HEADLESS sets unstyled: true by default
  • createX
  • eject command

Smaller features:

  • no-rerender psuedo styles on native when using reanimated driver (fernando PR)
  • imperative methods for many things - sheet, popover, etc, close etc
  • ssr safe themeInverse would be pretty nice
  • styled(ExternalComponent) should always allow Partial props
    • but if you do provide the props ideally it should 'know' they are pre-filled and therefore not required anymore
    • also it should make sure to make those props required if they aren't set in styled()
  • avoid css extract on server mode next.js?

Performance:

  • TAMAGUI_OPTIMIZE_NATIVE_VIEWS on by default using proper prop mapping
  • compiler can add disableEvents disableTheme to avoid hooks
  • optimization of useTheme/getSplitStyles seems like it has some decent stuff
  • could lazy expand styles
  • get dynamicEval working automatically
  • warn on styled(Pressable) and styled(TouchableOpacity)

Studio:

  • Scales

    • All color scales should have an option/check to turn on/off their control over saturation
    • In fact split out saturation scales
    • Remove luminosity slider for base theme just keep for contrast
    • Customize scale popover lets you name a new one, change the values

  • Contrast

    • needs to be able to pick the foreground color manually
    • by default it picks a nice contrast (opposite scale end) foreground

  • Mask themes

    • Need to be fixed in general and improved defaults

  • Final Step

    • Add a final preview set where you can choose any theme for every box section, that way you can preview you main theme + contrast, but also your sub-themes on some boxes, getting very interesting combos
    • Needs to have a overview view of the themes you generated, a grid of cards showing their names, palette, scales, etc, this will be re-used on the purchase page for free/pro themes

  • Post-release

    • Sharing your themes should be a thing, hit publish and it makes the final step overview screen + other users can load it into their studio = more sharing on twitter etc

CLI:

  • tama upgrade - official tamagui upgrade that works across bundlers
  • tama doctor - checks dependencies to be consistent
  • tamagui [clone|eject] Sheet ./packages/sheet
    • clones the sheet package into your repo somewhere

Components:

Maintenance:

  • biome checks for react hooks early returns
  • deprecate rnw-lite when we can after making sure all tests / animation drivers pass on rnw
  • TODO this could definitely be done better by at the very minimum
    • this entire proxy could be removed in favor of the proxy we make on initial theme creation, and just having a way to subscribeThemeGet(theme, (key, val) => any) at the useThemeWithState callsite

Backlog

  • move simple-web to themeBuilder

  • Popover.Close inside Sheet

  • merge font-size and get-font-sized packages

  • cli needs a start update command just runs diff against your ~/.tamagui/tamagui

  • sheet native iOS snapPoints

  • CI not failing on type errors in code/tamagui.dev a package.json etc etc + zip file

  • @alt Sheet inside Popover breaks css animation:

  • Studio: drag and drop a font and you can configure the subset

    • automatically converts to the right output formats
    • auto generates CSS
    • bundles it into
  • - https://github.com/dominicstop/react-native-ios-modal - we'd want expo module + snap points

  • plus native prop https://reactnative.dev/docs/actionsheetios

  • add test that builds site for prod + checks for header text / no errors

  • Switch unstyled - make it so it doesn't do any theme stuff

  • font weights in css are generating extra variables with "undefined" value if not filled in

  • add defaultSize and defaultFontFamily to createTamagui

    • all instances of $true can become getConfig().defaultSize
    • remove the validation in createTamagui that enforces the keys

  • relative sizing first class (and relative color)

    • add defaultSize, and defaultColor
    • add relative() helpers

  • bug: inputs rendering twice due to focusableInputHOC, if you remove that it doesn't, this is due to styled() + how it determines ComponentIn and grabs the component

  • document unstyled prop for components

  • docs for @tamagui/font and @tamagui/theme

  • tamagui#765

  • getVariableValue(props.fontFamily) doesn't look right

support new RN props: https://reactnative.dev/blog/2023/01/12/version-071#web-inspired-props-for-accessibility-styles-and-events

Ali:

  • document keyboard avoiding view in Sheet.mdx
  • input bug
  • @tamagui/change-animation-driver document
  • Disable warning ENV + configuration.md docs
    • (nate) make focusStyle border darker
  • bezier on css animations
    • disablePassBorderRadius feels like a weird thing to need by default
      • change Group's disablePassBorderRadius to something else - perhaps the negation, passBorderRadius? i'm not sure. what do you think about this @natew alternatively we could have disablePassBorderRadius default to true only on Tabs.List. but then overriding it would feel awkward (having to pass disablePassBorderRadius={false})
    • and document on styled() page
  • native component modes
    • RadioGroup, Select native (web)
    • Switch native (mobile)

1.X

  • web forms events bubble
  • vertical slider native can be janky
  • accessibility keyboard navigation (Menu component potentially)
  • test: useMedia, reanimated, re-renders (mount, on hover, etc), render time ms
  • CD on github
  • home page sponsors with sizing and better logos
  • keyboard search select bug
  • createThemes accepts array not object
  • site _app has t_unmounted helper, move that into tamagui proper

2.0

  • remove from web (can keep in core or make pluggable):
    • themeable
    • space
    • can have an env setting to exclude all the theme generation stuff if you are using the pre-build: getThemeCSSRules
  • replace all RN stuff left in tamagui: Image, Input, Spinner, etc
  • Accessibility + RTL
  • tag="a" should get the typed props of a link

  • react native pressable in pressable

  • tama sync

    • make it easy to have a template repo that people sync to
    • includes the git sync stuff from cli now
    • copies/diffs/merges every file there just based on heuristics
    • somehow choose "merge/overwrite/diff"
    • smart defaults
      • package.json etc
      • binary assets overwrite (if not changed, else prompt)

  • setup script can power tama sync to sync the repo to its parent repo

  • site web fonts (can also be a feature of font bundles)

  • drag on switch

  • prebuild option

    • de-dupes css
    • fixes next.js next load css
    • simplifies initial setup and need for plugins

  • site snack + demo embed on all pages floating that scales up on hover on large screengrid or augment

  • lighthouse score ci

  • pass Size down context (see Group) is this just Themes but for individual props (css variable direct support <Theme set={{ size: '$4' }}> ?)?

  • kitchen sink snack on site

  • what works for compilation / examples

  • @tamagui/sx

  • @tamagui/tailwind

  • pass Size down context (see Group) but really this is just Themes but for individual props (css variable direct support <Theme set={{ size: '$4' }}> ?)

  • native props on more components

  • space => gap

  • check deps are matching in compiler startup

  • can optimize useMedia / many hooks:

  • dual direction scrollview shouldn't need two nested see CodeDemoPreParsed

  • container queries

  • variantsOnly: true on styled(), removes types for anything but variants (and className/theme etc)

  • way to use tamagui with custom design system tokens

    • basically map any tokens you choose to internal tamagui ones

  • input like button

  • allow string values alongside numbers (nativebase port)

  • media $light and $dark for overrides

  • built in jsx => css converter

  • tag => as (keep fallback around as deprecated)

    • as={['a', { ...props }]}

  • breaking change notifier cli

  • VSCode => "turn JSX into styled()"

  • pass in SharedValue to any prop for animations

  • try using react-native-web $css object support for classnames

  • animation accept useAnimatedStyle

  • Switch gesture

  • loadFont, loadAnimations

  • <...> turns on debugging for all in tree and shows them nested

  • - use theme values and size values - can swap for other icon packs (use createTamagui({ icons }))

  • <Select.SearchInput />

      1. hoverStyle={{ [XStack]: {} }}

      2. <List.Section /> see (https://developer.apple.com/documentation/swiftui/list Section)

      3. can work native with

      4. react-native-skia / svg image support

      5. beforeStyle, afterStyle could work ...

        • only if we can do with pseudos:
          • focusStyle={{ after: { fullscreen: true, border... } }}
          • allows for proper focused borders that don't require super hacks
          • see Switch
        • radio may be List.Radio just combines List, Label, Drawer
          • can use Switch or check or custom

      6. focusWithinStyle

      7. accessibility upgrades (focus rings etc)

      8. skeleton just using Theme / variables

    const Skeleton = styled(Stack, {
  animation: {
    name: 'quick',
    loop: true
  },
  enterStyle: {
    x: '100%',
  },
  exitStyle: {
    x: '-100%',
  },
  background: `linear-gradient(to left, $background, $color, $background)`,
})

    Themes

    Component themes could force set the actual properties even if they aren't set by the component themselves....

    themes.dark_Button = {
  borderWidth: 1,
  borderColor: 'red',

  // is this doable?
  beforeStyle: [{}],
}

    =

    Winamp Re-skinability

    Themes can completely transform the look and feel, a button could have multiple shadows/reflections in one theme, but be totally flat in another.

    • 3.0 - single forward pass generates the css alongside the style object

      • in general we need a better system for controlling if we apply active theme or not, or letting consumers control the active styling in general on things
        • perhaps we do active theme by default (unless unstyled: true)
        • <ToggleGroup activeItemProps={{ active: true }}>
        • <ToggleGroup.Item /> then would recieve active={true}?
        • defaults to theme: 'active'

    • import { _ } from '@tamagui/core'

      • <_.view /> <_.text />
      • put it on globalThis and override type for super quick authoring
      • can extend with your own
        • <_.p /> <_.a /> <.img /> etc
      • can proxy to itself allowing for naming?
        • <_.view.my-thing />