meno-core 1.0.10 → 1.0.12
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.
- package/lib/client/core/ComponentBuilder.ts +1 -1
- package/lib/server/ssr/attributeBuilder.ts +1 -1
- package/lib/server/ssr/htmlGenerator.ts +6 -5
- package/lib/server/ssr/ssrRenderer.ts +10 -1
- package/lib/server/ssrRenderer.test.ts +60 -0
- package/lib/shared/fontLoader.ts +31 -0
- package/package.json +1 -1
|
@@ -387,7 +387,7 @@ export class ComponentBuilder {
|
|
|
387
387
|
* Filter internal props from node props
|
|
388
388
|
*/
|
|
389
389
|
private filterInternalProps(nodeProps: Record<string, unknown>, tag: string | undefined): Record<string, unknown> {
|
|
390
|
-
const imageOnlyProps = ['src', 'alt', 'loading', 'width', 'height', 'sizes', 'srcset'];
|
|
390
|
+
const imageOnlyProps = ['src', 'alt', 'loading', 'width', 'height', 'sizes', 'srcset', 'fetchpriority', 'priority'];
|
|
391
391
|
const internalProps = ['type', 'tag', 'component', 'props', 'children', 'html', 'style', ...imageOnlyProps];
|
|
392
392
|
const props: Record<string, unknown> = {};
|
|
393
393
|
|
|
@@ -21,7 +21,7 @@ export function escapeHtml(unsafe: string): string {
|
|
|
21
21
|
export function buildAttributes(props: Record<string, unknown>, exclude: string[] = []): string {
|
|
22
22
|
const attrs: string[] = [];
|
|
23
23
|
// Internal props that should never be rendered as HTML attributes
|
|
24
|
-
const internalProps = ['tag', 'component', 'props', 'children', 'src', 'alt', 'loading', 'width', 'height', 'sizes', 'srcset'];
|
|
24
|
+
const internalProps = ['tag', 'component', 'props', 'children', 'src', 'alt', 'loading', 'width', 'height', 'sizes', 'srcset', 'fetchpriority', 'priority'];
|
|
25
25
|
const defaultExclude = [...internalProps, ...exclude];
|
|
26
26
|
|
|
27
27
|
// Regex to detect unresolved template strings like {{link.target}}
|
|
@@ -8,7 +8,7 @@ import type { ComponentDefinition, JSONPage } from '../../shared/types';
|
|
|
8
8
|
import type { SlugMap } from '../../shared/slugTranslator';
|
|
9
9
|
import type { CMSService } from '../services/cmsService';
|
|
10
10
|
import { loadBreakpointConfig, loadResponsiveScalesConfig, loadIconsConfig, loadPrefetchConfig } from '../jsonLoader';
|
|
11
|
-
import { generateFontCSS } from '../../shared/fontLoader';
|
|
11
|
+
import { generateFontCSS, generateFontPreloadTags } from '../../shared/fontLoader';
|
|
12
12
|
import { colorService } from '../services/ColorService';
|
|
13
13
|
import { generateThemeColorVariablesCSS } from '../cssGenerator';
|
|
14
14
|
import { generateUtilityCSS, extractUtilityClassesFromHTML, generateAllInteractiveCSS } from '../../shared/cssGeneration';
|
|
@@ -164,8 +164,8 @@ export async function generateSSRHTML(
|
|
|
164
164
|
|
|
165
165
|
if (allJavaScript) {
|
|
166
166
|
if (extScriptPath) {
|
|
167
|
-
// CSP-compliant: reference external script file
|
|
168
|
-
componentScript = `\n <script src="${extScriptPath}"></script>`;
|
|
167
|
+
// CSP-compliant: reference external script file (defer to avoid render-blocking)
|
|
168
|
+
componentScript = `\n <script src="${extScriptPath}" defer></script>`;
|
|
169
169
|
externalJavaScript = allJavaScript;
|
|
170
170
|
} else if (returnSeparateJS) {
|
|
171
171
|
// Return JS separately (for build-static to write to file)
|
|
@@ -178,8 +178,9 @@ export async function generateSSRHTML(
|
|
|
178
178
|
}
|
|
179
179
|
}
|
|
180
180
|
|
|
181
|
-
// Generate font CSS from project config
|
|
181
|
+
// Generate font CSS and preload tags from project config
|
|
182
182
|
const fontCSS = generateFontCSS();
|
|
183
|
+
const fontPreloadTags = generateFontPreloadTags();
|
|
183
184
|
|
|
184
185
|
// Load icons config for favicon and apple touch icon
|
|
185
186
|
const iconsConfig = await loadIconsConfig();
|
|
@@ -239,7 +240,7 @@ export async function generateSSRHTML(
|
|
|
239
240
|
<head>
|
|
240
241
|
<meta charset="UTF-8">
|
|
241
242
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
242
|
-
${iconTags ? iconTags + '\n ' : ''}${rendered.meta}
|
|
243
|
+
${iconTags ? iconTags + '\n ' : ''}${fontPreloadTags ? fontPreloadTags + '\n ' : ''}${rendered.meta}
|
|
243
244
|
${configInlineScript}${cmsInlineScript}<style>
|
|
244
245
|
${fontCSS ? fontCSS + '\n ' : ''}${themeColorVariablesCSS ? themeColorVariablesCSS + '\n ' : ''}* {
|
|
245
246
|
margin: 0;
|
|
@@ -891,6 +891,8 @@ function renderImageElement(
|
|
|
891
891
|
const alt = imgProps.alt as string | undefined;
|
|
892
892
|
const loading = imgProps.loading as string | undefined;
|
|
893
893
|
const sizes = imgProps.sizes as string | undefined;
|
|
894
|
+
const fetchpriority = imgProps.fetchpriority as string | undefined;
|
|
895
|
+
const priority = imgProps.priority as boolean | undefined;
|
|
894
896
|
let width = imgProps.width as string | number | undefined;
|
|
895
897
|
let height = imgProps.height as string | number | undefined;
|
|
896
898
|
|
|
@@ -910,7 +912,14 @@ function renderImageElement(
|
|
|
910
912
|
let imgAttrs = '';
|
|
911
913
|
if (src) imgAttrs += ` src="${escapeHtml(String(src))}"`;
|
|
912
914
|
if (alt !== undefined) imgAttrs += ` alt="${escapeHtml(String(alt))}"`;
|
|
913
|
-
if
|
|
915
|
+
// Handle priority: if true, set fetchpriority="high" and loading="eager" for LCP optimization
|
|
916
|
+
if (priority) {
|
|
917
|
+
imgAttrs += ' fetchpriority="high"';
|
|
918
|
+
imgAttrs += ' loading="eager"';
|
|
919
|
+
} else {
|
|
920
|
+
if (fetchpriority) imgAttrs += ` fetchpriority="${escapeHtml(String(fetchpriority))}"`;
|
|
921
|
+
if (loading) imgAttrs += ` loading="${escapeHtml(String(loading))}"`;
|
|
922
|
+
}
|
|
914
923
|
if (width !== undefined) imgAttrs += ` width="${escapeHtml(String(width))}"`;
|
|
915
924
|
if (height !== undefined) imgAttrs += ` height="${escapeHtml(String(height))}"`;
|
|
916
925
|
|
|
@@ -883,6 +883,66 @@ describe("SSR Renderer - Security (XSS Prevention)", () => {
|
|
|
883
883
|
});
|
|
884
884
|
});
|
|
885
885
|
|
|
886
|
+
describe("Image LCP optimization", () => {
|
|
887
|
+
test("should render fetchpriority attribute", async () => {
|
|
888
|
+
const pageData: JSONPage = {
|
|
889
|
+
root: {
|
|
890
|
+
type: "node",
|
|
891
|
+
tag: "img",
|
|
892
|
+
attributes: {
|
|
893
|
+
src: "/test.jpg",
|
|
894
|
+
alt: "test",
|
|
895
|
+
fetchpriority: "high"
|
|
896
|
+
}
|
|
897
|
+
} as any
|
|
898
|
+
};
|
|
899
|
+
|
|
900
|
+
const result = await renderPageSSR(pageData);
|
|
901
|
+
|
|
902
|
+
expect(result.html).toContain('fetchpriority="high"');
|
|
903
|
+
});
|
|
904
|
+
|
|
905
|
+
test("should render priority prop as fetchpriority=high and loading=eager", async () => {
|
|
906
|
+
const pageData: JSONPage = {
|
|
907
|
+
root: {
|
|
908
|
+
type: "node",
|
|
909
|
+
tag: "img",
|
|
910
|
+
attributes: {
|
|
911
|
+
src: "/test.jpg",
|
|
912
|
+
alt: "test",
|
|
913
|
+
priority: true
|
|
914
|
+
}
|
|
915
|
+
} as any
|
|
916
|
+
};
|
|
917
|
+
|
|
918
|
+
const result = await renderPageSSR(pageData);
|
|
919
|
+
|
|
920
|
+
expect(result.html).toContain('fetchpriority="high"');
|
|
921
|
+
expect(result.html).toContain('loading="eager"');
|
|
922
|
+
});
|
|
923
|
+
|
|
924
|
+
test("priority should override explicit loading=lazy", async () => {
|
|
925
|
+
const pageData: JSONPage = {
|
|
926
|
+
root: {
|
|
927
|
+
type: "node",
|
|
928
|
+
tag: "img",
|
|
929
|
+
attributes: {
|
|
930
|
+
src: "/test.jpg",
|
|
931
|
+
alt: "test",
|
|
932
|
+
priority: true,
|
|
933
|
+
loading: "lazy"
|
|
934
|
+
}
|
|
935
|
+
} as any
|
|
936
|
+
};
|
|
937
|
+
|
|
938
|
+
const result = await renderPageSSR(pageData);
|
|
939
|
+
|
|
940
|
+
// priority=true should set loading="eager", ignoring the lazy value
|
|
941
|
+
expect(result.html).toContain('loading="eager"');
|
|
942
|
+
expect(result.html).not.toContain('loading="lazy"');
|
|
943
|
+
});
|
|
944
|
+
});
|
|
945
|
+
|
|
886
946
|
describe("Embed content sanitization", () => {
|
|
887
947
|
test("should sanitize embed HTML with DOMPurify", async () => {
|
|
888
948
|
const pageData: JSONPage = {
|
package/lib/shared/fontLoader.ts
CHANGED
|
@@ -84,6 +84,37 @@ export function generateFontCSS(): string {
|
|
|
84
84
|
.join('\n\n');
|
|
85
85
|
}
|
|
86
86
|
|
|
87
|
+
/**
|
|
88
|
+
* Get font MIME type for preload "type" attribute
|
|
89
|
+
*/
|
|
90
|
+
function getFontMimeType(path: string): string {
|
|
91
|
+
if (path.endsWith('.woff2')) return 'font/woff2';
|
|
92
|
+
if (path.endsWith('.woff')) return 'font/woff';
|
|
93
|
+
if (path.endsWith('.ttf')) return 'font/ttf';
|
|
94
|
+
if (path.endsWith('.otf')) return 'font/otf';
|
|
95
|
+
return 'font/ttf';
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/**
|
|
99
|
+
* Generate font preload link tags for early font loading
|
|
100
|
+
* This prevents font swap flash on SPA navigation by ensuring fonts are
|
|
101
|
+
* loaded and cached before they're needed.
|
|
102
|
+
*/
|
|
103
|
+
export function generateFontPreloadTags(): string {
|
|
104
|
+
const config = getProjectConfig();
|
|
105
|
+
const fonts = config.fonts || [];
|
|
106
|
+
|
|
107
|
+
if (fonts.length === 0) return '';
|
|
108
|
+
|
|
109
|
+
return fonts
|
|
110
|
+
.map((font: FontConfig) => {
|
|
111
|
+
const mimeType = getFontMimeType(font.path);
|
|
112
|
+
// crossorigin is required for fonts to be cached properly
|
|
113
|
+
return `<link rel="preload" href="${font.path}" as="font" type="${mimeType}" crossorigin>`;
|
|
114
|
+
})
|
|
115
|
+
.join('\n ');
|
|
116
|
+
}
|
|
117
|
+
|
|
87
118
|
export function getFontFamilies(): Record<string, number[]> {
|
|
88
119
|
const config = getProjectConfig();
|
|
89
120
|
const fonts = config.fonts || [];
|