-
-
Notifications
You must be signed in to change notification settings - Fork 413
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.
Already on GitHub? Sign in to your account
poc: Fix Basic Vite Support #2286
Changes from all commits
3b969a4
796e530
cf8a8a7
6c6df24
a99fc25
29a2410
9f03074
234a57a
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
# React + TypeScript + Vite | ||
|
||
A super basic Vite project to test if Tamagui can be used without any additional configuration. |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
<!doctype html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8" /> | ||
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
<title>Vite + React + TS</title> | ||
</head> | ||
<body> | ||
<div id="root"></div> | ||
<script type="module" src="/src/main.tsx"></script> | ||
</body> | ||
</html> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
{ | ||
"name": "vite", | ||
"private": true, | ||
"version": "0.0.0", | ||
"type": "module", | ||
"scripts": { | ||
"dev": "vite", | ||
"build": "tsc && vite build", | ||
"preview": "vite preview" | ||
}, | ||
"dependencies": { | ||
"@tamagui/config": "workspace:*", | ||
"react": "^18.2.0", | ||
"react-dom": "^18.2.0", | ||
"tamagui": "workspace:*" | ||
}, | ||
"devDependencies": { | ||
"@types/react": "^18.2.55", | ||
"@types/react-dom": "^18.2.19", | ||
"@vitejs/plugin-react": "^4.2.1", | ||
"typescript": "^5.2.2", | ||
"vite": "^5.1.0" | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
import { useState } from 'react' | ||
import { TamaguiProvider, Button } from 'tamagui'; | ||
import config from './tamagui.config'; | ||
|
||
export function App() { | ||
const [count, setCount] = useState(0) | ||
|
||
return ( | ||
<TamaguiProvider config={config}> | ||
<Button | ||
theme="red" | ||
opacity={1} | ||
enterStyle={{ opacity: 0 }} | ||
pressStyle={{ scale: 1.5 }} | ||
onPress={() => setCount(c => c + 1)} | ||
animation="slow" | ||
> | ||
Count {count} | ||
</Button> | ||
</TamaguiProvider> | ||
) | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
import ReactDOM from 'react-dom/client' | ||
import { App } from './App.tsx' | ||
|
||
ReactDOM.createRoot(document.getElementById('root')!).render( | ||
<App /> | ||
) |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
import { config } from '@tamagui/config/v3' | ||
import { createTamagui } from 'tamagui' // or '@tamagui/core' | ||
|
||
const appConfig = createTamagui(config) | ||
|
||
export type AppConfig = typeof appConfig | ||
|
||
declare module 'tamagui' { | ||
|
||
// or '@tamagui/core' | ||
|
||
// overrides TamaguiCustomConfig so your custom types | ||
|
||
// work everywhere you import `tamagui` | ||
|
||
interface TamaguiCustomConfig extends AppConfig {} | ||
|
||
} | ||
export default appConfig | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
{ | ||
"compilerOptions": { | ||
"target": "ES2020", | ||
"useDefineForClassFields": true, | ||
"lib": ["ES2020", "DOM", "DOM.Iterable"], | ||
"module": "ESNext", | ||
"skipLibCheck": true, | ||
|
||
/* Bundler mode */ | ||
"moduleResolution": "bundler", | ||
"allowImportingTsExtensions": true, | ||
"resolveJsonModule": true, | ||
"isolatedModules": true, | ||
"noEmit": true, | ||
"jsx": "react-jsx", | ||
|
||
/* Linting */ | ||
"strict": true, | ||
"noUnusedLocals": true, | ||
"noUnusedParameters": true, | ||
"noFallthroughCasesInSwitch": true | ||
}, | ||
"include": ["src"], | ||
"references": [{ "path": "./tsconfig.node.json" }] | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
{ | ||
"compilerOptions": { | ||
"composite": true, | ||
"skipLibCheck": true, | ||
"module": "ESNext", | ||
"moduleResolution": "bundler", | ||
"allowSyntheticDefaultImports": true, | ||
"strict": true | ||
}, | ||
"include": ["vite.config.ts"] | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import { defineConfig } from 'vite' | ||
import react from '@vitejs/plugin-react' | ||
|
||
// https://vitejs.dev/config/ | ||
export default defineConfig({ | ||
define: { | ||
'process.env.TAMAGUI_BAIL_AFTER_SCANNING_X_CSS_RULES': false, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Somethig is going to have to be done with I tried removing it but that package would break when it was rebuilt. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'm not sure what to do about import.meta.env. Webpack doesn't support it: So you're sort of stuck. It's actually a bit wild that we have the two most popular bundlers set up in a way that you can't really access env without some really weird hacks. I think I've done something like |
||
}, | ||
plugins: [react()], | ||
}) |
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This solved the main problem There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The react plugin? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. My goal was to see what it would take to tamagui without any plugins. These changes in this file allowed me to do so. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I created this
vite
app just for testing.