@0.2.3: font loading cleanup (#4)

Font cleanup: remove index from next so font loading is not trigger eroneously cleaned up /next dir move BannerBlock out of this package (it's specific to sites/market)
hanzoai · Jan 27, 2024 · 9b2533f · 9b2533f
1 parent dc194d7
commit 9b2533f
Show file tree

Hide file tree

Showing 15 changed files with 40 additions and 181 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,6 +2,7 @@
 
 # dependencies
 node_modules
+**/node_modules
 .pnp
 .pnp.js
 
@@ -10,8 +11,6 @@ coverage
 
 # next.js
 .next/
-out/
-build
 
 # misc
 .DS_Store
@@ -24,17 +23,16 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # local env files
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+**/.env
+**/.env.*
 
 # turbo
 .turbo
 
 .contentlayer
-tsconfig.tsbuildinfo
+**/tsconfig.tsbuildinfo
 
+# build
 **/dist
 
 **/.npmrc
diff --git a/.nvmrc b/.nvmrc
diff --git a/pkgs/luxdefi-ui/blocks/components/banner-block.tsx b/pkgs/luxdefi-ui/blocks/components/banner-block.tsx
diff --git a/pkgs/luxdefi-ui/blocks/components/index.ts b/pkgs/luxdefi-ui/blocks/components/index.ts
@@ -1,5 +1,4 @@
 import AccordianBlock from './accordian-block'
-import BannerBlock from  './banner-block'
 import BlockFactory from './block-factory'
 import CardBlock from './card-block'
 import CTABlock from './cta-block'
@@ -11,7 +10,6 @@ import SpaceBlock from './space-block'
 
 export { 
    AccordianBlock as AccordianBlockComponent, 
-   BannerBlock as BannerBlockComponent, 
    BlockFactory,
    CardBlock as CardBlockComponent,
    CTABlock as CTABlockComponent,

diff --git a/pkgs/luxdefi-ui/blocks/def/banner-block.ts b/pkgs/luxdefi-ui/blocks/def/banner-block.ts
diff --git a/pkgs/luxdefi-ui/blocks/def/index.ts b/pkgs/luxdefi-ui/blocks/def/index.ts
@@ -1,5 +1,4 @@
 import type AccordianBlock from './accordian-block'
-import type BannerBlock from  './banner-block'
 import type Block from './block'
 import type CardBlock from './card-block'
 import type CTABlock from './cta-block'
@@ -13,7 +12,6 @@ import type SpecialBlock from './special-block'
 
 export { 
    type AccordianBlock, 
-   type BannerBlock, 
    type Block,
    type CardBlock,
    type CTABlock,

diff --git a/pkgs/luxdefi-ui/index.ts b/pkgs/luxdefi-ui/index.ts
@@ -18,4 +18,3 @@ export {
 } from './types'
 
 export * from './primitives'
-export * from './next'
diff --git a/pkgs/luxdefi-ui/next/README.md b/pkgs/luxdefi-ui/next/README.md
@@ -0,0 +1,11 @@
+# Next related Lux helpers
+
+### no `index.ts` file, and `load-and-return-lux-next-fonts-on-import.ts`
+
+Next font loading requires the fonts to be assigned to const's in module scope (ie, loaded when the module is evaluated, exactly once).
+
+If there was an `index.ts` "barrel file", and the client code imported anything from this package, it would have resulted in evaluting all the packages imported including the that loaded the fonts. Without the index, the client code knows what modules import it and thus when it happens.
+
+tl;dr: See [this article from Vercel](https://vercel.com/blog/how-we-optimized-package-imports-in-next-js) about this issue. 
+
+(Previously, not having this safegaurd caused a serious bug becuase the fonts were loaded far too early.)
diff --git a/pkgs/luxdefi-ui/next/determine-device-middleware.ts b/pkgs/luxdefi-ui/next/determine-device-middleware.ts
@@ -1,7 +1,8 @@
 import { NextRequest, NextResponse, userAgent } from 'next/server'
 import { getSelectorsByUserAgent } from 'react-device-detect'
 
-export const determineDeviceMiddleware = async (request: NextRequest) => {
+  // writed this way so they can be chained :)
+const determineDeviceMiddleware = async (request: NextRequest) => {
 
   const ua = userAgent(request)
   const { isMobileOnly, isTablet, isDesktop } = getSelectorsByUserAgent(ua.ua)
@@ -11,3 +12,5 @@ export const determineDeviceMiddleware = async (request: NextRequest) => {
   url.searchParams.set('agent', agent)
   return NextResponse.rewrite(url)
 }
+
+export default determineDeviceMiddleware
diff --git a/pkgs/luxdefi-ui/next/get-app-router-font-classes.ts b/pkgs/luxdefi-ui/next/get-app-router-font-classes.ts
@@ -1,18 +1,12 @@
-import fontDescs from './lux-next-fonts'
+import nextFonts from './load-and-return-lux-next-fonts-on-import'
 import type NextFontDesc from './next-font-desc'
 
   // These will be injected for <body> in app router app that uses our RootLayout
 
   // First is assumed to be mapped to the default font and is injected into <body>
   // as a normal tw font family class.
-export default () => {
-  let nextFonts: NextFontDesc[] = []
-  fontDescs.forEach((desc: NextFontDesc) => {
-    if (desc.nextFont) {
-      nextFonts.push(desc)
-    }
-  })
-  return nextFonts.map(
-    (desc: NextFontDesc) => (desc.nextFont!.variable)
-  ).join(' ') + ` font-${nextFonts[0].twName}`
-}
+export default () => (
+  nextFonts.map(
+      (desc: NextFontDesc) => (desc.nextFont!.variable)
+    ).join(' ') + ` font-${nextFonts[0].twName}`
+)
diff --git a/pkgs/luxdefi-ui/next/index.ts b/pkgs/luxdefi-ui/next/index.ts
diff --git a/pkgs/luxdefi-ui/next/lux-next-fonts.ts → ...ad-and-return-lux-next-fonts-on-import.ts b/pkgs/luxdefi-ui/next/lux-next-fonts.ts → ...ad-and-return-lux-next-fonts-on-import.ts
@@ -6,6 +6,15 @@ import type TwFontDesc from '../tailwind/tw-font-desc'
 
 import twFonts from '../tailwind/lux-tw-fonts'
 
+/*
+  Creating NextFontDesc's and TwFontDesc's has to be seperated because they are needed 
+  at different times during the next compile / build.  Otherwise a nasty 
+  race condition happens! 
+
+  Also, requires that "Font loaders must be called and assigned to a const in the module scope"
+
+*/
+
 const drukTextWide = localFont({
   src: [
     {
@@ -32,14 +41,7 @@ const inter = Inter({
   subsets: ["latin"],
   variable: "--font-inter",
 })
-
-
-/*
-  NextFontDesc and TwFontDesc have to be seperate because they are needed 
-  at different times during the next compile / build.  Otherwise a nasty 
-  race condition happens! That's why they are in different files.
-*/
-
+
 export default [
   {
     font: inter,
@@ -62,3 +64,5 @@ export default [
     })
   }
 ) as NextFontDesc[]
+
+
diff --git a/pkgs/luxdefi-ui/next/pages-router-font-vars.tsx b/pkgs/luxdefi-ui/next/pages-router-font-vars.tsx
@@ -1,5 +1,5 @@
 
-import nextFonts from './lux-next-fonts'
+import nextFonts from './load-and-return-lux-next-fonts-on-import'
 import type NextFontDesc from './next-font-desc'
 
 const PagesRouterFontVars: React.FC = () => {

diff --git a/pkgs/luxdefi-ui/package.json b/pkgs/luxdefi-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@luxdefi/ui",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "Library that contains shared UI primitives, styles, and core types",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",

diff --git a/pkgs/luxdefi-ui/primitives/video-player.tsx b/pkgs/luxdefi-ui/primitives/video-player.tsx
@@ -1,19 +1,15 @@
 'use client'
 import React from 'react'
 
-import type { Dimensions } from '../types'
-
 interface VideoProps extends React.ComponentPropsWithoutRef<"video"> {
   sources: string[]
   className?: string
-  constrainTo?: Dimensions
 }
 
 const VideoPlayer = React.forwardRef<HTMLVideoElement, VideoProps>(
 ({
   sources, 
   className='', 
-  constrainTo,
   ...rest
 }, ref) => {