@plasmicapp/loader-react 1.0.153 → 1.0.156

package/dist/loader-react.esm.js

@@ -4,7 +4,7 @@ export { DataCtxReader, DataProvider, PageParamsProvider, PlasmicCanvasContext,
 import * as PlasmicQuery from '@plasmicapp/query';
 import { PlasmicQueryDataProvider, PlasmicPrepassContext } from '@plasmicapp/query';
 export { usePlasmicQueryData } from '@plasmicapp/query';
-import { getBundleSubset, Registry, PlasmicModulesFetcher } from '@plasmicapp/loader-core';
+import { getBundleSubset, Registry, PlasmicModulesFetcher, PlasmicTracker } from '@plasmicapp/loader-core';
 import { getExternalIds, getActiveVariation } from '@plasmicapp/loader-splits';
 import React__default, { useState, useCallback, useEffect, useRef, useMemo, createElement, memo, useContext, createContext } from 'react';
 import ReactDOM from 'react-dom';
@@ -1160,6 +1160,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 = {};
@@ -1256,6 +1261,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) {
@@ -1347,6 +1362,17 @@ function PlasmicRootProvider(props) {
       return loader.unsubscribePlasmicRoot(watcher);
     };
   }, [watcher, loader]);
+  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 = useMemo(function () {
     return {
       globalVariants: mergeGlobalVariantsSpec(globalVariants != null ? globalVariants : [], getGlobalVariantsFromSplits(splits, variation != null ? variation : {})),
@@ -1496,6 +1522,13 @@ var InternalPlasmicComponentLoader = /*#__PURE__*/function () {
     this.substitutedGlobalVariantHooks = {};
     this.registry = Registry.getInstance();
     this.fetcher = new PlasmicModulesFetcher(opts);
+    this.tracker = new PlasmicTracker({
+      projectIds: opts.projects.map(function (p) {
+        return p.id;
+      }),
+      platform: opts.platform,
+      preview: opts.preview
+    });
     this.registerModules({
       react: React__default,
       'react-dom': ReactDOM,
@@ -1840,6 +1873,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
   ;
 
@@ -1915,6 +1956,18 @@ var InternalPlasmicComponentLoader = /*#__PURE__*/function () {
     return getActiveVariation$1;
   }();
 
+  _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;
@@ -1927,13 +1980,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();
           }
@@ -2291,6 +2345,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();
   };
@@ -2369,13 +2431,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
   });
+  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 = useMemo(function () {
     if (!Component) {
       return null;