Merge branch 'master' into lucia-auth

.github/scripts/env.ts

@@ -24,7 +24,7 @@ const envFileContent = fs.readFileSync(envFilePath, 'utf8')
 /**
  * Generate Expo .env file content
  */
-let expoOutputPath = path.join(__dirname, '../../apps/expo', outputName)
+const expoOutputPath = path.join(__dirname, '../../apps/expo', outputName)
 const expoFileContent = envFileContent
   .split('\n')
   .map((line) => {

.gitpod.yml

@@ -2,4 +2,4 @@ tasks:
   - init: |
       curl -fsSL https://bun.sh/install | bash 
       source /home/gitpod/.bashrc
-      bun install && bun build
+      bun install

.markdownlint.json

@@ -0,0 +1,5 @@
+{
+  "MD013": false,
+  "MD033": false,
+  "MD041": false
+}

.vscode/extensions.json

@@ -1,22 +1,17 @@
 {
   "recommendations": [
     "albbus.t4-app-tools",
-    "esbenp.prettier-vscode",
-    "wix.vscode-import-cost",
     "unifiedjs.vscode-mdx",
-    "RobbOwen.synthwave-vscode",
+    "robbowen.synthwave-vscode",
     "wayou.vscode-todo-highlight",
     "steoates.autoimport",
-    "IronGeek.vscode-env",
-    "DavidAnson.vscode-markdownlint",
+    "irongeek.vscode-env",
+    "davidanson.vscode-markdownlint",
     "waderyan.gitblame",
-    "PeterSchmalfeldt.explorer-exclude",
-    "dbaeumer.vscode-eslint",
+    "peterschmalfeldt.explorer-exclude",
     "wilsonsio.color-vision",
     "tamasfe.even-better-toml",
-    "formulahendry.auto-rename-tag",
-    "dbaeumer.vscode-eslint",
     "expo.vscode-expo-tools",
-    "Postman.postman-for-vscode"
+    "biomejs.biome"
   ]
 }

.vscode/settings.json

@@ -57,7 +57,20 @@
     "*.js": "${capture}.js.map, ${capture}.d.ts, ${capture}.d.ts.map",
     "*.ts": "$(capture).test.ts, $(capture).test.tsx, $(capture).test.node.ts, $(capture).test.node.tsx, $(capture).test.native.ts, $(capture).test.native.tsx, $(capture).test.ios.ts, $(capture).test.ios.tsx, $(capture).test.web.ts, $(capture).test.web.tsx, $(capture).test.android.ts, $(capture).test.android.tsx, ${capture}.native.tsx, ${capture}.ios.tsx, ${capture}.android.tsx, ${capture}.web.tsx, ${capture}.native.ts, ${capture}.ios.ts, ${capture}.android.ts, ${capture}.web.ts, ${capture}.native.js, ${capture}.ios.js, ${capture}.android.js, ${capture}.web.js, ${capture}.native.jsx, ${capture}.ios.jsx, ${capture}.android.jsx, ${capture}.web.jsx",
     "*.tsx": "$(capture).test.ts, $(capture).test.tsx, $(capture).test.node.ts, $(capture).test.node.tsx, $(capture).test.native.ts, $(capture).test.native.tsx, $(capture).test.ios.ts, $(capture).test.ios.tsx, $(capture).test.web.ts, $(capture).test.web.tsx, $(capture).test.android.ts, $(capture).test.android.tsx, ${capture}.native.tsx, ${capture}.ios.tsx, ${capture}.android.tsx, ${capture}.web.tsx, ${capture}.native.ts, ${capture}.ios.ts, ${capture}.android.ts, ${capture}.web.ts, ${capture}.native.js, ${capture}.ios.js, ${capture}.android.js, ${capture}.web.js, ${capture}.native.jsx, ${capture}.ios.jsx, ${capture}.android.jsx, ${capture}.web.jsx"
-  }
+  },
+  "editor.defaultFormatter": "biomejs.biome",
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "vscode.typescript-language-features"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "editor.formatOnPaste": true,
+  "editor.formatOnSave": true,
+  "editor.formatOnType": true
   // Turn this on if you want to debug the T4 App Tools Extension
   // "terminal.integrated.defaultProfile.windows": null
 }

README.md

@@ -1,7 +1,7 @@
 <p align="center">
   <a href="https://t4stack.com" target="_blank" rel="noopener noreferrer">
     <picture>
-      <img src="https://github.com/timothymiller/t4-app/blob/main/apps/next/public/t4-logo-large.png?raw=true" width="200" alt="Logo of Create T4 App">
+      <img src="https://github.com/timothymiller/t4-app/blob/master/apps/next/public/t4-logo-large.png?raw=true" width="200" alt="Logo of Create T4 App">
     </picture>
   </a>
 </p>
@@ -58,18 +58,35 @@ Easy integration with **Cloudflare** services, such as R2 & D1 enable developers
 
 - 🎨 [Tamagui](https://tamagui.dev)
 
+### 🔮 Frontend
+
+- 🔗 [Next.js](https://nextjs.org)
+- 📱 [Expo](https://expo.io)
+
 ### 📡 Data Fetching
 
 - 🔄 [tRPC](https://trpc.io)
 - ⏲️ [Tanstack Query](https://tanstack.com/query/latest)
+- 🎂 [ts-pattern](https://github.com/gvergnaud/ts-pattern)
+  - Handle data fetching UI states like this:
+ ![tanstack-ts-pattern](https://github.com/timothymiller/t4-app/assets/46549361/f022b20d-840d-48a9-83b8-c52d5f037880)
+
 
-### 🔮 Frontend
+### 📈 Performance Improvements
 
-- 🔗 [Next.js](https://nextjs.org)
-- 📱 [Expo](https://expo.io)
+- 💨 [Million.js](https://million.dev/)
+  - Virtual DOM replacement for React
+  - Achieve SolidJS-like performance with React
+- 🎂 [PattyCake](https://github.com/aidenybai/pattycake)
+  - Zero-runtime pattern matching with ts-pattern
+
+### ✅ Type Validation
+
+- 🤖 [Valibot](https://valibot.dev)
 
-### 🧭 Navigation
+### 🧭 Router
 
+- 📲 [Expo Router](https://docs.expo.dev/routing/introduction/)
 - ☀️ [Solito](https://solito.dev)
 
 ### 🏢 Global State Management
@@ -148,25 +165,35 @@ bun create t4-app --tauri
 
 ## ❓ Why T4?
 
+T4 is the result of extensive research and testing to identify the best libraries for React Native and Web development. We've done the hard work for you, so you can focus on building amazing apps without worrying about performance bottlenecks.
+
+Whether you're developing a mobile app with React Native or a web app using React, T4 is the perfect choice. Our template is designed to seamlessly integrate with your existing projects, making it easy to enhance performance without starting from scratch.
+
+### 🚅 Performance
+
+- 👉 6 second package install time
+- 👉 30 second backend deployments
+- 👉 90 second frontend deployments
+
 - Small learning curve
 - Instant feedback, rapid development
 - Universal across **React Native** & **React Web**
   - [Data fetching](https://tanstack.com/query/latest)
   - [Styling](https://tamagui.dev)
   - [Authentication](https://supabase.com)
   - [Navigation](https://solito.dev)
+  - [Type Safety](https://valibot.dev)
 - High code re-use
 - Low bundle size
 - Edge compatible
 - Fast startup time
 - Simple setup
 - Allows for platform-specific code when needed.
-- Type-safety
 
 ## 📦 What's Included
 
 - [Tamagui](https://tamagui.dev) - A UI kit for building beautiful and responsive user interfaces.
-- [Turborepo](https://turbo.build/) - A high performance build system for TypeScript, built in Rust.
+- [TanStack](https://tanstack.com/) - High-quality open-source software for React developers.
 - [tRPC](https://trpc.io) - A TypeScript framework for building end-to-end typesafe APIs.
 - [TypeScript](https://www.typescriptlang.org) - A typed superset of JavaScript that compiles to plain JavaScript.
 
@@ -176,9 +203,15 @@ The VSCode extension is optional but highly recommended. It provides a better de
 
 ## ✨ Features
 
+- ✅ 6 second package install time
+- ✅ 30 second backend deployments
+- ✅ 90 second frontend deployments
 - ✅ Tamagui UI kit across all platforms.
-- ✅ bun support
+- ✅ Bun support
 - ✅ Million.js Support
+- ✅ PattyCake Support
+- ✅ Valibot Support
+- ✅ Generate Valibot Type Guards from your Drizzle Schema
 - ✅ Supabase Auth
 - ✅ Uses Next.js for building web apps.
 - ✅ Uses Expo for building native mobile apps.
@@ -188,7 +221,7 @@ The VSCode extension is optional but highly recommended. It provides a better de
 - ✅ Uses tRPC & Tanstack Query for fetching & caching across all platforms.
 - ✅ Authentication across all platforms.
 - ✅ Powered by TypeScript for type safety and better developer experience.
-- ✅ Comes with pre-configured ESLint and Prettier for code consistency.
+- ✅ Comes with pre-configured Biome for lightning fast code consistency.
 - ✅ Github Action publishing for Expo apps
 - ✅ Database migration in CI/CD
 - ✅ Tauri Support
@@ -205,22 +238,19 @@ For help, discussion about best practices, or any other conversation that would
 
 ## 🫶 Contributors
 
-We welcome contributions from anyone and everyone. Please read our [contributing guidelines](https://github.com/timothymiller/t4-app/blob/main/CONTRIBUTING.md) for more information on how to get started.
+We welcome contributions from anyone and everyone. Please read our [contributing guidelines](https://github.com/timothymiller/t4-app/blob/master/CONTRIBUTING.md) for more information on how to get started.
 
 ## 👏 Special Thanks
 
-- [Cloudflare Developers](https://twitter.com/CloudflareDev)
-- [Yusuke Wada](https://twitter.com/yusukebe) - Creator of Hono.js
 - [Nate Birdman](https://twitter.com/natebirdman) - Creator of Tamagui
-- [Fernando Rojo](https://twitter.com/fernandotherojo) - Creator of Solito
+- [Aiden Bai](https://aiden.mov/) - Creator of Million.js and PattyCake
 - [Tanner Linsley](https://twitter.com/tannerlinsley) - Creator of TanStack
-- [Daishi Kato](https://twitter.com/dai_shi) Creator of Jotai
-- [Shopify Developers](https://twitter.com/ShopifyDevs)
 - [Drizzle Developers](https://twitter.com/DrizzleOrm)
-- [Tim Neutkens](https://twitter.com/timneutkens) - Co-author of Next.js
-- [Jared Palmer](https://twitter.com/jaredpalmer) - Creator of Turborepo
-- [Expo Developers](https://twitter.com/expo) - Office hours
+- [Yusuke Wada](https://twitter.com/yusukebe) - Creator of Hono.js
+- [Fernando Rojo](https://twitter.com/fernandotherojo) - Creator of Solito
+- [Daishi Kato](https://twitter.com/dai_shi) Creator of Jotai
+- [Expo Developers](https://twitter.com/expo) - Insightful office hours
 
 ## ⚖️ License
 
-**Create T4 App** is licensed under the [MIT License](https://github.com/timothymiller/t4-app/blob/main/LICENSE).
+**Create T4 App** is licensed under the [MIT License](https://github.com/timothymiller/t4-app/blob/master/LICENSE).

apps/expo/babel.config.js

@@ -11,23 +11,23 @@ module.exports = function (api) {
           alias: {
             app: '../../packages/app',
             '@t4/api': '../../packages/api',
-            '@t4/ui': '../../packages/ui'
+            '@t4/ui': '../../packages/ui',
           },
-          extensions: ['.js', '.jsx', '.tsx', '.ios.js', '.android.js']
-        }
+          extensions: ['.js', '.jsx', '.tsx', '.ios.js', '.android.js'],
+        },
       ],
       ...(process.env.EAS_BUILD_PLATFORM === 'android'
         ? []
         : [
-          [
-            '@tamagui/babel-plugin',
-            {
-              components: ['@t4/ui', 'tamagui'],
-              config: './tamagui.config.ts'
-            }
-          ]
-        ]),
-      'jotai/babel/plugin-react-refresh'
-    ]
+            [
+              '@tamagui/babel-plugin',
+              {
+                components: ['@t4/ui', 'tamagui'],
+                config: './tamagui.config.ts',
+              },
+            ],
+          ]),
+      'jotai/babel/plugin-react-refresh',
+    ],
   }
 }

apps/expo/metro.config.js

@@ -8,7 +8,7 @@ const workspaceRoot = path.resolve(__dirname, '../..')
 /** @type {import('expo/metro-config').MetroConfig} */
 const config = getDefaultConfig(projectRoot, {
   // [Web-only]: Enables CSS support in Metro.
-  isCSSEnabled: true
+  isCSSEnabled: true,
 })
 
 // // Add import aliases
@@ -17,7 +17,7 @@ const config = getDefaultConfig(projectRoot, {
 // };
 
 // Add the additional `cjs` extension to the resolver
-config.resolver.sourceExts.push("cjs");
+config.resolver.sourceExts.push('cjs')
 
 // 1. Watch all files within the monorepo
 config.watchFolders = [workspaceRoot]
@@ -27,7 +27,7 @@ config.resolver.nodeModulesPaths = [
   path.resolve(workspaceRoot, 'node_modules'),
 ]
 // 3. Force Metro to resolve (sub)dependencies only from the `nodeModulesPaths`
-config.resolver.disableHierarchicalLookup = true;
+config.resolver.disableHierarchicalLookup = false
 
 config.transformer = { ...config.transformer, unstable_allowRequireContext: true }
 config.transformer.minifierPath = require.resolve('metro-minify-terser')

apps/expo/package.json

@@ -17,9 +17,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.23.2",
-    "@shopify/flash-list": "^1.6.2",
-    "@t4/ui": "*",
-    "app": "*",
+    "@shopify/flash-list": "^1.6.3",
+    "@t4/ui": "workspace:*",
+    "app": "workspace:*",
     "babel-plugin-module-resolver": "^5.0.0",
     "burnt": "^0.12.1",
     "expo": "^49.0.16",
@@ -30,8 +30,8 @@
     "expo-font": "~11.6.0",
     "expo-image": "~1.5.1",
     "expo-linear-gradient": "~12.5.0",
-    "expo-linking": "6.0.0",
-    "expo-router": "^2.0.10",
+    "expo-linking": "5.0.2",
+    "expo-router": "^2.0.11",
     "expo-splash-screen": "^0.22.0",
     "expo-status-bar": "~1.7.1",
     "expo-system-ui": "^2.6.0",

apps/next/bun-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference lib="dom" />
+/// <reference lib="dom.iterable" />
+
+// This is required because bun-types currently removes the libs defined in the tsconfig
+// https://github.com/oven-sh/bun/issues/5134

apps/next/cfImageLoader.js

@@ -1,5 +1,5 @@
 // Docs: https://developers.cloudflare.com/images/url-format
-export default function cloudflareLoader ({ src, width, quality }) {
+export default function cloudflareLoader({ src, width, quality }) {
   const params = [`width=${width}`, `quality=${quality || 75}`, 'format=auto']
   // const params = [`width=${width}`, `quality=${quality || 75}`]
   const isDev = process.env.NODE_ENV === 'development'