veryfront 0.1.1150 → 0.1.1151
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/esm/deno.js +1 -1
- package/esm/src/cache/config-hash.d.ts +6 -0
- package/esm/src/cache/config-hash.d.ts.map +1 -1
- package/esm/src/cache/config-hash.js +11 -0
- package/esm/src/modules/react-loader/ssr-module-loader/cross-project-import-loader.d.ts +7 -0
- package/esm/src/modules/react-loader/ssr-module-loader/cross-project-import-loader.d.ts.map +1 -1
- package/esm/src/modules/react-loader/ssr-module-loader/cross-project-import-loader.js +13 -3
- package/esm/src/modules/react-loader/ssr-module-loader/ssr-cache-manager.d.ts.map +1 -1
- package/esm/src/modules/react-loader/ssr-module-loader/ssr-cache-manager.js +1 -0
- package/esm/src/rendering/component-handling.d.ts +10 -0
- package/esm/src/rendering/component-handling.d.ts.map +1 -1
- package/esm/src/rendering/component-handling.js +44 -13
- package/esm/src/rendering/layouts/utils/component-loader.d.ts +5 -1
- package/esm/src/rendering/layouts/utils/component-loader.d.ts.map +1 -1
- package/esm/src/rendering/layouts/utils/component-loader.js +41 -15
- package/esm/src/transforms/pipeline/index.d.ts.map +1 -1
- package/esm/src/transforms/pipeline/index.js +3 -0
- package/esm/src/utils/version-constant.d.ts +1 -1
- package/esm/src/utils/version-constant.js +1 -1
- package/package.json +5 -5
package/esm/deno.js
CHANGED
|
@@ -12,6 +12,12 @@ interface TransformConfig {
|
|
|
12
12
|
reactVersion?: string;
|
|
13
13
|
/** JSX import source */
|
|
14
14
|
jsxImportSource?: string;
|
|
15
|
+
/** Module server URL for rewritten browser imports */
|
|
16
|
+
moduleServerUrl?: string;
|
|
17
|
+
/** Vendor bundle hash for rewritten vendor imports */
|
|
18
|
+
vendorBundleHash?: string;
|
|
19
|
+
/** API base URL for rewritten cross-project imports */
|
|
20
|
+
apiBaseUrl?: string;
|
|
15
21
|
/** Enable Studio Navigator embed */
|
|
16
22
|
studioEmbed?: boolean;
|
|
17
23
|
/** Development mode */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"config-hash.d.ts","sourceRoot":"","sources":["../../../src/src/cache/config-hash.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAUH;;GAEG;AACH,UAAU,eAAe;IACvB,oCAAoC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wBAAwB;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oCAAoC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uBAAuB;IACvB,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,eAAe,GAAG,OAAO,CAAC,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"config-hash.d.ts","sourceRoot":"","sources":["../../../src/src/cache/config-hash.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAUH;;GAEG;AACH,UAAU,eAAe;IACvB,oCAAoC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wBAAwB;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sDAAsD;IACtD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sDAAsD;IACtD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oCAAoC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uBAAuB;IACvB,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,eAAe,GAAG,OAAO,CAAC,MAAM,CAAC,CAe1E;AAED;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,eAAe,GAAG,MAAM,CAarE"}
|
|
@@ -17,6 +17,9 @@ export function computeConfigHash(config) {
|
|
|
17
17
|
transformVersion: VERSION,
|
|
18
18
|
reactVersion: config.reactVersion ?? DEFAULT_REACT_VERSION,
|
|
19
19
|
jsxImportSource: config.jsxImportSource ?? "react",
|
|
20
|
+
moduleServerUrl: config.moduleServerUrl ?? null,
|
|
21
|
+
vendorBundleHash: config.vendorBundleHash ?? null,
|
|
22
|
+
apiBaseUrl: config.apiBaseUrl ?? null,
|
|
20
23
|
studioEmbed: config.studioEmbed ?? false,
|
|
21
24
|
dev: config.dev ?? false,
|
|
22
25
|
csstype: CSSTYPE_VERSION,
|
|
@@ -34,8 +37,16 @@ export function computeConfigHashSync(config) {
|
|
|
34
37
|
`v${VERSION}`,
|
|
35
38
|
config.reactVersion ?? DEFAULT_REACT_VERSION,
|
|
36
39
|
config.jsxImportSource ?? "react",
|
|
40
|
+
encodeConfigPart("modules", config.moduleServerUrl),
|
|
41
|
+
encodeConfigPart("vendor", config.vendorBundleHash),
|
|
42
|
+
encodeConfigPart("api", config.apiBaseUrl),
|
|
37
43
|
config.studioEmbed ? "studio" : "",
|
|
38
44
|
config.dev ? "dev" : "",
|
|
39
45
|
].filter(Boolean);
|
|
40
46
|
return parts.join(":");
|
|
41
47
|
}
|
|
48
|
+
function encodeConfigPart(label, value) {
|
|
49
|
+
if (!value)
|
|
50
|
+
return "";
|
|
51
|
+
return `${label}:${value.length}:${value}`;
|
|
52
|
+
}
|
|
@@ -20,6 +20,13 @@ interface TransformCrossProjectImportFlowOptions {
|
|
|
20
20
|
loggerImpl?: Pick<typeof logger, "debug" | "error">;
|
|
21
21
|
fetchTimeoutMs?: number;
|
|
22
22
|
}
|
|
23
|
+
interface CrossProjectImportCacheKeyOptions {
|
|
24
|
+
specifier: string;
|
|
25
|
+
projectId: string;
|
|
26
|
+
reactVersion?: string;
|
|
27
|
+
registryBaseUrl: string;
|
|
28
|
+
}
|
|
29
|
+
export declare function buildCrossProjectImportCacheKey(options: CrossProjectImportCacheKeyOptions): string;
|
|
23
30
|
export declare function transformCrossProjectImportFlow(flowOptions: TransformCrossProjectImportFlowOptions): Promise<string>;
|
|
24
31
|
export {};
|
|
25
32
|
//# sourceMappingURL=cross-project-import-loader.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cross-project-import-loader.d.ts","sourceRoot":"","sources":["../../../../../src/src/modules/react-loader/ssr-module-loader/cross-project-import-loader.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0CAA0C,CAAC;AAInF,OAAO,EAAE,cAAc,IAAI,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEnE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"cross-project-import-loader.d.ts","sourceRoot":"","sources":["../../../../../src/src/modules/react-loader/ssr-module-loader/cross-project-import-loader.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0CAA0C,CAAC;AAInF,OAAO,EAAE,cAAc,IAAI,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEnE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAIzD,UAAU,uBAAuB;IAC/B,gBAAgB,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;IACnD,WAAW,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;IACrE,KAAK,IAAI,UAAU,CAAC;CACrB;AAED,UAAU,sCAAsC;IAC9C,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,OAAO,EAAE,IAAI,CACX,sBAAsB,EACtB,WAAW,GAAG,YAAY,GAAG,KAAK,GAAG,YAAY,GAAG,cAAc,GAAG,SAAS,CAC/E,CAAC;IACF,KAAK,EAAE,uBAAuB,CAAC;IAC/B,qBAAqB,EAAE,CAAC,CAAC,EACvB,iBAAiB,EAAE,MAAM,EACzB,SAAS,EAAE,MAAM,OAAO,CAAC,CAAC,CAAC,KACxB,OAAO,CAAC,CAAC,CAAC,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,KAAK,CAAC;IACzB,kBAAkB,CAAC,EAAE,OAAO,cAAc,CAAC;IAC3C,iBAAiB,CAAC,EAAE,OAAO,aAAa,CAAC;IACzC,UAAU,CAAC,EAAE,IAAI,CAAC,OAAO,MAAM,EAAE,OAAO,GAAG,OAAO,CAAC,CAAC;IACpD,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAOD,UAAU,iCAAiC;IACzC,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,wBAAgB,+BAA+B,CAC7C,OAAO,EAAE,iCAAiC,GACzC,MAAM,CAIR;AAED,wBAAsB,+BAA+B,CACnD,WAAW,EAAE,sCAAsC,GAClD,OAAO,CAAC,MAAM,CAAC,CA8GjB"}
|
|
@@ -7,19 +7,29 @@ import { writeCacheFile } from "../../../utils/cache-file-ops.js";
|
|
|
7
7
|
import { rendererLogger as logger } from "../../../utils/index.js";
|
|
8
8
|
import { globalCrossProjectCache } from "./cache/index.js";
|
|
9
9
|
import { readLimitedCrossProjectSource } from "../../server/cross-project-source-limit.js";
|
|
10
|
+
import { base64urlEncode } from "../../../utils/base64url.js";
|
|
10
11
|
function getRegistryBaseUrl(apiBaseUrl) {
|
|
11
12
|
const resolvedApiBaseUrl = apiBaseUrl || getApiBaseUrlEnv();
|
|
12
13
|
return resolvedApiBaseUrl.replace(/\/api\/?$/, "");
|
|
13
14
|
}
|
|
15
|
+
export function buildCrossProjectImportCacheKey(options) {
|
|
16
|
+
const reactVersion = options.reactVersion ?? "default";
|
|
17
|
+
const registryKey = base64urlEncode(options.registryBaseUrl);
|
|
18
|
+
return `${options.specifier}:${options.projectId}:${reactVersion}:registry:${registryKey}`;
|
|
19
|
+
}
|
|
14
20
|
export async function transformCrossProjectImportFlow(flowOptions) {
|
|
15
21
|
const { crossProjectImport, options, cache, withTransformCapacity, fetchImpl = fetch, transformToESMImpl = transformToESM, injectContextImpl = injectContext, loggerImpl = logger, fetchTimeoutMs = HTTP_FETCH_TIMEOUT_MS, } = flowOptions;
|
|
16
22
|
const { specifier, projectSlug, version, path } = crossProjectImport;
|
|
17
|
-
const
|
|
18
|
-
const cacheKey =
|
|
23
|
+
const registryBaseUrl = getRegistryBaseUrl(options.apiBaseUrl);
|
|
24
|
+
const cacheKey = buildCrossProjectImportCacheKey({
|
|
25
|
+
specifier,
|
|
26
|
+
projectId: options.projectId,
|
|
27
|
+
reactVersion: options.reactVersion,
|
|
28
|
+
registryBaseUrl,
|
|
29
|
+
});
|
|
19
30
|
const cachedEntry = globalCrossProjectCache.get(cacheKey);
|
|
20
31
|
if (cachedEntry)
|
|
21
32
|
return cachedEntry.tempPath;
|
|
22
|
-
const registryBaseUrl = getRegistryBaseUrl(options.apiBaseUrl);
|
|
23
33
|
const projectRef = `${projectSlug}@${version}`;
|
|
24
34
|
const registryUrl = `${registryBaseUrl}/${projectRef}/@/${path}`;
|
|
25
35
|
loggerImpl.debug("[SSR-MODULE-LOADER] Fetching cross-project import", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ssr-cache-manager.d.ts","sourceRoot":"","sources":["../../../../../src/src/modules/react-loader/ssr-module-loader/ssr-cache-manager.ts"],"names":[],"mappings":"AAeA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAalE,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAQ3E;;;;;;;GAOG;AACH,qBAAa,eAAe;IAId,OAAO,CAAC,OAAO;IAH3B,OAAO,CAAC,EAAE,CAAsB;IAChC,OAAO,CAAC,gBAAgB,CAAqB;gBAEzB,OAAO,EAAE,sBAAsB;IAEnD,4DAA4D;IAC5D,aAAa,IAAI,MAAM;
|
|
1
|
+
{"version":3,"file":"ssr-cache-manager.d.ts","sourceRoot":"","sources":["../../../../../src/src/modules/react-loader/ssr-module-loader/ssr-cache-manager.ts"],"names":[],"mappings":"AAeA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAalE,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAQ3E;;;;;;;GAOG;AACH,qBAAa,eAAe;IAId,OAAO,CAAC,OAAO;IAH3B,OAAO,CAAC,EAAE,CAAsB;IAChC,OAAO,CAAC,gBAAgB,CAAqB;gBAEzB,OAAO,EAAE,sBAAsB;IAEnD,4DAA4D;IAC5D,aAAa,IAAI,MAAM;IAWvB,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM;IAkB/B,gBAAgB,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;IAiBlD,WAAW,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;IAW1E,yBAAyB,IAAI,OAAO;IAoB9B,kBAAkB,CACtB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,cAAc,GAAG,aAAa,EACtC,OAAO,EAAE;QAAE,eAAe,EAAE,OAAO,CAAC;QAAC,qBAAqB,EAAE,OAAO,CAAA;KAAE,GACpE,OAAO,CAAC,OAAO,CAAC;IAgCb,wBAAwB,CAC5B,WAAW,EAAE,gBAAgB,EAC7B,eAAe,EAAE,MAAM,EACvB,gBAAgB,EAAE,MAAM,EACxB,QAAQ,EAAE,MAAM,GACf,OAAO,CAAC,OAAO,CAAC;IAuBnB,4BAA4B,CAAC,QAAQ,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,gBAAgB,GAAG,IAAI;IAQnF,oCAAoC,CAClC,eAAe,EAAE,MAAM,EACvB,gBAAgB,EAAE,MAAM,EACxB,UAAU,CAAC,EAAE,gBAAgB,GAC5B,IAAI;IAQP,OAAO,CAAC,8BAA8B;IAgBtC,wDAAwD;IACxD,KAAK,IAAI,UAAU,CAAC,OAAO,gBAAgB,CAAC;YAI9B,4BAA4B;YAW5B,qBAAqB;YAsBrB,oBAAoB;YAuDpB,YAAY;CA2B3B"}
|
|
@@ -8,6 +8,15 @@ interface ComponentPageResult {
|
|
|
8
8
|
pageElement: BundledReact.ReactElement;
|
|
9
9
|
pageBundle: PageBundle;
|
|
10
10
|
}
|
|
11
|
+
interface BundleComponentForClientDeps {
|
|
12
|
+
transformToESM: (source: string, filePath: string, projectDir: string, adapter: RuntimeAdapter, options: {
|
|
13
|
+
projectId: string;
|
|
14
|
+
dev: boolean;
|
|
15
|
+
jsxImportSource: string;
|
|
16
|
+
moduleServerUrl?: string;
|
|
17
|
+
reactVersion?: string;
|
|
18
|
+
}) => Promise<string>;
|
|
19
|
+
}
|
|
11
20
|
/**
|
|
12
21
|
* Load and render a TSX/JSX component page
|
|
13
22
|
*/
|
|
@@ -26,5 +35,6 @@ export declare function handleComponentPage(pageInfo: EntityInfo, slug: string,
|
|
|
26
35
|
/** React version for transforms (from project config) */
|
|
27
36
|
reactVersion?: string;
|
|
28
37
|
}): Promise<ComponentPageResult>;
|
|
38
|
+
export declare function bundleComponentForClient(source: string, filePath: string, projectDir: string, adapter: RuntimeAdapter, moduleServerUrl?: string, projectId?: string, reactVersion?: string, injectedDeps?: BundleComponentForClientDeps): Promise<string>;
|
|
29
39
|
export {};
|
|
30
40
|
//# sourceMappingURL=component-handling.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component-handling.d.ts","sourceRoot":"","sources":["../../../src/src/rendering/component-handling.ts"],"names":[],"mappings":"AAAA;;GAEG;AAIH,OAAO,KAAK,KAAK,YAAY,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"component-handling.d.ts","sourceRoot":"","sources":["../../../src/src/rendering/component-handling.ts"],"names":[],"mappings":"AAAA;;GAEG;AAIH,OAAO,KAAK,KAAK,YAAY,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAQhE,UAAU,mBAAmB;IAC3B,WAAW,EAAE,YAAY,CAAC,YAAY,CAAC;IACvC,UAAU,EAAE,UAAU,CAAC;CACxB;AAeD,UAAU,4BAA4B;IACpC,cAAc,EAAE,CACd,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,MAAM,EAClB,OAAO,EAAE,cAAc,EACvB,OAAO,EAAE;QACP,SAAS,EAAE,MAAM,CAAC;QAClB,GAAG,EAAE,OAAO,CAAC;QACb,eAAe,EAAE,MAAM,CAAC;QACxB,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB,KACE,OAAO,CAAC,MAAM,CAAC,CAAC;CACtB;AAyBD;;GAEG;AACH,wBAAsB,mBAAmB,CACvC,QAAQ,EAAE,UAAU,EACpB,IAAI,EAAE,MAAM,EACZ,UAAU,EAAE,MAAM,EAClB,kBAAkB,EAAE,OAAO,EAC3B,OAAO,EAAE,cAAc,EACvB,OAAO,CAAC,EAAE;IACR,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kEAAkE;IAClE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,yDAAyD;IACzD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,GACA,OAAO,CAAC,mBAAmB,CAAC,CAwE9B;AAED,wBAAsB,wBAAwB,CAC5C,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,MAAM,EAClB,OAAO,EAAE,cAAc,EACvB,eAAe,CAAC,EAAE,MAAM,EACxB,SAAS,CAAC,EAAE,MAAM,EAClB,YAAY,CAAC,EAAE,MAAM,EACrB,YAAY,CAAC,EAAE,4BAA4B,GAC1C,OAAO,CAAC,MAAM,CAAC,CAqDjB"}
|
|
@@ -7,18 +7,36 @@ import { getProjectReact } from "../react/index.js";
|
|
|
7
7
|
import { buildComponentCacheKey } from "../cache/keys.js";
|
|
8
8
|
import { LRUCache } from "../utils/lru-wrapper.js";
|
|
9
9
|
import { registerLRUCache } from "../cache/index.js";
|
|
10
|
+
import { Singleflight } from "../utils/singleflight.js";
|
|
11
|
+
import { DEFAULT_REACT_VERSION } from "../transforms/import-rewriter/url-builder.js";
|
|
10
12
|
/**
|
|
11
13
|
* Cache for transformed component hydration bundles.
|
|
12
|
-
* Keys are content-addressed
|
|
13
|
-
* Safe for multi-tenant use (project-scoped + content-hashed).
|
|
14
|
+
* Keys are content-addressed and scoped to transform-affecting inputs.
|
|
15
|
+
* Safe for multi-tenant use (project-scoped + content/transform-hashed).
|
|
14
16
|
* Evicted when exceeding MAX_COMPONENT_CACHE_SIZE to prevent unbounded memory growth.
|
|
15
17
|
*/
|
|
16
18
|
const MAX_COMPONENT_CACHE_SIZE = 5_000;
|
|
17
19
|
const componentHydrationCache = new LRUCache({
|
|
18
20
|
maxEntries: MAX_COMPONENT_CACHE_SIZE,
|
|
19
21
|
});
|
|
22
|
+
const componentHydrationFlights = new Singleflight();
|
|
23
|
+
const COMPONENT_HYDRATION_FLIGHT_STALE_EVICTION_MS = 5 * 60_000;
|
|
24
|
+
async function getBundleComponentForClientDeps() {
|
|
25
|
+
const { transformToESM } = await import("../transforms/esm-transform.js");
|
|
26
|
+
return { transformToESM };
|
|
27
|
+
}
|
|
20
28
|
// Register cache for monitoring
|
|
21
29
|
registerLRUCache("component-hydration-cache", componentHydrationCache);
|
|
30
|
+
async function buildComponentHydrationCacheHash(source, moduleServerUrl, reactVersion) {
|
|
31
|
+
const sourceHash = await computeHash(source);
|
|
32
|
+
const effectiveReactVersion = reactVersion ?? DEFAULT_REACT_VERSION;
|
|
33
|
+
const cacheIdentity = JSON.stringify([
|
|
34
|
+
sourceHash,
|
|
35
|
+
moduleServerUrl ?? null,
|
|
36
|
+
effectiveReactVersion,
|
|
37
|
+
]);
|
|
38
|
+
return (await computeHash(cacheIdentity)).slice(0, 16);
|
|
39
|
+
}
|
|
22
40
|
/**
|
|
23
41
|
* Load and render a TSX/JSX component page
|
|
24
42
|
*/
|
|
@@ -70,22 +88,35 @@ export async function handleComponentPage(pageInfo, slug, projectDir, _component
|
|
|
70
88
|
});
|
|
71
89
|
}
|
|
72
90
|
}
|
|
73
|
-
async function bundleComponentForClient(source, filePath, projectDir, adapter, moduleServerUrl, projectId, reactVersion) {
|
|
91
|
+
export async function bundleComponentForClient(source, filePath, projectDir, adapter, moduleServerUrl, projectId, reactVersion, injectedDeps) {
|
|
74
92
|
try {
|
|
75
|
-
const
|
|
76
|
-
const cacheKey = buildComponentCacheKey(projectId ?? projectDir, filePath,
|
|
93
|
+
const cacheHash = await buildComponentHydrationCacheHash(source, moduleServerUrl, reactVersion);
|
|
94
|
+
const cacheKey = buildComponentCacheKey(projectId ?? projectDir, filePath, cacheHash);
|
|
77
95
|
const cached = componentHydrationCache.get(cacheKey);
|
|
78
96
|
if (cached)
|
|
79
97
|
return cached;
|
|
80
|
-
const
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
98
|
+
const transformed = await componentHydrationFlights.do(cacheKey, async (control) => {
|
|
99
|
+
const cachedDuringFlight = componentHydrationCache.get(cacheKey);
|
|
100
|
+
if (cachedDuringFlight)
|
|
101
|
+
return cachedDuringFlight;
|
|
102
|
+
const { transformToESM } = injectedDeps ?? await getBundleComponentForClientDeps();
|
|
103
|
+
const transformed = await transformToESM(source, filePath, projectDir, adapter, {
|
|
104
|
+
projectId: projectId ?? projectDir,
|
|
105
|
+
dev: true,
|
|
106
|
+
jsxImportSource: "react",
|
|
107
|
+
moduleServerUrl,
|
|
108
|
+
reactVersion,
|
|
109
|
+
});
|
|
110
|
+
if (control.isCurrent()) {
|
|
111
|
+
componentHydrationCache.set(cacheKey, transformed);
|
|
112
|
+
}
|
|
113
|
+
return transformed;
|
|
114
|
+
}, {
|
|
115
|
+
staleAfterMs: COMPONENT_HYDRATION_FLIGHT_STALE_EVICTION_MS,
|
|
116
|
+
onStaleEvicted: () => {
|
|
117
|
+
logger.warn("Evicted stale component hydration transform flight", { filePath });
|
|
118
|
+
},
|
|
87
119
|
});
|
|
88
|
-
componentHydrationCache.set(cacheKey, transformed);
|
|
89
120
|
return transformed;
|
|
90
121
|
}
|
|
91
122
|
catch (error) {
|
|
@@ -2,6 +2,7 @@ import * as BundledReact from "react";
|
|
|
2
2
|
import type { RuntimeAdapter } from "../../../platform/adapters/base.js";
|
|
3
3
|
import type { LayoutItem, MdxBundle, MDXComponents } from "../../../types/index.js";
|
|
4
4
|
import type { ImportMapConfig } from "../../../modules/import-map/types.js";
|
|
5
|
+
import { loadComponentFromSource } from "../../../modules/react-loader/component-loader.js";
|
|
5
6
|
type AppRouterDocumentLayoutFunction = (props: {
|
|
6
7
|
children?: BundledReact.ReactNode;
|
|
7
8
|
}) => BundledReact.ReactNode;
|
|
@@ -12,12 +13,15 @@ export interface LayoutComponentCache {
|
|
|
12
13
|
clear(): void;
|
|
13
14
|
clearForProject?(projectId: string): void;
|
|
14
15
|
}
|
|
16
|
+
interface LoadTSXComponentDeps {
|
|
17
|
+
loadComponentFromSource: typeof loadComponentFromSource;
|
|
18
|
+
}
|
|
15
19
|
export declare function createLayoutComponentCache(maxEntries?: number, perProjectMaxEntries?: number): LayoutComponentCache;
|
|
16
20
|
export declare function shouldUnwrapAppRouterDocumentLayout(componentPath: string | undefined, projectDir: string, appDirectory?: string): boolean;
|
|
17
21
|
export declare function unwrapAppRouterDocumentLayout(React: typeof BundledReact, LayoutComponent: AppRouterDocumentLayoutFunction): BundledReact.FunctionComponent<{
|
|
18
22
|
children?: BundledReact.ReactNode;
|
|
19
23
|
}>;
|
|
20
|
-
export declare function loadTSXComponent(componentPath: string, projectDir: string, cache: LayoutComponentCache, adapter: RuntimeAdapter, projectId: string, projectSlug: string, contentSourceId: string, reactVersion?: string): Promise<BundledReact.ComponentType>;
|
|
24
|
+
export declare function loadTSXComponent(componentPath: string, projectDir: string, cache: LayoutComponentCache, adapter: RuntimeAdapter, projectId: string, projectSlug: string, contentSourceId: string, reactVersion?: string, deps?: LoadTSXComponentDeps): Promise<BundledReact.ComponentType>;
|
|
21
25
|
/** Load an MDX layout module from a bundle. */
|
|
22
26
|
export declare function loadMDXLayout(bundle: MdxBundle, projectDir: string, adapter: RuntimeAdapter, projectId: string, projectSlug: string, contentSourceId: string, preloadedImportMap?: ImportMapConfig, reactVersion?: string): Promise<BundledReact.ComponentType<{
|
|
23
27
|
components?: MDXComponents;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component-loader.d.ts","sourceRoot":"","sources":["../../../../../src/src/rendering/layouts/utils/component-loader.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,YAAY,MAAM,OAAO,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,aAAa,EAAa,MAAM,yBAAyB,CAAC;AAC/F,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;
|
|
1
|
+
{"version":3,"file":"component-loader.d.ts","sourceRoot":"","sources":["../../../../../src/src/rendering/layouts/utils/component-loader.ts"],"names":[],"mappings":"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"}
|
|
@@ -10,10 +10,21 @@ import { getProjectReact } from "../../../react/index.js";
|
|
|
10
10
|
import { ensureValidChild } from "./ensure-valid-child.js";
|
|
11
11
|
import { buildLayoutComponentCacheKey, CacheKeyPrefix } from "../../../cache/keys.js";
|
|
12
12
|
import { LAYOUT_EXTENSIONS } from "../types.js";
|
|
13
|
+
import { Singleflight } from "../../../utils/singleflight.js";
|
|
13
14
|
const loadMdxLayoutLog = logger.component("load-mdx-layout");
|
|
14
15
|
const applyTsxLayoutLog = logger.component("apply-tsx-layout");
|
|
15
16
|
const applyMdxLayoutLog = logger.component("apply-mdx-layout");
|
|
16
17
|
const APP_ROUTER_SCRIPT_LAYOUT_EXTENSIONS = LAYOUT_EXTENSIONS.filter((extension) => extension !== "md" && extension !== "mdx");
|
|
18
|
+
const TSX_COMPONENT_FLIGHT_STALE_EVICTION_MS = 5 * 60_000;
|
|
19
|
+
const tsxComponentFlights = new WeakMap();
|
|
20
|
+
function getTSXComponentFlights(cache) {
|
|
21
|
+
let flights = tsxComponentFlights.get(cache);
|
|
22
|
+
if (!flights) {
|
|
23
|
+
flights = new Singleflight();
|
|
24
|
+
tsxComponentFlights.set(cache, flights);
|
|
25
|
+
}
|
|
26
|
+
return flights;
|
|
27
|
+
}
|
|
17
28
|
class InMemoryLayoutComponentCache {
|
|
18
29
|
maxEntries;
|
|
19
30
|
entries = new Map();
|
|
@@ -159,7 +170,7 @@ export function unwrapAppRouterDocumentLayout(React, LayoutComponent) {
|
|
|
159
170
|
return body?.props?.children ?? props.children ?? null;
|
|
160
171
|
};
|
|
161
172
|
}
|
|
162
|
-
export async function loadTSXComponent(componentPath, projectDir, cache, adapter, projectId, projectSlug, contentSourceId, reactVersion) {
|
|
173
|
+
export async function loadTSXComponent(componentPath, projectDir, cache, adapter, projectId, projectSlug, contentSourceId, reactVersion, deps = { loadComponentFromSource }) {
|
|
163
174
|
const source = await adapter.fs.readFile(componentPath);
|
|
164
175
|
const hash = await computeHash(source);
|
|
165
176
|
const cacheKey = buildLayoutComponentCacheKey(projectId, componentPath, hash, contentSourceId) +
|
|
@@ -167,21 +178,36 @@ export async function loadTSXComponent(componentPath, projectDir, cache, adapter
|
|
|
167
178
|
const cached = cache.get(cacheKey);
|
|
168
179
|
if (cached)
|
|
169
180
|
return cached;
|
|
170
|
-
const loaded = await
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
181
|
+
const loaded = await getTSXComponentFlights(cache).do(cacheKey, async (control) => {
|
|
182
|
+
const cachedDuringFlight = cache.get(cacheKey);
|
|
183
|
+
if (cachedDuringFlight)
|
|
184
|
+
return cachedDuringFlight;
|
|
185
|
+
const loaded = await deps.loadComponentFromSource(source, componentPath, projectDir, adapter, {
|
|
186
|
+
dev: true,
|
|
187
|
+
projectId,
|
|
188
|
+
projectSlug,
|
|
189
|
+
ssr: true,
|
|
190
|
+
contentSourceId,
|
|
191
|
+
reactVersion,
|
|
192
|
+
});
|
|
193
|
+
if (!loaded) {
|
|
194
|
+
throw toError(createError({
|
|
195
|
+
type: "render",
|
|
196
|
+
message: "Component loading failed",
|
|
197
|
+
}));
|
|
198
|
+
}
|
|
199
|
+
if (control.isCurrent()) {
|
|
200
|
+
cache.set(cacheKey, loaded);
|
|
201
|
+
}
|
|
202
|
+
return loaded;
|
|
203
|
+
}, {
|
|
204
|
+
staleAfterMs: TSX_COMPONENT_FLIGHT_STALE_EVICTION_MS,
|
|
205
|
+
onStaleEvicted: () => {
|
|
206
|
+
applyTsxLayoutLog.warn("Evicted stale TSX layout component load flight", {
|
|
207
|
+
componentPath,
|
|
208
|
+
});
|
|
209
|
+
},
|
|
177
210
|
});
|
|
178
|
-
if (!loaded) {
|
|
179
|
-
throw toError(createError({
|
|
180
|
-
type: "render",
|
|
181
|
-
message: "Component loading failed",
|
|
182
|
-
}));
|
|
183
|
-
}
|
|
184
|
-
cache.set(cacheKey, loaded);
|
|
185
211
|
return loaded;
|
|
186
212
|
}
|
|
187
213
|
/** Load an MDX layout module from a bundle. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/src/transforms/pipeline/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAYH,OAAO,KAAK,EACV,cAAc,EACd,gBAAgB,EAEhB,eAAe,EAChB,MAAM,YAAY,CAAC;AAoHpB,wBAAgB,WAAW,CACzB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,MAAM,EAClB,OAAO,EAAE,gBAAgB,EACzB,MAAM,CAAC,EAAE,cAAc,GACtB,OAAO,CAAC,eAAe,CAAC,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/src/transforms/pipeline/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAYH,OAAO,KAAK,EACV,cAAc,EACd,gBAAgB,EAEhB,eAAe,EAChB,MAAM,YAAY,CAAC;AAoHpB,wBAAgB,WAAW,CACzB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,MAAM,EAClB,OAAO,EAAE,gBAAgB,EACzB,MAAM,CAAC,EAAE,cAAc,GACtB,OAAO,CAAC,eAAe,CAAC,CAkJ1B;AAqBD,wBAAsB,cAAc,CAClC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,MAAM,EAClB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,gBAAgB,GACxB,OAAO,CAAC,MAAM,CAAC,CASjB;AAmCD,YAAY,EACV,cAAc,EACd,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,eAAe,EACf,eAAe,GAChB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAE5C,OAAO,EACL,sBAAsB,EACtB,0BAA0B,EAC1B,SAAS,EACT,KAAK,EACL,KAAK,EACL,YAAY,GACb,MAAM,cAAc,CAAC"}
|
|
@@ -107,6 +107,9 @@ export function runPipeline(source, filePath, projectDir, options, config) {
|
|
|
107
107
|
const configHash = await computeConfigHash({
|
|
108
108
|
reactVersion: ctx.reactVersion,
|
|
109
109
|
jsxImportSource: ctx.jsxImportSource,
|
|
110
|
+
moduleServerUrl: ctx.moduleServerUrl,
|
|
111
|
+
vendorBundleHash: ctx.vendorBundleHash,
|
|
112
|
+
apiBaseUrl: ctx.apiBaseUrl,
|
|
110
113
|
studioEmbed: ctx.studioEmbed,
|
|
111
114
|
dev: ctx.dev,
|
|
112
115
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "veryfront",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1151",
|
|
4
4
|
"description": "The simplest way to build AI-powered apps",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -332,10 +332,10 @@
|
|
|
332
332
|
"@types/react": "19.2.14",
|
|
333
333
|
"@types/react-dom": "19.2.3",
|
|
334
334
|
"ws": "8.21.0",
|
|
335
|
-
"@veryfront/ext-bundler-esbuild": "0.1.
|
|
336
|
-
"@veryfront/ext-content-mdx": "0.1.
|
|
337
|
-
"@veryfront/ext-css-tailwind": "0.1.
|
|
338
|
-
"@veryfront/ext-parser-babel": "0.1.
|
|
335
|
+
"@veryfront/ext-bundler-esbuild": "0.1.1151",
|
|
336
|
+
"@veryfront/ext-content-mdx": "0.1.1151",
|
|
337
|
+
"@veryfront/ext-css-tailwind": "0.1.1151",
|
|
338
|
+
"@veryfront/ext-parser-babel": "0.1.1151"
|
|
339
339
|
},
|
|
340
340
|
"devDependencies": {
|
|
341
341
|
"@types/node": "20.9.0"
|