Skip to content

Commit 51367a1

Browse files
natewnatew
committed
save
1 parent 74407cc commit 51367a1

30 files changed

+532
-159
lines changed

‎extra/benchmarks/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
"dripsy": "^3.5.3",
2222
"nanoid": "^3.1.23",
2323
"native-base": "3.2.2",
24-
"next": "^11.1.2",
24+
"next": "^12.0.10",
2525
"react": "*",
2626
"react-dom": "*",
2727
"react-native-web": "^0.17.5",

‎package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -27,14 +27,16 @@
2727
"fix": "yarn manypkg fix"
2828
},
2929
"resolutions": {
30+
"react-native-reanimated": "2.3.1",
3031
"@types/node": "16.11.9",
3132
"@types/react": "17.0.35",
3233
"react-native": "0.0.0",
3334
"@types/react-native": "0.66.3",
3435
"rollup-plugin-flat-dts": "^1.3.0",
3536
"esbuild": "0.14.14",
3637
"typescript": "4.6.0-beta",
37-
"webpack": "5.67.0",
38+
"next": "12.0.10",
39+
"webpack": "5.68.0",
3840
"prettier": "2.5.1",
3941
"prettier-plugin-import-sort": "0.0.7",
4042
"react": "18.0.0-beta-f320ef88f-20211116",

‎packages/next-plugin/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,10 @@
2626
},
2727
"devDependencies": {
2828
"@tamagui/build": "^1.0.0-alpha.44",
29-
"next": "^12.0.8"
29+
"next": "^12.0.10"
3030
},
3131
"peerDependencies": {
32-
"next": ">=11.0.0"
32+
"next": ">=12.0.0"
3333
},
3434
"publishConfig": {
3535
"access": "public"

‎packages/next-plugin/src/withTamagui.ts

+56-13
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ export const withTamagui = (tamaguiOptions: TamaguiOptions) => {
1919
const jsxRuntime = require.resolve('react/jsx-runtime.js')
2020
const jsxDevRuntime = require.resolve('react/jsx-dev-runtime.js')
2121
const rnw = require.resolve('react-native-web')
22+
const reanimated = require.resolve('react-native-reanimated')
23+
console.log('reanimated', reanimated)
2224

2325
webpackConfig.resolve.alias = {
2426
...(webpackConfig.resolve.alias || {}),
@@ -27,6 +29,10 @@ export const withTamagui = (tamaguiOptions: TamaguiOptions) => {
2729
'react/jsx-dev-runtime.js': jsxDevRuntime,
2830
'react/jsx-dev-runtime': jsxDevRuntime,
2931
'react-native$': rnw,
32+
'react-native-reanimated': reanimated,
33+
'@gorhom/bottom-sheet$': require
34+
.resolve('@gorhom/bottom-sheet')
35+
.replace('commonjs', 'module'),
3036
'react-native-web/src/modules/normalizeColor': require.resolve(
3137
'react-native-web/dist/cjs/modules/normalizeColor'
3238
),
@@ -37,6 +43,7 @@ export const withTamagui = (tamaguiOptions: TamaguiOptions) => {
3743
webpackConfig.plugins.push(
3844
new webpack.DefinePlugin({
3945
'process.env.TAMAGUI_TARGET': '"web"',
46+
__DEV__: JSON.stringify(dev),
4047
})
4148
)
4249

@@ -73,6 +80,9 @@ export const withTamagui = (tamaguiOptions: TamaguiOptions) => {
7380
if (/^\@?react-native-/.test(request)) {
7481
return false
7582
}
83+
if (fullPath === '@gorhom/bottom-sheet') {
84+
return 'inline'
85+
}
7686
if (
7787
fullPath.startsWith('react-native-web') ||
7888
fullPath.includes('node_modules/react-native-web')
@@ -96,6 +106,9 @@ export const withTamagui = (tamaguiOptions: TamaguiOptions) => {
96106
if (isWebpack5) {
97107
return (ctx, cb) => {
98108
const res = includeModule(ctx.context, ctx.request)
109+
if (res === 'inline') {
110+
return cb()
111+
}
99112
if (typeof res === 'string') {
100113
return cb(null, res)
101114
}
@@ -164,7 +177,10 @@ export const withTamagui = (tamaguiOptions: TamaguiOptions) => {
164177
}
165178

166179
// add loader
167-
const shouldExclude = (x) => {
180+
const shouldExclude = (x: string) => {
181+
if (x.includes('react-native-reanimated')) {
182+
return false
183+
}
168184
// analyze everything in our jsx dir
169185
// analyze everything in the components dirs
170186
const shouldInclude =
@@ -179,21 +195,48 @@ export const withTamagui = (tamaguiOptions: TamaguiOptions) => {
179195
}
180196

181197
if (isNext12) {
182-
const oneOfJSRules = webpackConfig.module.rules[2].oneOf
198+
const oneOfJSRules: any[] = webpackConfig.module.rules[2].oneOf
183199
const swcLoaderIndex = 3
184200
const swcLoader = oneOfJSRules[swcLoaderIndex]
185201
// put an earlier loader where we just do tamagui stuff before regular swc
186-
oneOfJSRules.splice(swcLoaderIndex, 0, {
187-
test: /\.(jsx?|tsx?)$/,
188-
exclude: shouldExclude,
189-
use: [
190-
...[].concat(swcLoader.use),
191-
{
192-
loader: 'tamagui-loader',
193-
options: tamaguiOptions,
194-
},
195-
],
196-
})
202+
oneOfJSRules.splice(
203+
swcLoaderIndex,
204+
0,
205+
{
206+
// test: /\.(jsx?|tsx?)$/,
207+
test: /(bottom-sheet).*\.[tj]sx?$/,
208+
use: [
209+
// ...[].concat(swcLoader.use),
210+
{
211+
loader: 'babel-loader',
212+
options: {
213+
plugins: [
214+
'react-native-reanimated/plugin',
215+
// '@babel/plugin-transform-react-jsx',
216+
],
217+
},
218+
},
219+
{
220+
loader: 'esbuild-loader',
221+
options: {
222+
target: 'esnext',
223+
loader: 'jsx',
224+
},
225+
},
226+
],
227+
},
228+
{
229+
test: /\.(jsx?|tsx?)$/,
230+
exclude: shouldExclude,
231+
use: [
232+
...[].concat(swcLoader.use),
233+
{
234+
loader: 'tamagui-loader',
235+
options: tamaguiOptions,
236+
},
237+
],
238+
}
239+
)
197240
} else {
198241
// next 11 modify loader
199242
const [first, second, ...rest] = webpackConfig.module.rules

‎packages/site/components/demos/ButtonDemo.jsx ‎packages/site/components/demos/ButtonDemo.tsx

File renamed without changes.

‎packages/site/components/demos/DrawerDemo.tsx

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Menu } from '@tamagui/feather-icons'
2+
import React, { useState } from 'react'
3+
import { Button, Drawer, H1, Paragraph, XStack } from 'tamagui'
4+
5+
export function DrawerDemo() {
6+
const [show, setShow] = useState(false)
7+
return (
8+
<Drawer.Provider>
9+
<XStack space>
10+
<Button size="$8" icon={Menu} circular onPress={() => setShow((x) => !x)} />
11+
<Drawer open={show}>
12+
<H1>Drawer contents</H1>
13+
<Paragraph>Lorem ipsum dolor sit amet.</Paragraph>
14+
</Drawer>
15+
</XStack>
16+
</Drawer.Provider>
17+
)
18+
}

‎packages/site/components/demos/FormsDemo.jsx ‎packages/site/components/demos/FormsDemo.tsx

File renamed without changes.

‎packages/site/components/demos/HeadingsDemo.jsx ‎packages/site/components/demos/HeadingsDemo.tsx

File renamed without changes.

‎packages/site/components/demos/LinearGradientDemo.jsx ‎packages/site/components/demos/LinearGradientDemo.tsx

File renamed without changes.

‎packages/site/components/demos/StacksDemo.jsx ‎packages/site/components/demos/StacksDemo.tsx

File renamed without changes.

‎packages/site/components/demos/TextDemo.jsx ‎packages/site/components/demos/TextDemo.tsx

File renamed without changes.

‎packages/site/components/demos/ThemeInverseDemo.jsx ‎packages/site/components/demos/ThemeInverseDemo.tsx

File renamed without changes.

‎packages/site/components/demos/TooltipDemo.jsx ‎packages/site/components/demos/TooltipDemo.tsx

File renamed without changes.

‎packages/site/components/demos/index.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,4 @@ export { FormsDemo } from './FormsDemo'
66
export { LinearGradientDemo } from './LinearGradientDemo'
77
export { HeadingsDemo } from './HeadingsDemo'
88
export { TooltipDemo } from './TooltipDemo'
9+
export { DrawerDemo } from './DrawerDemo'

‎packages/site/data/docs/components/drawer/1.0.0-alpha.mdx

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
---
2+
title: Drawer
3+
description: A simple drawer component
4+
name: text
5+
---
6+
7+
# Drawer
8+
9+
<Description>Show content above in a bottom sliding drawer.</Description>
10+
11+
<HeroContainer resetTheme>
12+
<DrawerDemo />
13+
</HeroContainer>
14+
15+
```jsx hero template=Drawer
16+
17+
```
18+
19+
<Highlights
20+
features={[`Doesn't open until your mouse stops moving.`, `Doesn't render on native.`]}
21+
/>
22+
23+
## Usage
24+
25+
```jsx
26+
import { Drawer, Button } from 'tamagui'
27+
28+
export default () => (
29+
<Drawer contents="Text in drawer">
30+
<Button>Hover to open</Button>
31+
</Drawer>
32+
)
33+
```
34+
35+
### Drawer props
36+
37+
Drawers extend Stack views inheriting all the [Tamagui standard props](/docs/intro/props), plus:
38+
39+
<PropsTable
40+
data={[
41+
{
42+
name: 'contents',
43+
required: true,
44+
type: 'string',
45+
description: `What's shown in the drawer.`,
46+
},
47+
{
48+
name: 'drawerFrameProps',
49+
required: false,
50+
type: 'StackProps',
51+
description: `Change style of the drawer frame`,
52+
},
53+
{
54+
name: 'size',
55+
required: true,
56+
type: 'Size',
57+
description: `Size it up or down.`,
58+
},
59+
{
60+
name: 'alwaysDark',
61+
required: false,
62+
type: 'Boolean',
63+
description: `Make sure the frame is dark`,
64+
},
65+
{
66+
name: 'delay',
67+
required: false,
68+
type: 'number',
69+
description: `Set the delay before appearing`,
70+
},
71+
{
72+
name: 'allowHoverOnContent',
73+
required: false,
74+
type: 'Boolean',
75+
description: `Allow hover on drawer content`,
76+
},
77+
{
78+
name: 'disableUntilSettled',
79+
required: false,
80+
type: 'Boolean',
81+
description: `Override hover only on settled`,
82+
},
83+
]}
84+
/>

‎packages/site/lib/docsRoutes.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,8 @@ export const docsRoutes = [
2323
{ title: 'Visually Hidden', slug: 'docs/components/visually-hidden' },
2424
{ title: 'Forms', slug: 'docs/components/forms' },
2525
{ title: 'Tooltip', slug: 'docs/components/tooltip' },
26-
// { title: 'Popover', slug: 'docs/components/popover' },
26+
{ title: 'Drawer', slug: 'docs/components/drawer' },
27+
{ title: 'Popover', slug: 'docs/components/popover' },
2728
// { title: 'Grid', slug: 'docs/components/grid' },
2829
],
2930
},

‎packages/site/lib/remark-hero-template.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ module.exports = (options = {}) => {
1414
if (!node.meta) return
1515
const [_, templateName] = node.meta?.split('template=') ?? []
1616
if (!templateName) return
17-
const templatePath = path.join(`${ROOT_PATH}/${HERO_PATH}/${templateName}Demo.jsx`)
17+
const templatePath = path.join(`${ROOT_PATH}/${HERO_PATH}/${templateName}Demo.tsx`)
1818
let source = fs.readFileSync(path.join(templatePath), 'utf8')
1919
node.value = source
2020
}

‎packages/site/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
"lodash.debounce": "^4.0.8",
2525
"mdx-bundler": "^8.0.1",
2626
"mdx-prism": "^0.3.4",
27-
"next": "^12.0.8",
27+
"next": "^12.0.10",
2828
"next-videos": "^1.4.0",
2929
"parse-numeric-range": "^1.2.0",
3030
"react": "*",

‎packages/static/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747
"react-test-renderer": "18.0.0-beta-149b420f6-20211119",
4848
"style-loader": "^3.3.0",
4949
"typescript": "^4.5.2",
50-
"webpack": "^5.58.1"
50+
"webpack": "^5.68.0"
5151
},
5252
"dependencies": {
5353
"@babel/core": "^7.15.5",

‎packages/static/src/extractor/loadTamagui.ts

+5-2
Original file line numberDiff line numberDiff line change
@@ -16,16 +16,19 @@ export function loadTamagui(props: { components: string[]; config: string }): {
1616
// lets shim require and avoid importing react-native + react-native-web
1717
// we just need to read the config around them
1818
process.env.IS_STATIC = 'is_static'
19-
const proxyWorm = require('react-native-web')
19+
const rnw = require('react-native-web')
2020
const Mod = require('module')
2121
const og = Mod.prototype.require
2222
Mod.prototype.require = function (path: string) {
23+
if (path === '@gorhom/bottom-sheet') {
24+
return {}
25+
}
2326
if (
2427
path.startsWith('react-native') &&
2528
// allow our rnw.tsx imports through
2629
!path.startsWith('react-native-web/dist/cjs/exports')
2730
) {
28-
return proxyWorm
31+
return rnw
2932
}
3033
return og.apply(this, arguments)
3134
}

‎packages/tamagui/package.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"watch": "tamagui-build --watch"
1919
},
2020
"dependencies": {
21+
"@gorhom/bottom-sheet": "^4.1.5",
2122
"@react-aria/ssr": "^3.1.0",
2223
"@react-aria/utils": "^3.10.0",
2324
"@react-native-aria/focus": "^0.2.5",
@@ -28,10 +29,12 @@
2829
"@tamagui/helpers": "^1.0.0-alpha.48",
2930
"@tamagui/use-debounce": "^1.0.0-alpha.44",
3031
"@tamagui/use-force-update": "^1.0.0-alpha.44",
31-
"expo-linear-gradient": "^10.0.3",
32+
"expo-linear-gradient": "^11.0.2",
3233
"normalize-css-color": "*",
3334
"react": "*",
3435
"react-dom": "*",
36+
"react-native-gesture-handler": "^2.2.0",
37+
"react-native-reanimated": "^2.3.1",
3538
"react-native-safe-area-context": "^3.3.2"
3639
},
3740
"peerDependencies": {

‎packages/tamagui/src/helpers/withStaticProperties.tsx

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export const withStaticProperties = function <A extends Function, B>(
2+
component: A,
3+
staticProps: B
4+
): A & B {
5+
Object.assign(component, staticProps)
6+
return component as any
7+
}

‎packages/tamagui/src/index.ts

+4
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@ export * from '@tamagui/helpers'
66
// lets be explicit on what gets exported
77
export {
88
// types
9+
addMediaQueryListener,
10+
mediaQueryConfig,
11+
TamaguiInternalConfig,
912
GenericTamaguiConfig,
1013
ColorTokens,
1114
CreateTamaguiConfig,
@@ -96,6 +99,7 @@ export * from './views/BlurView'
9699
export * from './views/Box'
97100
export * from './views/Button'
98101
export * from './views/Circle'
102+
export * from './views/Drawer'
99103
export * from './views/EnsureFlexed'
100104
export * from './views/Form'
101105
export * from './views/Grid'

0 commit comments

Comments
 (0)