feat: loadYogaFromGH, use GH pages for default fonts

.github/workflows/assets.yml

@@ -39,19 +39,19 @@ jobs:
           fontforge -lang=ff -c 'Open($1); SelectAll(); RemoveOverlap(); Generate($2)' font.ttf inter-light.ttf
           npx msdf-bmfont -f json inter-light.ttf -i charset.txt -m 256,512 -o dist/inter-light -s 48
 
-      - name: Generate Inter Regular
+      - name: Generate Inter Normal
         working-directory: ./packages/fonts
         run: |
           node download.js "Inter" 400
-          fontforge -lang=ff -c 'Open($1); SelectAll(); RemoveOverlap(); Generate($2)' font.ttf regular-inter.ttf
-          npx msdf-bmfont -f json regular-inter.ttf -i charset.txt -m 256,512 -o dist/inter -s 48
+          fontforge -lang=ff -c 'Open($1); SelectAll(); RemoveOverlap(); Generate($2)' font.ttf inter-normal.ttf
+          npx msdf-bmfont -f json inter-normal.ttf -i charset.txt -m 256,512 -o dist/inter-normal -s 48
 
       - name: Generate Inter Medium
         working-directory: ./packages/fonts
         run: |
           node download.js "Inter" 500
-          fontforge -lang=ff -c 'Open($1); SelectAll(); RemoveOverlap(); Generate($2)' font.ttf inter.ttf
-          npx msdf-bmfont -f json inter.ttf -i charset.txt -m 256,512 -o dist/inter -s 48
+          fontforge -lang=ff -c 'Open($1); SelectAll(); RemoveOverlap(); Generate($2)' font.ttf inter-medium.ttf
+          npx msdf-bmfont -f json inter-medium.ttf -i charset.txt -m 256,512 -o dist/inter-medium -s 48
 
       - name: Generate Inter Semi Bold
         working-directory: ./packages/fonts
@@ -82,13 +82,17 @@ jobs:
           mkdir public
           mkdir public/fonts
           cp ./packages/fonts/dist/* ./public/fonts
-          cp ./packages/fonts/LICENSE public/LICENSE
+          cp ./packages/fonts/LICENSE public/fonts/LICENSE
 
       - name: Copy wasm files
         run: |
           mkdir public/yoga
           npm i yoga-wasm-web
-          cp node_modules/yoga-wasm-web/dist/yoga.wasm public/yoga.wasm
+          cp node_modules/yoga-wasm-web/dist/yoga.wasm public/yoga/yoga.wasm
+          cp ./packages/uikit/THIRD_PARTY_LICENSES public/yoga/THIRD_PARTY_LICENSES
+
+      - name: Add no jekyll
+        run: touch public/.nojekyll
 
       - name: Deploy
         uses: JamesIves/github-pages-deploy-action@v4

README.md

@@ -17,10 +17,8 @@ TODO Release
 - add shadcn components
 - add apfel components
 - Content "measureContent" flag => allow disabling content measuring and scaling
-- provide yoga wasm through GH CDN and fix "loadYogaFromGH"
 - cache load yoga globally
 - support for visibility="hidden"
-- provide set of default fonts
 - input
 - Label
 - decrease clipping rect when scrollbar present

packages/uikit/src/components/root.tsx

@@ -2,7 +2,6 @@ import { Yoga } from 'yoga-wasm-web'
 import { ReactNode, forwardRef, useEffect, useMemo, useRef } from 'react'
 import { FlexNode, CameraDistanceRef, YogaProperties, createDeferredRequestLayoutCalculation } from '../flex/node.js'
 import { RootGroupProvider, alignmentXMap, alignmentYMap, useResource } from '../utils.js'
-import { loadYogaBase64 } from '../flex/load-base64.js'
 import {
   InstancedPanelProvider,
   InteractionGroup,
@@ -28,7 +27,7 @@ import {
   useComponentInternals,
   WithConditionals,
 } from './utils.js'
-import { ClippingRectProvider, useClippingRect, useParentClippingRect } from '../clipping.js'
+import { ClippingRectProvider, useClippingRect } from '../clipping.js'
 import {
   ScrollGroup,
   ScrollHandler,
@@ -49,6 +48,7 @@ import { WithClasses, useApplyProperties } from '../properties/default.js'
 import { InstancedGlyphProvider, useGetInstancedGlyphGroup } from '../text/react.js'
 import { PanelProperties } from '../panel/instanced-panel.js'
 import { RootSizeProvider, useApplyResponsiveProperties } from '../responsive.js'
+import { loadYogaFromGH } from '../flex/load-binary.js'
 
 export const DEFAULT_PRECISION = 0.1
 export const DEFAULT_PIXEL_SIZE = 0.002
@@ -94,7 +94,7 @@ export const Root = forwardRef<
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [],
   )
-  const yoga = useResource(properties.loadYoga ?? loadYogaBase64, [properties.loadYoga])
+  const yoga = useResource(properties.loadYoga ?? loadYogaFromGH, [properties.loadYoga])
   const distanceToCameraRef = useMemo(() => ({ current: 0 }), [])
   const groupRef = useRef<Group>(null)
   const node = useMemo(

packages/uikit/src/flex/load-binary.ts

@@ -1,6 +1,6 @@
 import { initStreaming } from 'yoga-wasm-web'
 
 export async function loadYogaFromGH() {
-  const response = await fetch(``)
+  const response = await fetch('https://pmndrs.github.io/uikit/yoga/yoga.wasm')
   return initStreaming(response)
 }

packages/uikit/src/index.ts

@@ -1,3 +1,4 @@
+export { loadYogaBase64 } from './flex/load-base64.js'
 export { useRootSize } from './responsive.js'
 export type { ComponentInternals } from './components/utils.js'
 export type { MaterialClass } from './panel/react.js'

packages/uikit/src/text/react.tsx

@@ -54,10 +54,11 @@ const FontFamiliesContext = createContext<Record<string, FontFamilyUrls>>(null a
 //TODO: update to point to THIS repo
 const defaultFontFamilyUrls = {
   inter: {
-    light: 'https://coconut-xr.github.io/msdf-fonts/inter-light.json',
-    normal: 'https://coconut-xr.github.io/msdf-fonts/inter.json',
-    medium: 'https://coconut-xr.github.io/msdf-fonts/inter.json',
-    'semi-bold': 'https://coconut-xr.github.io/msdf-fonts/inter-bold.json',
+    light: 'https://pmndrs.github.io/uikit/fonts/inter-light.json',
+    normal: 'https://pmndrs.github.io/uikit/fonts/inter-normal.json',
+    medium: 'https://pmndrs.github.io/uikit/fonts/inter-medium.json',
+    'semi-bold': 'https://pmndrs.github.io/uikit/fonts/inter-semi-bold.json',
+    bold: 'https://pmndrs.github.io/uikit/fonts/inter-bold.json',
   },
 } satisfies Record<string, FontFamilyUrls>