diff --git a/apps/next/next.config.js b/apps/next/next.config.js
index ce381214..09bf61b2 100644
--- a/apps/next/next.config.js
+++ b/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,20 +37,20 @@ 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} */
@@ -58,47 +58,52 @@ 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 --------------------------------------------------------------------------------- */
diff --git a/features/app-core/fonts/AntDesign.ttf b/features/app-core/fonts/AntDesign.ttf
new file mode 100644
index 00000000..2abf0354
Binary files /dev/null and b/features/app-core/fonts/AntDesign.ttf differ
diff --git a/features/app-core/fonts/registry.tsx b/features/app-core/fonts/registry.tsx
new file mode 100644
index 00000000..4a7f3d8c
--- /dev/null
+++ b/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'),
+}
diff --git a/features/app-core/fonts/registry.web.tsx b/features/app-core/fonts/registry.web.tsx
new file mode 100644
index 00000000..4e03a9bf
--- /dev/null
+++ b/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,
+}
diff --git a/features/app-core/hooks/useLoadFonts.ts b/features/app-core/hooks/useLoadFonts.ts
index 01c95ec3..cc13b7c0 100644
--- a/features/app-core/hooks/useLoadFonts.ts
+++ b/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
diff --git a/features/app-core/tailwind.config.js b/features/app-core/tailwind.config.js
index 77dcc744..69c4aed6 100644
--- a/features/app-core/tailwind.config.js
+++ b/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=\"([^\"]*)", //
-// "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=\"([^\"]*)", //
+ "tw={\"([^\"}]*)", //
+ "tw\\.\\w+`([^`]*)", // tw.xxx`...`
+ "tw\\(.*?\\)`([^`]*)" // tw(Component)`...`
+ ],
+ "tailwindCSS.includeLanguages": {
+ "typescript": "javascript",
+ "typescriptreact": "javascript"
+ },
+-- */
diff --git a/packages/@registries/ICONS.md b/packages/@registries/ICONS.md
index c920330b..52e8a272 100644
--- a/packages/@registries/ICONS.md
+++ b/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 }) => (
['name']}
diff --git a/packages/@registries/fonts.generated.ts b/packages/@registries/fonts.generated.ts
new file mode 100644
index 00000000..63ceb3ce
--- /dev/null
+++ b/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