init: 初始化模板项目

packages/app/provider/safe-area/use-safe-area.web.ts

@@ -0,0 +1,31 @@
+// I don't use the real useSafeAreaInsets() hook, since
+// 1) the SafeAreaProvider forces you to render null on Web until it measures
+// 2) you might not need to support it, unless you're doing landscape stuff
+// 3) react-native-safe-area-context has a massive import on Web
+// see: https://github.com/th3rdwave/react-native-safe-area-context/pull/189#issuecomment-815274313
+// 4) most importantly, I think you can just use the env(safe-area-inset-bottom) CSS variable instead
+// after all, safe area code is few-and-far-between, so if you have to write some platform-speciifc code for it,
+// that is probably better than a massive bundle size for little benefit
+
+import type { useSafeArea as nativeHook } from './use-safe-area'
+
+const area = {
+  bottom: 0,
+  left: 0,
+  right: 0,
+  top: 0,
+
+  // you could also use CSS env variables like below:
+  // but you'll have to be sure to override the types for `useSafeArea`
+  // and make sure to never add numbers and strings when you consue useSafeArea
+  // just keep in mind that the env() doesn't work on older browsers I think
+
+  // top: `env(safe-area-inset-top)`,
+  // right: `env(safe-area-inset-right)`,
+  // bottom: `env(safe-area-inset-bottom)`,
+  // left: `env(safe-area-inset-left)`,
+}
+
+export function useSafeArea(): ReturnType<typeof nativeHook> {
+  return area
+}