@plasmicapp/loader-react 1.0.328 → 1.0.330

package/dist/index.d.ts

@@ -70,7 +70,7 @@ declare class ComponentLookup {
     getRemoteFonts(): FontMeta[];
 }
 
-declare type ComponentLookupSpec = string | {
+export declare type ComponentLookupSpec = string | {
     name: string;
     projectId?: string;
     isCode?: boolean;
@@ -111,7 +111,7 @@ export declare function extractPlasmicQueryDataFromElement(loader: PlasmicCompon
     prefetchedQueryData?: Record<string, any>;
 }): Promise<Record<string, any>>;
 
-declare interface FetchComponentDataOpts {
+export declare interface FetchComponentDataOpts {
     /**
      * Will fetch either code targeting SSR or browser hydration in the
      * returned bundle.
@@ -262,11 +262,12 @@ export declare class InternalPlasmicComponentLoader {
  *   "world"}}`
  * - `matchesPagePath("/hello/[name]", "/")` -> `false`
  * - `matchesPagePath("/hello/[...catchall]", "/hello/a/b/c")` -> `{params: {catchall: ["a", "b", "c"]}}`
+ * - `matchesPagePath("/hello/[[...catchall]]", "/hello/")` -> `{params: {catchall: []}}`
  * - `matchesPagePath("/", "")` -> `{params: {}}`
  */
-export declare function matchesPagePath(pagePath: string, lookup: string): {
+export declare function matchesPagePath(pattern: string, path: string): false | {
     params: Record<string, string | string[]>;
-} | false;
+};
 
 export { PageMeta }
 
@@ -353,12 +354,14 @@ export declare class PlasmicComponentLoader {
      * the Plasmic project.
      */
     fetchComponentData(...specs: ComponentLookupSpec[]): Promise<ComponentRenderData>;
+    fetchComponentData(specs: ComponentLookupSpec[], opts?: FetchComponentDataOpts): Promise<ComponentRenderData>;
     /**
      * Like fetchComponentData(), but returns null instead of throwing an Error
      * when a component is not found.  Useful when you are implementing a catch-all
      * page and want to check if a specific path had been defined for Plasmic.
      */
     maybeFetchComponentData(...specs: ComponentLookupSpec[]): Promise<ComponentRenderData | null>;
+    maybeFetchComponentData(specs: ComponentLookupSpec[], opts?: FetchComponentDataOpts): Promise<ComponentRenderData | null>;
     /**
      * Returns all the page component metadata for these projects.
      */

package/dist/index.esm.js

@@ -149,26 +149,27 @@ function useIsMounted() {
   }, []);
   return isMounted;
 }
-function matchesPagePath(pagePath, lookup) {
-  var _a;
-  pagePath = pagePath.replace(/^\/*/, "").replace(/\/*$/, "");
-  lookup = lookup.replace(/^\/*/, "").replace(/\/*$/, "");
-  const paramNames = (pagePath.match(/\[([^\]]*)\]/g) || []).map(
-    (group) => group.slice(1, -1)
-  );
-  const pagePathRegExp = new RegExp(
-    "^/?" + pagePath.replace(/\[\.\.\.[^\]]*\]/g, "(.+)").replace(/\[[^\]]*\]/g, "([^/]+)") + "$"
-  );
-  const maybeVals = (_a = lookup.replace(/[?].*/, "").match(pagePathRegExp)) == null ? void 0 : _a.slice(1);
-  if (!maybeVals) {
+function matchesPagePath(pattern, path) {
+  const normalizedPattern = "/" + pattern.replace(/^\/|\/$/g, "");
+  const normalizedPath = "/" + path.replace(/^\/|\/$/g, "");
+  const regexString = normalizedPattern.replace(/\/\[\[\.\.\.(\w+)]]/g, "(?:/([^]*))?").replace(/\/\[\.\.\.(\w+)]/g, "/([^]*)").replace(/\[(\w+)]/g, "([^/]+)").replace(/\//g, "\\/");
+  const regex = new RegExp(`^/?${regexString}$`);
+  const match = normalizedPath.match(regex);
+  if (!match)
     return false;
-  }
+  const slugNames = [...pattern.matchAll(/\[\.?\.?\.?(\w+)]/g)].map(
+    (m) => m[1]
+  );
   const params = {};
-  for (let i = 0; i < paramNames.length; i++) {
-    if (paramNames[i].startsWith("...")) {
-      params[paramNames[i].slice(3)] = maybeVals[i].split("/");
-    } else {
-      params[paramNames[i]] = maybeVals[i];
+  for (let i = 0; i < slugNames.length; i++) {
+    const slugName = slugNames[i];
+    const value = match[i + 1];
+    if (pattern.includes(`[[...${slugName}]]`)) {
+      params[slugName] = value ? value.split("/").filter(Boolean) : [];
+    } else if (pattern.includes(`[...${slugName}]`)) {
+      params[slugName] = value.split("/").filter(Boolean);
+    } else if (value !== void 0) {
+      params[slugName] = value;
     }
   }
   return { params };
@@ -1102,34 +1103,12 @@ var PlasmicComponentLoader = class {
   registerToken(token) {
     this.__internal.registerToken(token);
   }
-  /**
-   * Pre-fetches component data needed to for PlasmicLoader to render
-   * these components.  Should be passed into PlasmicRootProvider as
-   * the prefetchedData prop.
-   *
-   * You can look up a component either by:
-   * - the name of the component
-   * - the path for a page component
-   * - an array of strings that make up parts of the path
-   * - object { name: "name_or_path", projectId: ...}, to specify which project
-   *   to use, if multiple projects have the same component name
-   *
-   * Throws an Error if a specified component to fetch does not exist in
-   * the Plasmic project.
-   */
-  fetchComponentData(...specs) {
-    return __async(this, null, function* () {
-      return this.__internal.fetchComponentData(...specs);
-    });
+  fetchComponentData(...args) {
+    return this.__internal.fetchComponentData(...args);
   }
-  /**
-   * Like fetchComponentData(), but returns null instead of throwing an Error
-   * when a component is not found.  Useful when you are implementing a catch-all
-   * page and want to check if a specific path had been defined for Plasmic.
-   */
-  maybeFetchComponentData(...specs) {
+  maybeFetchComponentData(...args) {
     return __async(this, null, function* () {
-      return this.__internal.maybeFetchComponentData(...specs);
+      return this.__internal.maybeFetchComponentData(...args);
     });
   }
   /**
@@ -1203,6 +1182,7 @@ import {
   useSelector,
   useSelectors
 } from "@plasmicapp/host";
+import { extractPlasmicQueryData as extractPlasmicQueryData2, plasmicPrepass } from "@plasmicapp/prepass";
 import { usePlasmicQueryData } from "@plasmicapp/query";
 
 // src/PlasmicComponent.tsx
@@ -1339,9 +1319,6 @@ function MaybeWrap(props) {
   return props.cond ? props.wrapper(props.children) : props.children;
 }
 
-// src/index.ts
-import { extractPlasmicQueryData as extractPlasmicQueryData2, plasmicPrepass } from "@plasmicapp/prepass";
-
 // src/render.tsx
 import React6 from "react";
 import ReactDOM2 from "react-dom";