@plasmicapp/host - npm Package Compare versions

Comparing version 1.0.111 to 1.0.112

dist/host.cjs.development.js

@@ -529,3 +529,3 @@ 'use client';'use strict';
 
-var hostVersion = "1.0.111";
+var hostVersion = "1.0.112";
 
@@ -532,0 +532,0 @@ var root$7 = globalThis;

dist/host.cjs.production.min.js

@@ -1,2 +0,2 @@
-'use client';"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("@plasmicapp/query"),r=require("react"),n=(e=r)&&"object"==typeof e&&"default"in e?e.default:e,a=require("react-dom");function o(){return(o=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function i(e,t){return(i=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e})(e,t)}function s(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}var l=globalThis;null==l.__PlasmicHostVersion&&(l.__PlasmicHostVersion="2");var u=[],c=new function(e){var t=this;this.value=null,this.set=function(e){t.value=e,u.forEach((function(e){return e()}))},this.get=function(){return t.value}}(null);function m(){return new URLSearchParams(location.hash.replace(/^#/,"?"))}function p(){return function(e,t){if(void 0===t&&(t=""),null==e)throw t=(function(e){return"string"==typeof e}(t)?t:t())||"",new Error("Value must not be undefined or null"+(t?"- "+t:""));return e}(m().get("origin"),"Missing information from Plasmic window.")}var d=0;function f(e){d++,c.set(e)}var v=r.createContext(!1),h=function(){return r.useContext(v)};function g(){var e,t,n,o=!!window.parent,i=!(null==(e=location.hash)||!e.match(/\bcanvas=true\b/)),s=!(null==(t=location.hash)||!t.match(/\blive=true\b/))||!o,l=o&&!document.querySelector("#plasmic-studio-tag")&&!i&&!s,f=new URLSearchParams(location.hash),h=r.useState((function(){var e;return JSON.parse(null!=(e=f.get("globalVariants"))?e:"{}")})),g=h[0],b=h[1],y=(n=r.useState(0)[1],r.useCallback((function(){n((function(e){return e+1}))}),[]));if(r.useLayoutEffect((function(){return u.push(y),function(){var e=u.indexOf(y);e>=0&&u.splice(e,1)}}),[y]),r.useEffect((function(){var e,t,r,n;l&&o&&window.parent!==window&&(t=document.createElement("script"),r=p(),n=(e=m()).has("studioHash")?e.get("studioHash"):new URL(location.href).searchParams.get("studio-hash"),t.src=r+"/static/js/studio"+(n?"."+n+".js":".js"),document.body.appendChild(t))}),[l,o]),r.useEffect((function(){if(!l&&!document.querySelector("#getlibs")&&s){var e=document.createElement("script");e.id="getlibs",e.src=p()+"/static/js/getlibs.js",e.async=!1,e.onload=function(){null==window.__GetlibsReadyResolver||window.__GetlibsReadyResolver()},document.head.append(e)}}),[l]),r.useEffect((function(){var e=function(e){try{var t=JSON.parse(e.data);"canvas-frame"===t.source&&b(t.activeGlobalVariants)}catch(e){}};return window.addEventListener("message",e),function(){return window.removeEventListener("message",e)}}),[]),!o)return null;if(i||s){var _=document.querySelector("#plasmic-app.__wab_user-body");_||((_=document.createElement("div")).id="plasmic-app",_.classList.add("__wab_user-body"),document.body.appendChild(_));var P=!!i&&{componentName:f.get("componentName"),globalVariants:g,interactive:!!f.get("interactive")};return a.createPortal(r.createElement(x,{key:""+d},r.createElement(v.Provider,{value:P},c.get())),_,"plasmic-app")}return l&&window.parent===window?r.createElement("iframe",{src:"https://docs.plasmic.app/app-content/app-host-ready#appHostUrl="+encodeURIComponent(location.href),style:{width:"100vw",height:"100vh",border:"none",position:"fixed",top:0,left:0,zIndex:99999999}}):null}var b=function(e){var t=e.enableWebpackHmr,n=r.useState(null),a=n[0],o=n[1];return r.useEffect((function(){o(r.createElement(g,null))}),[]),r.createElement(r.Fragment,null,!t&&r.createElement(P,null),a)},y=[];function _(e){return y.push(e),function(){var t=y.indexOf(e);t>=0&&y.splice(t,1)}}var x=function(e){var t,n;function a(t){var r;return(r=e.call(this,t)||this).state={},r}n=e,(t=a).prototype=Object.create(n.prototype),t.prototype.constructor=t,i(t,n),a.getDerivedStateFromError=function(e){return{error:e}};var o=a.prototype;return o.componentDidCatch=function(e){y.forEach((function(t){return t(e)}))},o.render=function(){return this.state.error?r.createElement("div",null,"Error: ",""+this.state.error.message):r.createElement(r.Fragment,null,this.props.children)},a}(r.Component);function P(){return null}var E=r.createContext(void 0);function C(e){return"__plasmic_meta_"+e}function R(e){return e}function w(e,t){if(t){for(var r,n=e,a=function(e,t){var r="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(r)return(r=r.call(e)).next.bind(r);if(Array.isArray(e)||(r=function(e,t){if(e){if("string"==typeof e)return s(e,void 0);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?s(e,void 0):void 0}}(e))){r&&(e=r);var n=0;return function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}(t.split("."));!(r=a()).done;){var o;n=null==(o=n)?void 0:o[r.value]}return n}}function S(e){return w(j(),e)}function O(e){void 0===e&&(e={});var t=j();return Object.fromEntries(Object.entries(e).filter((function(e){return!!e[0]&&!!e[1]})).map((function(e){return function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];return t}(e[0],w(t,e[1]))})))}function j(){return r.useContext(E)}function T(e){var t,r,a=e.name,i=e.data,s=e.hidden,l=e.label,u=e.children,c=null!=(t=j())?t:{};return a?n.createElement(E.Provider,{value:o({},c,(r={},r[a]=i,r[C(a)]={hidden:s,label:l},r))},u):n.createElement(n.Fragment,null,u)}function A(e){var t=e.children,r=e.params,a=void 0===r?{}:r,i=e.query,s=void 0===i?{}:i,l=j()||{};return n.createElement(T,{name:"params",data:o({},l.params,a),label:"Page URL path params"},n.createElement(T,{name:"query",data:o({},l.query,s),label:"Page URL query params"},t))}function k(e){return(0,e.children)(j())}var q=globalThis;function D(e,t){q.__PlasmicFetcherRegistry.push({fetcher:e,meta:t})}q.__PlasmicFetcherRegistry=[];var F=n.createContext(void 0);function G(e){var t=e.contextName,r=e.children,a=e.actions,o=n.useMemo((function(){return Object.fromEntries(Object.entries(a).map((function(e){return[t+"."+e[0],e[1]]})))}),[t,a]);return n.createElement(F.Provider,{value:o},r)}function L(){var e;return null!=(e=n.useContext(F))?e:{}}var M=globalThis;function V(e,t){M.__PlasmicComponentRegistry.some((function(r){return r.component===e&&r.meta.name===t.name}))||M.__PlasmicComponentRegistry.push({component:e,meta:t})}null==M.__PlasmicComponentRegistry&&(M.__PlasmicComponentRegistry=[]);var N=globalThis;function U(e,t){N.__PlasmicContextRegistry.some((function(r){return r.component===e&&r.meta.name===t.name}))||N.__PlasmicContextRegistry.push({component:e,meta:t})}null==N.__PlasmicContextRegistry&&(N.__PlasmicContextRegistry=[]);var H=globalThis;function I(e){H.__PlasmicTokenRegistry.push(e)}null==H.__PlasmicTokenRegistry&&(H.__PlasmicTokenRegistry=[]);var J,z,Q=globalThis;function W(e,t){Q.__PlasmicTraitRegistry.push({trait:e,meta:t})}function $(e,t){return B(e,t)}null==Q.__PlasmicTraitRegistry&&(Q.__PlasmicTraitRegistry=[]);var B=function(e,t){return Array.isArray(t)?t.map((function(t){return B(e,t)})):t&&r.isValidElement(t)&&"string"!=typeof t?r.cloneElement(t):t},K=globalThis,X=null!=(J=null==K||null==(z=K.__Sub)?void 0:z.setRepeatedElementFn)?J:function(e){B=e},Y={__proto__:null,PlasmicCanvasContext:v,PlasmicCanvasHost:b,usePlasmicCanvasContext:h,unstable_registerFetcher:D,registerComponent:V,registerGlobalContext:U,registerToken:I,registerTrait:W,repeatedElement:$,DataContext:E,mkMetaName:C,mkMetaValue:R,applySelector:w,useSelector:S,useSelectors:O,useDataEnv:j,DataProvider:T,PageParamsProvider:A,DataCtxReader:k,GlobalActionsContext:F,GlobalActionsProvider:G,useGlobalActions:L},Z=globalThis;null==Z.__Sub&&(Z.__Sub=o({React:r,ReactDOM:a,PlasmicQuery:t,hostModule:Y,hostVersion:"1.0.111",hostUtils:{setPlasmicRootNode:f,registerRenderErrorListener:_,setRepeatedElementFn:X},setPlasmicRootNode:f,registerRenderErrorListener:_,setRepeatedElementFn:X},Y)),exports.DataContext=E,exports.DataCtxReader=k,exports.DataProvider=T,exports.GlobalActionsContext=F,exports.GlobalActionsProvider=G,exports.PageParamsProvider=A,exports.PlasmicCanvasContext=v,exports.PlasmicCanvasHost=b,exports.applySelector=w,exports.mkMetaName=C,exports.mkMetaValue=R,exports.registerComponent=V,exports.registerGlobalContext=U,exports.registerToken=I,exports.registerTrait=W,exports.repeatedElement=$,exports.unstable_registerFetcher=D,exports.useDataEnv=j,exports.useGlobalActions=L,exports.usePlasmicCanvasContext=h,exports.useSelector=S,exports.useSelectors=O;
+'use client';"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("@plasmicapp/query"),r=require("react"),n=(e=r)&&"object"==typeof e&&"default"in e?e.default:e,a=require("react-dom");function o(){return(o=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function i(e,t){return(i=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e})(e,t)}function s(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}var l=globalThis;null==l.__PlasmicHostVersion&&(l.__PlasmicHostVersion="2");var u=[],c=new function(e){var t=this;this.value=null,this.set=function(e){t.value=e,u.forEach((function(e){return e()}))},this.get=function(){return t.value}}(null);function m(){return new URLSearchParams(location.hash.replace(/^#/,"?"))}function p(){return function(e,t){if(void 0===t&&(t=""),null==e)throw t=(function(e){return"string"==typeof e}(t)?t:t())||"",new Error("Value must not be undefined or null"+(t?"- "+t:""));return e}(m().get("origin"),"Missing information from Plasmic window.")}var d=0;function f(e){d++,c.set(e)}var v=r.createContext(!1),h=function(){return r.useContext(v)};function g(){var e,t,n,o=!!window.parent,i=!(null==(e=location.hash)||!e.match(/\bcanvas=true\b/)),s=!(null==(t=location.hash)||!t.match(/\blive=true\b/))||!o,l=o&&!document.querySelector("#plasmic-studio-tag")&&!i&&!s,f=new URLSearchParams(location.hash),h=r.useState((function(){var e;return JSON.parse(null!=(e=f.get("globalVariants"))?e:"{}")})),g=h[0],b=h[1],y=(n=r.useState(0)[1],r.useCallback((function(){n((function(e){return e+1}))}),[]));if(r.useLayoutEffect((function(){return u.push(y),function(){var e=u.indexOf(y);e>=0&&u.splice(e,1)}}),[y]),r.useEffect((function(){var e,t,r,n;l&&o&&window.parent!==window&&(t=document.createElement("script"),r=p(),n=(e=m()).has("studioHash")?e.get("studioHash"):new URL(location.href).searchParams.get("studio-hash"),t.src=r+"/static/js/studio"+(n?"."+n+".js":".js"),document.body.appendChild(t))}),[l,o]),r.useEffect((function(){if(!l&&!document.querySelector("#getlibs")&&s){var e=document.createElement("script");e.id="getlibs",e.src=p()+"/static/js/getlibs.js",e.async=!1,e.onload=function(){null==window.__GetlibsReadyResolver||window.__GetlibsReadyResolver()},document.head.append(e)}}),[l]),r.useEffect((function(){var e=function(e){try{var t=JSON.parse(e.data);"canvas-frame"===t.source&&b(t.activeGlobalVariants)}catch(e){}};return window.addEventListener("message",e),function(){return window.removeEventListener("message",e)}}),[]),!o)return null;if(i||s){var _=document.querySelector("#plasmic-app.__wab_user-body");_||((_=document.createElement("div")).id="plasmic-app",_.classList.add("__wab_user-body"),document.body.appendChild(_));var P=!!i&&{componentName:f.get("componentName"),globalVariants:g,interactive:!!f.get("interactive")};return a.createPortal(r.createElement(x,{key:""+d},r.createElement(v.Provider,{value:P},c.get())),_,"plasmic-app")}return l&&window.parent===window?r.createElement("iframe",{src:"https://docs.plasmic.app/app-content/app-host-ready#appHostUrl="+encodeURIComponent(location.href),style:{width:"100vw",height:"100vh",border:"none",position:"fixed",top:0,left:0,zIndex:99999999}}):null}var b=function(e){var t=e.enableWebpackHmr,n=r.useState(null),a=n[0],o=n[1];return r.useEffect((function(){o(r.createElement(g,null))}),[]),r.createElement(r.Fragment,null,!t&&r.createElement(P,null),a)},y=[];function _(e){return y.push(e),function(){var t=y.indexOf(e);t>=0&&y.splice(t,1)}}var x=function(e){var t,n;function a(t){var r;return(r=e.call(this,t)||this).state={},r}n=e,(t=a).prototype=Object.create(n.prototype),t.prototype.constructor=t,i(t,n),a.getDerivedStateFromError=function(e){return{error:e}};var o=a.prototype;return o.componentDidCatch=function(e){y.forEach((function(t){return t(e)}))},o.render=function(){return this.state.error?r.createElement("div",null,"Error: ",""+this.state.error.message):r.createElement(r.Fragment,null,this.props.children)},a}(r.Component);function P(){return null}var E=r.createContext(void 0);function C(e){return"__plasmic_meta_"+e}function R(e){return e}function w(e,t){if(t){for(var r,n=e,a=function(e,t){var r="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(r)return(r=r.call(e)).next.bind(r);if(Array.isArray(e)||(r=function(e,t){if(e){if("string"==typeof e)return s(e,void 0);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?s(e,void 0):void 0}}(e))){r&&(e=r);var n=0;return function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}(t.split("."));!(r=a()).done;){var o;n=null==(o=n)?void 0:o[r.value]}return n}}function S(e){return w(j(),e)}function O(e){void 0===e&&(e={});var t=j();return Object.fromEntries(Object.entries(e).filter((function(e){return!!e[0]&&!!e[1]})).map((function(e){return function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];return t}(e[0],w(t,e[1]))})))}function j(){return r.useContext(E)}function T(e){var t,r,a=e.name,i=e.data,s=e.hidden,l=e.label,u=e.children,c=null!=(t=j())?t:{};return a?n.createElement(E.Provider,{value:o({},c,(r={},r[a]=i,r[C(a)]={hidden:s,label:l},r))},u):n.createElement(n.Fragment,null,u)}function A(e){var t=e.children,r=e.params,a=void 0===r?{}:r,i=e.query,s=void 0===i?{}:i,l=j()||{};return n.createElement(T,{name:"params",data:o({},l.params,a),label:"Page URL path params"},n.createElement(T,{name:"query",data:o({},l.query,s),label:"Page URL query params"},t))}function k(e){return(0,e.children)(j())}var q=globalThis;function D(e,t){q.__PlasmicFetcherRegistry.push({fetcher:e,meta:t})}q.__PlasmicFetcherRegistry=[];var F=n.createContext(void 0);function G(e){var t=e.contextName,r=e.children,a=e.actions,o=n.useMemo((function(){return Object.fromEntries(Object.entries(a).map((function(e){return[t+"."+e[0],e[1]]})))}),[t,a]);return n.createElement(F.Provider,{value:o},r)}function L(){var e;return null!=(e=n.useContext(F))?e:{}}var M=globalThis;function V(e,t){M.__PlasmicComponentRegistry.some((function(r){return r.component===e&&r.meta.name===t.name}))||M.__PlasmicComponentRegistry.push({component:e,meta:t})}null==M.__PlasmicComponentRegistry&&(M.__PlasmicComponentRegistry=[]);var N=globalThis;function U(e,t){N.__PlasmicContextRegistry.some((function(r){return r.component===e&&r.meta.name===t.name}))||N.__PlasmicContextRegistry.push({component:e,meta:t})}null==N.__PlasmicContextRegistry&&(N.__PlasmicContextRegistry=[]);var H=globalThis;function I(e){H.__PlasmicTokenRegistry.push(e)}null==H.__PlasmicTokenRegistry&&(H.__PlasmicTokenRegistry=[]);var J,z,Q=globalThis;function W(e,t){Q.__PlasmicTraitRegistry.push({trait:e,meta:t})}function $(e,t){return B(e,t)}null==Q.__PlasmicTraitRegistry&&(Q.__PlasmicTraitRegistry=[]);var B=function(e,t){return Array.isArray(t)?t.map((function(t){return B(e,t)})):t&&r.isValidElement(t)&&"string"!=typeof t?r.cloneElement(t):t},K=globalThis,X=null!=(J=null==K||null==(z=K.__Sub)?void 0:z.setRepeatedElementFn)?J:function(e){B=e},Y={__proto__:null,PlasmicCanvasContext:v,PlasmicCanvasHost:b,usePlasmicCanvasContext:h,unstable_registerFetcher:D,registerComponent:V,registerGlobalContext:U,registerToken:I,registerTrait:W,repeatedElement:$,DataContext:E,mkMetaName:C,mkMetaValue:R,applySelector:w,useSelector:S,useSelectors:O,useDataEnv:j,DataProvider:T,PageParamsProvider:A,DataCtxReader:k,GlobalActionsContext:F,GlobalActionsProvider:G,useGlobalActions:L},Z=globalThis;null==Z.__Sub&&(Z.__Sub=o({React:r,ReactDOM:a,PlasmicQuery:t,hostModule:Y,hostVersion:"1.0.112",hostUtils:{setPlasmicRootNode:f,registerRenderErrorListener:_,setRepeatedElementFn:X},setPlasmicRootNode:f,registerRenderErrorListener:_,setRepeatedElementFn:X},Y)),exports.DataContext=E,exports.DataCtxReader=k,exports.DataProvider=T,exports.GlobalActionsContext=F,exports.GlobalActionsProvider=G,exports.PageParamsProvider=A,exports.PlasmicCanvasContext=v,exports.PlasmicCanvasHost=b,exports.applySelector=w,exports.mkMetaName=C,exports.mkMetaValue=R,exports.registerComponent=V,exports.registerGlobalContext=U,exports.registerToken=I,exports.registerTrait=W,exports.repeatedElement=$,exports.unstable_registerFetcher=D,exports.useDataEnv=j,exports.useGlobalActions=L,exports.usePlasmicCanvasContext=h,exports.useSelector=S,exports.useSelectors=O;
 //# sourceMappingURL=host.cjs.production.min.js.map

dist/host.esm.js

@@ -527,3 +527,3 @@ 'use client';import * as PlasmicQuery from '@plasmicapp/query';
 
-var hostVersion = "1.0.111";
+var hostVersion = "1.0.112";
 
@@ -530,0 +530,0 @@ var root$7 = globalThis;

dist/registerComponent.d.ts

@@ -71,2 +71,41 @@ /// <reference types="react" />
 } | {
+    type: "class";
+    /**
+     * Additional css selectors that can change how this style should look.
+     * Some examples:
+     *
+     * * `:hover` -- on hover
+     * * `[data-something="blah"] -- when the element with this class has
+     *   an html attribute "data-something=blah"
+     * * :component[data-something="blah"] :self -- when the root of the
+     *   component has an html attribute "data-something=blah". Note that
+     *   the non-standard `:component` selector is used to select the
+     *   component root, and the non-standard `:self` selector is used
+     *   to select the element that this class is attached to.
+     */
+    selectors?: {
+        /**
+         * A css selector, like `:hover` or `[data-something="blah"]`.
+         */
+        selector: string;
+        /**
+         * An optional human-friendly label for the selector, so the studio user
+         * knows what this selector means.
+         */
+        label?: string;
+    }[];
+    /**
+     * If specified, then only shows these style sections for styling this class
+     */
+    styleSections?: StyleSection[];
+} | {
+    type: "themeResetClass";
+    /**
+     * Normally, theme reset class will only target Plasmic-generated tags
+     * with the default tag styles. If you also want to target non-Plasmic-generated
+     * tags (say, rendered by your code components, or fetched as an HTML blob
+     * from somewhere), then specify `true` here.
+     */
+    targetAllTags?: boolean;
+} | {
     type: "cardPicker";
@@ -300,2 +339,3 @@ modalTitle?: React.ReactNode | ContextDependentConfig<P, React.ReactNode>;
 }
+export declare type StyleSection = "visibility" | "typography" | "sizing" | "spacing" | "background" | "transform" | "transitions" | "layout" | "overflow" | "border" | "shadows" | "effects";
 export interface ComponentMeta<P> {
@@ -342,5 +382,7 @@ /**
      * Whether style sections should be shown in Studio. For styles to work, the
-     * component must accept a `className` prop. If unset, defaults to true.
+     * component must accept a `className` prop. If unset, defaults to all styles.
+     * Set to `false` if this component cannot be styled (for example, if it doesn't
+     * render any DOM elements).
      */
-    styleSections?: boolean;
+    styleSections?: StyleSection[] | boolean;
     /**
@@ -347,0 +389,0 @@ * Whether the element can be repeated in Studio. If unset, defaults to true.

dist/version.d.ts

@@ -1,1 +0,1 @@
-export declare const hostVersion = "1.0.111";
+export declare const hostVersion = "1.0.112";

package.json

 {
   "name": "@plasmicapp/host",
-  "version": "1.0.111",
+  "version": "1.0.112",
   "description": "plasmic library for app hosting",
@@ -79,3 +79,3 @@ "main": "dist/index.js",
   },
-  "gitHead": "c639a88566f317fdbdafb152b698b955262c5c44"
+  "gitHead": "67e119ae46c42a2b4440cd98b4d168d0b69ca229"
 }

registerComponent/dist/registerComponent.d.ts

@@ -71,2 +71,41 @@ /// <reference types="react" />
 } | {
+    type: "class";
+    /**
+     * Additional css selectors that can change how this style should look.
+     * Some examples:
+     *
+     * * `:hover` -- on hover
+     * * `[data-something="blah"] -- when the element with this class has
+     *   an html attribute "data-something=blah"
+     * * :component[data-something="blah"] :self -- when the root of the
+     *   component has an html attribute "data-something=blah". Note that
+     *   the non-standard `:component` selector is used to select the
+     *   component root, and the non-standard `:self` selector is used
+     *   to select the element that this class is attached to.
+     */
+    selectors?: {
+        /**
+         * A css selector, like `:hover` or `[data-something="blah"]`.
+         */
+        selector: string;
+        /**
+         * An optional human-friendly label for the selector, so the studio user
+         * knows what this selector means.
+         */
+        label?: string;
+    }[];
+    /**
+     * If specified, then only shows these style sections for styling this class
+     */
+    styleSections?: StyleSection[];
+} | {
+    type: "themeResetClass";
+    /**
+     * Normally, theme reset class will only target Plasmic-generated tags
+     * with the default tag styles. If you also want to target non-Plasmic-generated
+     * tags (say, rendered by your code components, or fetched as an HTML blob
+     * from somewhere), then specify `true` here.
+     */
+    targetAllTags?: boolean;
+} | {
     type: "cardPicker";
@@ -300,2 +339,3 @@ modalTitle?: React.ReactNode | ContextDependentConfig<P, React.ReactNode>;
 }
+export declare type StyleSection = "visibility" | "typography" | "sizing" | "spacing" | "background" | "transform" | "transitions" | "layout" | "overflow" | "border" | "shadows" | "effects";
 export interface ComponentMeta<P> {
@@ -342,5 +382,7 @@ /**
      * Whether style sections should be shown in Studio. For styles to work, the
-     * component must accept a `className` prop. If unset, defaults to true.
+     * component must accept a `className` prop. If unset, defaults to all styles.
+     * Set to `false` if this component cannot be styled (for example, if it doesn't
+     * render any DOM elements).
      */
-    styleSections?: boolean;
+    styleSections?: StyleSection[] | boolean;
     /**
@@ -347,0 +389,0 @@ * Whether the element can be repeated in Studio. If unset, defaults to true.

registerGlobalContext/dist/registerComponent.d.ts

@@ -71,2 +71,41 @@ /// <reference types="react" />
 } | {
+    type: "class";
+    /**
+     * Additional css selectors that can change how this style should look.
+     * Some examples:
+     *
+     * * `:hover` -- on hover
+     * * `[data-something="blah"] -- when the element with this class has
+     *   an html attribute "data-something=blah"
+     * * :component[data-something="blah"] :self -- when the root of the
+     *   component has an html attribute "data-something=blah". Note that
+     *   the non-standard `:component` selector is used to select the
+     *   component root, and the non-standard `:self` selector is used
+     *   to select the element that this class is attached to.
+     */
+    selectors?: {
+        /**
+         * A css selector, like `:hover` or `[data-something="blah"]`.
+         */
+        selector: string;
+        /**
+         * An optional human-friendly label for the selector, so the studio user
+         * knows what this selector means.
+         */
+        label?: string;
+    }[];
+    /**
+     * If specified, then only shows these style sections for styling this class
+     */
+    styleSections?: StyleSection[];
+} | {
+    type: "themeResetClass";
+    /**
+     * Normally, theme reset class will only target Plasmic-generated tags
+     * with the default tag styles. If you also want to target non-Plasmic-generated
+     * tags (say, rendered by your code components, or fetched as an HTML blob
+     * from somewhere), then specify `true` here.
+     */
+    targetAllTags?: boolean;
+} | {
     type: "cardPicker";
@@ -300,2 +339,3 @@ modalTitle?: React.ReactNode | ContextDependentConfig<P, React.ReactNode>;
 }
+export declare type StyleSection = "visibility" | "typography" | "sizing" | "spacing" | "background" | "transform" | "transitions" | "layout" | "overflow" | "border" | "shadows" | "effects";
 export interface ComponentMeta<P> {
@@ -342,5 +382,7 @@ /**
      * Whether style sections should be shown in Studio. For styles to work, the
-     * component must accept a `className` prop. If unset, defaults to true.
+     * component must accept a `className` prop. If unset, defaults to all styles.
+     * Set to `false` if this component cannot be styled (for example, if it doesn't
+     * render any DOM elements).
      */
-    styleSections?: boolean;
+    styleSections?: StyleSection[] | boolean;
     /**
@@ -347,0 +389,0 @@ * Whether the element can be repeated in Studio. If unset, defaults to true.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

355653

increased by4.79%

Lines of code

3379

increased by3.87%

No dependency changes