@teambit/variants 0.0.1336 → 0.0.1338

package/artifacts/__bit_junit.xml

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <testsuites tests="0" failures="0" errors="0" skipped="0">
-  <testsuite name="teambit.workspace/variants@0.0.1336" tests="0" failures="0" errors="0" skipped="0"/>
+  <testsuite name="teambit.workspace/variants@0.0.1338" tests="0" failures="0" errors="0" skipped="0"/>
 </testsuites>

package/artifacts/preview/teambit_workspace_variants-preview.js

@@ -1 +1 @@
-!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?exports["teambit.workspace/variants-preview"]=n():e["teambit.workspace/variants-preview"]=n()}(self,(()=>(()=>{"use strict";var e={177:function(e,n,t){var a=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(n,"__esModule",{value:!0}),n.default=n.Variants=void 0;var o=t(427);Object.defineProperty(n,"Variants",{enumerable:!0,get:function(){return a(o).default}}),Object.defineProperty(n,"default",{enumerable:!0,get:function(){return a(o).default}})},427:(e,n,t)=>{var a={id:"teambit.workspace/content/variants@1.95.9",homepage:"https://bit.dev/teambit/workspace/content/variants",exported:!0};Object.defineProperty(n,"__esModule",{value:!0}),n.default=d,s(t(594));var o=t(16),r=t(682),i=["components"];function s(e){return e&&e.__esModule?e:{default:e}}function l(){return l=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var a in t)Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a])}return e},l.apply(this,arguments)}function c(e,n){if(null==e)return{};var t,a,o=p(e,n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a<r.length;a++)t=r[a],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}function p(e,n){if(null==e)return{};var t,a,o={},r=Object.keys(e);for(a=0;a<r.length;a++)t=r[a],n.indexOf(t)>=0||(o[t]=e[t]);return o}s.__bit_component=a,l.__bit_component=a,c.__bit_component=a,p.__bit_component=a;var m={},u="wrapper";function d(e){var n=e.components,t=c(e,i);return(0,o.mdx)(u,l({},m,t,{components:n,mdxType:"MDXLayout"}),(0,o.mdx)(r.MDXScopeProvider,{components:{},mdxType:"MDXScopeProvider"},(0,o.mdx)("h1",null,"Variants"),(0,o.mdx)("p",null,"'Variants' enables you to configure groups of components with ",(0,o.mdx)("a",{parentName:"p",href:"/components/component-config"},"Component configuration"),".\nComponents are selected using their common directory path or namespace, and applied, collectively, with configurations (i.e, pairs of Aspects and their corresponding configs)."),(0,o.mdx)("p",null,"Since each component can be selected more than once using different selectors, Variants looks for all available configurations and ",(0,o.mdx)("a",{parentName:"p",href:"#merging-configurations"},"merges them together"),"."),(0,o.mdx)("p",null,"Use Variants as an efficient alternative to manually configuring each component's ",(0,o.mdx)("inlineCode",{parentName:"p"},"component.json"),"."),(0,o.mdx)("h2",null,"Variants Selector Examples"),(0,o.mdx)("h3",null,"Configure components in a directory"),(0,o.mdx)("p",null,"To select a group of components using a directory path, use the relative path to the components' parent directory from the workspace root. In the following example, all components under the ",(0,o.mdx)("inlineCode",{parentName:"p"},"components/utility-functions")," directory\n(and any sub-directories) will be included in this set:"),(0,o.mdx)("p",null,"This examples configures all components contained in the ",(0,o.mdx)("inlineCode",{parentName:"p"},"design")," directory with the ",(0,o.mdx)("a",{parentName:"p",href:"/react"},"React env"),"."),(0,o.mdx)("pre",null,(0,o.mdx)("code",{parentName:"pre",className:"language-json"},'"teambit.workspace/variants": {\n    "design": {\n        "teambit.react/react": {}\n    },\n}\n')),(0,o.mdx)("h3",null,"Configure components using Namespaces"),(0,o.mdx)("p",null,"This option is recommended as it decouples your components' configurations from the workspace's file structure. It handles components using fundamental definitions that pertain to function and purpose, via their namespace.\nThe namespace selector behaves like a glob pattern, with the component name (including its namespace) being the equivalent of a file path being matched against the pattern.\nSpecifically, this means that namespace selectors support the location-specific ",(0,o.mdx)("inlineCode",{parentName:"p"},"*")," matcher, and the 'anywhere' ",(0,o.mdx)("inlineCode",{parentName:"p"},"**")," matcher for matching the component name."),(0,o.mdx)("p",null,"In the following example, any component under the ",(0,o.mdx)("inlineCode",{parentName:"p"},"utility-functions")," namespace (and it's sub-namespaces) will be included in this rule set:"),(0,o.mdx)("pre",null,(0,o.mdx)("code",{parentName:"pre",className:"language-json"},'"teambit.workspace/variants": {\n    "{utility-functions/**}": { // Match any component name starts with utility-functions\n        "teambit.harmony/node": {}\n    },\n}\n')),(0,o.mdx)("p",null,"In the following example however, only components ",(0,o.mdx)("strong",{parentName:"p"},"directly")," under the ",(0,o.mdx)("inlineCode",{parentName:"p"},"utility-functions")," namespace will be included in this rule set:"),(0,o.mdx)("pre",null,(0,o.mdx)("code",{parentName:"pre",className:"language-json"},'"teambit.workspace/variants": {\n    "{utility-functions/*}": { // Match utility-functions/sort-array but not utility-functions/string/reverse\n        "teambit.harmony/node": {}\n    },\n}\n')),(0,o.mdx)("h3",null,"Grouping selectors"),(0,o.mdx)("p",null,"You can add several sets for the same variant configuration by grouping selectors together:"),(0,o.mdx)("pre",null,(0,o.mdx)("code",{parentName:"pre",className:"language-json",metastring:'title="Multiple directory paths"',title:'"Multiple',directory:!0,'paths"':!0},'"teambit.workspace/variants": {\n    "components/utils, components/react-ui": {\n        "teambit.harmony/node": {}\n    },\n}\n')),(0,o.mdx)("pre",null,(0,o.mdx)("code",{parentName:"pre",className:"language-json",metastring:'title="Multiple namespaces"',title:'"Multiple','namespaces"':!0},'"teambit.workspace/variants": {\n    "{utility-functions/**}, {react-ui/**}": {\n        "teambit.harmony/node": {}\n    },\n}\n')),(0,o.mdx)("pre",null,(0,o.mdx)("code",{parentName:"pre",className:"language-json",metastring:'title="Paths and namespaces"',title:'"Paths',and:!0,'namespaces"':!0},'"teambit.workspace/variants": {\n    "{utility-functions/**}, {react-ui/**}, components/utils, components/react-ui": {\n        "teambit.harmony/node": {}\n    },\n}\n')),(0,o.mdx)("h3",null,"Exclude directories/components from a rule"),(0,o.mdx)("p",null,"Using the ",(0,o.mdx)("inlineCode",{parentName:"p"},"!")," deselector you can exclude a set of components from a selector.\nThe ",(0,o.mdx)("inlineCode",{parentName:"p"},"!")," deselector works both for directories and namespaces, for example:"),(0,o.mdx)("h4",null,"Exclude a sub-directory directory from a rule"),(0,o.mdx)("p",null,"For example, apply the ",(0,o.mdx)("inlineCode",{parentName:"p"},"teambit.harmony/node")," environment on the ",(0,o.mdx)("inlineCode",{parentName:"p"},"utility-functions")," set, but exclude the ",(0,o.mdx)("inlineCode",{parentName:"p"},"utility-functions/react-utils")," folder from that set:"),(0,o.mdx)("pre",null,(0,o.mdx)("code",{parentName:"pre",className:"language-json",metastring:'title="workspace.json',title:'"workspace.json'},'"teambit.workspace/variants": {\n    "components/utility-functions, !components/utility-functions/react-utils": {\n        "teambit.harmony/node": {}\n    },\n}\n')),(0,o.mdx)("h4",null,"Exclude namespaces from a rule"),(0,o.mdx)("p",null,"The following example applies the ",(0,o.mdx)("inlineCode",{parentName:"p"},"teambit.harmony/node")," environment on every component under the ",(0,o.mdx)("inlineCode",{parentName:"p"},"utils")," namespace, but excludes the ",(0,o.mdx)("inlineCode",{parentName:"p"},"utils/react")," namespace and its children from this set:"),(0,o.mdx)("pre",null,(0,o.mdx)("code",{parentName:"pre",className:"language-json",metastring:'title="workspace.json',title:'"workspace.json'},'"teambit.workspace/variants": {\n    "{utils/**}, !{utils/react/**}": {\n        "teambit.harmony/node": {}\n    },\n}\n')),(0,o.mdx)("h3",null,"Special Variants"),(0,o.mdx)("h4",null,"The Wildcard (","*",") variant"),(0,o.mdx)("p",null,"To select all components in your workspace use the wildcard variant ",(0,o.mdx)("inlineCode",{parentName:"p"},"*"),". This is useful when you want to apply very general configurations, especially default or backup configurations,\non all components. Using this selector can produce unexpected consequences if the rules aren't general enough, so we recommend using this selector sparingly!\nFor example:"),(0,o.mdx)("pre",null,(0,o.mdx)("code",{parentName:"pre",className:"language-json"},'"teambit.workspace/variants": {\n    "*": {\n        "teambit.harmony/node": {}\n    },\n}\n')),(0,o.mdx)("h2",null,"Merging Configurations"),(0,o.mdx)("p",null,"The merging process is similar to the way CSS rules are handled. Rules are cascaded from the selected group to all its members. When the same component is applied with conflicting configs (using multiple selectors),\nthe most specific variant (selector) overrides the more general ones."),(0,o.mdx)("p",null,"In the following example, ",(0,o.mdx)("inlineCode",{parentName:"p"},"my-org.my-scope/ui/inputs/button")," is selected using two different selectors (",(0,o.mdx)("inlineCode",{parentName:"p"},"{ui\\**}")," and ",(0,o.mdx)("inlineCode",{parentName:"p"},"{*\\inputs\\**}"),"), and configured with conflicting configurations."),(0,o.mdx)("pre",null,(0,o.mdx)("code",{parentName:"pre",className:"language-json"},'{\n  "teambit.workspace/variants": {\n    "{ui/**}": {\n      "teambit.preview/preview": {\n        "disabled": true\n      }\n    },\n    "{*/inputs/**}": {\n      "teambit.preview/preview": {\n        "disabled": false\n      }\n    }\n  }\n}\n')),(0,o.mdx)("p",null,"The more specific selector ",(0,o.mdx)("inlineCode",{parentName:"p"},'"{*/inputs/*}"')," will override the more general one ",(0,o.mdx)("inlineCode",{parentName:"p"},'"{ui/**}"'),". This will result in configuring ",(0,o.mdx)("inlineCode",{parentName:"p"},"my-org.my-scope/ui/inputs/button")," with ",(0,o.mdx)("inlineCode",{parentName:"p"},'"teambit.preview/preview": {"disabled": false}'),"."),(0,o.mdx)("h2",null,"Variants Flags"),(0,o.mdx)("h3",null,"Propagate"),(0,o.mdx)("p",null,"When using selectors which can propagate down to sub-sets, such as with directory selectors (where all sub-directories are included) or {namespace/","*","*","} type selectors,\nyou can prevent this propagation for specific set of inheritors, by setting set the ",(0,o.mdx)("inlineCode",{parentName:"p"},"propogate")," value of an inheriting group of components to ",(0,o.mdx)("inlineCode",{parentName:"p"},"false"),".\nOnce bit sees ",(0,o.mdx)("inlineCode",{parentName:"p"},'"propagate": false')," it uses only the configuration for this set and does not inherit."),(0,o.mdx)("pre",null,(0,o.mdx)("code",{parentName:"pre",className:"language-json",metastring:'title="workspace.json',title:'"workspace.json'},'"teambit.workspace/variants": {\n  "components/react": {\n    "my-aspect2": {\n      "aspect2-react-key": "aspect2-react-val"\n    }\n  },\n  "components/react/ui": {\n    "propagate": false, // take this config, and don\'t propagate parent configs down to here\n    "my-aspect1": {\n      "aspect1-react-ui-key": "aspect1-react-ui-val"\n    }\n  }\n}\n')),(0,o.mdx)("pre",null,(0,o.mdx)("code",{parentName:"pre",className:"language-json",metastring:'title="components/react/ui/button\'s calculated configuration"',title:"\"components/react/ui/button's",calculated:!0,'configuration"':!0},'{\n  "my-aspect1": {\n    "aspect1-react-ui-key": "aspect1-react-ui-val"\n  }\n}\n')),(0,o.mdx)("h2",null,"Removing aspects"),(0,o.mdx)("blockquote",null,(0,o.mdx)("p",{parentName:"blockquote"},"Note: Once a component has been tagged, any aspect configured for that component ",(0,o.mdx)("strong",{parentName:"p"},"can only")," be removed from the component via the following ",(0,o.mdx)("inlineCode",{parentName:"p"},"remove")," method. (if you haven't exported yet then ",(0,o.mdx)("inlineCode",{parentName:"p"},"untag")," would reset the effect of the tag)")),(0,o.mdx)("p",null,"There are numerous scenarios where you would not want a specific aspect to be defined on a subgroup but you don't want to exclude the sub-group from upstream rules, or use the ",(0,o.mdx)("inlineCode",{parentName:"p"},"propagate: false")," flag, since you want to receive the\nother configurations from the parent group rule/s."),(0,o.mdx)("p",null,"In that case, removing a specific aspect can be achieved using ",(0,o.mdx)("inlineCode",{parentName:"p"},'"-"')," as the value for an aspect's configuration. This will remove this aspect from the current component set."),(0,o.mdx)("p",null,"For instance, the following will remove ",(0,o.mdx)("inlineCode",{parentName:"p"},"my-aspect2")," from components in the ",(0,o.mdx)("inlineCode",{parentName:"p"},"components/react/ui")," set, while still inheriting other configs such as the ",(0,o.mdx)("inlineCode",{parentName:"p"},"my-aspect3")," aspect."),(0,o.mdx)("pre",null,(0,o.mdx)("code",{parentName:"pre",className:"language-json",metastring:'title="workspace.json',title:'"workspace.json'},'"teambit.workspace/variants": {\n  "components/react": {\n    "my-aspect2": {\n      "aspect2-react-key": "aspect2-react-val"\n    },\n    "my-aspect3": {\n      "aspect3-react-key": "aspect3-react-val"\n    }\n  },\n  "components/react/ui": {\n    "my-aspect1": {\n      "aspect1-react-ui-key": "aspect1-react-ui-val"\n    },\n    "my-aspect2": "-" // Remove my-aspect2 from this set\'s configuration\n  }\n}\n')),(0,o.mdx)("pre",null,(0,o.mdx)("code",{parentName:"pre",className:"language-json",metastring:'title="components/react/ui/button\'s calculated configuration"',title:"\"components/react/ui/button's",calculated:!0,'configuration"':!0},'{\n  "my-aspect1": {\n    "aspect1-react-ui-key": "aspect1-react-ui-val"\n  },\n  "my-aspect3": {\n    "aspect3-react-key": "aspect3-react-val"\n  }\n}\n'))))}d.__bit_component=a,d.isMDXComponent=!0},136:(e,n,t)=>{var a={id:"teambit.workspace/variants@0.0.1336",homepage:"https://bit.cloud/teambit/workspace/variants",exported:!0};function o(){const e=r(t(594));return o=function(){return e},e}function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0}),n.Logo=void 0,o.__bit_component=a,r.__bit_component=a;const i=()=>o().default.createElement("div",{style:{height:"100%",display:"flex",justifyContent:"center"}},o().default.createElement("img",{style:{width:70},src:"https://static.bit.dev/extensions-icons/variants.svg"}));i.__bit_component=a,n.Logo=i},16:e=>{e.exports=MdxJsReact},594:e=>{e.exports=React},682:e=>{e.exports=TeambitMdxUiMdxScopeContext}},n={};function t(a){var o=n[a];if(void 0!==o)return o.exports;var r=n[a]={exports:{}};return e[a].call(r.exports,r,r.exports,t),r.exports}t.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return t.d(n,{a:n}),n},t.d=(e,n)=>{for(var a in n)t.o(n,a)&&!t.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:n[a]})},t.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),t.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a={};t.r(a),t.d(a,{compositions:()=>h,compositions_metadata:()=>x,overview:()=>g});var o={};t.r(o),t.d(o,{default:()=>f});var r=t(136),i=(t(594),t(16)),s=t(682),l=t(177),c=t.n(l),p=["components"];function m(){return m=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var a in t)({}).hasOwnProperty.call(t,a)&&(e[a]=t[a])}return e},m.apply(null,arguments)}var u={},d="wrapper";function f(e){var n=e.components,t=function(e,n){if(null==e)return{};var t,a,o=function(e,n){if(null==e)return{};var t={};for(var a in e)if({}.hasOwnProperty.call(e,a)){if(n.includes(a))continue;t[a]=e[a]}return t}(e,n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a<r.length;a++)t=r[a],n.includes(t)||{}.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(e,p);return(0,i.mdx)(d,m({},u,t,{components:n,mdxType:"MDXLayout"}),(0,i.mdx)(s.MDXScopeProvider,{components:{Variants:c()},mdxType:"MDXScopeProvider"},(0,i.mdx)(c(),{mdxType:"Variants"})))}f.isMDXComponent=!0;const h=[r],g=[o],x={compositions:[{displayName:"Logo",identifier:"Logo"}]};return a})()));
+!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?exports["teambit.workspace/variants-preview"]=n():e["teambit.workspace/variants-preview"]=n()}(self,(()=>(()=>{"use strict";var e={88558:function(e,n,t){var a=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(n,"__esModule",{value:!0}),n.default=n.Variants=void 0;var o=t(3427);Object.defineProperty(n,"Variants",{enumerable:!0,get:function(){return a(o).default}}),Object.defineProperty(n,"default",{enumerable:!0,get:function(){return a(o).default}})},3427:(e,n,t)=>{var a={id:"teambit.workspace/content/variants@1.95.9",homepage:"https://bit.dev/teambit/workspace/content/variants",exported:!0};Object.defineProperty(n,"__esModule",{value:!0}),n.default=d,s(t(41594));var o=t(5016),r=t(65682),i=["components"];function s(e){return e&&e.__esModule?e:{default:e}}function l(){return l=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var a in t)Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a])}return e},l.apply(this,arguments)}function c(e,n){if(null==e)return{};var t,a,o=p(e,n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a<r.length;a++)t=r[a],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}function p(e,n){if(null==e)return{};var t,a,o={},r=Object.keys(e);for(a=0;a<r.length;a++)t=r[a],n.indexOf(t)>=0||(o[t]=e[t]);return o}s.__bit_component=a,l.__bit_component=a,c.__bit_component=a,p.__bit_component=a;var m={},u="wrapper";function d(e){var n=e.components,t=c(e,i);return(0,o.mdx)(u,l({},m,t,{components:n,mdxType:"MDXLayout"}),(0,o.mdx)(r.MDXScopeProvider,{components:{},mdxType:"MDXScopeProvider"},(0,o.mdx)("h1",null,"Variants"),(0,o.mdx)("p",null,"'Variants' enables you to configure groups of components with ",(0,o.mdx)("a",{parentName:"p",href:"/components/component-config"},"Component configuration"),".\nComponents are selected using their common directory path or namespace, and applied, collectively, with configurations (i.e, pairs of Aspects and their corresponding configs)."),(0,o.mdx)("p",null,"Since each component can be selected more than once using different selectors, Variants looks for all available configurations and ",(0,o.mdx)("a",{parentName:"p",href:"#merging-configurations"},"merges them together"),"."),(0,o.mdx)("p",null,"Use Variants as an efficient alternative to manually configuring each component's ",(0,o.mdx)("inlineCode",{parentName:"p"},"component.json"),"."),(0,o.mdx)("h2",null,"Variants Selector Examples"),(0,o.mdx)("h3",null,"Configure components in a directory"),(0,o.mdx)("p",null,"To select a group of components using a directory path, use the relative path to the components' parent directory from the workspace root. In the following example, all components under the ",(0,o.mdx)("inlineCode",{parentName:"p"},"components/utility-functions")," directory\n(and any sub-directories) will be included in this set:"),(0,o.mdx)("p",null,"This examples configures all components contained in the ",(0,o.mdx)("inlineCode",{parentName:"p"},"design")," directory with the ",(0,o.mdx)("a",{parentName:"p",href:"/react"},"React env"),"."),(0,o.mdx)("pre",null,(0,o.mdx)("code",{parentName:"pre",className:"language-json"},'"teambit.workspace/variants": {\n    "design": {\n        "teambit.react/react": {}\n    },\n}\n')),(0,o.mdx)("h3",null,"Configure components using Namespaces"),(0,o.mdx)("p",null,"This option is recommended as it decouples your components' configurations from the workspace's file structure. It handles components using fundamental definitions that pertain to function and purpose, via their namespace.\nThe namespace selector behaves like a glob pattern, with the component name (including its namespace) being the equivalent of a file path being matched against the pattern.\nSpecifically, this means that namespace selectors support the location-specific ",(0,o.mdx)("inlineCode",{parentName:"p"},"*")," matcher, and the 'anywhere' ",(0,o.mdx)("inlineCode",{parentName:"p"},"**")," matcher for matching the component name."),(0,o.mdx)("p",null,"In the following example, any component under the ",(0,o.mdx)("inlineCode",{parentName:"p"},"utility-functions")," namespace (and it's sub-namespaces) will be included in this rule set:"),(0,o.mdx)("pre",null,(0,o.mdx)("code",{parentName:"pre",className:"language-json"},'"teambit.workspace/variants": {\n    "{utility-functions/**}": { // Match any component name starts with utility-functions\n        "teambit.harmony/node": {}\n    },\n}\n')),(0,o.mdx)("p",null,"In the following example however, only components ",(0,o.mdx)("strong",{parentName:"p"},"directly")," under the ",(0,o.mdx)("inlineCode",{parentName:"p"},"utility-functions")," namespace will be included in this rule set:"),(0,o.mdx)("pre",null,(0,o.mdx)("code",{parentName:"pre",className:"language-json"},'"teambit.workspace/variants": {\n    "{utility-functions/*}": { // Match utility-functions/sort-array but not utility-functions/string/reverse\n        "teambit.harmony/node": {}\n    },\n}\n')),(0,o.mdx)("h3",null,"Grouping selectors"),(0,o.mdx)("p",null,"You can add several sets for the same variant configuration by grouping selectors together:"),(0,o.mdx)("pre",null,(0,o.mdx)("code",{parentName:"pre",className:"language-json",metastring:'title="Multiple directory paths"',title:'"Multiple',directory:!0,'paths"':!0},'"teambit.workspace/variants": {\n    "components/utils, components/react-ui": {\n        "teambit.harmony/node": {}\n    },\n}\n')),(0,o.mdx)("pre",null,(0,o.mdx)("code",{parentName:"pre",className:"language-json",metastring:'title="Multiple namespaces"',title:'"Multiple','namespaces"':!0},'"teambit.workspace/variants": {\n    "{utility-functions/**}, {react-ui/**}": {\n        "teambit.harmony/node": {}\n    },\n}\n')),(0,o.mdx)("pre",null,(0,o.mdx)("code",{parentName:"pre",className:"language-json",metastring:'title="Paths and namespaces"',title:'"Paths',and:!0,'namespaces"':!0},'"teambit.workspace/variants": {\n    "{utility-functions/**}, {react-ui/**}, components/utils, components/react-ui": {\n        "teambit.harmony/node": {}\n    },\n}\n')),(0,o.mdx)("h3",null,"Exclude directories/components from a rule"),(0,o.mdx)("p",null,"Using the ",(0,o.mdx)("inlineCode",{parentName:"p"},"!")," deselector you can exclude a set of components from a selector.\nThe ",(0,o.mdx)("inlineCode",{parentName:"p"},"!")," deselector works both for directories and namespaces, for example:"),(0,o.mdx)("h4",null,"Exclude a sub-directory directory from a rule"),(0,o.mdx)("p",null,"For example, apply the ",(0,o.mdx)("inlineCode",{parentName:"p"},"teambit.harmony/node")," environment on the ",(0,o.mdx)("inlineCode",{parentName:"p"},"utility-functions")," set, but exclude the ",(0,o.mdx)("inlineCode",{parentName:"p"},"utility-functions/react-utils")," folder from that set:"),(0,o.mdx)("pre",null,(0,o.mdx)("code",{parentName:"pre",className:"language-json",metastring:'title="workspace.json',title:'"workspace.json'},'"teambit.workspace/variants": {\n    "components/utility-functions, !components/utility-functions/react-utils": {\n        "teambit.harmony/node": {}\n    },\n}\n')),(0,o.mdx)("h4",null,"Exclude namespaces from a rule"),(0,o.mdx)("p",null,"The following example applies the ",(0,o.mdx)("inlineCode",{parentName:"p"},"teambit.harmony/node")," environment on every component under the ",(0,o.mdx)("inlineCode",{parentName:"p"},"utils")," namespace, but excludes the ",(0,o.mdx)("inlineCode",{parentName:"p"},"utils/react")," namespace and its children from this set:"),(0,o.mdx)("pre",null,(0,o.mdx)("code",{parentName:"pre",className:"language-json",metastring:'title="workspace.json',title:'"workspace.json'},'"teambit.workspace/variants": {\n    "{utils/**}, !{utils/react/**}": {\n        "teambit.harmony/node": {}\n    },\n}\n')),(0,o.mdx)("h3",null,"Special Variants"),(0,o.mdx)("h4",null,"The Wildcard (","*",") variant"),(0,o.mdx)("p",null,"To select all components in your workspace use the wildcard variant ",(0,o.mdx)("inlineCode",{parentName:"p"},"*"),". This is useful when you want to apply very general configurations, especially default or backup configurations,\non all components. Using this selector can produce unexpected consequences if the rules aren't general enough, so we recommend using this selector sparingly!\nFor example:"),(0,o.mdx)("pre",null,(0,o.mdx)("code",{parentName:"pre",className:"language-json"},'"teambit.workspace/variants": {\n    "*": {\n        "teambit.harmony/node": {}\n    },\n}\n')),(0,o.mdx)("h2",null,"Merging Configurations"),(0,o.mdx)("p",null,"The merging process is similar to the way CSS rules are handled. Rules are cascaded from the selected group to all its members. When the same component is applied with conflicting configs (using multiple selectors),\nthe most specific variant (selector) overrides the more general ones."),(0,o.mdx)("p",null,"In the following example, ",(0,o.mdx)("inlineCode",{parentName:"p"},"my-org.my-scope/ui/inputs/button")," is selected using two different selectors (",(0,o.mdx)("inlineCode",{parentName:"p"},"{ui\\**}")," and ",(0,o.mdx)("inlineCode",{parentName:"p"},"{*\\inputs\\**}"),"), and configured with conflicting configurations."),(0,o.mdx)("pre",null,(0,o.mdx)("code",{parentName:"pre",className:"language-json"},'{\n  "teambit.workspace/variants": {\n    "{ui/**}": {\n      "teambit.preview/preview": {\n        "disabled": true\n      }\n    },\n    "{*/inputs/**}": {\n      "teambit.preview/preview": {\n        "disabled": false\n      }\n    }\n  }\n}\n')),(0,o.mdx)("p",null,"The more specific selector ",(0,o.mdx)("inlineCode",{parentName:"p"},'"{*/inputs/*}"')," will override the more general one ",(0,o.mdx)("inlineCode",{parentName:"p"},'"{ui/**}"'),". This will result in configuring ",(0,o.mdx)("inlineCode",{parentName:"p"},"my-org.my-scope/ui/inputs/button")," with ",(0,o.mdx)("inlineCode",{parentName:"p"},'"teambit.preview/preview": {"disabled": false}'),"."),(0,o.mdx)("h2",null,"Variants Flags"),(0,o.mdx)("h3",null,"Propagate"),(0,o.mdx)("p",null,"When using selectors which can propagate down to sub-sets, such as with directory selectors (where all sub-directories are included) or {namespace/","*","*","} type selectors,\nyou can prevent this propagation for specific set of inheritors, by setting set the ",(0,o.mdx)("inlineCode",{parentName:"p"},"propogate")," value of an inheriting group of components to ",(0,o.mdx)("inlineCode",{parentName:"p"},"false"),".\nOnce bit sees ",(0,o.mdx)("inlineCode",{parentName:"p"},'"propagate": false')," it uses only the configuration for this set and does not inherit."),(0,o.mdx)("pre",null,(0,o.mdx)("code",{parentName:"pre",className:"language-json",metastring:'title="workspace.json',title:'"workspace.json'},'"teambit.workspace/variants": {\n  "components/react": {\n    "my-aspect2": {\n      "aspect2-react-key": "aspect2-react-val"\n    }\n  },\n  "components/react/ui": {\n    "propagate": false, // take this config, and don\'t propagate parent configs down to here\n    "my-aspect1": {\n      "aspect1-react-ui-key": "aspect1-react-ui-val"\n    }\n  }\n}\n')),(0,o.mdx)("pre",null,(0,o.mdx)("code",{parentName:"pre",className:"language-json",metastring:'title="components/react/ui/button\'s calculated configuration"',title:"\"components/react/ui/button's",calculated:!0,'configuration"':!0},'{\n  "my-aspect1": {\n    "aspect1-react-ui-key": "aspect1-react-ui-val"\n  }\n}\n')),(0,o.mdx)("h2",null,"Removing aspects"),(0,o.mdx)("blockquote",null,(0,o.mdx)("p",{parentName:"blockquote"},"Note: Once a component has been tagged, any aspect configured for that component ",(0,o.mdx)("strong",{parentName:"p"},"can only")," be removed from the component via the following ",(0,o.mdx)("inlineCode",{parentName:"p"},"remove")," method. (if you haven't exported yet then ",(0,o.mdx)("inlineCode",{parentName:"p"},"untag")," would reset the effect of the tag)")),(0,o.mdx)("p",null,"There are numerous scenarios where you would not want a specific aspect to be defined on a subgroup but you don't want to exclude the sub-group from upstream rules, or use the ",(0,o.mdx)("inlineCode",{parentName:"p"},"propagate: false")," flag, since you want to receive the\nother configurations from the parent group rule/s."),(0,o.mdx)("p",null,"In that case, removing a specific aspect can be achieved using ",(0,o.mdx)("inlineCode",{parentName:"p"},'"-"')," as the value for an aspect's configuration. This will remove this aspect from the current component set."),(0,o.mdx)("p",null,"For instance, the following will remove ",(0,o.mdx)("inlineCode",{parentName:"p"},"my-aspect2")," from components in the ",(0,o.mdx)("inlineCode",{parentName:"p"},"components/react/ui")," set, while still inheriting other configs such as the ",(0,o.mdx)("inlineCode",{parentName:"p"},"my-aspect3")," aspect."),(0,o.mdx)("pre",null,(0,o.mdx)("code",{parentName:"pre",className:"language-json",metastring:'title="workspace.json',title:'"workspace.json'},'"teambit.workspace/variants": {\n  "components/react": {\n    "my-aspect2": {\n      "aspect2-react-key": "aspect2-react-val"\n    },\n    "my-aspect3": {\n      "aspect3-react-key": "aspect3-react-val"\n    }\n  },\n  "components/react/ui": {\n    "my-aspect1": {\n      "aspect1-react-ui-key": "aspect1-react-ui-val"\n    },\n    "my-aspect2": "-" // Remove my-aspect2 from this set\'s configuration\n  }\n}\n')),(0,o.mdx)("pre",null,(0,o.mdx)("code",{parentName:"pre",className:"language-json",metastring:'title="components/react/ui/button\'s calculated configuration"',title:"\"components/react/ui/button's",calculated:!0,'configuration"':!0},'{\n  "my-aspect1": {\n    "aspect1-react-ui-key": "aspect1-react-ui-val"\n  },\n  "my-aspect3": {\n    "aspect3-react-key": "aspect3-react-val"\n  }\n}\n'))))}d.__bit_component=a,d.isMDXComponent=!0},71470:(e,n,t)=>{var a={id:"teambit.workspace/variants@0.0.1338",homepage:"https://bit.cloud/teambit/workspace/variants",exported:!0};function o(){const e=r(t(41594));return o=function(){return e},e}function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0}),n.Logo=void 0,o.__bit_component=a,r.__bit_component=a;const i=()=>o().default.createElement("div",{style:{height:"100%",display:"flex",justifyContent:"center"}},o().default.createElement("img",{style:{width:70},src:"https://static.bit.dev/extensions-icons/variants.svg"}));i.__bit_component=a,n.Logo=i},5016:e=>{e.exports=MdxJsReact},41594:e=>{e.exports=React},65682:e=>{e.exports=TeambitMdxUiMdxScopeContext}},n={};function t(a){var o=n[a];if(void 0!==o)return o.exports;var r=n[a]={exports:{}};return e[a].call(r.exports,r,r.exports,t),r.exports}t.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return t.d(n,{a:n}),n},t.d=(e,n)=>{for(var a in n)t.o(n,a)&&!t.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:n[a]})},t.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),t.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a={};t.r(a),t.d(a,{compositions:()=>h,compositions_metadata:()=>x,overview:()=>g});var o={};t.r(o),t.d(o,{default:()=>f});var r=t(71470),i=(t(41594),t(5016)),s=t(65682),l=t(88558),c=t.n(l),p=["components"];function m(){return m=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var a in t)({}).hasOwnProperty.call(t,a)&&(e[a]=t[a])}return e},m.apply(null,arguments)}var u={},d="wrapper";function f(e){var n=e.components,t=function(e,n){if(null==e)return{};var t,a,o=function(e,n){if(null==e)return{};var t={};for(var a in e)if({}.hasOwnProperty.call(e,a)){if(n.includes(a))continue;t[a]=e[a]}return t}(e,n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a<r.length;a++)t=r[a],n.includes(t)||{}.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(e,p);return(0,i.mdx)(d,m({},u,t,{components:n,mdxType:"MDXLayout"}),(0,i.mdx)(s.MDXScopeProvider,{components:{Variants:c()},mdxType:"MDXScopeProvider"},(0,i.mdx)(c(),{mdxType:"Variants"})))}f.isMDXComponent=!0;const h=[r],g=[o],x={compositions:[{displayName:"Logo",identifier:"Logo"}]};return a})()));

package/artifacts/schema.json

@@ -886,7 +886,7 @@
                   "componentId": {
                     "scope": "teambit.legacy",
                     "name": "extension-data",
-                    "version": "0.0.6"
+                    "version": "0.0.8"
                   }
                 },
                 "isOptional": false
@@ -1589,7 +1589,7 @@
             "componentId": {
               "scope": "teambit.legacy",
               "name": "extension-data",
-              "version": "0.0.6"
+              "version": "0.0.8"
             }
           },
           "modifiers": []
@@ -1647,7 +1647,7 @@
   "componentId": {
     "scope": "teambit.workspace",
     "name": "variants",
-    "version": "0.0.1336"
+    "version": "0.0.1338"
   },
   "taggedModuleExports": []
 }

package/dist/{preview-1733950992344.js → preview-1734260112091.js}

@@ -1,5 +1,5 @@
-import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad/teambit.workspace_variants@0.0.1336/dist/variants.composition.js';
-import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad/teambit.workspace_variants@0.0.1336/dist/variants.docs.mdx';
+import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad/teambit.workspace_variants@0.0.1338/dist/variants.composition.js';
+import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad/teambit.workspace_variants@0.0.1338/dist/variants.docs.mdx';
 
 export const compositions = [compositions_0];
 export const overview = [overview_0];

package/package.json

@@ -1,21 +1,21 @@
 {
   "name": "@teambit/variants",
-  "version": "0.0.1336",
+  "version": "0.0.1338",
   "homepage": "https://bit.cloud/teambit/workspace/variants",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.workspace",
     "name": "variants",
-    "version": "0.0.1336"
+    "version": "0.0.1338"
   },
   "dependencies": {
     "comment-json": "3.0.3",
     "lodash": "4.17.21",
     "@teambit/harmony": "0.4.6",
     "@teambit/legacy-bit-id": "1.1.1",
-    "@teambit/cli": "0.0.1069",
-    "@teambit/config": "0.0.1243",
-    "@teambit/legacy.extension-data": "0.0.6",
+    "@teambit/cli": "0.0.1071",
+    "@teambit/config": "0.0.1245",
+    "@teambit/legacy.extension-data": "0.0.8",
     "@teambit/toolbox.path.path": "0.0.5",
     "@teambit/workspace.modules.match-pattern": "0.0.506"
   },

package/dist/variants.provider.js

@@ -1,16 +0,0 @@
-// import { Variants, Patterns } from './variants.extension';
-// import { Config } from '../config';
-
-// export type VariantsDeps = [Config];
-
-// export async function provideVariants([hostConfig]: VariantsDeps, config: Patterns) {
-//   const variants = new Variants(config, hostConfig);
-//   // TODO: fix when config become maybe
-//   if (hostConfig.type) {
-//     hostConfig.registerGetVariantsConfig(variants.legacy.bind(variants));
-//   }
-//   return variants;
-// }
-"use strict";
-
-//# sourceMappingURL=variants.provider.js.map

package/dist/variants.provider.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sources":["variants.provider.ts"],"sourcesContent":["// import { Variants, Patterns } from './variants.extension';\n// import { Config } from '../config';\n\n// export type VariantsDeps = [Config];\n\n// export async function provideVariants([hostConfig]: VariantsDeps, config: Patterns) {\n//   const variants = new Variants(config, hostConfig);\n//   // TODO: fix when config become maybe\n//   if (hostConfig.type) {\n//     hostConfig.registerGetVariantsConfig(variants.legacy.bind(variants));\n//   }\n//   return variants;\n// }\n"],"mappings":"AAAA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA","ignoreList":[]}