@teambit/aspect 1.0.499 → 1.0.501

package/artifacts/preview/teambit_harmony_aspect-preview.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports["teambit.harmony/aspect-preview"]=t():e["teambit.harmony/aspect-preview"]=t()}(self,(()=>(()=>{"use strict";var e={37774:(e,t,o)=>{var n={id:"teambit.harmony/aspect@1.0.499",homepage:"https://bit.cloud/teambit/harmony/aspect",exported:!0};function r(){const e=a(o(41594));return r=function(){return e},e}function a(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.Logo=void 0,r.__bit_component=n,a.__bit_component=n;const i=()=>r().default.createElement("div",{style:{height:"100%",display:"flex",justifyContent:"center"}},r().default.createElement("img",{style:{width:70},src:"https://static.bit.dev/extensions-icons/aspect.svg"}));i.__bit_component=n,t.Logo=i},41594:e=>{e.exports=React}},t={};function o(n){var r=t[n];if(void 0!==r)return r.exports;var a=t[n]={exports:{}};return e[n](a,a.exports,o),a.exports}o.d=(e,t)=>{for(var n in t)o.o(t,n)&&!o.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};o.r(n),o.d(n,{compositions:()=>m,compositions_metadata:()=>h,overview:()=>f});var r={};o.r(r),o.d(r,{default:()=>u});var a=o(37774);o(41594);const i=MdxJsReact,s=TeambitMdxUiMdxScopeContext;var p=["components"];function c(){return c=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var n in o)({}).hasOwnProperty.call(o,n)&&(e[n]=o[n])}return e},c.apply(null,arguments)}var l={},d="wrapper";function u(e){var t=e.components,o=function(e,t){if(null==e)return{};var o,n,r=function(e,t){if(null==e)return{};var o={};for(var n in e)if({}.hasOwnProperty.call(e,n)){if(t.includes(n))continue;o[n]=e[n]}return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)o=a[n],t.includes(o)||{}.propertyIsEnumerable.call(e,o)&&(r[o]=e[o])}return r}(e,p);return(0,i.mdx)(d,c({},l,o,{components:t,mdxType:"MDXLayout"}),(0,i.mdx)(s.MDXScopeProvider,{components:{},mdxType:"MDXScopeProvider"},(0,i.mdx)("h2",null,"Overview"),(0,i.mdx)("p",null,"Aspects can be configured on a component is various ways, some more general and some more specific. Once a component is loaded, Bit calculates all the sources and comes up with the final list of aspects. Each aspect has its config and data.\nConfig is what the user entered, Data is a result of the aspect process."),(0,i.mdx)("h2",null,"Debugging aspects"),(0,i.mdx)("p",null,"To help understanding why a component has these specific aspects, ",(0,i.mdx)("inlineCode",{parentName:"p"},"bit aspect get --debug")," shows each one of the sources, from the more specific one to the general one. At the end, it shows the merged result of all sources.\nThe various sources are as follows:"),(0,i.mdx)("pre",null,(0,i.mdx)("code",{parentName:"pre"},"'BitmapFile'\n'Model'\n'WorkspaceVariants'\n'ComponentJsonFile'\n")),(0,i.mdx)("p",null,"Since the list of all the config+data can be very long and hard to follow, the flag ",(0,i.mdx)("inlineCode",{parentName:"p"},"--json")," is very helpful.\nThis with help of ",(0,i.mdx)("a",{parentName:"p",href:"https://github.com/antonmedv/fx"},"fx"),", it's easy to extract the data needed."),(0,i.mdx)("p",null,"If for example, we're interested in one source only, we can run the following:"),(0,i.mdx)("pre",null,(0,i.mdx)("code",{parentName:"pre"},"bit aspect get ui/text --debug --json | fx .BitmapFile\n")),(0,i.mdx)("p",null,"It's possible to run any arbitrary javascript code with fx, so for example, if you want to debug just one specific aspect, and see its config/data per each one of the source, you can do something like this:"),(0,i.mdx)("pre",null,(0,i.mdx)("code",{parentName:"pre"},"bit aspect get ui/text --debug --json | fx 'Object.keys(this).map(origin => ({ origin, value: this[origin].extensions[\"teambit.pkg/pkg\"] }))'\n")),(0,i.mdx)("p",null,"Another data shown with the ",(0,i.mdx)("inlineCode",{parentName:"p"},"--debug")," flag is the rules in the workspace.jsonc#variants applied to this component. It shows the list of these rules sorted with the data about the specifity.")))}u.isMDXComponent=!0;const m=[a],f=[r],h={compositions:[{displayName:"Logo",identifier:"Logo"}]};return n})()));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports["teambit.harmony/aspect-preview"]=t():e["teambit.harmony/aspect-preview"]=t()}(self,(()=>(()=>{"use strict";var e={6112:(e,t,o)=>{var n={id:"teambit.harmony/aspect@1.0.501",homepage:"https://bit.cloud/teambit/harmony/aspect",exported:!0};function r(){const e=a(o(1594));return r=function(){return e},e}function a(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.Logo=void 0,r.__bit_component=n,a.__bit_component=n;const i=()=>r().default.createElement("div",{style:{height:"100%",display:"flex",justifyContent:"center"}},r().default.createElement("img",{style:{width:70},src:"https://static.bit.dev/extensions-icons/aspect.svg"}));i.__bit_component=n,t.Logo=i},1594:e=>{e.exports=React}},t={};function o(n){var r=t[n];if(void 0!==r)return r.exports;var a=t[n]={exports:{}};return e[n](a,a.exports,o),a.exports}o.d=(e,t)=>{for(var n in t)o.o(t,n)&&!o.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};o.r(n),o.d(n,{compositions:()=>m,compositions_metadata:()=>h,overview:()=>f});var r={};o.r(r),o.d(r,{default:()=>u});var a=o(6112);o(1594);const i=MdxJsReact,s=TeambitMdxUiMdxScopeContext;var p=["components"];function c(){return c=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var n in o)({}).hasOwnProperty.call(o,n)&&(e[n]=o[n])}return e},c.apply(null,arguments)}var l={},d="wrapper";function u(e){var t=e.components,o=function(e,t){if(null==e)return{};var o,n,r=function(e,t){if(null==e)return{};var o={};for(var n in e)if({}.hasOwnProperty.call(e,n)){if(t.includes(n))continue;o[n]=e[n]}return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)o=a[n],t.includes(o)||{}.propertyIsEnumerable.call(e,o)&&(r[o]=e[o])}return r}(e,p);return(0,i.mdx)(d,c({},l,o,{components:t,mdxType:"MDXLayout"}),(0,i.mdx)(s.MDXScopeProvider,{components:{},mdxType:"MDXScopeProvider"},(0,i.mdx)("h2",null,"Overview"),(0,i.mdx)("p",null,"Aspects can be configured on a component is various ways, some more general and some more specific. Once a component is loaded, Bit calculates all the sources and comes up with the final list of aspects. Each aspect has its config and data.\nConfig is what the user entered, Data is a result of the aspect process."),(0,i.mdx)("h2",null,"Debugging aspects"),(0,i.mdx)("p",null,"To help understanding why a component has these specific aspects, ",(0,i.mdx)("inlineCode",{parentName:"p"},"bit aspect get --debug")," shows each one of the sources, from the more specific one to the general one. At the end, it shows the merged result of all sources.\nThe various sources are as follows:"),(0,i.mdx)("pre",null,(0,i.mdx)("code",{parentName:"pre"},"'BitmapFile'\n'Model'\n'WorkspaceVariants'\n'ComponentJsonFile'\n")),(0,i.mdx)("p",null,"Since the list of all the config+data can be very long and hard to follow, the flag ",(0,i.mdx)("inlineCode",{parentName:"p"},"--json")," is very helpful.\nThis with help of ",(0,i.mdx)("a",{parentName:"p",href:"https://github.com/antonmedv/fx"},"fx"),", it's easy to extract the data needed."),(0,i.mdx)("p",null,"If for example, we're interested in one source only, we can run the following:"),(0,i.mdx)("pre",null,(0,i.mdx)("code",{parentName:"pre"},"bit aspect get ui/text --debug --json | fx .BitmapFile\n")),(0,i.mdx)("p",null,"It's possible to run any arbitrary javascript code with fx, so for example, if you want to debug just one specific aspect, and see its config/data per each one of the source, you can do something like this:"),(0,i.mdx)("pre",null,(0,i.mdx)("code",{parentName:"pre"},"bit aspect get ui/text --debug --json | fx 'Object.keys(this).map(origin => ({ origin, value: this[origin].extensions[\"teambit.pkg/pkg\"] }))'\n")),(0,i.mdx)("p",null,"Another data shown with the ",(0,i.mdx)("inlineCode",{parentName:"p"},"--debug")," flag is the rules in the workspace.jsonc#variants applied to this component. It shows the list of these rules sorted with the data about the specifity.")))}u.isMDXComponent=!0;const m=[a],f=[r],h={compositions:[{displayName:"Logo",identifier:"Logo"}]};return n})()));