@plasmicapp/loader-react 1.0.163 → 1.0.166

package/dist/PlasmicRootProvider.d.ts

@@ -70,6 +70,16 @@ export declare function PlasmicRootProvider(props: {
      * Translator function to be used for text blocks
      */
     translator?: PlasmicTranslator;
+    /**
+     * Page path parameters (e.g. {slug: "foo"} if page path is
+     * /products/[slug] and URI is /products/foo).
+     */
+    pageParams?: Record<string, string>;
+    /**
+     * Page query parameters (e.g. {q: "foo"} if page path is
+     * /some/path?q=foo).
+     */
+    pageQuery?: Record<string, string>;
 }): JSX.Element;
 export declare function usePlasmicRootContext(): PlasmicRootContextValue | undefined;
 export {};

package/dist/loader-react.cjs.development.js

@@ -1129,19 +1129,72 @@ function useIsMounted() {
   }, []);
   return isMounted;
 }
+/**
+ * Check if `lookup` resolves to `pagePath`. If it's a match, return an object
+ * containing path params; otherwise, returns false.
+ *
+ * For example,
+ * - `matchesPagePath("/hello/[name]", "/hello/world")` -> `{params: {name:
+ *   "world"}}`
+ * - `matchesPagePath("/hello/[name]", "/")` -> `false`
+ * - `matchesPagePath("/", "")` -> `{params: {}}`
+ */
+
+function matchesPagePath(pagePath, lookup) {
+  var _lookup$match;
+
+  // Remove trailing slashes from both `pagePath` and `lookup`.
+  pagePath = pagePath.replace(/^\/*/, '').replace(/\/*$/, '');
+  lookup = lookup.replace(/^\/*/, '').replace(/\/*$/, ''); // paramNames will contain a list of parameter names; e.g. if pagePath
+  // is "/products/[slug]/[variant]" it will contain ["slug", "variant"].
+
+  var paramNames = (pagePath.match(/\[([^\]]*)\]/g) || []).map(function (group) {
+    return group.slice(1, -1);
+  });
+  var pagePathRegExp = new RegExp('^' + pagePath.replace(/\[[^\]]*\]/g, '([^/]+)') + '$');
+  var maybeVals = (_lookup$match = lookup.match(pagePathRegExp)) == null ? void 0 : _lookup$match.slice(1);
+
+  if (!maybeVals) {
+    return false;
+  }
+
+  var params = {};
+
+  for (var i = 0; i < paramNames.length; i++) {
+    params[paramNames[i]] = maybeVals[i];
+  }
+
+  return {
+    params: params
+  };
+}
 
 function matchesCompMeta(lookup, meta) {
   if (lookup.projectId && meta.projectId !== lookup.projectId) {
     return false;
   }
 
-  return isNameSpec(lookup) ? (lookup.name === meta.name || lookup.rawName === meta.name || lookup.rawName === meta.displayName) && (lookup.isCode == null || lookup.isCode === meta.isCode) : lookup.path === meta.path;
+  return isNameSpec(lookup) ? (lookup.name === meta.name || lookup.rawName === meta.name || lookup.rawName === meta.displayName) && (lookup.isCode == null || lookup.isCode === meta.isCode) : !!(meta.path && matchesPagePath(meta.path, lookup.path));
 }
 
 function getCompMetas(metas, lookup) {
   var full = toFullLookup(lookup);
   return metas.filter(function (meta) {
     return matchesCompMeta(full, meta);
+  }).map(function (meta) {
+    if (isNameSpec(full) || !meta.path) {
+      return meta;
+    }
+
+    var match = matchesPagePath(meta.path, full.path);
+
+    if (!match) {
+      return meta;
+    }
+
+    return _extends({}, meta, {
+      params: match.params
+    });
   });
 }
 function getLookupSpecName(lookup) {
@@ -1346,7 +1399,9 @@ function PlasmicRootProvider(props) {
       suspenseForQueryData = props.suspenseForQueryData,
       globalContextsProps = props.globalContextsProps,
       variation = props.variation,
-      translator = props.translator;
+      translator = props.translator,
+      pageParams = props.pageParams,
+      pageQuery = props.pageQuery;
   var loader = props.loader.__internal;
 
   if (prefetchedData) {
@@ -1402,7 +1457,10 @@ function PlasmicRootProvider(props) {
     loader: loader,
     prefetchedData: prefetchedData,
     skipFonts: skipFonts
-  }), children));
+  }), React.createElement(PlasmicHost.PageParamsProvider, {
+    params: pageParams,
+    query: pageQuery
+  }, children)));
 }
 /**
  * Inject all css modules as <style/> tags. We can't use the usual styleInjector postcss