chore: Merge PR #53 from feat/upgrade-babel-nextjs-13.5.6

codinsonn · web-flow · commit 7b2ba82bc5cc · 2023-11-04T23:19:13.000+01:00
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -79,6 +79,9 @@ module.exports = {
     core: {
         builder: 'webpack5',
     },
+    typescript: {
+      reactDocgen: 'react-docgen-typescript-plugin'
+    },
     features: {
       previewMdx2: true, // 👈 MDX 2 enabled here (https://storybook.js.org/docs/react/writing-docs/mdx#mdx-2)
     },
diff --git a/apps/expo/package.json b/apps/expo/package.json
@@ -46,14 +46,14 @@
     "react-native-safe-area-context": "4.6.3",
     "react-native-screens": "3.22.1",
     "react-native-svg": "13.9.0",
-    "react-native-web": "~0.19.6",
+    "react-native-web": "~0.19.9",
     "registries": "*"
   },
   "devDependencies": {
     "@expo/webpack-config": "^0.17.2",
-    "@types/react": "18.0.28",
+    "@types/react": "18.2.34",
     "dotenv": "^16.3.1",
-    "typescript": "^4.9.5"
+    "typescript": "^5.2.2"
   },
   "expo": {
     "install": {
diff --git a/apps/next/app/(generated)/bio/[slug]/page.tsx b/apps/next/app/(generated)/bio/[slug]/page.tsx
@@ -1,3 +1,3 @@
 'use client'
 // -i- Automatically generated by 'yarn link-routes', do not modify manually
-export { default, dynamic, generateStaticParams } from 'links-page/routes/bio/[slug]'
+export { default, dynamic } from 'links-page/routes/bio/[slug]'
diff --git a/apps/next/next.config.js b/apps/next/next.config.js
@@ -13,7 +13,6 @@ const workspaceResolutions = require('registries/workspaceResolutions.generated.
 /* --- Transpiled Modules ---------------------------------------------------------------------- */
 
 const transpiledModules = require('config/transpiledModules')
-const withTM = require('next-transpile-modules')(transpiledModules)
 
 /* --- Automation Scripts ---------------------------------------------------------------------- */
 // -i- This will run the aetherspace automation scripts on local dev builds (comment out what you don't need)
@@ -93,15 +92,14 @@ const nextConfig = {
     },
     // App dir support
     reactStrictMode: true,
-    experimental: {
-        // transpilePackages: transpiledModules,
-    },
+    transpilePackages: transpiledModules,
+    experimental: {},
 }
 
 // Apply plugins to next config, avoiding next-compose-plugins:
 // -i- https://github.com/cyrilwanner/next-compose-plugins/issues/59#issuecomment-1209152211
 // -i- https://github.com/cyrilwanner/next-compose-plugins/issues/59#issuecomment-1220739666
-const plugins = [withTM, withFonts, withImages, withPWA, [withExpo, { projectRoot: workspaceRoot }]]
+const plugins = [withFonts, withImages, withPWA, [withExpo, { projectRoot: workspaceRoot }]]
 const withPlugins = (_phase /*, { defaultConfig } */) => {
     // Build final config
     const finalConfig = plugins.reduce(
diff --git a/apps/next/package.json b/apps/next/package.json
@@ -19,11 +19,10 @@
         "app": "*",
         "encoding": "^0.1.13",
         "expo-asset-web": "npm:expo-asset@8.7.0",
-        "next": "13.4.8",
+        "next": "13.5.6",
         "next-fonts": "^1.5.1",
         "next-images": "^1.8.5",
         "next-pwa": "^5.6.0",
-        "next-transpile-modules": "^10.0.0",
         "raf": "^3.4.1",
         "registries": "*",
         "setimmediate": "^1.0.5",
diff --git a/features/app-core/hooks/useLoadFonts.ts b/features/app-core/hooks/useLoadFonts.ts
@@ -28,8 +28,6 @@ const useLoadFonts = () => {
     Roboto700: Roboto_700Bold,
     Roboto800: Roboto_900Black, // Fallback
     Roboto900: Roboto_900Black,
-    // - Icon Fonts -
-    AntDesign: require('@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/AntDesign.ttf'),
   }
 
   const [googleFontsLoaded, googleFontsError] = useFonts(fontsToLoad)
diff --git a/features/cv-page/icons/registry.tsx b/features/cv-page/icons/registry.tsx
diff --git a/features/cv-page/screens/ResumeScreen.tsx b/features/cv-page/screens/ResumeScreen.tsx
@@ -267,11 +267,7 @@ export const ResumeScreenRouteDataConfig = {
 /* --- Route Segments -------------------------------------------------------------------------- */
 
 // -i- https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config
-export const dynamic = 'force-static' // 'auto' | 'force-dynamic' | 'error' | 'force-static'
-
-export const generateStaticParams = async (): Promise<TResumeScreenParams[]> => {
-  return [{ slug: 'codinsonn' }]
-}
+export const dynamic = 'auto' // 'auto' | 'force-dynamic' | 'error' | 'force-static'
 
 /* --- <ResumeScreen/> ------------------------------------------------------------------------- */
 
diff --git a/features/links-page/routes/bio/[slug].tsx b/features/links-page/routes/bio/[slug].tsx
@@ -13,6 +13,5 @@ const PageScreen = (props: bioScreen.BioScreenProps) => (
 /* --- Exports --------------------------------------------------------------------------------- */
 
 export const dynamic = bioScreen.dynamic
-export const generateStaticParams = bioScreen.generateStaticParams
 
 export default PageScreen
diff --git a/features/links-page/screens/BioScreen.tsx b/features/links-page/screens/BioScreen.tsx
@@ -85,7 +85,7 @@ const getBioScreenProps = async (queryKey: string, queryVariables?: BioScreenPar
   const queryData = queryKey || getScreenDataQuery
   const queryInput = queryVariables || getBioScreenArgs() // Use defaults if not defined
   const { data } = await fetchAetherProps(queryData, queryInput)
-  return data.getUserBio as TUserBio
+  return data.getUserBio as TUserBio // satisfies TUserBio
 }
 
 export const screenConfig = {
@@ -100,11 +100,7 @@ export const screenConfig = {
 
 /* --- Segments -------------------------------------------------------------------------------- */
 
-export const dynamic = 'force-static' // 'auto' | 'force-dynamic' | 'error' | 'force-static'
-
-export const generateStaticParams = async (): Promise<BioScreenParams[]> => {
-  return [{ slug: 'codinsonn' }]
-}
+export const dynamic = 'auto' // 'auto' | 'force-dynamic' | 'error' | 'force-static'
 
 /* --- <BioScreen/> ---------------------------------------------------------------------------- */
 
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
     "packages/*"
   ],
   "engines": {
-    "node": ">=18.17.1 <19.0.0"
+    "node": ">=18.17.x <19.0.0"
   },
   "browser": {
     "fs": false,
@@ -31,21 +31,21 @@
     "@storybook/mdx2-csf": "^0.0.4",
     "@storybook/react": "^6.5.16",
     "@turbo/gen": "^1.10.7",
-    "@typescript-eslint/eslint-plugin": "^5.54.1",
-    "@typescript-eslint/parser": "^5.54.1",
+    "@typescript-eslint/eslint-plugin": "^6.9.1",
+    "@typescript-eslint/parser": "^6.9.1",
     "chromatic": "^6.17.1",
-    "eslint": "^8.35.0",
-    "eslint-config-next": "^13.2.4",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint": "^8.52.0",
+    "eslint-config-next": "^13.5.0",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-no-secrets": "^0.8.9",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-native": "^4.0.0",
+    "eslint-plugin-react-native": "^4.1.0",
     "eslint-plugin-react-native-a11y": "^3.3.0",
-    "patch-package": "^7.0.0",
-    "prettier": "^2.8.4",
-    "prettier-eslint": "^15.0.1",
+    "patch-package": "^8.0.0",
+    "prettier": "^3.0.3",
+    "prettier-eslint": "^16.1.2",
     "react-docgen-typescript-plugin": "^1.0.5",
     "turbo": "^1.10.7",
     "webpack": "*",
@@ -58,6 +58,7 @@
     "@babel/generator": "^7.22.5",
     "@babel/parser": "^7.22.6",
     "@babel/plugin-proposal-decorators": "^7.22.5",
+    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
     "@babel/plugin-syntax-import-assertions": "^7.22.5",
     "@babel/plugin-syntax-jsx": "^7.22.5",
     "@babel/plugin-transform-modules-commonjs": "^7.22.5",
@@ -71,10 +72,11 @@
     "@babel/traverse": "^7.22.6",
     "@babel/types": "^7.22.5",
     "@expo/config": "^7.0.2",
-    "@types/react": "18.0.28",
+    "@types/react": "18.2.34",
     "@expo/webpack-config": "^0.17.2",
     "expo-constants": "^14.4.2",
-    "typescript": "^4.9.5",
+    "graphql": "16.7.1",
+    "typescript": "^5.2.2",
     "zod": "~3.20.6"
   },
   "scripts": {
diff --git a/packages/@aetherspace/components/AetherIcon/README.md b/packages/@aetherspace/components/AetherIcon/README.md
@@ -6,8 +6,6 @@ There’s many different ways to use icons and icon sets in Aetherspace. Here’
 → SSR support, fast & easy, no layout shift on web, limited options
 - Custom SVG components using `react-native-svg`  
 → SSR support, can [convert from .svg file](https://transform.tools/svg-to-react-native), but could be more time-consuming
-- Third party iconfont libraries, such as `@expo/vector-icons`  
-→ Fast & easy, needs icon font preloaded, layout shift on web, locked out of SWC
 - Image icons through src urls  
 → Straight forward, easy, not super optimised, fixed colors, layout shift on web  
 
@@ -155,99 +153,6 @@ Downsides of this strategy:
 - Time consuming: Requires some copy-pasting between transform tools and your code
 - Therefore, even if it’s most reliable and configurable, also not very fast or scalable
 
-## Using `@expo/vector-icons`
-
-[Expo Docs: @expo/vector-icons](https://docs.expo.dev/guides/icons/)
-
-> Check which iconset you want to use and how to use them on [https://icons.expo.fyi/](https://icons.expo.fyi/)
-
-Benefits of using this strategy:
-
-- Fast, choose icons from existing third party icon providers
-- Most @expo/vector-icons are also compatible with the web
-
-Downsides of using icon fonts under the hood:
-
-- You’ll need to preload your icon font somehow, easy on mobile but harder on web
-- Loading flicker, meaning you might not see the icon immediately if the icon font isn’t loaded yet
-- Cannot use Next.js’s SWC compiler when using any of the @expo/vector-icons (no loader for importing .ttf files)
-
-Example usage:
-
-```tsx
-import { AntDesign } from '@expo/vector-icons'
-
-<AntDesign
-  name="caretup"
-  size={24}
-  color="#333333"
-/>
-```
-
-Example preloading of icon font on mobile:
-
-`/features/app-core/hooks/useLoadFonts.ts`
-
-```tsx
-'use client'
-import { useFonts } from 'expo-font'
-import { /* Google Fonts */ } from '@expo-google-fonts/roboto'
-
-/* --- useLoadFonts() -------------------------------------------------------------------------- */
-
-const useLoadFonts = () => {
-  const fontsToLoad = {
-    // - Google Fonts -
-    /* ... */
-    // - Icon Fonts -
-    AntDesign: require('@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/AntDesign.ttf'),
-    // -!- important: always double check this path (^) for your icon fonts
-  }
-
-  const [fontsLoaded, fontsError] = useFonts(fontsToLoad)
-
-  if (fontsError) console.error('fontErrors:', fontsLoaded)
-
-  // -- Return --
-
-  return fontsLoaded // <- Keep splash screen open until this is true
-}
-
-/* --- Exports --------------------------------------------------------------------------------- */
-
-export default useLoadFonts
-```
-
-Example usage with `<AetherIcon/>`
-
-`/packages/{workspace-folder}/icons/registry.tsx`
-
-```tsx
-import React from 'react'
-import { registerIconRenderer } from 'aetherspace/utils'
-import { AntDesign } from '@expo/vector-icons'
-import { ComponentProps } from 'react'
-
-/** --- iconRegistry --------------------------------------------------------------------------- */
-/** -i- Register any icons by preferred AetherIcon "name" key */
-export const iconRegistry = {
-  // Register any icons from e.g. AntDesign you want by
-  // registering them by strings 👇 array (readonly) + render function
-  ...registerIconRenderer(['caretup'] as const, ({ name, size, fill, ...restIconProps }) => (
-    <AntDesign
-      name={name as ComponentProps<typeof AntDesign>['name']}
-      size={size}
-      color={fill}
-      {...restIconProps}
-    />
-  )),
-} as const // <-- Readonly is important here for accurate type hints
-```
-
-```tsx
-<AetherIcon name="caretup" size={24} fill="#333333" />
-```
-
 ## Using `AetherImage` with `.svg` files
 
 > Using `AetherImage` with `.svg` files might be the most bundle size friendly way of using SVGs in your app. Since it will always result in only using the SVGs that you actually use in your app.
@@ -258,6 +163,15 @@ export const iconRegistry = {
 
 The one major downside of using this approach though, is that colors won't be editable through props and like with icon fonts, it might introduce some loading flickering.
 
+## Why we don't recommend using Icon Fonts
+
+> Icon fonts are a popular way of using icons in web apps. But they have some downsides that we don't want to introduce in Aetherspace. One such downside is that they can easily introduce flickering during loading, which is a bad user experience.
+
+Icon fonts typically require the entire font file to be loaded. This can affect the app's performance, particularly during initial load when these fonts are larger than necessary. This makes even less sense when only a few icons are used.
+
+Therefore, we generally don't recommed using icon fonts like `@expo/vector-icons` or `react-native-vector-icons` in Aetherspace.
+Our recommended way to do icons remains using SVGs, either as React components or as images, but don't import them from barrel files.
+
 ## Continue learning:
 
 - [Automations based on Schemas and the Filesystem](/packages/@aetherspace/scripts/README.md)
diff --git a/packages/@aetherspace/forms/useFormState.ts b/packages/@aetherspace/forms/useFormState.ts
diff --git a/packages/@registries/icons.generated.ts b/packages/@registries/icons.generated.ts
@@ -1,13 +1,11 @@
 // -i- Auto generated with 'yarn ats collect-icons'
-import { iconRegistry as cvPageIcons } from '../../features/cv-page/icons/registry'
 import { iconRegistry as linksPageIcons } from '../../features/links-page/icons/registry'
 import { iconRegistry as aetherspaceIcons } from '../../packages/@aetherspace/icons/registry'
 import { iconRegistry as greenStackIconsIcons } from '../../packages/@green-stack-icons/icons/registry'
 
 /* --- Exports --------------------------------------------------------------------------------- */
 
 export const REGISTERED_ICONS = {
-    ...cvPageIcons,
     ...linksPageIcons,
     ...aetherspaceIcons,
     ...greenStackIconsIcons,
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -28,8 +28,6 @@ const useLoadFonts = () => {`
`28`	`28`	`Roboto700: Roboto_700Bold,`
`29`	`29`	`Roboto800: Roboto_900Black, // Fallback`
`30`	`30`	`Roboto900: Roboto_900Black,`
`31`		`- // - Icon Fonts -`
`32`		`- AntDesign: require('@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/AntDesign.ttf'),`
`33`	`31`	`}`
`34`	`32`
`35`	`33`	`const [googleFontsLoaded, googleFontsError] = useFonts(fontsToLoad)`