@plasmicapp/loader-react 1.0.162 → 1.0.165

package/dist/loader-react.esm.js

@@ -1,5 +1,5 @@
 import * as PlasmicHost from '@plasmicapp/host';
-import { registerComponent, registerGlobalContext, registerTrait } from '@plasmicapp/host';
+import { PageParamsProvider, registerComponent, registerGlobalContext, registerTrait } from '@plasmicapp/host';
 export { DataCtxReader, DataProvider, PageParamsProvider, PlasmicCanvasContext, PlasmicCanvasHost, repeatedElement, useDataEnv, usePlasmicCanvasContext, useSelector, useSelectors } from '@plasmicapp/host';
 import * as PlasmicQuery from '@plasmicapp/query';
 import { PlasmicQueryDataProvider, PlasmicPrepassContext } from '@plasmicapp/query';
@@ -1126,19 +1126,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) {
@@ -1343,7 +1396,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) {
@@ -1399,7 +1454,10 @@ function PlasmicRootProvider(props) {
     loader: loader,
     prefetchedData: prefetchedData,
     skipFonts: skipFonts
-  }), children));
+  }), createElement(PageParamsProvider, {
+    params: pageParams,
+    query: pageQuery
+  }, children)));
 }
 /**
  * Inject all css modules as <style/> tags. We can't use the usual styleInjector postcss