fix:remove tamagui

This commit is contained in:
Damien Ostler 2024-05-23 14:32:21 -04:00
parent acc0e0d846
commit c58a57c31a
6 changed files with 37 additions and 13910 deletions

View File

@ -1,16 +1,10 @@
const { withTamagui } = require('@tamagui/next-plugin')
module.exports = function (name, { defaultConfig }) { module.exports = function (name, { defaultConfig }) {
let config = { let config = {
...defaultConfig, ...defaultConfig,
// ...your configuration // ...your configuration
} }
const tamaguiPlugin = withTamagui({
config: './tamagui.config.ts',
components: ['tamagui'],
})
return { return {
...config, ...config
...tamaguiPlugin(config),
} }
} }

13847
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,13 +1,9 @@
{ {
"dependencies": { "dependencies": {
"@tamagui/config": "^1.98.2",
"@tamagui/next-plugin": "^1.98.2",
"@tamagui/next-theme": "^1.98.2",
"next": "^14.2.3", "next": "^14.2.3",
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^18.3.1", "react-dom": "^18.3.1",
"react-native-web": "^0.19.11", "react-native-web": "^0.19.11"
"tamagui": "^1.98.2"
}, },
"scripts": { "scripts": {
"dev": "next dev", "dev": "next dev",
@ -16,6 +12,7 @@
"lint": "next lint" "lint": "next lint"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "20.12.12",
"@types/react": "18.3.2", "@types/react": "18.3.2",
"typescript": "5.4.5" "typescript": "5.4.5"
} }

View File

@ -1,7 +1,5 @@
// Optional: add the reset to get more consistent styles across browsers // Optional: add the reset to get more consistent styles across browsers
import '@tamagui/core/reset.css'
import { NextThemeProvider, useRootTheme } from '@tamagui/next-theme'
import { AppProps } from 'next/app' import { AppProps } from 'next/app'
@ -9,26 +7,8 @@ import Head from 'next/head'
import React, { useMemo } from 'react' import React, { useMemo } from 'react'
import { TamaguiProvider, createTamagui } from 'tamagui'
import { config } from '@tamagui/config/v3'
const tamaguiConfig = createTamagui(config)
// you usually export this from a tamagui.config.ts file:
// import tamaguiConfig from '../tamagui.config'
// make TypeScript type everything based on your config
type Conf = typeof tamaguiConfig
declare module '@tamagui/core' {
interface TamaguiCustomConfig extends Conf {}
}
export default function App({ Component, pageProps }: AppProps) { export default function App({ Component, pageProps }: AppProps) {
const [theme, setTheme] = useRootTheme()
// memo to avoid re-render on dark/light change // memo to avoid re-render on dark/light change
const contents = useMemo(() => { const contents = useMemo(() => {
@ -37,33 +17,19 @@ export default function App({ Component, pageProps }: AppProps) {
}, [pageProps]) }, [pageProps])
return ( return (
<>
<Head>
<NextThemeProvider onChangeTheme={setTheme as any}> <script
dangerouslySetInnerHTML={{
<Head> // avoid flash of animated things on enter:
__html: `document.documentElement.classList.add('t_unmounted')`,
<script }}
dangerouslySetInnerHTML={{ />
// avoid flash of animated things on enter:
__html: `document.documentElement.classList.add('t_unmounted')`,
}}
/>
</Head>
<TamaguiProvider
config={tamaguiConfig}
disableInjectCSS
disableRootThemeClass
defaultTheme={theme}
>
{contents}
</TamaguiProvider>
</NextThemeProvider>
</Head>
{contents}
</>
) )
} }

View File

@ -12,12 +12,7 @@ import NextDocument, {
} from 'next/document' } from 'next/document'
import { StyleSheet } from 'react-native'
import { config } from '@tamagui/config/v3'
import { createTamagui } from 'tamagui'
const tamaguiConfig = createTamagui(config)
// you usually export this from a tamagui.config.ts file: // you usually export this from a tamagui.config.ts file:
@ -29,7 +24,6 @@ import NextDocument, {
const page = await renderPage() const page = await renderPage()
// @ts-ignore RN doesn't have this type // @ts-ignore RN doesn't have this type
const rnwStyle = StyleSheet.getSheet()
return { return {
...page, ...page,
@ -38,16 +32,7 @@ import NextDocument, {
<> <>
<style
id={rnwStyle.id}
dangerouslySetInnerHTML={{ __html: rnwStyle.textContent }}
/>
<style
dangerouslySetInnerHTML={{
__html: tamaguiConfig.getCSS(),
}}
/>
</> </>

View File

@ -1,18 +1,6 @@
import { useState } from 'react' import { useState } from 'react'
import { Button, useIsomorphicLayoutEffect } from 'tamagui'
import { useThemeSetting } from '@tamagui/next-theme'
export default function Home() { export default function Home() {
return (<h1>Test</h1>)
const themeSetting = useThemeSetting()
const [clientTheme, setClientTheme] = useState<string>('dark')
useIsomorphicLayoutEffect(() => {
setClientTheme(themeSetting.current || 'dark')
}, [themeSetting.current, themeSetting.resolvedTheme])
return <Button onPress={themeSetting.toggle}>Change theme: {clientTheme}</Button>
} }