@plasmicapp/loader-react 1.0.152 → 1.0.155

package/README.md

@@ -1,3 +1,11 @@
 # @plasmicapp/loader-react
 
-Library for using @plasmicapp/loader-core with React
+This is the SDK for using the Plasmic visual builder with React codebases.
+
+To get started, see the quickstart for React:
+
+https://docs.plasmic.app/learn/react-quickstart
+
+If you are using Next.js or Gatsby, please instead use the specific SDKs for those: `@plasmicapp/loader-nextjs` and `@plasmicapp/loader-gatsby`.
+
+This library uses `@plasmicapp/loader-core` under the hood.

package/dist/component-lookup.d.ts

@@ -1,10 +1,11 @@
-import { AssetModule, FontMeta, GlobalGroupMeta, LoaderBundleOutput, Registry } from '@plasmicapp/loader-core';
+import { AssetModule, ComponentMeta, FontMeta, GlobalGroupMeta, LoaderBundleOutput, Registry } from '@plasmicapp/loader-core';
 import * as React from 'react';
 import { ComponentLookupSpec } from './utils';
 export declare class ComponentLookup {
     private bundle;
     private registry;
     constructor(bundle: LoaderBundleOutput, registry: Registry);
+    getComponentMeta(spec: ComponentLookupSpec): ComponentMeta | undefined;
     getComponent<P extends React.ComponentType = any>(spec: ComponentLookupSpec, opts?: {
         forceOriginal?: boolean;
     }): any;

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

@@ -1163,6 +1163,11 @@ var ComponentLookup = /*#__PURE__*/function () {
 
   var _proto = ComponentLookup.prototype;
 
+  _proto.getComponentMeta = function getComponentMeta(spec) {
+    var compMeta = getFirstCompMeta(this.bundle.components, spec);
+    return compMeta;
+  };
+
   _proto.getComponent = function getComponent(spec, opts) {
     if (opts === void 0) {
       opts = {};
@@ -1259,6 +1264,16 @@ function getPlasmicCookieValues() {
 function updatePlasmicCookieValue(key, value) {
   document.cookie = "plasmic:" + key + "=" + value;
 }
+function ensureVariationCookies(variation) {
+  if (variation === void 0) {
+    variation = {};
+  }
+
+  Object.keys(variation).map(function (variationKey) {
+    var sliceId = variation[variationKey];
+    updatePlasmicCookieValue(variationKey, sliceId);
+  });
+}
 var getGlobalVariantsFromSplits = function getGlobalVariantsFromSplits(splits, variation) {
   var globalVariants = [];
   Object.keys(variation).map(function (variationKey) {
@@ -1350,6 +1365,17 @@ function PlasmicRootProvider(props) {
       return loader.unsubscribePlasmicRoot(watcher);
     };
   }, [watcher, loader]);
+  React.useEffect(function () {
+    ensureVariationCookies(variation);
+    loader.trackRender({
+      renderCtx: {
+        // We track the provider as a single entity
+        rootComponentId: 'provider',
+        teamIds: loader.getTeamIds()
+      },
+      variation: variation
+    });
+  }, [loader, variation]);
   var value = React.useMemo(function () {
     return {
       globalVariants: mergeGlobalVariantsSpec(globalVariants != null ? globalVariants : [], getGlobalVariantsFromSplits(splits, variation != null ? variation : {})),
@@ -1499,6 +1525,13 @@ var InternalPlasmicComponentLoader = /*#__PURE__*/function () {
     this.substitutedGlobalVariantHooks = {};
     this.registry = loaderCore.Registry.getInstance();
     this.fetcher = new loaderCore.PlasmicModulesFetcher(opts);
+    this.tracker = new loaderCore.PlasmicTracker({
+      projectIds: opts.projects.map(function (p) {
+        return p.id;
+      }),
+      platform: opts.platform,
+      preview: opts.preview
+    });
     this.registerModules({
       react: React__default,
       'react-dom': ReactDOM,
@@ -1843,6 +1876,14 @@ var InternalPlasmicComponentLoader = /*#__PURE__*/function () {
 
   _proto.getActiveSplits = function getActiveSplits() {
     return this.bundle.activeSplits;
+  };
+
+  _proto.trackConversion = function trackConversion(value) {
+    if (value === void 0) {
+      value = 0;
+    }
+
+    this.tracker.trackConversion(value);
   } // @ts-ignore
   ;
 
@@ -1918,6 +1959,18 @@ var InternalPlasmicComponentLoader = /*#__PURE__*/function () {
     return getActiveVariation;
   }();
 
+  _proto.getTeamIds = function getTeamIds() {
+    return this.bundle.projects.map(function (p) {
+      return p.teamId;
+    }).filter(function (x) {
+      return !!x;
+    });
+  };
+
+  _proto.trackRender = function trackRender(opts) {
+    this.tracker.trackRender(opts);
+  };
+
   _proto.fetchAllData = /*#__PURE__*/function () {
     var _fetchAllData = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee8() {
       var bundle;
@@ -1930,13 +1983,14 @@ var InternalPlasmicComponentLoader = /*#__PURE__*/function () {
 
             case 2:
               bundle = _context8.sent;
+              this.tracker.trackFetch();
               this.mergeBundle(bundle);
               this.roots.forEach(function (watcher) {
                 return watcher.onDataFetched == null ? void 0 : watcher.onDataFetched();
               });
               return _context8.abrupt("return", bundle);
 
-            case 6:
+            case 7:
             case "end":
               return _context8.stop();
           }
@@ -2294,6 +2348,14 @@ var PlasmicComponentLoader = /*#__PURE__*/function () {
     return this.__internal.getActiveSplits();
   };
 
+  _proto2.trackConversion = function trackConversion(value) {
+    if (value === void 0) {
+      value = 0;
+    }
+
+    this.__internal.trackConversion(value);
+  };
+
   _proto2.clearCache = function clearCache() {
     return this.__internal.clearCache();
   };
@@ -2372,13 +2434,35 @@ function PlasmicComponent(props) {
 
   var loader = rootContext.loader,
       globalContextsProps = rootContext.globalContextsProps,
+      variation = rootContext.variation,
       translator = rootContext.translator;
   var Component = usePlasmicComponent({
     name: component,
-    projectId: projectId
+    projectId: projectId,
+    isCode: false
   }, {
     forceOriginal: forceOriginal
   });
+  React.useEffect(function () {
+    if (isRootLoader) {
+      var meta = loader.getLookup().getComponentMeta({
+        name: component,
+        projectId: projectId
+      });
+
+      if (meta) {
+        loader.trackRender({
+          renderCtx: {
+            rootProjectId: meta.projectId,
+            rootComponentId: meta.id,
+            rootComponentName: component,
+            teamIds: loader.getTeamIds()
+          },
+          variation: variation
+        });
+      }
+    }
+  }, [component, projectId, loader, variation]);
   var element = React.useMemo(function () {
     if (!Component) {
       return null;