[{"data":1,"prerenderedAt":9172},["Reactive",2],{"content-query-HlZlj1LHEr":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"_empty":6,"title":8,"description":9,"date":10,"tags":11,"readingTime":14,"body":19,"_type":9167,"_id":9168,"_source":9169,"_file":9170,"_extension":9171},"/blog/extending-components","blog",false,"","Extending Components: Inheritance instead of Props","Hello fellow programmers!",1685898000000,[12,13],"concept","long",{"text":15,"minutes":16,"time":17,"words":18},"19 min read",18.995,1139700,3799,{"type":20,"children":21,"toc":9129},"root",[22,29,34,39,43,48,53,60,65,85,91,104,124,129,164,182,187,192,198,207,212,223,228,233,240,245,258,263,359,376,387,583,601,606,611,617,622,1067,1072,1080,1085,1103,1109,1114,1578,1583,1606,1611,1616,1622,1627,1633,1638,1646,1657,1662,1675,1680,1686,1691,1696,1701,1783,1805,1816,1958,1970,1976,1981,1986,1991,1996,2401,2406,2417,2636,2648,2653,2658,2663,2755,2761,2766,2771,2776,2787,2793,2798,2806,2817,2829,2834,2847,2852,2940,2945,2957,3182,3187,3192,3197,3202,3634,3639,3644,3850,3855,3860,3865,4164,4169,4174,4179,4185,4190,4195,4200,4206,4211,4216,4221,5311,5323,5328,5339,5366,5371,5377,5382,5387,5620,5631,5647,5652,5658,5663,6119,6135,6152,6157,6163,6168,6461,6472,6478,6483,6732,6737,6743,6748,6753,6787,6792,6798,6803,6808,6819,6825,6830,6835,7083,7088,7093,7098,7103,7108,7114,7119,7124,7129,7509,7514,7519,7525,7530,7904,7909,7928,7933,8094,8099,8110,8128,8133,8139,8144,8346,8357,8362,8450,8455,8461,8465,8652,8662,8667,8672,9014,9019,9024,9029,9034,9040,9045,9050,9055,9061,9070,9076,9083,9088,9109,9114,9119,9124],{"type":23,"tag":24,"props":25,"children":26},"element","p",{},[27],{"type":28,"value":9},"text",{"type":23,"tag":24,"props":30,"children":31},{},[32],{"type":28,"value":33},"This post is about how we can use component composition and inheritance principals to extend our components as opposed to relying solely on props.",{"type":23,"tag":24,"props":35,"children":36},{},[37],{"type":28,"value":38},"This approach has proven to be especially useful when working with medium-large size components.",{"type":23,"tag":40,"props":41,"children":42},"hr",{},[],{"type":23,"tag":24,"props":44,"children":45},{},[46],{"type":28,"value":47},"We all know how to write our components, but when it comes to scaling them, I see many developers making an inaccuracy of extending components with adding props without giving it a second thought.",{"type":23,"tag":24,"props":49,"children":50},{},[51],{"type":28,"value":52},"And it is an understandable natural instinct, because it's the first thing that comes to mind, but it doesn't necessarily mean that it is your best option.",{"type":23,"tag":54,"props":55,"children":57},"h2",{"id":56},"the-problem",[58],{"type":28,"value":59},"The Problem",{"type":23,"tag":24,"props":61,"children":62},{},[63],{"type":28,"value":64},"When we extend a component with props, with each prop we add more conditional logic to it. Which in turn leads to maintainability issues down the road as the project grows, especially if there are multiple developers working on it.",{"type":23,"tag":66,"props":67,"children":68},"ul",{},[69,75,80],{"type":23,"tag":70,"props":71,"children":72},"li",{},[73],{"type":28,"value":74},"As more variations and conditionals are added, the component can become harder to manage. Too many props can lead to “prop hell”, making the component’s logic difficult to follow.",{"type":23,"tag":70,"props":76,"children":77},{},[78],{"type":28,"value":79},"Handling all variations in a single component can bloat it, making it less readable and harder to maintain.",{"type":23,"tag":70,"props":81,"children":82},{},[83],{"type":28,"value":84},"If the component has too many conditionals, it might impact rendering performance, especially if it's frequently re-rendered.",{"type":23,"tag":54,"props":86,"children":88},{"id":87},"the-solution",[89],{"type":28,"value":90},"The Solution",{"type":23,"tag":24,"props":92,"children":93},{},[94,96,102],{"type":28,"value":95},"Utilize inheritance principals by creating a Base component (which contains all the functionality ",{"type":23,"tag":97,"props":98,"children":99},"em",{},[100],{"type":28,"value":101},"common",{"type":28,"value":103}," for all the component variations) and extending it with other derived components - a component per variation.",{"type":23,"tag":24,"props":105,"children":106},{},[107,109,115,117,122],{"type":28,"value":108},"These \"child\" components should extend the Base component with functionality specific to their case, contributing to the ",{"type":23,"tag":110,"props":111,"children":112},"strong",{},[113],{"type":28,"value":114},"Separation of Concerns",{"type":28,"value":116}," and ",{"type":23,"tag":110,"props":118,"children":119},{},[120],{"type":28,"value":121},"maintainability",{"type":28,"value":123},".",{"type":23,"tag":24,"props":125,"children":126},{},[127],{"type":28,"value":128},"You might have noticed similarities with OOP — that's because this approach relies on the same principles, like inheritance and encapsulation, to make the code more modular and maintainable.",{"type":23,"tag":130,"props":131,"children":132},"blockquote",{},[133,145],{"type":23,"tag":24,"props":134,"children":135},{},[136,138,143],{"type":28,"value":137},"I should mention that this is absolutely ",{"type":23,"tag":97,"props":139,"children":140},{},[141],{"type":28,"value":142},"not",{"type":28,"value":144}," a one-size-fits-all solution. And I'm not saying that we need to start utilizing it for every small component we write.",{"type":23,"tag":24,"props":146,"children":147},{},[148,150,156,157,162],{"type":28,"value":149},"It probably won't be worth it creating separate ",{"type":23,"tag":151,"props":152,"children":153},"code-inline",{},[154],{"type":28,"value":155},"PrimaryButton",{"type":28,"value":116},{"type":23,"tag":151,"props":158,"children":159},{},[160],{"type":28,"value":161},"SecondaryButton",{"type":28,"value":163}," components, because these two variations won't have the functionalities distinct enough to justify the separation. After all, it's the same button with slightly different styles, and this kind of component won't get too complicated anyway if we handle the variations with props.",{"type":23,"tag":24,"props":165,"children":166},{},[167,169,174,176,181],{"type":28,"value":168},"Don't take the principles described here as absolute, if you choose to use this component composition strategy, it's going to be a ",{"type":23,"tag":110,"props":170,"children":171},{},[172],{"type":28,"value":173},"hybrid",{"type":28,"value":175}," mode anyway. ",{"type":23,"tag":97,"props":177,"children":178},{},[179],{"type":28,"value":180},"There will be some components that play better with props, others that benefit from inheritance",{"type":28,"value":123},{"type":23,"tag":24,"props":183,"children":184},{},[185],{"type":28,"value":186},"But if you're starting to run into maintainability problems because of some of your components growing out of control, maybe it's time to explore this technique.",{"type":23,"tag":24,"props":188,"children":189},{},[190],{"type":28,"value":191},"If you're interested to learn more about this approach with examples and code snippets - keep reading!",{"type":23,"tag":54,"props":193,"children":195},{"id":194},"example-app",[196],{"type":28,"value":197},"Example app",{"type":23,"tag":24,"props":199,"children":200},{},[201],{"type":23,"tag":202,"props":203,"children":206},"img",{"alt":204,"src":205},"example app first stage","/blog/extend-components/example-1.png",[],{"type":23,"tag":24,"props":208,"children":209},{},[210],{"type":28,"value":211},"In this example app we're displaying the cards which represent the contents of some hypothetical user inventory.",{"type":23,"tag":24,"props":213,"children":214},{},[215,217,222],{"type":28,"value":216},"Right now the only item type that the user can have is a ",{"type":23,"tag":97,"props":218,"children":219},{},[220],{"type":28,"value":221},"pet",{"type":28,"value":123},{"type":23,"tag":24,"props":224,"children":225},{},[226],{"type":28,"value":227},"You can see that the item component we're using renders a card-shaped container with the pet's picture, name, and some stats.",{"type":23,"tag":24,"props":229,"children":230},{},[231],{"type":28,"value":232},"It also shows an \"is fed\" label up top.",{"type":23,"tag":234,"props":235,"children":237},"h3",{"id":236},"iteration-1",[238],{"type":28,"value":239},"Iteration 1",{"type":23,"tag":24,"props":241,"children":242},{},[243],{"type":28,"value":244},"Let's see what the code for this component looks like.",{"type":23,"tag":130,"props":246,"children":247},{},[248,253],{"type":23,"tag":24,"props":249,"children":250},{},[251],{"type":28,"value":252},"I'm using Vue for this example code, but the concept applies to any frontend framework or library.",{"type":23,"tag":24,"props":254,"children":255},{},[256],{"type":28,"value":257},"If you're not familiar with the Vue syntax, don't worry as I will explain everything in detail line by line.",{"type":23,"tag":24,"props":259,"children":260},{},[261],{"type":28,"value":262},"First we declare component props, which in Vue looks like this:",{"type":23,"tag":264,"props":265,"children":269},"code",{"code":266,"language":267,"meta":268},"const props = defineProps\u003C{\n  pet: Pet\n}>()\n","ts",null,[270],{"type":23,"tag":271,"props":272,"children":273},"pre",{},[274],{"type":23,"tag":264,"props":275,"children":276},{"__ignoreMap":7},[277,326,350],{"type":23,"tag":278,"props":279,"children":282},"span",{"class":280,"line":281},"line",1,[283,289,295,301,305,311,315,321],{"type":23,"tag":278,"props":284,"children":286},{"class":285},"ct-998f3d",[287],{"type":28,"value":288},"const",{"type":23,"tag":278,"props":290,"children":292},{"class":291},"ct-ead73c",[293],{"type":28,"value":294}," ",{"type":23,"tag":278,"props":296,"children":298},{"class":297},"ct-897917",[299],{"type":28,"value":300},"props",{"type":23,"tag":278,"props":302,"children":303},{"class":291},[304],{"type":28,"value":294},{"type":23,"tag":278,"props":306,"children":308},{"class":307},"ct-5bb0b0",[309],{"type":28,"value":310},"=",{"type":23,"tag":278,"props":312,"children":313},{"class":291},[314],{"type":28,"value":294},{"type":23,"tag":278,"props":316,"children":318},{"class":317},"ct-b9eb20",[319],{"type":28,"value":320},"defineProps",{"type":23,"tag":278,"props":322,"children":323},{"class":291},[324],{"type":28,"value":325},"\u003C{\n",{"type":23,"tag":278,"props":327,"children":329},{"class":280,"line":328},2,[330,335,340,345],{"type":23,"tag":278,"props":331,"children":332},{"class":291},[333],{"type":28,"value":334},"  ",{"type":23,"tag":278,"props":336,"children":338},{"class":337},"ct-c69d28",[339],{"type":28,"value":221},{"type":23,"tag":278,"props":341,"children":342},{"class":291},[343],{"type":28,"value":344},": ",{"type":23,"tag":278,"props":346,"children":347},{"class":297},[348],{"type":28,"value":349},"Pet\n",{"type":23,"tag":278,"props":351,"children":353},{"class":280,"line":352},3,[354],{"type":23,"tag":278,"props":355,"children":356},{"class":291},[357],{"type":28,"value":358},"}>()",{"type":23,"tag":24,"props":360,"children":361},{},[362,364,368,370,375],{"type":28,"value":363},"Our component exposes a single prop called ",{"type":23,"tag":151,"props":365,"children":366},{},[367],{"type":28,"value":221},{"type":28,"value":369}," and it has a type of ",{"type":23,"tag":151,"props":371,"children":372},{},[373],{"type":28,"value":374},"Pet",{"type":28,"value":123},{"type":23,"tag":24,"props":377,"children":378},{},[379,381,385],{"type":28,"value":380},"And here's the expanded ",{"type":23,"tag":151,"props":382,"children":383},{},[384],{"type":28,"value":374},{"type":28,"value":386}," type that we're using:",{"type":23,"tag":264,"props":388,"children":390},{"code":389,"language":267,"meta":268},"type Pet = {\n  type: 'pet'\n  pictureUrl: string\n  name: string\n  happiness: number\n  maxHappiness: number\n  mood: string\n  lastFed: number\n}\n",[391],{"type":23,"tag":271,"props":392,"children":393},{},[394],{"type":23,"tag":264,"props":395,"children":396},{"__ignoreMap":7},[397,426,447,468,489,511,532,553,574],{"type":23,"tag":278,"props":398,"children":399},{"class":280,"line":281},[400,405,409,413,417,421],{"type":23,"tag":278,"props":401,"children":402},{"class":285},[403],{"type":28,"value":404},"type",{"type":23,"tag":278,"props":406,"children":407},{"class":291},[408],{"type":28,"value":294},{"type":23,"tag":278,"props":410,"children":411},{"class":297},[412],{"type":28,"value":374},{"type":23,"tag":278,"props":414,"children":415},{"class":291},[416],{"type":28,"value":294},{"type":23,"tag":278,"props":418,"children":419},{"class":307},[420],{"type":28,"value":310},{"type":23,"tag":278,"props":422,"children":423},{"class":291},[424],{"type":28,"value":425}," {\n",{"type":23,"tag":278,"props":427,"children":428},{"class":280,"line":328},[429,433,437,441],{"type":23,"tag":278,"props":430,"children":431},{"class":291},[432],{"type":28,"value":334},{"type":23,"tag":278,"props":434,"children":435},{"class":337},[436],{"type":28,"value":404},{"type":23,"tag":278,"props":438,"children":439},{"class":291},[440],{"type":28,"value":344},{"type":23,"tag":278,"props":442,"children":444},{"class":443},"ct-39e230",[445],{"type":28,"value":446},"'pet'\n",{"type":23,"tag":278,"props":448,"children":449},{"class":280,"line":352},[450,454,459,463],{"type":23,"tag":278,"props":451,"children":452},{"class":291},[453],{"type":28,"value":334},{"type":23,"tag":278,"props":455,"children":456},{"class":337},[457],{"type":28,"value":458},"pictureUrl",{"type":23,"tag":278,"props":460,"children":461},{"class":291},[462],{"type":28,"value":344},{"type":23,"tag":278,"props":464,"children":465},{"class":297},[466],{"type":28,"value":467},"string\n",{"type":23,"tag":278,"props":469,"children":471},{"class":280,"line":470},4,[472,476,481,485],{"type":23,"tag":278,"props":473,"children":474},{"class":291},[475],{"type":28,"value":334},{"type":23,"tag":278,"props":477,"children":478},{"class":337},[479],{"type":28,"value":480},"name",{"type":23,"tag":278,"props":482,"children":483},{"class":291},[484],{"type":28,"value":344},{"type":23,"tag":278,"props":486,"children":487},{"class":297},[488],{"type":28,"value":467},{"type":23,"tag":278,"props":490,"children":492},{"class":280,"line":491},5,[493,497,502,506],{"type":23,"tag":278,"props":494,"children":495},{"class":291},[496],{"type":28,"value":334},{"type":23,"tag":278,"props":498,"children":499},{"class":337},[500],{"type":28,"value":501},"happiness",{"type":23,"tag":278,"props":503,"children":504},{"class":291},[505],{"type":28,"value":344},{"type":23,"tag":278,"props":507,"children":508},{"class":297},[509],{"type":28,"value":510},"number\n",{"type":23,"tag":278,"props":512,"children":514},{"class":280,"line":513},6,[515,519,524,528],{"type":23,"tag":278,"props":516,"children":517},{"class":291},[518],{"type":28,"value":334},{"type":23,"tag":278,"props":520,"children":521},{"class":337},[522],{"type":28,"value":523},"maxHappiness",{"type":23,"tag":278,"props":525,"children":526},{"class":291},[527],{"type":28,"value":344},{"type":23,"tag":278,"props":529,"children":530},{"class":297},[531],{"type":28,"value":510},{"type":23,"tag":278,"props":533,"children":535},{"class":280,"line":534},7,[536,540,545,549],{"type":23,"tag":278,"props":537,"children":538},{"class":291},[539],{"type":28,"value":334},{"type":23,"tag":278,"props":541,"children":542},{"class":337},[543],{"type":28,"value":544},"mood",{"type":23,"tag":278,"props":546,"children":547},{"class":291},[548],{"type":28,"value":344},{"type":23,"tag":278,"props":550,"children":551},{"class":297},[552],{"type":28,"value":467},{"type":23,"tag":278,"props":554,"children":556},{"class":280,"line":555},8,[557,561,566,570],{"type":23,"tag":278,"props":558,"children":559},{"class":291},[560],{"type":28,"value":334},{"type":23,"tag":278,"props":562,"children":563},{"class":337},[564],{"type":28,"value":565},"lastFed",{"type":23,"tag":278,"props":567,"children":568},{"class":291},[569],{"type":28,"value":344},{"type":23,"tag":278,"props":571,"children":572},{"class":297},[573],{"type":28,"value":510},{"type":23,"tag":278,"props":575,"children":577},{"class":280,"line":576},9,[578],{"type":23,"tag":278,"props":579,"children":580},{"class":291},[581],{"type":28,"value":582},"}",{"type":23,"tag":24,"props":584,"children":585},{},[586,588,592,594,599],{"type":28,"value":587},"It decares the ",{"type":23,"tag":151,"props":589,"children":590},{},[591],{"type":28,"value":404},{"type":28,"value":593}," field with a literal string type of ",{"type":23,"tag":151,"props":595,"children":596},{},[597],{"type":28,"value":598},"'pet'",{"type":28,"value":600},". We can use this field to check what kind of item we're dealing with.",{"type":23,"tag":24,"props":602,"children":603},{},[604],{"type":28,"value":605},"As well it contains a picture URL for our pet, its name as well as some of its stats.",{"type":23,"tag":24,"props":607,"children":608},{},[609],{"type":28,"value":610},"Now that we're familiar with the data structure that we're dealing with, let's get back to our component.",{"type":23,"tag":234,"props":612,"children":614},{"id":613},"the-script",[615],{"type":28,"value":616},"The Script:",{"type":23,"tag":24,"props":618,"children":619},{},[620],{"type":28,"value":621},"First, let's have a look at what's happening in the script:",{"type":23,"tag":264,"props":623,"children":625},{"code":624,"language":267,"meta":268},"const imageStyle = computed(() => ({\n  backgroundImage: `url(${props.pet.pictureUrl})`\n}))\n\nconst stats = computed(() => ({\n  'happiness': `${props.pet.happiness}/${props.pet.maxHappiness}`,\n  'mood': props.pet.mood\n}))\n\nconst isFed = computed(() => (\n  props.pet.lastFed > Date.now() - 30000\n))\n",[626],{"type":23,"tag":271,"props":627,"children":628},{},[629],{"type":23,"tag":264,"props":630,"children":631},{"__ignoreMap":7},[632,680,735,743,751,795,886,923,930,937,983,1058],{"type":23,"tag":278,"props":633,"children":634},{"class":280,"line":281},[635,639,643,648,652,656,660,665,670,675],{"type":23,"tag":278,"props":636,"children":637},{"class":285},[638],{"type":28,"value":288},{"type":23,"tag":278,"props":640,"children":641},{"class":291},[642],{"type":28,"value":294},{"type":23,"tag":278,"props":644,"children":645},{"class":297},[646],{"type":28,"value":647},"imageStyle",{"type":23,"tag":278,"props":649,"children":650},{"class":291},[651],{"type":28,"value":294},{"type":23,"tag":278,"props":653,"children":654},{"class":307},[655],{"type":28,"value":310},{"type":23,"tag":278,"props":657,"children":658},{"class":291},[659],{"type":28,"value":294},{"type":23,"tag":278,"props":661,"children":662},{"class":317},[663],{"type":28,"value":664},"computed",{"type":23,"tag":278,"props":666,"children":667},{"class":291},[668],{"type":28,"value":669},"(() ",{"type":23,"tag":278,"props":671,"children":672},{"class":285},[673],{"type":28,"value":674},"=>",{"type":23,"tag":278,"props":676,"children":677},{"class":291},[678],{"type":28,"value":679}," ({\n",{"type":23,"tag":278,"props":681,"children":682},{"class":280,"line":328},[683,687,692,696,701,706,710,714,718,722,726,730],{"type":23,"tag":278,"props":684,"children":685},{"class":291},[686],{"type":28,"value":334},{"type":23,"tag":278,"props":688,"children":689},{"class":337},[690],{"type":28,"value":691},"backgroundImage",{"type":23,"tag":278,"props":693,"children":694},{"class":291},[695],{"type":28,"value":344},{"type":23,"tag":278,"props":697,"children":698},{"class":443},[699],{"type":28,"value":700},"`url(",{"type":23,"tag":278,"props":702,"children":703},{"class":285},[704],{"type":28,"value":705},"${",{"type":23,"tag":278,"props":707,"children":708},{"class":297},[709],{"type":28,"value":300},{"type":23,"tag":278,"props":711,"children":712},{"class":291},[713],{"type":28,"value":123},{"type":23,"tag":278,"props":715,"children":716},{"class":297},[717],{"type":28,"value":221},{"type":23,"tag":278,"props":719,"children":720},{"class":291},[721],{"type":28,"value":123},{"type":23,"tag":278,"props":723,"children":724},{"class":337},[725],{"type":28,"value":458},{"type":23,"tag":278,"props":727,"children":728},{"class":285},[729],{"type":28,"value":582},{"type":23,"tag":278,"props":731,"children":732},{"class":443},[733],{"type":28,"value":734},")`\n",{"type":23,"tag":278,"props":736,"children":737},{"class":280,"line":352},[738],{"type":23,"tag":278,"props":739,"children":740},{"class":291},[741],{"type":28,"value":742},"}))\n",{"type":23,"tag":278,"props":744,"children":745},{"class":280,"line":470},[746],{"type":23,"tag":278,"props":747,"children":748},{},[749],{"type":28,"value":750},"\n",{"type":23,"tag":278,"props":752,"children":753},{"class":280,"line":491},[754,758,762,767,771,775,779,783,787,791],{"type":23,"tag":278,"props":755,"children":756},{"class":285},[757],{"type":28,"value":288},{"type":23,"tag":278,"props":759,"children":760},{"class":291},[761],{"type":28,"value":294},{"type":23,"tag":278,"props":763,"children":764},{"class":297},[765],{"type":28,"value":766},"stats",{"type":23,"tag":278,"props":768,"children":769},{"class":291},[770],{"type":28,"value":294},{"type":23,"tag":278,"props":772,"children":773},{"class":307},[774],{"type":28,"value":310},{"type":23,"tag":278,"props":776,"children":777},{"class":291},[778],{"type":28,"value":294},{"type":23,"tag":278,"props":780,"children":781},{"class":317},[782],{"type":28,"value":664},{"type":23,"tag":278,"props":784,"children":785},{"class":291},[786],{"type":28,"value":669},{"type":23,"tag":278,"props":788,"children":789},{"class":285},[790],{"type":28,"value":674},{"type":23,"tag":278,"props":792,"children":793},{"class":291},[794],{"type":28,"value":679},{"type":23,"tag":278,"props":796,"children":797},{"class":280,"line":513},[798,802,807,811,816,820,824,828,832,836,840,844,849,853,857,861,865,869,873,877,881],{"type":23,"tag":278,"props":799,"children":800},{"class":291},[801],{"type":28,"value":334},{"type":23,"tag":278,"props":803,"children":804},{"class":443},[805],{"type":28,"value":806},"'happiness'",{"type":23,"tag":278,"props":808,"children":809},{"class":291},[810],{"type":28,"value":344},{"type":23,"tag":278,"props":812,"children":813},{"class":443},[814],{"type":28,"value":815},"`",{"type":23,"tag":278,"props":817,"children":818},{"class":285},[819],{"type":28,"value":705},{"type":23,"tag":278,"props":821,"children":822},{"class":297},[823],{"type":28,"value":300},{"type":23,"tag":278,"props":825,"children":826},{"class":291},[827],{"type":28,"value":123},{"type":23,"tag":278,"props":829,"children":830},{"class":297},[831],{"type":28,"value":221},{"type":23,"tag":278,"props":833,"children":834},{"class":291},[835],{"type":28,"value":123},{"type":23,"tag":278,"props":837,"children":838},{"class":337},[839],{"type":28,"value":501},{"type":23,"tag":278,"props":841,"children":842},{"class":285},[843],{"type":28,"value":582},{"type":23,"tag":278,"props":845,"children":846},{"class":443},[847],{"type":28,"value":848},"/",{"type":23,"tag":278,"props":850,"children":851},{"class":285},[852],{"type":28,"value":705},{"type":23,"tag":278,"props":854,"children":855},{"class":297},[856],{"type":28,"value":300},{"type":23,"tag":278,"props":858,"children":859},{"class":291},[860],{"type":28,"value":123},{"type":23,"tag":278,"props":862,"children":863},{"class":297},[864],{"type":28,"value":221},{"type":23,"tag":278,"props":866,"children":867},{"class":291},[868],{"type":28,"value":123},{"type":23,"tag":278,"props":870,"children":871},{"class":337},[872],{"type":28,"value":523},{"type":23,"tag":278,"props":874,"children":875},{"class":285},[876],{"type":28,"value":582},{"type":23,"tag":278,"props":878,"children":879},{"class":443},[880],{"type":28,"value":815},{"type":23,"tag":278,"props":882,"children":883},{"class":291},[884],{"type":28,"value":885},",\n",{"type":23,"tag":278,"props":887,"children":888},{"class":280,"line":534},[889,893,898,902,906,910,914,918],{"type":23,"tag":278,"props":890,"children":891},{"class":291},[892],{"type":28,"value":334},{"type":23,"tag":278,"props":894,"children":895},{"class":443},[896],{"type":28,"value":897},"'mood'",{"type":23,"tag":278,"props":899,"children":900},{"class":291},[901],{"type":28,"value":344},{"type":23,"tag":278,"props":903,"children":904},{"class":297},[905],{"type":28,"value":300},{"type":23,"tag":278,"props":907,"children":908},{"class":291},[909],{"type":28,"value":123},{"type":23,"tag":278,"props":911,"children":912},{"class":297},[913],{"type":28,"value":221},{"type":23,"tag":278,"props":915,"children":916},{"class":291},[917],{"type":28,"value":123},{"type":23,"tag":278,"props":919,"children":920},{"class":337},[921],{"type":28,"value":922},"mood\n",{"type":23,"tag":278,"props":924,"children":925},{"class":280,"line":555},[926],{"type":23,"tag":278,"props":927,"children":928},{"class":291},[929],{"type":28,"value":742},{"type":23,"tag":278,"props":931,"children":932},{"class":280,"line":576},[933],{"type":23,"tag":278,"props":934,"children":935},{},[936],{"type":28,"value":750},{"type":23,"tag":278,"props":938,"children":940},{"class":280,"line":939},10,[941,945,949,954,958,962,966,970,974,978],{"type":23,"tag":278,"props":942,"children":943},{"class":285},[944],{"type":28,"value":288},{"type":23,"tag":278,"props":946,"children":947},{"class":291},[948],{"type":28,"value":294},{"type":23,"tag":278,"props":950,"children":951},{"class":297},[952],{"type":28,"value":953},"isFed",{"type":23,"tag":278,"props":955,"children":956},{"class":291},[957],{"type":28,"value":294},{"type":23,"tag":278,"props":959,"children":960},{"class":307},[961],{"type":28,"value":310},{"type":23,"tag":278,"props":963,"children":964},{"class":291},[965],{"type":28,"value":294},{"type":23,"tag":278,"props":967,"children":968},{"class":317},[969],{"type":28,"value":664},{"type":23,"tag":278,"props":971,"children":972},{"class":291},[973],{"type":28,"value":669},{"type":23,"tag":278,"props":975,"children":976},{"class":285},[977],{"type":28,"value":674},{"type":23,"tag":278,"props":979,"children":980},{"class":291},[981],{"type":28,"value":982}," (\n",{"type":23,"tag":278,"props":984,"children":986},{"class":280,"line":985},11,[987,991,995,999,1003,1007,1011,1015,1020,1024,1029,1033,1038,1043,1048,1052],{"type":23,"tag":278,"props":988,"children":989},{"class":291},[990],{"type":28,"value":334},{"type":23,"tag":278,"props":992,"children":993},{"class":297},[994],{"type":28,"value":300},{"type":23,"tag":278,"props":996,"children":997},{"class":291},[998],{"type":28,"value":123},{"type":23,"tag":278,"props":1000,"children":1001},{"class":297},[1002],{"type":28,"value":221},{"type":23,"tag":278,"props":1004,"children":1005},{"class":291},[1006],{"type":28,"value":123},{"type":23,"tag":278,"props":1008,"children":1009},{"class":337},[1010],{"type":28,"value":565},{"type":23,"tag":278,"props":1012,"children":1013},{"class":291},[1014],{"type":28,"value":294},{"type":23,"tag":278,"props":1016,"children":1017},{"class":307},[1018],{"type":28,"value":1019},">",{"type":23,"tag":278,"props":1021,"children":1022},{"class":291},[1023],{"type":28,"value":294},{"type":23,"tag":278,"props":1025,"children":1026},{"class":297},[1027],{"type":28,"value":1028},"Date",{"type":23,"tag":278,"props":1030,"children":1031},{"class":291},[1032],{"type":28,"value":123},{"type":23,"tag":278,"props":1034,"children":1035},{"class":317},[1036],{"type":28,"value":1037},"now",{"type":23,"tag":278,"props":1039,"children":1040},{"class":291},[1041],{"type":28,"value":1042},"() ",{"type":23,"tag":278,"props":1044,"children":1045},{"class":307},[1046],{"type":28,"value":1047},"-",{"type":23,"tag":278,"props":1049,"children":1050},{"class":291},[1051],{"type":28,"value":294},{"type":23,"tag":278,"props":1053,"children":1055},{"class":1054},"ct-dade32",[1056],{"type":28,"value":1057},"30000\n",{"type":23,"tag":278,"props":1059,"children":1061},{"class":280,"line":1060},12,[1062],{"type":23,"tag":278,"props":1063,"children":1064},{"class":291},[1065],{"type":28,"value":1066},"))",{"type":23,"tag":24,"props":1068,"children":1069},{},[1070],{"type":28,"value":1071},"We can see that we have some computed properties.",{"type":23,"tag":130,"props":1073,"children":1074},{},[1075],{"type":23,"tag":24,"props":1076,"children":1077},{},[1078],{"type":28,"value":1079},"Computed property in Vue is a piece of state that depends on other reactive variables and gets updated every time one of its dependencies changes.",{"type":23,"tag":24,"props":1081,"children":1082},{},[1083],{"type":28,"value":1084},"3 things are happening here:",{"type":23,"tag":66,"props":1086,"children":1087},{},[1088,1093,1098],{"type":23,"tag":70,"props":1089,"children":1090},{},[1091],{"type":28,"value":1092},"First we get an image style object - it simply takes our pet's picture URL and wraps it into a CSS string. We'll use it later in the template.",{"type":23,"tag":70,"props":1094,"children":1095},{},[1096],{"type":28,"value":1097},"Then we parse a stats object. We pick the fields that we want to display in the \"stats\" block from our initial pet object, and return a new object where the key is a display name of a stat and the value is its value. We're going to iterate over this object in the template.",{"type":23,"tag":70,"props":1099,"children":1100},{},[1101],{"type":28,"value":1102},"And lastly, we compute a boolean state of whether our pet is fed or not. For the sake of this example, a pet is considered fed when it was last fed less than 30 seconds ago.",{"type":23,"tag":234,"props":1104,"children":1106},{"id":1105},"the-template",[1107],{"type":28,"value":1108},"The Template",{"type":23,"tag":24,"props":1110,"children":1111},{},[1112],{"type":28,"value":1113},"Next let's look at the template:",{"type":23,"tag":264,"props":1115,"children":1118},{"code":1116,"language":1117,"meta":268},"\u003Cdiv class=\"my-card\">\n\n  \u003C!-- image -->\n  \u003Cdiv\n    class=\"img\"\n    :style=\"imageStyle\"\n  />\n\n  \u003C!-- name -->\n  \u003Ch3>{{ pet.name }}\u003C/h3>\n\n  \u003C!-- stats -->\n  \u003Cdiv\n    v-for=\"statValue, statName in stats\"\n    :key=\"statName\"\n  >\n    \u003Cspan class=\"stat-name\">{{ statName }}: \u003C/span>\n    \u003Cspan class=\"stat-value\">{{ statValue }}\u003C/span>\n  \u003C/div>\n\n  \u003C!-- fed label -->\n  \u003Cdiv class=\"fed-label\">\n    {{ isFed ? '✅' : '❌ NOT' }} FED\n  \u003C/div>\n  \n\u003C/div>\n","xml",[1119],{"type":23,"tag":271,"props":1120,"children":1121},{},[1122],{"type":23,"tag":264,"props":1123,"children":1124},{"__ignoreMap":7},[1125,1161,1168,1181,1194,1215,1236,1244,1251,1263,1287,1294,1306,1318,1340,1362,1371,1414,1456,1473,1481,1494,1527,1536,1552,1561],{"type":23,"tag":278,"props":1126,"children":1127},{"class":280,"line":281},[1128,1133,1138,1142,1147,1151,1156],{"type":23,"tag":278,"props":1129,"children":1130},{"class":291},[1131],{"type":28,"value":1132},"\u003C",{"type":23,"tag":278,"props":1134,"children":1135},{"class":337},[1136],{"type":28,"value":1137},"div",{"type":23,"tag":278,"props":1139,"children":1140},{"class":291},[1141],{"type":28,"value":294},{"type":23,"tag":278,"props":1143,"children":1144},{"class":1054},[1145],{"type":28,"value":1146},"class",{"type":23,"tag":278,"props":1148,"children":1149},{"class":291},[1150],{"type":28,"value":310},{"type":23,"tag":278,"props":1152,"children":1153},{"class":443},[1154],{"type":28,"value":1155},"\"my-card\"",{"type":23,"tag":278,"props":1157,"children":1158},{"class":291},[1159],{"type":28,"value":1160},">\n",{"type":23,"tag":278,"props":1162,"children":1163},{"class":280,"line":328},[1164],{"type":23,"tag":278,"props":1165,"children":1166},{},[1167],{"type":28,"value":750},{"type":23,"tag":278,"props":1169,"children":1170},{"class":280,"line":352},[1171,1175],{"type":23,"tag":278,"props":1172,"children":1173},{"class":291},[1174],{"type":28,"value":334},{"type":23,"tag":278,"props":1176,"children":1178},{"class":1177},"ct-ff51bc",[1179],{"type":28,"value":1180},"\u003C!-- image -->\n",{"type":23,"tag":278,"props":1182,"children":1183},{"class":280,"line":470},[1184,1189],{"type":23,"tag":278,"props":1185,"children":1186},{"class":291},[1187],{"type":28,"value":1188},"  \u003C",{"type":23,"tag":278,"props":1190,"children":1191},{"class":337},[1192],{"type":28,"value":1193},"div\n",{"type":23,"tag":278,"props":1195,"children":1196},{"class":280,"line":491},[1197,1202,1206,1210],{"type":23,"tag":278,"props":1198,"children":1199},{"class":291},[1200],{"type":28,"value":1201},"    ",{"type":23,"tag":278,"props":1203,"children":1204},{"class":1054},[1205],{"type":28,"value":1146},{"type":23,"tag":278,"props":1207,"children":1208},{"class":291},[1209],{"type":28,"value":310},{"type":23,"tag":278,"props":1211,"children":1212},{"class":443},[1213],{"type":28,"value":1214},"\"img\"\n",{"type":23,"tag":278,"props":1216,"children":1217},{"class":280,"line":513},[1218,1222,1227,1231],{"type":23,"tag":278,"props":1219,"children":1220},{"class":291},[1221],{"type":28,"value":1201},{"type":23,"tag":278,"props":1223,"children":1224},{"class":1054},[1225],{"type":28,"value":1226},":style",{"type":23,"tag":278,"props":1228,"children":1229},{"class":291},[1230],{"type":28,"value":310},{"type":23,"tag":278,"props":1232,"children":1233},{"class":443},[1234],{"type":28,"value":1235},"\"imageStyle\"\n",{"type":23,"tag":278,"props":1237,"children":1238},{"class":280,"line":534},[1239],{"type":23,"tag":278,"props":1240,"children":1241},{"class":291},[1242],{"type":28,"value":1243},"  />\n",{"type":23,"tag":278,"props":1245,"children":1246},{"class":280,"line":555},[1247],{"type":23,"tag":278,"props":1248,"children":1249},{},[1250],{"type":28,"value":750},{"type":23,"tag":278,"props":1252,"children":1253},{"class":280,"line":576},[1254,1258],{"type":23,"tag":278,"props":1255,"children":1256},{"class":291},[1257],{"type":28,"value":334},{"type":23,"tag":278,"props":1259,"children":1260},{"class":1177},[1261],{"type":28,"value":1262},"\u003C!-- name -->\n",{"type":23,"tag":278,"props":1264,"children":1265},{"class":280,"line":939},[1266,1270,1274,1279,1283],{"type":23,"tag":278,"props":1267,"children":1268},{"class":291},[1269],{"type":28,"value":1188},{"type":23,"tag":278,"props":1271,"children":1272},{"class":337},[1273],{"type":28,"value":234},{"type":23,"tag":278,"props":1275,"children":1276},{"class":291},[1277],{"type":28,"value":1278},">{{ pet.name }}\u003C/",{"type":23,"tag":278,"props":1280,"children":1281},{"class":337},[1282],{"type":28,"value":234},{"type":23,"tag":278,"props":1284,"children":1285},{"class":291},[1286],{"type":28,"value":1160},{"type":23,"tag":278,"props":1288,"children":1289},{"class":280,"line":985},[1290],{"type":23,"tag":278,"props":1291,"children":1292},{},[1293],{"type":28,"value":750},{"type":23,"tag":278,"props":1295,"children":1296},{"class":280,"line":1060},[1297,1301],{"type":23,"tag":278,"props":1298,"children":1299},{"class":291},[1300],{"type":28,"value":334},{"type":23,"tag":278,"props":1302,"children":1303},{"class":1177},[1304],{"type":28,"value":1305},"\u003C!-- stats -->\n",{"type":23,"tag":278,"props":1307,"children":1309},{"class":280,"line":1308},13,[1310,1314],{"type":23,"tag":278,"props":1311,"children":1312},{"class":291},[1313],{"type":28,"value":1188},{"type":23,"tag":278,"props":1315,"children":1316},{"class":337},[1317],{"type":28,"value":1193},{"type":23,"tag":278,"props":1319,"children":1321},{"class":280,"line":1320},14,[1322,1326,1331,1335],{"type":23,"tag":278,"props":1323,"children":1324},{"class":291},[1325],{"type":28,"value":1201},{"type":23,"tag":278,"props":1327,"children":1328},{"class":1054},[1329],{"type":28,"value":1330},"v-for",{"type":23,"tag":278,"props":1332,"children":1333},{"class":291},[1334],{"type":28,"value":310},{"type":23,"tag":278,"props":1336,"children":1337},{"class":443},[1338],{"type":28,"value":1339},"\"statValue, statName in stats\"\n",{"type":23,"tag":278,"props":1341,"children":1343},{"class":280,"line":1342},15,[1344,1348,1353,1357],{"type":23,"tag":278,"props":1345,"children":1346},{"class":291},[1347],{"type":28,"value":1201},{"type":23,"tag":278,"props":1349,"children":1350},{"class":1054},[1351],{"type":28,"value":1352},":key",{"type":23,"tag":278,"props":1354,"children":1355},{"class":291},[1356],{"type":28,"value":310},{"type":23,"tag":278,"props":1358,"children":1359},{"class":443},[1360],{"type":28,"value":1361},"\"statName\"\n",{"type":23,"tag":278,"props":1363,"children":1365},{"class":280,"line":1364},16,[1366],{"type":23,"tag":278,"props":1367,"children":1368},{"class":291},[1369],{"type":28,"value":1370},"  >\n",{"type":23,"tag":278,"props":1372,"children":1374},{"class":280,"line":1373},17,[1375,1380,1384,1388,1392,1396,1401,1406,1410],{"type":23,"tag":278,"props":1376,"children":1377},{"class":291},[1378],{"type":28,"value":1379},"    \u003C",{"type":23,"tag":278,"props":1381,"children":1382},{"class":337},[1383],{"type":28,"value":278},{"type":23,"tag":278,"props":1385,"children":1386},{"class":291},[1387],{"type":28,"value":294},{"type":23,"tag":278,"props":1389,"children":1390},{"class":1054},[1391],{"type":28,"value":1146},{"type":23,"tag":278,"props":1393,"children":1394},{"class":291},[1395],{"type":28,"value":310},{"type":23,"tag":278,"props":1397,"children":1398},{"class":443},[1399],{"type":28,"value":1400},"\"stat-name\"",{"type":23,"tag":278,"props":1402,"children":1403},{"class":291},[1404],{"type":28,"value":1405},">{{ statName }}: \u003C/",{"type":23,"tag":278,"props":1407,"children":1408},{"class":337},[1409],{"type":28,"value":278},{"type":23,"tag":278,"props":1411,"children":1412},{"class":291},[1413],{"type":28,"value":1160},{"type":23,"tag":278,"props":1415,"children":1417},{"class":280,"line":1416},18,[1418,1422,1426,1430,1434,1438,1443,1448,1452],{"type":23,"tag":278,"props":1419,"children":1420},{"class":291},[1421],{"type":28,"value":1379},{"type":23,"tag":278,"props":1423,"children":1424},{"class":337},[1425],{"type":28,"value":278},{"type":23,"tag":278,"props":1427,"children":1428},{"class":291},[1429],{"type":28,"value":294},{"type":23,"tag":278,"props":1431,"children":1432},{"class":1054},[1433],{"type":28,"value":1146},{"type":23,"tag":278,"props":1435,"children":1436},{"class":291},[1437],{"type":28,"value":310},{"type":23,"tag":278,"props":1439,"children":1440},{"class":443},[1441],{"type":28,"value":1442},"\"stat-value\"",{"type":23,"tag":278,"props":1444,"children":1445},{"class":291},[1446],{"type":28,"value":1447},">{{ statValue }}\u003C/",{"type":23,"tag":278,"props":1449,"children":1450},{"class":337},[1451],{"type":28,"value":278},{"type":23,"tag":278,"props":1453,"children":1454},{"class":291},[1455],{"type":28,"value":1160},{"type":23,"tag":278,"props":1457,"children":1459},{"class":280,"line":1458},19,[1460,1465,1469],{"type":23,"tag":278,"props":1461,"children":1462},{"class":291},[1463],{"type":28,"value":1464},"  \u003C/",{"type":23,"tag":278,"props":1466,"children":1467},{"class":337},[1468],{"type":28,"value":1137},{"type":23,"tag":278,"props":1470,"children":1471},{"class":291},[1472],{"type":28,"value":1160},{"type":23,"tag":278,"props":1474,"children":1476},{"class":280,"line":1475},20,[1477],{"type":23,"tag":278,"props":1478,"children":1479},{},[1480],{"type":28,"value":750},{"type":23,"tag":278,"props":1482,"children":1484},{"class":280,"line":1483},21,[1485,1489],{"type":23,"tag":278,"props":1486,"children":1487},{"class":291},[1488],{"type":28,"value":334},{"type":23,"tag":278,"props":1490,"children":1491},{"class":1177},[1492],{"type":28,"value":1493},"\u003C!-- fed label -->\n",{"type":23,"tag":278,"props":1495,"children":1497},{"class":280,"line":1496},22,[1498,1502,1506,1510,1514,1518,1523],{"type":23,"tag":278,"props":1499,"children":1500},{"class":291},[1501],{"type":28,"value":1188},{"type":23,"tag":278,"props":1503,"children":1504},{"class":337},[1505],{"type":28,"value":1137},{"type":23,"tag":278,"props":1507,"children":1508},{"class":291},[1509],{"type":28,"value":294},{"type":23,"tag":278,"props":1511,"children":1512},{"class":1054},[1513],{"type":28,"value":1146},{"type":23,"tag":278,"props":1515,"children":1516},{"class":291},[1517],{"type":28,"value":310},{"type":23,"tag":278,"props":1519,"children":1520},{"class":443},[1521],{"type":28,"value":1522},"\"fed-label\"",{"type":23,"tag":278,"props":1524,"children":1525},{"class":291},[1526],{"type":28,"value":1160},{"type":23,"tag":278,"props":1528,"children":1530},{"class":280,"line":1529},23,[1531],{"type":23,"tag":278,"props":1532,"children":1533},{"class":291},[1534],{"type":28,"value":1535},"    {{ isFed ? '✅' : '❌ NOT' }} FED\n",{"type":23,"tag":278,"props":1537,"children":1539},{"class":280,"line":1538},24,[1540,1544,1548],{"type":23,"tag":278,"props":1541,"children":1542},{"class":291},[1543],{"type":28,"value":1464},{"type":23,"tag":278,"props":1545,"children":1546},{"class":337},[1547],{"type":28,"value":1137},{"type":23,"tag":278,"props":1549,"children":1550},{"class":291},[1551],{"type":28,"value":1160},{"type":23,"tag":278,"props":1553,"children":1555},{"class":280,"line":1554},25,[1556],{"type":23,"tag":278,"props":1557,"children":1558},{"class":291},[1559],{"type":28,"value":1560},"  \n",{"type":23,"tag":278,"props":1562,"children":1564},{"class":280,"line":1563},26,[1565,1570,1574],{"type":23,"tag":278,"props":1566,"children":1567},{"class":291},[1568],{"type":28,"value":1569},"\u003C/",{"type":23,"tag":278,"props":1571,"children":1572},{"class":337},[1573],{"type":28,"value":1137},{"type":23,"tag":278,"props":1575,"children":1576},{"class":291},[1577],{"type":28,"value":1019},{"type":23,"tag":24,"props":1579,"children":1580},{},[1581],{"type":28,"value":1582},"Here we're doing the following things:",{"type":23,"tag":66,"props":1584,"children":1585},{},[1586,1591,1596,1601],{"type":23,"tag":70,"props":1587,"children":1588},{},[1589],{"type":28,"value":1590},"Display the pet's image,",{"type":23,"tag":70,"props":1592,"children":1593},{},[1594],{"type":28,"value":1595},"Display the pet's name,",{"type":23,"tag":70,"props":1597,"children":1598},{},[1599],{"type":28,"value":1600},"Iterate over our computed stats and output them in key: value manner,",{"type":23,"tag":70,"props":1602,"children":1603},{},[1604],{"type":28,"value":1605},"Display the \"fed\" label in coherence with the computed state.",{"type":23,"tag":24,"props":1607,"children":1608},{},[1609],{"type":28,"value":1610},"That's it for the template.",{"type":23,"tag":24,"props":1612,"children":1613},{},[1614],{"type":28,"value":1615},"Our component also declares some styles, but I won't list them all here for simplicity sake, let's just assume they're there.",{"type":23,"tag":234,"props":1617,"children":1619},{"id":1618},"iteration-1-results",[1620],{"type":28,"value":1621},"Iteration 1 Results",{"type":23,"tag":24,"props":1623,"children":1624},{},[1625],{"type":28,"value":1626},"As of this moment, everything in our component is perfectly in its place. It does not require any refactoring whatsoever: it's simple, straightforward, easy to read and work with.",{"type":23,"tag":234,"props":1628,"children":1630},{"id":1629},"iteration-2",[1631],{"type":28,"value":1632},"Iteration 2",{"type":23,"tag":24,"props":1634,"children":1635},{},[1636],{"type":28,"value":1637},"But what happens if we add a different item type to the mix?",{"type":23,"tag":24,"props":1639,"children":1640},{},[1641],{"type":23,"tag":202,"props":1642,"children":1645},{"alt":1643,"src":1644},"example app second stage","/blog/extend-components/example-2.png",[],{"type":23,"tag":24,"props":1647,"children":1648},{},[1649,1651,1656],{"type":28,"value":1650},"You can see that in this next iteration of our project, a different item type was added - a ",{"type":23,"tag":97,"props":1652,"children":1653},{},[1654],{"type":28,"value":1655},"weapon",{"type":28,"value":123},{"type":23,"tag":24,"props":1658,"children":1659},{},[1660],{"type":28,"value":1661},"Its appearance shares a lot of similarities with the first one we had, but there are some subtle differences as well. Here's what's different:",{"type":23,"tag":66,"props":1663,"children":1664},{},[1665,1670],{"type":23,"tag":70,"props":1666,"children":1667},{},[1668],{"type":28,"value":1669},"There is no \"fed\" label of course - you don't need to feed your weapons.",{"type":23,"tag":70,"props":1671,"children":1672},{},[1673],{"type":28,"value":1674},"And the stats, while still in place, list completely different properties.",{"type":23,"tag":24,"props":1676,"children":1677},{},[1678],{"type":28,"value":1679},"Everything else seems the same, so let's go back to our code and see how we can modify it to keep up with this new item type.",{"type":23,"tag":234,"props":1681,"children":1683},{"id":1682},"extend-the-components-props",[1684],{"type":28,"value":1685},"Extend the Component's Props",{"type":23,"tag":24,"props":1687,"children":1688},{},[1689],{"type":28,"value":1690},"The first and the most natural thing to do in this situation is to extend the type of our prop.",{"type":23,"tag":24,"props":1692,"children":1693},{},[1694],{"type":28,"value":1695},"As you will see as you keep reading, it'll turn out to be a mistake. But I want to show you how easy it is to fall for this trap because of how natural it feels.",{"type":23,"tag":24,"props":1697,"children":1698},{},[1699],{"type":28,"value":1700},"So let's extend our prop:",{"type":23,"tag":264,"props":1702,"children":1704},{"code":1703,"language":267,"meta":268},"const props = defineProps\u003C{\n  item: Pet|Weapon\n}>()\n",[1705],{"type":23,"tag":271,"props":1706,"children":1707},{},[1708],{"type":23,"tag":264,"props":1709,"children":1710},{"__ignoreMap":7},[1711,1746,1776],{"type":23,"tag":278,"props":1712,"children":1713},{"class":280,"line":281},[1714,1718,1722,1726,1730,1734,1738,1742],{"type":23,"tag":278,"props":1715,"children":1716},{"class":285},[1717],{"type":28,"value":288},{"type":23,"tag":278,"props":1719,"children":1720},{"class":291},[1721],{"type":28,"value":294},{"type":23,"tag":278,"props":1723,"children":1724},{"class":297},[1725],{"type":28,"value":300},{"type":23,"tag":278,"props":1727,"children":1728},{"class":291},[1729],{"type":28,"value":294},{"type":23,"tag":278,"props":1731,"children":1732},{"class":307},[1733],{"type":28,"value":310},{"type":23,"tag":278,"props":1735,"children":1736},{"class":291},[1737],{"type":28,"value":294},{"type":23,"tag":278,"props":1739,"children":1740},{"class":317},[1741],{"type":28,"value":320},{"type":23,"tag":278,"props":1743,"children":1744},{"class":291},[1745],{"type":28,"value":325},{"type":23,"tag":278,"props":1747,"children":1748},{"class":280,"line":328},[1749,1753,1758,1762,1766,1771],{"type":23,"tag":278,"props":1750,"children":1751},{"class":291},[1752],{"type":28,"value":334},{"type":23,"tag":278,"props":1754,"children":1755},{"class":337},[1756],{"type":28,"value":1757},"item",{"type":23,"tag":278,"props":1759,"children":1760},{"class":291},[1761],{"type":28,"value":344},{"type":23,"tag":278,"props":1763,"children":1764},{"class":297},[1765],{"type":28,"value":374},{"type":23,"tag":278,"props":1767,"children":1768},{"class":291},[1769],{"type":28,"value":1770},"|",{"type":23,"tag":278,"props":1772,"children":1773},{"class":297},[1774],{"type":28,"value":1775},"Weapon\n",{"type":23,"tag":278,"props":1777,"children":1778},{"class":280,"line":352},[1779],{"type":23,"tag":278,"props":1780,"children":1781},{"class":291},[1782],{"type":28,"value":358},{"type":23,"tag":24,"props":1784,"children":1785},{},[1786,1788,1792,1794,1798,1799,1804],{"type":28,"value":1787},"You can see I have renamed our prop to ",{"type":23,"tag":151,"props":1789,"children":1790},{},[1791],{"type":28,"value":1757},{"type":28,"value":1793},", because it can now be of both type ",{"type":23,"tag":151,"props":1795,"children":1796},{},[1797],{"type":28,"value":374},{"type":28,"value":116},{"type":23,"tag":151,"props":1800,"children":1801},{},[1802],{"type":28,"value":1803},"Weapon",{"type":28,"value":123},{"type":23,"tag":24,"props":1806,"children":1807},{},[1808,1810,1814],{"type":28,"value":1809},"By the way, here's an expanded ",{"type":23,"tag":151,"props":1811,"children":1812},{},[1813],{"type":28,"value":1803},{"type":28,"value":1815}," type:",{"type":23,"tag":264,"props":1817,"children":1819},{"code":1818,"language":267,"meta":268},"type Weapon = {\n  type: 'weapon'\n  pictureUrl: string\n  name: string\n  damage: number\n  critChance: number\n}\n",[1820],{"type":23,"tag":271,"props":1821,"children":1822},{},[1823],{"type":23,"tag":264,"props":1824,"children":1825},{"__ignoreMap":7},[1826,1853,1873,1892,1911,1931,1951],{"type":23,"tag":278,"props":1827,"children":1828},{"class":280,"line":281},[1829,1833,1837,1841,1845,1849],{"type":23,"tag":278,"props":1830,"children":1831},{"class":285},[1832],{"type":28,"value":404},{"type":23,"tag":278,"props":1834,"children":1835},{"class":291},[1836],{"type":28,"value":294},{"type":23,"tag":278,"props":1838,"children":1839},{"class":297},[1840],{"type":28,"value":1803},{"type":23,"tag":278,"props":1842,"children":1843},{"class":291},[1844],{"type":28,"value":294},{"type":23,"tag":278,"props":1846,"children":1847},{"class":307},[1848],{"type":28,"value":310},{"type":23,"tag":278,"props":1850,"children":1851},{"class":291},[1852],{"type":28,"value":425},{"type":23,"tag":278,"props":1854,"children":1855},{"class":280,"line":328},[1856,1860,1864,1868],{"type":23,"tag":278,"props":1857,"children":1858},{"class":291},[1859],{"type":28,"value":334},{"type":23,"tag":278,"props":1861,"children":1862},{"class":337},[1863],{"type":28,"value":404},{"type":23,"tag":278,"props":1865,"children":1866},{"class":291},[1867],{"type":28,"value":344},{"type":23,"tag":278,"props":1869,"children":1870},{"class":443},[1871],{"type":28,"value":1872},"'weapon'\n",{"type":23,"tag":278,"props":1874,"children":1875},{"class":280,"line":352},[1876,1880,1884,1888],{"type":23,"tag":278,"props":1877,"children":1878},{"class":291},[1879],{"type":28,"value":334},{"type":23,"tag":278,"props":1881,"children":1882},{"class":337},[1883],{"type":28,"value":458},{"type":23,"tag":278,"props":1885,"children":1886},{"class":291},[1887],{"type":28,"value":344},{"type":23,"tag":278,"props":1889,"children":1890},{"class":297},[1891],{"type":28,"value":467},{"type":23,"tag":278,"props":1893,"children":1894},{"class":280,"line":470},[1895,1899,1903,1907],{"type":23,"tag":278,"props":1896,"children":1897},{"class":291},[1898],{"type":28,"value":334},{"type":23,"tag":278,"props":1900,"children":1901},{"class":337},[1902],{"type":28,"value":480},{"type":23,"tag":278,"props":1904,"children":1905},{"class":291},[1906],{"type":28,"value":344},{"type":23,"tag":278,"props":1908,"children":1909},{"class":297},[1910],{"type":28,"value":467},{"type":23,"tag":278,"props":1912,"children":1913},{"class":280,"line":491},[1914,1918,1923,1927],{"type":23,"tag":278,"props":1915,"children":1916},{"class":291},[1917],{"type":28,"value":334},{"type":23,"tag":278,"props":1919,"children":1920},{"class":337},[1921],{"type":28,"value":1922},"damage",{"type":23,"tag":278,"props":1924,"children":1925},{"class":291},[1926],{"type":28,"value":344},{"type":23,"tag":278,"props":1928,"children":1929},{"class":297},[1930],{"type":28,"value":510},{"type":23,"tag":278,"props":1932,"children":1933},{"class":280,"line":513},[1934,1938,1943,1947],{"type":23,"tag":278,"props":1935,"children":1936},{"class":291},[1937],{"type":28,"value":334},{"type":23,"tag":278,"props":1939,"children":1940},{"class":337},[1941],{"type":28,"value":1942},"critChance",{"type":23,"tag":278,"props":1944,"children":1945},{"class":291},[1946],{"type":28,"value":344},{"type":23,"tag":278,"props":1948,"children":1949},{"class":297},[1950],{"type":28,"value":510},{"type":23,"tag":278,"props":1952,"children":1953},{"class":280,"line":534},[1954],{"type":23,"tag":278,"props":1955,"children":1956},{"class":291},[1957],{"type":28,"value":582},{"type":23,"tag":24,"props":1959,"children":1960},{},[1961,1963,1968],{"type":28,"value":1962},"Right away you can see that, in the same manner as the pet, it has a type field, but this time it says ",{"type":23,"tag":151,"props":1964,"children":1965},{},[1966],{"type":28,"value":1967},"'weapon'",{"type":28,"value":1969},". Just like the pet it has a picture and a name, but all the other fields are different.",{"type":23,"tag":234,"props":1971,"children":1973},{"id":1972},"the-script-1",[1974],{"type":28,"value":1975},"The Script",{"type":23,"tag":24,"props":1977,"children":1978},{},[1979],{"type":28,"value":1980},"Now, let's look at what needs to change in the script:",{"type":23,"tag":24,"props":1982,"children":1983},{},[1984],{"type":28,"value":1985},"The image part doesn't need to change since it's the same for both the pet and the weapon.",{"type":23,"tag":24,"props":1987,"children":1988},{},[1989],{"type":28,"value":1990},"But as we go to the stats, we can see that this one requires some updates. The stats object for the weapon needs to be completely different from the pet, it has different keys, and it uses different properties of the weapon object as values.",{"type":23,"tag":24,"props":1992,"children":1993},{},[1994],{"type":28,"value":1995},"So here's the updated version:",{"type":23,"tag":264,"props":1997,"children":1999},{"code":1998,"language":267,"meta":268},"const stats = computed(() => {\n  switch (props.item.type) {\n  case 'pet':\n    return {\n      'happiness': `${props.item.happiness}/${props.item.maxHappiness}`,\n      'mood': props.item.mood\n    }\n  case 'weapon':\n    return {\n      'damage': props.item.damage,\n      'crit chance': props.item.critChance\n    }\n  }\n})\n",[2000],{"type":23,"tag":271,"props":2001,"children":2002},{},[2003],{"type":23,"tag":264,"props":2004,"children":2005},{"__ignoreMap":7},[2006,2049,2091,2116,2132,2220,2255,2263,2286,2301,2341,2378,2385,2393],{"type":23,"tag":278,"props":2007,"children":2008},{"class":280,"line":281},[2009,2013,2017,2021,2025,2029,2033,2037,2041,2045],{"type":23,"tag":278,"props":2010,"children":2011},{"class":285},[2012],{"type":28,"value":288},{"type":23,"tag":278,"props":2014,"children":2015},{"class":291},[2016],{"type":28,"value":294},{"type":23,"tag":278,"props":2018,"children":2019},{"class":297},[2020],{"type":28,"value":766},{"type":23,"tag":278,"props":2022,"children":2023},{"class":291},[2024],{"type":28,"value":294},{"type":23,"tag":278,"props":2026,"children":2027},{"class":307},[2028],{"type":28,"value":310},{"type":23,"tag":278,"props":2030,"children":2031},{"class":291},[2032],{"type":28,"value":294},{"type":23,"tag":278,"props":2034,"children":2035},{"class":317},[2036],{"type":28,"value":664},{"type":23,"tag":278,"props":2038,"children":2039},{"class":291},[2040],{"type":28,"value":669},{"type":23,"tag":278,"props":2042,"children":2043},{"class":285},[2044],{"type":28,"value":674},{"type":23,"tag":278,"props":2046,"children":2047},{"class":291},[2048],{"type":28,"value":425},{"type":23,"tag":278,"props":2050,"children":2051},{"class":280,"line":328},[2052,2056,2061,2066,2070,2074,2078,2082,2086],{"type":23,"tag":278,"props":2053,"children":2054},{"class":291},[2055],{"type":28,"value":334},{"type":23,"tag":278,"props":2057,"children":2058},{"class":285},[2059],{"type":28,"value":2060},"switch",{"type":23,"tag":278,"props":2062,"children":2063},{"class":291},[2064],{"type":28,"value":2065}," (",{"type":23,"tag":278,"props":2067,"children":2068},{"class":297},[2069],{"type":28,"value":300},{"type":23,"tag":278,"props":2071,"children":2072},{"class":291},[2073],{"type":28,"value":123},{"type":23,"tag":278,"props":2075,"children":2076},{"class":297},[2077],{"type":28,"value":1757},{"type":23,"tag":278,"props":2079,"children":2080},{"class":291},[2081],{"type":28,"value":123},{"type":23,"tag":278,"props":2083,"children":2084},{"class":337},[2085],{"type":28,"value":404},{"type":23,"tag":278,"props":2087,"children":2088},{"class":291},[2089],{"type":28,"value":2090},") {\n",{"type":23,"tag":278,"props":2092,"children":2093},{"class":280,"line":352},[2094,2098,2103,2107,2111],{"type":23,"tag":278,"props":2095,"children":2096},{"class":291},[2097],{"type":28,"value":334},{"type":23,"tag":278,"props":2099,"children":2100},{"class":285},[2101],{"type":28,"value":2102},"case",{"type":23,"tag":278,"props":2104,"children":2105},{"class":291},[2106],{"type":28,"value":294},{"type":23,"tag":278,"props":2108,"children":2109},{"class":443},[2110],{"type":28,"value":598},{"type":23,"tag":278,"props":2112,"children":2113},{"class":291},[2114],{"type":28,"value":2115},":\n",{"type":23,"tag":278,"props":2117,"children":2118},{"class":280,"line":470},[2119,2123,2128],{"type":23,"tag":278,"props":2120,"children":2121},{"class":291},[2122],{"type":28,"value":1201},{"type":23,"tag":278,"props":2124,"children":2125},{"class":285},[2126],{"type":28,"value":2127},"return",{"type":23,"tag":278,"props":2129,"children":2130},{"class":291},[2131],{"type":28,"value":425},{"type":23,"tag":278,"props":2133,"children":2134},{"class":280,"line":491},[2135,2140,2144,2148,2152,2156,2160,2164,2168,2172,2176,2180,2184,2188,2192,2196,2200,2204,2208,2212,2216],{"type":23,"tag":278,"props":2136,"children":2137},{"class":291},[2138],{"type":28,"value":2139},"      ",{"type":23,"tag":278,"props":2141,"children":2142},{"class":443},[2143],{"type":28,"value":806},{"type":23,"tag":278,"props":2145,"children":2146},{"class":291},[2147],{"type":28,"value":344},{"type":23,"tag":278,"props":2149,"children":2150},{"class":443},[2151],{"type":28,"value":815},{"type":23,"tag":278,"props":2153,"children":2154},{"class":285},[2155],{"type":28,"value":705},{"type":23,"tag":278,"props":2157,"children":2158},{"class":297},[2159],{"type":28,"value":300},{"type":23,"tag":278,"props":2161,"children":2162},{"class":291},[2163],{"type":28,"value":123},{"type":23,"tag":278,"props":2165,"children":2166},{"class":297},[2167],{"type":28,"value":1757},{"type":23,"tag":278,"props":2169,"children":2170},{"class":291},[2171],{"type":28,"value":123},{"type":23,"tag":278,"props":2173,"children":2174},{"class":337},[2175],{"type":28,"value":501},{"type":23,"tag":278,"props":2177,"children":2178},{"class":285},[2179],{"type":28,"value":582},{"type":23,"tag":278,"props":2181,"children":2182},{"class":443},[2183],{"type":28,"value":848},{"type":23,"tag":278,"props":2185,"children":2186},{"class":285},[2187],{"type":28,"value":705},{"type":23,"tag":278,"props":2189,"children":2190},{"class":297},[2191],{"type":28,"value":300},{"type":23,"tag":278,"props":2193,"children":2194},{"class":291},[2195],{"type":28,"value":123},{"type":23,"tag":278,"props":2197,"children":2198},{"class":297},[2199],{"type":28,"value":1757},{"type":23,"tag":278,"props":2201,"children":2202},{"class":291},[2203],{"type":28,"value":123},{"type":23,"tag":278,"props":2205,"children":2206},{"class":337},[2207],{"type":28,"value":523},{"type":23,"tag":278,"props":2209,"children":2210},{"class":285},[2211],{"type":28,"value":582},{"type":23,"tag":278,"props":2213,"children":2214},{"class":443},[2215],{"type":28,"value":815},{"type":23,"tag":278,"props":2217,"children":2218},{"class":291},[2219],{"type":28,"value":885},{"type":23,"tag":278,"props":2221,"children":2222},{"class":280,"line":513},[2223,2227,2231,2235,2239,2243,2247,2251],{"type":23,"tag":278,"props":2224,"children":2225},{"class":291},[2226],{"type":28,"value":2139},{"type":23,"tag":278,"props":2228,"children":2229},{"class":443},[2230],{"type":28,"value":897},{"type":23,"tag":278,"props":2232,"children":2233},{"class":291},[2234],{"type":28,"value":344},{"type":23,"tag":278,"props":2236,"children":2237},{"class":297},[2238],{"type":28,"value":300},{"type":23,"tag":278,"props":2240,"children":2241},{"class":291},[2242],{"type":28,"value":123},{"type":23,"tag":278,"props":2244,"children":2245},{"class":297},[2246],{"type":28,"value":1757},{"type":23,"tag":278,"props":2248,"children":2249},{"class":291},[2250],{"type":28,"value":123},{"type":23,"tag":278,"props":2252,"children":2253},{"class":337},[2254],{"type":28,"value":922},{"type":23,"tag":278,"props":2256,"children":2257},{"class":280,"line":534},[2258],{"type":23,"tag":278,"props":2259,"children":2260},{"class":291},[2261],{"type":28,"value":2262},"    }\n",{"type":23,"tag":278,"props":2264,"children":2265},{"class":280,"line":555},[2266,2270,2274,2278,2282],{"type":23,"tag":278,"props":2267,"children":2268},{"class":291},[2269],{"type":28,"value":334},{"type":23,"tag":278,"props":2271,"children":2272},{"class":285},[2273],{"type":28,"value":2102},{"type":23,"tag":278,"props":2275,"children":2276},{"class":291},[2277],{"type":28,"value":294},{"type":23,"tag":278,"props":2279,"children":2280},{"class":443},[2281],{"type":28,"value":1967},{"type":23,"tag":278,"props":2283,"children":2284},{"class":291},[2285],{"type":28,"value":2115},{"type":23,"tag":278,"props":2287,"children":2288},{"class":280,"line":576},[2289,2293,2297],{"type":23,"tag":278,"props":2290,"children":2291},{"class":291},[2292],{"type":28,"value":1201},{"type":23,"tag":278,"props":2294,"children":2295},{"class":285},[2296],{"type":28,"value":2127},{"type":23,"tag":278,"props":2298,"children":2299},{"class":291},[2300],{"type":28,"value":425},{"type":23,"tag":278,"props":2302,"children":2303},{"class":280,"line":939},[2304,2308,2313,2317,2321,2325,2329,2333,2337],{"type":23,"tag":278,"props":2305,"children":2306},{"class":291},[2307],{"type":28,"value":2139},{"type":23,"tag":278,"props":2309,"children":2310},{"class":443},[2311],{"type":28,"value":2312},"'damage'",{"type":23,"tag":278,"props":2314,"children":2315},{"class":291},[2316],{"type":28,"value":344},{"type":23,"tag":278,"props":2318,"children":2319},{"class":297},[2320],{"type":28,"value":300},{"type":23,"tag":278,"props":2322,"children":2323},{"class":291},[2324],{"type":28,"value":123},{"type":23,"tag":278,"props":2326,"children":2327},{"class":297},[2328],{"type":28,"value":1757},{"type":23,"tag":278,"props":2330,"children":2331},{"class":291},[2332],{"type":28,"value":123},{"type":23,"tag":278,"props":2334,"children":2335},{"class":337},[2336],{"type":28,"value":1922},{"type":23,"tag":278,"props":2338,"children":2339},{"class":291},[2340],{"type":28,"value":885},{"type":23,"tag":278,"props":2342,"children":2343},{"class":280,"line":985},[2344,2348,2353,2357,2361,2365,2369,2373],{"type":23,"tag":278,"props":2345,"children":2346},{"class":291},[2347],{"type":28,"value":2139},{"type":23,"tag":278,"props":2349,"children":2350},{"class":443},[2351],{"type":28,"value":2352},"'crit chance'",{"type":23,"tag":278,"props":2354,"children":2355},{"class":291},[2356],{"type":28,"value":344},{"type":23,"tag":278,"props":2358,"children":2359},{"class":297},[2360],{"type":28,"value":300},{"type":23,"tag":278,"props":2362,"children":2363},{"class":291},[2364],{"type":28,"value":123},{"type":23,"tag":278,"props":2366,"children":2367},{"class":297},[2368],{"type":28,"value":1757},{"type":23,"tag":278,"props":2370,"children":2371},{"class":291},[2372],{"type":28,"value":123},{"type":23,"tag":278,"props":2374,"children":2375},{"class":337},[2376],{"type":28,"value":2377},"critChance\n",{"type":23,"tag":278,"props":2379,"children":2380},{"class":280,"line":1060},[2381],{"type":23,"tag":278,"props":2382,"children":2383},{"class":291},[2384],{"type":28,"value":2262},{"type":23,"tag":278,"props":2386,"children":2387},{"class":280,"line":1308},[2388],{"type":23,"tag":278,"props":2389,"children":2390},{"class":291},[2391],{"type":28,"value":2392},"  }\n",{"type":23,"tag":278,"props":2394,"children":2395},{"class":280,"line":1320},[2396],{"type":23,"tag":278,"props":2397,"children":2398},{"class":291},[2399],{"type":28,"value":2400},"})",{"type":23,"tag":24,"props":2402,"children":2403},{},[2404],{"type":28,"value":2405},"We had to add a switch case statement to our computed, checking the item type, and returning a different object for each of them. In case of a pet it returns its happiness and mood, like it did in the first iteration, and in case of a weapon, it returns its damage and crit chance.",{"type":23,"tag":24,"props":2407,"children":2408},{},[2409,2411,2415],{"type":28,"value":2410},"As we keep going, we notice that our ",{"type":23,"tag":151,"props":2412,"children":2413},{},[2414],{"type":28,"value":953},{"type":28,"value":2416}," computed needs to be updated as well:",{"type":23,"tag":264,"props":2418,"children":2420},{"code":2419,"language":267,"meta":268},"const isFed = computed(() => {\n  if (props.item.type != 'pet') {\n    return false\n  }\n  return props.item.lastFed > Date.now() - 30000\n})\n",[2421],{"type":23,"tag":271,"props":2422,"children":2423},{},[2424],{"type":23,"tag":264,"props":2425,"children":2426},{"__ignoreMap":7},[2427,2470,2527,2547,2554,2629],{"type":23,"tag":278,"props":2428,"children":2429},{"class":280,"line":281},[2430,2434,2438,2442,2446,2450,2454,2458,2462,2466],{"type":23,"tag":278,"props":2431,"children":2432},{"class":285},[2433],{"type":28,"value":288},{"type":23,"tag":278,"props":2435,"children":2436},{"class":291},[2437],{"type":28,"value":294},{"type":23,"tag":278,"props":2439,"children":2440},{"class":297},[2441],{"type":28,"value":953},{"type":23,"tag":278,"props":2443,"children":2444},{"class":291},[2445],{"type":28,"value":294},{"type":23,"tag":278,"props":2447,"children":2448},{"class":307},[2449],{"type":28,"value":310},{"type":23,"tag":278,"props":2451,"children":2452},{"class":291},[2453],{"type":28,"value":294},{"type":23,"tag":278,"props":2455,"children":2456},{"class":317},[2457],{"type":28,"value":664},{"type":23,"tag":278,"props":2459,"children":2460},{"class":291},[2461],{"type":28,"value":669},{"type":23,"tag":278,"props":2463,"children":2464},{"class":285},[2465],{"type":28,"value":674},{"type":23,"tag":278,"props":2467,"children":2468},{"class":291},[2469],{"type":28,"value":425},{"type":23,"tag":278,"props":2471,"children":2472},{"class":280,"line":328},[2473,2477,2482,2486,2490,2494,2498,2502,2506,2510,2515,2519,2523],{"type":23,"tag":278,"props":2474,"children":2475},{"class":291},[2476],{"type":28,"value":334},{"type":23,"tag":278,"props":2478,"children":2479},{"class":285},[2480],{"type":28,"value":2481},"if",{"type":23,"tag":278,"props":2483,"children":2484},{"class":291},[2485],{"type":28,"value":2065},{"type":23,"tag":278,"props":2487,"children":2488},{"class":297},[2489],{"type":28,"value":300},{"type":23,"tag":278,"props":2491,"children":2492},{"class":291},[2493],{"type":28,"value":123},{"type":23,"tag":278,"props":2495,"children":2496},{"class":297},[2497],{"type":28,"value":1757},{"type":23,"tag":278,"props":2499,"children":2500},{"class":291},[2501],{"type":28,"value":123},{"type":23,"tag":278,"props":2503,"children":2504},{"class":337},[2505],{"type":28,"value":404},{"type":23,"tag":278,"props":2507,"children":2508},{"class":291},[2509],{"type":28,"value":294},{"type":23,"tag":278,"props":2511,"children":2512},{"class":307},[2513],{"type":28,"value":2514},"!=",{"type":23,"tag":278,"props":2516,"children":2517},{"class":291},[2518],{"type":28,"value":294},{"type":23,"tag":278,"props":2520,"children":2521},{"class":443},[2522],{"type":28,"value":598},{"type":23,"tag":278,"props":2524,"children":2525},{"class":291},[2526],{"type":28,"value":2090},{"type":23,"tag":278,"props":2528,"children":2529},{"class":280,"line":352},[2530,2534,2538,2542],{"type":23,"tag":278,"props":2531,"children":2532},{"class":291},[2533],{"type":28,"value":1201},{"type":23,"tag":278,"props":2535,"children":2536},{"class":285},[2537],{"type":28,"value":2127},{"type":23,"tag":278,"props":2539,"children":2540},{"class":291},[2541],{"type":28,"value":294},{"type":23,"tag":278,"props":2543,"children":2544},{"class":1054},[2545],{"type":28,"value":2546},"false\n",{"type":23,"tag":278,"props":2548,"children":2549},{"class":280,"line":470},[2550],{"type":23,"tag":278,"props":2551,"children":2552},{"class":291},[2553],{"type":28,"value":2392},{"type":23,"tag":278,"props":2555,"children":2556},{"class":280,"line":491},[2557,2561,2565,2569,2573,2577,2581,2585,2589,2593,2597,2601,2605,2609,2613,2617,2621,2625],{"type":23,"tag":278,"props":2558,"children":2559},{"class":291},[2560],{"type":28,"value":334},{"type":23,"tag":278,"props":2562,"children":2563},{"class":285},[2564],{"type":28,"value":2127},{"type":23,"tag":278,"props":2566,"children":2567},{"class":291},[2568],{"type":28,"value":294},{"type":23,"tag":278,"props":2570,"children":2571},{"class":297},[2572],{"type":28,"value":300},{"type":23,"tag":278,"props":2574,"children":2575},{"class":291},[2576],{"type":28,"value":123},{"type":23,"tag":278,"props":2578,"children":2579},{"class":297},[2580],{"type":28,"value":1757},{"type":23,"tag":278,"props":2582,"children":2583},{"class":291},[2584],{"type":28,"value":123},{"type":23,"tag":278,"props":2586,"children":2587},{"class":337},[2588],{"type":28,"value":565},{"type":23,"tag":278,"props":2590,"children":2591},{"class":291},[2592],{"type":28,"value":294},{"type":23,"tag":278,"props":2594,"children":2595},{"class":307},[2596],{"type":28,"value":1019},{"type":23,"tag":278,"props":2598,"children":2599},{"class":291},[2600],{"type":28,"value":294},{"type":23,"tag":278,"props":2602,"children":2603},{"class":297},[2604],{"type":28,"value":1028},{"type":23,"tag":278,"props":2606,"children":2607},{"class":291},[2608],{"type":28,"value":123},{"type":23,"tag":278,"props":2610,"children":2611},{"class":317},[2612],{"type":28,"value":1037},{"type":23,"tag":278,"props":2614,"children":2615},{"class":291},[2616],{"type":28,"value":1042},{"type":23,"tag":278,"props":2618,"children":2619},{"class":307},[2620],{"type":28,"value":1047},{"type":23,"tag":278,"props":2622,"children":2623},{"class":291},[2624],{"type":28,"value":294},{"type":23,"tag":278,"props":2626,"children":2627},{"class":1054},[2628],{"type":28,"value":1057},{"type":23,"tag":278,"props":2630,"children":2631},{"class":280,"line":513},[2632],{"type":23,"tag":278,"props":2633,"children":2634},{"class":291},[2635],{"type":28,"value":2400},{"type":23,"tag":24,"props":2637,"children":2638},{},[2639,2641,2646],{"type":28,"value":2640},"Because only the pet can be fed or not, we add an if statement, returning ",{"type":23,"tag":151,"props":2642,"children":2643},{},[2644],{"type":28,"value":2645},"false",{"type":28,"value":2647}," for any item but the pet. And if we're dealing with the pet, we run our computation from earlier and return the result.",{"type":23,"tag":234,"props":2649,"children":2651},{"id":2650},"the-template-1",[2652],{"type":28,"value":1108},{"type":23,"tag":24,"props":2654,"children":2655},{},[2656],{"type":28,"value":2657},"Next, let's update the template:",{"type":23,"tag":24,"props":2659,"children":2660},{},[2661],{"type":28,"value":2662},"The only thing that needs to update in the template is our \"fed\" label. Since it's only relevant for the pets, we need to add a condition here as well, otherwise we would end up with \"not fed\" weapons.",{"type":23,"tag":264,"props":2664,"children":2666},{"code":2665,"language":1117,"meta":268},"\u003Cdiv\n  v-if=\"item.type == 'pet'\"\n  class=\"fed-label\"\n>\n  {{ isFed ? '✅' : '❌ NOT' }} FED\n\u003C/div>\n",[2667],{"type":23,"tag":271,"props":2668,"children":2669},{},[2670],{"type":23,"tag":264,"props":2671,"children":2672},{"__ignoreMap":7},[2673,2684,2705,2725,2732,2740],{"type":23,"tag":278,"props":2674,"children":2675},{"class":280,"line":281},[2676,2680],{"type":23,"tag":278,"props":2677,"children":2678},{"class":291},[2679],{"type":28,"value":1132},{"type":23,"tag":278,"props":2681,"children":2682},{"class":337},[2683],{"type":28,"value":1193},{"type":23,"tag":278,"props":2685,"children":2686},{"class":280,"line":328},[2687,2691,2696,2700],{"type":23,"tag":278,"props":2688,"children":2689},{"class":291},[2690],{"type":28,"value":334},{"type":23,"tag":278,"props":2692,"children":2693},{"class":1054},[2694],{"type":28,"value":2695},"v-if",{"type":23,"tag":278,"props":2697,"children":2698},{"class":291},[2699],{"type":28,"value":310},{"type":23,"tag":278,"props":2701,"children":2702},{"class":443},[2703],{"type":28,"value":2704},"\"item.type == 'pet'\"\n",{"type":23,"tag":278,"props":2706,"children":2707},{"class":280,"line":352},[2708,2712,2716,2720],{"type":23,"tag":278,"props":2709,"children":2710},{"class":291},[2711],{"type":28,"value":334},{"type":23,"tag":278,"props":2713,"children":2714},{"class":1054},[2715],{"type":28,"value":1146},{"type":23,"tag":278,"props":2717,"children":2718},{"class":291},[2719],{"type":28,"value":310},{"type":23,"tag":278,"props":2721,"children":2722},{"class":443},[2723],{"type":28,"value":2724},"\"fed-label\"\n",{"type":23,"tag":278,"props":2726,"children":2727},{"class":280,"line":470},[2728],{"type":23,"tag":278,"props":2729,"children":2730},{"class":291},[2731],{"type":28,"value":1160},{"type":23,"tag":278,"props":2733,"children":2734},{"class":280,"line":491},[2735],{"type":23,"tag":278,"props":2736,"children":2737},{"class":291},[2738],{"type":28,"value":2739},"  {{ isFed ? '✅' : '❌ NOT' }} FED\n",{"type":23,"tag":278,"props":2741,"children":2742},{"class":280,"line":513},[2743,2747,2751],{"type":23,"tag":278,"props":2744,"children":2745},{"class":291},[2746],{"type":28,"value":1569},{"type":23,"tag":278,"props":2748,"children":2749},{"class":337},[2750],{"type":28,"value":1137},{"type":23,"tag":278,"props":2752,"children":2753},{"class":291},[2754],{"type":28,"value":1019},{"type":23,"tag":234,"props":2756,"children":2758},{"id":2757},"iteration-2-results",[2759],{"type":28,"value":2760},"Iteration 2 Results",{"type":23,"tag":24,"props":2762,"children":2763},{},[2764],{"type":28,"value":2765},"You may begin noticing the pattern here: during the second iteration, we didn't add any business logic, any new elements or styles, and still our component grew in terms of amount of code and its complexity.",{"type":23,"tag":24,"props":2767,"children":2768},{},[2769],{"type":28,"value":2770},"The computed properties used to be single-line, simply returning some value. And now they all contain some conditional statements, that have nothing to do with business logic. Instead, they are solving problems of our poor component composition decisions.",{"type":23,"tag":24,"props":2772,"children":2773},{},[2774],{"type":28,"value":2775},"Same applies to the change that we introduced to the template.",{"type":23,"tag":24,"props":2777,"children":2778},{},[2779,2781,2786],{"type":28,"value":2780},"This all sums up to: we have added a layer of complexity that wasn't there ",{"type":23,"tag":97,"props":2782,"children":2783},{},[2784],{"type":28,"value":2785},"by design",{"type":28,"value":123},{"type":23,"tag":234,"props":2788,"children":2790},{"id":2789},"iteration-3",[2791],{"type":28,"value":2792},"Iteration 3",{"type":23,"tag":24,"props":2794,"children":2795},{},[2796],{"type":28,"value":2797},"Let's take it one step further and add another item type",{"type":23,"tag":24,"props":2799,"children":2800},{},[2801],{"type":23,"tag":202,"props":2802,"children":2805},{"alt":2803,"src":2804},"example app third stage","/blog/extend-components/example-3.png",[],{"type":23,"tag":24,"props":2807,"children":2808},{},[2809,2811,2816],{"type":28,"value":2810},"We have added a new item to our application - this time it's an ",{"type":23,"tag":97,"props":2812,"children":2813},{},[2814],{"type":28,"value":2815},"amulet",{"type":28,"value":123},{"type":23,"tag":24,"props":2818,"children":2819},{},[2820,2822,2827],{"type":28,"value":2821},"And while it still shares some similarities with the other two, you can notice right away that there is one significant difference: this item has no stats whatsoever. Instead, it has an ",{"type":23,"tag":97,"props":2823,"children":2824},{},[2825],{"type":28,"value":2826},"ability",{"type":28,"value":2828},", and this ability is displayed in place of stats with a completely new design.",{"type":23,"tag":24,"props":2830,"children":2831},{},[2832],{"type":28,"value":2833},"Since we've already started extending our component's prop's type, let's keep going extend it a bit further.",{"type":23,"tag":130,"props":2835,"children":2836},{},[2837],{"type":23,"tag":24,"props":2838,"children":2839},{},[2840,2845],{"type":23,"tag":110,"props":2841,"children":2842},{},[2843],{"type":28,"value":2844},"Side note",{"type":28,"value":2846},": in reality, it's never to late to question your component composition decisions. If during some iteration you notice something is off and can be improved, don't think \"I'm already doing it this way, it's too late to fix this now, I should keep doing the same\". Instead, think \"This doesn't look right, now is the best time to fix it, because next time it will be twice as hard\".",{"type":23,"tag":234,"props":2848,"children":2850},{"id":2849},"extend-the-components-props-1",[2851],{"type":28,"value":1685},{"type":23,"tag":264,"props":2853,"children":2855},{"code":2854,"language":267,"meta":268},"const props = defineProps\u003C{\n  item: Pet|Weapon|Amulet\n}>()\n",[2856],{"type":23,"tag":271,"props":2857,"children":2858},{},[2859],{"type":23,"tag":264,"props":2860,"children":2861},{"__ignoreMap":7},[2862,2897,2933],{"type":23,"tag":278,"props":2863,"children":2864},{"class":280,"line":281},[2865,2869,2873,2877,2881,2885,2889,2893],{"type":23,"tag":278,"props":2866,"children":2867},{"class":285},[2868],{"type":28,"value":288},{"type":23,"tag":278,"props":2870,"children":2871},{"class":291},[2872],{"type":28,"value":294},{"type":23,"tag":278,"props":2874,"children":2875},{"class":297},[2876],{"type":28,"value":300},{"type":23,"tag":278,"props":2878,"children":2879},{"class":291},[2880],{"type":28,"value":294},{"type":23,"tag":278,"props":2882,"children":2883},{"class":307},[2884],{"type":28,"value":310},{"type":23,"tag":278,"props":2886,"children":2887},{"class":291},[2888],{"type":28,"value":294},{"type":23,"tag":278,"props":2890,"children":2891},{"class":317},[2892],{"type":28,"value":320},{"type":23,"tag":278,"props":2894,"children":2895},{"class":291},[2896],{"type":28,"value":325},{"type":23,"tag":278,"props":2898,"children":2899},{"class":280,"line":328},[2900,2904,2908,2912,2916,2920,2924,2928],{"type":23,"tag":278,"props":2901,"children":2902},{"class":291},[2903],{"type":28,"value":334},{"type":23,"tag":278,"props":2905,"children":2906},{"class":337},[2907],{"type":28,"value":1757},{"type":23,"tag":278,"props":2909,"children":2910},{"class":291},[2911],{"type":28,"value":344},{"type":23,"tag":278,"props":2913,"children":2914},{"class":297},[2915],{"type":28,"value":374},{"type":23,"tag":278,"props":2917,"children":2918},{"class":291},[2919],{"type":28,"value":1770},{"type":23,"tag":278,"props":2921,"children":2922},{"class":297},[2923],{"type":28,"value":1803},{"type":23,"tag":278,"props":2925,"children":2926},{"class":291},[2927],{"type":28,"value":1770},{"type":23,"tag":278,"props":2929,"children":2930},{"class":297},[2931],{"type":28,"value":2932},"Amulet\n",{"type":23,"tag":278,"props":2934,"children":2935},{"class":280,"line":352},[2936],{"type":23,"tag":278,"props":2937,"children":2938},{"class":291},[2939],{"type":28,"value":358},{"type":23,"tag":24,"props":2941,"children":2942},{},[2943],{"type":28,"value":2944},"Now our item can be any of these three types.",{"type":23,"tag":24,"props":2946,"children":2947},{},[2948,2950,2955],{"type":28,"value":2949},"And here is an expanded ",{"type":23,"tag":151,"props":2951,"children":2952},{},[2953],{"type":28,"value":2954},"Amulet",{"type":28,"value":2956}," type for you to get familiar with:",{"type":23,"tag":264,"props":2958,"children":2960},{"code":2959,"language":267,"meta":268},"type Amulet = {\n  type: 'amulet'\n  pictureUrl: string\n  name: string\n  ability: Ability\n}\ntype Ability = {\n  type: 'passive'|'active'\n  name: string\n  pictureUrl: string\n}\n",[2961],{"type":23,"tag":271,"props":2962,"children":2963},{},[2964],{"type":23,"tag":264,"props":2965,"children":2966},{"__ignoreMap":7},[2967,2994,3014,3033,3052,3072,3080,3108,3137,3156,3175],{"type":23,"tag":278,"props":2968,"children":2969},{"class":280,"line":281},[2970,2974,2978,2982,2986,2990],{"type":23,"tag":278,"props":2971,"children":2972},{"class":285},[2973],{"type":28,"value":404},{"type":23,"tag":278,"props":2975,"children":2976},{"class":291},[2977],{"type":28,"value":294},{"type":23,"tag":278,"props":2979,"children":2980},{"class":297},[2981],{"type":28,"value":2954},{"type":23,"tag":278,"props":2983,"children":2984},{"class":291},[2985],{"type":28,"value":294},{"type":23,"tag":278,"props":2987,"children":2988},{"class":307},[2989],{"type":28,"value":310},{"type":23,"tag":278,"props":2991,"children":2992},{"class":291},[2993],{"type":28,"value":425},{"type":23,"tag":278,"props":2995,"children":2996},{"class":280,"line":328},[2997,3001,3005,3009],{"type":23,"tag":278,"props":2998,"children":2999},{"class":291},[3000],{"type":28,"value":334},{"type":23,"tag":278,"props":3002,"children":3003},{"class":337},[3004],{"type":28,"value":404},{"type":23,"tag":278,"props":3006,"children":3007},{"class":291},[3008],{"type":28,"value":344},{"type":23,"tag":278,"props":3010,"children":3011},{"class":443},[3012],{"type":28,"value":3013},"'amulet'\n",{"type":23,"tag":278,"props":3015,"children":3016},{"class":280,"line":352},[3017,3021,3025,3029],{"type":23,"tag":278,"props":3018,"children":3019},{"class":291},[3020],{"type":28,"value":334},{"type":23,"tag":278,"props":3022,"children":3023},{"class":337},[3024],{"type":28,"value":458},{"type":23,"tag":278,"props":3026,"children":3027},{"class":291},[3028],{"type":28,"value":344},{"type":23,"tag":278,"props":3030,"children":3031},{"class":297},[3032],{"type":28,"value":467},{"type":23,"tag":278,"props":3034,"children":3035},{"class":280,"line":470},[3036,3040,3044,3048],{"type":23,"tag":278,"props":3037,"children":3038},{"class":291},[3039],{"type":28,"value":334},{"type":23,"tag":278,"props":3041,"children":3042},{"class":337},[3043],{"type":28,"value":480},{"type":23,"tag":278,"props":3045,"children":3046},{"class":291},[3047],{"type":28,"value":344},{"type":23,"tag":278,"props":3049,"children":3050},{"class":297},[3051],{"type":28,"value":467},{"type":23,"tag":278,"props":3053,"children":3054},{"class":280,"line":491},[3055,3059,3063,3067],{"type":23,"tag":278,"props":3056,"children":3057},{"class":291},[3058],{"type":28,"value":334},{"type":23,"tag":278,"props":3060,"children":3061},{"class":337},[3062],{"type":28,"value":2826},{"type":23,"tag":278,"props":3064,"children":3065},{"class":291},[3066],{"type":28,"value":344},{"type":23,"tag":278,"props":3068,"children":3069},{"class":297},[3070],{"type":28,"value":3071},"Ability\n",{"type":23,"tag":278,"props":3073,"children":3074},{"class":280,"line":513},[3075],{"type":23,"tag":278,"props":3076,"children":3077},{"class":291},[3078],{"type":28,"value":3079},"}\n",{"type":23,"tag":278,"props":3081,"children":3082},{"class":280,"line":534},[3083,3087,3091,3096,3100,3104],{"type":23,"tag":278,"props":3084,"children":3085},{"class":285},[3086],{"type":28,"value":404},{"type":23,"tag":278,"props":3088,"children":3089},{"class":291},[3090],{"type":28,"value":294},{"type":23,"tag":278,"props":3092,"children":3093},{"class":297},[3094],{"type":28,"value":3095},"Ability",{"type":23,"tag":278,"props":3097,"children":3098},{"class":291},[3099],{"type":28,"value":294},{"type":23,"tag":278,"props":3101,"children":3102},{"class":307},[3103],{"type":28,"value":310},{"type":23,"tag":278,"props":3105,"children":3106},{"class":291},[3107],{"type":28,"value":425},{"type":23,"tag":278,"props":3109,"children":3110},{"class":280,"line":555},[3111,3115,3119,3123,3128,3132],{"type":23,"tag":278,"props":3112,"children":3113},{"class":291},[3114],{"type":28,"value":334},{"type":23,"tag":278,"props":3116,"children":3117},{"class":337},[3118],{"type":28,"value":404},{"type":23,"tag":278,"props":3120,"children":3121},{"class":291},[3122],{"type":28,"value":344},{"type":23,"tag":278,"props":3124,"children":3125},{"class":443},[3126],{"type":28,"value":3127},"'passive'",{"type":23,"tag":278,"props":3129,"children":3130},{"class":291},[3131],{"type":28,"value":1770},{"type":23,"tag":278,"props":3133,"children":3134},{"class":443},[3135],{"type":28,"value":3136},"'active'\n",{"type":23,"tag":278,"props":3138,"children":3139},{"class":280,"line":576},[3140,3144,3148,3152],{"type":23,"tag":278,"props":3141,"children":3142},{"class":291},[3143],{"type":28,"value":334},{"type":23,"tag":278,"props":3145,"children":3146},{"class":337},[3147],{"type":28,"value":480},{"type":23,"tag":278,"props":3149,"children":3150},{"class":291},[3151],{"type":28,"value":344},{"type":23,"tag":278,"props":3153,"children":3154},{"class":297},[3155],{"type":28,"value":467},{"type":23,"tag":278,"props":3157,"children":3158},{"class":280,"line":939},[3159,3163,3167,3171],{"type":23,"tag":278,"props":3160,"children":3161},{"class":291},[3162],{"type":28,"value":334},{"type":23,"tag":278,"props":3164,"children":3165},{"class":337},[3166],{"type":28,"value":458},{"type":23,"tag":278,"props":3168,"children":3169},{"class":291},[3170],{"type":28,"value":344},{"type":23,"tag":278,"props":3172,"children":3173},{"class":297},[3174],{"type":28,"value":467},{"type":23,"tag":278,"props":3176,"children":3177},{"class":280,"line":985},[3178],{"type":23,"tag":278,"props":3179,"children":3180},{"class":291},[3181],{"type":28,"value":582},{"type":23,"tag":234,"props":3183,"children":3185},{"id":3184},"the-script-2",[3186],{"type":28,"value":1975},{"type":23,"tag":24,"props":3188,"children":3189},{},[3190],{"type":28,"value":3191},"Now let's see what needs to change in the script:",{"type":23,"tag":24,"props":3193,"children":3194},{},[3195],{"type":28,"value":3196},"Like before, the image portion remains untouched. And the \"fed\" label doesn't require any changes from the last time.",{"type":23,"tag":24,"props":3198,"children":3199},{},[3200],{"type":28,"value":3201},"But we need to add another case to our switch in the stats computed:",{"type":23,"tag":264,"props":3203,"children":3205},{"code":3204,"language":267,"meta":268},"const stats = computed(() => {\n  switch (props.item.type) {\n  case 'pet':\n    return {\n      'happiness': `${props.item.happiness}/${props.item.maxHappiness}`,\n      'mood': props.item.mood\n    }\n  case 'weapon':\n    return {\n      'damage': props.item.damage,\n      'crit chance': props.item.critChance\n    }\n  case 'amulet':\n    return {}\n  }\n})\n",[3206],{"type":23,"tag":271,"props":3207,"children":3208},{},[3209],{"type":23,"tag":264,"props":3210,"children":3211},{"__ignoreMap":7},[3212,3255,3294,3317,3332,3419,3454,3461,3484,3499,3538,3573,3580,3604,3620,3627],{"type":23,"tag":278,"props":3213,"children":3214},{"class":280,"line":281},[3215,3219,3223,3227,3231,3235,3239,3243,3247,3251],{"type":23,"tag":278,"props":3216,"children":3217},{"class":285},[3218],{"type":28,"value":288},{"type":23,"tag":278,"props":3220,"children":3221},{"class":291},[3222],{"type":28,"value":294},{"type":23,"tag":278,"props":3224,"children":3225},{"class":297},[3226],{"type":28,"value":766},{"type":23,"tag":278,"props":3228,"children":3229},{"class":291},[3230],{"type":28,"value":294},{"type":23,"tag":278,"props":3232,"children":3233},{"class":307},[3234],{"type":28,"value":310},{"type":23,"tag":278,"props":3236,"children":3237},{"class":291},[3238],{"type":28,"value":294},{"type":23,"tag":278,"props":3240,"children":3241},{"class":317},[3242],{"type":28,"value":664},{"type":23,"tag":278,"props":3244,"children":3245},{"class":291},[3246],{"type":28,"value":669},{"type":23,"tag":278,"props":3248,"children":3249},{"class":285},[3250],{"type":28,"value":674},{"type":23,"tag":278,"props":3252,"children":3253},{"class":291},[3254],{"type":28,"value":425},{"type":23,"tag":278,"props":3256,"children":3257},{"class":280,"line":328},[3258,3262,3266,3270,3274,3278,3282,3286,3290],{"type":23,"tag":278,"props":3259,"children":3260},{"class":291},[3261],{"type":28,"value":334},{"type":23,"tag":278,"props":3263,"children":3264},{"class":285},[3265],{"type":28,"value":2060},{"type":23,"tag":278,"props":3267,"children":3268},{"class":291},[3269],{"type":28,"value":2065},{"type":23,"tag":278,"props":3271,"children":3272},{"class":297},[3273],{"type":28,"value":300},{"type":23,"tag":278,"props":3275,"children":3276},{"class":291},[3277],{"type":28,"value":123},{"type":23,"tag":278,"props":3279,"children":3280},{"class":297},[3281],{"type":28,"value":1757},{"type":23,"tag":278,"props":3283,"children":3284},{"class":291},[3285],{"type":28,"value":123},{"type":23,"tag":278,"props":3287,"children":3288},{"class":337},[3289],{"type":28,"value":404},{"type":23,"tag":278,"props":3291,"children":3292},{"class":291},[3293],{"type":28,"value":2090},{"type":23,"tag":278,"props":3295,"children":3296},{"class":280,"line":352},[3297,3301,3305,3309,3313],{"type":23,"tag":278,"props":3298,"children":3299},{"class":291},[3300],{"type":28,"value":334},{"type":23,"tag":278,"props":3302,"children":3303},{"class":285},[3304],{"type":28,"value":2102},{"type":23,"tag":278,"props":3306,"children":3307},{"class":291},[3308],{"type":28,"value":294},{"type":23,"tag":278,"props":3310,"children":3311},{"class":443},[3312],{"type":28,"value":598},{"type":23,"tag":278,"props":3314,"children":3315},{"class":291},[3316],{"type":28,"value":2115},{"type":23,"tag":278,"props":3318,"children":3319},{"class":280,"line":470},[3320,3324,3328],{"type":23,"tag":278,"props":3321,"children":3322},{"class":291},[3323],{"type":28,"value":1201},{"type":23,"tag":278,"props":3325,"children":3326},{"class":285},[3327],{"type":28,"value":2127},{"type":23,"tag":278,"props":3329,"children":3330},{"class":291},[3331],{"type":28,"value":425},{"type":23,"tag":278,"props":3333,"children":3334},{"class":280,"line":491},[3335,3339,3343,3347,3351,3355,3359,3363,3367,3371,3375,3379,3383,3387,3391,3395,3399,3403,3407,3411,3415],{"type":23,"tag":278,"props":3336,"children":3337},{"class":291},[3338],{"type":28,"value":2139},{"type":23,"tag":278,"props":3340,"children":3341},{"class":443},[3342],{"type":28,"value":806},{"type":23,"tag":278,"props":3344,"children":3345},{"class":291},[3346],{"type":28,"value":344},{"type":23,"tag":278,"props":3348,"children":3349},{"class":443},[3350],{"type":28,"value":815},{"type":23,"tag":278,"props":3352,"children":3353},{"class":285},[3354],{"type":28,"value":705},{"type":23,"tag":278,"props":3356,"children":3357},{"class":297},[3358],{"type":28,"value":300},{"type":23,"tag":278,"props":3360,"children":3361},{"class":291},[3362],{"type":28,"value":123},{"type":23,"tag":278,"props":3364,"children":3365},{"class":297},[3366],{"type":28,"value":1757},{"type":23,"tag":278,"props":3368,"children":3369},{"class":291},[3370],{"type":28,"value":123},{"type":23,"tag":278,"props":3372,"children":3373},{"class":337},[3374],{"type":28,"value":501},{"type":23,"tag":278,"props":3376,"children":3377},{"class":285},[3378],{"type":28,"value":582},{"type":23,"tag":278,"props":3380,"children":3381},{"class":443},[3382],{"type":28,"value":848},{"type":23,"tag":278,"props":3384,"children":3385},{"class":285},[3386],{"type":28,"value":705},{"type":23,"tag":278,"props":3388,"children":3389},{"class":297},[3390],{"type":28,"value":300},{"type":23,"tag":278,"props":3392,"children":3393},{"class":291},[3394],{"type":28,"value":123},{"type":23,"tag":278,"props":3396,"children":3397},{"class":297},[3398],{"type":28,"value":1757},{"type":23,"tag":278,"props":3400,"children":3401},{"class":291},[3402],{"type":28,"value":123},{"type":23,"tag":278,"props":3404,"children":3405},{"class":337},[3406],{"type":28,"value":523},{"type":23,"tag":278,"props":3408,"children":3409},{"class":285},[3410],{"type":28,"value":582},{"type":23,"tag":278,"props":3412,"children":3413},{"class":443},[3414],{"type":28,"value":815},{"type":23,"tag":278,"props":3416,"children":3417},{"class":291},[3418],{"type":28,"value":885},{"type":23,"tag":278,"props":3420,"children":3421},{"class":280,"line":513},[3422,3426,3430,3434,3438,3442,3446,3450],{"type":23,"tag":278,"props":3423,"children":3424},{"class":291},[3425],{"type":28,"value":2139},{"type":23,"tag":278,"props":3427,"children":3428},{"class":443},[3429],{"type":28,"value":897},{"type":23,"tag":278,"props":3431,"children":3432},{"class":291},[3433],{"type":28,"value":344},{"type":23,"tag":278,"props":3435,"children":3436},{"class":297},[3437],{"type":28,"value":300},{"type":23,"tag":278,"props":3439,"children":3440},{"class":291},[3441],{"type":28,"value":123},{"type":23,"tag":278,"props":3443,"children":3444},{"class":297},[3445],{"type":28,"value":1757},{"type":23,"tag":278,"props":3447,"children":3448},{"class":291},[3449],{"type":28,"value":123},{"type":23,"tag":278,"props":3451,"children":3452},{"class":337},[3453],{"type":28,"value":922},{"type":23,"tag":278,"props":3455,"children":3456},{"class":280,"line":534},[3457],{"type":23,"tag":278,"props":3458,"children":3459},{"class":291},[3460],{"type":28,"value":2262},{"type":23,"tag":278,"props":3462,"children":3463},{"class":280,"line":555},[3464,3468,3472,3476,3480],{"type":23,"tag":278,"props":3465,"children":3466},{"class":291},[3467],{"type":28,"value":334},{"type":23,"tag":278,"props":3469,"children":3470},{"class":285},[3471],{"type":28,"value":2102},{"type":23,"tag":278,"props":3473,"children":3474},{"class":291},[3475],{"type":28,"value":294},{"type":23,"tag":278,"props":3477,"children":3478},{"class":443},[3479],{"type":28,"value":1967},{"type":23,"tag":278,"props":3481,"children":3482},{"class":291},[3483],{"type":28,"value":2115},{"type":23,"tag":278,"props":3485,"children":3486},{"class":280,"line":576},[3487,3491,3495],{"type":23,"tag":278,"props":3488,"children":3489},{"class":291},[3490],{"type":28,"value":1201},{"type":23,"tag":278,"props":3492,"children":3493},{"class":285},[3494],{"type":28,"value":2127},{"type":23,"tag":278,"props":3496,"children":3497},{"class":291},[3498],{"type":28,"value":425},{"type":23,"tag":278,"props":3500,"children":3501},{"class":280,"line":939},[3502,3506,3510,3514,3518,3522,3526,3530,3534],{"type":23,"tag":278,"props":3503,"children":3504},{"class":291},[3505],{"type":28,"value":2139},{"type":23,"tag":278,"props":3507,"children":3508},{"class":443},[3509],{"type":28,"value":2312},{"type":23,"tag":278,"props":3511,"children":3512},{"class":291},[3513],{"type":28,"value":344},{"type":23,"tag":278,"props":3515,"children":3516},{"class":297},[3517],{"type":28,"value":300},{"type":23,"tag":278,"props":3519,"children":3520},{"class":291},[3521],{"type":28,"value":123},{"type":23,"tag":278,"props":3523,"children":3524},{"class":297},[3525],{"type":28,"value":1757},{"type":23,"tag":278,"props":3527,"children":3528},{"class":291},[3529],{"type":28,"value":123},{"type":23,"tag":278,"props":3531,"children":3532},{"class":337},[3533],{"type":28,"value":1922},{"type":23,"tag":278,"props":3535,"children":3536},{"class":291},[3537],{"type":28,"value":885},{"type":23,"tag":278,"props":3539,"children":3540},{"class":280,"line":985},[3541,3545,3549,3553,3557,3561,3565,3569],{"type":23,"tag":278,"props":3542,"children":3543},{"class":291},[3544],{"type":28,"value":2139},{"type":23,"tag":278,"props":3546,"children":3547},{"class":443},[3548],{"type":28,"value":2352},{"type":23,"tag":278,"props":3550,"children":3551},{"class":291},[3552],{"type":28,"value":344},{"type":23,"tag":278,"props":3554,"children":3555},{"class":297},[3556],{"type":28,"value":300},{"type":23,"tag":278,"props":3558,"children":3559},{"class":291},[3560],{"type":28,"value":123},{"type":23,"tag":278,"props":3562,"children":3563},{"class":297},[3564],{"type":28,"value":1757},{"type":23,"tag":278,"props":3566,"children":3567},{"class":291},[3568],{"type":28,"value":123},{"type":23,"tag":278,"props":3570,"children":3571},{"class":337},[3572],{"type":28,"value":2377},{"type":23,"tag":278,"props":3574,"children":3575},{"class":280,"line":1060},[3576],{"type":23,"tag":278,"props":3577,"children":3578},{"class":291},[3579],{"type":28,"value":2262},{"type":23,"tag":278,"props":3581,"children":3582},{"class":280,"line":1308},[3583,3587,3591,3595,3600],{"type":23,"tag":278,"props":3584,"children":3585},{"class":291},[3586],{"type":28,"value":334},{"type":23,"tag":278,"props":3588,"children":3589},{"class":285},[3590],{"type":28,"value":2102},{"type":23,"tag":278,"props":3592,"children":3593},{"class":291},[3594],{"type":28,"value":294},{"type":23,"tag":278,"props":3596,"children":3597},{"class":443},[3598],{"type":28,"value":3599},"'amulet'",{"type":23,"tag":278,"props":3601,"children":3602},{"class":291},[3603],{"type":28,"value":2115},{"type":23,"tag":278,"props":3605,"children":3606},{"class":280,"line":1320},[3607,3611,3615],{"type":23,"tag":278,"props":3608,"children":3609},{"class":291},[3610],{"type":28,"value":1201},{"type":23,"tag":278,"props":3612,"children":3613},{"class":285},[3614],{"type":28,"value":2127},{"type":23,"tag":278,"props":3616,"children":3617},{"class":291},[3618],{"type":28,"value":3619}," {}\n",{"type":23,"tag":278,"props":3621,"children":3622},{"class":280,"line":1342},[3623],{"type":23,"tag":278,"props":3624,"children":3625},{"class":291},[3626],{"type":28,"value":2392},{"type":23,"tag":278,"props":3628,"children":3629},{"class":280,"line":1364},[3630],{"type":23,"tag":278,"props":3631,"children":3632},{"class":291},[3633],{"type":28,"value":2400},{"type":23,"tag":24,"props":3635,"children":3636},{},[3637],{"type":28,"value":3638},"If the item is an amulet, we will return an empty object, so that our for loop in template doesn't render anything.",{"type":23,"tag":24,"props":3640,"children":3641},{},[3642],{"type":28,"value":3643},"Also we'll add a computed for the ability icon style:",{"type":23,"tag":264,"props":3645,"children":3647},{"code":3646,"language":267,"meta":268},"const abilityIconStyle = computed(() => {\n  if (props.item.type != 'amulet') return {}\n  return {\n    backgroundImage: `url(${props.item.ability.pictureUrl})`\n  }\n})\n",[3648],{"type":23,"tag":271,"props":3649,"children":3650},{},[3651],{"type":23,"tag":264,"props":3652,"children":3653},{"__ignoreMap":7},[3654,3698,3762,3777,3836,3843],{"type":23,"tag":278,"props":3655,"children":3656},{"class":280,"line":281},[3657,3661,3665,3670,3674,3678,3682,3686,3690,3694],{"type":23,"tag":278,"props":3658,"children":3659},{"class":285},[3660],{"type":28,"value":288},{"type":23,"tag":278,"props":3662,"children":3663},{"class":291},[3664],{"type":28,"value":294},{"type":23,"tag":278,"props":3666,"children":3667},{"class":297},[3668],{"type":28,"value":3669},"abilityIconStyle",{"type":23,"tag":278,"props":3671,"children":3672},{"class":291},[3673],{"type":28,"value":294},{"type":23,"tag":278,"props":3675,"children":3676},{"class":307},[3677],{"type":28,"value":310},{"type":23,"tag":278,"props":3679,"children":3680},{"class":291},[3681],{"type":28,"value":294},{"type":23,"tag":278,"props":3683,"children":3684},{"class":317},[3685],{"type":28,"value":664},{"type":23,"tag":278,"props":3687,"children":3688},{"class":291},[3689],{"type":28,"value":669},{"type":23,"tag":278,"props":3691,"children":3692},{"class":285},[3693],{"type":28,"value":674},{"type":23,"tag":278,"props":3695,"children":3696},{"class":291},[3697],{"type":28,"value":425},{"type":23,"tag":278,"props":3699,"children":3700},{"class":280,"line":328},[3701,3705,3709,3713,3717,3721,3725,3729,3733,3737,3741,3745,3749,3754,3758],{"type":23,"tag":278,"props":3702,"children":3703},{"class":291},[3704],{"type":28,"value":334},{"type":23,"tag":278,"props":3706,"children":3707},{"class":285},[3708],{"type":28,"value":2481},{"type":23,"tag":278,"props":3710,"children":3711},{"class":291},[3712],{"type":28,"value":2065},{"type":23,"tag":278,"props":3714,"children":3715},{"class":297},[3716],{"type":28,"value":300},{"type":23,"tag":278,"props":3718,"children":3719},{"class":291},[3720],{"type":28,"value":123},{"type":23,"tag":278,"props":3722,"children":3723},{"class":297},[3724],{"type":28,"value":1757},{"type":23,"tag":278,"props":3726,"children":3727},{"class":291},[3728],{"type":28,"value":123},{"type":23,"tag":278,"props":3730,"children":3731},{"class":337},[3732],{"type":28,"value":404},{"type":23,"tag":278,"props":3734,"children":3735},{"class":291},[3736],{"type":28,"value":294},{"type":23,"tag":278,"props":3738,"children":3739},{"class":307},[3740],{"type":28,"value":2514},{"type":23,"tag":278,"props":3742,"children":3743},{"class":291},[3744],{"type":28,"value":294},{"type":23,"tag":278,"props":3746,"children":3747},{"class":443},[3748],{"type":28,"value":3599},{"type":23,"tag":278,"props":3750,"children":3751},{"class":291},[3752],{"type":28,"value":3753},") ",{"type":23,"tag":278,"props":3755,"children":3756},{"class":285},[3757],{"type":28,"value":2127},{"type":23,"tag":278,"props":3759,"children":3760},{"class":291},[3761],{"type":28,"value":3619},{"type":23,"tag":278,"props":3763,"children":3764},{"class":280,"line":352},[3765,3769,3773],{"type":23,"tag":278,"props":3766,"children":3767},{"class":291},[3768],{"type":28,"value":334},{"type":23,"tag":278,"props":3770,"children":3771},{"class":285},[3772],{"type":28,"value":2127},{"type":23,"tag":278,"props":3774,"children":3775},{"class":291},[3776],{"type":28,"value":425},{"type":23,"tag":278,"props":3778,"children":3779},{"class":280,"line":470},[3780,3784,3788,3792,3796,3800,3804,3808,3812,3816,3820,3824,3828,3832],{"type":23,"tag":278,"props":3781,"children":3782},{"class":291},[3783],{"type":28,"value":1201},{"type":23,"tag":278,"props":3785,"children":3786},{"class":337},[3787],{"type":28,"value":691},{"type":23,"tag":278,"props":3789,"children":3790},{"class":291},[3791],{"type":28,"value":344},{"type":23,"tag":278,"props":3793,"children":3794},{"class":443},[3795],{"type":28,"value":700},{"type":23,"tag":278,"props":3797,"children":3798},{"class":285},[3799],{"type":28,"value":705},{"type":23,"tag":278,"props":3801,"children":3802},{"class":297},[3803],{"type":28,"value":300},{"type":23,"tag":278,"props":3805,"children":3806},{"class":291},[3807],{"type":28,"value":123},{"type":23,"tag":278,"props":3809,"children":3810},{"class":297},[3811],{"type":28,"value":1757},{"type":23,"tag":278,"props":3813,"children":3814},{"class":291},[3815],{"type":28,"value":123},{"type":23,"tag":278,"props":3817,"children":3818},{"class":297},[3819],{"type":28,"value":2826},{"type":23,"tag":278,"props":3821,"children":3822},{"class":291},[3823],{"type":28,"value":123},{"type":23,"tag":278,"props":3825,"children":3826},{"class":337},[3827],{"type":28,"value":458},{"type":23,"tag":278,"props":3829,"children":3830},{"class":285},[3831],{"type":28,"value":582},{"type":23,"tag":278,"props":3833,"children":3834},{"class":443},[3835],{"type":28,"value":734},{"type":23,"tag":278,"props":3837,"children":3838},{"class":280,"line":491},[3839],{"type":23,"tag":278,"props":3840,"children":3841},{"class":291},[3842],{"type":28,"value":2392},{"type":23,"tag":278,"props":3844,"children":3845},{"class":280,"line":513},[3846],{"type":23,"tag":278,"props":3847,"children":3848},{"class":291},[3849],{"type":28,"value":2400},{"type":23,"tag":24,"props":3851,"children":3852},{},[3853],{"type":28,"value":3854},"Just like the \"fed\" label in the previous iteration, it's only relevant for a certain type of item. So we need to add an if statement checking the item to be an amulet.",{"type":23,"tag":234,"props":3856,"children":3858},{"id":3857},"the-template-2",[3859],{"type":28,"value":1108},{"type":23,"tag":24,"props":3861,"children":3862},{},[3863],{"type":28,"value":3864},"Next up, changes to the template:",{"type":23,"tag":264,"props":3866,"children":3868},{"code":3867,"language":1117,"meta":268},"\u003Cdiv\n  v-if=\"item.type == 'amulet'\"\n  class=\"ability\"\n>\n  \u003Cdiv\n    class=\"ability-icon\"\n    :style=\"abilityIconStyle\"\n  />\n  \u003Cdiv class=\"ability-info\">\n    \u003Cspan class=\"ability-description\">\n      {{ item.ability.type }} ability\n    \u003C/span>\n    \u003Cspan class=\"ability-name\">\n      {{ item.ability.name }}\n    \u003C/span>\n  \u003C/div>\n\u003C/div>\n",[3869],{"type":23,"tag":271,"props":3870,"children":3871},{},[3872],{"type":23,"tag":264,"props":3873,"children":3874},{"__ignoreMap":7},[3875,3886,3906,3926,3933,3944,3964,3984,3991,4023,4055,4063,4079,4111,4119,4134,4149],{"type":23,"tag":278,"props":3876,"children":3877},{"class":280,"line":281},[3878,3882],{"type":23,"tag":278,"props":3879,"children":3880},{"class":291},[3881],{"type":28,"value":1132},{"type":23,"tag":278,"props":3883,"children":3884},{"class":337},[3885],{"type":28,"value":1193},{"type":23,"tag":278,"props":3887,"children":3888},{"class":280,"line":328},[3889,3893,3897,3901],{"type":23,"tag":278,"props":3890,"children":3891},{"class":291},[3892],{"type":28,"value":334},{"type":23,"tag":278,"props":3894,"children":3895},{"class":1054},[3896],{"type":28,"value":2695},{"type":23,"tag":278,"props":3898,"children":3899},{"class":291},[3900],{"type":28,"value":310},{"type":23,"tag":278,"props":3902,"children":3903},{"class":443},[3904],{"type":28,"value":3905},"\"item.type == 'amulet'\"\n",{"type":23,"tag":278,"props":3907,"children":3908},{"class":280,"line":352},[3909,3913,3917,3921],{"type":23,"tag":278,"props":3910,"children":3911},{"class":291},[3912],{"type":28,"value":334},{"type":23,"tag":278,"props":3914,"children":3915},{"class":1054},[3916],{"type":28,"value":1146},{"type":23,"tag":278,"props":3918,"children":3919},{"class":291},[3920],{"type":28,"value":310},{"type":23,"tag":278,"props":3922,"children":3923},{"class":443},[3924],{"type":28,"value":3925},"\"ability\"\n",{"type":23,"tag":278,"props":3927,"children":3928},{"class":280,"line":470},[3929],{"type":23,"tag":278,"props":3930,"children":3931},{"class":291},[3932],{"type":28,"value":1160},{"type":23,"tag":278,"props":3934,"children":3935},{"class":280,"line":491},[3936,3940],{"type":23,"tag":278,"props":3937,"children":3938},{"class":291},[3939],{"type":28,"value":1188},{"type":23,"tag":278,"props":3941,"children":3942},{"class":337},[3943],{"type":28,"value":1193},{"type":23,"tag":278,"props":3945,"children":3946},{"class":280,"line":513},[3947,3951,3955,3959],{"type":23,"tag":278,"props":3948,"children":3949},{"class":291},[3950],{"type":28,"value":1201},{"type":23,"tag":278,"props":3952,"children":3953},{"class":1054},[3954],{"type":28,"value":1146},{"type":23,"tag":278,"props":3956,"children":3957},{"class":291},[3958],{"type":28,"value":310},{"type":23,"tag":278,"props":3960,"children":3961},{"class":443},[3962],{"type":28,"value":3963},"\"ability-icon\"\n",{"type":23,"tag":278,"props":3965,"children":3966},{"class":280,"line":534},[3967,3971,3975,3979],{"type":23,"tag":278,"props":3968,"children":3969},{"class":291},[3970],{"type":28,"value":1201},{"type":23,"tag":278,"props":3972,"children":3973},{"class":1054},[3974],{"type":28,"value":1226},{"type":23,"tag":278,"props":3976,"children":3977},{"class":291},[3978],{"type":28,"value":310},{"type":23,"tag":278,"props":3980,"children":3981},{"class":443},[3982],{"type":28,"value":3983},"\"abilityIconStyle\"\n",{"type":23,"tag":278,"props":3985,"children":3986},{"class":280,"line":555},[3987],{"type":23,"tag":278,"props":3988,"children":3989},{"class":291},[3990],{"type":28,"value":1243},{"type":23,"tag":278,"props":3992,"children":3993},{"class":280,"line":576},[3994,3998,4002,4006,4010,4014,4019],{"type":23,"tag":278,"props":3995,"children":3996},{"class":291},[3997],{"type":28,"value":1188},{"type":23,"tag":278,"props":3999,"children":4000},{"class":337},[4001],{"type":28,"value":1137},{"type":23,"tag":278,"props":4003,"children":4004},{"class":291},[4005],{"type":28,"value":294},{"type":23,"tag":278,"props":4007,"children":4008},{"class":1054},[4009],{"type":28,"value":1146},{"type":23,"tag":278,"props":4011,"children":4012},{"class":291},[4013],{"type":28,"value":310},{"type":23,"tag":278,"props":4015,"children":4016},{"class":443},[4017],{"type":28,"value":4018},"\"ability-info\"",{"type":23,"tag":278,"props":4020,"children":4021},{"class":291},[4022],{"type":28,"value":1160},{"type":23,"tag":278,"props":4024,"children":4025},{"class":280,"line":939},[4026,4030,4034,4038,4042,4046,4051],{"type":23,"tag":278,"props":4027,"children":4028},{"class":291},[4029],{"type":28,"value":1379},{"type":23,"tag":278,"props":4031,"children":4032},{"class":337},[4033],{"type":28,"value":278},{"type":23,"tag":278,"props":4035,"children":4036},{"class":291},[4037],{"type":28,"value":294},{"type":23,"tag":278,"props":4039,"children":4040},{"class":1054},[4041],{"type":28,"value":1146},{"type":23,"tag":278,"props":4043,"children":4044},{"class":291},[4045],{"type":28,"value":310},{"type":23,"tag":278,"props":4047,"children":4048},{"class":443},[4049],{"type":28,"value":4050},"\"ability-description\"",{"type":23,"tag":278,"props":4052,"children":4053},{"class":291},[4054],{"type":28,"value":1160},{"type":23,"tag":278,"props":4056,"children":4057},{"class":280,"line":985},[4058],{"type":23,"tag":278,"props":4059,"children":4060},{"class":291},[4061],{"type":28,"value":4062},"      {{ item.ability.type }} ability\n",{"type":23,"tag":278,"props":4064,"children":4065},{"class":280,"line":1060},[4066,4071,4075],{"type":23,"tag":278,"props":4067,"children":4068},{"class":291},[4069],{"type":28,"value":4070},"    \u003C/",{"type":23,"tag":278,"props":4072,"children":4073},{"class":337},[4074],{"type":28,"value":278},{"type":23,"tag":278,"props":4076,"children":4077},{"class":291},[4078],{"type":28,"value":1160},{"type":23,"tag":278,"props":4080,"children":4081},{"class":280,"line":1308},[4082,4086,4090,4094,4098,4102,4107],{"type":23,"tag":278,"props":4083,"children":4084},{"class":291},[4085],{"type":28,"value":1379},{"type":23,"tag":278,"props":4087,"children":4088},{"class":337},[4089],{"type":28,"value":278},{"type":23,"tag":278,"props":4091,"children":4092},{"class":291},[4093],{"type":28,"value":294},{"type":23,"tag":278,"props":4095,"children":4096},{"class":1054},[4097],{"type":28,"value":1146},{"type":23,"tag":278,"props":4099,"children":4100},{"class":291},[4101],{"type":28,"value":310},{"type":23,"tag":278,"props":4103,"children":4104},{"class":443},[4105],{"type":28,"value":4106},"\"ability-name\"",{"type":23,"tag":278,"props":4108,"children":4109},{"class":291},[4110],{"type":28,"value":1160},{"type":23,"tag":278,"props":4112,"children":4113},{"class":280,"line":1320},[4114],{"type":23,"tag":278,"props":4115,"children":4116},{"class":291},[4117],{"type":28,"value":4118},"      {{ item.ability.name }}\n",{"type":23,"tag":278,"props":4120,"children":4121},{"class":280,"line":1342},[4122,4126,4130],{"type":23,"tag":278,"props":4123,"children":4124},{"class":291},[4125],{"type":28,"value":4070},{"type":23,"tag":278,"props":4127,"children":4128},{"class":337},[4129],{"type":28,"value":278},{"type":23,"tag":278,"props":4131,"children":4132},{"class":291},[4133],{"type":28,"value":1160},{"type":23,"tag":278,"props":4135,"children":4136},{"class":280,"line":1364},[4137,4141,4145],{"type":23,"tag":278,"props":4138,"children":4139},{"class":291},[4140],{"type":28,"value":1464},{"type":23,"tag":278,"props":4142,"children":4143},{"class":337},[4144],{"type":28,"value":1137},{"type":23,"tag":278,"props":4146,"children":4147},{"class":291},[4148],{"type":28,"value":1160},{"type":23,"tag":278,"props":4150,"children":4151},{"class":280,"line":1373},[4152,4156,4160],{"type":23,"tag":278,"props":4153,"children":4154},{"class":291},[4155],{"type":28,"value":1569},{"type":23,"tag":278,"props":4157,"children":4158},{"class":337},[4159],{"type":28,"value":1137},{"type":23,"tag":278,"props":4161,"children":4162},{"class":291},[4163],{"type":28,"value":1019},{"type":23,"tag":24,"props":4165,"children":4166},{},[4167],{"type":28,"value":4168},"We add this block to display our ability, of course conditionally - only if it's an amulet, with the item type check at the root element.",{"type":23,"tag":24,"props":4170,"children":4171},{},[4172],{"type":28,"value":4173},"Then, we apply our computed ability icon style and display some information about the ability.",{"type":23,"tag":24,"props":4175,"children":4176},{},[4177],{"type":28,"value":4178},"Like before, we will add styles for all of these elements to our component as well, but I won't include them here.",{"type":23,"tag":234,"props":4180,"children":4182},{"id":4181},"iteration-3-results",[4183],{"type":28,"value":4184},"Iteration 3 Results",{"type":23,"tag":24,"props":4186,"children":4187},{},[4188],{"type":28,"value":4189},"After the third iteration we're seeing the same problems that we did after the second one. Only now they're even more apparent. There are conditional checks all over the place, and our component got even harder to navigate and maintain.",{"type":23,"tag":24,"props":4191,"children":4192},{},[4193],{"type":28,"value":4194},"Moreover, we can see that some code (both in the script, the template and the styles) is relevant only in 33.3% of the use cases - only if a certain type of item is passed as a prop.",{"type":23,"tag":24,"props":4196,"children":4197},{},[4198],{"type":28,"value":4199},"That is, everything that is has to do with the pet's \"fed\" label and everything connected to the amulet's ability. All of that code feels out of place.",{"type":23,"tag":54,"props":4201,"children":4203},{"id":4202},"oop-parallel",[4204],{"type":28,"value":4205},"OOP Parallel",{"type":23,"tag":24,"props":4207,"children":4208},{},[4209],{"type":28,"value":4210},"Let's take a short break from overloading our component with complexity and take a look at what we're doing from an OOP point of view.",{"type":23,"tag":24,"props":4212,"children":4213},{},[4214],{"type":28,"value":4215},"Imagine for a minute that we we're not dealing with a component, but instead with a plain class.",{"type":23,"tag":24,"props":4217,"children":4218},{},[4219],{"type":28,"value":4220},"Here's what our component would look like as a class (after all the applied extensions):",{"type":23,"tag":264,"props":4222,"children":4224},{"code":4223,"language":267,"meta":268},"class ItemCard {\n\n  item: Pet|Weapon|Amulet\n  constructor(item: Pet|Weapon|Amulet) {\n    this.item = item\n  }\n\n  get name() {\n    return this.item.name\n  }\n\n  get image() {\n    return this.item.pictureUrl\n  }\n\n  get stats() {\n    switch (this.item.type) {\n    case 'pet':\n      return {\n        'happiness': `${this.item.happiness}/${this.item.maxHappiness}`,\n        'mood': this.item.mood\n      }\n    case 'weapon':\n      return {\n        'damage': this.item.damage,\n        'crit chance': this.item.critChance\n      }\n    case 'amulet':\n      return {}\n    }\n  }\n\n  get isFed() {\n    if (this.item.type != 'pet') {\n      return false\n    }\n    return this.item.lastFed > Date.now() - 30000\n  }\n\n  get abilityImage() {\n    if (this.item.type != 'amulet') return null\n    return this.item.ability.pictureUrl\n  }\n}\n",[4225],{"type":23,"tag":271,"props":4226,"children":4227},{},[4228],{"type":23,"tag":264,"props":4229,"children":4230},{"__ignoreMap":7},[4231,4251,4258,4293,4342,4379,4386,4393,4418,4454,4461,4468,4492,4528,4535,4542,4565,4604,4627,4642,4730,4765,4773,4796,4811,4850,4885,4893,4917,4933,4941,4949,4957,4981,5037,5057,5065,5141,5149,5157,5182,5251,5295,5303],{"type":23,"tag":278,"props":4232,"children":4233},{"class":280,"line":281},[4234,4238,4242,4247],{"type":23,"tag":278,"props":4235,"children":4236},{"class":285},[4237],{"type":28,"value":1146},{"type":23,"tag":278,"props":4239,"children":4240},{"class":291},[4241],{"type":28,"value":294},{"type":23,"tag":278,"props":4243,"children":4244},{"class":297},[4245],{"type":28,"value":4246},"ItemCard",{"type":23,"tag":278,"props":4248,"children":4249},{"class":291},[4250],{"type":28,"value":425},{"type":23,"tag":278,"props":4252,"children":4253},{"class":280,"line":328},[4254],{"type":23,"tag":278,"props":4255,"children":4256},{},[4257],{"type":28,"value":750},{"type":23,"tag":278,"props":4259,"children":4260},{"class":280,"line":352},[4261,4265,4269,4273,4277,4281,4285,4289],{"type":23,"tag":278,"props":4262,"children":4263},{"class":291},[4264],{"type":28,"value":334},{"type":23,"tag":278,"props":4266,"children":4267},{"class":337},[4268],{"type":28,"value":1757},{"type":23,"tag":278,"props":4270,"children":4271},{"class":291},[4272],{"type":28,"value":344},{"type":23,"tag":278,"props":4274,"children":4275},{"class":297},[4276],{"type":28,"value":374},{"type":23,"tag":278,"props":4278,"children":4279},{"class":291},[4280],{"type":28,"value":1770},{"type":23,"tag":278,"props":4282,"children":4283},{"class":297},[4284],{"type":28,"value":1803},{"type":23,"tag":278,"props":4286,"children":4287},{"class":291},[4288],{"type":28,"value":1770},{"type":23,"tag":278,"props":4290,"children":4291},{"class":297},[4292],{"type":28,"value":2932},{"type":23,"tag":278,"props":4294,"children":4295},{"class":280,"line":470},[4296,4300,4305,4310,4314,4318,4322,4326,4330,4334,4338],{"type":23,"tag":278,"props":4297,"children":4298},{"class":291},[4299],{"type":28,"value":334},{"type":23,"tag":278,"props":4301,"children":4302},{"class":285},[4303],{"type":28,"value":4304},"constructor",{"type":23,"tag":278,"props":4306,"children":4307},{"class":291},[4308],{"type":28,"value":4309},"(",{"type":23,"tag":278,"props":4311,"children":4312},{"class":337},[4313],{"type":28,"value":1757},{"type":23,"tag":278,"props":4315,"children":4316},{"class":291},[4317],{"type":28,"value":344},{"type":23,"tag":278,"props":4319,"children":4320},{"class":297},[4321],{"type":28,"value":374},{"type":23,"tag":278,"props":4323,"children":4324},{"class":291},[4325],{"type":28,"value":1770},{"type":23,"tag":278,"props":4327,"children":4328},{"class":297},[4329],{"type":28,"value":1803},{"type":23,"tag":278,"props":4331,"children":4332},{"class":291},[4333],{"type":28,"value":1770},{"type":23,"tag":278,"props":4335,"children":4336},{"class":297},[4337],{"type":28,"value":2954},{"type":23,"tag":278,"props":4339,"children":4340},{"class":291},[4341],{"type":28,"value":2090},{"type":23,"tag":278,"props":4343,"children":4344},{"class":280,"line":491},[4345,4349,4354,4358,4362,4366,4370,4374],{"type":23,"tag":278,"props":4346,"children":4347},{"class":291},[4348],{"type":28,"value":1201},{"type":23,"tag":278,"props":4350,"children":4351},{"class":297},[4352],{"type":28,"value":4353},"this",{"type":23,"tag":278,"props":4355,"children":4356},{"class":291},[4357],{"type":28,"value":123},{"type":23,"tag":278,"props":4359,"children":4360},{"class":337},[4361],{"type":28,"value":1757},{"type":23,"tag":278,"props":4363,"children":4364},{"class":291},[4365],{"type":28,"value":294},{"type":23,"tag":278,"props":4367,"children":4368},{"class":307},[4369],{"type":28,"value":310},{"type":23,"tag":278,"props":4371,"children":4372},{"class":291},[4373],{"type":28,"value":294},{"type":23,"tag":278,"props":4375,"children":4376},{"class":337},[4377],{"type":28,"value":4378},"item\n",{"type":23,"tag":278,"props":4380,"children":4381},{"class":280,"line":513},[4382],{"type":23,"tag":278,"props":4383,"children":4384},{"class":291},[4385],{"type":28,"value":2392},{"type":23,"tag":278,"props":4387,"children":4388},{"class":280,"line":534},[4389],{"type":23,"tag":278,"props":4390,"children":4391},{},[4392],{"type":28,"value":750},{"type":23,"tag":278,"props":4394,"children":4395},{"class":280,"line":555},[4396,4400,4405,4409,4413],{"type":23,"tag":278,"props":4397,"children":4398},{"class":291},[4399],{"type":28,"value":334},{"type":23,"tag":278,"props":4401,"children":4402},{"class":285},[4403],{"type":28,"value":4404},"get",{"type":23,"tag":278,"props":4406,"children":4407},{"class":291},[4408],{"type":28,"value":294},{"type":23,"tag":278,"props":4410,"children":4411},{"class":317},[4412],{"type":28,"value":480},{"type":23,"tag":278,"props":4414,"children":4415},{"class":291},[4416],{"type":28,"value":4417},"() {\n",{"type":23,"tag":278,"props":4419,"children":4420},{"class":280,"line":576},[4421,4425,4429,4433,4437,4441,4445,4449],{"type":23,"tag":278,"props":4422,"children":4423},{"class":291},[4424],{"type":28,"value":1201},{"type":23,"tag":278,"props":4426,"children":4427},{"class":285},[4428],{"type":28,"value":2127},{"type":23,"tag":278,"props":4430,"children":4431},{"class":291},[4432],{"type":28,"value":294},{"type":23,"tag":278,"props":4434,"children":4435},{"class":297},[4436],{"type":28,"value":4353},{"type":23,"tag":278,"props":4438,"children":4439},{"class":291},[4440],{"type":28,"value":123},{"type":23,"tag":278,"props":4442,"children":4443},{"class":297},[4444],{"type":28,"value":1757},{"type":23,"tag":278,"props":4446,"children":4447},{"class":291},[4448],{"type":28,"value":123},{"type":23,"tag":278,"props":4450,"children":4451},{"class":337},[4452],{"type":28,"value":4453},"name\n",{"type":23,"tag":278,"props":4455,"children":4456},{"class":280,"line":939},[4457],{"type":23,"tag":278,"props":4458,"children":4459},{"class":291},[4460],{"type":28,"value":2392},{"type":23,"tag":278,"props":4462,"children":4463},{"class":280,"line":985},[4464],{"type":23,"tag":278,"props":4465,"children":4466},{},[4467],{"type":28,"value":750},{"type":23,"tag":278,"props":4469,"children":4470},{"class":280,"line":1060},[4471,4475,4479,4483,4488],{"type":23,"tag":278,"props":4472,"children":4473},{"class":291},[4474],{"type":28,"value":334},{"type":23,"tag":278,"props":4476,"children":4477},{"class":285},[4478],{"type":28,"value":4404},{"type":23,"tag":278,"props":4480,"children":4481},{"class":291},[4482],{"type":28,"value":294},{"type":23,"tag":278,"props":4484,"children":4485},{"class":317},[4486],{"type":28,"value":4487},"image",{"type":23,"tag":278,"props":4489,"children":4490},{"class":291},[4491],{"type":28,"value":4417},{"type":23,"tag":278,"props":4493,"children":4494},{"class":280,"line":1308},[4495,4499,4503,4507,4511,4515,4519,4523],{"type":23,"tag":278,"props":4496,"children":4497},{"class":291},[4498],{"type":28,"value":1201},{"type":23,"tag":278,"props":4500,"children":4501},{"class":285},[4502],{"type":28,"value":2127},{"type":23,"tag":278,"props":4504,"children":4505},{"class":291},[4506],{"type":28,"value":294},{"type":23,"tag":278,"props":4508,"children":4509},{"class":297},[4510],{"type":28,"value":4353},{"type":23,"tag":278,"props":4512,"children":4513},{"class":291},[4514],{"type":28,"value":123},{"type":23,"tag":278,"props":4516,"children":4517},{"class":297},[4518],{"type":28,"value":1757},{"type":23,"tag":278,"props":4520,"children":4521},{"class":291},[4522],{"type":28,"value":123},{"type":23,"tag":278,"props":4524,"children":4525},{"class":337},[4526],{"type":28,"value":4527},"pictureUrl\n",{"type":23,"tag":278,"props":4529,"children":4530},{"class":280,"line":1320},[4531],{"type":23,"tag":278,"props":4532,"children":4533},{"class":291},[4534],{"type":28,"value":2392},{"type":23,"tag":278,"props":4536,"children":4537},{"class":280,"line":1342},[4538],{"type":23,"tag":278,"props":4539,"children":4540},{},[4541],{"type":28,"value":750},{"type":23,"tag":278,"props":4543,"children":4544},{"class":280,"line":1364},[4545,4549,4553,4557,4561],{"type":23,"tag":278,"props":4546,"children":4547},{"class":291},[4548],{"type":28,"value":334},{"type":23,"tag":278,"props":4550,"children":4551},{"class":285},[4552],{"type":28,"value":4404},{"type":23,"tag":278,"props":4554,"children":4555},{"class":291},[4556],{"type":28,"value":294},{"type":23,"tag":278,"props":4558,"children":4559},{"class":317},[4560],{"type":28,"value":766},{"type":23,"tag":278,"props":4562,"children":4563},{"class":291},[4564],{"type":28,"value":4417},{"type":23,"tag":278,"props":4566,"children":4567},{"class":280,"line":1373},[4568,4572,4576,4580,4584,4588,4592,4596,4600],{"type":23,"tag":278,"props":4569,"children":4570},{"class":291},[4571],{"type":28,"value":1201},{"type":23,"tag":278,"props":4573,"children":4574},{"class":285},[4575],{"type":28,"value":2060},{"type":23,"tag":278,"props":4577,"children":4578},{"class":291},[4579],{"type":28,"value":2065},{"type":23,"tag":278,"props":4581,"children":4582},{"class":297},[4583],{"type":28,"value":4353},{"type":23,"tag":278,"props":4585,"children":4586},{"class":291},[4587],{"type":28,"value":123},{"type":23,"tag":278,"props":4589,"children":4590},{"class":297},[4591],{"type":28,"value":1757},{"type":23,"tag":278,"props":4593,"children":4594},{"class":291},[4595],{"type":28,"value":123},{"type":23,"tag":278,"props":4597,"children":4598},{"class":337},[4599],{"type":28,"value":404},{"type":23,"tag":278,"props":4601,"children":4602},{"class":291},[4603],{"type":28,"value":2090},{"type":23,"tag":278,"props":4605,"children":4606},{"class":280,"line":1416},[4607,4611,4615,4619,4623],{"type":23,"tag":278,"props":4608,"children":4609},{"class":291},[4610],{"type":28,"value":1201},{"type":23,"tag":278,"props":4612,"children":4613},{"class":285},[4614],{"type":28,"value":2102},{"type":23,"tag":278,"props":4616,"children":4617},{"class":291},[4618],{"type":28,"value":294},{"type":23,"tag":278,"props":4620,"children":4621},{"class":443},[4622],{"type":28,"value":598},{"type":23,"tag":278,"props":4624,"children":4625},{"class":291},[4626],{"type":28,"value":2115},{"type":23,"tag":278,"props":4628,"children":4629},{"class":280,"line":1458},[4630,4634,4638],{"type":23,"tag":278,"props":4631,"children":4632},{"class":291},[4633],{"type":28,"value":2139},{"type":23,"tag":278,"props":4635,"children":4636},{"class":285},[4637],{"type":28,"value":2127},{"type":23,"tag":278,"props":4639,"children":4640},{"class":291},[4641],{"type":28,"value":425},{"type":23,"tag":278,"props":4643,"children":4644},{"class":280,"line":1475},[4645,4650,4654,4658,4662,4666,4670,4674,4678,4682,4686,4690,4694,4698,4702,4706,4710,4714,4718,4722,4726],{"type":23,"tag":278,"props":4646,"children":4647},{"class":291},[4648],{"type":28,"value":4649},"        ",{"type":23,"tag":278,"props":4651,"children":4652},{"class":443},[4653],{"type":28,"value":806},{"type":23,"tag":278,"props":4655,"children":4656},{"class":291},[4657],{"type":28,"value":344},{"type":23,"tag":278,"props":4659,"children":4660},{"class":443},[4661],{"type":28,"value":815},{"type":23,"tag":278,"props":4663,"children":4664},{"class":285},[4665],{"type":28,"value":705},{"type":23,"tag":278,"props":4667,"children":4668},{"class":297},[4669],{"type":28,"value":4353},{"type":23,"tag":278,"props":4671,"children":4672},{"class":291},[4673],{"type":28,"value":123},{"type":23,"tag":278,"props":4675,"children":4676},{"class":297},[4677],{"type":28,"value":1757},{"type":23,"tag":278,"props":4679,"children":4680},{"class":291},[4681],{"type":28,"value":123},{"type":23,"tag":278,"props":4683,"children":4684},{"class":337},[4685],{"type":28,"value":501},{"type":23,"tag":278,"props":4687,"children":4688},{"class":285},[4689],{"type":28,"value":582},{"type":23,"tag":278,"props":4691,"children":4692},{"class":443},[4693],{"type":28,"value":848},{"type":23,"tag":278,"props":4695,"children":4696},{"class":285},[4697],{"type":28,"value":705},{"type":23,"tag":278,"props":4699,"children":4700},{"class":297},[4701],{"type":28,"value":4353},{"type":23,"tag":278,"props":4703,"children":4704},{"class":291},[4705],{"type":28,"value":123},{"type":23,"tag":278,"props":4707,"children":4708},{"class":297},[4709],{"type":28,"value":1757},{"type":23,"tag":278,"props":4711,"children":4712},{"class":291},[4713],{"type":28,"value":123},{"type":23,"tag":278,"props":4715,"children":4716},{"class":337},[4717],{"type":28,"value":523},{"type":23,"tag":278,"props":4719,"children":4720},{"class":285},[4721],{"type":28,"value":582},{"type":23,"tag":278,"props":4723,"children":4724},{"class":443},[4725],{"type":28,"value":815},{"type":23,"tag":278,"props":4727,"children":4728},{"class":291},[4729],{"type":28,"value":885},{"type":23,"tag":278,"props":4731,"children":4732},{"class":280,"line":1483},[4733,4737,4741,4745,4749,4753,4757,4761],{"type":23,"tag":278,"props":4734,"children":4735},{"class":291},[4736],{"type":28,"value":4649},{"type":23,"tag":278,"props":4738,"children":4739},{"class":443},[4740],{"type":28,"value":897},{"type":23,"tag":278,"props":4742,"children":4743},{"class":291},[4744],{"type":28,"value":344},{"type":23,"tag":278,"props":4746,"children":4747},{"class":297},[4748],{"type":28,"value":4353},{"type":23,"tag":278,"props":4750,"children":4751},{"class":291},[4752],{"type":28,"value":123},{"type":23,"tag":278,"props":4754,"children":4755},{"class":297},[4756],{"type":28,"value":1757},{"type":23,"tag":278,"props":4758,"children":4759},{"class":291},[4760],{"type":28,"value":123},{"type":23,"tag":278,"props":4762,"children":4763},{"class":337},[4764],{"type":28,"value":922},{"type":23,"tag":278,"props":4766,"children":4767},{"class":280,"line":1496},[4768],{"type":23,"tag":278,"props":4769,"children":4770},{"class":291},[4771],{"type":28,"value":4772},"      }\n",{"type":23,"tag":278,"props":4774,"children":4775},{"class":280,"line":1529},[4776,4780,4784,4788,4792],{"type":23,"tag":278,"props":4777,"children":4778},{"class":291},[4779],{"type":28,"value":1201},{"type":23,"tag":278,"props":4781,"children":4782},{"class":285},[4783],{"type":28,"value":2102},{"type":23,"tag":278,"props":4785,"children":4786},{"class":291},[4787],{"type":28,"value":294},{"type":23,"tag":278,"props":4789,"children":4790},{"class":443},[4791],{"type":28,"value":1967},{"type":23,"tag":278,"props":4793,"children":4794},{"class":291},[4795],{"type":28,"value":2115},{"type":23,"tag":278,"props":4797,"children":4798},{"class":280,"line":1538},[4799,4803,4807],{"type":23,"tag":278,"props":4800,"children":4801},{"class":291},[4802],{"type":28,"value":2139},{"type":23,"tag":278,"props":4804,"children":4805},{"class":285},[4806],{"type":28,"value":2127},{"type":23,"tag":278,"props":4808,"children":4809},{"class":291},[4810],{"type":28,"value":425},{"type":23,"tag":278,"props":4812,"children":4813},{"class":280,"line":1554},[4814,4818,4822,4826,4830,4834,4838,4842,4846],{"type":23,"tag":278,"props":4815,"children":4816},{"class":291},[4817],{"type":28,"value":4649},{"type":23,"tag":278,"props":4819,"children":4820},{"class":443},[4821],{"type":28,"value":2312},{"type":23,"tag":278,"props":4823,"children":4824},{"class":291},[4825],{"type":28,"value":344},{"type":23,"tag":278,"props":4827,"children":4828},{"class":297},[4829],{"type":28,"value":4353},{"type":23,"tag":278,"props":4831,"children":4832},{"class":291},[4833],{"type":28,"value":123},{"type":23,"tag":278,"props":4835,"children":4836},{"class":297},[4837],{"type":28,"value":1757},{"type":23,"tag":278,"props":4839,"children":4840},{"class":291},[4841],{"type":28,"value":123},{"type":23,"tag":278,"props":4843,"children":4844},{"class":337},[4845],{"type":28,"value":1922},{"type":23,"tag":278,"props":4847,"children":4848},{"class":291},[4849],{"type":28,"value":885},{"type":23,"tag":278,"props":4851,"children":4852},{"class":280,"line":1563},[4853,4857,4861,4865,4869,4873,4877,4881],{"type":23,"tag":278,"props":4854,"children":4855},{"class":291},[4856],{"type":28,"value":4649},{"type":23,"tag":278,"props":4858,"children":4859},{"class":443},[4860],{"type":28,"value":2352},{"type":23,"tag":278,"props":4862,"children":4863},{"class":291},[4864],{"type":28,"value":344},{"type":23,"tag":278,"props":4866,"children":4867},{"class":297},[4868],{"type":28,"value":4353},{"type":23,"tag":278,"props":4870,"children":4871},{"class":291},[4872],{"type":28,"value":123},{"type":23,"tag":278,"props":4874,"children":4875},{"class":297},[4876],{"type":28,"value":1757},{"type":23,"tag":278,"props":4878,"children":4879},{"class":291},[4880],{"type":28,"value":123},{"type":23,"tag":278,"props":4882,"children":4883},{"class":337},[4884],{"type":28,"value":2377},{"type":23,"tag":278,"props":4886,"children":4888},{"class":280,"line":4887},27,[4889],{"type":23,"tag":278,"props":4890,"children":4891},{"class":291},[4892],{"type":28,"value":4772},{"type":23,"tag":278,"props":4894,"children":4896},{"class":280,"line":4895},28,[4897,4901,4905,4909,4913],{"type":23,"tag":278,"props":4898,"children":4899},{"class":291},[4900],{"type":28,"value":1201},{"type":23,"tag":278,"props":4902,"children":4903},{"class":285},[4904],{"type":28,"value":2102},{"type":23,"tag":278,"props":4906,"children":4907},{"class":291},[4908],{"type":28,"value":294},{"type":23,"tag":278,"props":4910,"children":4911},{"class":443},[4912],{"type":28,"value":3599},{"type":23,"tag":278,"props":4914,"children":4915},{"class":291},[4916],{"type":28,"value":2115},{"type":23,"tag":278,"props":4918,"children":4920},{"class":280,"line":4919},29,[4921,4925,4929],{"type":23,"tag":278,"props":4922,"children":4923},{"class":291},[4924],{"type":28,"value":2139},{"type":23,"tag":278,"props":4926,"children":4927},{"class":285},[4928],{"type":28,"value":2127},{"type":23,"tag":278,"props":4930,"children":4931},{"class":291},[4932],{"type":28,"value":3619},{"type":23,"tag":278,"props":4934,"children":4936},{"class":280,"line":4935},30,[4937],{"type":23,"tag":278,"props":4938,"children":4939},{"class":291},[4940],{"type":28,"value":2262},{"type":23,"tag":278,"props":4942,"children":4944},{"class":280,"line":4943},31,[4945],{"type":23,"tag":278,"props":4946,"children":4947},{"class":291},[4948],{"type":28,"value":2392},{"type":23,"tag":278,"props":4950,"children":4952},{"class":280,"line":4951},32,[4953],{"type":23,"tag":278,"props":4954,"children":4955},{},[4956],{"type":28,"value":750},{"type":23,"tag":278,"props":4958,"children":4960},{"class":280,"line":4959},33,[4961,4965,4969,4973,4977],{"type":23,"tag":278,"props":4962,"children":4963},{"class":291},[4964],{"type":28,"value":334},{"type":23,"tag":278,"props":4966,"children":4967},{"class":285},[4968],{"type":28,"value":4404},{"type":23,"tag":278,"props":4970,"children":4971},{"class":291},[4972],{"type":28,"value":294},{"type":23,"tag":278,"props":4974,"children":4975},{"class":317},[4976],{"type":28,"value":953},{"type":23,"tag":278,"props":4978,"children":4979},{"class":291},[4980],{"type":28,"value":4417},{"type":23,"tag":278,"props":4982,"children":4984},{"class":280,"line":4983},34,[4985,4989,4993,4997,5001,5005,5009,5013,5017,5021,5025,5029,5033],{"type":23,"tag":278,"props":4986,"children":4987},{"class":291},[4988],{"type":28,"value":1201},{"type":23,"tag":278,"props":4990,"children":4991},{"class":285},[4992],{"type":28,"value":2481},{"type":23,"tag":278,"props":4994,"children":4995},{"class":291},[4996],{"type":28,"value":2065},{"type":23,"tag":278,"props":4998,"children":4999},{"class":297},[5000],{"type":28,"value":4353},{"type":23,"tag":278,"props":5002,"children":5003},{"class":291},[5004],{"type":28,"value":123},{"type":23,"tag":278,"props":5006,"children":5007},{"class":297},[5008],{"type":28,"value":1757},{"type":23,"tag":278,"props":5010,"children":5011},{"class":291},[5012],{"type":28,"value":123},{"type":23,"tag":278,"props":5014,"children":5015},{"class":337},[5016],{"type":28,"value":404},{"type":23,"tag":278,"props":5018,"children":5019},{"class":291},[5020],{"type":28,"value":294},{"type":23,"tag":278,"props":5022,"children":5023},{"class":307},[5024],{"type":28,"value":2514},{"type":23,"tag":278,"props":5026,"children":5027},{"class":291},[5028],{"type":28,"value":294},{"type":23,"tag":278,"props":5030,"children":5031},{"class":443},[5032],{"type":28,"value":598},{"type":23,"tag":278,"props":5034,"children":5035},{"class":291},[5036],{"type":28,"value":2090},{"type":23,"tag":278,"props":5038,"children":5040},{"class":280,"line":5039},35,[5041,5045,5049,5053],{"type":23,"tag":278,"props":5042,"children":5043},{"class":291},[5044],{"type":28,"value":2139},{"type":23,"tag":278,"props":5046,"children":5047},{"class":285},[5048],{"type":28,"value":2127},{"type":23,"tag":278,"props":5050,"children":5051},{"class":291},[5052],{"type":28,"value":294},{"type":23,"tag":278,"props":5054,"children":5055},{"class":1054},[5056],{"type":28,"value":2546},{"type":23,"tag":278,"props":5058,"children":5060},{"class":280,"line":5059},36,[5061],{"type":23,"tag":278,"props":5062,"children":5063},{"class":291},[5064],{"type":28,"value":2262},{"type":23,"tag":278,"props":5066,"children":5068},{"class":280,"line":5067},37,[5069,5073,5077,5081,5085,5089,5093,5097,5101,5105,5109,5113,5117,5121,5125,5129,5133,5137],{"type":23,"tag":278,"props":5070,"children":5071},{"class":291},[5072],{"type":28,"value":1201},{"type":23,"tag":278,"props":5074,"children":5075},{"class":285},[5076],{"type":28,"value":2127},{"type":23,"tag":278,"props":5078,"children":5079},{"class":291},[5080],{"type":28,"value":294},{"type":23,"tag":278,"props":5082,"children":5083},{"class":297},[5084],{"type":28,"value":4353},{"type":23,"tag":278,"props":5086,"children":5087},{"class":291},[5088],{"type":28,"value":123},{"type":23,"tag":278,"props":5090,"children":5091},{"class":297},[5092],{"type":28,"value":1757},{"type":23,"tag":278,"props":5094,"children":5095},{"class":291},[5096],{"type":28,"value":123},{"type":23,"tag":278,"props":5098,"children":5099},{"class":337},[5100],{"type":28,"value":565},{"type":23,"tag":278,"props":5102,"children":5103},{"class":291},[5104],{"type":28,"value":294},{"type":23,"tag":278,"props":5106,"children":5107},{"class":307},[5108],{"type":28,"value":1019},{"type":23,"tag":278,"props":5110,"children":5111},{"class":291},[5112],{"type":28,"value":294},{"type":23,"tag":278,"props":5114,"children":5115},{"class":297},[5116],{"type":28,"value":1028},{"type":23,"tag":278,"props":5118,"children":5119},{"class":291},[5120],{"type":28,"value":123},{"type":23,"tag":278,"props":5122,"children":5123},{"class":317},[5124],{"type":28,"value":1037},{"type":23,"tag":278,"props":5126,"children":5127},{"class":291},[5128],{"type":28,"value":1042},{"type":23,"tag":278,"props":5130,"children":5131},{"class":307},[5132],{"type":28,"value":1047},{"type":23,"tag":278,"props":5134,"children":5135},{"class":291},[5136],{"type":28,"value":294},{"type":23,"tag":278,"props":5138,"children":5139},{"class":1054},[5140],{"type":28,"value":1057},{"type":23,"tag":278,"props":5142,"children":5144},{"class":280,"line":5143},38,[5145],{"type":23,"tag":278,"props":5146,"children":5147},{"class":291},[5148],{"type":28,"value":2392},{"type":23,"tag":278,"props":5150,"children":5152},{"class":280,"line":5151},39,[5153],{"type":23,"tag":278,"props":5154,"children":5155},{},[5156],{"type":28,"value":750},{"type":23,"tag":278,"props":5158,"children":5160},{"class":280,"line":5159},40,[5161,5165,5169,5173,5178],{"type":23,"tag":278,"props":5162,"children":5163},{"class":291},[5164],{"type":28,"value":334},{"type":23,"tag":278,"props":5166,"children":5167},{"class":285},[5168],{"type":28,"value":4404},{"type":23,"tag":278,"props":5170,"children":5171},{"class":291},[5172],{"type":28,"value":294},{"type":23,"tag":278,"props":5174,"children":5175},{"class":317},[5176],{"type":28,"value":5177},"abilityImage",{"type":23,"tag":278,"props":5179,"children":5180},{"class":291},[5181],{"type":28,"value":4417},{"type":23,"tag":278,"props":5183,"children":5185},{"class":280,"line":5184},41,[5186,5190,5194,5198,5202,5206,5210,5214,5218,5222,5226,5230,5234,5238,5242,5246],{"type":23,"tag":278,"props":5187,"children":5188},{"class":291},[5189],{"type":28,"value":1201},{"type":23,"tag":278,"props":5191,"children":5192},{"class":285},[5193],{"type":28,"value":2481},{"type":23,"tag":278,"props":5195,"children":5196},{"class":291},[5197],{"type":28,"value":2065},{"type":23,"tag":278,"props":5199,"children":5200},{"class":297},[5201],{"type":28,"value":4353},{"type":23,"tag":278,"props":5203,"children":5204},{"class":291},[5205],{"type":28,"value":123},{"type":23,"tag":278,"props":5207,"children":5208},{"class":297},[5209],{"type":28,"value":1757},{"type":23,"tag":278,"props":5211,"children":5212},{"class":291},[5213],{"type":28,"value":123},{"type":23,"tag":278,"props":5215,"children":5216},{"class":337},[5217],{"type":28,"value":404},{"type":23,"tag":278,"props":5219,"children":5220},{"class":291},[5221],{"type":28,"value":294},{"type":23,"tag":278,"props":5223,"children":5224},{"class":307},[5225],{"type":28,"value":2514},{"type":23,"tag":278,"props":5227,"children":5228},{"class":291},[5229],{"type":28,"value":294},{"type":23,"tag":278,"props":5231,"children":5232},{"class":443},[5233],{"type":28,"value":3599},{"type":23,"tag":278,"props":5235,"children":5236},{"class":291},[5237],{"type":28,"value":3753},{"type":23,"tag":278,"props":5239,"children":5240},{"class":285},[5241],{"type":28,"value":2127},{"type":23,"tag":278,"props":5243,"children":5244},{"class":291},[5245],{"type":28,"value":294},{"type":23,"tag":278,"props":5247,"children":5248},{"class":1054},[5249],{"type":28,"value":5250},"null\n",{"type":23,"tag":278,"props":5252,"children":5254},{"class":280,"line":5253},42,[5255,5259,5263,5267,5271,5275,5279,5283,5287,5291],{"type":23,"tag":278,"props":5256,"children":5257},{"class":291},[5258],{"type":28,"value":1201},{"type":23,"tag":278,"props":5260,"children":5261},{"class":285},[5262],{"type":28,"value":2127},{"type":23,"tag":278,"props":5264,"children":5265},{"class":291},[5266],{"type":28,"value":294},{"type":23,"tag":278,"props":5268,"children":5269},{"class":297},[5270],{"type":28,"value":4353},{"type":23,"tag":278,"props":5272,"children":5273},{"class":291},[5274],{"type":28,"value":123},{"type":23,"tag":278,"props":5276,"children":5277},{"class":297},[5278],{"type":28,"value":1757},{"type":23,"tag":278,"props":5280,"children":5281},{"class":291},[5282],{"type":28,"value":123},{"type":23,"tag":278,"props":5284,"children":5285},{"class":297},[5286],{"type":28,"value":2826},{"type":23,"tag":278,"props":5288,"children":5289},{"class":291},[5290],{"type":28,"value":123},{"type":23,"tag":278,"props":5292,"children":5293},{"class":337},[5294],{"type":28,"value":4527},{"type":23,"tag":278,"props":5296,"children":5298},{"class":280,"line":5297},43,[5299],{"type":23,"tag":278,"props":5300,"children":5301},{"class":291},[5302],{"type":28,"value":2392},{"type":23,"tag":278,"props":5304,"children":5306},{"class":280,"line":5305},44,[5307],{"type":23,"tag":278,"props":5308,"children":5309},{"class":291},[5310],{"type":28,"value":582},{"type":23,"tag":24,"props":5312,"children":5313},{},[5314,5316,5321],{"type":28,"value":5315},"You can see that the constructor here is expecting an item of type ",{"type":23,"tag":151,"props":5317,"children":5318},{},[5319],{"type":28,"value":5320},"Pet|Weapon|Amulet",{"type":28,"value":5322}," and assigns it to the corresponding property with the same type.",{"type":23,"tag":24,"props":5324,"children":5325},{},[5326],{"type":28,"value":5327},"So all of the getters (which are the reincarnation of the computed properties) need to run the same conditional checks as our component did.",{"type":23,"tag":24,"props":5329,"children":5330},{},[5331,5333,5338],{"type":28,"value":5332},"And I think that at this point we can all agree that it's a ",{"type":23,"tag":97,"props":5334,"children":5335},{},[5336],{"type":28,"value":5337},"bloody mess",{"type":28,"value":123},{"type":23,"tag":24,"props":5340,"children":5341},{},[5342,5344,5348,5350,5354,5356,5360,5361,5365],{"type":28,"value":5343},"A class should not implement methods that are irrelevant to it. For example, ",{"type":23,"tag":151,"props":5345,"children":5346},{},[5347],{"type":28,"value":5177},{"type":28,"value":5349}," should only exist in the ",{"type":23,"tag":151,"props":5351,"children":5352},{},[5353],{"type":28,"value":2954},{"type":28,"value":5355}," class. And the same goes for the ",{"type":23,"tag":151,"props":5357,"children":5358},{},[5359],{"type":28,"value":953},{"type":28,"value":116},{"type":23,"tag":151,"props":5362,"children":5363},{},[5364],{"type":28,"value":374},{"type":28,"value":123},{"type":23,"tag":24,"props":5367,"children":5368},{},[5369],{"type":28,"value":5370},"Luckily, in the OOP paradigm nobody writes classes like this. In the OOP world the concept of Abstract (or Base) and Derived classes is strongly understood and very commonly used.",{"type":23,"tag":234,"props":5372,"children":5374},{"id":5373},"abstraction",[5375],{"type":28,"value":5376},"Abstraction",{"type":23,"tag":24,"props":5378,"children":5379},{},[5380],{"type":28,"value":5381},"Let's see how we can implement the abstract class in our case:",{"type":23,"tag":24,"props":5383,"children":5384},{},[5385],{"type":28,"value":5386},"We can take everything that is common for our item types and move it to a separate abstract class:",{"type":23,"tag":264,"props":5388,"children":5390},{"code":5389,"language":267,"meta":268},"abstract class BaseCard {\n  abstract item: Pet|Weapon|Amulet\n\n  get name() {\n    return this.item.name\n  }\n\n  get image() {\n    return this.item.pictureUrl\n  }\n}\n",[5391],{"type":23,"tag":271,"props":5392,"children":5393},{},[5394],{"type":23,"tag":264,"props":5395,"children":5396},{"__ignoreMap":7},[5397,5426,5469,5476,5499,5534,5541,5548,5571,5606,5613],{"type":23,"tag":278,"props":5398,"children":5399},{"class":280,"line":281},[5400,5405,5409,5413,5417,5422],{"type":23,"tag":278,"props":5401,"children":5402},{"class":285},[5403],{"type":28,"value":5404},"abstract",{"type":23,"tag":278,"props":5406,"children":5407},{"class":291},[5408],{"type":28,"value":294},{"type":23,"tag":278,"props":5410,"children":5411},{"class":285},[5412],{"type":28,"value":1146},{"type":23,"tag":278,"props":5414,"children":5415},{"class":291},[5416],{"type":28,"value":294},{"type":23,"tag":278,"props":5418,"children":5419},{"class":297},[5420],{"type":28,"value":5421},"BaseCard",{"type":23,"tag":278,"props":5423,"children":5424},{"class":291},[5425],{"type":28,"value":425},{"type":23,"tag":278,"props":5427,"children":5428},{"class":280,"line":328},[5429,5433,5437,5441,5445,5449,5453,5457,5461,5465],{"type":23,"tag":278,"props":5430,"children":5431},{"class":291},[5432],{"type":28,"value":334},{"type":23,"tag":278,"props":5434,"children":5435},{"class":285},[5436],{"type":28,"value":5404},{"type":23,"tag":278,"props":5438,"children":5439},{"class":291},[5440],{"type":28,"value":294},{"type":23,"tag":278,"props":5442,"children":5443},{"class":337},[5444],{"type":28,"value":1757},{"type":23,"tag":278,"props":5446,"children":5447},{"class":291},[5448],{"type":28,"value":344},{"type":23,"tag":278,"props":5450,"children":5451},{"class":297},[5452],{"type":28,"value":374},{"type":23,"tag":278,"props":5454,"children":5455},{"class":291},[5456],{"type":28,"value":1770},{"type":23,"tag":278,"props":5458,"children":5459},{"class":297},[5460],{"type":28,"value":1803},{"type":23,"tag":278,"props":5462,"children":5463},{"class":291},[5464],{"type":28,"value":1770},{"type":23,"tag":278,"props":5466,"children":5467},{"class":297},[5468],{"type":28,"value":2932},{"type":23,"tag":278,"props":5470,"children":5471},{"class":280,"line":352},[5472],{"type":23,"tag":278,"props":5473,"children":5474},{},[5475],{"type":28,"value":750},{"type":23,"tag":278,"props":5477,"children":5478},{"class":280,"line":470},[5479,5483,5487,5491,5495],{"type":23,"tag":278,"props":5480,"children":5481},{"class":291},[5482],{"type":28,"value":334},{"type":23,"tag":278,"props":5484,"children":5485},{"class":285},[5486],{"type":28,"value":4404},{"type":23,"tag":278,"props":5488,"children":5489},{"class":291},[5490],{"type":28,"value":294},{"type":23,"tag":278,"props":5492,"children":5493},{"class":317},[5494],{"type":28,"value":480},{"type":23,"tag":278,"props":5496,"children":5497},{"class":291},[5498],{"type":28,"value":4417},{"type":23,"tag":278,"props":5500,"children":5501},{"class":280,"line":491},[5502,5506,5510,5514,5518,5522,5526,5530],{"type":23,"tag":278,"props":5503,"children":5504},{"class":291},[5505],{"type":28,"value":1201},{"type":23,"tag":278,"props":5507,"children":5508},{"class":285},[5509],{"type":28,"value":2127},{"type":23,"tag":278,"props":5511,"children":5512},{"class":291},[5513],{"type":28,"value":294},{"type":23,"tag":278,"props":5515,"children":5516},{"class":297},[5517],{"type":28,"value":4353},{"type":23,"tag":278,"props":5519,"children":5520},{"class":291},[5521],{"type":28,"value":123},{"type":23,"tag":278,"props":5523,"children":5524},{"class":297},[5525],{"type":28,"value":1757},{"type":23,"tag":278,"props":5527,"children":5528},{"class":291},[5529],{"type":28,"value":123},{"type":23,"tag":278,"props":5531,"children":5532},{"class":337},[5533],{"type":28,"value":4453},{"type":23,"tag":278,"props":5535,"children":5536},{"class":280,"line":513},[5537],{"type":23,"tag":278,"props":5538,"children":5539},{"class":291},[5540],{"type":28,"value":2392},{"type":23,"tag":278,"props":5542,"children":5543},{"class":280,"line":534},[5544],{"type":23,"tag":278,"props":5545,"children":5546},{},[5547],{"type":28,"value":750},{"type":23,"tag":278,"props":5549,"children":5550},{"class":280,"line":555},[5551,5555,5559,5563,5567],{"type":23,"tag":278,"props":5552,"children":5553},{"class":291},[5554],{"type":28,"value":334},{"type":23,"tag":278,"props":5556,"children":5557},{"class":285},[5558],{"type":28,"value":4404},{"type":23,"tag":278,"props":5560,"children":5561},{"class":291},[5562],{"type":28,"value":294},{"type":23,"tag":278,"props":5564,"children":5565},{"class":317},[5566],{"type":28,"value":4487},{"type":23,"tag":278,"props":5568,"children":5569},{"class":291},[5570],{"type":28,"value":4417},{"type":23,"tag":278,"props":5572,"children":5573},{"class":280,"line":576},[5574,5578,5582,5586,5590,5594,5598,5602],{"type":23,"tag":278,"props":5575,"children":5576},{"class":291},[5577],{"type":28,"value":1201},{"type":23,"tag":278,"props":5579,"children":5580},{"class":285},[5581],{"type":28,"value":2127},{"type":23,"tag":278,"props":5583,"children":5584},{"class":291},[5585],{"type":28,"value":294},{"type":23,"tag":278,"props":5587,"children":5588},{"class":297},[5589],{"type":28,"value":4353},{"type":23,"tag":278,"props":5591,"children":5592},{"class":291},[5593],{"type":28,"value":123},{"type":23,"tag":278,"props":5595,"children":5596},{"class":297},[5597],{"type":28,"value":1757},{"type":23,"tag":278,"props":5599,"children":5600},{"class":291},[5601],{"type":28,"value":123},{"type":23,"tag":278,"props":5603,"children":5604},{"class":337},[5605],{"type":28,"value":4527},{"type":23,"tag":278,"props":5607,"children":5608},{"class":280,"line":939},[5609],{"type":23,"tag":278,"props":5610,"children":5611},{"class":291},[5612],{"type":28,"value":2392},{"type":23,"tag":278,"props":5614,"children":5615},{"class":280,"line":985},[5616],{"type":23,"tag":278,"props":5617,"children":5618},{"class":291},[5619],{"type":28,"value":582},{"type":23,"tag":24,"props":5621,"children":5622},{},[5623,5625,5629],{"type":28,"value":5624},"We declare ",{"type":23,"tag":151,"props":5626,"children":5627},{},[5628],{"type":28,"value":1757},{"type":28,"value":5630}," as an abstract property limiting it to the three item types that we have, but leaving the actual resulting type to be implemented by the derived class.",{"type":23,"tag":24,"props":5632,"children":5633},{},[5634,5636,5640,5641,5645],{"type":28,"value":5635},"And we move ",{"type":23,"tag":151,"props":5637,"children":5638},{},[5639],{"type":28,"value":480},{"type":28,"value":116},{"type":23,"tag":151,"props":5642,"children":5643},{},[5644],{"type":28,"value":4487},{"type":28,"value":5646}," here too, because those two are common for all of our items.",{"type":23,"tag":24,"props":5648,"children":5649},{},[5650],{"type":28,"value":5651},"And that's it for our abstraction! Everything else is left to be implemented by the actual classes. Let's code them up as well...",{"type":23,"tag":234,"props":5653,"children":5655},{"id":5654},"pet-class",[5656],{"type":28,"value":5657},"Pet Class",{"type":23,"tag":24,"props":5659,"children":5660},{},[5661],{"type":28,"value":5662},"We'll start with the Pet class",{"type":23,"tag":264,"props":5664,"children":5666},{"code":5665,"language":267,"meta":268},"class PetCard extends BaseCard {\n  item: Pet\n  constructor(item: Pet) {\n    super()\n    this.item = item\n  }\n\n  get isFed() {\n    return this.item.lastFed > Date.now() - 30000\n  }\n\n  get stats() {\n    return {\n      'happiness': `${this.item.happiness}/${this.item.maxHappiness}`,\n      'mood': this.item.mood\n    }\n  }\n}\n",[5667],{"type":23,"tag":271,"props":5668,"children":5669},{},[5670],{"type":23,"tag":264,"props":5671,"children":5672},{"__ignoreMap":7},[5673,5710,5729,5760,5777,5812,5819,5826,5849,5924,5931,5938,5961,5976,6063,6098,6105,6112],{"type":23,"tag":278,"props":5674,"children":5675},{"class":280,"line":281},[5676,5680,5684,5689,5693,5698,5702,5706],{"type":23,"tag":278,"props":5677,"children":5678},{"class":285},[5679],{"type":28,"value":1146},{"type":23,"tag":278,"props":5681,"children":5682},{"class":291},[5683],{"type":28,"value":294},{"type":23,"tag":278,"props":5685,"children":5686},{"class":297},[5687],{"type":28,"value":5688},"PetCard",{"type":23,"tag":278,"props":5690,"children":5691},{"class":291},[5692],{"type":28,"value":294},{"type":23,"tag":278,"props":5694,"children":5695},{"class":285},[5696],{"type":28,"value":5697},"extends",{"type":23,"tag":278,"props":5699,"children":5700},{"class":291},[5701],{"type":28,"value":294},{"type":23,"tag":278,"props":5703,"children":5704},{"class":297},[5705],{"type":28,"value":5421},{"type":23,"tag":278,"props":5707,"children":5708},{"class":291},[5709],{"type":28,"value":425},{"type":23,"tag":278,"props":5711,"children":5712},{"class":280,"line":328},[5713,5717,5721,5725],{"type":23,"tag":278,"props":5714,"children":5715},{"class":291},[5716],{"type":28,"value":334},{"type":23,"tag":278,"props":5718,"children":5719},{"class":337},[5720],{"type":28,"value":1757},{"type":23,"tag":278,"props":5722,"children":5723},{"class":291},[5724],{"type":28,"value":344},{"type":23,"tag":278,"props":5726,"children":5727},{"class":297},[5728],{"type":28,"value":349},{"type":23,"tag":278,"props":5730,"children":5731},{"class":280,"line":352},[5732,5736,5740,5744,5748,5752,5756],{"type":23,"tag":278,"props":5733,"children":5734},{"class":291},[5735],{"type":28,"value":334},{"type":23,"tag":278,"props":5737,"children":5738},{"class":285},[5739],{"type":28,"value":4304},{"type":23,"tag":278,"props":5741,"children":5742},{"class":291},[5743],{"type":28,"value":4309},{"type":23,"tag":278,"props":5745,"children":5746},{"class":337},[5747],{"type":28,"value":1757},{"type":23,"tag":278,"props":5749,"children":5750},{"class":291},[5751],{"type":28,"value":344},{"type":23,"tag":278,"props":5753,"children":5754},{"class":297},[5755],{"type":28,"value":374},{"type":23,"tag":278,"props":5757,"children":5758},{"class":291},[5759],{"type":28,"value":2090},{"type":23,"tag":278,"props":5761,"children":5762},{"class":280,"line":470},[5763,5767,5772],{"type":23,"tag":278,"props":5764,"children":5765},{"class":291},[5766],{"type":28,"value":1201},{"type":23,"tag":278,"props":5768,"children":5769},{"class":297},[5770],{"type":28,"value":5771},"super",{"type":23,"tag":278,"props":5773,"children":5774},{"class":291},[5775],{"type":28,"value":5776},"()\n",{"type":23,"tag":278,"props":5778,"children":5779},{"class":280,"line":491},[5780,5784,5788,5792,5796,5800,5804,5808],{"type":23,"tag":278,"props":5781,"children":5782},{"class":291},[5783],{"type":28,"value":1201},{"type":23,"tag":278,"props":5785,"children":5786},{"class":297},[5787],{"type":28,"value":4353},{"type":23,"tag":278,"props":5789,"children":5790},{"class":291},[5791],{"type":28,"value":123},{"type":23,"tag":278,"props":5793,"children":5794},{"class":337},[5795],{"type":28,"value":1757},{"type":23,"tag":278,"props":5797,"children":5798},{"class":291},[5799],{"type":28,"value":294},{"type":23,"tag":278,"props":5801,"children":5802},{"class":307},[5803],{"type":28,"value":310},{"type":23,"tag":278,"props":5805,"children":5806},{"class":291},[5807],{"type":28,"value":294},{"type":23,"tag":278,"props":5809,"children":5810},{"class":337},[5811],{"type":28,"value":4378},{"type":23,"tag":278,"props":5813,"children":5814},{"class":280,"line":513},[5815],{"type":23,"tag":278,"props":5816,"children":5817},{"class":291},[5818],{"type":28,"value":2392},{"type":23,"tag":278,"props":5820,"children":5821},{"class":280,"line":534},[5822],{"type":23,"tag":278,"props":5823,"children":5824},{},[5825],{"type":28,"value":750},{"type":23,"tag":278,"props":5827,"children":5828},{"class":280,"line":555},[5829,5833,5837,5841,5845],{"type":23,"tag":278,"props":5830,"children":5831},{"class":291},[5832],{"type":28,"value":334},{"type":23,"tag":278,"props":5834,"children":5835},{"class":285},[5836],{"type":28,"value":4404},{"type":23,"tag":278,"props":5838,"children":5839},{"class":291},[5840],{"type":28,"value":294},{"type":23,"tag":278,"props":5842,"children":5843},{"class":317},[5844],{"type":28,"value":953},{"type":23,"tag":278,"props":5846,"children":5847},{"class":291},[5848],{"type":28,"value":4417},{"type":23,"tag":278,"props":5850,"children":5851},{"class":280,"line":576},[5852,5856,5860,5864,5868,5872,5876,5880,5884,5888,5892,5896,5900,5904,5908,5912,5916,5920],{"type":23,"tag":278,"props":5853,"children":5854},{"class":291},[5855],{"type":28,"value":1201},{"type":23,"tag":278,"props":5857,"children":5858},{"class":285},[5859],{"type":28,"value":2127},{"type":23,"tag":278,"props":5861,"children":5862},{"class":291},[5863],{"type":28,"value":294},{"type":23,"tag":278,"props":5865,"children":5866},{"class":297},[5867],{"type":28,"value":4353},{"type":23,"tag":278,"props":5869,"children":5870},{"class":291},[5871],{"type":28,"value":123},{"type":23,"tag":278,"props":5873,"children":5874},{"class":297},[5875],{"type":28,"value":1757},{"type":23,"tag":278,"props":5877,"children":5878},{"class":291},[5879],{"type":28,"value":123},{"type":23,"tag":278,"props":5881,"children":5882},{"class":337},[5883],{"type":28,"value":565},{"type":23,"tag":278,"props":5885,"children":5886},{"class":291},[5887],{"type":28,"value":294},{"type":23,"tag":278,"props":5889,"children":5890},{"class":307},[5891],{"type":28,"value":1019},{"type":23,"tag":278,"props":5893,"children":5894},{"class":291},[5895],{"type":28,"value":294},{"type":23,"tag":278,"props":5897,"children":5898},{"class":297},[5899],{"type":28,"value":1028},{"type":23,"tag":278,"props":5901,"children":5902},{"class":291},[5903],{"type":28,"value":123},{"type":23,"tag":278,"props":5905,"children":5906},{"class":317},[5907],{"type":28,"value":1037},{"type":23,"tag":278,"props":5909,"children":5910},{"class":291},[5911],{"type":28,"value":1042},{"type":23,"tag":278,"props":5913,"children":5914},{"class":307},[5915],{"type":28,"value":1047},{"type":23,"tag":278,"props":5917,"children":5918},{"class":291},[5919],{"type":28,"value":294},{"type":23,"tag":278,"props":5921,"children":5922},{"class":1054},[5923],{"type":28,"value":1057},{"type":23,"tag":278,"props":5925,"children":5926},{"class":280,"line":939},[5927],{"type":23,"tag":278,"props":5928,"children":5929},{"class":291},[5930],{"type":28,"value":2392},{"type":23,"tag":278,"props":5932,"children":5933},{"class":280,"line":985},[5934],{"type":23,"tag":278,"props":5935,"children":5936},{},[5937],{"type":28,"value":750},{"type":23,"tag":278,"props":5939,"children":5940},{"class":280,"line":1060},[5941,5945,5949,5953,5957],{"type":23,"tag":278,"props":5942,"children":5943},{"class":291},[5944],{"type":28,"value":334},{"type":23,"tag":278,"props":5946,"children":5947},{"class":285},[5948],{"type":28,"value":4404},{"type":23,"tag":278,"props":5950,"children":5951},{"class":291},[5952],{"type":28,"value":294},{"type":23,"tag":278,"props":5954,"children":5955},{"class":317},[5956],{"type":28,"value":766},{"type":23,"tag":278,"props":5958,"children":5959},{"class":291},[5960],{"type":28,"value":4417},{"type":23,"tag":278,"props":5962,"children":5963},{"class":280,"line":1308},[5964,5968,5972],{"type":23,"tag":278,"props":5965,"children":5966},{"class":291},[5967],{"type":28,"value":1201},{"type":23,"tag":278,"props":5969,"children":5970},{"class":285},[5971],{"type":28,"value":2127},{"type":23,"tag":278,"props":5973,"children":5974},{"class":291},[5975],{"type":28,"value":425},{"type":23,"tag":278,"props":5977,"children":5978},{"class":280,"line":1320},[5979,5983,5987,5991,5995,5999,6003,6007,6011,6015,6019,6023,6027,6031,6035,6039,6043,6047,6051,6055,6059],{"type":23,"tag":278,"props":5980,"children":5981},{"class":291},[5982],{"type":28,"value":2139},{"type":23,"tag":278,"props":5984,"children":5985},{"class":443},[5986],{"type":28,"value":806},{"type":23,"tag":278,"props":5988,"children":5989},{"class":291},[5990],{"type":28,"value":344},{"type":23,"tag":278,"props":5992,"children":5993},{"class":443},[5994],{"type":28,"value":815},{"type":23,"tag":278,"props":5996,"children":5997},{"class":285},[5998],{"type":28,"value":705},{"type":23,"tag":278,"props":6000,"children":6001},{"class":297},[6002],{"type":28,"value":4353},{"type":23,"tag":278,"props":6004,"children":6005},{"class":291},[6006],{"type":28,"value":123},{"type":23,"tag":278,"props":6008,"children":6009},{"class":297},[6010],{"type":28,"value":1757},{"type":23,"tag":278,"props":6012,"children":6013},{"class":291},[6014],{"type":28,"value":123},{"type":23,"tag":278,"props":6016,"children":6017},{"class":337},[6018],{"type":28,"value":501},{"type":23,"tag":278,"props":6020,"children":6021},{"class":285},[6022],{"type":28,"value":582},{"type":23,"tag":278,"props":6024,"children":6025},{"class":443},[6026],{"type":28,"value":848},{"type":23,"tag":278,"props":6028,"children":6029},{"class":285},[6030],{"type":28,"value":705},{"type":23,"tag":278,"props":6032,"children":6033},{"class":297},[6034],{"type":28,"value":4353},{"type":23,"tag":278,"props":6036,"children":6037},{"class":291},[6038],{"type":28,"value":123},{"type":23,"tag":278,"props":6040,"children":6041},{"class":297},[6042],{"type":28,"value":1757},{"type":23,"tag":278,"props":6044,"children":6045},{"class":291},[6046],{"type":28,"value":123},{"type":23,"tag":278,"props":6048,"children":6049},{"class":337},[6050],{"type":28,"value":523},{"type":23,"tag":278,"props":6052,"children":6053},{"class":285},[6054],{"type":28,"value":582},{"type":23,"tag":278,"props":6056,"children":6057},{"class":443},[6058],{"type":28,"value":815},{"type":23,"tag":278,"props":6060,"children":6061},{"class":291},[6062],{"type":28,"value":885},{"type":23,"tag":278,"props":6064,"children":6065},{"class":280,"line":1342},[6066,6070,6074,6078,6082,6086,6090,6094],{"type":23,"tag":278,"props":6067,"children":6068},{"class":291},[6069],{"type":28,"value":2139},{"type":23,"tag":278,"props":6071,"children":6072},{"class":443},[6073],{"type":28,"value":897},{"type":23,"tag":278,"props":6075,"children":6076},{"class":291},[6077],{"type":28,"value":344},{"type":23,"tag":278,"props":6079,"children":6080},{"class":297},[6081],{"type":28,"value":4353},{"type":23,"tag":278,"props":6083,"children":6084},{"class":291},[6085],{"type":28,"value":123},{"type":23,"tag":278,"props":6087,"children":6088},{"class":297},[6089],{"type":28,"value":1757},{"type":23,"tag":278,"props":6091,"children":6092},{"class":291},[6093],{"type":28,"value":123},{"type":23,"tag":278,"props":6095,"children":6096},{"class":337},[6097],{"type":28,"value":922},{"type":23,"tag":278,"props":6099,"children":6100},{"class":280,"line":1364},[6101],{"type":23,"tag":278,"props":6102,"children":6103},{"class":291},[6104],{"type":28,"value":2262},{"type":23,"tag":278,"props":6106,"children":6107},{"class":280,"line":1373},[6108],{"type":23,"tag":278,"props":6109,"children":6110},{"class":291},[6111],{"type":28,"value":2392},{"type":23,"tag":278,"props":6113,"children":6114},{"class":280,"line":1416},[6115],{"type":23,"tag":278,"props":6116,"children":6117},{"class":291},[6118],{"type":28,"value":582},{"type":23,"tag":24,"props":6120,"children":6121},{},[6122,6124,6128,6130,6134],{"type":28,"value":6123},"We declare item as ",{"type":23,"tag":151,"props":6125,"children":6126},{},[6127],{"type":28,"value":374},{"type":28,"value":6129}," here. And the constructor expects only a ",{"type":23,"tag":151,"props":6131,"children":6132},{},[6133],{"type":28,"value":374},{"type":28,"value":123},{"type":23,"tag":24,"props":6136,"children":6137},{},[6138,6140,6144,6146,6150],{"type":28,"value":6139},"This class has an ",{"type":23,"tag":151,"props":6141,"children":6142},{},[6143],{"type":28,"value":953},{"type":28,"value":6145}," getter, and it implements the version of ",{"type":23,"tag":151,"props":6147,"children":6148},{},[6149],{"type":28,"value":766},{"type":28,"value":6151}," that is relevant for a pet item.",{"type":23,"tag":24,"props":6153,"children":6154},{},[6155],{"type":28,"value":6156},"You can notice that the code simplicity in those getters is somewhat reminiscent of the first iteration, when we only had one item type in our app. That is because there aren't any conditions - we don't need to check the item type because we only expect one.",{"type":23,"tag":234,"props":6158,"children":6160},{"id":6159},"weapon-class",[6161],{"type":28,"value":6162},"Weapon Class",{"type":23,"tag":24,"props":6164,"children":6165},{},[6166],{"type":28,"value":6167},"Next let's implement a Weapon class:",{"type":23,"tag":264,"props":6169,"children":6171},{"code":6170,"language":267,"meta":268},"class WeaponCard extends BaseCard {\n  item: Weapon\n  constructor(item: Weapon) {\n    super()\n    this.item = item\n  }\n\n  get stats() {\n    return {\n      'damage': this.item.damage,\n      'crit chance': this.item.critChance\n    }\n  }\n}\n",[6172],{"type":23,"tag":271,"props":6173,"children":6174},{},[6175],{"type":23,"tag":264,"props":6176,"children":6177},{"__ignoreMap":7},[6178,6214,6233,6264,6279,6314,6321,6328,6351,6366,6405,6440,6447,6454],{"type":23,"tag":278,"props":6179,"children":6180},{"class":280,"line":281},[6181,6185,6189,6194,6198,6202,6206,6210],{"type":23,"tag":278,"props":6182,"children":6183},{"class":285},[6184],{"type":28,"value":1146},{"type":23,"tag":278,"props":6186,"children":6187},{"class":291},[6188],{"type":28,"value":294},{"type":23,"tag":278,"props":6190,"children":6191},{"class":297},[6192],{"type":28,"value":6193},"WeaponCard",{"type":23,"tag":278,"props":6195,"children":6196},{"class":291},[6197],{"type":28,"value":294},{"type":23,"tag":278,"props":6199,"children":6200},{"class":285},[6201],{"type":28,"value":5697},{"type":23,"tag":278,"props":6203,"children":6204},{"class":291},[6205],{"type":28,"value":294},{"type":23,"tag":278,"props":6207,"children":6208},{"class":297},[6209],{"type":28,"value":5421},{"type":23,"tag":278,"props":6211,"children":6212},{"class":291},[6213],{"type":28,"value":425},{"type":23,"tag":278,"props":6215,"children":6216},{"class":280,"line":328},[6217,6221,6225,6229],{"type":23,"tag":278,"props":6218,"children":6219},{"class":291},[6220],{"type":28,"value":334},{"type":23,"tag":278,"props":6222,"children":6223},{"class":337},[6224],{"type":28,"value":1757},{"type":23,"tag":278,"props":6226,"children":6227},{"class":291},[6228],{"type":28,"value":344},{"type":23,"tag":278,"props":6230,"children":6231},{"class":297},[6232],{"type":28,"value":1775},{"type":23,"tag":278,"props":6234,"children":6235},{"class":280,"line":352},[6236,6240,6244,6248,6252,6256,6260],{"type":23,"tag":278,"props":6237,"children":6238},{"class":291},[6239],{"type":28,"value":334},{"type":23,"tag":278,"props":6241,"children":6242},{"class":285},[6243],{"type":28,"value":4304},{"type":23,"tag":278,"props":6245,"children":6246},{"class":291},[6247],{"type":28,"value":4309},{"type":23,"tag":278,"props":6249,"children":6250},{"class":337},[6251],{"type":28,"value":1757},{"type":23,"tag":278,"props":6253,"children":6254},{"class":291},[6255],{"type":28,"value":344},{"type":23,"tag":278,"props":6257,"children":6258},{"class":297},[6259],{"type":28,"value":1803},{"type":23,"tag":278,"props":6261,"children":6262},{"class":291},[6263],{"type":28,"value":2090},{"type":23,"tag":278,"props":6265,"children":6266},{"class":280,"line":470},[6267,6271,6275],{"type":23,"tag":278,"props":6268,"children":6269},{"class":291},[6270],{"type":28,"value":1201},{"type":23,"tag":278,"props":6272,"children":6273},{"class":297},[6274],{"type":28,"value":5771},{"type":23,"tag":278,"props":6276,"children":6277},{"class":291},[6278],{"type":28,"value":5776},{"type":23,"tag":278,"props":6280,"children":6281},{"class":280,"line":491},[6282,6286,6290,6294,6298,6302,6306,6310],{"type":23,"tag":278,"props":6283,"children":6284},{"class":291},[6285],{"type":28,"value":1201},{"type":23,"tag":278,"props":6287,"children":6288},{"class":297},[6289],{"type":28,"value":4353},{"type":23,"tag":278,"props":6291,"children":6292},{"class":291},[6293],{"type":28,"value":123},{"type":23,"tag":278,"props":6295,"children":6296},{"class":337},[6297],{"type":28,"value":1757},{"type":23,"tag":278,"props":6299,"children":6300},{"class":291},[6301],{"type":28,"value":294},{"type":23,"tag":278,"props":6303,"children":6304},{"class":307},[6305],{"type":28,"value":310},{"type":23,"tag":278,"props":6307,"children":6308},{"class":291},[6309],{"type":28,"value":294},{"type":23,"tag":278,"props":6311,"children":6312},{"class":337},[6313],{"type":28,"value":4378},{"type":23,"tag":278,"props":6315,"children":6316},{"class":280,"line":513},[6317],{"type":23,"tag":278,"props":6318,"children":6319},{"class":291},[6320],{"type":28,"value":2392},{"type":23,"tag":278,"props":6322,"children":6323},{"class":280,"line":534},[6324],{"type":23,"tag":278,"props":6325,"children":6326},{},[6327],{"type":28,"value":750},{"type":23,"tag":278,"props":6329,"children":6330},{"class":280,"line":555},[6331,6335,6339,6343,6347],{"type":23,"tag":278,"props":6332,"children":6333},{"class":291},[6334],{"type":28,"value":334},{"type":23,"tag":278,"props":6336,"children":6337},{"class":285},[6338],{"type":28,"value":4404},{"type":23,"tag":278,"props":6340,"children":6341},{"class":291},[6342],{"type":28,"value":294},{"type":23,"tag":278,"props":6344,"children":6345},{"class":317},[6346],{"type":28,"value":766},{"type":23,"tag":278,"props":6348,"children":6349},{"class":291},[6350],{"type":28,"value":4417},{"type":23,"tag":278,"props":6352,"children":6353},{"class":280,"line":576},[6354,6358,6362],{"type":23,"tag":278,"props":6355,"children":6356},{"class":291},[6357],{"type":28,"value":1201},{"type":23,"tag":278,"props":6359,"children":6360},{"class":285},[6361],{"type":28,"value":2127},{"type":23,"tag":278,"props":6363,"children":6364},{"class":291},[6365],{"type":28,"value":425},{"type":23,"tag":278,"props":6367,"children":6368},{"class":280,"line":939},[6369,6373,6377,6381,6385,6389,6393,6397,6401],{"type":23,"tag":278,"props":6370,"children":6371},{"class":291},[6372],{"type":28,"value":2139},{"type":23,"tag":278,"props":6374,"children":6375},{"class":443},[6376],{"type":28,"value":2312},{"type":23,"tag":278,"props":6378,"children":6379},{"class":291},[6380],{"type":28,"value":344},{"type":23,"tag":278,"props":6382,"children":6383},{"class":297},[6384],{"type":28,"value":4353},{"type":23,"tag":278,"props":6386,"children":6387},{"class":291},[6388],{"type":28,"value":123},{"type":23,"tag":278,"props":6390,"children":6391},{"class":297},[6392],{"type":28,"value":1757},{"type":23,"tag":278,"props":6394,"children":6395},{"class":291},[6396],{"type":28,"value":123},{"type":23,"tag":278,"props":6398,"children":6399},{"class":337},[6400],{"type":28,"value":1922},{"type":23,"tag":278,"props":6402,"children":6403},{"class":291},[6404],{"type":28,"value":885},{"type":23,"tag":278,"props":6406,"children":6407},{"class":280,"line":985},[6408,6412,6416,6420,6424,6428,6432,6436],{"type":23,"tag":278,"props":6409,"children":6410},{"class":291},[6411],{"type":28,"value":2139},{"type":23,"tag":278,"props":6413,"children":6414},{"class":443},[6415],{"type":28,"value":2352},{"type":23,"tag":278,"props":6417,"children":6418},{"class":291},[6419],{"type":28,"value":344},{"type":23,"tag":278,"props":6421,"children":6422},{"class":297},[6423],{"type":28,"value":4353},{"type":23,"tag":278,"props":6425,"children":6426},{"class":291},[6427],{"type":28,"value":123},{"type":23,"tag":278,"props":6429,"children":6430},{"class":297},[6431],{"type":28,"value":1757},{"type":23,"tag":278,"props":6433,"children":6434},{"class":291},[6435],{"type":28,"value":123},{"type":23,"tag":278,"props":6437,"children":6438},{"class":337},[6439],{"type":28,"value":2377},{"type":23,"tag":278,"props":6441,"children":6442},{"class":280,"line":1060},[6443],{"type":23,"tag":278,"props":6444,"children":6445},{"class":291},[6446],{"type":28,"value":2262},{"type":23,"tag":278,"props":6448,"children":6449},{"class":280,"line":1308},[6450],{"type":23,"tag":278,"props":6451,"children":6452},{"class":291},[6453],{"type":28,"value":2392},{"type":23,"tag":278,"props":6455,"children":6456},{"class":280,"line":1320},[6457],{"type":23,"tag":278,"props":6458,"children":6459},{"class":291},[6460],{"type":28,"value":582},{"type":23,"tag":24,"props":6462,"children":6463},{},[6464,6466,6470],{"type":28,"value":6465},"Here - similarly - we expect only a ",{"type":23,"tag":151,"props":6467,"children":6468},{},[6469],{"type":28,"value":1803},{"type":28,"value":6471}," and implement the relevant version of the stats. Again - no conditions, everything lean and simple.",{"type":23,"tag":234,"props":6473,"children":6475},{"id":6474},"amulet-class",[6476],{"type":28,"value":6477},"Amulet Class",{"type":23,"tag":24,"props":6479,"children":6480},{},[6481],{"type":28,"value":6482},"And lastly let's implement the Amulet class:",{"type":23,"tag":264,"props":6484,"children":6486},{"code":6485,"language":267,"meta":268},"export class AmuletCard extends BaseCard {\n  item: Amulet\n  constructor(item: Amulet) {\n    super()\n    this.item = item\n  }\n\n  get abilityImage() {\n    return this.item.ability.pictureUrl\n  }\n}\n",[6487],{"type":23,"tag":271,"props":6488,"children":6489},{},[6490],{"type":23,"tag":264,"props":6491,"children":6492},{"__ignoreMap":7},[6493,6538,6557,6588,6603,6638,6645,6652,6675,6718,6725],{"type":23,"tag":278,"props":6494,"children":6495},{"class":280,"line":281},[6496,6501,6505,6509,6513,6518,6522,6526,6530,6534],{"type":23,"tag":278,"props":6497,"children":6498},{"class":285},[6499],{"type":28,"value":6500},"export",{"type":23,"tag":278,"props":6502,"children":6503},{"class":291},[6504],{"type":28,"value":294},{"type":23,"tag":278,"props":6506,"children":6507},{"class":285},[6508],{"type":28,"value":1146},{"type":23,"tag":278,"props":6510,"children":6511},{"class":291},[6512],{"type":28,"value":294},{"type":23,"tag":278,"props":6514,"children":6515},{"class":297},[6516],{"type":28,"value":6517},"AmuletCard",{"type":23,"tag":278,"props":6519,"children":6520},{"class":291},[6521],{"type":28,"value":294},{"type":23,"tag":278,"props":6523,"children":6524},{"class":285},[6525],{"type":28,"value":5697},{"type":23,"tag":278,"props":6527,"children":6528},{"class":291},[6529],{"type":28,"value":294},{"type":23,"tag":278,"props":6531,"children":6532},{"class":297},[6533],{"type":28,"value":5421},{"type":23,"tag":278,"props":6535,"children":6536},{"class":291},[6537],{"type":28,"value":425},{"type":23,"tag":278,"props":6539,"children":6540},{"class":280,"line":328},[6541,6545,6549,6553],{"type":23,"tag":278,"props":6542,"children":6543},{"class":291},[6544],{"type":28,"value":334},{"type":23,"tag":278,"props":6546,"children":6547},{"class":337},[6548],{"type":28,"value":1757},{"type":23,"tag":278,"props":6550,"children":6551},{"class":291},[6552],{"type":28,"value":344},{"type":23,"tag":278,"props":6554,"children":6555},{"class":297},[6556],{"type":28,"value":2932},{"type":23,"tag":278,"props":6558,"children":6559},{"class":280,"line":352},[6560,6564,6568,6572,6576,6580,6584],{"type":23,"tag":278,"props":6561,"children":6562},{"class":291},[6563],{"type":28,"value":334},{"type":23,"tag":278,"props":6565,"children":6566},{"class":285},[6567],{"type":28,"value":4304},{"type":23,"tag":278,"props":6569,"children":6570},{"class":291},[6571],{"type":28,"value":4309},{"type":23,"tag":278,"props":6573,"children":6574},{"class":337},[6575],{"type":28,"value":1757},{"type":23,"tag":278,"props":6577,"children":6578},{"class":291},[6579],{"type":28,"value":344},{"type":23,"tag":278,"props":6581,"children":6582},{"class":297},[6583],{"type":28,"value":2954},{"type":23,"tag":278,"props":6585,"children":6586},{"class":291},[6587],{"type":28,"value":2090},{"type":23,"tag":278,"props":6589,"children":6590},{"class":280,"line":470},[6591,6595,6599],{"type":23,"tag":278,"props":6592,"children":6593},{"class":291},[6594],{"type":28,"value":1201},{"type":23,"tag":278,"props":6596,"children":6597},{"class":297},[6598],{"type":28,"value":5771},{"type":23,"tag":278,"props":6600,"children":6601},{"class":291},[6602],{"type":28,"value":5776},{"type":23,"tag":278,"props":6604,"children":6605},{"class":280,"line":491},[6606,6610,6614,6618,6622,6626,6630,6634],{"type":23,"tag":278,"props":6607,"children":6608},{"class":291},[6609],{"type":28,"value":1201},{"type":23,"tag":278,"props":6611,"children":6612},{"class":297},[6613],{"type":28,"value":4353},{"type":23,"tag":278,"props":6615,"children":6616},{"class":291},[6617],{"type":28,"value":123},{"type":23,"tag":278,"props":6619,"children":6620},{"class":337},[6621],{"type":28,"value":1757},{"type":23,"tag":278,"props":6623,"children":6624},{"class":291},[6625],{"type":28,"value":294},{"type":23,"tag":278,"props":6627,"children":6628},{"class":307},[6629],{"type":28,"value":310},{"type":23,"tag":278,"props":6631,"children":6632},{"class":291},[6633],{"type":28,"value":294},{"type":23,"tag":278,"props":6635,"children":6636},{"class":337},[6637],{"type":28,"value":4378},{"type":23,"tag":278,"props":6639,"children":6640},{"class":280,"line":513},[6641],{"type":23,"tag":278,"props":6642,"children":6643},{"class":291},[6644],{"type":28,"value":2392},{"type":23,"tag":278,"props":6646,"children":6647},{"class":280,"line":534},[6648],{"type":23,"tag":278,"props":6649,"children":6650},{},[6651],{"type":28,"value":750},{"type":23,"tag":278,"props":6653,"children":6654},{"class":280,"line":555},[6655,6659,6663,6667,6671],{"type":23,"tag":278,"props":6656,"children":6657},{"class":291},[6658],{"type":28,"value":334},{"type":23,"tag":278,"props":6660,"children":6661},{"class":285},[6662],{"type":28,"value":4404},{"type":23,"tag":278,"props":6664,"children":6665},{"class":291},[6666],{"type":28,"value":294},{"type":23,"tag":278,"props":6668,"children":6669},{"class":317},[6670],{"type":28,"value":5177},{"type":23,"tag":278,"props":6672,"children":6673},{"class":291},[6674],{"type":28,"value":4417},{"type":23,"tag":278,"props":6676,"children":6677},{"class":280,"line":576},[6678,6682,6686,6690,6694,6698,6702,6706,6710,6714],{"type":23,"tag":278,"props":6679,"children":6680},{"class":291},[6681],{"type":28,"value":1201},{"type":23,"tag":278,"props":6683,"children":6684},{"class":285},[6685],{"type":28,"value":2127},{"type":23,"tag":278,"props":6687,"children":6688},{"class":291},[6689],{"type":28,"value":294},{"type":23,"tag":278,"props":6691,"children":6692},{"class":297},[6693],{"type":28,"value":4353},{"type":23,"tag":278,"props":6695,"children":6696},{"class":291},[6697],{"type":28,"value":123},{"type":23,"tag":278,"props":6699,"children":6700},{"class":297},[6701],{"type":28,"value":1757},{"type":23,"tag":278,"props":6703,"children":6704},{"class":291},[6705],{"type":28,"value":123},{"type":23,"tag":278,"props":6707,"children":6708},{"class":297},[6709],{"type":28,"value":2826},{"type":23,"tag":278,"props":6711,"children":6712},{"class":291},[6713],{"type":28,"value":123},{"type":23,"tag":278,"props":6715,"children":6716},{"class":337},[6717],{"type":28,"value":4527},{"type":23,"tag":278,"props":6719,"children":6720},{"class":280,"line":939},[6721],{"type":23,"tag":278,"props":6722,"children":6723},{"class":291},[6724],{"type":28,"value":2392},{"type":23,"tag":278,"props":6726,"children":6727},{"class":280,"line":985},[6728],{"type":23,"tag":278,"props":6729,"children":6730},{"class":291},[6731],{"type":28,"value":582},{"type":23,"tag":24,"props":6733,"children":6734},{},[6735],{"type":28,"value":6736},"Same principle here.",{"type":23,"tag":234,"props":6738,"children":6740},{"id":6739},"the-takeaway-from-our-oop-experiment",[6741],{"type":28,"value":6742},"The Takeaway from our OOP Experiment",{"type":23,"tag":24,"props":6744,"children":6745},{},[6746],{"type":28,"value":6747},"You can see that by declaring the abstraction - and creating three separate derived classes from it, we have simplified our code a great deal.",{"type":23,"tag":24,"props":6749,"children":6750},{},[6751],{"type":28,"value":6752},"Instead of having all code in one place resulting in a class that was hard to read and navigate, instead of having blocks of code that felt like they don't belong, we have created a system that feels right, reads and scales easily.",{"type":23,"tag":66,"props":6754,"children":6755},{},[6756,6767,6778],{"type":23,"tag":70,"props":6757,"children":6758},{},[6759,6761,6765],{"type":28,"value":6760},"Everything about pets is in the ",{"type":23,"tag":151,"props":6762,"children":6763},{},[6764],{"type":28,"value":374},{"type":28,"value":6766}," class,",{"type":23,"tag":70,"props":6768,"children":6769},{},[6770,6772,6776],{"type":28,"value":6771},"Everything about weapons - in ",{"type":23,"tag":151,"props":6773,"children":6774},{},[6775],{"type":28,"value":1803},{"type":28,"value":6777},",",{"type":23,"tag":70,"props":6779,"children":6780},{},[6781,6783],{"type":28,"value":6782},"And amulets - in ",{"type":23,"tag":151,"props":6784,"children":6785},{},[6786],{"type":28,"value":2954},{"type":23,"tag":24,"props":6788,"children":6789},{},[6790],{"type":28,"value":6791},"And the best part is, we could have 20 more of different item types with different features and they would not add any complexity to our codebase.",{"type":23,"tag":54,"props":6793,"children":6795},{"id":6794},"apply-the-same-oop-principles-to-our-component",[6796],{"type":28,"value":6797},"Apply the Same OOP Principles to our Component",{"type":23,"tag":24,"props":6799,"children":6800},{},[6801],{"type":28,"value":6802},"How do we do that? Very simple. We will do the same as we did with the classes earlier.",{"type":23,"tag":24,"props":6804,"children":6805},{},[6806],{"type":28,"value":6807},"We'll create a separate component for each item type and a single Base component that they all will extend.",{"type":23,"tag":24,"props":6809,"children":6810},{},[6811,6813,6818],{"type":28,"value":6812},"We'll call it ",{"type":23,"tag":151,"props":6814,"children":6815},{},[6816],{"type":28,"value":6817},"ItemBase",{"type":28,"value":123},{"type":23,"tag":234,"props":6820,"children":6822},{"id":6821},"base-script",[6823],{"type":28,"value":6824},"Base Script",{"type":23,"tag":24,"props":6826,"children":6827},{},[6828],{"type":28,"value":6829},"Let's start with the base component's script.",{"type":23,"tag":24,"props":6831,"children":6832},{},[6833],{"type":28,"value":6834},"Here's what its script will look like:",{"type":23,"tag":264,"props":6836,"children":6838},{"code":6837,"language":267,"meta":268},"const props = defineProps\u003C{\n  name: string\n  pictureUrl: string\n  stats?: Record\u003Cstring, string|number>\n}>()\n\nconst imageStyle = computed(() => ({\n  backgroundImage: `url(${props.pictureUrl})`\n}))\n",[6839],{"type":23,"tag":271,"props":6840,"children":6841},{},[6842],{"type":23,"tag":264,"props":6843,"children":6844},{"__ignoreMap":7},[6845,6880,6899,6918,6974,6982,6989,7032,7075],{"type":23,"tag":278,"props":6846,"children":6847},{"class":280,"line":281},[6848,6852,6856,6860,6864,6868,6872,6876],{"type":23,"tag":278,"props":6849,"children":6850},{"class":285},[6851],{"type":28,"value":288},{"type":23,"tag":278,"props":6853,"children":6854},{"class":291},[6855],{"type":28,"value":294},{"type":23,"tag":278,"props":6857,"children":6858},{"class":297},[6859],{"type":28,"value":300},{"type":23,"tag":278,"props":6861,"children":6862},{"class":291},[6863],{"type":28,"value":294},{"type":23,"tag":278,"props":6865,"children":6866},{"class":307},[6867],{"type":28,"value":310},{"type":23,"tag":278,"props":6869,"children":6870},{"class":291},[6871],{"type":28,"value":294},{"type":23,"tag":278,"props":6873,"children":6874},{"class":317},[6875],{"type":28,"value":320},{"type":23,"tag":278,"props":6877,"children":6878},{"class":291},[6879],{"type":28,"value":325},{"type":23,"tag":278,"props":6881,"children":6882},{"class":280,"line":328},[6883,6887,6891,6895],{"type":23,"tag":278,"props":6884,"children":6885},{"class":291},[6886],{"type":28,"value":334},{"type":23,"tag":278,"props":6888,"children":6889},{"class":337},[6890],{"type":28,"value":480},{"type":23,"tag":278,"props":6892,"children":6893},{"class":291},[6894],{"type":28,"value":344},{"type":23,"tag":278,"props":6896,"children":6897},{"class":297},[6898],{"type":28,"value":467},{"type":23,"tag":278,"props":6900,"children":6901},{"class":280,"line":352},[6902,6906,6910,6914],{"type":23,"tag":278,"props":6903,"children":6904},{"class":291},[6905],{"type":28,"value":334},{"type":23,"tag":278,"props":6907,"children":6908},{"class":337},[6909],{"type":28,"value":458},{"type":23,"tag":278,"props":6911,"children":6912},{"class":291},[6913],{"type":28,"value":344},{"type":23,"tag":278,"props":6915,"children":6916},{"class":297},[6917],{"type":28,"value":467},{"type":23,"tag":278,"props":6919,"children":6920},{"class":280,"line":470},[6921,6925,6929,6934,6938,6943,6947,6952,6957,6961,6965,6970],{"type":23,"tag":278,"props":6922,"children":6923},{"class":291},[6924],{"type":28,"value":334},{"type":23,"tag":278,"props":6926,"children":6927},{"class":337},[6928],{"type":28,"value":766},{"type":23,"tag":278,"props":6930,"children":6931},{"class":285},[6932],{"type":28,"value":6933},"?",{"type":23,"tag":278,"props":6935,"children":6936},{"class":291},[6937],{"type":28,"value":344},{"type":23,"tag":278,"props":6939,"children":6940},{"class":297},[6941],{"type":28,"value":6942},"Record",{"type":23,"tag":278,"props":6944,"children":6945},{"class":291},[6946],{"type":28,"value":1132},{"type":23,"tag":278,"props":6948,"children":6949},{"class":297},[6950],{"type":28,"value":6951},"string",{"type":23,"tag":278,"props":6953,"children":6954},{"class":291},[6955],{"type":28,"value":6956},", ",{"type":23,"tag":278,"props":6958,"children":6959},{"class":297},[6960],{"type":28,"value":6951},{"type":23,"tag":278,"props":6962,"children":6963},{"class":291},[6964],{"type":28,"value":1770},{"type":23,"tag":278,"props":6966,"children":6967},{"class":297},[6968],{"type":28,"value":6969},"number",{"type":23,"tag":278,"props":6971,"children":6972},{"class":291},[6973],{"type":28,"value":1160},{"type":23,"tag":278,"props":6975,"children":6976},{"class":280,"line":491},[6977],{"type":23,"tag":278,"props":6978,"children":6979},{"class":291},[6980],{"type":28,"value":6981},"}>()\n",{"type":23,"tag":278,"props":6983,"children":6984},{"class":280,"line":513},[6985],{"type":23,"tag":278,"props":6986,"children":6987},{},[6988],{"type":28,"value":750},{"type":23,"tag":278,"props":6990,"children":6991},{"class":280,"line":534},[6992,6996,7000,7004,7008,7012,7016,7020,7024,7028],{"type":23,"tag":278,"props":6993,"children":6994},{"class":285},[6995],{"type":28,"value":288},{"type":23,"tag":278,"props":6997,"children":6998},{"class":291},[6999],{"type":28,"value":294},{"type":23,"tag":278,"props":7001,"children":7002},{"class":297},[7003],{"type":28,"value":647},{"type":23,"tag":278,"props":7005,"children":7006},{"class":291},[7007],{"type":28,"value":294},{"type":23,"tag":278,"props":7009,"children":7010},{"class":307},[7011],{"type":28,"value":310},{"type":23,"tag":278,"props":7013,"children":7014},{"class":291},[7015],{"type":28,"value":294},{"type":23,"tag":278,"props":7017,"children":7018},{"class":317},[7019],{"type":28,"value":664},{"type":23,"tag":278,"props":7021,"children":7022},{"class":291},[7023],{"type":28,"value":669},{"type":23,"tag":278,"props":7025,"children":7026},{"class":285},[7027],{"type":28,"value":674},{"type":23,"tag":278,"props":7029,"children":7030},{"class":291},[7031],{"type":28,"value":679},{"type":23,"tag":278,"props":7033,"children":7034},{"class":280,"line":555},[7035,7039,7043,7047,7051,7055,7059,7063,7067,7071],{"type":23,"tag":278,"props":7036,"children":7037},{"class":291},[7038],{"type":28,"value":334},{"type":23,"tag":278,"props":7040,"children":7041},{"class":337},[7042],{"type":28,"value":691},{"type":23,"tag":278,"props":7044,"children":7045},{"class":291},[7046],{"type":28,"value":344},{"type":23,"tag":278,"props":7048,"children":7049},{"class":443},[7050],{"type":28,"value":700},{"type":23,"tag":278,"props":7052,"children":7053},{"class":285},[7054],{"type":28,"value":705},{"type":23,"tag":278,"props":7056,"children":7057},{"class":297},[7058],{"type":28,"value":300},{"type":23,"tag":278,"props":7060,"children":7061},{"class":291},[7062],{"type":28,"value":123},{"type":23,"tag":278,"props":7064,"children":7065},{"class":337},[7066],{"type":28,"value":458},{"type":23,"tag":278,"props":7068,"children":7069},{"class":285},[7070],{"type":28,"value":582},{"type":23,"tag":278,"props":7072,"children":7073},{"class":443},[7074],{"type":28,"value":734},{"type":23,"tag":278,"props":7076,"children":7077},{"class":280,"line":576},[7078],{"type":23,"tag":278,"props":7079,"children":7080},{"class":291},[7081],{"type":28,"value":7082},"}))",{"type":23,"tag":24,"props":7084,"children":7085},{},[7086],{"type":28,"value":7087},"We can move the computed image style in here, since it's the same for all items.",{"type":23,"tag":24,"props":7089,"children":7090},{},[7091],{"type":28,"value":7092},"And in the props you can notice that we don't limit the component to any existing item types. Instead we're making it fully abstract by letting the consumer component pass name and picture url as string values.",{"type":23,"tag":24,"props":7094,"children":7095},{},[7096],{"type":28,"value":7097},"As for stats, we expect an object with string keys and string or number values, and we will render all fields of this object in the template (like we did before). But the key difference is we leave the computation of this stats object up to the consumer.",{"type":23,"tag":24,"props":7099,"children":7100},{},[7101],{"type":28,"value":7102},"It is now up to every individual item component to decide what stats it needs to display, parse them as object, and pass it down to this base component. Which will take care of the shared part - rendering them as a list.",{"type":23,"tag":24,"props":7104,"children":7105},{},[7106],{"type":28,"value":7107},"I should note that the stats prop is optional (you can see it's declared with a question mark), meaning that consumer component is free to leave it undefined. This will be important for our Amulet component - since it doesn't have any stats.",{"type":23,"tag":234,"props":7109,"children":7111},{"id":7110},"base-template",[7112],{"type":28,"value":7113},"Base Template",{"type":23,"tag":24,"props":7115,"children":7116},{},[7117],{"type":28,"value":7118},"Here's our base component's template:",{"type":23,"tag":24,"props":7120,"children":7121},{},[7122],{"type":28,"value":7123},"The main thing to notice here is that we're adding a slot.",{"type":23,"tag":24,"props":7125,"children":7126},{},[7127],{"type":28,"value":7128},"The slot is our gateway to extending this component with more elements. That is where all the unique content of \"derived\" components will go.",{"type":23,"tag":264,"props":7130,"children":7132},{"code":7131,"language":1117,"meta":268},"\u003Cdiv class=\"my-card\">\n\n  \u003Cdiv\n    class=\"img\"\n    :style=\"imageStyle\"\n  />\n  \u003Ch3>{{ name }}\u003C/h3>\n\n  \u003Ctemplate v-if=\"stats\">\n    \u003Cdiv\n      v-for=\"statValue, statName in stats\"\n      :key=\"statName\"\n    >\n      \u003Cspan class=\"stat-name\">{{ statName }}: \u003C/span>\n      \u003Cspan class=\"stat-value\">{{ statValue }}\u003C/span>\n    \u003C/div>\n  \u003C/template>\n\n  \u003Cslot />\n\n\u003C/div>\n",[7133],{"type":23,"tag":271,"props":7134,"children":7135},{},[7136],{"type":23,"tag":264,"props":7137,"children":7138},{"__ignoreMap":7},[7139,7170,7177,7188,7207,7226,7233,7257,7264,7297,7308,7327,7346,7354,7394,7433,7448,7463,7470,7487,7494],{"type":23,"tag":278,"props":7140,"children":7141},{"class":280,"line":281},[7142,7146,7150,7154,7158,7162,7166],{"type":23,"tag":278,"props":7143,"children":7144},{"class":291},[7145],{"type":28,"value":1132},{"type":23,"tag":278,"props":7147,"children":7148},{"class":337},[7149],{"type":28,"value":1137},{"type":23,"tag":278,"props":7151,"children":7152},{"class":291},[7153],{"type":28,"value":294},{"type":23,"tag":278,"props":7155,"children":7156},{"class":1054},[7157],{"type":28,"value":1146},{"type":23,"tag":278,"props":7159,"children":7160},{"class":291},[7161],{"type":28,"value":310},{"type":23,"tag":278,"props":7163,"children":7164},{"class":443},[7165],{"type":28,"value":1155},{"type":23,"tag":278,"props":7167,"children":7168},{"class":291},[7169],{"type":28,"value":1160},{"type":23,"tag":278,"props":7171,"children":7172},{"class":280,"line":328},[7173],{"type":23,"tag":278,"props":7174,"children":7175},{},[7176],{"type":28,"value":750},{"type":23,"tag":278,"props":7178,"children":7179},{"class":280,"line":352},[7180,7184],{"type":23,"tag":278,"props":7181,"children":7182},{"class":291},[7183],{"type":28,"value":1188},{"type":23,"tag":278,"props":7185,"children":7186},{"class":337},[7187],{"type":28,"value":1193},{"type":23,"tag":278,"props":7189,"children":7190},{"class":280,"line":470},[7191,7195,7199,7203],{"type":23,"tag":278,"props":7192,"children":7193},{"class":291},[7194],{"type":28,"value":1201},{"type":23,"tag":278,"props":7196,"children":7197},{"class":1054},[7198],{"type":28,"value":1146},{"type":23,"tag":278,"props":7200,"children":7201},{"class":291},[7202],{"type":28,"value":310},{"type":23,"tag":278,"props":7204,"children":7205},{"class":443},[7206],{"type":28,"value":1214},{"type":23,"tag":278,"props":7208,"children":7209},{"class":280,"line":491},[7210,7214,7218,7222],{"type":23,"tag":278,"props":7211,"children":7212},{"class":291},[7213],{"type":28,"value":1201},{"type":23,"tag":278,"props":7215,"children":7216},{"class":1054},[7217],{"type":28,"value":1226},{"type":23,"tag":278,"props":7219,"children":7220},{"class":291},[7221],{"type":28,"value":310},{"type":23,"tag":278,"props":7223,"children":7224},{"class":443},[7225],{"type":28,"value":1235},{"type":23,"tag":278,"props":7227,"children":7228},{"class":280,"line":513},[7229],{"type":23,"tag":278,"props":7230,"children":7231},{"class":291},[7232],{"type":28,"value":1243},{"type":23,"tag":278,"props":7234,"children":7235},{"class":280,"line":534},[7236,7240,7244,7249,7253],{"type":23,"tag":278,"props":7237,"children":7238},{"class":291},[7239],{"type":28,"value":1188},{"type":23,"tag":278,"props":7241,"children":7242},{"class":337},[7243],{"type":28,"value":234},{"type":23,"tag":278,"props":7245,"children":7246},{"class":291},[7247],{"type":28,"value":7248},">{{ name }}\u003C/",{"type":23,"tag":278,"props":7250,"children":7251},{"class":337},[7252],{"type":28,"value":234},{"type":23,"tag":278,"props":7254,"children":7255},{"class":291},[7256],{"type":28,"value":1160},{"type":23,"tag":278,"props":7258,"children":7259},{"class":280,"line":555},[7260],{"type":23,"tag":278,"props":7261,"children":7262},{},[7263],{"type":28,"value":750},{"type":23,"tag":278,"props":7265,"children":7266},{"class":280,"line":576},[7267,7271,7276,7280,7284,7288,7293],{"type":23,"tag":278,"props":7268,"children":7269},{"class":291},[7270],{"type":28,"value":1188},{"type":23,"tag":278,"props":7272,"children":7273},{"class":337},[7274],{"type":28,"value":7275},"template",{"type":23,"tag":278,"props":7277,"children":7278},{"class":291},[7279],{"type":28,"value":294},{"type":23,"tag":278,"props":7281,"children":7282},{"class":1054},[7283],{"type":28,"value":2695},{"type":23,"tag":278,"props":7285,"children":7286},{"class":291},[7287],{"type":28,"value":310},{"type":23,"tag":278,"props":7289,"children":7290},{"class":443},[7291],{"type":28,"value":7292},"\"stats\"",{"type":23,"tag":278,"props":7294,"children":7295},{"class":291},[7296],{"type":28,"value":1160},{"type":23,"tag":278,"props":7298,"children":7299},{"class":280,"line":939},[7300,7304],{"type":23,"tag":278,"props":7301,"children":7302},{"class":291},[7303],{"type":28,"value":1379},{"type":23,"tag":278,"props":7305,"children":7306},{"class":337},[7307],{"type":28,"value":1193},{"type":23,"tag":278,"props":7309,"children":7310},{"class":280,"line":985},[7311,7315,7319,7323],{"type":23,"tag":278,"props":7312,"children":7313},{"class":291},[7314],{"type":28,"value":2139},{"type":23,"tag":278,"props":7316,"children":7317},{"class":1054},[7318],{"type":28,"value":1330},{"type":23,"tag":278,"props":7320,"children":7321},{"class":291},[7322],{"type":28,"value":310},{"type":23,"tag":278,"props":7324,"children":7325},{"class":443},[7326],{"type":28,"value":1339},{"type":23,"tag":278,"props":7328,"children":7329},{"class":280,"line":1060},[7330,7334,7338,7342],{"type":23,"tag":278,"props":7331,"children":7332},{"class":291},[7333],{"type":28,"value":2139},{"type":23,"tag":278,"props":7335,"children":7336},{"class":1054},[7337],{"type":28,"value":1352},{"type":23,"tag":278,"props":7339,"children":7340},{"class":291},[7341],{"type":28,"value":310},{"type":23,"tag":278,"props":7343,"children":7344},{"class":443},[7345],{"type":28,"value":1361},{"type":23,"tag":278,"props":7347,"children":7348},{"class":280,"line":1308},[7349],{"type":23,"tag":278,"props":7350,"children":7351},{"class":291},[7352],{"type":28,"value":7353},"    >\n",{"type":23,"tag":278,"props":7355,"children":7356},{"class":280,"line":1320},[7357,7362,7366,7370,7374,7378,7382,7386,7390],{"type":23,"tag":278,"props":7358,"children":7359},{"class":291},[7360],{"type":28,"value":7361},"      \u003C",{"type":23,"tag":278,"props":7363,"children":7364},{"class":337},[7365],{"type":28,"value":278},{"type":23,"tag":278,"props":7367,"children":7368},{"class":291},[7369],{"type":28,"value":294},{"type":23,"tag":278,"props":7371,"children":7372},{"class":1054},[7373],{"type":28,"value":1146},{"type":23,"tag":278,"props":7375,"children":7376},{"class":291},[7377],{"type":28,"value":310},{"type":23,"tag":278,"props":7379,"children":7380},{"class":443},[7381],{"type":28,"value":1400},{"type":23,"tag":278,"props":7383,"children":7384},{"class":291},[7385],{"type":28,"value":1405},{"type":23,"tag":278,"props":7387,"children":7388},{"class":337},[7389],{"type":28,"value":278},{"type":23,"tag":278,"props":7391,"children":7392},{"class":291},[7393],{"type":28,"value":1160},{"type":23,"tag":278,"props":7395,"children":7396},{"class":280,"line":1342},[7397,7401,7405,7409,7413,7417,7421,7425,7429],{"type":23,"tag":278,"props":7398,"children":7399},{"class":291},[7400],{"type":28,"value":7361},{"type":23,"tag":278,"props":7402,"children":7403},{"class":337},[7404],{"type":28,"value":278},{"type":23,"tag":278,"props":7406,"children":7407},{"class":291},[7408],{"type":28,"value":294},{"type":23,"tag":278,"props":7410,"children":7411},{"class":1054},[7412],{"type":28,"value":1146},{"type":23,"tag":278,"props":7414,"children":7415},{"class":291},[7416],{"type":28,"value":310},{"type":23,"tag":278,"props":7418,"children":7419},{"class":443},[7420],{"type":28,"value":1442},{"type":23,"tag":278,"props":7422,"children":7423},{"class":291},[7424],{"type":28,"value":1447},{"type":23,"tag":278,"props":7426,"children":7427},{"class":337},[7428],{"type":28,"value":278},{"type":23,"tag":278,"props":7430,"children":7431},{"class":291},[7432],{"type":28,"value":1160},{"type":23,"tag":278,"props":7434,"children":7435},{"class":280,"line":1364},[7436,7440,7444],{"type":23,"tag":278,"props":7437,"children":7438},{"class":291},[7439],{"type":28,"value":4070},{"type":23,"tag":278,"props":7441,"children":7442},{"class":337},[7443],{"type":28,"value":1137},{"type":23,"tag":278,"props":7445,"children":7446},{"class":291},[7447],{"type":28,"value":1160},{"type":23,"tag":278,"props":7449,"children":7450},{"class":280,"line":1373},[7451,7455,7459],{"type":23,"tag":278,"props":7452,"children":7453},{"class":291},[7454],{"type":28,"value":1464},{"type":23,"tag":278,"props":7456,"children":7457},{"class":337},[7458],{"type":28,"value":7275},{"type":23,"tag":278,"props":7460,"children":7461},{"class":291},[7462],{"type":28,"value":1160},{"type":23,"tag":278,"props":7464,"children":7465},{"class":280,"line":1416},[7466],{"type":23,"tag":278,"props":7467,"children":7468},{},[7469],{"type":28,"value":750},{"type":23,"tag":278,"props":7471,"children":7472},{"class":280,"line":1458},[7473,7477,7482],{"type":23,"tag":278,"props":7474,"children":7475},{"class":291},[7476],{"type":28,"value":1188},{"type":23,"tag":278,"props":7478,"children":7479},{"class":337},[7480],{"type":28,"value":7481},"slot",{"type":23,"tag":278,"props":7483,"children":7484},{"class":291},[7485],{"type":28,"value":7486}," />\n",{"type":23,"tag":278,"props":7488,"children":7489},{"class":280,"line":1475},[7490],{"type":23,"tag":278,"props":7491,"children":7492},{},[7493],{"type":28,"value":750},{"type":23,"tag":278,"props":7495,"children":7496},{"class":280,"line":1483},[7497,7501,7505],{"type":23,"tag":278,"props":7498,"children":7499},{"class":291},[7500],{"type":28,"value":1569},{"type":23,"tag":278,"props":7502,"children":7503},{"class":337},[7504],{"type":28,"value":1137},{"type":23,"tag":278,"props":7506,"children":7507},{"class":291},[7508],{"type":28,"value":1019},{"type":23,"tag":24,"props":7510,"children":7511},{},[7512],{"type":28,"value":7513},"Same as before, this component also implements the styles for all of the elements in its template, but I'll leave them out of this post.",{"type":23,"tag":24,"props":7515,"children":7516},{},[7517],{"type":28,"value":7518},"Now let's implement our \"derived\" components.",{"type":23,"tag":234,"props":7520,"children":7522},{"id":7521},"pet-component",[7523],{"type":28,"value":7524},"Pet Component",{"type":23,"tag":24,"props":7526,"children":7527},{},[7528],{"type":28,"value":7529},"The script:",{"type":23,"tag":264,"props":7531,"children":7533},{"code":7532,"language":267,"meta":268},"const props = defineProps\u003C{\n  pet: Pet\n}>()\n\nconst stats = computed(() => ({\n  'happiness': `${props.pet.happiness}/${props.pet.maxHappiness}`,\n  'mood': props.pet.mood\n}))\n\nconst isFed = computed(() => (\n  props.pet.lastFed > Date.now() - 30000\n))\n",[7534],{"type":23,"tag":271,"props":7535,"children":7536},{},[7537],{"type":23,"tag":264,"props":7538,"children":7539},{"__ignoreMap":7},[7540,7575,7594,7601,7608,7651,7738,7773,7780,7787,7830,7897],{"type":23,"tag":278,"props":7541,"children":7542},{"class":280,"line":281},[7543,7547,7551,7555,7559,7563,7567,7571],{"type":23,"tag":278,"props":7544,"children":7545},{"class":285},[7546],{"type":28,"value":288},{"type":23,"tag":278,"props":7548,"children":7549},{"class":291},[7550],{"type":28,"value":294},{"type":23,"tag":278,"props":7552,"children":7553},{"class":297},[7554],{"type":28,"value":300},{"type":23,"tag":278,"props":7556,"children":7557},{"class":291},[7558],{"type":28,"value":294},{"type":23,"tag":278,"props":7560,"children":7561},{"class":307},[7562],{"type":28,"value":310},{"type":23,"tag":278,"props":7564,"children":7565},{"class":291},[7566],{"type":28,"value":294},{"type":23,"tag":278,"props":7568,"children":7569},{"class":317},[7570],{"type":28,"value":320},{"type":23,"tag":278,"props":7572,"children":7573},{"class":291},[7574],{"type":28,"value":325},{"type":23,"tag":278,"props":7576,"children":7577},{"class":280,"line":328},[7578,7582,7586,7590],{"type":23,"tag":278,"props":7579,"children":7580},{"class":291},[7581],{"type":28,"value":334},{"type":23,"tag":278,"props":7583,"children":7584},{"class":337},[7585],{"type":28,"value":221},{"type":23,"tag":278,"props":7587,"children":7588},{"class":291},[7589],{"type":28,"value":344},{"type":23,"tag":278,"props":7591,"children":7592},{"class":297},[7593],{"type":28,"value":349},{"type":23,"tag":278,"props":7595,"children":7596},{"class":280,"line":352},[7597],{"type":23,"tag":278,"props":7598,"children":7599},{"class":291},[7600],{"type":28,"value":6981},{"type":23,"tag":278,"props":7602,"children":7603},{"class":280,"line":470},[7604],{"type":23,"tag":278,"props":7605,"children":7606},{},[7607],{"type":28,"value":750},{"type":23,"tag":278,"props":7609,"children":7610},{"class":280,"line":491},[7611,7615,7619,7623,7627,7631,7635,7639,7643,7647],{"type":23,"tag":278,"props":7612,"children":7613},{"class":285},[7614],{"type":28,"value":288},{"type":23,"tag":278,"props":7616,"children":7617},{"class":291},[7618],{"type":28,"value":294},{"type":23,"tag":278,"props":7620,"children":7621},{"class":297},[7622],{"type":28,"value":766},{"type":23,"tag":278,"props":7624,"children":7625},{"class":291},[7626],{"type":28,"value":294},{"type":23,"tag":278,"props":7628,"children":7629},{"class":307},[7630],{"type":28,"value":310},{"type":23,"tag":278,"props":7632,"children":7633},{"class":291},[7634],{"type":28,"value":294},{"type":23,"tag":278,"props":7636,"children":7637},{"class":317},[7638],{"type":28,"value":664},{"type":23,"tag":278,"props":7640,"children":7641},{"class":291},[7642],{"type":28,"value":669},{"type":23,"tag":278,"props":7644,"children":7645},{"class":285},[7646],{"type":28,"value":674},{"type":23,"tag":278,"props":7648,"children":7649},{"class":291},[7650],{"type":28,"value":679},{"type":23,"tag":278,"props":7652,"children":7653},{"class":280,"line":513},[7654,7658,7662,7666,7670,7674,7678,7682,7686,7690,7694,7698,7702,7706,7710,7714,7718,7722,7726,7730,7734],{"type":23,"tag":278,"props":7655,"children":7656},{"class":291},[7657],{"type":28,"value":334},{"type":23,"tag":278,"props":7659,"children":7660},{"class":443},[7661],{"type":28,"value":806},{"type":23,"tag":278,"props":7663,"children":7664},{"class":291},[7665],{"type":28,"value":344},{"type":23,"tag":278,"props":7667,"children":7668},{"class":443},[7669],{"type":28,"value":815},{"type":23,"tag":278,"props":7671,"children":7672},{"class":285},[7673],{"type":28,"value":705},{"type":23,"tag":278,"props":7675,"children":7676},{"class":297},[7677],{"type":28,"value":300},{"type":23,"tag":278,"props":7679,"children":7680},{"class":291},[7681],{"type":28,"value":123},{"type":23,"tag":278,"props":7683,"children":7684},{"class":297},[7685],{"type":28,"value":221},{"type":23,"tag":278,"props":7687,"children":7688},{"class":291},[7689],{"type":28,"value":123},{"type":23,"tag":278,"props":7691,"children":7692},{"class":337},[7693],{"type":28,"value":501},{"type":23,"tag":278,"props":7695,"children":7696},{"class":285},[7697],{"type":28,"value":582},{"type":23,"tag":278,"props":7699,"children":7700},{"class":443},[7701],{"type":28,"value":848},{"type":23,"tag":278,"props":7703,"children":7704},{"class":285},[7705],{"type":28,"value":705},{"type":23,"tag":278,"props":7707,"children":7708},{"class":297},[7709],{"type":28,"value":300},{"type":23,"tag":278,"props":7711,"children":7712},{"class":291},[7713],{"type":28,"value":123},{"type":23,"tag":278,"props":7715,"children":7716},{"class":297},[7717],{"type":28,"value":221},{"type":23,"tag":278,"props":7719,"children":7720},{"class":291},[7721],{"type":28,"value":123},{"type":23,"tag":278,"props":7723,"children":7724},{"class":337},[7725],{"type":28,"value":523},{"type":23,"tag":278,"props":7727,"children":7728},{"class":285},[7729],{"type":28,"value":582},{"type":23,"tag":278,"props":7731,"children":7732},{"class":443},[7733],{"type":28,"value":815},{"type":23,"tag":278,"props":7735,"children":7736},{"class":291},[7737],{"type":28,"value":885},{"type":23,"tag":278,"props":7739,"children":7740},{"class":280,"line":534},[7741,7745,7749,7753,7757,7761,7765,7769],{"type":23,"tag":278,"props":7742,"children":7743},{"class":291},[7744],{"type":28,"value":334},{"type":23,"tag":278,"props":7746,"children":7747},{"class":443},[7748],{"type":28,"value":897},{"type":23,"tag":278,"props":7750,"children":7751},{"class":291},[7752],{"type":28,"value":344},{"type":23,"tag":278,"props":7754,"children":7755},{"class":297},[7756],{"type":28,"value":300},{"type":23,"tag":278,"props":7758,"children":7759},{"class":291},[7760],{"type":28,"value":123},{"type":23,"tag":278,"props":7762,"children":7763},{"class":297},[7764],{"type":28,"value":221},{"type":23,"tag":278,"props":7766,"children":7767},{"class":291},[7768],{"type":28,"value":123},{"type":23,"tag":278,"props":7770,"children":7771},{"class":337},[7772],{"type":28,"value":922},{"type":23,"tag":278,"props":7774,"children":7775},{"class":280,"line":555},[7776],{"type":23,"tag":278,"props":7777,"children":7778},{"class":291},[7779],{"type":28,"value":742},{"type":23,"tag":278,"props":7781,"children":7782},{"class":280,"line":576},[7783],{"type":23,"tag":278,"props":7784,"children":7785},{},[7786],{"type":28,"value":750},{"type":23,"tag":278,"props":7788,"children":7789},{"class":280,"line":939},[7790,7794,7798,7802,7806,7810,7814,7818,7822,7826],{"type":23,"tag":278,"props":7791,"children":7792},{"class":285},[7793],{"type":28,"value":288},{"type":23,"tag":278,"props":7795,"children":7796},{"class":291},[7797],{"type":28,"value":294},{"type":23,"tag":278,"props":7799,"children":7800},{"class":297},[7801],{"type":28,"value":953},{"type":23,"tag":278,"props":7803,"children":7804},{"class":291},[7805],{"type":28,"value":294},{"type":23,"tag":278,"props":7807,"children":7808},{"class":307},[7809],{"type":28,"value":310},{"type":23,"tag":278,"props":7811,"children":7812},{"class":291},[7813],{"type":28,"value":294},{"type":23,"tag":278,"props":7815,"children":7816},{"class":317},[7817],{"type":28,"value":664},{"type":23,"tag":278,"props":7819,"children":7820},{"class":291},[7821],{"type":28,"value":669},{"type":23,"tag":278,"props":7823,"children":7824},{"class":285},[7825],{"type":28,"value":674},{"type":23,"tag":278,"props":7827,"children":7828},{"class":291},[7829],{"type":28,"value":982},{"type":23,"tag":278,"props":7831,"children":7832},{"class":280,"line":985},[7833,7837,7841,7845,7849,7853,7857,7861,7865,7869,7873,7877,7881,7885,7889,7893],{"type":23,"tag":278,"props":7834,"children":7835},{"class":291},[7836],{"type":28,"value":334},{"type":23,"tag":278,"props":7838,"children":7839},{"class":297},[7840],{"type":28,"value":300},{"type":23,"tag":278,"props":7842,"children":7843},{"class":291},[7844],{"type":28,"value":123},{"type":23,"tag":278,"props":7846,"children":7847},{"class":297},[7848],{"type":28,"value":221},{"type":23,"tag":278,"props":7850,"children":7851},{"class":291},[7852],{"type":28,"value":123},{"type":23,"tag":278,"props":7854,"children":7855},{"class":337},[7856],{"type":28,"value":565},{"type":23,"tag":278,"props":7858,"children":7859},{"class":291},[7860],{"type":28,"value":294},{"type":23,"tag":278,"props":7862,"children":7863},{"class":307},[7864],{"type":28,"value":1019},{"type":23,"tag":278,"props":7866,"children":7867},{"class":291},[7868],{"type":28,"value":294},{"type":23,"tag":278,"props":7870,"children":7871},{"class":297},[7872],{"type":28,"value":1028},{"type":23,"tag":278,"props":7874,"children":7875},{"class":291},[7876],{"type":28,"value":123},{"type":23,"tag":278,"props":7878,"children":7879},{"class":317},[7880],{"type":28,"value":1037},{"type":23,"tag":278,"props":7882,"children":7883},{"class":291},[7884],{"type":28,"value":1042},{"type":23,"tag":278,"props":7886,"children":7887},{"class":307},[7888],{"type":28,"value":1047},{"type":23,"tag":278,"props":7890,"children":7891},{"class":291},[7892],{"type":28,"value":294},{"type":23,"tag":278,"props":7894,"children":7895},{"class":1054},[7896],{"type":28,"value":1057},{"type":23,"tag":278,"props":7898,"children":7899},{"class":280,"line":1060},[7900],{"type":23,"tag":278,"props":7901,"children":7902},{"class":291},[7903],{"type":28,"value":1066},{"type":23,"tag":24,"props":7905,"children":7906},{},[7907],{"type":28,"value":7908},"You can see that we're back to where we started:",{"type":23,"tag":66,"props":7910,"children":7911},{},[7912,7923],{"type":23,"tag":70,"props":7913,"children":7914},{},[7915,7917,7921],{"type":28,"value":7916},"props expect only ",{"type":23,"tag":151,"props":7918,"children":7919},{},[7920],{"type":28,"value":374},{"type":28,"value":7922}," type",{"type":23,"tag":70,"props":7924,"children":7925},{},[7926],{"type":28,"value":7927},"there is no conditional logic in our computed properties",{"type":23,"tag":24,"props":7929,"children":7930},{},[7931],{"type":28,"value":7932},"And here's the template:",{"type":23,"tag":264,"props":7934,"children":7936},{"code":7935,"language":1117,"meta":268},"\u003CItemBase\n  :name=\"pet.name\"\n  :picture-url=\"pet.pictureUrl\"\n  :stats=\"stats\"\n>\n  \u003Cdiv class=\"fed-label\">\n    {{ isFed ? '✅' : '❌ NOT' }} FED\n  \u003C/div>\n\u003C/ItemBase> \n",[7937],{"type":23,"tag":271,"props":7938,"children":7939},{},[7940],{"type":23,"tag":264,"props":7941,"children":7942},{"__ignoreMap":7},[7943,7955,7976,7997,8018,8025,8056,8063,8078],{"type":23,"tag":278,"props":7944,"children":7945},{"class":280,"line":281},[7946,7950],{"type":23,"tag":278,"props":7947,"children":7948},{"class":291},[7949],{"type":28,"value":1132},{"type":23,"tag":278,"props":7951,"children":7952},{"class":337},[7953],{"type":28,"value":7954},"ItemBase\n",{"type":23,"tag":278,"props":7956,"children":7957},{"class":280,"line":328},[7958,7962,7967,7971],{"type":23,"tag":278,"props":7959,"children":7960},{"class":291},[7961],{"type":28,"value":334},{"type":23,"tag":278,"props":7963,"children":7964},{"class":1054},[7965],{"type":28,"value":7966},":name",{"type":23,"tag":278,"props":7968,"children":7969},{"class":291},[7970],{"type":28,"value":310},{"type":23,"tag":278,"props":7972,"children":7973},{"class":443},[7974],{"type":28,"value":7975},"\"pet.name\"\n",{"type":23,"tag":278,"props":7977,"children":7978},{"class":280,"line":352},[7979,7983,7988,7992],{"type":23,"tag":278,"props":7980,"children":7981},{"class":291},[7982],{"type":28,"value":334},{"type":23,"tag":278,"props":7984,"children":7985},{"class":1054},[7986],{"type":28,"value":7987},":picture-url",{"type":23,"tag":278,"props":7989,"children":7990},{"class":291},[7991],{"type":28,"value":310},{"type":23,"tag":278,"props":7993,"children":7994},{"class":443},[7995],{"type":28,"value":7996},"\"pet.pictureUrl\"\n",{"type":23,"tag":278,"props":7998,"children":7999},{"class":280,"line":470},[8000,8004,8009,8013],{"type":23,"tag":278,"props":8001,"children":8002},{"class":291},[8003],{"type":28,"value":334},{"type":23,"tag":278,"props":8005,"children":8006},{"class":1054},[8007],{"type":28,"value":8008},":stats",{"type":23,"tag":278,"props":8010,"children":8011},{"class":291},[8012],{"type":28,"value":310},{"type":23,"tag":278,"props":8014,"children":8015},{"class":443},[8016],{"type":28,"value":8017},"\"stats\"\n",{"type":23,"tag":278,"props":8019,"children":8020},{"class":280,"line":491},[8021],{"type":23,"tag":278,"props":8022,"children":8023},{"class":291},[8024],{"type":28,"value":1160},{"type":23,"tag":278,"props":8026,"children":8027},{"class":280,"line":513},[8028,8032,8036,8040,8044,8048,8052],{"type":23,"tag":278,"props":8029,"children":8030},{"class":291},[8031],{"type":28,"value":1188},{"type":23,"tag":278,"props":8033,"children":8034},{"class":337},[8035],{"type":28,"value":1137},{"type":23,"tag":278,"props":8037,"children":8038},{"class":291},[8039],{"type":28,"value":294},{"type":23,"tag":278,"props":8041,"children":8042},{"class":1054},[8043],{"type":28,"value":1146},{"type":23,"tag":278,"props":8045,"children":8046},{"class":291},[8047],{"type":28,"value":310},{"type":23,"tag":278,"props":8049,"children":8050},{"class":443},[8051],{"type":28,"value":1522},{"type":23,"tag":278,"props":8053,"children":8054},{"class":291},[8055],{"type":28,"value":1160},{"type":23,"tag":278,"props":8057,"children":8058},{"class":280,"line":534},[8059],{"type":23,"tag":278,"props":8060,"children":8061},{"class":291},[8062],{"type":28,"value":1535},{"type":23,"tag":278,"props":8064,"children":8065},{"class":280,"line":555},[8066,8070,8074],{"type":23,"tag":278,"props":8067,"children":8068},{"class":291},[8069],{"type":28,"value":1464},{"type":23,"tag":278,"props":8071,"children":8072},{"class":337},[8073],{"type":28,"value":1137},{"type":23,"tag":278,"props":8075,"children":8076},{"class":291},[8077],{"type":28,"value":1160},{"type":23,"tag":278,"props":8079,"children":8080},{"class":280,"line":576},[8081,8085,8089],{"type":23,"tag":278,"props":8082,"children":8083},{"class":291},[8084],{"type":28,"value":1569},{"type":23,"tag":278,"props":8086,"children":8087},{"class":337},[8088],{"type":28,"value":6817},{"type":23,"tag":278,"props":8090,"children":8091},{"class":291},[8092],{"type":28,"value":8093},"> ",{"type":23,"tag":24,"props":8095,"children":8096},{},[8097],{"type":28,"value":8098},"The template has change significantly.",{"type":23,"tag":24,"props":8100,"children":8101},{},[8102,8104,8108],{"type":28,"value":8103},"Since all of the common markup for our components now lives inside of the base ",{"type":23,"tag":151,"props":8105,"children":8106},{},[8107],{"type":28,"value":6817},{"type":28,"value":8109}," component, all we need to do here is:",{"type":23,"tag":66,"props":8111,"children":8112},{},[8113,8118,8123],{"type":23,"tag":70,"props":8114,"children":8115},{},[8116],{"type":28,"value":8117},"use the Base component,",{"type":23,"tag":70,"props":8119,"children":8120},{},[8121],{"type":28,"value":8122},"provide the props it expects,",{"type":23,"tag":70,"props":8124,"children":8125},{},[8126],{"type":28,"value":8127},"and extend it through slot with the additional markup (\"fed\" label) that is unique for the pet",{"type":23,"tag":24,"props":8129,"children":8130},{},[8131],{"type":28,"value":8132},"Perfect, let's move on.",{"type":23,"tag":234,"props":8134,"children":8136},{"id":8135},"weapon-component",[8137],{"type":28,"value":8138},"Weapon Component",{"type":23,"tag":24,"props":8140,"children":8141},{},[8142],{"type":28,"value":8143},"Here's the script:",{"type":23,"tag":264,"props":8145,"children":8147},{"code":8146,"language":267,"meta":268},"const props = defineProps\u003C{\n  weapon: Weapon\n}>()\n\nconst stats = computed(() => ({\n  'damage': props.weapon.damage,\n  'crit chance': props.weapon.critChance\n}))\n",[8148],{"type":23,"tag":271,"props":8149,"children":8150},{},[8151],{"type":23,"tag":264,"props":8152,"children":8153},{"__ignoreMap":7},[8154,8189,8208,8215,8222,8265,8304,8339],{"type":23,"tag":278,"props":8155,"children":8156},{"class":280,"line":281},[8157,8161,8165,8169,8173,8177,8181,8185],{"type":23,"tag":278,"props":8158,"children":8159},{"class":285},[8160],{"type":28,"value":288},{"type":23,"tag":278,"props":8162,"children":8163},{"class":291},[8164],{"type":28,"value":294},{"type":23,"tag":278,"props":8166,"children":8167},{"class":297},[8168],{"type":28,"value":300},{"type":23,"tag":278,"props":8170,"children":8171},{"class":291},[8172],{"type":28,"value":294},{"type":23,"tag":278,"props":8174,"children":8175},{"class":307},[8176],{"type":28,"value":310},{"type":23,"tag":278,"props":8178,"children":8179},{"class":291},[8180],{"type":28,"value":294},{"type":23,"tag":278,"props":8182,"children":8183},{"class":317},[8184],{"type":28,"value":320},{"type":23,"tag":278,"props":8186,"children":8187},{"class":291},[8188],{"type":28,"value":325},{"type":23,"tag":278,"props":8190,"children":8191},{"class":280,"line":328},[8192,8196,8200,8204],{"type":23,"tag":278,"props":8193,"children":8194},{"class":291},[8195],{"type":28,"value":334},{"type":23,"tag":278,"props":8197,"children":8198},{"class":337},[8199],{"type":28,"value":1655},{"type":23,"tag":278,"props":8201,"children":8202},{"class":291},[8203],{"type":28,"value":344},{"type":23,"tag":278,"props":8205,"children":8206},{"class":297},[8207],{"type":28,"value":1775},{"type":23,"tag":278,"props":8209,"children":8210},{"class":280,"line":352},[8211],{"type":23,"tag":278,"props":8212,"children":8213},{"class":291},[8214],{"type":28,"value":6981},{"type":23,"tag":278,"props":8216,"children":8217},{"class":280,"line":470},[8218],{"type":23,"tag":278,"props":8219,"children":8220},{},[8221],{"type":28,"value":750},{"type":23,"tag":278,"props":8223,"children":8224},{"class":280,"line":491},[8225,8229,8233,8237,8241,8245,8249,8253,8257,8261],{"type":23,"tag":278,"props":8226,"children":8227},{"class":285},[8228],{"type":28,"value":288},{"type":23,"tag":278,"props":8230,"children":8231},{"class":291},[8232],{"type":28,"value":294},{"type":23,"tag":278,"props":8234,"children":8235},{"class":297},[8236],{"type":28,"value":766},{"type":23,"tag":278,"props":8238,"children":8239},{"class":291},[8240],{"type":28,"value":294},{"type":23,"tag":278,"props":8242,"children":8243},{"class":307},[8244],{"type":28,"value":310},{"type":23,"tag":278,"props":8246,"children":8247},{"class":291},[8248],{"type":28,"value":294},{"type":23,"tag":278,"props":8250,"children":8251},{"class":317},[8252],{"type":28,"value":664},{"type":23,"tag":278,"props":8254,"children":8255},{"class":291},[8256],{"type":28,"value":669},{"type":23,"tag":278,"props":8258,"children":8259},{"class":285},[8260],{"type":28,"value":674},{"type":23,"tag":278,"props":8262,"children":8263},{"class":291},[8264],{"type":28,"value":679},{"type":23,"tag":278,"props":8266,"children":8267},{"class":280,"line":513},[8268,8272,8276,8280,8284,8288,8292,8296,8300],{"type":23,"tag":278,"props":8269,"children":8270},{"class":291},[8271],{"type":28,"value":334},{"type":23,"tag":278,"props":8273,"children":8274},{"class":443},[8275],{"type":28,"value":2312},{"type":23,"tag":278,"props":8277,"children":8278},{"class":291},[8279],{"type":28,"value":344},{"type":23,"tag":278,"props":8281,"children":8282},{"class":297},[8283],{"type":28,"value":300},{"type":23,"tag":278,"props":8285,"children":8286},{"class":291},[8287],{"type":28,"value":123},{"type":23,"tag":278,"props":8289,"children":8290},{"class":297},[8291],{"type":28,"value":1655},{"type":23,"tag":278,"props":8293,"children":8294},{"class":291},[8295],{"type":28,"value":123},{"type":23,"tag":278,"props":8297,"children":8298},{"class":337},[8299],{"type":28,"value":1922},{"type":23,"tag":278,"props":8301,"children":8302},{"class":291},[8303],{"type":28,"value":885},{"type":23,"tag":278,"props":8305,"children":8306},{"class":280,"line":534},[8307,8311,8315,8319,8323,8327,8331,8335],{"type":23,"tag":278,"props":8308,"children":8309},{"class":291},[8310],{"type":28,"value":334},{"type":23,"tag":278,"props":8312,"children":8313},{"class":443},[8314],{"type":28,"value":2352},{"type":23,"tag":278,"props":8316,"children":8317},{"class":291},[8318],{"type":28,"value":344},{"type":23,"tag":278,"props":8320,"children":8321},{"class":297},[8322],{"type":28,"value":300},{"type":23,"tag":278,"props":8324,"children":8325},{"class":291},[8326],{"type":28,"value":123},{"type":23,"tag":278,"props":8328,"children":8329},{"class":297},[8330],{"type":28,"value":1655},{"type":23,"tag":278,"props":8332,"children":8333},{"class":291},[8334],{"type":28,"value":123},{"type":23,"tag":278,"props":8336,"children":8337},{"class":337},[8338],{"type":28,"value":2377},{"type":23,"tag":278,"props":8340,"children":8341},{"class":280,"line":555},[8342],{"type":23,"tag":278,"props":8343,"children":8344},{"class":291},[8345],{"type":28,"value":7082},{"type":23,"tag":24,"props":8347,"children":8348},{},[8349,8351,8355],{"type":28,"value":8350},"Similarly to the pet, we expect a single typed prop: a ",{"type":23,"tag":151,"props":8352,"children":8353},{},[8354],{"type":28,"value":1803},{"type":28,"value":8356},", and parse the stats object relevant for this item type.",{"type":23,"tag":24,"props":8358,"children":8359},{},[8360],{"type":28,"value":8361},"The template here is even simpler:",{"type":23,"tag":264,"props":8363,"children":8365},{"code":8364,"language":1117,"meta":268},"\u003CItemBase\n  :name=\"weapon.name\"\n  :picture-url=\"weapon.pictureUrl\"\n  :stats=\"stats\"\n/>\n",[8366],{"type":23,"tag":271,"props":8367,"children":8368},{},[8369],{"type":23,"tag":264,"props":8370,"children":8371},{"__ignoreMap":7},[8372,8383,8403,8423,8442],{"type":23,"tag":278,"props":8373,"children":8374},{"class":280,"line":281},[8375,8379],{"type":23,"tag":278,"props":8376,"children":8377},{"class":291},[8378],{"type":28,"value":1132},{"type":23,"tag":278,"props":8380,"children":8381},{"class":337},[8382],{"type":28,"value":7954},{"type":23,"tag":278,"props":8384,"children":8385},{"class":280,"line":328},[8386,8390,8394,8398],{"type":23,"tag":278,"props":8387,"children":8388},{"class":291},[8389],{"type":28,"value":334},{"type":23,"tag":278,"props":8391,"children":8392},{"class":1054},[8393],{"type":28,"value":7966},{"type":23,"tag":278,"props":8395,"children":8396},{"class":291},[8397],{"type":28,"value":310},{"type":23,"tag":278,"props":8399,"children":8400},{"class":443},[8401],{"type":28,"value":8402},"\"weapon.name\"\n",{"type":23,"tag":278,"props":8404,"children":8405},{"class":280,"line":352},[8406,8410,8414,8418],{"type":23,"tag":278,"props":8407,"children":8408},{"class":291},[8409],{"type":28,"value":334},{"type":23,"tag":278,"props":8411,"children":8412},{"class":1054},[8413],{"type":28,"value":7987},{"type":23,"tag":278,"props":8415,"children":8416},{"class":291},[8417],{"type":28,"value":310},{"type":23,"tag":278,"props":8419,"children":8420},{"class":443},[8421],{"type":28,"value":8422},"\"weapon.pictureUrl\"\n",{"type":23,"tag":278,"props":8424,"children":8425},{"class":280,"line":470},[8426,8430,8434,8438],{"type":23,"tag":278,"props":8427,"children":8428},{"class":291},[8429],{"type":28,"value":334},{"type":23,"tag":278,"props":8431,"children":8432},{"class":1054},[8433],{"type":28,"value":8008},{"type":23,"tag":278,"props":8435,"children":8436},{"class":291},[8437],{"type":28,"value":310},{"type":23,"tag":278,"props":8439,"children":8440},{"class":443},[8441],{"type":28,"value":8017},{"type":23,"tag":278,"props":8443,"children":8444},{"class":280,"line":491},[8445],{"type":23,"tag":278,"props":8446,"children":8447},{"class":291},[8448],{"type":28,"value":8449},"/>",{"type":23,"tag":24,"props":8451,"children":8452},{},[8453],{"type":28,"value":8454},"Since the weapon doesn't have any additional markup, it's enough to simply hook up the Base and provide the information it requires.",{"type":23,"tag":234,"props":8456,"children":8458},{"id":8457},"amulet-component",[8459],{"type":28,"value":8460},"Amulet Component",{"type":23,"tag":24,"props":8462,"children":8463},{},[8464],{"type":28,"value":7529},{"type":23,"tag":264,"props":8466,"children":8468},{"code":8467,"language":267,"meta":268},"const props = defineProps\u003C{\n  amulet: Amulet\n}>()\n\nconst abilityIconStyle = computed(() => ({\n  backgroundImage: `url(${props.amulet.ability.pictureUrl})`\n}))\n",[8469],{"type":23,"tag":271,"props":8470,"children":8471},{},[8472],{"type":23,"tag":264,"props":8473,"children":8474},{"__ignoreMap":7},[8475,8510,8529,8536,8543,8586,8645],{"type":23,"tag":278,"props":8476,"children":8477},{"class":280,"line":281},[8478,8482,8486,8490,8494,8498,8502,8506],{"type":23,"tag":278,"props":8479,"children":8480},{"class":285},[8481],{"type":28,"value":288},{"type":23,"tag":278,"props":8483,"children":8484},{"class":291},[8485],{"type":28,"value":294},{"type":23,"tag":278,"props":8487,"children":8488},{"class":297},[8489],{"type":28,"value":300},{"type":23,"tag":278,"props":8491,"children":8492},{"class":291},[8493],{"type":28,"value":294},{"type":23,"tag":278,"props":8495,"children":8496},{"class":307},[8497],{"type":28,"value":310},{"type":23,"tag":278,"props":8499,"children":8500},{"class":291},[8501],{"type":28,"value":294},{"type":23,"tag":278,"props":8503,"children":8504},{"class":317},[8505],{"type":28,"value":320},{"type":23,"tag":278,"props":8507,"children":8508},{"class":291},[8509],{"type":28,"value":325},{"type":23,"tag":278,"props":8511,"children":8512},{"class":280,"line":328},[8513,8517,8521,8525],{"type":23,"tag":278,"props":8514,"children":8515},{"class":291},[8516],{"type":28,"value":334},{"type":23,"tag":278,"props":8518,"children":8519},{"class":337},[8520],{"type":28,"value":2815},{"type":23,"tag":278,"props":8522,"children":8523},{"class":291},[8524],{"type":28,"value":344},{"type":23,"tag":278,"props":8526,"children":8527},{"class":297},[8528],{"type":28,"value":2932},{"type":23,"tag":278,"props":8530,"children":8531},{"class":280,"line":352},[8532],{"type":23,"tag":278,"props":8533,"children":8534},{"class":291},[8535],{"type":28,"value":6981},{"type":23,"tag":278,"props":8537,"children":8538},{"class":280,"line":470},[8539],{"type":23,"tag":278,"props":8540,"children":8541},{},[8542],{"type":28,"value":750},{"type":23,"tag":278,"props":8544,"children":8545},{"class":280,"line":491},[8546,8550,8554,8558,8562,8566,8570,8574,8578,8582],{"type":23,"tag":278,"props":8547,"children":8548},{"class":285},[8549],{"type":28,"value":288},{"type":23,"tag":278,"props":8551,"children":8552},{"class":291},[8553],{"type":28,"value":294},{"type":23,"tag":278,"props":8555,"children":8556},{"class":297},[8557],{"type":28,"value":3669},{"type":23,"tag":278,"props":8559,"children":8560},{"class":291},[8561],{"type":28,"value":294},{"type":23,"tag":278,"props":8563,"children":8564},{"class":307},[8565],{"type":28,"value":310},{"type":23,"tag":278,"props":8567,"children":8568},{"class":291},[8569],{"type":28,"value":294},{"type":23,"tag":278,"props":8571,"children":8572},{"class":317},[8573],{"type":28,"value":664},{"type":23,"tag":278,"props":8575,"children":8576},{"class":291},[8577],{"type":28,"value":669},{"type":23,"tag":278,"props":8579,"children":8580},{"class":285},[8581],{"type":28,"value":674},{"type":23,"tag":278,"props":8583,"children":8584},{"class":291},[8585],{"type":28,"value":679},{"type":23,"tag":278,"props":8587,"children":8588},{"class":280,"line":513},[8589,8593,8597,8601,8605,8609,8613,8617,8621,8625,8629,8633,8637,8641],{"type":23,"tag":278,"props":8590,"children":8591},{"class":291},[8592],{"type":28,"value":334},{"type":23,"tag":278,"props":8594,"children":8595},{"class":337},[8596],{"type":28,"value":691},{"type":23,"tag":278,"props":8598,"children":8599},{"class":291},[8600],{"type":28,"value":344},{"type":23,"tag":278,"props":8602,"children":8603},{"class":443},[8604],{"type":28,"value":700},{"type":23,"tag":278,"props":8606,"children":8607},{"class":285},[8608],{"type":28,"value":705},{"type":23,"tag":278,"props":8610,"children":8611},{"class":297},[8612],{"type":28,"value":300},{"type":23,"tag":278,"props":8614,"children":8615},{"class":291},[8616],{"type":28,"value":123},{"type":23,"tag":278,"props":8618,"children":8619},{"class":297},[8620],{"type":28,"value":2815},{"type":23,"tag":278,"props":8622,"children":8623},{"class":291},[8624],{"type":28,"value":123},{"type":23,"tag":278,"props":8626,"children":8627},{"class":297},[8628],{"type":28,"value":2826},{"type":23,"tag":278,"props":8630,"children":8631},{"class":291},[8632],{"type":28,"value":123},{"type":23,"tag":278,"props":8634,"children":8635},{"class":337},[8636],{"type":28,"value":458},{"type":23,"tag":278,"props":8638,"children":8639},{"class":285},[8640],{"type":28,"value":582},{"type":23,"tag":278,"props":8642,"children":8643},{"class":443},[8644],{"type":28,"value":734},{"type":23,"tag":278,"props":8646,"children":8647},{"class":280,"line":534},[8648],{"type":23,"tag":278,"props":8649,"children":8650},{"class":291},[8651],{"type":28,"value":7082},{"type":23,"tag":24,"props":8653,"children":8654},{},[8655,8657,8661],{"type":28,"value":8656},"Like with other two components, we expect a prop of a single item type: ",{"type":23,"tag":151,"props":8658,"children":8659},{},[8660],{"type":28,"value":2954},{"type":28,"value":123},{"type":23,"tag":24,"props":8663,"children":8664},{},[8665],{"type":28,"value":8666},"Here we also have a computed property for the ability icon which is unique for this component.",{"type":23,"tag":24,"props":8668,"children":8669},{},[8670],{"type":28,"value":8671},"The template for amulet component implements the Base component like this:",{"type":23,"tag":264,"props":8673,"children":8675},{"code":8674,"language":1117,"meta":268},"\u003CItemBase\n  :name=\"amulet.name\"\n  :picture-url=\"amulet.pictureUrl\"\n>\n  \u003Cdiv class=\"ability\">\n    \u003Cdiv\n      class=\"ability-icon\"\n      :style=\"abilityIconStyle\"\n    />\n    \u003Cdiv class=\"ability-info\">\n      \u003Cspan class=\"ability-description\">\n        {{ amulet.ability.type }} ability\n      \u003C/span>\n      \u003Cspan class=\"ability-name\">\n        {{ amulet.ability.name }}\n      \u003C/span>\n    \u003C/div>\n  \u003C/div>\n\u003C/ItemBase> \n",[8676],{"type":23,"tag":271,"props":8677,"children":8678},{},[8679],{"type":23,"tag":264,"props":8680,"children":8681},{"__ignoreMap":7},[8682,8693,8713,8733,8740,8772,8783,8802,8821,8829,8860,8891,8899,8915,8946,8954,8969,8984,8999],{"type":23,"tag":278,"props":8683,"children":8684},{"class":280,"line":281},[8685,8689],{"type":23,"tag":278,"props":8686,"children":8687},{"class":291},[8688],{"type":28,"value":1132},{"type":23,"tag":278,"props":8690,"children":8691},{"class":337},[8692],{"type":28,"value":7954},{"type":23,"tag":278,"props":8694,"children":8695},{"class":280,"line":328},[8696,8700,8704,8708],{"type":23,"tag":278,"props":8697,"children":8698},{"class":291},[8699],{"type":28,"value":334},{"type":23,"tag":278,"props":8701,"children":8702},{"class":1054},[8703],{"type":28,"value":7966},{"type":23,"tag":278,"props":8705,"children":8706},{"class":291},[8707],{"type":28,"value":310},{"type":23,"tag":278,"props":8709,"children":8710},{"class":443},[8711],{"type":28,"value":8712},"\"amulet.name\"\n",{"type":23,"tag":278,"props":8714,"children":8715},{"class":280,"line":352},[8716,8720,8724,8728],{"type":23,"tag":278,"props":8717,"children":8718},{"class":291},[8719],{"type":28,"value":334},{"type":23,"tag":278,"props":8721,"children":8722},{"class":1054},[8723],{"type":28,"value":7987},{"type":23,"tag":278,"props":8725,"children":8726},{"class":291},[8727],{"type":28,"value":310},{"type":23,"tag":278,"props":8729,"children":8730},{"class":443},[8731],{"type":28,"value":8732},"\"amulet.pictureUrl\"\n",{"type":23,"tag":278,"props":8734,"children":8735},{"class":280,"line":470},[8736],{"type":23,"tag":278,"props":8737,"children":8738},{"class":291},[8739],{"type":28,"value":1160},{"type":23,"tag":278,"props":8741,"children":8742},{"class":280,"line":491},[8743,8747,8751,8755,8759,8763,8768],{"type":23,"tag":278,"props":8744,"children":8745},{"class":291},[8746],{"type":28,"value":1188},{"type":23,"tag":278,"props":8748,"children":8749},{"class":337},[8750],{"type":28,"value":1137},{"type":23,"tag":278,"props":8752,"children":8753},{"class":291},[8754],{"type":28,"value":294},{"type":23,"tag":278,"props":8756,"children":8757},{"class":1054},[8758],{"type":28,"value":1146},{"type":23,"tag":278,"props":8760,"children":8761},{"class":291},[8762],{"type":28,"value":310},{"type":23,"tag":278,"props":8764,"children":8765},{"class":443},[8766],{"type":28,"value":8767},"\"ability\"",{"type":23,"tag":278,"props":8769,"children":8770},{"class":291},[8771],{"type":28,"value":1160},{"type":23,"tag":278,"props":8773,"children":8774},{"class":280,"line":513},[8775,8779],{"type":23,"tag":278,"props":8776,"children":8777},{"class":291},[8778],{"type":28,"value":1379},{"type":23,"tag":278,"props":8780,"children":8781},{"class":337},[8782],{"type":28,"value":1193},{"type":23,"tag":278,"props":8784,"children":8785},{"class":280,"line":534},[8786,8790,8794,8798],{"type":23,"tag":278,"props":8787,"children":8788},{"class":291},[8789],{"type":28,"value":2139},{"type":23,"tag":278,"props":8791,"children":8792},{"class":1054},[8793],{"type":28,"value":1146},{"type":23,"tag":278,"props":8795,"children":8796},{"class":291},[8797],{"type":28,"value":310},{"type":23,"tag":278,"props":8799,"children":8800},{"class":443},[8801],{"type":28,"value":3963},{"type":23,"tag":278,"props":8803,"children":8804},{"class":280,"line":555},[8805,8809,8813,8817],{"type":23,"tag":278,"props":8806,"children":8807},{"class":291},[8808],{"type":28,"value":2139},{"type":23,"tag":278,"props":8810,"children":8811},{"class":1054},[8812],{"type":28,"value":1226},{"type":23,"tag":278,"props":8814,"children":8815},{"class":291},[8816],{"type":28,"value":310},{"type":23,"tag":278,"props":8818,"children":8819},{"class":443},[8820],{"type":28,"value":3983},{"type":23,"tag":278,"props":8822,"children":8823},{"class":280,"line":576},[8824],{"type":23,"tag":278,"props":8825,"children":8826},{"class":291},[8827],{"type":28,"value":8828},"    />\n",{"type":23,"tag":278,"props":8830,"children":8831},{"class":280,"line":939},[8832,8836,8840,8844,8848,8852,8856],{"type":23,"tag":278,"props":8833,"children":8834},{"class":291},[8835],{"type":28,"value":1379},{"type":23,"tag":278,"props":8837,"children":8838},{"class":337},[8839],{"type":28,"value":1137},{"type":23,"tag":278,"props":8841,"children":8842},{"class":291},[8843],{"type":28,"value":294},{"type":23,"tag":278,"props":8845,"children":8846},{"class":1054},[8847],{"type":28,"value":1146},{"type":23,"tag":278,"props":8849,"children":8850},{"class":291},[8851],{"type":28,"value":310},{"type":23,"tag":278,"props":8853,"children":8854},{"class":443},[8855],{"type":28,"value":4018},{"type":23,"tag":278,"props":8857,"children":8858},{"class":291},[8859],{"type":28,"value":1160},{"type":23,"tag":278,"props":8861,"children":8862},{"class":280,"line":985},[8863,8867,8871,8875,8879,8883,8887],{"type":23,"tag":278,"props":8864,"children":8865},{"class":291},[8866],{"type":28,"value":7361},{"type":23,"tag":278,"props":8868,"children":8869},{"class":337},[8870],{"type":28,"value":278},{"type":23,"tag":278,"props":8872,"children":8873},{"class":291},[8874],{"type":28,"value":294},{"type":23,"tag":278,"props":8876,"children":8877},{"class":1054},[8878],{"type":28,"value":1146},{"type":23,"tag":278,"props":8880,"children":8881},{"class":291},[8882],{"type":28,"value":310},{"type":23,"tag":278,"props":8884,"children":8885},{"class":443},[8886],{"type":28,"value":4050},{"type":23,"tag":278,"props":8888,"children":8889},{"class":291},[8890],{"type":28,"value":1160},{"type":23,"tag":278,"props":8892,"children":8893},{"class":280,"line":1060},[8894],{"type":23,"tag":278,"props":8895,"children":8896},{"class":291},[8897],{"type":28,"value":8898},"        {{ amulet.ability.type }} ability\n",{"type":23,"tag":278,"props":8900,"children":8901},{"class":280,"line":1308},[8902,8907,8911],{"type":23,"tag":278,"props":8903,"children":8904},{"class":291},[8905],{"type":28,"value":8906},"      \u003C/",{"type":23,"tag":278,"props":8908,"children":8909},{"class":337},[8910],{"type":28,"value":278},{"type":23,"tag":278,"props":8912,"children":8913},{"class":291},[8914],{"type":28,"value":1160},{"type":23,"tag":278,"props":8916,"children":8917},{"class":280,"line":1320},[8918,8922,8926,8930,8934,8938,8942],{"type":23,"tag":278,"props":8919,"children":8920},{"class":291},[8921],{"type":28,"value":7361},{"type":23,"tag":278,"props":8923,"children":8924},{"class":337},[8925],{"type":28,"value":278},{"type":23,"tag":278,"props":8927,"children":8928},{"class":291},[8929],{"type":28,"value":294},{"type":23,"tag":278,"props":8931,"children":8932},{"class":1054},[8933],{"type":28,"value":1146},{"type":23,"tag":278,"props":8935,"children":8936},{"class":291},[8937],{"type":28,"value":310},{"type":23,"tag":278,"props":8939,"children":8940},{"class":443},[8941],{"type":28,"value":4106},{"type":23,"tag":278,"props":8943,"children":8944},{"class":291},[8945],{"type":28,"value":1160},{"type":23,"tag":278,"props":8947,"children":8948},{"class":280,"line":1342},[8949],{"type":23,"tag":278,"props":8950,"children":8951},{"class":291},[8952],{"type":28,"value":8953},"        {{ amulet.ability.name }}\n",{"type":23,"tag":278,"props":8955,"children":8956},{"class":280,"line":1364},[8957,8961,8965],{"type":23,"tag":278,"props":8958,"children":8959},{"class":291},[8960],{"type":28,"value":8906},{"type":23,"tag":278,"props":8962,"children":8963},{"class":337},[8964],{"type":28,"value":278},{"type":23,"tag":278,"props":8966,"children":8967},{"class":291},[8968],{"type":28,"value":1160},{"type":23,"tag":278,"props":8970,"children":8971},{"class":280,"line":1373},[8972,8976,8980],{"type":23,"tag":278,"props":8973,"children":8974},{"class":291},[8975],{"type":28,"value":4070},{"type":23,"tag":278,"props":8977,"children":8978},{"class":337},[8979],{"type":28,"value":1137},{"type":23,"tag":278,"props":8981,"children":8982},{"class":291},[8983],{"type":28,"value":1160},{"type":23,"tag":278,"props":8985,"children":8986},{"class":280,"line":1416},[8987,8991,8995],{"type":23,"tag":278,"props":8988,"children":8989},{"class":291},[8990],{"type":28,"value":1464},{"type":23,"tag":278,"props":8992,"children":8993},{"class":337},[8994],{"type":28,"value":1137},{"type":23,"tag":278,"props":8996,"children":8997},{"class":291},[8998],{"type":28,"value":1160},{"type":23,"tag":278,"props":9000,"children":9001},{"class":280,"line":1458},[9002,9006,9010],{"type":23,"tag":278,"props":9003,"children":9004},{"class":291},[9005],{"type":28,"value":1569},{"type":23,"tag":278,"props":9007,"children":9008},{"class":337},[9009],{"type":28,"value":6817},{"type":23,"tag":278,"props":9011,"children":9012},{"class":291},[9013],{"type":28,"value":8093},{"type":23,"tag":24,"props":9015,"children":9016},{},[9017],{"type":28,"value":9018},"We pass the name and the picture URL, but this time we don't pass any stats, because the component doesn't have any.",{"type":23,"tag":24,"props":9020,"children":9021},{},[9022],{"type":28,"value":9023},"Instead, we provide the ability markup to the slot, using the computed style that we prepared in the script.",{"type":23,"tag":24,"props":9025,"children":9026},{},[9027],{"type":28,"value":9028},"As always, we also add styles to this component related to the ability markup.",{"type":23,"tag":24,"props":9030,"children":9031},{},[9032],{"type":28,"value":9033},"And that's it for our components!",{"type":23,"tag":54,"props":9035,"children":9037},{"id":9036},"conclusion",[9038],{"type":28,"value":9039},"Conclusion",{"type":23,"tag":24,"props":9041,"children":9042},{},[9043],{"type":28,"value":9044},"Yay you made it! This was quite a rollercoaster, huh?",{"type":23,"tag":24,"props":9046,"children":9047},{},[9048],{"type":28,"value":9049},"At first we've made a not the best choice to extend our component with props instead of using component composition. Which, after a couple of iterations, turned our component into a mega-component that depended heavily on conditional checks, and contained all the code for every possible use case.",{"type":23,"tag":24,"props":9051,"children":9052},{},[9053],{"type":28,"value":9054},"In the end we managed to split our mega-component into three separate components relying on a single Base component. Which in turn made our system more maintainable, easy to read and work with.",{"type":23,"tag":234,"props":9056,"children":9058},{"id":9057},"before",[9059],{"type":28,"value":9060},"Before",{"type":23,"tag":24,"props":9062,"children":9063},{},[9064],{"type":23,"tag":202,"props":9065,"children":9069},{"alt":9066,"src":9067,"style":9068},"scheme before","/blog/extend-components/scheme-before.jpg","max-height: 600px",[],{"type":23,"tag":234,"props":9071,"children":9073},{"id":9072},"after",[9074],{"type":28,"value":9075},"After",{"type":23,"tag":24,"props":9077,"children":9078},{},[9079],{"type":23,"tag":202,"props":9080,"children":9082},{"alt":9066,"src":9081,"style":9068},"/blog/extend-components/scheme-after.jpg",[],{"type":23,"tag":24,"props":9084,"children":9085},{},[9086],{"type":28,"value":9087},"It's easy to see why it felt so natural in the beginning to make the mistake of using a single component and extending its props.",{"type":23,"tag":24,"props":9089,"children":9090},{},[9091,9093,9097,9098,9102,9103,9107],{"type":28,"value":9092},"If you look closely at our ",{"type":23,"tag":151,"props":9094,"children":9095},{},[9096],{"type":28,"value":374},{"type":28,"value":6956},{"type":23,"tag":151,"props":9099,"children":9100},{},[9101],{"type":28,"value":1803},{"type":28,"value":116},{"type":23,"tag":151,"props":9104,"children":9105},{},[9106],{"type":28,"value":2954},{"type":28,"value":9108}," item types, you will see they are very similar (except for the things that are different). And if you look at the visual aspect, there are a lot of similarities there as well.",{"type":23,"tag":24,"props":9110,"children":9111},{},[9112],{"type":28,"value":9113},"All of that tricks our brain into thinking that all of the item types should be handled by a single component. When in reality it was very much possible to find a better abstraction and separate the repeated pattern into its own component, at the same time keeping the things that are different straightforward and maintainable.",{"type":23,"tag":24,"props":9115,"children":9116},{},[9117],{"type":28,"value":9118},"And if we focus on keeping our components lean and clean, we'll be on our way to building better codebases.",{"type":23,"tag":24,"props":9120,"children":9121},{},[9122],{"type":28,"value":9123},"Happy coding!",{"type":23,"tag":9125,"children":9126},"style",[9127],{"type":28,"value":9128},".ct-ff51bc{color:#7F848E}\n.ct-dade32{color:#D19A66}\n.ct-39e230{color:#98C379}\n.ct-c69d28{color:#E06C75}\n.ct-b9eb20{color:#61AFEF}\n.ct-5bb0b0{color:#56B6C2}\n.ct-897917{color:#E5C07B}\n.ct-ead73c{color:#ABB2BF}\n.ct-998f3d{color:#C678DD}",{"title":7,"searchDepth":328,"depth":328,"links":9130},[9131,9132,9133,9149,9156,9163],{"id":56,"depth":328,"text":59},{"id":87,"depth":328,"text":90},{"id":194,"depth":328,"text":197,"children":9134},[9135,9136,9137,9138,9139,9140,9141,9142,9143,9144,9145,9146,9147,9148],{"id":236,"depth":352,"text":239},{"id":613,"depth":352,"text":616},{"id":1105,"depth":352,"text":1108},{"id":1618,"depth":352,"text":1621},{"id":1629,"depth":352,"text":1632},{"id":1682,"depth":352,"text":1685},{"id":1972,"depth":352,"text":1975},{"id":2650,"depth":352,"text":1108},{"id":2757,"depth":352,"text":2760},{"id":2789,"depth":352,"text":2792},{"id":2849,"depth":352,"text":1685},{"id":3184,"depth":352,"text":1975},{"id":3857,"depth":352,"text":1108},{"id":4181,"depth":352,"text":4184},{"id":4202,"depth":328,"text":4205,"children":9150},[9151,9152,9153,9154,9155],{"id":5373,"depth":352,"text":5376},{"id":5654,"depth":352,"text":5657},{"id":6159,"depth":352,"text":6162},{"id":6474,"depth":352,"text":6477},{"id":6739,"depth":352,"text":6742},{"id":6794,"depth":328,"text":6797,"children":9157},[9158,9159,9160,9161,9162],{"id":6821,"depth":352,"text":6824},{"id":7110,"depth":352,"text":7113},{"id":7521,"depth":352,"text":7524},{"id":8135,"depth":352,"text":8138},{"id":8457,"depth":352,"text":8460},{"id":9036,"depth":328,"text":9039,"children":9164},[9165,9166],{"id":9057,"depth":352,"text":9060},{"id":9072,"depth":352,"text":9075},"markdown","content:blog:extending-components.md","content","blog/extending-components.md","md",1760572598857]