@casterly/components - npm Package Compare versions

Comparing version 0.9.0-alpha.9 to 0.9.0-alpha.11

lib/RootBrowser.d.ts

@@ -10,2 +10,4 @@ import React from 'react';
 }
-export declare const RootBrowser: React.FC;
+export declare const RootBrowser: React.FC<{
+    appContext: unknown;
+}>;

lib/RootBrowser.js

@@ -71,2 +71,3 @@ "use strict";
 var history_1 = require("history");
+var private_casterly_loader_1 = require("private-casterly-loader");
 var react_1 = __importStar(require("react"));
@@ -76,8 +77,15 @@ var react_router_1 = require("react-router");
 var RoutePendingContext_1 = require("./RoutePendingContext");
+var getRouteMatchWithPreloadedData = function (routeMatch, preload) {
+    if (!routeMatch.route.metadata) {
+        return routeMatch;
+    }
+    return __assign(__assign({}, routeMatch), { route: __assign(__assign({}, routeMatch.route), { preloadedData: preload(routeMatch.route.metadata) }) });
+};
 var parseRouteMatch = function (routes, routeMatch) {
     var route = routeMatch.route;
     var routeEntrypoint = route.componentName;
-    var Component = __webpack_require__(routeEntrypoint).default;
+    var routeEntrypointModule = __webpack_require__(routeEntrypoint);
+    var Component = routeEntrypointModule.default;
     return [
-        __assign(__assign({}, route), { element: react_1.default.createElement(Component, __assign({}, route.props)), children: routes }),
+        __assign(__assign({}, route), { element: (react_1.default.createElement(Component, __assign({}, route.props, { preloadedData: routeMatch.route.preloadedData }))), children: routes }),
     ];
@@ -163,11 +171,11 @@ };
 }); };
-var fetchRouteAssets = function (path, version, reloadOnMismatch) {
-    if (reloadOnMismatch === void 0) { reloadOnMismatch = true; }
+var fetchRouteAssets = function (_a) {
+    var path = _a.path, version = _a.version, _b = _a.reloadOnMismatch, reloadOnMismatch = _b === void 0 ? true : _b, preload = _a.preload;
     return __awaiter(void 0, void 0, void 0, function () {
         var routeClientContext, scriptAssets, styleAssets, routes;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
+        return __generator(this, function (_c) {
+            switch (_c.label) {
                 case 0: return [4 /*yield*/, fetchRouteData(path, version)];
                 case 1:
-                    routeClientContext = _a.sent();
+                    routeClientContext = _c.sent();
                     if (!routeClientContext && reloadOnMismatch) {
@@ -180,2 +188,3 @@ window.location.reload();
                     }
+                    routeClientContext.matchedRoutes = routeClientContext.matchedRoutes.map(function (routeMatch) { return getRouteMatchWithPreloadedData(routeMatch, preload); });
                     scriptAssets = routeClientContext.matchedRoutesAssets.filter(function (file) {
@@ -189,4 +198,4 @@ return file.endsWith('.js');
                 case 2:
-                    _a.sent();
-                    routes = routeClientContext.matchedRoutes.reduceRight(parseRouteMatch, []);
+                    _c.sent();
+                    routes = routeClientContext.matchedRoutes.reduceRight(function (routeList, routeMatch) { return parseRouteMatch(routeList, routeMatch); }, []);
                     return [2 /*return*/, { routes: routes }];
@@ -198,6 +207,11 @@ }
 var InternalRoot = function (_a) {
-    var location = _a.location, action = _a.action, navigator = _a.navigator, children = _a.children;
+    var location = _a.location, action = _a.action, navigator = _a.navigator, appContext = _a.appContext, children = _a.children;
+    var preload = react_1.useMemo(function () {
+        return private_casterly_loader_1.createPreloadForContext(appContext);
+    }, []);
     var _b = react_1.useState(function () {
         var _a, _b;
-        var routes = (_b = (_a = window.__serverContext) === null || _a === void 0 ? void 0 : _a.matchedRoutes.reduceRight(parseRouteMatch, [])) !== null && _b !== void 0 ? _b : [];
+        var routes = (_b = (_a = window.__serverContext) === null || _a === void 0 ? void 0 : _a.matchedRoutes.reduceRight(function (routeList, routeMatch) {
+            return parseRouteMatch(routeList, getRouteMatchWithPreloadedData(routeMatch, preload));
+        }, [])) !== null && _b !== void 0 ? _b : [];
         return __assign(__assign({}, window.__serverContext), { routes: routes });
@@ -221,3 +235,7 @@ }), context = _b[0], setContext = _b[1];
                         _b.trys.push([0, 2, , 3]);
-                        return [4 /*yield*/, fetchRouteAssets(typeof location === 'string' ? location : location.pathname, context.version)];
+                        return [4 /*yield*/, fetchRouteAssets({
+                                path: typeof location === 'string' ? location : location.pathname,
+                                version: context.version,
+                                preload: preload,
+                            })];
                     case 1:
@@ -245,3 +263,3 @@ routes_1 = (_b.sent()).routes;
         };
-    }, [location, context.version]);
+    }, [location, context.version, preload]);
     return (react_1.default.createElement(RootContext_1.RootContextProvider, { value: context },
@@ -252,3 +270,3 @@ react_1.default.createElement(RoutePendingContext_1.RoutePendingContextProvider, { value: routePending },
 var RootBrowser = function (_a) {
-    var children = _a.children;
+    var appContext = _a.appContext, children = _a.children;
     var historyRef = react_1.useRef();
@@ -264,4 +282,4 @@ if (historyRef.current == null) {
     react_1.useLayoutEffect(function () { return history.listen(dispatch); }, [history]);
-    return (react_1.default.createElement(InternalRoot, { action: state.action, location: state.location, navigator: history }, children));
+    return (react_1.default.createElement(InternalRoot, { action: state.action, location: state.location, navigator: history, appContext: appContext }, children));
 };
 exports.RootBrowser = RootBrowser;

lib/RootContext.d.ts

@@ -7,2 +7,4 @@ import React from 'react';
     props?: Record<string, unknown>;
+    metadata?: unknown;
+    preloadedData?: unknown;
 };
@@ -9,0 +11,0 @@ export declare type RouteMatchWithKey = RouteMatch & {

lib/Scripts.d.ts

 import React from 'react';
-export declare const Scripts: React.FC<Omit<React.DetailedHTMLProps<React.ScriptHTMLAttributes<HTMLScriptElement>, HTMLScriptElement>, 'src' | 'type' | 'async'>>;
+import type { RootContext } from './RootContext';
+export declare const getScriptsFromContext: (context: RootContext) => string[];
+export declare const Scripts: React.FC<Omit<React.DetailedHTMLProps<React.ScriptHTMLAttributes<HTMLScriptElement>, HTMLScriptElement>, 'src' | 'type' | 'defer' | 'async'>>;

lib/Scripts.js

@@ -28,5 +28,13 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Scripts = void 0;
+exports.Scripts = exports.getScriptsFromContext = void 0;
 var react_1 = __importDefault(require("react"));
 var RootContext_1 = require("./RootContext");
+var getScriptsFromContext = function (context) {
+    var matchedRoutesAssets = context.matchedRoutesAssets, mainAssets = context.mainAssets;
+    return matchedRoutesAssets
+        .concat(mainAssets)
+        .filter(function (file) { return file.endsWith('.js'); })
+        .map(function (file) { return process.env.ASSET_PATH + file.slice(1); });
+};
+exports.getScriptsFromContext = getScriptsFromContext;
 var Scripts = function (_a) {
@@ -40,3 +48,5 @@ var nonce = _a.nonce,
     // @ts-ignore
-    async = _a.async, props = __rest(_a, ["nonce", "src", "type", "async"]);
+    defer = _a.defer, 
+    // @ts-ignore
+    async = _a.async, props = __rest(_a, ["nonce", "src", "type", "defer", "async"]);
     var _b = RootContext_1.useRootContext(), matchedRoutesAssets = _b.matchedRoutesAssets, matchedRoutes = _b.matchedRoutes, mainAssets = _b.mainAssets, version = _b.version, devServerPort = _b.devServerPort;
@@ -62,4 +72,4 @@ return (react_1.default.createElement(react_1.default.Fragment, null,
             .filter(function (file) { return file.endsWith('.js'); })
-            .map(function (scriptSource) { return (react_1.default.createElement("script", __assign({ key: scriptSource }, props, { defer: true, src: "/_casterly" + scriptSource }))); })));
+            .map(function (scriptSource) { return (react_1.default.createElement("script", __assign({ key: scriptSource }, props, { async: true, src: "/_casterly" + scriptSource }))); })));
 };
 exports.Scripts = Scripts;

package.json

 {
   "name": "@casterly/components",
-  "version": "0.9.0-alpha.9",
+  "version": "0.9.0-alpha.11",
   "description": "Base Casterly components",
@@ -48,3 +48,3 @@ "author": "Lucas Cordeiro <[e-mail]>",
   },
-  "gitHead": "35f9c10f9bae6436460c88a057891d004ecb0f40"
+  "gitHead": "381cb03f7180821192c33c7391505535cbba77b3"
 }

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

31018

increased by7.37%

Number of package files

30

increased by3.45%

Lines of code

617

increased by6.93%

Worsened metrics

Number of low supply chain risk alerts

1

increased byInfinity%

No dependency changes