Skip to content
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.

Sign up for GitHub

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

Jump to bottom

poc: Fix Basic Vite Support #2286

Closed
wants to merge 8 commits into from
Closed

poc: Fix Basic Vite Support #2286

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3b969a4
initial fix
bnussman Feb 17, 2024
796e530
revert colors change
bnussman Feb 17, 2024
cf8a8a7
idk
bnussman Feb 17, 2024
6c6df24
clean up more
bnussman Feb 17, 2024
a99fc25
clean up more
bnussman Feb 17, 2024
29a2410
clean up more
bnussman Feb 17, 2024
9f03074
clean up
bnussman Feb 17, 2024
234a57a
hacky vite fix
bnussman Feb 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 3 additions & 0 deletions apps/vite/README.md
View file
Open in desktop
Copy link
Contributor Author

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.

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.
13 changes: 13 additions & 0 deletions apps/vite/index.html
View file
Open in desktop
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>
24 changes: 24 additions & 0 deletions apps/vite/package.json
View file
Open in desktop
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"
}
}
22 changes: 22 additions & 0 deletions apps/vite/src/App.tsx
View file
Open in desktop
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>
)
}
6 changes: 6 additions & 0 deletions apps/vite/src/main.tsx
View file
Open in desktop
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 />
)
20 changes: 20 additions & 0 deletions apps/vite/src/tamagui.config.ts
View file
Open in desktop
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

25 changes: 25 additions & 0 deletions apps/vite/tsconfig.json
View file
Open in desktop
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" }]
}
11 changes: 11 additions & 0 deletions apps/vite/tsconfig.node.json
View file
Open in desktop
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"]
}
10 changes: 10 additions & 0 deletions apps/vite/vite.config.ts
View file
Open in desktop
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,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Somethig is going to have to be done with process.env.TAMAGUI_BAIL_AFTER_SCANNING_X_CSS_RULES in insetStyleRule.tsx. This won't work in the browser

I tried removing it but that package would break when it was rebuilt.

Copy link
Member

Choose a reason for hiding this comment

The 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:

webpack/webpack#15833

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 typeof import.meta !== 'undefined' ? import.meta.env.X : process.env.X before.

},
plugins: [react()],
})
5 changes: 1 addition & 4 deletions packages/config/src/v3.ts
View file
Open in desktop
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This solved the main problem

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The react plugin?

Copy link
Contributor Author

Choose a reason for hiding this comment

The 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.

Original file line number Diff line number Diff line change
@@ -1,15 +1,12 @@
import { shorthands } from '@tamagui/shorthands/v2'
import { tokens, themes } from '@tamagui/themes/v3-themes'
import { animations } from './animations'
import { animations } from './v3-animations'
import type { CreateTamaguiProps } from '@tamagui/web'

import { fonts } from './fonts'
import { media, mediaQueryDefaultActive } from './media'

export { animations } from './animations'
export { animationsReanimated } from './animationsReanimated'
export { animationsReactNative } from './animationsReactNative'
export { animationsCSS } from './animationsCSS'

export { tokens, themes } from '@tamagui/themes/v3-themes'
export { shorthands } from '@tamagui/shorthands/v2'
Expand Down
47 changes: 12 additions & 35 deletions packages/config/types/v3.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,4 @@
export { animations } from './animations';
export { animationsReanimated } from './animationsReanimated';
export { animationsReactNative } from './animationsReactNative';
export { animationsCSS } from './animationsCSS';
export { tokens, themes } from '@tamagui/themes/v3-themes';
export { shorthands } from '@tamagui/shorthands/v2';
export { fonts } from './fonts';
Expand All @@ -12,38 +9,18 @@ export declare const selectionStyles: (theme: any) => {
} | null;
export declare const config: {
animations: import("@tamagui/web").AnimationDriver<{
'100ms': {
type: "timing";
duration: number;
};
bouncy: {
damping: number;
mass: number;
stiffness: number;
};
lazy: {
damping: number;
stiffness: number;
};
medium: {
damping: number;
stiffness: number;
mass: number;
};
slow: {
damping: number;
stiffness: number;
};
quick: {
damping: number;
mass: number;
stiffness: number;
};
tooltip: {
damping: number;
mass: number;
stiffness: number;
};
'75ms': string;
'100ms': string;
'200ms': string;
bouncy: string;
superBouncy: string;
lazy: string;
medium: string;
slow: string;
quick: string;
quicker: string;
quickest: string;
tooltip: string;
}>;
defaultFont: string;
shouldAddPrefersColorThemes: true;
Expand Down