@zalify/storefront-kit 0.1.1 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/react/engine/CssVariables.js +10 -7
  2. package/dist/react/engine/fonts.js +6 -1
  3. package/package.json +1 -1
  4. package/src/react/engine/CssVariables.tsx +10 -7
  5. package/src/react/engine/fonts.ts +6 -1
package/dist/react/engine/CssVariables.js CHANGED
@@ -99,15 +99,18 @@ function fontLinks() {
99
99
  hrefs.push(googleFontsHref(monoGoogle, 'wght@400;500'));
100
100
  return hrefs;
101
101
  }
102
- // Promotes the preloaded font stylesheets to real stylesheets. Runs
103
- // inline so the fonts start applying as soon as the HTML streams in,
104
- // without the external CSS ever blocking first paint (display=swap
105
- // keeps text visible on the fallback font meanwhile).
102
+ // Promotes each preloaded font stylesheet to a real stylesheet by
103
+ // flipping rel once its fetch completes (the Filament preload trick).
104
+ // Attribute-only mutation on the existing node: inserting new <link>
105
+ // elements here would desync React 18 hydration (the whole <head> is
106
+ // React-managed in Hydrogen) and the recovery re-render shifts the
107
+ // entire page. The script runs synchronously right after the links are
108
+ // parsed, so their load events cannot have fired yet.
106
109
  const FONT_CSS_LOADER = [
107
110
  "for(var l=document.querySelectorAll('link[data-zfy-font-css]'),i=0;i<l.length;i++){",
108
- "var s=document.createElement('link');",
109
- "s.rel='stylesheet';s.href=l[i].href;",
110
- 'document.head.appendChild(s)}',
111
+ '(function(x){',
112
+ "x.addEventListener('load',function(){x.rel='stylesheet'},{once:true})",
113
+ '})(l[i])}',
111
114
  ].join('');
112
115
  export function CssVariables({ nonce } = {}) {
113
116
  const { css, links } = useMemo(() => ({ css: buildCss(), links: fontLinks() }), []);
package/dist/react/engine/fonts.js CHANGED
@@ -29,5 +29,10 @@ export function parseFontHandle(handle) {
29
29
  }
30
30
  export function googleFontsHref(family, axes = 'ital,wght@0,400;0,500;0,700;1,400') {
31
31
  const param = family.trim().replace(/ /g, '+');
32
- return `https://fonts.googleapis.com/css2?family=${param}:${axes}&display=swap`;
32
+ // display=optional: the font never swaps in after first paint, so a
33
+ // late-arriving font file can't reflow text (zero font CLS). With the
34
+ // stylesheet loaded async (CssVariables), swap would otherwise shift
35
+ // layout on every cold load; optional shows the fallback first visit
36
+ // and the brand font from the cache on later views.
37
+ return `https://fonts.googleapis.com/css2?family=${param}:${axes}&display=optional`;
33
38
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zalify/storefront-kit",
3
- "version": "0.1.1",
3
+ "version": "0.1.3",
4
4
  "type": "module",
5
5
  "description": "The Zalify storefront SDK: framework-agnostic commerce logic (/commerce), the theme contract types and validators (/schemas), the canvas-editor bridge (/editor), and the React theme engine + shared components (/ui, /react/server). Consumed as TypeScript source inside the zalify-storefronts monorepo; published as compiled ESM + d.ts.",
6
6
  "license": "SEE LICENSE IN LICENSE.md",
package/src/react/engine/CssVariables.tsx CHANGED
@@ -120,15 +120,18 @@ function fontLinks(): string[] {
120
120
  return hrefs;
121
121
  }
122
122
 
123
- // Promotes the preloaded font stylesheets to real stylesheets. Runs
124
- // inline so the fonts start applying as soon as the HTML streams in,
125
- // without the external CSS ever blocking first paint (display=swap
126
- // keeps text visible on the fallback font meanwhile).
123
+ // Promotes each preloaded font stylesheet to a real stylesheet by
124
+ // flipping rel once its fetch completes (the Filament preload trick).
125
+ // Attribute-only mutation on the existing node: inserting new <link>
126
+ // elements here would desync React 18 hydration (the whole <head> is
127
+ // React-managed in Hydrogen) and the recovery re-render shifts the
128
+ // entire page. The script runs synchronously right after the links are
129
+ // parsed, so their load events cannot have fired yet.
127
130
  const FONT_CSS_LOADER = [
128
131
  "for(var l=document.querySelectorAll('link[data-zfy-font-css]'),i=0;i<l.length;i++){",
129
- "var s=document.createElement('link');",
130
- "s.rel='stylesheet';s.href=l[i].href;",
131
- 'document.head.appendChild(s)}',
132
+ '(function(x){',
133
+ "x.addEventListener('load',function(){x.rel='stylesheet'},{once:true})",
134
+ '})(l[i])}',
132
135
  ].join('');
133
136
 
134
137
  export function CssVariables({nonce}: {nonce?: string} = {}) {
package/src/react/engine/fonts.ts CHANGED
@@ -38,5 +38,10 @@ export function googleFontsHref(
38
38
  axes = 'ital,wght@0,400;0,500;0,700;1,400',
39
39
  ): string {
40
40
  const param = family.trim().replace(/ /g, '+');
41
- return `https://fonts.googleapis.com/css2?family=${param}:${axes}&display=swap`;
41
+ // display=optional: the font never swaps in after first paint, so a
42
+ // late-arriving font file can't reflow text (zero font CLS). With the
43
+ // stylesheet loaded async (CssVariables), swap would otherwise shift
44
+ // layout on every cold load; optional shows the fallback first visit
45
+ // and the brand font from the cache on later views.
46
+ return `https://fonts.googleapis.com/css2?family=${param}:${axes}&display=optional`;
42
47
  }