@plasmicapp/react-web - npm Package Compare versions

Comparing version 0.2.25 to 0.2.27

dist/canvas-host.d.ts

@@ -5,15 +5,6 @@ import { ComponentType } from "react";
     props: {
-        [prop: string]: "string" | "boolean" | "number" | "object" | "slot";
+        [prop: string]: "string" | "boolean" | "number" | "slot";
     };
-    /**
-     * Either the path to the component relative to `rootDir` or the npm
-     * package name
-     */
-    importPath: string;
-    /**
-     * Whether it's a default export or named export
-     */
-    isDefaultExport?: boolean;
 }
-export interface Registration {
+interface Registration {
     component: ComponentType;
@@ -31,1 +22,2 @@ meta: ComponentMeta;
 export declare function PlasmicCanvasHost(): JSX.Element;
+export {};

dist/canvas-host.js

@@ -51,4 +51,3 @@ "use strict";
         if (!document.querySelector("#plasmic-studio-tag") &&
-            !location.hash.match(/\bcanvas=true\b/) &&
-            !location.hash.match(/\blive=true\b/)) {
+            !location.hash.match(/\bcanvas=true\b/)) {
             renderStudioIntoIframe();
@@ -55,0 +54,0 @@ }

dist/createUseScreenVariants.d.ts

 declare type Queries = {
     [name: string]: string;
 };
-export default function createUseScreenVariants(isMulti: boolean, screenQueries: Queries): () => string | string[];
+export default function createUseScreenVariants(isMulti: boolean, screenQueries: Queries): () => string | string[] | undefined;
 export {};

dist/createUseScreenVariants.js

@@ -44,7 +44,8 @@ "use strict";
 }
-var curScreenVariant = [];
-function calculateScreenVariant() {
+// undefined if screen variants have never been calculated
+var curScreenVariants = undefined;
+function recalculateScreenVariants() {
     var screenVariant = matchScreenVariants();
-    if (screenVariant !== curScreenVariant) {
-        curScreenVariant = screenVariant;
+    if (!curScreenVariants || screenVariant.join("") !== curScreenVariants.join("")) {
+        curScreenVariants = screenVariant;
         react_dom_1.default.unstable_batchedUpdates(function () {
@@ -55,10 +56,21 @@ return listeners.forEach(function (listener) { return listener(); });
 }
+function ensureInitCurScreenVariants() {
+    // Initializes curScreenVariants if it hadn't been before. Note that this must
+    // be called from within an effect.
+    if (curScreenVariants === undefined) {
+        curScreenVariants = matchScreenVariants();
+    }
+}
 if (react_utils_1.isBrowser) {
-    window.addEventListener("resize", calculateScreenVariant);
+    window.addEventListener("resize", recalculateScreenVariants);
 }
 function createUseScreenVariants(isMulti, screenQueries) {
     Object.assign(queries, screenQueries);
-    calculateScreenVariant();
     return function () {
+        // It is important that upon first render, we return [] or undefined, because
+        // that is what SSR will use, and the client must match.  In an effect (which
+        // only happens on the client), we then actually ask for the real screen variant
+        // and, if different from [] or undefined, forces a re-render.
         var _a = React.useState(), updateState = _a[1];
+        var lastScreenVariantsRef = React.useRef(curScreenVariants || []);
         // We do useLayoutEffect instead of useEffect to immediately
@@ -69,13 +81,36 @@ // register our forceUpdate. This ensures that if there was
         react_utils_1.useIsomorphicLayoutEffect(function () {
-            var forceUpdate = function () { return updateState({}); };
-            listeners.push(forceUpdate);
+            var updateIfChanged = function () {
+                if (curScreenVariants &&
+                    lastScreenVariantsRef.current.join("") !== curScreenVariants.join("")) {
+                    lastScreenVariantsRef.current = curScreenVariants;
+                    // Force update
+                    updateState({});
+                }
+            };
+            // Listeners are invoked whenever the window is resized
+            listeners.push(updateIfChanged);
+            // Initialize the curScreenVariants for the first time.  We don't need
+            // to invoke the listeners here because all components will already 
+            // have this effect running and will re-render if the real screen
+            // variant is non-empty.
+            ensureInitCurScreenVariants();
+            // Now, if the curScreenVariants differs from what we returned last,
+            // then force a re-render.
+            updateIfChanged();
             return function () {
-                listeners.splice(listeners.indexOf(forceUpdate), 1);
+                // Remove our listener on unmount
+                listeners.splice(listeners.indexOf(updateIfChanged), 1);
             };
         }, []);
-        return isMulti
-            ? curScreenVariant
-            : curScreenVariant[curScreenVariant.length - 1];
+        if (isMulti) {
+            return curScreenVariants || [];
+        }
+        else if (curScreenVariants) {
+            return curScreenVariants[curScreenVariants.length - 1];
+        }
+        else {
+            return undefined;
+        }
     };
 }
 exports.default = createUseScreenVariants;

dist/index.js

@@ -631,9 +631,17 @@ "use strict";
 exports.deriveRenderOpts = deriveRenderOpts;
+var isDefaultValue = function (val) { return val === "PLEASE_RENDER_INSIDE_PROVIDER"; };
+var seenDefaultVariants = {};
 function ensureGlobalVariants(globalVariantValues) {
-    Object.entries(globalVariantValues).forEach(function (_a) {
+    Object.entries(globalVariantValues)
+        .filter(function (_a) {
         var key = _a[0], value = _a[1];
-        if (value === "PLEASE_RENDER_INSIDE_PROVIDER") {
+        return isDefaultValue(value);
+    })
+        .forEach(function (_a) {
+        var key = _a[0], value = _a[1];
+        globalVariantValues[key] = undefined;
+        if (!seenDefaultVariants[key]) {
+            seenDefaultVariants[key] = true;
             var providerName = "" + key[0].toUpperCase() + key.substring(1) + "Context.Provider";
             console.warn("Plasmic context value for global variant \"" + key + "\" was not provided; please use " + providerName + " at the root of your React app. Learn More: https://www.plasmic.app/learn/other-assets/#global-variants");
-            globalVariantValues[key] = undefined;
         }
@@ -640,0 +648,0 @@ });

dist/react-utils.d.ts

 import React from "react";
 export declare const isBrowser: boolean;
-export declare const useIsomorphicLayoutEffect: typeof React.useEffect;
+export declare const useIsomorphicLayoutEffect: typeof React.useLayoutEffect;

package.json

 {
   "name": "@plasmicapp/react-web",
-  "version": "0.2.25",
+  "version": "0.2.27",
   "description": "plasmic library for rendering in the presentational style",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

No alert changes

Improved metrics

Total package byte prevSize

52597

increased by3.91%

Number of package files

14

increased by16.67%

Lines of code

1194

increased by3.56%

No dependency changes