wip: Attempt Modular Font Management

apps/next/next.config.js

@@ -1,12 +1,12 @@
 // -i- Based on: https://github.com/axeldelafosse/expo-next-monorepo-example/blob/main/packages/next/next.config.js
 const { withExpo } = require('@expo/next-adapter')
-const withFonts = require('next-fonts')
-const withImages = require('next-images')
+// const withFonts = require('next-fonts')
+// const withImages = require('next-images')
 
 /* --- Transpiled Modules ---------------------------------------------------------------------- */
 
 const transpiledModules = require('config/transpiledModules')
-const withTM = require('next-transpile-modules')(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)
@@ -37,68 +37,73 @@ const withAutomation = () => {
 
 /* --- PWA Config ------------------------------------------------------------------------------ */
 
-const withPWA = require('next-pwa')({
-    // https://github.com/shadowwalker/next-pwa#available-options
-    dest: 'public',
-    disable: process.env.NODE_ENV === 'development',
-    // -i- Enable these to make the app a full PWA with service worker
-    // register: true,
-    // scope: '/app',
-    // sw: 'service-worker.js',
-})
+// const withPWA = require('next-pwa')({
+//     // https://github.com/shadowwalker/next-pwa#available-options
+//     dest: 'public',
+//     disable: process.env.NODE_ENV === 'development',
+//     // -i- Enable these to make the app a full PWA with service worker
+//     // register: true,
+//     // scope: '/app',
+//     // sw: 'service-worker.js',
+// })
 
 /* --- Build Next Config ----------------------------------------------------------------------- */
 
-const projectRoot = __dirname
-const workspaceRoot = `${projectRoot}/../..`
+// const projectRoot = __dirname
+// const workspaceRoot = `${projectRoot}/../..`
 
 // -i- Next specific config, e.g. https://nextjs.org/docs/api-reference/next.config.js/introduction
 /** @type {import('next').NextConfig} */
 const nextConfig = {
     typescript: {
         ignoreBuildErrors: true,
     },
-    images: {
-        domains: ['i3.ytimg.com'],
-    },
-    webpack: (config, { isServer }) => {
-        // -i- Run aetherspace automation scripts in DEV mode
-        if (!isServer && process.env.NODE_ENV === 'development') withAutomation()
-        // Enable top level await in API handlers
-        config.experiments.topLevelAwait = true
-        // Silence warnings about "unexpected" resolutions (file-loader)
-        config.infrastructureLogging = { level: "error" }
-        // Aliases for web support (https://github.com/expo/expo/issues/21469#issuecomment-1576001543)
-        config.resolve.alias['expo-asset'] = 'expo-asset-web'
-        // Return config
-        return config
-    },
+    // images: {
+    //     domains: ['i3.ytimg.com'],
+    // },
+    // webpack: (config, { isServer }) => {
+    //     // -i- Run aetherspace automation scripts in DEV mode
+    //     if (!isServer && process.env.NODE_ENV === 'development') withAutomation()
+    //     // Enable top level await in API handlers
+    //     config.experiments.topLevelAwait = true
+    //     // Silence warnings about "unexpected" resolutions (file-loader)
+    //     config.infrastructureLogging = { level: "error" }
+    //     // Aliases for web support (https://github.com/expo/expo/issues/21469#issuecomment-1576001543)
+    //     config.resolve.alias['expo-asset'] = 'expo-asset-web'
+    //     // Return config
+    //     return config
+    // },
     // App dir support
     reactStrictMode: true,
+    transpilePackages: transpiledModules,
     experimental: {
-        // appDir: true,
-        // transpilePackages: transpiledModules,
+        forceSwcTransforms: true,
     },
 }
 
-// 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 withPlugins = (_phase /*, { defaultConfig } */) => {
-    // Build final config
-    const finalConfig = plugins.reduce(
-        (acc, plugin) => {
-            // Handle plugins with options
-            if (Array.isArray(plugin)) return { ...acc, ...plugin[0](acc, plugin[1]) }
-            // Handle plugins without options
-            return { ...acc, ...plugin(acc) }
-        },
-        { ...nextConfig }
-    )
-    // Return final config
-    return finalConfig;
-}
+const withPlugins = withExpo({
+    ...nextConfig,
+    // 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 withPlugins = (_phase /*, { defaultConfig } */) => {
+//     // Build final config
+//     const finalConfig = plugins.reduce(
+//         (acc, plugin) => {
+//             // Handle plugins with options
+//             if (Array.isArray(plugin)) return { ...acc, ...plugin[0](acc, plugin[1]) }
+//             // Handle plugins without options
+//             return { ...acc, ...plugin(acc) }
+//         },
+//         { ...nextConfig }
+//     )
+//     // Return final config
+//     return finalConfig;
+// }
 
 /* --- Exports --------------------------------------------------------------------------------- */
 

features/app-core/fonts/registry.tsx

@@ -0,0 +1,38 @@
+// import {
+//   Roboto_100Thin,
+//   Roboto_300Light,
+//   Roboto_400Regular,
+//   Roboto_500Medium,
+//   Roboto_700Bold,
+//   Roboto_900Black,
+// } from '@expo-google-fonts/roboto'
+
+/** --- fontPaths ------------------------------------------------------------------------------ */
+/** -i- Register any font paths for web preloading */
+export const fontPaths = {
+  // - Google Fonts -
+  Roboto100: '@expo-google-fonts/roboto/Roboto_100Thin.ttf',
+  Roboto200: '@expo-google-fonts/roboto/Roboto_300Light.ttf', // Fallback
+  Roboto300: '@expo-google-fonts/roboto/Roboto_300Light.ttf',
+  Roboto400: '@expo-google-fonts/roboto/Roboto_400Regular.ttf',
+  Roboto500: '@expo-google-fonts/roboto/Roboto_500Medium.ttf',
+  Roboto600: '@expo-google-fonts/roboto/Roboto_700Bold.ttf', // Fallback
+  Roboto700: '@expo-google-fonts/roboto/Roboto_700Bold.ttf',
+  Roboto800: '@expo-google-fonts/roboto/Roboto_900Black.ttf', // Fallback
+  Roboto900: '@expo-google-fonts/roboto/Roboto_900Black.ttf',
+  // - Icon Fonts -
+  AntDesign: '@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/AntDesign.ttf',
+}
+
+/** --- fontRegistry --------------------------------------------------------------------------- */
+/** -i- Register any font for mobile preloading */
+export const fontRegistry = {
+  // - Google Fonts -
+  Roboto: require(fontPaths.Roboto400),
+  RobotoLight: require(fontPaths.Roboto300),
+  RobotoRegular: require(fontPaths.Roboto400),
+  RobotoBold: require(fontPaths.Roboto700),
+  RobotoBlack: require(fontPaths.Roboto900),
+  // - Icon Fonts -
+  AntDesign: require('@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/AntDesign.ttf'),
+}

features/app-core/fonts/registry.web.tsx

@@ -0,0 +1,49 @@
+import { Roboto as RobotoGoogleFont } from 'next/font/google'
+import localFont from 'next/font/local'
+
+/** --- fontPaths ------------------------------------------------------------------------------ */
+/** -i- Register any font paths for web preloading */
+// export const fontPaths = {
+//   // - Google Fonts -
+//   Roboto100: '@expo-google-fonts/roboto/Roboto_100Thin.ttf',
+//   Roboto200: '@expo-google-fonts/roboto/Roboto_300Light.ttf', // Fallback
+//   Roboto300: '@expo-google-fonts/roboto/Roboto_300Light.ttf',
+//   Roboto400: '@expo-google-fonts/roboto/Roboto_400Regular.ttf',
+//   Roboto500: '@expo-google-fonts/roboto/Roboto_500Medium.ttf',
+//   Roboto600: '@expo-google-fonts/roboto/Roboto_700Bold.ttf', // Fallback
+//   Roboto700: '@expo-google-fonts/roboto/Roboto_700Bold.ttf',
+//   Roboto800: '@expo-google-fonts/roboto/Roboto_900Black.ttf', // Fallback
+//   Roboto900: '@expo-google-fonts/roboto/Roboto_900Black.ttf',
+//   // - Icon Fonts -
+//   AntDesign: '@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/AntDesign.ttf',
+// }
+
+// const Roboto = localFont({ src: '@expo-google-fonts/roboto/Roboto_400Regular.ttf' })
+// const RobotoLight = localFont({ src: '@expo-google-fonts/roboto/Roboto_300Light.ttf' })
+// const RobotoRegular = localFont({ src: '@expo-google-fonts/roboto/Roboto_400Regular.ttf' })
+// const RobotoBold = localFont({ src: '@expo-google-fonts/roboto/Roboto_700Bold.ttf' })
+// const RobotoBlack = localFont({ src: '@expo-google-fonts/roboto/Roboto_900Black.ttf' })
+// const AntDesign = localFont({
+//   src: '@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/AntDesign.ttf',
+// })
+
+const Roboto = RobotoGoogleFont({ weight: '400', subsets: ['latin'] })
+const RobotoLight = RobotoGoogleFont({ weight: '300', subsets: ['latin'] })
+const RobotoRegular = RobotoGoogleFont({ weight: '400', subsets: ['latin'] })
+const RobotoBold = RobotoGoogleFont({ weight: '700', subsets: ['latin'] })
+const RobotoBlack = RobotoGoogleFont({ weight: '900', subsets: ['latin'] })
+
+const AntDesign = localFont({ src: './AntDesign.ttf' })
+
+/** --- fontRegistry --------------------------------------------------------------------------- */
+/** -i- Register any font for mobile preloading */
+export const fontRegistry = {
+  // - Google Fonts -
+  Roboto,
+  RobotoLight,
+  RobotoRegular,
+  RobotoBold,
+  RobotoBlack,
+  // - Icon Fonts -
+  AntDesign,
+}

features/app-core/hooks/useLoadFonts.ts

@@ -1,46 +1,60 @@
 'use client'
 import { useFonts } from 'expo-font'
-import {
-  Roboto_100Thin,
-  Roboto_300Light,
-  Roboto_400Regular,
-  Roboto_500Medium,
-  Roboto_700Bold,
-  Roboto_900Black,
-} from '@expo-google-fonts/roboto'
+// import {
+//   Roboto_100Thin,
+//   Roboto_300Light,
+//   Roboto_400Regular,
+//   Roboto_500Medium,
+//   Roboto_700Bold,
+//   Roboto_900Black,
+// } from '@expo-google-fonts/roboto'
+import { REGISTERED_FONTS } from 'registries/fonts.generated'
 
 /* --- useLoadFonts() -------------------------------------------------------------------------- */
 
 const useLoadFonts = () => {
-  const fontsToLoad = {
-    // - Google Fonts -
-    Roboto: Roboto_400Regular,
-    RobotoLight: Roboto_300Light,
-    RobotoRegular: Roboto_400Regular,
-    RobotoBold: Roboto_700Bold,
-    RobotoBlack: Roboto_900Black,
-    Roboto100: Roboto_100Thin,
-    Roboto200: Roboto_300Light, // Fallback
-    Roboto300: Roboto_300Light,
-    Roboto400: Roboto_400Regular,
-    Roboto500: Roboto_500Medium,
-    Roboto600: Roboto_700Bold, // Fallback
-    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)
-
-  if (googleFontsError) console.error('googleFontsError:', googleFontsError)
+  // Hooks
+  const [fontsLoaded, fontsError] = useFonts(REGISTERED_FONTS)
+
+  // -- Debug --
+
+  if (fontsError) console.error('fontsError:', fontsError)
 
   // -- Return --
 
-  return googleFontsLoaded
+  return fontsLoaded
 }
 
+// const useLoadFonts = () => {
+//   const fontsToLoad = {
+//     // - Google Fonts -
+//     Roboto: Roboto_400Regular,
+//     RobotoLight: Roboto_300Light,
+//     RobotoRegular: Roboto_400Regular,
+//     RobotoBold: Roboto_700Bold,
+//     RobotoBlack: Roboto_900Black,
+//     Roboto100: Roboto_100Thin,
+//     Roboto200: Roboto_300Light, // Fallback
+//     Roboto300: Roboto_300Light,
+//     Roboto400: Roboto_400Regular,
+//     Roboto500: Roboto_500Medium,
+//     Roboto600: Roboto_700Bold, // Fallback
+//     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 [fontsLoaded, fontsError] = useFonts(fontsToLoad)
+
+//   if (fontsError) console.error('fontsError:', fontsError)
+
+//   // -- Return --
+
+//   return fontsLoaded
+// }
+
 /* --- Exports --------------------------------------------------------------------------------- */
 
 export default useLoadFonts

features/app-core/tailwind.config.js

@@ -33,22 +33,23 @@ module.exports = {
 /* --- Intellisense Setup ---------------------------------------------------------------------- */
 // Enable intellisense by installing the "Tailwind CSS Intellisense" vscode plugin
 // Also add the following to your vscode's .settings file to get the addon to work properly:
-// --
-// "tailwindCSS.classAttributes": [
-//   "class",
-//   "className",
-//   "tw",
-//   "tailwind",
-//   "style"
-// ],
-// "tailwindCSS.experimental.classRegex": [
-//   "tw`([^`]*)", // tw`...`
-//   "tw=\"([^\"]*)", // <div tw="..." />
-//   "tw={\"([^\"}]*)", // <div tw={"..."} />
-//   "tw\\.\\w+`([^`]*)", // tw.xxx`...`
-//   "tw\\(.*?\\)`([^`]*)" // tw(Component)`...`
-// ],
-// "tailwindCSS.includeLanguages": {
-//   "typescript": "javascript",
-//   "typescriptreact": "javascript"
-// },
+/* --
+    "tailwindCSS.classAttributes": [
+    "class",
+    "className",
+    "tw",
+    "tailwind",
+    "style"
+    ],
+    "tailwindCSS.experimental.classRegex": [
+    "tw`([^`]*)", // tw`...`
+    "tw=\"([^\"]*)", // <div tw="..." />
+    "tw={\"([^\"}]*)", // <div tw={"..."} />
+    "tw\\.\\w+`([^`]*)", // tw.xxx`...`
+    "tw\\(.*?\\)`([^`]*)" // tw(Component)`...`
+    ],
+    "tailwindCSS.includeLanguages": {
+    "typescript": "javascript",
+    "typescriptreact": "javascript"
+    },
+-- */

packages/@registries/ICONS.md

@@ -195,7 +195,7 @@ import { ComponentProps } from 'react'
 /** -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 + render function
+	// registering them by strings 👇 array (readonly) + render function
   ...registerIconRenderer(['caretup'] as const, ({ name, size, fill, ...restIconProps }) => (
     <AntDesign
       name={name as ComponentProps<typeof AntDesign>['name']}

packages/@registries/fonts.generated.ts

@@ -0,0 +1,8 @@
+// -i- Auto generated with 'yarn ats collect-assets'
+import { fontRegistry } from '../../features/app-core/fonts/registry'
+
+/* --- Exports --------------------------------------------------------------------------------- */
+
+export const REGISTERED_FONTS = {
+    ...fontRegistry,
+} // prettier-ignore