[{"data":1,"prerenderedAt":13077},["Reactive",2],{"$NjJfml0E8M":3},[4,1505,2121,3988],{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"date":11,"tags":12,"readingTime":16,"body":21,"_type":1500,"_id":1501,"_source":1502,"_file":1503,"_extension":1504},"/blog/nm-cleanup","blog",false,"","Keep your workspace clean with nm‑cleanup and cron","Everyone who's ever worked with npm modules knows how heavy node_modules dirs can get - in some projects I've had them close to a gig! And as long as you're actively working on a project, that's alright. But often times, when the work is finished or paused until no-one-knows-when, the node_modules dirs are just left sitting there without purpose, and slowly but surely eating up your disk space.",1728310204208,[13,14,15],"tutorial","tool","cli",{"text":17,"minutes":18,"time":19,"words":20},"9 min read",8.54,512400,1708,{"type":22,"children":23,"toc":1483},"root",[24,54,65,74,97,117,177,184,189,194,245,250,268,291,297,302,327,332,404,409,440,459,492,498,503,514,526,532,537,544,549,561,567,583,588,594,611,621,625,646,654,666,741,746,763,769,774,792,811,816,833,861,867,872,887,893,901,906,1016,1022,1027,1045,1057,1075,1161,1166,1189,1194,1211,1217,1235,1240,1247,1252,1270,1276,1281,1299,1305,1310,1337,1355,1373,1379,1395,1413,1431,1437,1460,1473,1478],{"type":25,"tag":26,"props":27,"children":28},"element","p",{},[29,32,38,40,46,48,52],{"type":30,"value":31},"text","Everyone who's ever worked with npm modules knows how heavy ",{"type":25,"tag":33,"props":34,"children":35},"code-inline",{},[36],{"type":30,"value":37},"node_modules",{"type":30,"value":39}," dirs can get - in some projects I've had them close to a gig! And ",{"type":25,"tag":41,"props":42,"children":43},"em",{},[44],{"type":30,"value":45},"as long as you're actively working on a project",{"type":30,"value":47},", that's alright. But often times, when the work is finished or paused until no-one-knows-when, the ",{"type":25,"tag":33,"props":49,"children":50},{},[51],{"type":30,"value":37},{"type":30,"value":53}," dirs are just left sitting there without purpose, and slowly but surely eating up your disk space.",{"type":25,"tag":26,"props":55,"children":56},{},[57,59,63],{"type":30,"value":58},"Chances are, you won't be needing some of those fat-bottomed ",{"type":25,"tag":33,"props":60,"children":61},{},[62],{"type":30,"value":37},{"type":30,"value":64}," anytime soon. And even if you do, you could always reinstall them in a matter of seconds! So why keep them around and waste the valuable disk space?",{"type":25,"tag":26,"props":66,"children":67},{},[68],{"type":25,"tag":69,"props":70,"children":73},"img",{"alt":71,"src":72},"accurate representation of node_modules folder size","/blog/nm-cleanup/node_modules_meme.png",[],{"type":25,"tag":26,"props":75,"children":76},{},[77,79,88,90,95],{"type":30,"value":78},"In this post, I'm going to walk you through a basic configuration of the cli tool called ✨",{"type":25,"tag":80,"props":81,"children":85},"a",{"href":82,"rel":83},"https://github.com/gVguy/nm-cleanup",[84],"nofollow",[86],{"type":30,"value":87},"nm-cleanup",{"type":30,"value":89},"✨, which I authored to solve exactly this problem. As you will shortly see, it's a highly customizable and ",{"type":25,"tag":41,"props":91,"children":92},{},[93],{"type":30,"value":94},"automatable",{"type":30,"value":96}," utility, that can help you maintain your workspace clean.",{"type":25,"tag":26,"props":98,"children":99},{},[100,102,108,110,115],{"type":30,"value":101},"I will also show you how we can set it up ",{"type":25,"tag":103,"props":104,"children":105},"strong",{},[106],{"type":30,"value":107},"to run on a regular basis",{"type":30,"value":109},", without requiring any user input - just ",{"type":25,"tag":41,"props":111,"children":112},{},[113],{"type":30,"value":114},"set it up once",{"type":30,"value":116}," and rest assured your disk isn't cluttered with useless folders!",{"type":25,"tag":118,"props":119,"children":120},"details",{},[121,127,132,159],{"type":25,"tag":122,"props":123,"children":124},"summary",{},[125],{"type":30,"value":126},"And what about other tools aimed at this same problem?",{"type":25,"tag":26,"props":128,"children":129},{},[130],{"type":30,"value":131},"While it's true that there are other tools meant to solve this very same problem, their behavior is different. They either:",{"type":25,"tag":133,"props":134,"children":135},"ul",{},[136,148],{"type":25,"tag":137,"props":138,"children":139},"li",{},[140,142,146],{"type":30,"value":141},"wipe all ",{"type":25,"tag":33,"props":143,"children":144},{},[145],{"type":30,"value":37},{"type":30,"value":147}," they find without checking the mtime,",{"type":25,"tag":137,"props":149,"children":150},{},[151,153,157],{"type":30,"value":152},"or give you a UI, where they list all the ",{"type":25,"tag":33,"props":154,"children":155},{},[156],{"type":30,"value":37},{"type":30,"value":158}," folders and let you manually select the projects you want to get rid of.",{"type":25,"tag":26,"props":160,"children":161},{},[162,164,169,171,175],{"type":30,"value":163},"And that makes them really hard (if not impossible) to ",{"type":25,"tag":103,"props":165,"children":166},{},[167],{"type":30,"value":168},"automate",{"type":30,"value":170},". Which is fully supported by ",{"type":25,"tag":33,"props":172,"children":173},{},[174],{"type":30,"value":87},{"type":30,"value":176},", as you will see in a second.",{"type":25,"tag":178,"props":179,"children":181},"h2",{"id":180},"install-the-cli",[182],{"type":30,"value":183},"Install the cli",{"type":25,"tag":26,"props":185,"children":186},{},[187],{"type":30,"value":188},"First things first, we need to install the cli.",{"type":25,"tag":26,"props":190,"children":191},{},[192],{"type":30,"value":193},"I think I can skip all the \"make sure Node is installed\", as we're trying to solve the node_modules problem, so you've likely used npm before ;)",{"type":25,"tag":195,"props":196,"children":200},"code",{"code":197,"language":198,"meta":199},"npm install -g nm-cleanup\n","shell",null,[201],{"type":25,"tag":202,"props":203,"children":204},"pre",{},[205],{"type":25,"tag":195,"props":206,"children":207},{"__ignoreMap":8},[208],{"type":25,"tag":209,"props":210,"children":213},"span",{"class":211,"line":212},"line",1,[214,220,226,231,237,241],{"type":25,"tag":209,"props":215,"children":217},{"class":216},"ct-be44c9",[218],{"type":30,"value":219},"npm ",{"type":25,"tag":209,"props":221,"children":223},{"class":222},"ct-d60cab",[224],{"type":30,"value":225},"install",{"type":25,"tag":209,"props":227,"children":228},{"class":216},[229],{"type":30,"value":230}," ",{"type":25,"tag":209,"props":232,"children":234},{"class":233},"ct-572368",[235],{"type":30,"value":236},"-g",{"type":25,"tag":209,"props":238,"children":239},{"class":216},[240],{"type":30,"value":230},{"type":25,"tag":209,"props":242,"children":243},{"class":222},[244],{"type":30,"value":87},{"type":25,"tag":26,"props":246,"children":247},{},[248],{"type":30,"value":249},"Make sure to install it globally to make the cli accessible from anywhere on your machine.",{"type":25,"tag":26,"props":251,"children":252},{},[253,255,259,261,266],{"type":30,"value":254},"Then ",{"type":25,"tag":33,"props":256,"children":257},{},[258],{"type":30,"value":87},{"type":30,"value":260}," cli (or simply ",{"type":25,"tag":33,"props":262,"children":263},{},[264],{"type":30,"value":265},"nmc",{"type":30,"value":267},") should be executable from the terminal. To test that, you can run:",{"type":25,"tag":195,"props":269,"children":271},{"code":270,"language":198,"meta":199},"nmc -V\n",[272],{"type":25,"tag":202,"props":273,"children":274},{},[275],{"type":25,"tag":195,"props":276,"children":277},{"__ignoreMap":8},[278],{"type":25,"tag":209,"props":279,"children":280},{"class":211,"line":212},[281,286],{"type":25,"tag":209,"props":282,"children":283},{"class":216},[284],{"type":30,"value":285},"nmc ",{"type":25,"tag":209,"props":287,"children":288},{"class":233},[289],{"type":30,"value":290},"-V",{"type":25,"tag":178,"props":292,"children":294},{"id":293},"how-it-works",[295],{"type":30,"value":296},"How it works?",{"type":25,"tag":26,"props":298,"children":299},{},[300],{"type":30,"value":301},"The main goal with this utility was to support automation. And even when ran in interactive mode, keep the count of required actions to a minimum.",{"type":25,"tag":26,"props":303,"children":304},{},[305,307,311,313,318,320,325],{"type":30,"value":306},"So when the tool runs, it finds all \"targets\" (by default ",{"type":25,"tag":33,"props":308,"children":309},{},[310],{"type":30,"value":37},{"type":30,"value":312},", but can be customized) in all project dirs recursively. And while it scans the filesystem, it also ",{"type":25,"tag":103,"props":314,"children":315},{},[316],{"type":30,"value":317},"measures when each project was last modified",{"type":30,"value":319}," based on the contained files. And if the modification time is older that the specified threshold (by default 30 days), the target is ",{"type":25,"tag":41,"props":321,"children":322},{},[323],{"type":30,"value":324},"marked for deletion",{"type":30,"value":326},".",{"type":25,"tag":26,"props":328,"children":329},{},[330],{"type":30,"value":331},"So, if you have a following fs structure...",{"type":25,"tag":195,"props":333,"children":335},{"code":334,"meta":199},"~/projects/\n├── old-project/\n│   ├── package.json\n│   └── node_modules\n└── fresh-project/\n    ├── package.json\n    └── node_modules\n",[336],{"type":25,"tag":202,"props":337,"children":338},{},[339],{"type":25,"tag":195,"props":340,"children":341},{"__ignoreMap":8},[342,350,359,368,377,386,395],{"type":25,"tag":209,"props":343,"children":344},{"class":211,"line":212},[345],{"type":25,"tag":209,"props":346,"children":347},{},[348],{"type":30,"value":349},"~/projects/\n",{"type":25,"tag":209,"props":351,"children":353},{"class":211,"line":352},2,[354],{"type":25,"tag":209,"props":355,"children":356},{},[357],{"type":30,"value":358},"├── old-project/\n",{"type":25,"tag":209,"props":360,"children":362},{"class":211,"line":361},3,[363],{"type":25,"tag":209,"props":364,"children":365},{},[366],{"type":30,"value":367},"│   ├── package.json\n",{"type":25,"tag":209,"props":369,"children":371},{"class":211,"line":370},4,[372],{"type":25,"tag":209,"props":373,"children":374},{},[375],{"type":30,"value":376},"│   └── node_modules\n",{"type":25,"tag":209,"props":378,"children":380},{"class":211,"line":379},5,[381],{"type":25,"tag":209,"props":382,"children":383},{},[384],{"type":30,"value":385},"└── fresh-project/\n",{"type":25,"tag":209,"props":387,"children":389},{"class":211,"line":388},6,[390],{"type":25,"tag":209,"props":391,"children":392},{},[393],{"type":30,"value":394},"    ├── package.json\n",{"type":25,"tag":209,"props":396,"children":398},{"class":211,"line":397},7,[399],{"type":25,"tag":209,"props":400,"children":401},{},[402],{"type":30,"value":403},"    └── node_modules",{"type":25,"tag":26,"props":405,"children":406},{},[407],{"type":30,"value":408},"...and you run...",{"type":25,"tag":195,"props":410,"children":412},{"code":411,"language":198,"meta":199},"nmc ~/projects -y\n",[413],{"type":25,"tag":202,"props":414,"children":415},{},[416],{"type":25,"tag":195,"props":417,"children":418},{"__ignoreMap":8},[419],{"type":25,"tag":209,"props":420,"children":421},{"class":211,"line":212},[422,426,431,435],{"type":25,"tag":209,"props":423,"children":424},{"class":216},[425],{"type":30,"value":285},{"type":25,"tag":209,"props":427,"children":428},{"class":222},[429],{"type":30,"value":430},"~/projects",{"type":25,"tag":209,"props":432,"children":433},{"class":216},[434],{"type":30,"value":230},{"type":25,"tag":209,"props":436,"children":437},{"class":233},[438],{"type":30,"value":439},"-y",{"type":25,"tag":26,"props":441,"children":442},{},[443,445,450,452,457],{"type":30,"value":444},"...only the ",{"type":25,"tag":33,"props":446,"children":447},{},[448],{"type":30,"value":449},"old-project/node_modules",{"type":30,"value":451}," will get cleaned up, and the ",{"type":25,"tag":33,"props":453,"children":454},{},[455],{"type":30,"value":456},"fresh-project/node_modules",{"type":30,"value":458}," will be left as is.",{"type":25,"tag":460,"props":461,"children":462},"blockquote",{},[463,476],{"type":25,"tag":26,"props":464,"children":465},{},[466,470,472],{"type":25,"tag":33,"props":467,"children":468},{},[469],{"type":30,"value":265},{"type":30,"value":471}," is an alias for ",{"type":25,"tag":33,"props":473,"children":474},{},[475],{"type":30,"value":87},{"type":25,"tag":26,"props":477,"children":478},{},[479,483,485,490],{"type":25,"tag":33,"props":480,"children":481},{},[482],{"type":30,"value":439},{"type":30,"value":484}," or ",{"type":25,"tag":33,"props":486,"children":487},{},[488],{"type":30,"value":489},"--yes",{"type":30,"value":491}," flag is used to run in the auto-confirm mode (we'll get to that in a second)",{"type":25,"tag":178,"props":493,"children":495},{"id":494},"running-manually",[496],{"type":30,"value":497},"Running manually",{"type":25,"tag":26,"props":499,"children":500},{},[501],{"type":30,"value":502},"In the real-world scenario, you would probably want to run the tool a couple of times in an interactive mode first, to see what targets it finds, and to customize your configuration if necessary.",{"type":25,"tag":26,"props":504,"children":505},{},[506,508,512],{"type":30,"value":507},"For that, run the tool without the ",{"type":25,"tag":33,"props":509,"children":510},{},[511],{"type":30,"value":439},{"type":30,"value":513}," flag. That way it'll display a confirmation prompt before taking any action.",{"type":25,"tag":26,"props":515,"children":516},{},[517,519,524],{"type":30,"value":518},"Or run it with the ",{"type":25,"tag":33,"props":520,"children":521},{},[522],{"type":30,"value":523},"--dry-run",{"type":30,"value":525}," flag - that way it'll only scan the system and print the targets without proceeding to the cleanup step at all.",{"type":25,"tag":178,"props":527,"children":529},{"id":528},"configuration",[530],{"type":30,"value":531},"Configuration",{"type":25,"tag":26,"props":533,"children":534},{},[535],{"type":30,"value":536},"Here are a couple of the most useful options you might want to tweak:",{"type":25,"tag":538,"props":539,"children":541},"h3",{"id":540},"t-time",[542],{"type":30,"value":543},"-t, --time",{"type":25,"tag":26,"props":545,"children":546},{},[547],{"type":30,"value":548},"Sets the threshold for how old a project should be (based on last modification time) before its directories are targeted for cleanup. Use this option when you want to clean up projects that haven’t been modified for a specific period.",{"type":25,"tag":26,"props":550,"children":551},{},[552,554,559],{"type":30,"value":553},"The threshold is set to ",{"type":25,"tag":33,"props":555,"children":556},{},[557],{"type":30,"value":558},"30",{"type":30,"value":560}," days by default.",{"type":25,"tag":538,"props":562,"children":564},{"id":563},"i-ignore",[565],{"type":30,"value":566},"-i, --ignore",{"type":25,"tag":26,"props":568,"children":569},{},[570,574,576,581],{"type":25,"tag":33,"props":571,"children":572},{},[573],{"type":30,"value":87},{"type":30,"value":575}," will never clean up the projects that were modified less than (whatever you specified) days ago. But if you have some projects you don't want to clean up ",{"type":25,"tag":41,"props":577,"children":578},{},[579],{"type":30,"value":580},"regardless of modification time",{"type":30,"value":582},", you can use this option.",{"type":25,"tag":26,"props":584,"children":585},{},[586],{"type":30,"value":587},"By default, nothing is ignored.",{"type":25,"tag":538,"props":589,"children":591},{"id":590},"n-name",[592],{"type":30,"value":593},"-n, --name",{"type":25,"tag":26,"props":595,"children":596},{},[597,599,603,605,610],{"type":30,"value":598},"Specifies a regex pattern to match directory names that should be removed. Use this option when you want to clean up other types of folders besides ",{"type":25,"tag":33,"props":600,"children":601},{},[602],{"type":30,"value":37},{"type":30,"value":604},", for example, ",{"type":25,"tag":33,"props":606,"children":607},{},[608],{"type":30,"value":609},"dist",{"type":30,"value":326},{"type":25,"tag":26,"props":612,"children":613},{},[614,616,620],{"type":30,"value":615},"By default (as you might have guessed) the name is ",{"type":25,"tag":33,"props":617,"children":618},{},[619],{"type":30,"value":37},{"type":30,"value":326},{"type":25,"tag":622,"props":623,"children":624},"hr",{},[],{"type":25,"tag":26,"props":626,"children":627},{},[628,630,637,639,644],{"type":30,"value":629},"These are not all of the options! As mentioned earlier, the tool is really customizable - but, in order to keep the things simple in this post, I'm not going to list all of the available configurations here. If you want to see what more there is to adjust, you're always welcome to check out the full list of options in the tool's ",{"type":25,"tag":80,"props":631,"children":634},{"href":632,"rel":633},"https://github.com/gVguy/nm-cleanup?tab=readme-ov-file#options",[84],[635],{"type":30,"value":636},"readme",{"type":30,"value":638}," (or with the ",{"type":25,"tag":33,"props":640,"children":641},{},[642],{"type":30,"value":643},"-h",{"type":30,"value":645}," flag).",{"type":25,"tag":460,"props":647,"children":648},{},[649],{"type":25,"tag":26,"props":650,"children":651},{},[652],{"type":30,"value":653},"Moreover, if you feel there's a use case for this tool that is not covered by currently available options, feel free to open an issue with feature request!",{"type":25,"tag":26,"props":655,"children":656},{},[657,659,664],{"type":30,"value":658},"Now that we have familiarized ourselves with the config, here's what your command ",{"type":25,"tag":41,"props":660,"children":661},{},[662],{"type":30,"value":663},"might",{"type":30,"value":665}," look like:",{"type":25,"tag":195,"props":667,"children":669},{"code":668,"language":198,"meta":199},"nmc ~/projects -t 14 -n 'node_modules|dist' -i 'my-special-project'\n",[670],{"type":25,"tag":202,"props":671,"children":672},{},[673],{"type":25,"tag":195,"props":674,"children":675},{"__ignoreMap":8},[676],{"type":25,"tag":209,"props":677,"children":678},{"class":211,"line":212},[679,683,687,691,696,700,705,709,714,718,723,727,732,736],{"type":25,"tag":209,"props":680,"children":681},{"class":216},[682],{"type":30,"value":285},{"type":25,"tag":209,"props":684,"children":685},{"class":222},[686],{"type":30,"value":430},{"type":25,"tag":209,"props":688,"children":689},{"class":216},[690],{"type":30,"value":230},{"type":25,"tag":209,"props":692,"children":693},{"class":233},[694],{"type":30,"value":695},"-t",{"type":25,"tag":209,"props":697,"children":698},{"class":216},[699],{"type":30,"value":230},{"type":25,"tag":209,"props":701,"children":702},{"class":233},[703],{"type":30,"value":704},"14",{"type":25,"tag":209,"props":706,"children":707},{"class":216},[708],{"type":30,"value":230},{"type":25,"tag":209,"props":710,"children":711},{"class":233},[712],{"type":30,"value":713},"-n",{"type":25,"tag":209,"props":715,"children":716},{"class":216},[717],{"type":30,"value":230},{"type":25,"tag":209,"props":719,"children":720},{"class":222},[721],{"type":30,"value":722},"'node_modules|dist'",{"type":25,"tag":209,"props":724,"children":725},{"class":216},[726],{"type":30,"value":230},{"type":25,"tag":209,"props":728,"children":729},{"class":233},[730],{"type":30,"value":731},"-i",{"type":25,"tag":209,"props":733,"children":734},{"class":216},[735],{"type":30,"value":230},{"type":25,"tag":209,"props":737,"children":738},{"class":222},[739],{"type":30,"value":740},"'my-special-project'",{"type":25,"tag":26,"props":742,"children":743},{},[744],{"type":30,"value":745},"Or just run it from your projects directory, without arguments if you're happy with the default values. This works too:",{"type":25,"tag":195,"props":747,"children":749},{"code":748,"language":198,"meta":199},"nmc\n",[750],{"type":25,"tag":202,"props":751,"children":752},{},[753],{"type":25,"tag":195,"props":754,"children":755},{"__ignoreMap":8},[756],{"type":25,"tag":209,"props":757,"children":758},{"class":211,"line":212},[759],{"type":25,"tag":209,"props":760,"children":761},{"class":216},[762],{"type":30,"value":265},{"type":25,"tag":178,"props":764,"children":766},{"id":765},"automation",[767],{"type":30,"value":768},"Automation",{"type":25,"tag":26,"props":770,"children":771},{},[772],{"type":30,"value":773},"After you've ran the command 1-2 times, and you're happy with how it responds to your config, the natural next step is to automate it to run, for example, once a day.",{"type":25,"tag":26,"props":775,"children":776},{},[777,779,784,786,791],{"type":30,"value":778},"That way, you can ",{"type":25,"tag":103,"props":780,"children":781},{},[782],{"type":30,"value":783},"always",{"type":30,"value":785}," be sure that the space on your system is not being occupied by useless folders in projects ",{"type":25,"tag":103,"props":787,"children":788},{},[789],{"type":30,"value":790},"older than N days",{"type":30,"value":326},{"type":25,"tag":26,"props":793,"children":794},{},[795,797,802,804,809],{"type":30,"value":796},"If you've run any of the previous commands, you've noticed that the tool ",{"type":25,"tag":41,"props":798,"children":799},{},[800],{"type":30,"value":801},"doesn't rely on user input during runtime",{"type":30,"value":803},". All the configuration is provided with options, and, after the targets are listed, the only action required from user is to answer the ",{"type":25,"tag":41,"props":805,"children":806},{},[807],{"type":30,"value":808},"\"are you sure?\"",{"type":30,"value":810}," dialog.",{"type":25,"tag":26,"props":812,"children":813},{},[814],{"type":30,"value":815},"Thanks to that design, we can rather straightforwardly skip the confirmation step and proceed directly to the cleanup right after we've locked on our targets.",{"type":25,"tag":26,"props":817,"children":818},{},[819,821,825,827,831],{"type":30,"value":820},"To skip the confirmation, simply add the ",{"type":25,"tag":33,"props":822,"children":823},{},[824],{"type":30,"value":439},{"type":30,"value":826}," (",{"type":25,"tag":33,"props":828,"children":829},{},[830],{"type":30,"value":489},{"type":30,"value":832},") flag:",{"type":25,"tag":195,"props":834,"children":835},{"code":411,"language":198,"meta":199},[836],{"type":25,"tag":202,"props":837,"children":838},{},[839],{"type":25,"tag":195,"props":840,"children":841},{"__ignoreMap":8},[842],{"type":25,"tag":209,"props":843,"children":844},{"class":211,"line":212},[845,849,853,857],{"type":25,"tag":209,"props":846,"children":847},{"class":216},[848],{"type":30,"value":285},{"type":25,"tag":209,"props":850,"children":851},{"class":222},[852],{"type":30,"value":430},{"type":25,"tag":209,"props":854,"children":855},{"class":216},[856],{"type":30,"value":230},{"type":25,"tag":209,"props":858,"children":859},{"class":233},[860],{"type":30,"value":439},{"type":25,"tag":538,"props":862,"children":864},{"id":863},"setting-up-a-cron-job",[865],{"type":30,"value":866},"Setting up a cron job",{"type":25,"tag":26,"props":868,"children":869},{},[870],{"type":30,"value":871},"And now that we understand how to run the cli in non-interactive mode, we can proceed to the final step - setting up a cron job to repeat our command, for example, every day at noon.",{"type":25,"tag":460,"props":873,"children":874},{},[875],{"type":25,"tag":26,"props":876,"children":877},{},[878,880,885],{"type":30,"value":879},"I'm going to describe how to set this up with ",{"type":25,"tag":33,"props":881,"children":882},{},[883],{"type":30,"value":884},"cron",{"type":30,"value":886}," as it's pretty much the default solution for creating scheduled jobs, and comes pre-installed on Mac and Linux. But if you're on a different system, feel free to use your job scheduler of choice. The general principle should remain the same.",{"type":25,"tag":538,"props":888,"children":890},{"id":889},"open-crontab",[891],{"type":30,"value":892},"Open crontab",{"type":25,"tag":26,"props":894,"children":895},{},[896],{"type":25,"tag":33,"props":897,"children":898},{},[899],{"type":30,"value":900},"crontab -e",{"type":25,"tag":26,"props":902,"children":903},{},[904],{"type":30,"value":905},"This will open the crontab file, where we can add our new job. By default the file opens in vim editor.",{"type":25,"tag":118,"props":907,"children":908},{},[909,914,919,1011],{"type":25,"tag":122,"props":910,"children":911},{},[912],{"type":30,"value":913},"First time using vim?",{"type":25,"tag":26,"props":915,"children":916},{},[917],{"type":30,"value":918},"No worries. I'm not going to over-complicate this post with detailed instructions on how to use vim - but here are the shortcuts that should get you through this time:",{"type":25,"tag":133,"props":920,"children":921},{},[922,932,949,954,971,987],{"type":25,"tag":137,"props":923,"children":924},{},[925,930],{"type":25,"tag":33,"props":926,"children":927},{},[928],{"type":30,"value":929},"G (shift + g)",{"type":30,"value":931}," go to the last line",{"type":25,"tag":137,"props":933,"children":934},{},[935,940,942,947],{"type":25,"tag":33,"props":936,"children":937},{},[938],{"type":30,"value":939},"A (shift + a)",{"type":30,"value":941}," activate ",{"type":25,"tag":41,"props":943,"children":944},{},[945],{"type":30,"value":946},"insert",{"type":30,"value":948}," mode at the end of this line",{"type":25,"tag":137,"props":950,"children":951},{},[952],{"type":30,"value":953},"go to the newline and type the command as usual (the command we want to add here is described below)",{"type":25,"tag":137,"props":955,"children":956},{},[957,962,964,969],{"type":25,"tag":33,"props":958,"children":959},{},[960],{"type":30,"value":961},"\u003CESC>",{"type":30,"value":963}," go back to ",{"type":25,"tag":41,"props":965,"children":966},{},[967],{"type":30,"value":968},"normal",{"type":30,"value":970}," mode",{"type":25,"tag":137,"props":972,"children":973},{},[974,979,980,985],{"type":25,"tag":33,"props":975,"children":976},{},[977],{"type":30,"value":978},":",{"type":30,"value":941},{"type":25,"tag":41,"props":981,"children":982},{},[983],{"type":30,"value":984},"command",{"type":30,"value":986}," mode (you should see the cursor jump to the lowest part of the editor window)",{"type":25,"tag":137,"props":988,"children":989},{},[990,995,997,1002,1004,1009],{"type":25,"tag":33,"props":991,"children":992},{},[993],{"type":30,"value":994},"wq\u003CENTER>",{"type":30,"value":996}," (you should see it typed in the lowest part of the editor window) ",{"type":25,"tag":103,"props":998,"children":999},{},[1000],{"type":30,"value":1001},"w",{"type":30,"value":1003},"rite and ",{"type":25,"tag":103,"props":1005,"children":1006},{},[1007],{"type":30,"value":1008},"q",{"type":30,"value":1010},"uit",{"type":25,"tag":26,"props":1012,"children":1013},{},[1014],{"type":30,"value":1015},"I recommend you to further familiarize yourself with vim, as (a) it's awesome, and (b) knowing at least the basics will come handy in various situations.",{"type":25,"tag":538,"props":1017,"children":1019},{"id":1018},"add-a-new-cron-job",[1020],{"type":30,"value":1021},"Add a new cron job",{"type":25,"tag":26,"props":1023,"children":1024},{},[1025],{"type":30,"value":1026},"Crontab file lists all of your cron jobs. Let's add a new line with our command:",{"type":25,"tag":195,"props":1028,"children":1030},{"code":1029,"meta":199},"0 12 * * * nmc ~/projects/ -y\n",[1031],{"type":25,"tag":202,"props":1032,"children":1033},{},[1034],{"type":25,"tag":195,"props":1035,"children":1036},{"__ignoreMap":8},[1037],{"type":25,"tag":209,"props":1038,"children":1039},{"class":211,"line":212},[1040],{"type":25,"tag":209,"props":1041,"children":1042},{},[1043],{"type":30,"value":1044},"0 12 * * * nmc ~/projects/ -y",{"type":25,"tag":26,"props":1046,"children":1047},{},[1048,1050,1055],{"type":30,"value":1049},"Don't forget to replace the ",{"type":25,"tag":33,"props":1051,"children":1052},{},[1053],{"type":30,"value":1054},"~/projects/",{"type":30,"value":1056}," part with your projects directory (the folder containing all the project folders) - this is the entry point from where the recursive scan will start.",{"type":25,"tag":26,"props":1058,"children":1059},{},[1060,1062,1073],{"type":30,"value":1061},"Also, feel free to customize the options of the command as needed for your use-case, but make sure to ",{"type":25,"tag":103,"props":1063,"children":1064},{},[1065,1067,1071],{"type":30,"value":1066},"keep the ",{"type":25,"tag":33,"props":1068,"children":1069},{},[1070],{"type":30,"value":439},{"type":30,"value":1072}," flag",{"type":30,"value":1074}," to run in non-interactive (auto-confirm) mode.",{"type":25,"tag":118,"props":1076,"children":1077},{},[1078,1083,1088],{"type":25,"tag":122,"props":1079,"children":1080},{},[1081],{"type":30,"value":1082},"If you're not familiar with the cron format...",{"type":25,"tag":26,"props":1084,"children":1085},{},[1086],{"type":30,"value":1087},"...here's the breakdown of what that line says:",{"type":25,"tag":133,"props":1089,"children":1090},{},[1091,1101,1111,1121,1130,1139],{"type":25,"tag":137,"props":1092,"children":1093},{},[1094,1099],{"type":25,"tag":33,"props":1095,"children":1096},{},[1097],{"type":30,"value":1098},"0",{"type":30,"value":1100}," on the 0 minute",{"type":25,"tag":137,"props":1102,"children":1103},{},[1104,1109],{"type":25,"tag":33,"props":1105,"children":1106},{},[1107],{"type":30,"value":1108},"12",{"type":30,"value":1110}," of the 12 hour",{"type":25,"tag":137,"props":1112,"children":1113},{},[1114,1119],{"type":25,"tag":33,"props":1115,"children":1116},{},[1117],{"type":30,"value":1118},"*",{"type":30,"value":1120}," every day of the month",{"type":25,"tag":137,"props":1122,"children":1123},{},[1124,1128],{"type":25,"tag":33,"props":1125,"children":1126},{},[1127],{"type":30,"value":1118},{"type":30,"value":1129}," every month of the year",{"type":25,"tag":137,"props":1131,"children":1132},{},[1133,1137],{"type":25,"tag":33,"props":1134,"children":1135},{},[1136],{"type":30,"value":1118},{"type":30,"value":1138}," every day of the week",{"type":25,"tag":137,"props":1140,"children":1141},{},[1142,1147,1149,1153,1155,1159],{"type":25,"tag":33,"props":1143,"children":1144},{},[1145],{"type":30,"value":1146},"nmc ~/projects/ -y",{"type":30,"value":1148}," run the cleanup cli from ",{"type":25,"tag":33,"props":1150,"children":1151},{},[1152],{"type":30,"value":1054},{"type":30,"value":1154}," directory in non-interactive (",{"type":25,"tag":33,"props":1156,"children":1157},{},[1158],{"type":30,"value":439},{"type":30,"value":1160},") mode",{"type":25,"tag":26,"props":1162,"children":1163},{},[1164],{"type":30,"value":1165},"Save and exit. Then you can confirm the job is set with:",{"type":25,"tag":195,"props":1167,"children":1169},{"code":1168,"language":198,"meta":199},"crontab -l\n",[1170],{"type":25,"tag":202,"props":1171,"children":1172},{},[1173],{"type":25,"tag":195,"props":1174,"children":1175},{"__ignoreMap":8},[1176],{"type":25,"tag":209,"props":1177,"children":1178},{"class":211,"line":212},[1179,1184],{"type":25,"tag":209,"props":1180,"children":1181},{"class":216},[1182],{"type":30,"value":1183},"crontab ",{"type":25,"tag":209,"props":1185,"children":1186},{"class":233},[1187],{"type":30,"value":1188},"-l",{"type":25,"tag":26,"props":1190,"children":1191},{},[1192],{"type":30,"value":1193},"This should show the cron job you've just added.",{"type":25,"tag":26,"props":1195,"children":1196},{},[1197,1199,1203,1205,1209],{"type":30,"value":1198},"If you followed the instructions in this section, ",{"type":25,"tag":33,"props":1200,"children":1201},{},[1202],{"type":30,"value":884},{"type":30,"value":1204}," will automatically run the cleanup command every day at noon, keeping your projects directory free of any obsolete ",{"type":25,"tag":33,"props":1206,"children":1207},{},[1208],{"type":30,"value":37},{"type":30,"value":1210},"!",{"type":25,"tag":538,"props":1212,"children":1214},{"id":1213},"cron-job-troubleshooting",[1215],{"type":30,"value":1216},"Cron job troubleshooting",{"type":25,"tag":26,"props":1218,"children":1219},{},[1220,1222,1226,1228,1233],{"type":30,"value":1221},"Because cron runs in a very minimal environment, its default PATH is often much shorter than what you might have in your terminal. This can lead to commands (like ",{"type":25,"tag":33,"props":1223,"children":1224},{},[1225],{"type":30,"value":265},{"type":30,"value":1227},", ",{"type":25,"tag":33,"props":1229,"children":1230},{},[1231],{"type":30,"value":1232},"node",{"type":30,"value":1234}," or any other executable) not being found.",{"type":25,"tag":26,"props":1236,"children":1237},{},[1238],{"type":30,"value":1239},"If you've set up the cron job, but it doesn't seem to have any effect, you'll have to do some additional debugging. But don't worry, here are a couple of recipes that can help you sort this out:",{"type":25,"tag":1241,"props":1242,"children":1244},"h4",{"id":1243},"redirect-command-output-to-a-log-file",[1245],{"type":30,"value":1246},"Redirect command output to a log file",{"type":25,"tag":26,"props":1248,"children":1249},{},[1250],{"type":30,"value":1251},"This will let you see what output the command generates and if there are any errors. Feel free to use any file name and location that suits you.",{"type":25,"tag":195,"props":1253,"children":1255},{"code":1254,"meta":199},"0 12 * * * nmc ~/projects/ -y >> ~/desktop/nmc_cron.log 2>&1\n",[1256],{"type":25,"tag":202,"props":1257,"children":1258},{},[1259],{"type":25,"tag":195,"props":1260,"children":1261},{"__ignoreMap":8},[1262],{"type":25,"tag":209,"props":1263,"children":1264},{"class":211,"line":212},[1265],{"type":25,"tag":209,"props":1266,"children":1267},{},[1268],{"type":30,"value":1269},"0 12 * * * nmc ~/projects/ -y >> ~/desktop/nmc_cron.log 2>&1",{"type":25,"tag":1241,"props":1271,"children":1273},{"id":1272},"schedule-the-command-to-execute-more-often",[1274],{"type":30,"value":1275},"Schedule the command to execute more often",{"type":25,"tag":26,"props":1277,"children":1278},{},[1279],{"type":30,"value":1280},"For example we can adjust the job's schedule to run every fifth minute (5, 10, 15 etc) of every hour. So that we don't have to wait an entire day to see the debugging progress. Feel free to use any other time interval.",{"type":25,"tag":195,"props":1282,"children":1284},{"code":1283,"meta":199},"*/5 * * * * nmc ~/code/ -y\n",[1285],{"type":25,"tag":202,"props":1286,"children":1287},{},[1288],{"type":25,"tag":195,"props":1289,"children":1290},{"__ignoreMap":8},[1291],{"type":25,"tag":209,"props":1292,"children":1293},{"class":211,"line":212},[1294],{"type":25,"tag":209,"props":1295,"children":1296},{},[1297],{"type":30,"value":1298},"*/5 * * * * nmc ~/code/ -y",{"type":25,"tag":1241,"props":1300,"children":1302},{"id":1301},"use-full-path-to-the-command",[1303],{"type":30,"value":1304},"Use full path to the command",{"type":25,"tag":26,"props":1306,"children":1307},{},[1308],{"type":30,"value":1309},"As mentioned earlier, it's possible that nm-cleanup executable is not loaded in your cron environment. Work around that by providing full path to the nmc executable. In the terminal type:",{"type":25,"tag":195,"props":1311,"children":1313},{"code":1312,"language":198,"meta":199},"which nmc\n",[1314],{"type":25,"tag":202,"props":1315,"children":1316},{},[1317],{"type":25,"tag":195,"props":1318,"children":1319},{"__ignoreMap":8},[1320],{"type":25,"tag":209,"props":1321,"children":1322},{"class":211,"line":212},[1323,1329,1333],{"type":25,"tag":209,"props":1324,"children":1326},{"class":1325},"ct-1edf13",[1327],{"type":30,"value":1328},"which",{"type":25,"tag":209,"props":1330,"children":1331},{"class":216},[1332],{"type":30,"value":230},{"type":25,"tag":209,"props":1334,"children":1335},{"class":222},[1336],{"type":30,"value":265},{"type":25,"tag":26,"props":1338,"children":1339},{},[1340,1342,1347,1349,1353],{"type":30,"value":1341},"This should output ",{"type":25,"tag":33,"props":1343,"children":1344},{},[1345],{"type":30,"value":1346},"/full/path/to/nmc",{"type":30,"value":1348},". Copy that, and use it in the crontab in place of ",{"type":25,"tag":33,"props":1350,"children":1351},{},[1352],{"type":30,"value":265},{"type":30,"value":1354}," command:",{"type":25,"tag":195,"props":1356,"children":1358},{"code":1357,"meta":199},"0 12 * * * /full/path/to/nmc ~/code/ -y\n",[1359],{"type":25,"tag":202,"props":1360,"children":1361},{},[1362],{"type":25,"tag":195,"props":1363,"children":1364},{"__ignoreMap":8},[1365],{"type":25,"tag":209,"props":1366,"children":1367},{"class":211,"line":212},[1368],{"type":25,"tag":209,"props":1369,"children":1370},{},[1371],{"type":30,"value":1372},"0 12 * * * /full/path/to/nmc ~/code/ -y",{"type":25,"tag":1241,"props":1374,"children":1376},{"id":1375},"load-nvm-environment",[1377],{"type":30,"value":1378},"Load NVM environment",{"type":25,"tag":26,"props":1380,"children":1381},{},[1382,1387,1389,1393],{"type":25,"tag":41,"props":1383,"children":1384},{},[1385],{"type":30,"value":1386},"If you're using NVM",{"type":30,"value":1388},", it's possible that ",{"type":25,"tag":33,"props":1390,"children":1391},{},[1392],{"type":30,"value":1232},{"type":30,"value":1394}," itself is not available to the cron environment. To fix that we can manually load NVM in our cron job before executing the command.",{"type":25,"tag":195,"props":1396,"children":1398},{"code":1397,"meta":199},"0 12 * * * source $HOME/.nvm/nvm.sh && nmc ~/code/ -y\n",[1399],{"type":25,"tag":202,"props":1400,"children":1401},{},[1402],{"type":25,"tag":195,"props":1403,"children":1404},{"__ignoreMap":8},[1405],{"type":25,"tag":209,"props":1406,"children":1407},{"class":211,"line":212},[1408],{"type":25,"tag":209,"props":1409,"children":1410},{},[1411],{"type":30,"value":1412},"0 12 * * * source $HOME/.nvm/nvm.sh && nmc ~/code/ -y",{"type":25,"tag":460,"props":1414,"children":1415},{},[1416],{"type":25,"tag":26,"props":1417,"children":1418},{},[1419,1424,1426],{"type":25,"tag":33,"props":1420,"children":1421},{},[1422],{"type":30,"value":1423},"$HOME/.nvm/nvm.sh",{"type":30,"value":1425}," is the default nvm location, to make sure nvm is indeed installed there, you can run ",{"type":25,"tag":33,"props":1427,"children":1428},{},[1429],{"type":30,"value":1430},"ls -l $HOME/.nvm/nvm.sh",{"type":25,"tag":178,"props":1432,"children":1434},{"id":1433},"conclusion",[1435],{"type":30,"value":1436},"Conclusion",{"type":25,"tag":26,"props":1438,"children":1439},{},[1440,1442,1446,1448,1452,1454,1458],{"type":30,"value":1441},"Awesome! Today we've learned to use ",{"type":25,"tag":33,"props":1443,"children":1444},{},[1445],{"type":30,"value":87},{"type":30,"value":1447}," (paired with ",{"type":25,"tag":33,"props":1449,"children":1450},{},[1451],{"type":30,"value":884},{"type":30,"value":1453},") to keep our workspace clean, and free'd up some of the disk space taken up by unused ",{"type":25,"tag":33,"props":1455,"children":1456},{},[1457],{"type":30,"value":37},{"type":30,"value":1459}," directories.",{"type":25,"tag":26,"props":1461,"children":1462},{},[1463,1465,1471],{"type":30,"value":1464},"Feel free to ",{"type":25,"tag":80,"props":1466,"children":1468},{"href":82,"rel":1467},[84],[1469],{"type":30,"value":1470},"scout the tool's readme",{"type":30,"value":1472}," for more customization options, if you want to take it some steps further.",{"type":25,"tag":26,"props":1474,"children":1475},{},[1476],{"type":30,"value":1477},"Keep it clean everybody, and happy coding!",{"type":25,"tag":1479,"children":1480},"style",[1481],{"type":30,"value":1482},".ct-1edf13{color:#56B6C2}\n.ct-572368{color:#D19A66}\n.ct-d60cab{color:#98C379}\n.ct-be44c9{color:#ABB2BF}",{"title":8,"searchDepth":352,"depth":352,"links":1484},[1485,1486,1487,1488,1493,1499],{"id":180,"depth":352,"text":183},{"id":293,"depth":352,"text":296},{"id":494,"depth":352,"text":497},{"id":528,"depth":352,"text":531,"children":1489},[1490,1491,1492],{"id":540,"depth":361,"text":543},{"id":563,"depth":361,"text":566},{"id":590,"depth":361,"text":593},{"id":765,"depth":352,"text":768,"children":1494},[1495,1496,1497,1498],{"id":863,"depth":361,"text":866},{"id":889,"depth":361,"text":892},{"id":1018,"depth":361,"text":1021},{"id":1213,"depth":361,"text":1216},{"id":1433,"depth":352,"text":1436},"markdown","content:blog:nm-cleanup.md","content","blog/nm-cleanup.md","md",{"_path":1506,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":1507,"description":1508,"date":1509,"tags":1510,"readingTime":1513,"body":1518,"_type":1500,"_id":2119,"_source":1502,"_file":2120,"_extension":1504},"/blog/props-naming","Interfaces are important! Name your Component's Props thoughtfully","One thing I always pay attention to in code reviews is the naming of the component props.",1693551371337,[1511,1512],"concept","best practice",{"text":1514,"minutes":1515,"time":1516,"words":1517},"4 min read",3.225,193500,645,{"type":22,"children":1519,"toc":2114},[1520,1524,1529,1534,1631,1648,1653,1659,1664,1676,1687,1692,1718,1724,1729,1734,1739,1744,1924,1929,1934,1939,2089,2095,2100,2105,2110],{"type":25,"tag":26,"props":1521,"children":1522},{},[1523],{"type":30,"value":1508},{"type":25,"tag":26,"props":1525,"children":1526},{},[1527],{"type":30,"value":1528},"It is always important to write self-documenting code, but it's never been as crucial as when it comes to prop names. Especially if you're working in a team or developing a library.",{"type":25,"tag":26,"props":1530,"children":1531},{},[1532],{"type":30,"value":1533},"Let me give you an example. Once, I had a fellow developer working on a toggle switch component. A fancy checkbox, if you fancy. And he ended up coming up with the following interface:",{"type":25,"tag":195,"props":1535,"children":1538},{"code":1536,"language":1537,"meta":199},"interface Props {\n  disabled?: boolean\n  enabled?: boolean\n}\n","ts",[1539],{"type":25,"tag":202,"props":1540,"children":1541},{},[1542],{"type":25,"tag":195,"props":1543,"children":1544},{"__ignoreMap":8},[1545,1570,1599,1623],{"type":25,"tag":209,"props":1546,"children":1547},{"class":211,"line":212},[1548,1554,1559,1565],{"type":25,"tag":209,"props":1549,"children":1551},{"class":1550},"ct-e7a9d3",[1552],{"type":30,"value":1553},"interface",{"type":25,"tag":209,"props":1555,"children":1557},{"class":1556},"ct-d973a7",[1558],{"type":30,"value":230},{"type":25,"tag":209,"props":1560,"children":1562},{"class":1561},"ct-d47243",[1563],{"type":30,"value":1564},"Props",{"type":25,"tag":209,"props":1566,"children":1567},{"class":1556},[1568],{"type":30,"value":1569}," {\n",{"type":25,"tag":209,"props":1571,"children":1572},{"class":211,"line":352},[1573,1578,1584,1589,1594],{"type":25,"tag":209,"props":1574,"children":1575},{"class":1556},[1576],{"type":30,"value":1577},"  ",{"type":25,"tag":209,"props":1579,"children":1581},{"class":1580},"ct-4d5a7e",[1582],{"type":30,"value":1583},"disabled",{"type":25,"tag":209,"props":1585,"children":1586},{"class":1550},[1587],{"type":30,"value":1588},"?",{"type":25,"tag":209,"props":1590,"children":1591},{"class":1556},[1592],{"type":30,"value":1593},": ",{"type":25,"tag":209,"props":1595,"children":1596},{"class":1561},[1597],{"type":30,"value":1598},"boolean\n",{"type":25,"tag":209,"props":1600,"children":1601},{"class":211,"line":361},[1602,1606,1611,1615,1619],{"type":25,"tag":209,"props":1603,"children":1604},{"class":1556},[1605],{"type":30,"value":1577},{"type":25,"tag":209,"props":1607,"children":1608},{"class":1580},[1609],{"type":30,"value":1610},"enabled",{"type":25,"tag":209,"props":1612,"children":1613},{"class":1550},[1614],{"type":30,"value":1588},{"type":25,"tag":209,"props":1616,"children":1617},{"class":1556},[1618],{"type":30,"value":1593},{"type":25,"tag":209,"props":1620,"children":1621},{"class":1561},[1622],{"type":30,"value":1598},{"type":25,"tag":209,"props":1624,"children":1625},{"class":211,"line":370},[1626],{"type":25,"tag":209,"props":1627,"children":1628},{"class":1556},[1629],{"type":30,"value":1630},"}",{"type":25,"tag":26,"props":1632,"children":1633},{},[1634,1636,1640,1642,1646],{"type":30,"value":1635},"Where the ",{"type":25,"tag":33,"props":1637,"children":1638},{},[1639],{"type":30,"value":1583},{"type":30,"value":1641}," prop dictated whether the switch is available for user interactions altogether. And the ",{"type":25,"tag":33,"props":1643,"children":1644},{},[1645],{"type":30,"value":1610},{"type":30,"value":1647}," prop dictated its current state like \"on / off\".",{"type":25,"tag":26,"props":1649,"children":1650},{},[1651],{"type":30,"value":1652},"Obviously, it's a ridiculous interface, and nobody in the world would be able to tell with confidence, what these props do without digging into the component's code. And that's what we want to avoid.",{"type":25,"tag":178,"props":1654,"children":1656},{"id":1655},"the-concept",[1657],{"type":30,"value":1658},"The Concept",{"type":25,"tag":26,"props":1660,"children":1661},{},[1662],{"type":30,"value":1663},"The interface should always be understandable at a glance. And it doesn't only apply to the components - the same goes for public class fields and methods, function arguments, config objects etc. Anything that relies on user input. We don't want the user of our code to confusingly scratch his head and to end up having to read through our code in order to figure out what he needs to specify to have it working the way he wants.",{"type":25,"tag":26,"props":1665,"children":1666},{},[1667,1669,1674],{"type":30,"value":1668},"And I would not bother to nitpick on variable names and stuff like that ",{"type":25,"tag":41,"props":1670,"children":1671},{},[1672],{"type":30,"value":1673},"inside",{"type":30,"value":1675}," of the component.",{"type":25,"tag":26,"props":1677,"children":1678},{},[1679,1681,1686],{"type":30,"value":1680},"Of course, it doesn't hurt to keep the code clean everywhere, but on a certain level, as long as it gets the job done and doesn't butcher the performance, I (more or less) ",{"type":25,"tag":41,"props":1682,"children":1683},{},[1684],{"type":30,"value":1685},"don't care how it's coded",{"type":30,"value":326},{"type":25,"tag":26,"props":1688,"children":1689},{},[1690],{"type":30,"value":1691},"When building reusable components (or classes etc...) our goal is to develop a kind of a black box.",{"type":25,"tag":26,"props":1693,"children":1694},{},[1695,1697,1702,1704,1709,1711,1716],{"type":30,"value":1696},"The user needs to know ",{"type":25,"tag":103,"props":1698,"children":1699},{},[1700],{"type":30,"value":1701},"what our component does",{"type":30,"value":1703}," and should not run into problems ",{"type":25,"tag":103,"props":1705,"children":1706},{},[1707],{"type":30,"value":1708},"figuring out",{"type":30,"value":1710}," how to hook it up. When a user has to open our source code and analyze it to figure out what certain parts of our interface mean, that's a ",{"type":25,"tag":41,"props":1712,"children":1713},{},[1714],{"type":30,"value":1715},"mission failed",{"type":30,"value":1717}," on our part.",{"type":25,"tag":178,"props":1719,"children":1721},{"id":1720},"get-it-right-from-the-start",[1722],{"type":30,"value":1723},"Get it right from the start",{"type":25,"tag":26,"props":1725,"children":1726},{},[1727],{"type":30,"value":1728},"And one more thing to keep in mind is the ability of our interface to scale and adapt to new features.",{"type":25,"tag":26,"props":1730,"children":1731},{},[1732],{"type":30,"value":1733},"With such things as components (especially in component libraries), once people start implementing them, every prop change is a breaking change.",{"type":25,"tag":26,"props":1735,"children":1736},{},[1737],{"type":30,"value":1738},"The same goes for function arguments and even return values. When developing, try taking the hands off the keyboard from time to time and thinking about how will the thing you're working on scale? What potential changes are there? Is your interface ready for those changes?",{"type":25,"tag":26,"props":1740,"children":1741},{},[1742],{"type":30,"value":1743},"Let's say, for example, we have a function that handles some fancy login process, and we return a token from it:",{"type":25,"tag":195,"props":1745,"children":1747},{"code":1746,"language":1537,"meta":199},"interface Credentials {\n  username: string\n  password: string\n}\n\nfunction login(credentials: Credentials): string {\n  // ...\n  return token\n}\n",[1748],{"type":25,"tag":202,"props":1749,"children":1750},{},[1751],{"type":25,"tag":195,"props":1752,"children":1753},{"__ignoreMap":8},[1754,1774,1795,1815,1823,1831,1881,1894,1916],{"type":25,"tag":209,"props":1755,"children":1756},{"class":211,"line":212},[1757,1761,1765,1770],{"type":25,"tag":209,"props":1758,"children":1759},{"class":1550},[1760],{"type":30,"value":1553},{"type":25,"tag":209,"props":1762,"children":1763},{"class":1556},[1764],{"type":30,"value":230},{"type":25,"tag":209,"props":1766,"children":1767},{"class":1561},[1768],{"type":30,"value":1769},"Credentials",{"type":25,"tag":209,"props":1771,"children":1772},{"class":1556},[1773],{"type":30,"value":1569},{"type":25,"tag":209,"props":1775,"children":1776},{"class":211,"line":352},[1777,1781,1786,1790],{"type":25,"tag":209,"props":1778,"children":1779},{"class":1556},[1780],{"type":30,"value":1577},{"type":25,"tag":209,"props":1782,"children":1783},{"class":1580},[1784],{"type":30,"value":1785},"username",{"type":25,"tag":209,"props":1787,"children":1788},{"class":1556},[1789],{"type":30,"value":1593},{"type":25,"tag":209,"props":1791,"children":1792},{"class":1561},[1793],{"type":30,"value":1794},"string\n",{"type":25,"tag":209,"props":1796,"children":1797},{"class":211,"line":361},[1798,1802,1807,1811],{"type":25,"tag":209,"props":1799,"children":1800},{"class":1556},[1801],{"type":30,"value":1577},{"type":25,"tag":209,"props":1803,"children":1804},{"class":1580},[1805],{"type":30,"value":1806},"password",{"type":25,"tag":209,"props":1808,"children":1809},{"class":1556},[1810],{"type":30,"value":1593},{"type":25,"tag":209,"props":1812,"children":1813},{"class":1561},[1814],{"type":30,"value":1794},{"type":25,"tag":209,"props":1816,"children":1817},{"class":211,"line":370},[1818],{"type":25,"tag":209,"props":1819,"children":1820},{"class":1556},[1821],{"type":30,"value":1822},"}\n",{"type":25,"tag":209,"props":1824,"children":1825},{"class":211,"line":379},[1826],{"type":25,"tag":209,"props":1827,"children":1828},{},[1829],{"type":30,"value":1830},"\n",{"type":25,"tag":209,"props":1832,"children":1833},{"class":211,"line":388},[1834,1839,1843,1849,1854,1859,1863,1867,1872,1877],{"type":25,"tag":209,"props":1835,"children":1836},{"class":1550},[1837],{"type":30,"value":1838},"function",{"type":25,"tag":209,"props":1840,"children":1841},{"class":1556},[1842],{"type":30,"value":230},{"type":25,"tag":209,"props":1844,"children":1846},{"class":1845},"ct-bc7bfe",[1847],{"type":30,"value":1848},"login",{"type":25,"tag":209,"props":1850,"children":1851},{"class":1556},[1852],{"type":30,"value":1853},"(",{"type":25,"tag":209,"props":1855,"children":1856},{"class":1580},[1857],{"type":30,"value":1858},"credentials",{"type":25,"tag":209,"props":1860,"children":1861},{"class":1556},[1862],{"type":30,"value":1593},{"type":25,"tag":209,"props":1864,"children":1865},{"class":1561},[1866],{"type":30,"value":1769},{"type":25,"tag":209,"props":1868,"children":1869},{"class":1556},[1870],{"type":30,"value":1871},"): ",{"type":25,"tag":209,"props":1873,"children":1874},{"class":1561},[1875],{"type":30,"value":1876},"string",{"type":25,"tag":209,"props":1878,"children":1879},{"class":1556},[1880],{"type":30,"value":1569},{"type":25,"tag":209,"props":1882,"children":1883},{"class":211,"line":397},[1884,1888],{"type":25,"tag":209,"props":1885,"children":1886},{"class":1556},[1887],{"type":30,"value":1577},{"type":25,"tag":209,"props":1889,"children":1891},{"class":1890},"ct-6cb709",[1892],{"type":30,"value":1893},"// ...\n",{"type":25,"tag":209,"props":1895,"children":1897},{"class":211,"line":1896},8,[1898,1902,1907,1911],{"type":25,"tag":209,"props":1899,"children":1900},{"class":1556},[1901],{"type":30,"value":1577},{"type":25,"tag":209,"props":1903,"children":1904},{"class":1550},[1905],{"type":30,"value":1906},"return",{"type":25,"tag":209,"props":1908,"children":1909},{"class":1556},[1910],{"type":30,"value":230},{"type":25,"tag":209,"props":1912,"children":1913},{"class":1580},[1914],{"type":30,"value":1915},"token\n",{"type":25,"tag":209,"props":1917,"children":1919},{"class":211,"line":1918},9,[1920],{"type":25,"tag":209,"props":1921,"children":1922},{"class":1556},[1923],{"type":30,"value":1630},{"type":25,"tag":26,"props":1925,"children":1926},{},[1927],{"type":30,"value":1928},"Ok, but what if a couple of months down the road we realize that now we have to return a token expiration date along with the token? How will we do this? There are already some users who implemented this function, and they expect the return value to be a string.",{"type":25,"tag":26,"props":1930,"children":1931},{},[1932],{"type":30,"value":1933},"Sure, we can announce a breaking change and make everyone adjust their code to keep using our function. But it would be a lot cleaner if we left ourselves room for adjustment from the start.",{"type":25,"tag":26,"props":1935,"children":1936},{},[1937],{"type":30,"value":1938},"In this particular example, maybe it would be preferable to return an object (even with a single property), instead of a string:",{"type":25,"tag":195,"props":1940,"children":1942},{"code":1941,"language":1537,"meta":199},"interface LoginResult {\n  token: string\n}\n\nfunction login(credentials: Credentials): LoginResult {\n  // ...\n  return { token }\n}\n",[1943],{"type":25,"tag":202,"props":1944,"children":1945},{},[1946],{"type":25,"tag":195,"props":1947,"children":1948},{"__ignoreMap":8},[1949,1969,1989,1996,2003,2046,2057,2082],{"type":25,"tag":209,"props":1950,"children":1951},{"class":211,"line":212},[1952,1956,1960,1965],{"type":25,"tag":209,"props":1953,"children":1954},{"class":1550},[1955],{"type":30,"value":1553},{"type":25,"tag":209,"props":1957,"children":1958},{"class":1556},[1959],{"type":30,"value":230},{"type":25,"tag":209,"props":1961,"children":1962},{"class":1561},[1963],{"type":30,"value":1964},"LoginResult",{"type":25,"tag":209,"props":1966,"children":1967},{"class":1556},[1968],{"type":30,"value":1569},{"type":25,"tag":209,"props":1970,"children":1971},{"class":211,"line":352},[1972,1976,1981,1985],{"type":25,"tag":209,"props":1973,"children":1974},{"class":1556},[1975],{"type":30,"value":1577},{"type":25,"tag":209,"props":1977,"children":1978},{"class":1580},[1979],{"type":30,"value":1980},"token",{"type":25,"tag":209,"props":1982,"children":1983},{"class":1556},[1984],{"type":30,"value":1593},{"type":25,"tag":209,"props":1986,"children":1987},{"class":1561},[1988],{"type":30,"value":1794},{"type":25,"tag":209,"props":1990,"children":1991},{"class":211,"line":361},[1992],{"type":25,"tag":209,"props":1993,"children":1994},{"class":1556},[1995],{"type":30,"value":1822},{"type":25,"tag":209,"props":1997,"children":1998},{"class":211,"line":370},[1999],{"type":25,"tag":209,"props":2000,"children":2001},{},[2002],{"type":30,"value":1830},{"type":25,"tag":209,"props":2004,"children":2005},{"class":211,"line":379},[2006,2010,2014,2018,2022,2026,2030,2034,2038,2042],{"type":25,"tag":209,"props":2007,"children":2008},{"class":1550},[2009],{"type":30,"value":1838},{"type":25,"tag":209,"props":2011,"children":2012},{"class":1556},[2013],{"type":30,"value":230},{"type":25,"tag":209,"props":2015,"children":2016},{"class":1845},[2017],{"type":30,"value":1848},{"type":25,"tag":209,"props":2019,"children":2020},{"class":1556},[2021],{"type":30,"value":1853},{"type":25,"tag":209,"props":2023,"children":2024},{"class":1580},[2025],{"type":30,"value":1858},{"type":25,"tag":209,"props":2027,"children":2028},{"class":1556},[2029],{"type":30,"value":1593},{"type":25,"tag":209,"props":2031,"children":2032},{"class":1561},[2033],{"type":30,"value":1769},{"type":25,"tag":209,"props":2035,"children":2036},{"class":1556},[2037],{"type":30,"value":1871},{"type":25,"tag":209,"props":2039,"children":2040},{"class":1561},[2041],{"type":30,"value":1964},{"type":25,"tag":209,"props":2043,"children":2044},{"class":1556},[2045],{"type":30,"value":1569},{"type":25,"tag":209,"props":2047,"children":2048},{"class":211,"line":388},[2049,2053],{"type":25,"tag":209,"props":2050,"children":2051},{"class":1556},[2052],{"type":30,"value":1577},{"type":25,"tag":209,"props":2054,"children":2055},{"class":1890},[2056],{"type":30,"value":1893},{"type":25,"tag":209,"props":2058,"children":2059},{"class":211,"line":397},[2060,2064,2068,2073,2077],{"type":25,"tag":209,"props":2061,"children":2062},{"class":1556},[2063],{"type":30,"value":1577},{"type":25,"tag":209,"props":2065,"children":2066},{"class":1550},[2067],{"type":30,"value":1906},{"type":25,"tag":209,"props":2069,"children":2070},{"class":1556},[2071],{"type":30,"value":2072}," { ",{"type":25,"tag":209,"props":2074,"children":2075},{"class":1580},[2076],{"type":30,"value":1980},{"type":25,"tag":209,"props":2078,"children":2079},{"class":1556},[2080],{"type":30,"value":2081}," }\n",{"type":25,"tag":209,"props":2083,"children":2084},{"class":211,"line":1896},[2085],{"type":25,"tag":209,"props":2086,"children":2087},{"class":1556},[2088],{"type":30,"value":1630},{"type":25,"tag":178,"props":2090,"children":2092},{"id":2091},"the-takeaway",[2093],{"type":30,"value":2094},"The Takeaway",{"type":25,"tag":26,"props":2096,"children":2097},{},[2098],{"type":30,"value":2099},"In summary, every time we're developing something for other people to use, we should prioritize crafting a clear and intuitive interface by thinking about it from the user's perspective.",{"type":25,"tag":26,"props":2101,"children":2102},{},[2103],{"type":30,"value":2104},"We should not only think about how our components work under the hood, but also how straightforward they are to implement.",{"type":25,"tag":26,"props":2106,"children":2107},{},[2108],{"type":30,"value":2109},"Stay thoughtful everyone, and happy coding!",{"type":25,"tag":1479,"children":2111},[2112],{"type":30,"value":2113},".ct-6cb709{color:#7F848E}\n.ct-bc7bfe{color:#61AFEF}\n.ct-4d5a7e{color:#E06C75}\n.ct-d47243{color:#E5C07B}\n.ct-d973a7{color:#ABB2BF}\n.ct-e7a9d3{color:#C678DD}",{"title":8,"searchDepth":352,"depth":352,"links":2115},[2116,2117,2118],{"id":1655,"depth":352,"text":1658},{"id":1720,"depth":352,"text":1723},{"id":2091,"depth":352,"text":2094},"content:blog:props-naming.md","blog/props-naming.md",{"_path":2122,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":2123,"description":2124,"date":2125,"tags":2126,"readingTime":2130,"body":2135,"_type":1500,"_id":3986,"_source":1502,"_file":3987,"_extension":1504},"/blog/await-primitive","Await Primitive: Why on Earth does this code work!?","Once, while reviewing some code, I ran into a surprising snippet (that I'm going to share with you in a moment), that, at first, made me think \"No way this is going to work\", but after testing it in a browser I, quite shocked, had to change my approach to \"Why on Earth is this working!?\".",1692896400000,[2127,2128,2129],"js","behavior","gotcha",{"text":2131,"minutes":2132,"time":2133,"words":2134},"6 min read",5.725,343500,1145,{"type":22,"children":2136,"toc":3975},[2137,2156,2161,2166,2171,2235,2240,2665,2694,2699,2711,2730,2742,2764,2769,2774,2780,2785,2926,2937,2942,3116,3126,3131,3137,3142,3153,3158,3175,3187,3211,3216,3222,3233,3262,3268,3273,3279,3284,3308,3480,3486,3498,3529,3534,3716,3722,3741,3752,3934,3938,3961,3966,3971],{"type":25,"tag":26,"props":2138,"children":2139},{},[2140,2142,2147,2149,2154],{"type":30,"value":2141},"Once, while reviewing some code, I ran into a surprising snippet (that I'm going to share with you in a moment), that, at first, made me think \"",{"type":25,"tag":41,"props":2143,"children":2144},{},[2145],{"type":30,"value":2146},"No way this is going to work",{"type":30,"value":2148},"\", but after testing it in a browser I, quite shocked, had to change my approach to \"",{"type":25,"tag":41,"props":2150,"children":2151},{},[2152],{"type":30,"value":2153},"Why on Earth is this working!?",{"type":30,"value":2155},"\".",{"type":25,"tag":26,"props":2157,"children":2158},{},[2159],{"type":30,"value":2160},"The investigation that followed opened my eyes on an unexpected behavior that I found worthy of sharing here.",{"type":25,"tag":26,"props":2162,"children":2163},{},[2164],{"type":30,"value":2165},"So what was that snippet? First, let me give you some context.",{"type":25,"tag":26,"props":2167,"children":2168},{},[2169],{"type":30,"value":2170},"We're working on a Svelte component and the code is written by a junior developer, who seems familiar with async-await, but doesn't fully comprehend how Promises work yet. In the following code, he's trying to make an HTML element appear in DOM and then perform some operations with it within the same function.",{"type":25,"tag":118,"props":2172,"children":2173},{},[2174,2179,2184,2189],{"type":25,"tag":122,"props":2175,"children":2176},{},[2177],{"type":30,"value":2178},"If you're not familiar with Svelte 4 syntax",{"type":25,"tag":26,"props":2180,"children":2181},{},[2182],{"type":30,"value":2183},"No worries - it doesn't have anything to do with the topic of this post.",{"type":25,"tag":26,"props":2185,"children":2186},{},[2187],{"type":30,"value":2188},"But for the sake of this example I'll briefly explain what's going on in the code snippet below:",{"type":25,"tag":133,"props":2190,"children":2191},{},[2192,2211],{"type":25,"tag":137,"props":2193,"children":2194},{},[2195,2197,2202,2204,2209],{"type":30,"value":2196},"First we declare a reactive variable ",{"type":25,"tag":33,"props":2198,"children":2199},{},[2200],{"type":30,"value":2201},"show",{"type":30,"value":2203}," (yes, all ",{"type":25,"tag":33,"props":2205,"children":2206},{},[2207],{"type":30,"value":2208},"let",{"type":30,"value":2210}," variables are reactive in Svelte), which controls whether the element is rendered.",{"type":25,"tag":137,"props":2212,"children":2213},{},[2214,2216,2220,2222,2227,2229,2234],{"type":30,"value":2215},"Then we declare a variable ",{"type":25,"tag":33,"props":2217,"children":2218},{},[2219],{"type":30,"value":25},{"type":30,"value":2221}," that later gets bound to an element in template. So we can expect this variable to be an ",{"type":25,"tag":33,"props":2223,"children":2224},{},[2225],{"type":30,"value":2226},"HTMLElement",{"type":30,"value":2228}," unless it's not rendered, in which case it'll be ",{"type":25,"tag":33,"props":2230,"children":2231},{},[2232],{"type":30,"value":2233},"undefined",{"type":30,"value":326},{"type":25,"tag":26,"props":2236,"children":2237},{},[2238],{"type":30,"value":2239},"Now that we understand the context let's see the code snippet:",{"type":25,"tag":195,"props":2241,"children":2244},{"code":2242,"language":2243,"meta":199},"\u003Cscript>\n    let show = false\n    let element\n\n    async function main() {\n        show = true\n        await element\n        const rect = element.getBoundingClientRect()\n        console.log(rect)\n    }\n\u003C/script>\n\n{#if show}\n    \u003Cdiv bind:this={element}>\n        ...\n    \u003C/div>\n{/if}\n","svelte",[2245],{"type":25,"tag":202,"props":2246,"children":2247},{},[2248],{"type":25,"tag":195,"props":2249,"children":2250},{"__ignoreMap":8},[2251,2271,2312,2332,2339,2374,2403,2423,2475,2509,2518,2535,2543,2569,2622,2631,2648],{"type":25,"tag":209,"props":2252,"children":2253},{"class":211,"line":212},[2254,2260,2266],{"type":25,"tag":209,"props":2255,"children":2257},{"class":2256},"ct-1369be",[2258],{"type":30,"value":2259},"\u003C",{"type":25,"tag":209,"props":2261,"children":2263},{"class":2262},"ct-5f6a8a",[2264],{"type":30,"value":2265},"script",{"type":25,"tag":209,"props":2267,"children":2268},{"class":2256},[2269],{"type":30,"value":2270},">\n",{"type":25,"tag":209,"props":2272,"children":2273},{"class":211,"line":352},[2274,2279,2284,2288,2292,2296,2302,2306],{"type":25,"tag":209,"props":2275,"children":2276},{"class":2256},[2277],{"type":30,"value":2278},"    ",{"type":25,"tag":209,"props":2280,"children":2282},{"class":2281},"ct-336583",[2283],{"type":30,"value":2208},{"type":25,"tag":209,"props":2285,"children":2286},{"class":2256},[2287],{"type":30,"value":230},{"type":25,"tag":209,"props":2289,"children":2290},{"class":2262},[2291],{"type":30,"value":2201},{"type":25,"tag":209,"props":2293,"children":2294},{"class":2256},[2295],{"type":30,"value":230},{"type":25,"tag":209,"props":2297,"children":2299},{"class":2298},"ct-b61278",[2300],{"type":30,"value":2301},"=",{"type":25,"tag":209,"props":2303,"children":2304},{"class":2256},[2305],{"type":30,"value":230},{"type":25,"tag":209,"props":2307,"children":2309},{"class":2308},"ct-74d613",[2310],{"type":30,"value":2311},"false\n",{"type":25,"tag":209,"props":2313,"children":2314},{"class":211,"line":361},[2315,2319,2323,2327],{"type":25,"tag":209,"props":2316,"children":2317},{"class":2256},[2318],{"type":30,"value":2278},{"type":25,"tag":209,"props":2320,"children":2321},{"class":2281},[2322],{"type":30,"value":2208},{"type":25,"tag":209,"props":2324,"children":2325},{"class":2256},[2326],{"type":30,"value":230},{"type":25,"tag":209,"props":2328,"children":2329},{"class":2262},[2330],{"type":30,"value":2331},"element\n",{"type":25,"tag":209,"props":2333,"children":2334},{"class":211,"line":370},[2335],{"type":25,"tag":209,"props":2336,"children":2337},{},[2338],{"type":30,"value":1830},{"type":25,"tag":209,"props":2340,"children":2341},{"class":211,"line":379},[2342,2346,2351,2355,2359,2363,2369],{"type":25,"tag":209,"props":2343,"children":2344},{"class":2256},[2345],{"type":30,"value":2278},{"type":25,"tag":209,"props":2347,"children":2348},{"class":2281},[2349],{"type":30,"value":2350},"async",{"type":25,"tag":209,"props":2352,"children":2353},{"class":2256},[2354],{"type":30,"value":230},{"type":25,"tag":209,"props":2356,"children":2357},{"class":2281},[2358],{"type":30,"value":1838},{"type":25,"tag":209,"props":2360,"children":2361},{"class":2256},[2362],{"type":30,"value":230},{"type":25,"tag":209,"props":2364,"children":2366},{"class":2365},"ct-f75423",[2367],{"type":30,"value":2368},"main",{"type":25,"tag":209,"props":2370,"children":2371},{"class":2256},[2372],{"type":30,"value":2373},"() {\n",{"type":25,"tag":209,"props":2375,"children":2376},{"class":211,"line":388},[2377,2382,2386,2390,2394,2398],{"type":25,"tag":209,"props":2378,"children":2379},{"class":2256},[2380],{"type":30,"value":2381},"        ",{"type":25,"tag":209,"props":2383,"children":2384},{"class":2262},[2385],{"type":30,"value":2201},{"type":25,"tag":209,"props":2387,"children":2388},{"class":2256},[2389],{"type":30,"value":230},{"type":25,"tag":209,"props":2391,"children":2392},{"class":2298},[2393],{"type":30,"value":2301},{"type":25,"tag":209,"props":2395,"children":2396},{"class":2256},[2397],{"type":30,"value":230},{"type":25,"tag":209,"props":2399,"children":2400},{"class":2308},[2401],{"type":30,"value":2402},"true\n",{"type":25,"tag":209,"props":2404,"children":2405},{"class":211,"line":397},[2406,2410,2415,2419],{"type":25,"tag":209,"props":2407,"children":2408},{"class":2256},[2409],{"type":30,"value":2381},{"type":25,"tag":209,"props":2411,"children":2412},{"class":2281},[2413],{"type":30,"value":2414},"await",{"type":25,"tag":209,"props":2416,"children":2417},{"class":2256},[2418],{"type":30,"value":230},{"type":25,"tag":209,"props":2420,"children":2421},{"class":2262},[2422],{"type":30,"value":2331},{"type":25,"tag":209,"props":2424,"children":2425},{"class":211,"line":1896},[2426,2430,2435,2439,2445,2449,2453,2457,2461,2465,2470],{"type":25,"tag":209,"props":2427,"children":2428},{"class":2256},[2429],{"type":30,"value":2381},{"type":25,"tag":209,"props":2431,"children":2432},{"class":2281},[2433],{"type":30,"value":2434},"const",{"type":25,"tag":209,"props":2436,"children":2437},{"class":2256},[2438],{"type":30,"value":230},{"type":25,"tag":209,"props":2440,"children":2442},{"class":2441},"ct-419fc5",[2443],{"type":30,"value":2444},"rect",{"type":25,"tag":209,"props":2446,"children":2447},{"class":2256},[2448],{"type":30,"value":230},{"type":25,"tag":209,"props":2450,"children":2451},{"class":2298},[2452],{"type":30,"value":2301},{"type":25,"tag":209,"props":2454,"children":2455},{"class":2256},[2456],{"type":30,"value":230},{"type":25,"tag":209,"props":2458,"children":2459},{"class":2441},[2460],{"type":30,"value":25},{"type":25,"tag":209,"props":2462,"children":2463},{"class":2256},[2464],{"type":30,"value":326},{"type":25,"tag":209,"props":2466,"children":2467},{"class":2365},[2468],{"type":30,"value":2469},"getBoundingClientRect",{"type":25,"tag":209,"props":2471,"children":2472},{"class":2256},[2473],{"type":30,"value":2474},"()\n",{"type":25,"tag":209,"props":2476,"children":2477},{"class":211,"line":1918},[2478,2482,2487,2491,2496,2500,2504],{"type":25,"tag":209,"props":2479,"children":2480},{"class":2256},[2481],{"type":30,"value":2381},{"type":25,"tag":209,"props":2483,"children":2484},{"class":2441},[2485],{"type":30,"value":2486},"console",{"type":25,"tag":209,"props":2488,"children":2489},{"class":2256},[2490],{"type":30,"value":326},{"type":25,"tag":209,"props":2492,"children":2493},{"class":2365},[2494],{"type":30,"value":2495},"log",{"type":25,"tag":209,"props":2497,"children":2498},{"class":2256},[2499],{"type":30,"value":1853},{"type":25,"tag":209,"props":2501,"children":2502},{"class":2262},[2503],{"type":30,"value":2444},{"type":25,"tag":209,"props":2505,"children":2506},{"class":2256},[2507],{"type":30,"value":2508},")\n",{"type":25,"tag":209,"props":2510,"children":2512},{"class":211,"line":2511},10,[2513],{"type":25,"tag":209,"props":2514,"children":2515},{"class":2256},[2516],{"type":30,"value":2517},"    }\n",{"type":25,"tag":209,"props":2519,"children":2521},{"class":211,"line":2520},11,[2522,2527,2531],{"type":25,"tag":209,"props":2523,"children":2524},{"class":2256},[2525],{"type":30,"value":2526},"\u003C/",{"type":25,"tag":209,"props":2528,"children":2529},{"class":2262},[2530],{"type":30,"value":2265},{"type":25,"tag":209,"props":2532,"children":2533},{"class":2256},[2534],{"type":30,"value":2270},{"type":25,"tag":209,"props":2536,"children":2538},{"class":211,"line":2537},12,[2539],{"type":25,"tag":209,"props":2540,"children":2541},{},[2542],{"type":30,"value":1830},{"type":25,"tag":209,"props":2544,"children":2546},{"class":211,"line":2545},13,[2547,2552,2557,2561,2565],{"type":25,"tag":209,"props":2548,"children":2549},{"class":2256},[2550],{"type":30,"value":2551},"{#",{"type":25,"tag":209,"props":2553,"children":2554},{"class":2281},[2555],{"type":30,"value":2556},"if",{"type":25,"tag":209,"props":2558,"children":2559},{"class":2256},[2560],{"type":30,"value":230},{"type":25,"tag":209,"props":2562,"children":2563},{"class":2262},[2564],{"type":30,"value":2201},{"type":25,"tag":209,"props":2566,"children":2567},{"class":2256},[2568],{"type":30,"value":1822},{"type":25,"tag":209,"props":2570,"children":2572},{"class":211,"line":2571},14,[2573,2578,2583,2587,2592,2596,2601,2605,2610,2614,2618],{"type":25,"tag":209,"props":2574,"children":2575},{"class":2256},[2576],{"type":30,"value":2577},"    \u003C",{"type":25,"tag":209,"props":2579,"children":2580},{"class":2262},[2581],{"type":30,"value":2582},"div",{"type":25,"tag":209,"props":2584,"children":2585},{"class":2256},[2586],{"type":30,"value":230},{"type":25,"tag":209,"props":2588,"children":2589},{"class":2281},[2590],{"type":30,"value":2591},"bind",{"type":25,"tag":209,"props":2593,"children":2594},{"class":2256},[2595],{"type":30,"value":978},{"type":25,"tag":209,"props":2597,"children":2598},{"class":2441},[2599],{"type":30,"value":2600},"this",{"type":25,"tag":209,"props":2602,"children":2603},{"class":2256},[2604],{"type":30,"value":2301},{"type":25,"tag":209,"props":2606,"children":2607},{"class":2281},[2608],{"type":30,"value":2609},"{",{"type":25,"tag":209,"props":2611,"children":2612},{"class":2262},[2613],{"type":30,"value":25},{"type":25,"tag":209,"props":2615,"children":2616},{"class":2281},[2617],{"type":30,"value":1630},{"type":25,"tag":209,"props":2619,"children":2620},{"class":2256},[2621],{"type":30,"value":2270},{"type":25,"tag":209,"props":2623,"children":2625},{"class":211,"line":2624},15,[2626],{"type":25,"tag":209,"props":2627,"children":2628},{"class":2256},[2629],{"type":30,"value":2630},"        ...\n",{"type":25,"tag":209,"props":2632,"children":2634},{"class":211,"line":2633},16,[2635,2640,2644],{"type":25,"tag":209,"props":2636,"children":2637},{"class":2256},[2638],{"type":30,"value":2639},"    \u003C/",{"type":25,"tag":209,"props":2641,"children":2642},{"class":2262},[2643],{"type":30,"value":2582},{"type":25,"tag":209,"props":2645,"children":2646},{"class":2256},[2647],{"type":30,"value":2270},{"type":25,"tag":209,"props":2649,"children":2651},{"class":211,"line":2650},17,[2652,2657,2661],{"type":25,"tag":209,"props":2653,"children":2654},{"class":2256},[2655],{"type":30,"value":2656},"{/",{"type":25,"tag":209,"props":2658,"children":2659},{"class":2281},[2660],{"type":30,"value":2556},{"type":25,"tag":209,"props":2662,"children":2663},{"class":2256},[2664],{"type":30,"value":1630},{"type":25,"tag":26,"props":2666,"children":2667},{},[2668,2670,2675,2677,2681,2683,2687,2688,2692],{"type":30,"value":2669},"Now, what do you thing the resulting output to the console will be when ",{"type":25,"tag":33,"props":2671,"children":2672},{},[2673],{"type":30,"value":2674},"main()",{"type":30,"value":2676}," function is called? (I remind you - ",{"type":25,"tag":33,"props":2678,"children":2679},{},[2680],{"type":30,"value":25},{"type":30,"value":2682}," is either an ",{"type":25,"tag":33,"props":2684,"children":2685},{},[2686],{"type":30,"value":2226},{"type":30,"value":484},{"type":25,"tag":33,"props":2689,"children":2690},{},[2691],{"type":30,"value":2233},{"type":30,"value":2693},", never a Promise).",{"type":25,"tag":26,"props":2695,"children":2696},{},[2697],{"type":30,"value":2698},"Will we see anything logged at all, or will we see an error?",{"type":25,"tag":26,"props":2700,"children":2701},{},[2702,2704,2709],{"type":30,"value":2703},"When we assign ",{"type":25,"tag":33,"props":2705,"children":2706},{},[2707],{"type":30,"value":2708},"show = true",{"type":30,"value":2710},", it signals Svelte to react to the state change and render the element. And only after it's rendered it's available through the bound variable.",{"type":25,"tag":26,"props":2712,"children":2713},{},[2714,2716,2721,2723,2728],{"type":30,"value":2715},"Conventionally, to wait for the element to appear, we would use Svelte's ",{"type":25,"tag":33,"props":2717,"children":2718},{},[2719],{"type":30,"value":2720},"tick",{"type":30,"value":2722}," function or at least set a really short timeout, but ",{"type":25,"tag":33,"props":2724,"children":2725},{},[2726],{"type":30,"value":2727},"await element",{"type":30,"value":2729}," is something that just wouldn't work. That's not how JavaScript works, even with reactivity and Svelte's magic you can't await a primitive and expect it to resolve with an updated value. Right?",{"type":25,"tag":26,"props":2731,"children":2732},{},[2733,2735,2740],{"type":30,"value":2734},"Wrong! ",{"type":25,"tag":103,"props":2736,"children":2737},{},[2738],{"type":30,"value":2739},"Mindblowingly",{"type":30,"value":2741},", this code doesn't throw an error, and prints to the console exactly what the author's expectation was - a DOMRect of the element.",{"type":25,"tag":26,"props":2743,"children":2744},{},[2745,2747,2751,2753,2757,2759,2763],{"type":30,"value":2746},"Moreover, if we removed the ",{"type":25,"tag":33,"props":2748,"children":2749},{},[2750],{"type":30,"value":2727},{"type":30,"value":2752},", then it would crash, because now ",{"type":25,"tag":33,"props":2754,"children":2755},{},[2756],{"type":30,"value":25},{"type":30,"value":2758}," would be ",{"type":25,"tag":33,"props":2760,"children":2761},{},[2762],{"type":30,"value":2233},{"type":30,"value":1210},{"type":25,"tag":26,"props":2765,"children":2766},{},[2767],{"type":30,"value":2768},"Have we been lied to? Can you just await an undefined variable until it gets assigned a value? What's going on here?",{"type":25,"tag":26,"props":2770,"children":2771},{},[2772],{"type":30,"value":2773},"Let's figure this out!",{"type":25,"tag":178,"props":2775,"children":2777},{"id":2776},"the-investigation",[2778],{"type":30,"value":2779},"The Investigation",{"type":25,"tag":26,"props":2781,"children":2782},{},[2783],{"type":30,"value":2784},"Let's consider one more example, this time with a pre-school Vanilla JS question. What's the output of the following code?",{"type":25,"tag":195,"props":2786,"children":2788},{"code":2787,"language":2127,"meta":199},"let value\n\nfunction main() {\n  console.log(value)\n}\n\nmain()\n\nvalue = 'hello world'\n",[2789],{"type":25,"tag":202,"props":2790,"children":2791},{},[2792],{"type":25,"tag":195,"props":2793,"children":2794},{"__ignoreMap":8},[2795,2811,2818,2837,2869,2876,2883,2894,2901],{"type":25,"tag":209,"props":2796,"children":2797},{"class":211,"line":212},[2798,2802,2806],{"type":25,"tag":209,"props":2799,"children":2800},{"class":2281},[2801],{"type":30,"value":2208},{"type":25,"tag":209,"props":2803,"children":2804},{"class":2256},[2805],{"type":30,"value":230},{"type":25,"tag":209,"props":2807,"children":2808},{"class":2262},[2809],{"type":30,"value":2810},"value\n",{"type":25,"tag":209,"props":2812,"children":2813},{"class":211,"line":352},[2814],{"type":25,"tag":209,"props":2815,"children":2816},{},[2817],{"type":30,"value":1830},{"type":25,"tag":209,"props":2819,"children":2820},{"class":211,"line":361},[2821,2825,2829,2833],{"type":25,"tag":209,"props":2822,"children":2823},{"class":2281},[2824],{"type":30,"value":1838},{"type":25,"tag":209,"props":2826,"children":2827},{"class":2256},[2828],{"type":30,"value":230},{"type":25,"tag":209,"props":2830,"children":2831},{"class":2365},[2832],{"type":30,"value":2368},{"type":25,"tag":209,"props":2834,"children":2835},{"class":2256},[2836],{"type":30,"value":2373},{"type":25,"tag":209,"props":2838,"children":2839},{"class":211,"line":370},[2840,2844,2848,2852,2856,2860,2865],{"type":25,"tag":209,"props":2841,"children":2842},{"class":2256},[2843],{"type":30,"value":1577},{"type":25,"tag":209,"props":2845,"children":2846},{"class":2441},[2847],{"type":30,"value":2486},{"type":25,"tag":209,"props":2849,"children":2850},{"class":2256},[2851],{"type":30,"value":326},{"type":25,"tag":209,"props":2853,"children":2854},{"class":2365},[2855],{"type":30,"value":2495},{"type":25,"tag":209,"props":2857,"children":2858},{"class":2256},[2859],{"type":30,"value":1853},{"type":25,"tag":209,"props":2861,"children":2862},{"class":2262},[2863],{"type":30,"value":2864},"value",{"type":25,"tag":209,"props":2866,"children":2867},{"class":2256},[2868],{"type":30,"value":2508},{"type":25,"tag":209,"props":2870,"children":2871},{"class":211,"line":379},[2872],{"type":25,"tag":209,"props":2873,"children":2874},{"class":2256},[2875],{"type":30,"value":1822},{"type":25,"tag":209,"props":2877,"children":2878},{"class":211,"line":388},[2879],{"type":25,"tag":209,"props":2880,"children":2881},{},[2882],{"type":30,"value":1830},{"type":25,"tag":209,"props":2884,"children":2885},{"class":211,"line":397},[2886,2890],{"type":25,"tag":209,"props":2887,"children":2888},{"class":2365},[2889],{"type":30,"value":2368},{"type":25,"tag":209,"props":2891,"children":2892},{"class":2256},[2893],{"type":30,"value":2474},{"type":25,"tag":209,"props":2895,"children":2896},{"class":211,"line":1896},[2897],{"type":25,"tag":209,"props":2898,"children":2899},{},[2900],{"type":30,"value":1830},{"type":25,"tag":209,"props":2902,"children":2903},{"class":211,"line":1918},[2904,2908,2912,2916,2920],{"type":25,"tag":209,"props":2905,"children":2906},{"class":2262},[2907],{"type":30,"value":2864},{"type":25,"tag":209,"props":2909,"children":2910},{"class":2256},[2911],{"type":30,"value":230},{"type":25,"tag":209,"props":2913,"children":2914},{"class":2298},[2915],{"type":30,"value":2301},{"type":25,"tag":209,"props":2917,"children":2918},{"class":2256},[2919],{"type":30,"value":230},{"type":25,"tag":209,"props":2921,"children":2923},{"class":2922},"ct-8da4fa",[2924],{"type":30,"value":2925},"'hello world'",{"type":25,"tag":26,"props":2927,"children":2928},{},[2929,2931,2935],{"type":30,"value":2930},"If you answered ",{"type":25,"tag":33,"props":2932,"children":2933},{},[2934],{"type":30,"value":2233},{"type":30,"value":2936},", of course you're correct.",{"type":25,"tag":26,"props":2938,"children":2939},{},[2940],{"type":30,"value":2941},"But would it change anything if we modified the code like below?",{"type":25,"tag":195,"props":2943,"children":2945},{"code":2944,"language":2127,"meta":199},"let value\n\nasync function main() {\n  await value // 👈 add this\n  console.log(value)\n}\n\nmain()\n\nvalue = 'hello world'\n",[2946],{"type":25,"tag":202,"props":2947,"children":2948},{},[2949],{"type":25,"tag":195,"props":2950,"children":2951},{"__ignoreMap":8},[2952,2967,2974,3001,3030,3061,3068,3075,3086,3093],{"type":25,"tag":209,"props":2953,"children":2954},{"class":211,"line":212},[2955,2959,2963],{"type":25,"tag":209,"props":2956,"children":2957},{"class":2281},[2958],{"type":30,"value":2208},{"type":25,"tag":209,"props":2960,"children":2961},{"class":2256},[2962],{"type":30,"value":230},{"type":25,"tag":209,"props":2964,"children":2965},{"class":2262},[2966],{"type":30,"value":2810},{"type":25,"tag":209,"props":2968,"children":2969},{"class":211,"line":352},[2970],{"type":25,"tag":209,"props":2971,"children":2972},{},[2973],{"type":30,"value":1830},{"type":25,"tag":209,"props":2975,"children":2976},{"class":211,"line":361},[2977,2981,2985,2989,2993,2997],{"type":25,"tag":209,"props":2978,"children":2979},{"class":2281},[2980],{"type":30,"value":2350},{"type":25,"tag":209,"props":2982,"children":2983},{"class":2256},[2984],{"type":30,"value":230},{"type":25,"tag":209,"props":2986,"children":2987},{"class":2281},[2988],{"type":30,"value":1838},{"type":25,"tag":209,"props":2990,"children":2991},{"class":2256},[2992],{"type":30,"value":230},{"type":25,"tag":209,"props":2994,"children":2995},{"class":2365},[2996],{"type":30,"value":2368},{"type":25,"tag":209,"props":2998,"children":2999},{"class":2256},[3000],{"type":30,"value":2373},{"type":25,"tag":209,"props":3002,"children":3003},{"class":211,"line":370},[3004,3008,3012,3016,3020,3024],{"type":25,"tag":209,"props":3005,"children":3006},{"class":2256},[3007],{"type":30,"value":1577},{"type":25,"tag":209,"props":3009,"children":3010},{"class":2281},[3011],{"type":30,"value":2414},{"type":25,"tag":209,"props":3013,"children":3014},{"class":2256},[3015],{"type":30,"value":230},{"type":25,"tag":209,"props":3017,"children":3018},{"class":2262},[3019],{"type":30,"value":2864},{"type":25,"tag":209,"props":3021,"children":3022},{"class":2256},[3023],{"type":30,"value":230},{"type":25,"tag":209,"props":3025,"children":3027},{"class":3026},"ct-24e83a",[3028],{"type":30,"value":3029},"// 👈 add this\n",{"type":25,"tag":209,"props":3031,"children":3032},{"class":211,"line":379},[3033,3037,3041,3045,3049,3053,3057],{"type":25,"tag":209,"props":3034,"children":3035},{"class":2256},[3036],{"type":30,"value":1577},{"type":25,"tag":209,"props":3038,"children":3039},{"class":2441},[3040],{"type":30,"value":2486},{"type":25,"tag":209,"props":3042,"children":3043},{"class":2256},[3044],{"type":30,"value":326},{"type":25,"tag":209,"props":3046,"children":3047},{"class":2365},[3048],{"type":30,"value":2495},{"type":25,"tag":209,"props":3050,"children":3051},{"class":2256},[3052],{"type":30,"value":1853},{"type":25,"tag":209,"props":3054,"children":3055},{"class":2262},[3056],{"type":30,"value":2864},{"type":25,"tag":209,"props":3058,"children":3059},{"class":2256},[3060],{"type":30,"value":2508},{"type":25,"tag":209,"props":3062,"children":3063},{"class":211,"line":388},[3064],{"type":25,"tag":209,"props":3065,"children":3066},{"class":2256},[3067],{"type":30,"value":1822},{"type":25,"tag":209,"props":3069,"children":3070},{"class":211,"line":397},[3071],{"type":25,"tag":209,"props":3072,"children":3073},{},[3074],{"type":30,"value":1830},{"type":25,"tag":209,"props":3076,"children":3077},{"class":211,"line":1896},[3078,3082],{"type":25,"tag":209,"props":3079,"children":3080},{"class":2365},[3081],{"type":30,"value":2368},{"type":25,"tag":209,"props":3083,"children":3084},{"class":2256},[3085],{"type":30,"value":2474},{"type":25,"tag":209,"props":3087,"children":3088},{"class":211,"line":1918},[3089],{"type":25,"tag":209,"props":3090,"children":3091},{},[3092],{"type":30,"value":1830},{"type":25,"tag":209,"props":3094,"children":3095},{"class":211,"line":2511},[3096,3100,3104,3108,3112],{"type":25,"tag":209,"props":3097,"children":3098},{"class":2262},[3099],{"type":30,"value":2864},{"type":25,"tag":209,"props":3101,"children":3102},{"class":2256},[3103],{"type":30,"value":230},{"type":25,"tag":209,"props":3105,"children":3106},{"class":2298},[3107],{"type":30,"value":2301},{"type":25,"tag":209,"props":3109,"children":3110},{"class":2256},[3111],{"type":30,"value":230},{"type":25,"tag":209,"props":3113,"children":3114},{"class":2922},[3115],{"type":30,"value":2925},{"type":25,"tag":26,"props":3117,"children":3118},{},[3119,3121,3125],{"type":30,"value":3120},"Now it prints ",{"type":25,"tag":33,"props":3122,"children":3123},{},[3124],{"type":30,"value":2925},{"type":30,"value":1210},{"type":25,"tag":26,"props":3127,"children":3128},{},[3129],{"type":30,"value":3130},"I'm going to be honest with you - I was pretty mind blown at this point, but as always. there turned out to be a rational explanation.",{"type":25,"tag":178,"props":3132,"children":3134},{"id":3133},"the-trick",[3135],{"type":30,"value":3136},"The trick",{"type":25,"tag":26,"props":3138,"children":3139},{},[3140],{"type":30,"value":3141},"Yes, the above code works, but not exactly for the perceived reason.",{"type":25,"tag":26,"props":3143,"children":3144},{},[3145,3147,3151],{"type":30,"value":3146},"In both examples it makes it look like a primitive ",{"type":25,"tag":33,"props":3148,"children":3149},{},[3150],{"type":30,"value":2233},{"type":30,"value":3152}," value is being awaited until it gets assigned a real value, and only then the async function proceeds with execution.",{"type":25,"tag":26,"props":3154,"children":3155},{},[3156],{"type":30,"value":3157},"But the reality is much more prosaic.",{"type":25,"tag":26,"props":3159,"children":3160},{},[3161,3163,3167,3169,3174],{"type":30,"value":3162},"In fact what's happening is when ",{"type":25,"tag":33,"props":3164,"children":3165},{},[3166],{"type":30,"value":2414},{"type":30,"value":3168}," keyword is used with a non-Promise value, ",{"type":25,"tag":103,"props":3170,"children":3171},{},[3172],{"type":30,"value":3173},"JS implicitly transforms it into a Promise that immediately resolves with that value",{"type":30,"value":326},{"type":25,"tag":26,"props":3176,"children":3177},{},[3178,3180,3185],{"type":30,"value":3179},"A-ha, now that explains everything! In both of our examples, of course, the execution isn't paused until the variables value gets updated. It's simply paused until the ",{"type":25,"tag":41,"props":3181,"children":3182},{},[3183],{"type":30,"value":3184},"newly minted Promise gets resolved",{"type":30,"value":3186}," and that just happens to be enough time for the variable's value to update.",{"type":25,"tag":26,"props":3188,"children":3189},{},[3190,3192,3196,3197,3202,3204,3209],{"type":30,"value":3191},"As far as JS is concerned, the ",{"type":25,"tag":33,"props":3193,"children":3194},{},[3195],{"type":30,"value":2727},{"type":30,"value":484},{"type":25,"tag":33,"props":3198,"children":3199},{},[3200],{"type":30,"value":3201},"await value",{"type":30,"value":3203}," in our examples could be replaced with ",{"type":25,"tag":33,"props":3205,"children":3206},{},[3207],{"type":30,"value":3208},"await null",{"type":30,"value":3210}," and it would work the same.",{"type":25,"tag":26,"props":3212,"children":3213},{},[3214],{"type":30,"value":3215},"So...",{"type":25,"tag":178,"props":3217,"children":3219},{"id":3218},"can-we-use-it",[3220],{"type":30,"value":3221},"Can we use it?",{"type":25,"tag":26,"props":3223,"children":3224},{},[3225,3227,3232],{"type":30,"value":3226},"While the code turned out to perform correctly thanks to the implicit Promise conversion, and as exciting as it was to unravel this mystery, I still ",{"type":25,"tag":103,"props":3228,"children":3229},{},[3230],{"type":30,"value":3231},"would advise against using this behavior in an actual codebase",{"type":30,"value":326},{"type":25,"tag":26,"props":3234,"children":3235},{},[3236,3238,3242,3244,3249,3250,3254,3255,3260],{"type":30,"value":3237},"Considering the potential confusion caused by this unconventional usage of ",{"type":25,"tag":33,"props":3239,"children":3240},{},[3241],{"type":30,"value":2414},{"type":30,"value":3243}," with a primitive (",{"type":25,"tag":33,"props":3245,"children":3246},{},[3247],{"type":30,"value":3248},"await someVariable",{"type":30,"value":484},{"type":25,"tag":33,"props":3251,"children":3252},{},[3253],{"type":30,"value":3208},{"type":30,"value":484},{"type":25,"tag":33,"props":3256,"children":3257},{},[3258],{"type":30,"value":3259},"await 22",{"type":30,"value":3261},"), we should instead use more explicit approaches when we need to pause the execution of an async function.",{"type":25,"tag":178,"props":3263,"children":3265},{"id":3264},"worthy-alternatives",[3266],{"type":30,"value":3267},"Worthy Alternatives",{"type":25,"tag":26,"props":3269,"children":3270},{},[3271],{"type":30,"value":3272},"There are various ways to wait for the DOM to catch up with state updates.",{"type":25,"tag":538,"props":3274,"children":3276},{"id":3275},"framework-specific-tick-functions",[3277],{"type":30,"value":3278},"Framework-specific tick functions",{"type":25,"tag":26,"props":3280,"children":3281},{},[3282],{"type":30,"value":3283},"First thing to consider - many frameworks have an \"on next tick\" function just for this purpose, which guarantees that the framework took care of applying your state changes and the DOM was updated.",{"type":25,"tag":26,"props":3285,"children":3286},{},[3287,3289,3293,3295,3300,3302,3306],{"type":30,"value":3288},"For example, Svelte's ",{"type":25,"tag":33,"props":3290,"children":3291},{},[3292],{"type":30,"value":2720},{"type":30,"value":3294}," or Vue's ",{"type":25,"tag":33,"props":3296,"children":3297},{},[3298],{"type":30,"value":3299},"nextTick",{"type":30,"value":3301},". Using this approach you could rewrite the ",{"type":25,"tag":33,"props":3303,"children":3304},{},[3305],{"type":30,"value":2674},{"type":30,"value":3307}," function from the first example like this:",{"type":25,"tag":195,"props":3309,"children":3311},{"code":3310,"language":2127,"meta":199},"async function main() {\n  show = true\n  await tick()\n  const rect = element.getBoundingClientRect()\n  console.log(rect)\n}\n",[3312],{"type":25,"tag":202,"props":3313,"children":3314},{},[3315],{"type":25,"tag":195,"props":3316,"children":3317},{"__ignoreMap":8},[3318,3345,3372,3395,3442,3473],{"type":25,"tag":209,"props":3319,"children":3320},{"class":211,"line":212},[3321,3325,3329,3333,3337,3341],{"type":25,"tag":209,"props":3322,"children":3323},{"class":2281},[3324],{"type":30,"value":2350},{"type":25,"tag":209,"props":3326,"children":3327},{"class":2256},[3328],{"type":30,"value":230},{"type":25,"tag":209,"props":3330,"children":3331},{"class":2281},[3332],{"type":30,"value":1838},{"type":25,"tag":209,"props":3334,"children":3335},{"class":2256},[3336],{"type":30,"value":230},{"type":25,"tag":209,"props":3338,"children":3339},{"class":2365},[3340],{"type":30,"value":2368},{"type":25,"tag":209,"props":3342,"children":3343},{"class":2256},[3344],{"type":30,"value":2373},{"type":25,"tag":209,"props":3346,"children":3347},{"class":211,"line":352},[3348,3352,3356,3360,3364,3368],{"type":25,"tag":209,"props":3349,"children":3350},{"class":2256},[3351],{"type":30,"value":1577},{"type":25,"tag":209,"props":3353,"children":3354},{"class":2262},[3355],{"type":30,"value":2201},{"type":25,"tag":209,"props":3357,"children":3358},{"class":2256},[3359],{"type":30,"value":230},{"type":25,"tag":209,"props":3361,"children":3362},{"class":2298},[3363],{"type":30,"value":2301},{"type":25,"tag":209,"props":3365,"children":3366},{"class":2256},[3367],{"type":30,"value":230},{"type":25,"tag":209,"props":3369,"children":3370},{"class":2308},[3371],{"type":30,"value":2402},{"type":25,"tag":209,"props":3373,"children":3374},{"class":211,"line":361},[3375,3379,3383,3387,3391],{"type":25,"tag":209,"props":3376,"children":3377},{"class":2256},[3378],{"type":30,"value":1577},{"type":25,"tag":209,"props":3380,"children":3381},{"class":2281},[3382],{"type":30,"value":2414},{"type":25,"tag":209,"props":3384,"children":3385},{"class":2256},[3386],{"type":30,"value":230},{"type":25,"tag":209,"props":3388,"children":3389},{"class":2365},[3390],{"type":30,"value":2720},{"type":25,"tag":209,"props":3392,"children":3393},{"class":2256},[3394],{"type":30,"value":2474},{"type":25,"tag":209,"props":3396,"children":3397},{"class":211,"line":370},[3398,3402,3406,3410,3414,3418,3422,3426,3430,3434,3438],{"type":25,"tag":209,"props":3399,"children":3400},{"class":2256},[3401],{"type":30,"value":1577},{"type":25,"tag":209,"props":3403,"children":3404},{"class":2281},[3405],{"type":30,"value":2434},{"type":25,"tag":209,"props":3407,"children":3408},{"class":2256},[3409],{"type":30,"value":230},{"type":25,"tag":209,"props":3411,"children":3412},{"class":2441},[3413],{"type":30,"value":2444},{"type":25,"tag":209,"props":3415,"children":3416},{"class":2256},[3417],{"type":30,"value":230},{"type":25,"tag":209,"props":3419,"children":3420},{"class":2298},[3421],{"type":30,"value":2301},{"type":25,"tag":209,"props":3423,"children":3424},{"class":2256},[3425],{"type":30,"value":230},{"type":25,"tag":209,"props":3427,"children":3428},{"class":2441},[3429],{"type":30,"value":25},{"type":25,"tag":209,"props":3431,"children":3432},{"class":2256},[3433],{"type":30,"value":326},{"type":25,"tag":209,"props":3435,"children":3436},{"class":2365},[3437],{"type":30,"value":2469},{"type":25,"tag":209,"props":3439,"children":3440},{"class":2256},[3441],{"type":30,"value":2474},{"type":25,"tag":209,"props":3443,"children":3444},{"class":211,"line":379},[3445,3449,3453,3457,3461,3465,3469],{"type":25,"tag":209,"props":3446,"children":3447},{"class":2256},[3448],{"type":30,"value":1577},{"type":25,"tag":209,"props":3450,"children":3451},{"class":2441},[3452],{"type":30,"value":2486},{"type":25,"tag":209,"props":3454,"children":3455},{"class":2256},[3456],{"type":30,"value":326},{"type":25,"tag":209,"props":3458,"children":3459},{"class":2365},[3460],{"type":30,"value":2495},{"type":25,"tag":209,"props":3462,"children":3463},{"class":2256},[3464],{"type":30,"value":1853},{"type":25,"tag":209,"props":3466,"children":3467},{"class":2262},[3468],{"type":30,"value":2444},{"type":25,"tag":209,"props":3470,"children":3471},{"class":2256},[3472],{"type":30,"value":2508},{"type":25,"tag":209,"props":3474,"children":3475},{"class":211,"line":388},[3476],{"type":25,"tag":209,"props":3477,"children":3478},{"class":2256},[3479],{"type":30,"value":1630},{"type":25,"tag":538,"props":3481,"children":3483},{"id":3482},"zero-ms-timeout",[3484],{"type":30,"value":3485},"Zero ms Timeout",{"type":25,"tag":26,"props":3487,"children":3488},{},[3489,3491,3496],{"type":30,"value":3490},"Usually, it's enough to push the next step of execution to the end of the event loop. And that is one thing a zero-ms ",{"type":25,"tag":33,"props":3492,"children":3493},{},[3494],{"type":30,"value":3495},"setTimeout",{"type":30,"value":3497}," is often used for.",{"type":25,"tag":460,"props":3499,"children":3500},{},[3501,3510],{"type":25,"tag":26,"props":3502,"children":3503},{},[3504,3508],{"type":25,"tag":33,"props":3505,"children":3506},{},[3507],{"type":30,"value":3495},{"type":30,"value":3509}," is generally less safe than framework-specific functions and, depending on the scenario, it can make the code unstable, but if you're using a framework (or library) that doesn't have a dedicated \"tick\" function, you might have no other choice but to utilize timeouts in this type of situations.",{"type":25,"tag":26,"props":3511,"children":3512},{},[3513,3515,3520,3522,3527],{"type":30,"value":3514},"Not to worry though: using timeouts ",{"type":25,"tag":41,"props":3516,"children":3517},{},[3518],{"type":30,"value":3519},"with 0 ms delay",{"type":30,"value":3521}," is not considered a bad practice, because it doesn't offset the callback by some ",{"type":25,"tag":41,"props":3523,"children":3524},{},[3525],{"type":30,"value":3526},"magic time period",{"type":30,"value":3528},", but instead simply offsets it until the next event loop.",{"type":25,"tag":26,"props":3530,"children":3531},{},[3532],{"type":30,"value":3533},"Here's an example of how one could implement the timeout in our first example to achieve the same behavior:",{"type":25,"tag":195,"props":3535,"children":3537},{"code":3536,"language":2127,"meta":199},"async function main() {\n  show = true\n  setTimeout(() => {\n    const rect = element.getBoundingClientRect()\n    console.log(rect)\n  })\n}\n",[3538],{"type":25,"tag":202,"props":3539,"children":3540},{},[3541],{"type":25,"tag":195,"props":3542,"children":3543},{"__ignoreMap":8},[3544,3571,3598,3623,3670,3701,3709],{"type":25,"tag":209,"props":3545,"children":3546},{"class":211,"line":212},[3547,3551,3555,3559,3563,3567],{"type":25,"tag":209,"props":3548,"children":3549},{"class":2281},[3550],{"type":30,"value":2350},{"type":25,"tag":209,"props":3552,"children":3553},{"class":2256},[3554],{"type":30,"value":230},{"type":25,"tag":209,"props":3556,"children":3557},{"class":2281},[3558],{"type":30,"value":1838},{"type":25,"tag":209,"props":3560,"children":3561},{"class":2256},[3562],{"type":30,"value":230},{"type":25,"tag":209,"props":3564,"children":3565},{"class":2365},[3566],{"type":30,"value":2368},{"type":25,"tag":209,"props":3568,"children":3569},{"class":2256},[3570],{"type":30,"value":2373},{"type":25,"tag":209,"props":3572,"children":3573},{"class":211,"line":352},[3574,3578,3582,3586,3590,3594],{"type":25,"tag":209,"props":3575,"children":3576},{"class":2256},[3577],{"type":30,"value":1577},{"type":25,"tag":209,"props":3579,"children":3580},{"class":2262},[3581],{"type":30,"value":2201},{"type":25,"tag":209,"props":3583,"children":3584},{"class":2256},[3585],{"type":30,"value":230},{"type":25,"tag":209,"props":3587,"children":3588},{"class":2298},[3589],{"type":30,"value":2301},{"type":25,"tag":209,"props":3591,"children":3592},{"class":2256},[3593],{"type":30,"value":230},{"type":25,"tag":209,"props":3595,"children":3596},{"class":2308},[3597],{"type":30,"value":2402},{"type":25,"tag":209,"props":3599,"children":3600},{"class":211,"line":361},[3601,3605,3609,3614,3619],{"type":25,"tag":209,"props":3602,"children":3603},{"class":2256},[3604],{"type":30,"value":1577},{"type":25,"tag":209,"props":3606,"children":3607},{"class":2365},[3608],{"type":30,"value":3495},{"type":25,"tag":209,"props":3610,"children":3611},{"class":2256},[3612],{"type":30,"value":3613},"(() ",{"type":25,"tag":209,"props":3615,"children":3616},{"class":2281},[3617],{"type":30,"value":3618},"=>",{"type":25,"tag":209,"props":3620,"children":3621},{"class":2256},[3622],{"type":30,"value":1569},{"type":25,"tag":209,"props":3624,"children":3625},{"class":211,"line":370},[3626,3630,3634,3638,3642,3646,3650,3654,3658,3662,3666],{"type":25,"tag":209,"props":3627,"children":3628},{"class":2256},[3629],{"type":30,"value":2278},{"type":25,"tag":209,"props":3631,"children":3632},{"class":2281},[3633],{"type":30,"value":2434},{"type":25,"tag":209,"props":3635,"children":3636},{"class":2256},[3637],{"type":30,"value":230},{"type":25,"tag":209,"props":3639,"children":3640},{"class":2441},[3641],{"type":30,"value":2444},{"type":25,"tag":209,"props":3643,"children":3644},{"class":2256},[3645],{"type":30,"value":230},{"type":25,"tag":209,"props":3647,"children":3648},{"class":2298},[3649],{"type":30,"value":2301},{"type":25,"tag":209,"props":3651,"children":3652},{"class":2256},[3653],{"type":30,"value":230},{"type":25,"tag":209,"props":3655,"children":3656},{"class":2441},[3657],{"type":30,"value":25},{"type":25,"tag":209,"props":3659,"children":3660},{"class":2256},[3661],{"type":30,"value":326},{"type":25,"tag":209,"props":3663,"children":3664},{"class":2365},[3665],{"type":30,"value":2469},{"type":25,"tag":209,"props":3667,"children":3668},{"class":2256},[3669],{"type":30,"value":2474},{"type":25,"tag":209,"props":3671,"children":3672},{"class":211,"line":379},[3673,3677,3681,3685,3689,3693,3697],{"type":25,"tag":209,"props":3674,"children":3675},{"class":2256},[3676],{"type":30,"value":2278},{"type":25,"tag":209,"props":3678,"children":3679},{"class":2441},[3680],{"type":30,"value":2486},{"type":25,"tag":209,"props":3682,"children":3683},{"class":2256},[3684],{"type":30,"value":326},{"type":25,"tag":209,"props":3686,"children":3687},{"class":2365},[3688],{"type":30,"value":2495},{"type":25,"tag":209,"props":3690,"children":3691},{"class":2256},[3692],{"type":30,"value":1853},{"type":25,"tag":209,"props":3694,"children":3695},{"class":2262},[3696],{"type":30,"value":2444},{"type":25,"tag":209,"props":3698,"children":3699},{"class":2256},[3700],{"type":30,"value":2508},{"type":25,"tag":209,"props":3702,"children":3703},{"class":211,"line":388},[3704],{"type":25,"tag":209,"props":3705,"children":3706},{"class":2256},[3707],{"type":30,"value":3708},"  })\n",{"type":25,"tag":209,"props":3710,"children":3711},{"class":211,"line":397},[3712],{"type":25,"tag":209,"props":3713,"children":3714},{"class":2256},[3715],{"type":30,"value":1630},{"type":25,"tag":538,"props":3717,"children":3719},{"id":3718},"explicit-instantly-resolving-promise",[3720],{"type":30,"value":3721},"Explicit Instantly Resolving Promise",{"type":25,"tag":26,"props":3723,"children":3724},{},[3725,3727,3732,3734,3739],{"type":30,"value":3726},"This approach does ",{"type":25,"tag":103,"props":3728,"children":3729},{},[3730],{"type":30,"value":3731},"exactly the same thing",{"type":30,"value":3733}," as the initial example, but ",{"type":25,"tag":41,"props":3735,"children":3736},{},[3737],{"type":30,"value":3738},"without the implicit Promise conversion",{"type":30,"value":3740}," which leaves the readers of such code scratching their heads thinking they're looking at some voodoo magic (and then writing blog posts about it haha).",{"type":25,"tag":26,"props":3742,"children":3743},{},[3744,3746,3751],{"type":30,"value":3745},"Instead, it relies on the same functionality but coded explicitly with ",{"type":25,"tag":33,"props":3747,"children":3748},{},[3749],{"type":30,"value":3750},"Promise.resolve()",{"type":30,"value":978},{"type":25,"tag":195,"props":3753,"children":3755},{"code":3754,"language":2127,"meta":199},"async function main() {\n  show = true\n  await Promise.resolve()\n  const rect = element.getBoundingClientRect()\n  console.log(rect)\n}\n",[3756],{"type":25,"tag":202,"props":3757,"children":3758},{},[3759],{"type":25,"tag":195,"props":3760,"children":3761},{"__ignoreMap":8},[3762,3789,3816,3849,3896,3927],{"type":25,"tag":209,"props":3763,"children":3764},{"class":211,"line":212},[3765,3769,3773,3777,3781,3785],{"type":25,"tag":209,"props":3766,"children":3767},{"class":2281},[3768],{"type":30,"value":2350},{"type":25,"tag":209,"props":3770,"children":3771},{"class":2256},[3772],{"type":30,"value":230},{"type":25,"tag":209,"props":3774,"children":3775},{"class":2281},[3776],{"type":30,"value":1838},{"type":25,"tag":209,"props":3778,"children":3779},{"class":2256},[3780],{"type":30,"value":230},{"type":25,"tag":209,"props":3782,"children":3783},{"class":2365},[3784],{"type":30,"value":2368},{"type":25,"tag":209,"props":3786,"children":3787},{"class":2256},[3788],{"type":30,"value":2373},{"type":25,"tag":209,"props":3790,"children":3791},{"class":211,"line":352},[3792,3796,3800,3804,3808,3812],{"type":25,"tag":209,"props":3793,"children":3794},{"class":2256},[3795],{"type":30,"value":1577},{"type":25,"tag":209,"props":3797,"children":3798},{"class":2262},[3799],{"type":30,"value":2201},{"type":25,"tag":209,"props":3801,"children":3802},{"class":2256},[3803],{"type":30,"value":230},{"type":25,"tag":209,"props":3805,"children":3806},{"class":2298},[3807],{"type":30,"value":2301},{"type":25,"tag":209,"props":3809,"children":3810},{"class":2256},[3811],{"type":30,"value":230},{"type":25,"tag":209,"props":3813,"children":3814},{"class":2308},[3815],{"type":30,"value":2402},{"type":25,"tag":209,"props":3817,"children":3818},{"class":211,"line":361},[3819,3823,3827,3831,3836,3840,3845],{"type":25,"tag":209,"props":3820,"children":3821},{"class":2256},[3822],{"type":30,"value":1577},{"type":25,"tag":209,"props":3824,"children":3825},{"class":2281},[3826],{"type":30,"value":2414},{"type":25,"tag":209,"props":3828,"children":3829},{"class":2256},[3830],{"type":30,"value":230},{"type":25,"tag":209,"props":3832,"children":3833},{"class":2441},[3834],{"type":30,"value":3835},"Promise",{"type":25,"tag":209,"props":3837,"children":3838},{"class":2256},[3839],{"type":30,"value":326},{"type":25,"tag":209,"props":3841,"children":3842},{"class":2365},[3843],{"type":30,"value":3844},"resolve",{"type":25,"tag":209,"props":3846,"children":3847},{"class":2256},[3848],{"type":30,"value":2474},{"type":25,"tag":209,"props":3850,"children":3851},{"class":211,"line":370},[3852,3856,3860,3864,3868,3872,3876,3880,3884,3888,3892],{"type":25,"tag":209,"props":3853,"children":3854},{"class":2256},[3855],{"type":30,"value":1577},{"type":25,"tag":209,"props":3857,"children":3858},{"class":2281},[3859],{"type":30,"value":2434},{"type":25,"tag":209,"props":3861,"children":3862},{"class":2256},[3863],{"type":30,"value":230},{"type":25,"tag":209,"props":3865,"children":3866},{"class":2441},[3867],{"type":30,"value":2444},{"type":25,"tag":209,"props":3869,"children":3870},{"class":2256},[3871],{"type":30,"value":230},{"type":25,"tag":209,"props":3873,"children":3874},{"class":2298},[3875],{"type":30,"value":2301},{"type":25,"tag":209,"props":3877,"children":3878},{"class":2256},[3879],{"type":30,"value":230},{"type":25,"tag":209,"props":3881,"children":3882},{"class":2441},[3883],{"type":30,"value":25},{"type":25,"tag":209,"props":3885,"children":3886},{"class":2256},[3887],{"type":30,"value":326},{"type":25,"tag":209,"props":3889,"children":3890},{"class":2365},[3891],{"type":30,"value":2469},{"type":25,"tag":209,"props":3893,"children":3894},{"class":2256},[3895],{"type":30,"value":2474},{"type":25,"tag":209,"props":3897,"children":3898},{"class":211,"line":379},[3899,3903,3907,3911,3915,3919,3923],{"type":25,"tag":209,"props":3900,"children":3901},{"class":2256},[3902],{"type":30,"value":1577},{"type":25,"tag":209,"props":3904,"children":3905},{"class":2441},[3906],{"type":30,"value":2486},{"type":25,"tag":209,"props":3908,"children":3909},{"class":2256},[3910],{"type":30,"value":326},{"type":25,"tag":209,"props":3912,"children":3913},{"class":2365},[3914],{"type":30,"value":2495},{"type":25,"tag":209,"props":3916,"children":3917},{"class":2256},[3918],{"type":30,"value":1853},{"type":25,"tag":209,"props":3920,"children":3921},{"class":2262},[3922],{"type":30,"value":2444},{"type":25,"tag":209,"props":3924,"children":3925},{"class":2256},[3926],{"type":30,"value":2508},{"type":25,"tag":209,"props":3928,"children":3929},{"class":211,"line":388},[3930],{"type":25,"tag":209,"props":3931,"children":3932},{"class":2256},[3933],{"type":30,"value":1630},{"type":25,"tag":178,"props":3935,"children":3936},{"id":1433},[3937],{"type":30,"value":1436},{"type":25,"tag":26,"props":3939,"children":3940},{},[3941,3943,3947,3949,3954,3955,3959],{"type":30,"value":3942},"In summary, while the unconventional use of ",{"type":25,"tag":33,"props":3944,"children":3945},{},[3946],{"type":30,"value":2414},{"type":30,"value":3948}," with primitive values might be a fascinating \"gotcha\" to explore, it's generally recommended to favor clear and straightforward coding practices. Utilizing established techniques like ",{"type":25,"tag":33,"props":3950,"children":3951},{},[3952],{"type":30,"value":3953},"setTimeout()",{"type":30,"value":484},{"type":25,"tag":33,"props":3956,"children":3957},{},[3958],{"type":30,"value":3750},{"type":30,"value":3960}," ensures that your code remains comprehensible and maintainable when dealing with asynchronous operations.",{"type":25,"tag":26,"props":3962,"children":3963},{},[3964],{"type":30,"value":3965},"Sometimes the way certain things are coded may get mixed with an implicit behavior in such way, that the result makes it seem like there's some black magic involved. But in the end there's always a rational explanation and an improvement to be made to avoid such complexities in the future.",{"type":25,"tag":26,"props":3967,"children":3968},{},[3969],{"type":30,"value":3970},"Don't believe everything that you see, and happy coding!",{"type":25,"tag":1479,"children":3972},[3973],{"type":30,"value":3974},".ct-74d613{color:#D19A66}\n.ct-24e83a{color:#7F848E}\n.ct-8da4fa{color:#98C379}\n.ct-b61278{color:#56B6C2}\n.ct-419fc5{color:#E5C07B}\n.ct-f75423{color:#61AFEF}\n.ct-5f6a8a{color:#E06C75}\n.ct-1369be{color:#ABB2BF}\n.ct-336583{color:#C678DD}",{"title":8,"searchDepth":352,"depth":352,"links":3976},[3977,3978,3979,3980,3985],{"id":2776,"depth":352,"text":2779},{"id":3133,"depth":352,"text":3136},{"id":3218,"depth":352,"text":3221},{"id":3264,"depth":352,"text":3267,"children":3981},[3982,3983,3984],{"id":3275,"depth":361,"text":3278},{"id":3482,"depth":361,"text":3485},{"id":3718,"depth":361,"text":3721},{"id":1433,"depth":352,"text":1436},"content:blog:await-primitive.md","blog/await-primitive.md",{"_path":3989,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":3990,"description":3991,"date":3992,"tags":3993,"readingTime":3995,"body":4000,"_type":1500,"_id":13075,"_source":1502,"_file":13076,"_extension":1504},"/blog/extending-components","Extending Components: Inheritance instead of Props","Hello fellow programmers!",1685898000000,[1511,3994],"long",{"text":3996,"minutes":3997,"time":3998,"words":3999},"19 min read",18.995,1139700,3799,{"type":22,"children":4001,"toc":13037},[4002,4006,4011,4016,4019,4024,4029,4035,4040,4058,4064,4076,4094,4099,4132,4150,4155,4160,4166,4174,4179,4190,4195,4200,4206,4211,4224,4229,4311,4328,4339,4526,4544,4549,4554,4560,4565,5004,5009,5017,5022,5040,5046,5051,5504,5509,5532,5537,5542,5548,5553,5559,5564,5572,5583,5588,5601,5606,5612,5617,5622,5627,5709,5731,5742,5884,5896,5902,5907,5912,5917,5922,6324,6329,6340,6557,6569,6574,6579,6584,6676,6682,6687,6692,6697,6708,6714,6719,6727,6738,6750,6755,6768,6773,6861,6866,6878,7102,7107,7112,7117,7122,7554,7559,7564,7770,7775,7780,7785,8083,8088,8093,8098,8104,8109,8114,8119,8125,8130,8135,8140,9226,9238,9243,9254,9281,9286,9292,9297,9302,9535,9546,9562,9567,9573,9578,10033,10049,10066,10071,10077,10082,10375,10386,10392,10397,10646,10651,10657,10662,10667,10701,10706,10712,10717,10722,10733,10739,10744,10749,10994,10999,11004,11009,11014,11019,11025,11030,11035,11040,11420,11425,11430,11436,11441,11815,11820,11839,11844,12005,12010,12021,12039,12044,12050,12055,12257,12268,12273,12361,12366,12372,12376,12563,12573,12578,12583,12925,12930,12935,12940,12945,12949,12954,12959,12964,12970,12979,12985,12992,12997,13018,13023,13028,13033],{"type":25,"tag":26,"props":4003,"children":4004},{},[4005],{"type":30,"value":3991},{"type":25,"tag":26,"props":4007,"children":4008},{},[4009],{"type":30,"value":4010},"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":25,"tag":26,"props":4012,"children":4013},{},[4014],{"type":30,"value":4015},"This approach has proven to be especially useful when working with medium-large size components.",{"type":25,"tag":622,"props":4017,"children":4018},{},[],{"type":25,"tag":26,"props":4020,"children":4021},{},[4022],{"type":30,"value":4023},"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":25,"tag":26,"props":4025,"children":4026},{},[4027],{"type":30,"value":4028},"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":25,"tag":178,"props":4030,"children":4032},{"id":4031},"the-problem",[4033],{"type":30,"value":4034},"The Problem",{"type":25,"tag":26,"props":4036,"children":4037},{},[4038],{"type":30,"value":4039},"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":25,"tag":133,"props":4041,"children":4042},{},[4043,4048,4053],{"type":25,"tag":137,"props":4044,"children":4045},{},[4046],{"type":30,"value":4047},"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":25,"tag":137,"props":4049,"children":4050},{},[4051],{"type":30,"value":4052},"Handling all variations in a single component can bloat it, making it less readable and harder to maintain.",{"type":25,"tag":137,"props":4054,"children":4055},{},[4056],{"type":30,"value":4057},"If the component has too many conditionals, it might impact rendering performance, especially if it's frequently re-rendered.",{"type":25,"tag":178,"props":4059,"children":4061},{"id":4060},"the-solution",[4062],{"type":30,"value":4063},"The Solution",{"type":25,"tag":26,"props":4065,"children":4066},{},[4067,4069,4074],{"type":30,"value":4068},"Utilize inheritance principals by creating a Base component (which contains all the functionality ",{"type":25,"tag":41,"props":4070,"children":4071},{},[4072],{"type":30,"value":4073},"common",{"type":30,"value":4075}," for all the component variations) and extending it with other derived components - a component per variation.",{"type":25,"tag":26,"props":4077,"children":4078},{},[4079,4081,4086,4088,4093],{"type":30,"value":4080},"These \"child\" components should extend the Base component with functionality specific to their case, contributing to the ",{"type":25,"tag":103,"props":4082,"children":4083},{},[4084],{"type":30,"value":4085},"Separation of Concerns",{"type":30,"value":4087}," and ",{"type":25,"tag":103,"props":4089,"children":4090},{},[4091],{"type":30,"value":4092},"maintainability",{"type":30,"value":326},{"type":25,"tag":26,"props":4095,"children":4096},{},[4097],{"type":30,"value":4098},"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":25,"tag":460,"props":4100,"children":4101},{},[4102,4114],{"type":25,"tag":26,"props":4103,"children":4104},{},[4105,4107,4112],{"type":30,"value":4106},"I should mention that this is absolutely ",{"type":25,"tag":41,"props":4108,"children":4109},{},[4110],{"type":30,"value":4111},"not",{"type":30,"value":4113}," 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":25,"tag":26,"props":4115,"children":4116},{},[4117,4119,4124,4125,4130],{"type":30,"value":4118},"It probably won't be worth it creating separate ",{"type":25,"tag":33,"props":4120,"children":4121},{},[4122],{"type":30,"value":4123},"PrimaryButton",{"type":30,"value":4087},{"type":25,"tag":33,"props":4126,"children":4127},{},[4128],{"type":30,"value":4129},"SecondaryButton",{"type":30,"value":4131}," 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":25,"tag":26,"props":4133,"children":4134},{},[4135,4137,4142,4144,4149],{"type":30,"value":4136},"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":25,"tag":103,"props":4138,"children":4139},{},[4140],{"type":30,"value":4141},"hybrid",{"type":30,"value":4143}," mode anyway. ",{"type":25,"tag":41,"props":4145,"children":4146},{},[4147],{"type":30,"value":4148},"There will be some components that play better with props, others that benefit from inheritance",{"type":30,"value":326},{"type":25,"tag":26,"props":4151,"children":4152},{},[4153],{"type":30,"value":4154},"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":25,"tag":26,"props":4156,"children":4157},{},[4158],{"type":30,"value":4159},"If you're interested to learn more about this approach with examples and code snippets - keep reading!",{"type":25,"tag":178,"props":4161,"children":4163},{"id":4162},"example-app",[4164],{"type":30,"value":4165},"Example app",{"type":25,"tag":26,"props":4167,"children":4168},{},[4169],{"type":25,"tag":69,"props":4170,"children":4173},{"alt":4171,"src":4172},"example app first stage","/blog/extend-components/example-1.png",[],{"type":25,"tag":26,"props":4175,"children":4176},{},[4177],{"type":30,"value":4178},"In this example app we're displaying the cards which represent the contents of some hypothetical user inventory.",{"type":25,"tag":26,"props":4180,"children":4181},{},[4182,4184,4189],{"type":30,"value":4183},"Right now the only item type that the user can have is a ",{"type":25,"tag":41,"props":4185,"children":4186},{},[4187],{"type":30,"value":4188},"pet",{"type":30,"value":326},{"type":25,"tag":26,"props":4191,"children":4192},{},[4193],{"type":30,"value":4194},"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":25,"tag":26,"props":4196,"children":4197},{},[4198],{"type":30,"value":4199},"It also shows an \"is fed\" label up top.",{"type":25,"tag":538,"props":4201,"children":4203},{"id":4202},"iteration-1",[4204],{"type":30,"value":4205},"Iteration 1",{"type":25,"tag":26,"props":4207,"children":4208},{},[4209],{"type":30,"value":4210},"Let's see what the code for this component looks like.",{"type":25,"tag":460,"props":4212,"children":4213},{},[4214,4219],{"type":25,"tag":26,"props":4215,"children":4216},{},[4217],{"type":30,"value":4218},"I'm using Vue for this example code, but the concept applies to any frontend framework or library.",{"type":25,"tag":26,"props":4220,"children":4221},{},[4222],{"type":30,"value":4223},"If you're not familiar with the Vue syntax, don't worry as I will explain everything in detail line by line.",{"type":25,"tag":26,"props":4225,"children":4226},{},[4227],{"type":30,"value":4228},"First we declare component props, which in Vue looks like this:",{"type":25,"tag":195,"props":4230,"children":4232},{"code":4231,"language":1537,"meta":199},"const props = defineProps\u003C{\n  pet: Pet\n}>()\n",[4233],{"type":25,"tag":202,"props":4234,"children":4235},{},[4236],{"type":25,"tag":195,"props":4237,"children":4238},{"__ignoreMap":8},[4239,4282,4303],{"type":25,"tag":209,"props":4240,"children":4241},{"class":211,"line":212},[4242,4247,4252,4258,4262,4267,4271,4277],{"type":25,"tag":209,"props":4243,"children":4245},{"class":4244},"ct-998f3d",[4246],{"type":30,"value":2434},{"type":25,"tag":209,"props":4248,"children":4250},{"class":4249},"ct-ead73c",[4251],{"type":30,"value":230},{"type":25,"tag":209,"props":4253,"children":4255},{"class":4254},"ct-897917",[4256],{"type":30,"value":4257},"props",{"type":25,"tag":209,"props":4259,"children":4260},{"class":4249},[4261],{"type":30,"value":230},{"type":25,"tag":209,"props":4263,"children":4265},{"class":4264},"ct-5bb0b0",[4266],{"type":30,"value":2301},{"type":25,"tag":209,"props":4268,"children":4269},{"class":4249},[4270],{"type":30,"value":230},{"type":25,"tag":209,"props":4272,"children":4274},{"class":4273},"ct-b9eb20",[4275],{"type":30,"value":4276},"defineProps",{"type":25,"tag":209,"props":4278,"children":4279},{"class":4249},[4280],{"type":30,"value":4281},"\u003C{\n",{"type":25,"tag":209,"props":4283,"children":4284},{"class":211,"line":352},[4285,4289,4294,4298],{"type":25,"tag":209,"props":4286,"children":4287},{"class":4249},[4288],{"type":30,"value":1577},{"type":25,"tag":209,"props":4290,"children":4292},{"class":4291},"ct-c69d28",[4293],{"type":30,"value":4188},{"type":25,"tag":209,"props":4295,"children":4296},{"class":4249},[4297],{"type":30,"value":1593},{"type":25,"tag":209,"props":4299,"children":4300},{"class":4254},[4301],{"type":30,"value":4302},"Pet\n",{"type":25,"tag":209,"props":4304,"children":4305},{"class":211,"line":361},[4306],{"type":25,"tag":209,"props":4307,"children":4308},{"class":4249},[4309],{"type":30,"value":4310},"}>()",{"type":25,"tag":26,"props":4312,"children":4313},{},[4314,4316,4320,4322,4327],{"type":30,"value":4315},"Our component exposes a single prop called ",{"type":25,"tag":33,"props":4317,"children":4318},{},[4319],{"type":30,"value":4188},{"type":30,"value":4321}," and it has a type of ",{"type":25,"tag":33,"props":4323,"children":4324},{},[4325],{"type":30,"value":4326},"Pet",{"type":30,"value":326},{"type":25,"tag":26,"props":4329,"children":4330},{},[4331,4333,4337],{"type":30,"value":4332},"And here's the expanded ",{"type":25,"tag":33,"props":4334,"children":4335},{},[4336],{"type":30,"value":4326},{"type":30,"value":4338}," type that we're using:",{"type":25,"tag":195,"props":4340,"children":4342},{"code":4341,"language":1537,"meta":199},"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",[4343],{"type":25,"tag":202,"props":4344,"children":4345},{},[4346],{"type":25,"tag":195,"props":4347,"children":4348},{"__ignoreMap":8},[4349,4377,4398,4418,4438,4459,4479,4499,4519],{"type":25,"tag":209,"props":4350,"children":4351},{"class":211,"line":212},[4352,4357,4361,4365,4369,4373],{"type":25,"tag":209,"props":4353,"children":4354},{"class":4244},[4355],{"type":30,"value":4356},"type",{"type":25,"tag":209,"props":4358,"children":4359},{"class":4249},[4360],{"type":30,"value":230},{"type":25,"tag":209,"props":4362,"children":4363},{"class":4254},[4364],{"type":30,"value":4326},{"type":25,"tag":209,"props":4366,"children":4367},{"class":4249},[4368],{"type":30,"value":230},{"type":25,"tag":209,"props":4370,"children":4371},{"class":4264},[4372],{"type":30,"value":2301},{"type":25,"tag":209,"props":4374,"children":4375},{"class":4249},[4376],{"type":30,"value":1569},{"type":25,"tag":209,"props":4378,"children":4379},{"class":211,"line":352},[4380,4384,4388,4392],{"type":25,"tag":209,"props":4381,"children":4382},{"class":4249},[4383],{"type":30,"value":1577},{"type":25,"tag":209,"props":4385,"children":4386},{"class":4291},[4387],{"type":30,"value":4356},{"type":25,"tag":209,"props":4389,"children":4390},{"class":4249},[4391],{"type":30,"value":1593},{"type":25,"tag":209,"props":4393,"children":4395},{"class":4394},"ct-39e230",[4396],{"type":30,"value":4397},"'pet'\n",{"type":25,"tag":209,"props":4399,"children":4400},{"class":211,"line":361},[4401,4405,4410,4414],{"type":25,"tag":209,"props":4402,"children":4403},{"class":4249},[4404],{"type":30,"value":1577},{"type":25,"tag":209,"props":4406,"children":4407},{"class":4291},[4408],{"type":30,"value":4409},"pictureUrl",{"type":25,"tag":209,"props":4411,"children":4412},{"class":4249},[4413],{"type":30,"value":1593},{"type":25,"tag":209,"props":4415,"children":4416},{"class":4254},[4417],{"type":30,"value":1794},{"type":25,"tag":209,"props":4419,"children":4420},{"class":211,"line":370},[4421,4425,4430,4434],{"type":25,"tag":209,"props":4422,"children":4423},{"class":4249},[4424],{"type":30,"value":1577},{"type":25,"tag":209,"props":4426,"children":4427},{"class":4291},[4428],{"type":30,"value":4429},"name",{"type":25,"tag":209,"props":4431,"children":4432},{"class":4249},[4433],{"type":30,"value":1593},{"type":25,"tag":209,"props":4435,"children":4436},{"class":4254},[4437],{"type":30,"value":1794},{"type":25,"tag":209,"props":4439,"children":4440},{"class":211,"line":379},[4441,4445,4450,4454],{"type":25,"tag":209,"props":4442,"children":4443},{"class":4249},[4444],{"type":30,"value":1577},{"type":25,"tag":209,"props":4446,"children":4447},{"class":4291},[4448],{"type":30,"value":4449},"happiness",{"type":25,"tag":209,"props":4451,"children":4452},{"class":4249},[4453],{"type":30,"value":1593},{"type":25,"tag":209,"props":4455,"children":4456},{"class":4254},[4457],{"type":30,"value":4458},"number\n",{"type":25,"tag":209,"props":4460,"children":4461},{"class":211,"line":388},[4462,4466,4471,4475],{"type":25,"tag":209,"props":4463,"children":4464},{"class":4249},[4465],{"type":30,"value":1577},{"type":25,"tag":209,"props":4467,"children":4468},{"class":4291},[4469],{"type":30,"value":4470},"maxHappiness",{"type":25,"tag":209,"props":4472,"children":4473},{"class":4249},[4474],{"type":30,"value":1593},{"type":25,"tag":209,"props":4476,"children":4477},{"class":4254},[4478],{"type":30,"value":4458},{"type":25,"tag":209,"props":4480,"children":4481},{"class":211,"line":397},[4482,4486,4491,4495],{"type":25,"tag":209,"props":4483,"children":4484},{"class":4249},[4485],{"type":30,"value":1577},{"type":25,"tag":209,"props":4487,"children":4488},{"class":4291},[4489],{"type":30,"value":4490},"mood",{"type":25,"tag":209,"props":4492,"children":4493},{"class":4249},[4494],{"type":30,"value":1593},{"type":25,"tag":209,"props":4496,"children":4497},{"class":4254},[4498],{"type":30,"value":1794},{"type":25,"tag":209,"props":4500,"children":4501},{"class":211,"line":1896},[4502,4506,4511,4515],{"type":25,"tag":209,"props":4503,"children":4504},{"class":4249},[4505],{"type":30,"value":1577},{"type":25,"tag":209,"props":4507,"children":4508},{"class":4291},[4509],{"type":30,"value":4510},"lastFed",{"type":25,"tag":209,"props":4512,"children":4513},{"class":4249},[4514],{"type":30,"value":1593},{"type":25,"tag":209,"props":4516,"children":4517},{"class":4254},[4518],{"type":30,"value":4458},{"type":25,"tag":209,"props":4520,"children":4521},{"class":211,"line":1918},[4522],{"type":25,"tag":209,"props":4523,"children":4524},{"class":4249},[4525],{"type":30,"value":1630},{"type":25,"tag":26,"props":4527,"children":4528},{},[4529,4531,4535,4537,4542],{"type":30,"value":4530},"It decares the ",{"type":25,"tag":33,"props":4532,"children":4533},{},[4534],{"type":30,"value":4356},{"type":30,"value":4536}," field with a literal string type of ",{"type":25,"tag":33,"props":4538,"children":4539},{},[4540],{"type":30,"value":4541},"'pet'",{"type":30,"value":4543},". We can use this field to check what kind of item we're dealing with.",{"type":25,"tag":26,"props":4545,"children":4546},{},[4547],{"type":30,"value":4548},"As well it contains a picture URL for our pet, its name as well as some of its stats.",{"type":25,"tag":26,"props":4550,"children":4551},{},[4552],{"type":30,"value":4553},"Now that we're familiar with the data structure that we're dealing with, let's get back to our component.",{"type":25,"tag":538,"props":4555,"children":4557},{"id":4556},"the-script",[4558],{"type":30,"value":4559},"The Script:",{"type":25,"tag":26,"props":4561,"children":4562},{},[4563],{"type":30,"value":4564},"First, let's have a look at what's happening in the script:",{"type":25,"tag":195,"props":4566,"children":4568},{"code":4567,"language":1537,"meta":199},"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",[4569],{"type":25,"tag":202,"props":4570,"children":4571},{},[4572],{"type":25,"tag":195,"props":4573,"children":4574},{"__ignoreMap":8},[4575,4621,4676,4684,4691,4735,4826,4863,4870,4877,4922,4996],{"type":25,"tag":209,"props":4576,"children":4577},{"class":211,"line":212},[4578,4582,4586,4591,4595,4599,4603,4608,4612,4616],{"type":25,"tag":209,"props":4579,"children":4580},{"class":4244},[4581],{"type":30,"value":2434},{"type":25,"tag":209,"props":4583,"children":4584},{"class":4249},[4585],{"type":30,"value":230},{"type":25,"tag":209,"props":4587,"children":4588},{"class":4254},[4589],{"type":30,"value":4590},"imageStyle",{"type":25,"tag":209,"props":4592,"children":4593},{"class":4249},[4594],{"type":30,"value":230},{"type":25,"tag":209,"props":4596,"children":4597},{"class":4264},[4598],{"type":30,"value":2301},{"type":25,"tag":209,"props":4600,"children":4601},{"class":4249},[4602],{"type":30,"value":230},{"type":25,"tag":209,"props":4604,"children":4605},{"class":4273},[4606],{"type":30,"value":4607},"computed",{"type":25,"tag":209,"props":4609,"children":4610},{"class":4249},[4611],{"type":30,"value":3613},{"type":25,"tag":209,"props":4613,"children":4614},{"class":4244},[4615],{"type":30,"value":3618},{"type":25,"tag":209,"props":4617,"children":4618},{"class":4249},[4619],{"type":30,"value":4620}," ({\n",{"type":25,"tag":209,"props":4622,"children":4623},{"class":211,"line":352},[4624,4628,4633,4637,4642,4647,4651,4655,4659,4663,4667,4671],{"type":25,"tag":209,"props":4625,"children":4626},{"class":4249},[4627],{"type":30,"value":1577},{"type":25,"tag":209,"props":4629,"children":4630},{"class":4291},[4631],{"type":30,"value":4632},"backgroundImage",{"type":25,"tag":209,"props":4634,"children":4635},{"class":4249},[4636],{"type":30,"value":1593},{"type":25,"tag":209,"props":4638,"children":4639},{"class":4394},[4640],{"type":30,"value":4641},"`url(",{"type":25,"tag":209,"props":4643,"children":4644},{"class":4244},[4645],{"type":30,"value":4646},"${",{"type":25,"tag":209,"props":4648,"children":4649},{"class":4254},[4650],{"type":30,"value":4257},{"type":25,"tag":209,"props":4652,"children":4653},{"class":4249},[4654],{"type":30,"value":326},{"type":25,"tag":209,"props":4656,"children":4657},{"class":4254},[4658],{"type":30,"value":4188},{"type":25,"tag":209,"props":4660,"children":4661},{"class":4249},[4662],{"type":30,"value":326},{"type":25,"tag":209,"props":4664,"children":4665},{"class":4291},[4666],{"type":30,"value":4409},{"type":25,"tag":209,"props":4668,"children":4669},{"class":4244},[4670],{"type":30,"value":1630},{"type":25,"tag":209,"props":4672,"children":4673},{"class":4394},[4674],{"type":30,"value":4675},")`\n",{"type":25,"tag":209,"props":4677,"children":4678},{"class":211,"line":361},[4679],{"type":25,"tag":209,"props":4680,"children":4681},{"class":4249},[4682],{"type":30,"value":4683},"}))\n",{"type":25,"tag":209,"props":4685,"children":4686},{"class":211,"line":370},[4687],{"type":25,"tag":209,"props":4688,"children":4689},{},[4690],{"type":30,"value":1830},{"type":25,"tag":209,"props":4692,"children":4693},{"class":211,"line":379},[4694,4698,4702,4707,4711,4715,4719,4723,4727,4731],{"type":25,"tag":209,"props":4695,"children":4696},{"class":4244},[4697],{"type":30,"value":2434},{"type":25,"tag":209,"props":4699,"children":4700},{"class":4249},[4701],{"type":30,"value":230},{"type":25,"tag":209,"props":4703,"children":4704},{"class":4254},[4705],{"type":30,"value":4706},"stats",{"type":25,"tag":209,"props":4708,"children":4709},{"class":4249},[4710],{"type":30,"value":230},{"type":25,"tag":209,"props":4712,"children":4713},{"class":4264},[4714],{"type":30,"value":2301},{"type":25,"tag":209,"props":4716,"children":4717},{"class":4249},[4718],{"type":30,"value":230},{"type":25,"tag":209,"props":4720,"children":4721},{"class":4273},[4722],{"type":30,"value":4607},{"type":25,"tag":209,"props":4724,"children":4725},{"class":4249},[4726],{"type":30,"value":3613},{"type":25,"tag":209,"props":4728,"children":4729},{"class":4244},[4730],{"type":30,"value":3618},{"type":25,"tag":209,"props":4732,"children":4733},{"class":4249},[4734],{"type":30,"value":4620},{"type":25,"tag":209,"props":4736,"children":4737},{"class":211,"line":388},[4738,4742,4747,4751,4756,4760,4764,4768,4772,4776,4780,4784,4789,4793,4797,4801,4805,4809,4813,4817,4821],{"type":25,"tag":209,"props":4739,"children":4740},{"class":4249},[4741],{"type":30,"value":1577},{"type":25,"tag":209,"props":4743,"children":4744},{"class":4394},[4745],{"type":30,"value":4746},"'happiness'",{"type":25,"tag":209,"props":4748,"children":4749},{"class":4249},[4750],{"type":30,"value":1593},{"type":25,"tag":209,"props":4752,"children":4753},{"class":4394},[4754],{"type":30,"value":4755},"`",{"type":25,"tag":209,"props":4757,"children":4758},{"class":4244},[4759],{"type":30,"value":4646},{"type":25,"tag":209,"props":4761,"children":4762},{"class":4254},[4763],{"type":30,"value":4257},{"type":25,"tag":209,"props":4765,"children":4766},{"class":4249},[4767],{"type":30,"value":326},{"type":25,"tag":209,"props":4769,"children":4770},{"class":4254},[4771],{"type":30,"value":4188},{"type":25,"tag":209,"props":4773,"children":4774},{"class":4249},[4775],{"type":30,"value":326},{"type":25,"tag":209,"props":4777,"children":4778},{"class":4291},[4779],{"type":30,"value":4449},{"type":25,"tag":209,"props":4781,"children":4782},{"class":4244},[4783],{"type":30,"value":1630},{"type":25,"tag":209,"props":4785,"children":4786},{"class":4394},[4787],{"type":30,"value":4788},"/",{"type":25,"tag":209,"props":4790,"children":4791},{"class":4244},[4792],{"type":30,"value":4646},{"type":25,"tag":209,"props":4794,"children":4795},{"class":4254},[4796],{"type":30,"value":4257},{"type":25,"tag":209,"props":4798,"children":4799},{"class":4249},[4800],{"type":30,"value":326},{"type":25,"tag":209,"props":4802,"children":4803},{"class":4254},[4804],{"type":30,"value":4188},{"type":25,"tag":209,"props":4806,"children":4807},{"class":4249},[4808],{"type":30,"value":326},{"type":25,"tag":209,"props":4810,"children":4811},{"class":4291},[4812],{"type":30,"value":4470},{"type":25,"tag":209,"props":4814,"children":4815},{"class":4244},[4816],{"type":30,"value":1630},{"type":25,"tag":209,"props":4818,"children":4819},{"class":4394},[4820],{"type":30,"value":4755},{"type":25,"tag":209,"props":4822,"children":4823},{"class":4249},[4824],{"type":30,"value":4825},",\n",{"type":25,"tag":209,"props":4827,"children":4828},{"class":211,"line":397},[4829,4833,4838,4842,4846,4850,4854,4858],{"type":25,"tag":209,"props":4830,"children":4831},{"class":4249},[4832],{"type":30,"value":1577},{"type":25,"tag":209,"props":4834,"children":4835},{"class":4394},[4836],{"type":30,"value":4837},"'mood'",{"type":25,"tag":209,"props":4839,"children":4840},{"class":4249},[4841],{"type":30,"value":1593},{"type":25,"tag":209,"props":4843,"children":4844},{"class":4254},[4845],{"type":30,"value":4257},{"type":25,"tag":209,"props":4847,"children":4848},{"class":4249},[4849],{"type":30,"value":326},{"type":25,"tag":209,"props":4851,"children":4852},{"class":4254},[4853],{"type":30,"value":4188},{"type":25,"tag":209,"props":4855,"children":4856},{"class":4249},[4857],{"type":30,"value":326},{"type":25,"tag":209,"props":4859,"children":4860},{"class":4291},[4861],{"type":30,"value":4862},"mood\n",{"type":25,"tag":209,"props":4864,"children":4865},{"class":211,"line":1896},[4866],{"type":25,"tag":209,"props":4867,"children":4868},{"class":4249},[4869],{"type":30,"value":4683},{"type":25,"tag":209,"props":4871,"children":4872},{"class":211,"line":1918},[4873],{"type":25,"tag":209,"props":4874,"children":4875},{},[4876],{"type":30,"value":1830},{"type":25,"tag":209,"props":4878,"children":4879},{"class":211,"line":2511},[4880,4884,4888,4893,4897,4901,4905,4909,4913,4917],{"type":25,"tag":209,"props":4881,"children":4882},{"class":4244},[4883],{"type":30,"value":2434},{"type":25,"tag":209,"props":4885,"children":4886},{"class":4249},[4887],{"type":30,"value":230},{"type":25,"tag":209,"props":4889,"children":4890},{"class":4254},[4891],{"type":30,"value":4892},"isFed",{"type":25,"tag":209,"props":4894,"children":4895},{"class":4249},[4896],{"type":30,"value":230},{"type":25,"tag":209,"props":4898,"children":4899},{"class":4264},[4900],{"type":30,"value":2301},{"type":25,"tag":209,"props":4902,"children":4903},{"class":4249},[4904],{"type":30,"value":230},{"type":25,"tag":209,"props":4906,"children":4907},{"class":4273},[4908],{"type":30,"value":4607},{"type":25,"tag":209,"props":4910,"children":4911},{"class":4249},[4912],{"type":30,"value":3613},{"type":25,"tag":209,"props":4914,"children":4915},{"class":4244},[4916],{"type":30,"value":3618},{"type":25,"tag":209,"props":4918,"children":4919},{"class":4249},[4920],{"type":30,"value":4921}," (\n",{"type":25,"tag":209,"props":4923,"children":4924},{"class":211,"line":2520},[4925,4929,4933,4937,4941,4945,4949,4953,4958,4962,4967,4971,4976,4981,4986,4990],{"type":25,"tag":209,"props":4926,"children":4927},{"class":4249},[4928],{"type":30,"value":1577},{"type":25,"tag":209,"props":4930,"children":4931},{"class":4254},[4932],{"type":30,"value":4257},{"type":25,"tag":209,"props":4934,"children":4935},{"class":4249},[4936],{"type":30,"value":326},{"type":25,"tag":209,"props":4938,"children":4939},{"class":4254},[4940],{"type":30,"value":4188},{"type":25,"tag":209,"props":4942,"children":4943},{"class":4249},[4944],{"type":30,"value":326},{"type":25,"tag":209,"props":4946,"children":4947},{"class":4291},[4948],{"type":30,"value":4510},{"type":25,"tag":209,"props":4950,"children":4951},{"class":4249},[4952],{"type":30,"value":230},{"type":25,"tag":209,"props":4954,"children":4955},{"class":4264},[4956],{"type":30,"value":4957},">",{"type":25,"tag":209,"props":4959,"children":4960},{"class":4249},[4961],{"type":30,"value":230},{"type":25,"tag":209,"props":4963,"children":4964},{"class":4254},[4965],{"type":30,"value":4966},"Date",{"type":25,"tag":209,"props":4968,"children":4969},{"class":4249},[4970],{"type":30,"value":326},{"type":25,"tag":209,"props":4972,"children":4973},{"class":4273},[4974],{"type":30,"value":4975},"now",{"type":25,"tag":209,"props":4977,"children":4978},{"class":4249},[4979],{"type":30,"value":4980},"() ",{"type":25,"tag":209,"props":4982,"children":4983},{"class":4264},[4984],{"type":30,"value":4985},"-",{"type":25,"tag":209,"props":4987,"children":4988},{"class":4249},[4989],{"type":30,"value":230},{"type":25,"tag":209,"props":4991,"children":4993},{"class":4992},"ct-dade32",[4994],{"type":30,"value":4995},"30000\n",{"type":25,"tag":209,"props":4997,"children":4998},{"class":211,"line":2537},[4999],{"type":25,"tag":209,"props":5000,"children":5001},{"class":4249},[5002],{"type":30,"value":5003},"))",{"type":25,"tag":26,"props":5005,"children":5006},{},[5007],{"type":30,"value":5008},"We can see that we have some computed properties.",{"type":25,"tag":460,"props":5010,"children":5011},{},[5012],{"type":25,"tag":26,"props":5013,"children":5014},{},[5015],{"type":30,"value":5016},"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":25,"tag":26,"props":5018,"children":5019},{},[5020],{"type":30,"value":5021},"3 things are happening here:",{"type":25,"tag":133,"props":5023,"children":5024},{},[5025,5030,5035],{"type":25,"tag":137,"props":5026,"children":5027},{},[5028],{"type":30,"value":5029},"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":25,"tag":137,"props":5031,"children":5032},{},[5033],{"type":30,"value":5034},"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":25,"tag":137,"props":5036,"children":5037},{},[5038],{"type":30,"value":5039},"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":25,"tag":538,"props":5041,"children":5043},{"id":5042},"the-template",[5044],{"type":30,"value":5045},"The Template",{"type":25,"tag":26,"props":5047,"children":5048},{},[5049],{"type":30,"value":5050},"Next let's look at the template:",{"type":25,"tag":195,"props":5052,"children":5055},{"code":5053,"language":5054,"meta":199},"\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",[5056],{"type":25,"tag":202,"props":5057,"children":5058},{},[5059],{"type":25,"tag":195,"props":5060,"children":5061},{"__ignoreMap":8},[5062,5095,5102,5115,5128,5148,5169,5177,5184,5196,5220,5227,5239,5250,5271,5292,5300,5341,5383,5400,5408,5421,5454,5463,5479,5488],{"type":25,"tag":209,"props":5063,"children":5064},{"class":211,"line":212},[5065,5069,5073,5077,5082,5086,5091],{"type":25,"tag":209,"props":5066,"children":5067},{"class":4249},[5068],{"type":30,"value":2259},{"type":25,"tag":209,"props":5070,"children":5071},{"class":4291},[5072],{"type":30,"value":2582},{"type":25,"tag":209,"props":5074,"children":5075},{"class":4249},[5076],{"type":30,"value":230},{"type":25,"tag":209,"props":5078,"children":5079},{"class":4992},[5080],{"type":30,"value":5081},"class",{"type":25,"tag":209,"props":5083,"children":5084},{"class":4249},[5085],{"type":30,"value":2301},{"type":25,"tag":209,"props":5087,"children":5088},{"class":4394},[5089],{"type":30,"value":5090},"\"my-card\"",{"type":25,"tag":209,"props":5092,"children":5093},{"class":4249},[5094],{"type":30,"value":2270},{"type":25,"tag":209,"props":5096,"children":5097},{"class":211,"line":352},[5098],{"type":25,"tag":209,"props":5099,"children":5100},{},[5101],{"type":30,"value":1830},{"type":25,"tag":209,"props":5103,"children":5104},{"class":211,"line":361},[5105,5109],{"type":25,"tag":209,"props":5106,"children":5107},{"class":4249},[5108],{"type":30,"value":1577},{"type":25,"tag":209,"props":5110,"children":5112},{"class":5111},"ct-ff51bc",[5113],{"type":30,"value":5114},"\u003C!-- image -->\n",{"type":25,"tag":209,"props":5116,"children":5117},{"class":211,"line":370},[5118,5123],{"type":25,"tag":209,"props":5119,"children":5120},{"class":4249},[5121],{"type":30,"value":5122},"  \u003C",{"type":25,"tag":209,"props":5124,"children":5125},{"class":4291},[5126],{"type":30,"value":5127},"div\n",{"type":25,"tag":209,"props":5129,"children":5130},{"class":211,"line":379},[5131,5135,5139,5143],{"type":25,"tag":209,"props":5132,"children":5133},{"class":4249},[5134],{"type":30,"value":2278},{"type":25,"tag":209,"props":5136,"children":5137},{"class":4992},[5138],{"type":30,"value":5081},{"type":25,"tag":209,"props":5140,"children":5141},{"class":4249},[5142],{"type":30,"value":2301},{"type":25,"tag":209,"props":5144,"children":5145},{"class":4394},[5146],{"type":30,"value":5147},"\"img\"\n",{"type":25,"tag":209,"props":5149,"children":5150},{"class":211,"line":388},[5151,5155,5160,5164],{"type":25,"tag":209,"props":5152,"children":5153},{"class":4249},[5154],{"type":30,"value":2278},{"type":25,"tag":209,"props":5156,"children":5157},{"class":4992},[5158],{"type":30,"value":5159},":style",{"type":25,"tag":209,"props":5161,"children":5162},{"class":4249},[5163],{"type":30,"value":2301},{"type":25,"tag":209,"props":5165,"children":5166},{"class":4394},[5167],{"type":30,"value":5168},"\"imageStyle\"\n",{"type":25,"tag":209,"props":5170,"children":5171},{"class":211,"line":397},[5172],{"type":25,"tag":209,"props":5173,"children":5174},{"class":4249},[5175],{"type":30,"value":5176},"  />\n",{"type":25,"tag":209,"props":5178,"children":5179},{"class":211,"line":1896},[5180],{"type":25,"tag":209,"props":5181,"children":5182},{},[5183],{"type":30,"value":1830},{"type":25,"tag":209,"props":5185,"children":5186},{"class":211,"line":1918},[5187,5191],{"type":25,"tag":209,"props":5188,"children":5189},{"class":4249},[5190],{"type":30,"value":1577},{"type":25,"tag":209,"props":5192,"children":5193},{"class":5111},[5194],{"type":30,"value":5195},"\u003C!-- name -->\n",{"type":25,"tag":209,"props":5197,"children":5198},{"class":211,"line":2511},[5199,5203,5207,5212,5216],{"type":25,"tag":209,"props":5200,"children":5201},{"class":4249},[5202],{"type":30,"value":5122},{"type":25,"tag":209,"props":5204,"children":5205},{"class":4291},[5206],{"type":30,"value":538},{"type":25,"tag":209,"props":5208,"children":5209},{"class":4249},[5210],{"type":30,"value":5211},">{{ pet.name }}\u003C/",{"type":25,"tag":209,"props":5213,"children":5214},{"class":4291},[5215],{"type":30,"value":538},{"type":25,"tag":209,"props":5217,"children":5218},{"class":4249},[5219],{"type":30,"value":2270},{"type":25,"tag":209,"props":5221,"children":5222},{"class":211,"line":2520},[5223],{"type":25,"tag":209,"props":5224,"children":5225},{},[5226],{"type":30,"value":1830},{"type":25,"tag":209,"props":5228,"children":5229},{"class":211,"line":2537},[5230,5234],{"type":25,"tag":209,"props":5231,"children":5232},{"class":4249},[5233],{"type":30,"value":1577},{"type":25,"tag":209,"props":5235,"children":5236},{"class":5111},[5237],{"type":30,"value":5238},"\u003C!-- stats -->\n",{"type":25,"tag":209,"props":5240,"children":5241},{"class":211,"line":2545},[5242,5246],{"type":25,"tag":209,"props":5243,"children":5244},{"class":4249},[5245],{"type":30,"value":5122},{"type":25,"tag":209,"props":5247,"children":5248},{"class":4291},[5249],{"type":30,"value":5127},{"type":25,"tag":209,"props":5251,"children":5252},{"class":211,"line":2571},[5253,5257,5262,5266],{"type":25,"tag":209,"props":5254,"children":5255},{"class":4249},[5256],{"type":30,"value":2278},{"type":25,"tag":209,"props":5258,"children":5259},{"class":4992},[5260],{"type":30,"value":5261},"v-for",{"type":25,"tag":209,"props":5263,"children":5264},{"class":4249},[5265],{"type":30,"value":2301},{"type":25,"tag":209,"props":5267,"children":5268},{"class":4394},[5269],{"type":30,"value":5270},"\"statValue, statName in stats\"\n",{"type":25,"tag":209,"props":5272,"children":5273},{"class":211,"line":2624},[5274,5278,5283,5287],{"type":25,"tag":209,"props":5275,"children":5276},{"class":4249},[5277],{"type":30,"value":2278},{"type":25,"tag":209,"props":5279,"children":5280},{"class":4992},[5281],{"type":30,"value":5282},":key",{"type":25,"tag":209,"props":5284,"children":5285},{"class":4249},[5286],{"type":30,"value":2301},{"type":25,"tag":209,"props":5288,"children":5289},{"class":4394},[5290],{"type":30,"value":5291},"\"statName\"\n",{"type":25,"tag":209,"props":5293,"children":5294},{"class":211,"line":2633},[5295],{"type":25,"tag":209,"props":5296,"children":5297},{"class":4249},[5298],{"type":30,"value":5299},"  >\n",{"type":25,"tag":209,"props":5301,"children":5302},{"class":211,"line":2650},[5303,5307,5311,5315,5319,5323,5328,5333,5337],{"type":25,"tag":209,"props":5304,"children":5305},{"class":4249},[5306],{"type":30,"value":2577},{"type":25,"tag":209,"props":5308,"children":5309},{"class":4291},[5310],{"type":30,"value":209},{"type":25,"tag":209,"props":5312,"children":5313},{"class":4249},[5314],{"type":30,"value":230},{"type":25,"tag":209,"props":5316,"children":5317},{"class":4992},[5318],{"type":30,"value":5081},{"type":25,"tag":209,"props":5320,"children":5321},{"class":4249},[5322],{"type":30,"value":2301},{"type":25,"tag":209,"props":5324,"children":5325},{"class":4394},[5326],{"type":30,"value":5327},"\"stat-name\"",{"type":25,"tag":209,"props":5329,"children":5330},{"class":4249},[5331],{"type":30,"value":5332},">{{ statName }}: \u003C/",{"type":25,"tag":209,"props":5334,"children":5335},{"class":4291},[5336],{"type":30,"value":209},{"type":25,"tag":209,"props":5338,"children":5339},{"class":4249},[5340],{"type":30,"value":2270},{"type":25,"tag":209,"props":5342,"children":5344},{"class":211,"line":5343},18,[5345,5349,5353,5357,5361,5365,5370,5375,5379],{"type":25,"tag":209,"props":5346,"children":5347},{"class":4249},[5348],{"type":30,"value":2577},{"type":25,"tag":209,"props":5350,"children":5351},{"class":4291},[5352],{"type":30,"value":209},{"type":25,"tag":209,"props":5354,"children":5355},{"class":4249},[5356],{"type":30,"value":230},{"type":25,"tag":209,"props":5358,"children":5359},{"class":4992},[5360],{"type":30,"value":5081},{"type":25,"tag":209,"props":5362,"children":5363},{"class":4249},[5364],{"type":30,"value":2301},{"type":25,"tag":209,"props":5366,"children":5367},{"class":4394},[5368],{"type":30,"value":5369},"\"stat-value\"",{"type":25,"tag":209,"props":5371,"children":5372},{"class":4249},[5373],{"type":30,"value":5374},">{{ statValue }}\u003C/",{"type":25,"tag":209,"props":5376,"children":5377},{"class":4291},[5378],{"type":30,"value":209},{"type":25,"tag":209,"props":5380,"children":5381},{"class":4249},[5382],{"type":30,"value":2270},{"type":25,"tag":209,"props":5384,"children":5386},{"class":211,"line":5385},19,[5387,5392,5396],{"type":25,"tag":209,"props":5388,"children":5389},{"class":4249},[5390],{"type":30,"value":5391},"  \u003C/",{"type":25,"tag":209,"props":5393,"children":5394},{"class":4291},[5395],{"type":30,"value":2582},{"type":25,"tag":209,"props":5397,"children":5398},{"class":4249},[5399],{"type":30,"value":2270},{"type":25,"tag":209,"props":5401,"children":5403},{"class":211,"line":5402},20,[5404],{"type":25,"tag":209,"props":5405,"children":5406},{},[5407],{"type":30,"value":1830},{"type":25,"tag":209,"props":5409,"children":5411},{"class":211,"line":5410},21,[5412,5416],{"type":25,"tag":209,"props":5413,"children":5414},{"class":4249},[5415],{"type":30,"value":1577},{"type":25,"tag":209,"props":5417,"children":5418},{"class":5111},[5419],{"type":30,"value":5420},"\u003C!-- fed label -->\n",{"type":25,"tag":209,"props":5422,"children":5424},{"class":211,"line":5423},22,[5425,5429,5433,5437,5441,5445,5450],{"type":25,"tag":209,"props":5426,"children":5427},{"class":4249},[5428],{"type":30,"value":5122},{"type":25,"tag":209,"props":5430,"children":5431},{"class":4291},[5432],{"type":30,"value":2582},{"type":25,"tag":209,"props":5434,"children":5435},{"class":4249},[5436],{"type":30,"value":230},{"type":25,"tag":209,"props":5438,"children":5439},{"class":4992},[5440],{"type":30,"value":5081},{"type":25,"tag":209,"props":5442,"children":5443},{"class":4249},[5444],{"type":30,"value":2301},{"type":25,"tag":209,"props":5446,"children":5447},{"class":4394},[5448],{"type":30,"value":5449},"\"fed-label\"",{"type":25,"tag":209,"props":5451,"children":5452},{"class":4249},[5453],{"type":30,"value":2270},{"type":25,"tag":209,"props":5455,"children":5457},{"class":211,"line":5456},23,[5458],{"type":25,"tag":209,"props":5459,"children":5460},{"class":4249},[5461],{"type":30,"value":5462},"    {{ isFed ? '✅' : '❌ NOT' }} FED\n",{"type":25,"tag":209,"props":5464,"children":5466},{"class":211,"line":5465},24,[5467,5471,5475],{"type":25,"tag":209,"props":5468,"children":5469},{"class":4249},[5470],{"type":30,"value":5391},{"type":25,"tag":209,"props":5472,"children":5473},{"class":4291},[5474],{"type":30,"value":2582},{"type":25,"tag":209,"props":5476,"children":5477},{"class":4249},[5478],{"type":30,"value":2270},{"type":25,"tag":209,"props":5480,"children":5482},{"class":211,"line":5481},25,[5483],{"type":25,"tag":209,"props":5484,"children":5485},{"class":4249},[5486],{"type":30,"value":5487},"  \n",{"type":25,"tag":209,"props":5489,"children":5491},{"class":211,"line":5490},26,[5492,5496,5500],{"type":25,"tag":209,"props":5493,"children":5494},{"class":4249},[5495],{"type":30,"value":2526},{"type":25,"tag":209,"props":5497,"children":5498},{"class":4291},[5499],{"type":30,"value":2582},{"type":25,"tag":209,"props":5501,"children":5502},{"class":4249},[5503],{"type":30,"value":4957},{"type":25,"tag":26,"props":5505,"children":5506},{},[5507],{"type":30,"value":5508},"Here we're doing the following things:",{"type":25,"tag":133,"props":5510,"children":5511},{},[5512,5517,5522,5527],{"type":25,"tag":137,"props":5513,"children":5514},{},[5515],{"type":30,"value":5516},"Display the pet's image,",{"type":25,"tag":137,"props":5518,"children":5519},{},[5520],{"type":30,"value":5521},"Display the pet's name,",{"type":25,"tag":137,"props":5523,"children":5524},{},[5525],{"type":30,"value":5526},"Iterate over our computed stats and output them in key: value manner,",{"type":25,"tag":137,"props":5528,"children":5529},{},[5530],{"type":30,"value":5531},"Display the \"fed\" label in coherence with the computed state.",{"type":25,"tag":26,"props":5533,"children":5534},{},[5535],{"type":30,"value":5536},"That's it for the template.",{"type":25,"tag":26,"props":5538,"children":5539},{},[5540],{"type":30,"value":5541},"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":25,"tag":538,"props":5543,"children":5545},{"id":5544},"iteration-1-results",[5546],{"type":30,"value":5547},"Iteration 1 Results",{"type":25,"tag":26,"props":5549,"children":5550},{},[5551],{"type":30,"value":5552},"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":25,"tag":538,"props":5554,"children":5556},{"id":5555},"iteration-2",[5557],{"type":30,"value":5558},"Iteration 2",{"type":25,"tag":26,"props":5560,"children":5561},{},[5562],{"type":30,"value":5563},"But what happens if we add a different item type to the mix?",{"type":25,"tag":26,"props":5565,"children":5566},{},[5567],{"type":25,"tag":69,"props":5568,"children":5571},{"alt":5569,"src":5570},"example app second stage","/blog/extend-components/example-2.png",[],{"type":25,"tag":26,"props":5573,"children":5574},{},[5575,5577,5582],{"type":30,"value":5576},"You can see that in this next iteration of our project, a different item type was added - a ",{"type":25,"tag":41,"props":5578,"children":5579},{},[5580],{"type":30,"value":5581},"weapon",{"type":30,"value":326},{"type":25,"tag":26,"props":5584,"children":5585},{},[5586],{"type":30,"value":5587},"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":25,"tag":133,"props":5589,"children":5590},{},[5591,5596],{"type":25,"tag":137,"props":5592,"children":5593},{},[5594],{"type":30,"value":5595},"There is no \"fed\" label of course - you don't need to feed your weapons.",{"type":25,"tag":137,"props":5597,"children":5598},{},[5599],{"type":30,"value":5600},"And the stats, while still in place, list completely different properties.",{"type":25,"tag":26,"props":5602,"children":5603},{},[5604],{"type":30,"value":5605},"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":25,"tag":538,"props":5607,"children":5609},{"id":5608},"extend-the-components-props",[5610],{"type":30,"value":5611},"Extend the Component's Props",{"type":25,"tag":26,"props":5613,"children":5614},{},[5615],{"type":30,"value":5616},"The first and the most natural thing to do in this situation is to extend the type of our prop.",{"type":25,"tag":26,"props":5618,"children":5619},{},[5620],{"type":30,"value":5621},"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":25,"tag":26,"props":5623,"children":5624},{},[5625],{"type":30,"value":5626},"So let's extend our prop:",{"type":25,"tag":195,"props":5628,"children":5630},{"code":5629,"language":1537,"meta":199},"const props = defineProps\u003C{\n  item: Pet|Weapon\n}>()\n",[5631],{"type":25,"tag":202,"props":5632,"children":5633},{},[5634],{"type":25,"tag":195,"props":5635,"children":5636},{"__ignoreMap":8},[5637,5672,5702],{"type":25,"tag":209,"props":5638,"children":5639},{"class":211,"line":212},[5640,5644,5648,5652,5656,5660,5664,5668],{"type":25,"tag":209,"props":5641,"children":5642},{"class":4244},[5643],{"type":30,"value":2434},{"type":25,"tag":209,"props":5645,"children":5646},{"class":4249},[5647],{"type":30,"value":230},{"type":25,"tag":209,"props":5649,"children":5650},{"class":4254},[5651],{"type":30,"value":4257},{"type":25,"tag":209,"props":5653,"children":5654},{"class":4249},[5655],{"type":30,"value":230},{"type":25,"tag":209,"props":5657,"children":5658},{"class":4264},[5659],{"type":30,"value":2301},{"type":25,"tag":209,"props":5661,"children":5662},{"class":4249},[5663],{"type":30,"value":230},{"type":25,"tag":209,"props":5665,"children":5666},{"class":4273},[5667],{"type":30,"value":4276},{"type":25,"tag":209,"props":5669,"children":5670},{"class":4249},[5671],{"type":30,"value":4281},{"type":25,"tag":209,"props":5673,"children":5674},{"class":211,"line":352},[5675,5679,5684,5688,5692,5697],{"type":25,"tag":209,"props":5676,"children":5677},{"class":4249},[5678],{"type":30,"value":1577},{"type":25,"tag":209,"props":5680,"children":5681},{"class":4291},[5682],{"type":30,"value":5683},"item",{"type":25,"tag":209,"props":5685,"children":5686},{"class":4249},[5687],{"type":30,"value":1593},{"type":25,"tag":209,"props":5689,"children":5690},{"class":4254},[5691],{"type":30,"value":4326},{"type":25,"tag":209,"props":5693,"children":5694},{"class":4249},[5695],{"type":30,"value":5696},"|",{"type":25,"tag":209,"props":5698,"children":5699},{"class":4254},[5700],{"type":30,"value":5701},"Weapon\n",{"type":25,"tag":209,"props":5703,"children":5704},{"class":211,"line":361},[5705],{"type":25,"tag":209,"props":5706,"children":5707},{"class":4249},[5708],{"type":30,"value":4310},{"type":25,"tag":26,"props":5710,"children":5711},{},[5712,5714,5718,5720,5724,5725,5730],{"type":30,"value":5713},"You can see I have renamed our prop to ",{"type":25,"tag":33,"props":5715,"children":5716},{},[5717],{"type":30,"value":5683},{"type":30,"value":5719},", because it can now be of both type ",{"type":25,"tag":33,"props":5721,"children":5722},{},[5723],{"type":30,"value":4326},{"type":30,"value":4087},{"type":25,"tag":33,"props":5726,"children":5727},{},[5728],{"type":30,"value":5729},"Weapon",{"type":30,"value":326},{"type":25,"tag":26,"props":5732,"children":5733},{},[5734,5736,5740],{"type":30,"value":5735},"By the way, here's an expanded ",{"type":25,"tag":33,"props":5737,"children":5738},{},[5739],{"type":30,"value":5729},{"type":30,"value":5741}," type:",{"type":25,"tag":195,"props":5743,"children":5745},{"code":5744,"language":1537,"meta":199},"type Weapon = {\n  type: 'weapon'\n  pictureUrl: string\n  name: string\n  damage: number\n  critChance: number\n}\n",[5746],{"type":25,"tag":202,"props":5747,"children":5748},{},[5749],{"type":25,"tag":195,"props":5750,"children":5751},{"__ignoreMap":8},[5752,5779,5799,5818,5837,5857,5877],{"type":25,"tag":209,"props":5753,"children":5754},{"class":211,"line":212},[5755,5759,5763,5767,5771,5775],{"type":25,"tag":209,"props":5756,"children":5757},{"class":4244},[5758],{"type":30,"value":4356},{"type":25,"tag":209,"props":5760,"children":5761},{"class":4249},[5762],{"type":30,"value":230},{"type":25,"tag":209,"props":5764,"children":5765},{"class":4254},[5766],{"type":30,"value":5729},{"type":25,"tag":209,"props":5768,"children":5769},{"class":4249},[5770],{"type":30,"value":230},{"type":25,"tag":209,"props":5772,"children":5773},{"class":4264},[5774],{"type":30,"value":2301},{"type":25,"tag":209,"props":5776,"children":5777},{"class":4249},[5778],{"type":30,"value":1569},{"type":25,"tag":209,"props":5780,"children":5781},{"class":211,"line":352},[5782,5786,5790,5794],{"type":25,"tag":209,"props":5783,"children":5784},{"class":4249},[5785],{"type":30,"value":1577},{"type":25,"tag":209,"props":5787,"children":5788},{"class":4291},[5789],{"type":30,"value":4356},{"type":25,"tag":209,"props":5791,"children":5792},{"class":4249},[5793],{"type":30,"value":1593},{"type":25,"tag":209,"props":5795,"children":5796},{"class":4394},[5797],{"type":30,"value":5798},"'weapon'\n",{"type":25,"tag":209,"props":5800,"children":5801},{"class":211,"line":361},[5802,5806,5810,5814],{"type":25,"tag":209,"props":5803,"children":5804},{"class":4249},[5805],{"type":30,"value":1577},{"type":25,"tag":209,"props":5807,"children":5808},{"class":4291},[5809],{"type":30,"value":4409},{"type":25,"tag":209,"props":5811,"children":5812},{"class":4249},[5813],{"type":30,"value":1593},{"type":25,"tag":209,"props":5815,"children":5816},{"class":4254},[5817],{"type":30,"value":1794},{"type":25,"tag":209,"props":5819,"children":5820},{"class":211,"line":370},[5821,5825,5829,5833],{"type":25,"tag":209,"props":5822,"children":5823},{"class":4249},[5824],{"type":30,"value":1577},{"type":25,"tag":209,"props":5826,"children":5827},{"class":4291},[5828],{"type":30,"value":4429},{"type":25,"tag":209,"props":5830,"children":5831},{"class":4249},[5832],{"type":30,"value":1593},{"type":25,"tag":209,"props":5834,"children":5835},{"class":4254},[5836],{"type":30,"value":1794},{"type":25,"tag":209,"props":5838,"children":5839},{"class":211,"line":379},[5840,5844,5849,5853],{"type":25,"tag":209,"props":5841,"children":5842},{"class":4249},[5843],{"type":30,"value":1577},{"type":25,"tag":209,"props":5845,"children":5846},{"class":4291},[5847],{"type":30,"value":5848},"damage",{"type":25,"tag":209,"props":5850,"children":5851},{"class":4249},[5852],{"type":30,"value":1593},{"type":25,"tag":209,"props":5854,"children":5855},{"class":4254},[5856],{"type":30,"value":4458},{"type":25,"tag":209,"props":5858,"children":5859},{"class":211,"line":388},[5860,5864,5869,5873],{"type":25,"tag":209,"props":5861,"children":5862},{"class":4249},[5863],{"type":30,"value":1577},{"type":25,"tag":209,"props":5865,"children":5866},{"class":4291},[5867],{"type":30,"value":5868},"critChance",{"type":25,"tag":209,"props":5870,"children":5871},{"class":4249},[5872],{"type":30,"value":1593},{"type":25,"tag":209,"props":5874,"children":5875},{"class":4254},[5876],{"type":30,"value":4458},{"type":25,"tag":209,"props":5878,"children":5879},{"class":211,"line":397},[5880],{"type":25,"tag":209,"props":5881,"children":5882},{"class":4249},[5883],{"type":30,"value":1630},{"type":25,"tag":26,"props":5885,"children":5886},{},[5887,5889,5894],{"type":30,"value":5888},"Right away you can see that, in the same manner as the pet, it has a type field, but this time it says ",{"type":25,"tag":33,"props":5890,"children":5891},{},[5892],{"type":30,"value":5893},"'weapon'",{"type":30,"value":5895},". Just like the pet it has a picture and a name, but all the other fields are different.",{"type":25,"tag":538,"props":5897,"children":5899},{"id":5898},"the-script-1",[5900],{"type":30,"value":5901},"The Script",{"type":25,"tag":26,"props":5903,"children":5904},{},[5905],{"type":30,"value":5906},"Now, let's look at what needs to change in the script:",{"type":25,"tag":26,"props":5908,"children":5909},{},[5910],{"type":30,"value":5911},"The image part doesn't need to change since it's the same for both the pet and the weapon.",{"type":25,"tag":26,"props":5913,"children":5914},{},[5915],{"type":30,"value":5916},"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":25,"tag":26,"props":5918,"children":5919},{},[5920],{"type":30,"value":5921},"So here's the updated version:",{"type":25,"tag":195,"props":5923,"children":5925},{"code":5924,"language":1537,"meta":199},"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",[5926],{"type":25,"tag":202,"props":5927,"children":5928},{},[5929],{"type":25,"tag":195,"props":5930,"children":5931},{"__ignoreMap":8},[5932,5975,6016,6041,6056,6144,6179,6186,6209,6224,6264,6301,6308,6316],{"type":25,"tag":209,"props":5933,"children":5934},{"class":211,"line":212},[5935,5939,5943,5947,5951,5955,5959,5963,5967,5971],{"type":25,"tag":209,"props":5936,"children":5937},{"class":4244},[5938],{"type":30,"value":2434},{"type":25,"tag":209,"props":5940,"children":5941},{"class":4249},[5942],{"type":30,"value":230},{"type":25,"tag":209,"props":5944,"children":5945},{"class":4254},[5946],{"type":30,"value":4706},{"type":25,"tag":209,"props":5948,"children":5949},{"class":4249},[5950],{"type":30,"value":230},{"type":25,"tag":209,"props":5952,"children":5953},{"class":4264},[5954],{"type":30,"value":2301},{"type":25,"tag":209,"props":5956,"children":5957},{"class":4249},[5958],{"type":30,"value":230},{"type":25,"tag":209,"props":5960,"children":5961},{"class":4273},[5962],{"type":30,"value":4607},{"type":25,"tag":209,"props":5964,"children":5965},{"class":4249},[5966],{"type":30,"value":3613},{"type":25,"tag":209,"props":5968,"children":5969},{"class":4244},[5970],{"type":30,"value":3618},{"type":25,"tag":209,"props":5972,"children":5973},{"class":4249},[5974],{"type":30,"value":1569},{"type":25,"tag":209,"props":5976,"children":5977},{"class":211,"line":352},[5978,5982,5987,5991,5995,5999,6003,6007,6011],{"type":25,"tag":209,"props":5979,"children":5980},{"class":4249},[5981],{"type":30,"value":1577},{"type":25,"tag":209,"props":5983,"children":5984},{"class":4244},[5985],{"type":30,"value":5986},"switch",{"type":25,"tag":209,"props":5988,"children":5989},{"class":4249},[5990],{"type":30,"value":826},{"type":25,"tag":209,"props":5992,"children":5993},{"class":4254},[5994],{"type":30,"value":4257},{"type":25,"tag":209,"props":5996,"children":5997},{"class":4249},[5998],{"type":30,"value":326},{"type":25,"tag":209,"props":6000,"children":6001},{"class":4254},[6002],{"type":30,"value":5683},{"type":25,"tag":209,"props":6004,"children":6005},{"class":4249},[6006],{"type":30,"value":326},{"type":25,"tag":209,"props":6008,"children":6009},{"class":4291},[6010],{"type":30,"value":4356},{"type":25,"tag":209,"props":6012,"children":6013},{"class":4249},[6014],{"type":30,"value":6015},") {\n",{"type":25,"tag":209,"props":6017,"children":6018},{"class":211,"line":361},[6019,6023,6028,6032,6036],{"type":25,"tag":209,"props":6020,"children":6021},{"class":4249},[6022],{"type":30,"value":1577},{"type":25,"tag":209,"props":6024,"children":6025},{"class":4244},[6026],{"type":30,"value":6027},"case",{"type":25,"tag":209,"props":6029,"children":6030},{"class":4249},[6031],{"type":30,"value":230},{"type":25,"tag":209,"props":6033,"children":6034},{"class":4394},[6035],{"type":30,"value":4541},{"type":25,"tag":209,"props":6037,"children":6038},{"class":4249},[6039],{"type":30,"value":6040},":\n",{"type":25,"tag":209,"props":6042,"children":6043},{"class":211,"line":370},[6044,6048,6052],{"type":25,"tag":209,"props":6045,"children":6046},{"class":4249},[6047],{"type":30,"value":2278},{"type":25,"tag":209,"props":6049,"children":6050},{"class":4244},[6051],{"type":30,"value":1906},{"type":25,"tag":209,"props":6053,"children":6054},{"class":4249},[6055],{"type":30,"value":1569},{"type":25,"tag":209,"props":6057,"children":6058},{"class":211,"line":379},[6059,6064,6068,6072,6076,6080,6084,6088,6092,6096,6100,6104,6108,6112,6116,6120,6124,6128,6132,6136,6140],{"type":25,"tag":209,"props":6060,"children":6061},{"class":4249},[6062],{"type":30,"value":6063},"      ",{"type":25,"tag":209,"props":6065,"children":6066},{"class":4394},[6067],{"type":30,"value":4746},{"type":25,"tag":209,"props":6069,"children":6070},{"class":4249},[6071],{"type":30,"value":1593},{"type":25,"tag":209,"props":6073,"children":6074},{"class":4394},[6075],{"type":30,"value":4755},{"type":25,"tag":209,"props":6077,"children":6078},{"class":4244},[6079],{"type":30,"value":4646},{"type":25,"tag":209,"props":6081,"children":6082},{"class":4254},[6083],{"type":30,"value":4257},{"type":25,"tag":209,"props":6085,"children":6086},{"class":4249},[6087],{"type":30,"value":326},{"type":25,"tag":209,"props":6089,"children":6090},{"class":4254},[6091],{"type":30,"value":5683},{"type":25,"tag":209,"props":6093,"children":6094},{"class":4249},[6095],{"type":30,"value":326},{"type":25,"tag":209,"props":6097,"children":6098},{"class":4291},[6099],{"type":30,"value":4449},{"type":25,"tag":209,"props":6101,"children":6102},{"class":4244},[6103],{"type":30,"value":1630},{"type":25,"tag":209,"props":6105,"children":6106},{"class":4394},[6107],{"type":30,"value":4788},{"type":25,"tag":209,"props":6109,"children":6110},{"class":4244},[6111],{"type":30,"value":4646},{"type":25,"tag":209,"props":6113,"children":6114},{"class":4254},[6115],{"type":30,"value":4257},{"type":25,"tag":209,"props":6117,"children":6118},{"class":4249},[6119],{"type":30,"value":326},{"type":25,"tag":209,"props":6121,"children":6122},{"class":4254},[6123],{"type":30,"value":5683},{"type":25,"tag":209,"props":6125,"children":6126},{"class":4249},[6127],{"type":30,"value":326},{"type":25,"tag":209,"props":6129,"children":6130},{"class":4291},[6131],{"type":30,"value":4470},{"type":25,"tag":209,"props":6133,"children":6134},{"class":4244},[6135],{"type":30,"value":1630},{"type":25,"tag":209,"props":6137,"children":6138},{"class":4394},[6139],{"type":30,"value":4755},{"type":25,"tag":209,"props":6141,"children":6142},{"class":4249},[6143],{"type":30,"value":4825},{"type":25,"tag":209,"props":6145,"children":6146},{"class":211,"line":388},[6147,6151,6155,6159,6163,6167,6171,6175],{"type":25,"tag":209,"props":6148,"children":6149},{"class":4249},[6150],{"type":30,"value":6063},{"type":25,"tag":209,"props":6152,"children":6153},{"class":4394},[6154],{"type":30,"value":4837},{"type":25,"tag":209,"props":6156,"children":6157},{"class":4249},[6158],{"type":30,"value":1593},{"type":25,"tag":209,"props":6160,"children":6161},{"class":4254},[6162],{"type":30,"value":4257},{"type":25,"tag":209,"props":6164,"children":6165},{"class":4249},[6166],{"type":30,"value":326},{"type":25,"tag":209,"props":6168,"children":6169},{"class":4254},[6170],{"type":30,"value":5683},{"type":25,"tag":209,"props":6172,"children":6173},{"class":4249},[6174],{"type":30,"value":326},{"type":25,"tag":209,"props":6176,"children":6177},{"class":4291},[6178],{"type":30,"value":4862},{"type":25,"tag":209,"props":6180,"children":6181},{"class":211,"line":397},[6182],{"type":25,"tag":209,"props":6183,"children":6184},{"class":4249},[6185],{"type":30,"value":2517},{"type":25,"tag":209,"props":6187,"children":6188},{"class":211,"line":1896},[6189,6193,6197,6201,6205],{"type":25,"tag":209,"props":6190,"children":6191},{"class":4249},[6192],{"type":30,"value":1577},{"type":25,"tag":209,"props":6194,"children":6195},{"class":4244},[6196],{"type":30,"value":6027},{"type":25,"tag":209,"props":6198,"children":6199},{"class":4249},[6200],{"type":30,"value":230},{"type":25,"tag":209,"props":6202,"children":6203},{"class":4394},[6204],{"type":30,"value":5893},{"type":25,"tag":209,"props":6206,"children":6207},{"class":4249},[6208],{"type":30,"value":6040},{"type":25,"tag":209,"props":6210,"children":6211},{"class":211,"line":1918},[6212,6216,6220],{"type":25,"tag":209,"props":6213,"children":6214},{"class":4249},[6215],{"type":30,"value":2278},{"type":25,"tag":209,"props":6217,"children":6218},{"class":4244},[6219],{"type":30,"value":1906},{"type":25,"tag":209,"props":6221,"children":6222},{"class":4249},[6223],{"type":30,"value":1569},{"type":25,"tag":209,"props":6225,"children":6226},{"class":211,"line":2511},[6227,6231,6236,6240,6244,6248,6252,6256,6260],{"type":25,"tag":209,"props":6228,"children":6229},{"class":4249},[6230],{"type":30,"value":6063},{"type":25,"tag":209,"props":6232,"children":6233},{"class":4394},[6234],{"type":30,"value":6235},"'damage'",{"type":25,"tag":209,"props":6237,"children":6238},{"class":4249},[6239],{"type":30,"value":1593},{"type":25,"tag":209,"props":6241,"children":6242},{"class":4254},[6243],{"type":30,"value":4257},{"type":25,"tag":209,"props":6245,"children":6246},{"class":4249},[6247],{"type":30,"value":326},{"type":25,"tag":209,"props":6249,"children":6250},{"class":4254},[6251],{"type":30,"value":5683},{"type":25,"tag":209,"props":6253,"children":6254},{"class":4249},[6255],{"type":30,"value":326},{"type":25,"tag":209,"props":6257,"children":6258},{"class":4291},[6259],{"type":30,"value":5848},{"type":25,"tag":209,"props":6261,"children":6262},{"class":4249},[6263],{"type":30,"value":4825},{"type":25,"tag":209,"props":6265,"children":6266},{"class":211,"line":2520},[6267,6271,6276,6280,6284,6288,6292,6296],{"type":25,"tag":209,"props":6268,"children":6269},{"class":4249},[6270],{"type":30,"value":6063},{"type":25,"tag":209,"props":6272,"children":6273},{"class":4394},[6274],{"type":30,"value":6275},"'crit chance'",{"type":25,"tag":209,"props":6277,"children":6278},{"class":4249},[6279],{"type":30,"value":1593},{"type":25,"tag":209,"props":6281,"children":6282},{"class":4254},[6283],{"type":30,"value":4257},{"type":25,"tag":209,"props":6285,"children":6286},{"class":4249},[6287],{"type":30,"value":326},{"type":25,"tag":209,"props":6289,"children":6290},{"class":4254},[6291],{"type":30,"value":5683},{"type":25,"tag":209,"props":6293,"children":6294},{"class":4249},[6295],{"type":30,"value":326},{"type":25,"tag":209,"props":6297,"children":6298},{"class":4291},[6299],{"type":30,"value":6300},"critChance\n",{"type":25,"tag":209,"props":6302,"children":6303},{"class":211,"line":2537},[6304],{"type":25,"tag":209,"props":6305,"children":6306},{"class":4249},[6307],{"type":30,"value":2517},{"type":25,"tag":209,"props":6309,"children":6310},{"class":211,"line":2545},[6311],{"type":25,"tag":209,"props":6312,"children":6313},{"class":4249},[6314],{"type":30,"value":6315},"  }\n",{"type":25,"tag":209,"props":6317,"children":6318},{"class":211,"line":2571},[6319],{"type":25,"tag":209,"props":6320,"children":6321},{"class":4249},[6322],{"type":30,"value":6323},"})",{"type":25,"tag":26,"props":6325,"children":6326},{},[6327],{"type":30,"value":6328},"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":25,"tag":26,"props":6330,"children":6331},{},[6332,6334,6338],{"type":30,"value":6333},"As we keep going, we notice that our ",{"type":25,"tag":33,"props":6335,"children":6336},{},[6337],{"type":30,"value":4892},{"type":30,"value":6339}," computed needs to be updated as well:",{"type":25,"tag":195,"props":6341,"children":6343},{"code":6342,"language":1537,"meta":199},"const isFed = computed(() => {\n  if (props.item.type != 'pet') {\n    return false\n  }\n  return props.item.lastFed > Date.now() - 30000\n})\n",[6344],{"type":25,"tag":202,"props":6345,"children":6346},{},[6347],{"type":25,"tag":195,"props":6348,"children":6349},{"__ignoreMap":8},[6350,6393,6449,6468,6475,6550],{"type":25,"tag":209,"props":6351,"children":6352},{"class":211,"line":212},[6353,6357,6361,6365,6369,6373,6377,6381,6385,6389],{"type":25,"tag":209,"props":6354,"children":6355},{"class":4244},[6356],{"type":30,"value":2434},{"type":25,"tag":209,"props":6358,"children":6359},{"class":4249},[6360],{"type":30,"value":230},{"type":25,"tag":209,"props":6362,"children":6363},{"class":4254},[6364],{"type":30,"value":4892},{"type":25,"tag":209,"props":6366,"children":6367},{"class":4249},[6368],{"type":30,"value":230},{"type":25,"tag":209,"props":6370,"children":6371},{"class":4264},[6372],{"type":30,"value":2301},{"type":25,"tag":209,"props":6374,"children":6375},{"class":4249},[6376],{"type":30,"value":230},{"type":25,"tag":209,"props":6378,"children":6379},{"class":4273},[6380],{"type":30,"value":4607},{"type":25,"tag":209,"props":6382,"children":6383},{"class":4249},[6384],{"type":30,"value":3613},{"type":25,"tag":209,"props":6386,"children":6387},{"class":4244},[6388],{"type":30,"value":3618},{"type":25,"tag":209,"props":6390,"children":6391},{"class":4249},[6392],{"type":30,"value":1569},{"type":25,"tag":209,"props":6394,"children":6395},{"class":211,"line":352},[6396,6400,6404,6408,6412,6416,6420,6424,6428,6432,6437,6441,6445],{"type":25,"tag":209,"props":6397,"children":6398},{"class":4249},[6399],{"type":30,"value":1577},{"type":25,"tag":209,"props":6401,"children":6402},{"class":4244},[6403],{"type":30,"value":2556},{"type":25,"tag":209,"props":6405,"children":6406},{"class":4249},[6407],{"type":30,"value":826},{"type":25,"tag":209,"props":6409,"children":6410},{"class":4254},[6411],{"type":30,"value":4257},{"type":25,"tag":209,"props":6413,"children":6414},{"class":4249},[6415],{"type":30,"value":326},{"type":25,"tag":209,"props":6417,"children":6418},{"class":4254},[6419],{"type":30,"value":5683},{"type":25,"tag":209,"props":6421,"children":6422},{"class":4249},[6423],{"type":30,"value":326},{"type":25,"tag":209,"props":6425,"children":6426},{"class":4291},[6427],{"type":30,"value":4356},{"type":25,"tag":209,"props":6429,"children":6430},{"class":4249},[6431],{"type":30,"value":230},{"type":25,"tag":209,"props":6433,"children":6434},{"class":4264},[6435],{"type":30,"value":6436},"!=",{"type":25,"tag":209,"props":6438,"children":6439},{"class":4249},[6440],{"type":30,"value":230},{"type":25,"tag":209,"props":6442,"children":6443},{"class":4394},[6444],{"type":30,"value":4541},{"type":25,"tag":209,"props":6446,"children":6447},{"class":4249},[6448],{"type":30,"value":6015},{"type":25,"tag":209,"props":6450,"children":6451},{"class":211,"line":361},[6452,6456,6460,6464],{"type":25,"tag":209,"props":6453,"children":6454},{"class":4249},[6455],{"type":30,"value":2278},{"type":25,"tag":209,"props":6457,"children":6458},{"class":4244},[6459],{"type":30,"value":1906},{"type":25,"tag":209,"props":6461,"children":6462},{"class":4249},[6463],{"type":30,"value":230},{"type":25,"tag":209,"props":6465,"children":6466},{"class":4992},[6467],{"type":30,"value":2311},{"type":25,"tag":209,"props":6469,"children":6470},{"class":211,"line":370},[6471],{"type":25,"tag":209,"props":6472,"children":6473},{"class":4249},[6474],{"type":30,"value":6315},{"type":25,"tag":209,"props":6476,"children":6477},{"class":211,"line":379},[6478,6482,6486,6490,6494,6498,6502,6506,6510,6514,6518,6522,6526,6530,6534,6538,6542,6546],{"type":25,"tag":209,"props":6479,"children":6480},{"class":4249},[6481],{"type":30,"value":1577},{"type":25,"tag":209,"props":6483,"children":6484},{"class":4244},[6485],{"type":30,"value":1906},{"type":25,"tag":209,"props":6487,"children":6488},{"class":4249},[6489],{"type":30,"value":230},{"type":25,"tag":209,"props":6491,"children":6492},{"class":4254},[6493],{"type":30,"value":4257},{"type":25,"tag":209,"props":6495,"children":6496},{"class":4249},[6497],{"type":30,"value":326},{"type":25,"tag":209,"props":6499,"children":6500},{"class":4254},[6501],{"type":30,"value":5683},{"type":25,"tag":209,"props":6503,"children":6504},{"class":4249},[6505],{"type":30,"value":326},{"type":25,"tag":209,"props":6507,"children":6508},{"class":4291},[6509],{"type":30,"value":4510},{"type":25,"tag":209,"props":6511,"children":6512},{"class":4249},[6513],{"type":30,"value":230},{"type":25,"tag":209,"props":6515,"children":6516},{"class":4264},[6517],{"type":30,"value":4957},{"type":25,"tag":209,"props":6519,"children":6520},{"class":4249},[6521],{"type":30,"value":230},{"type":25,"tag":209,"props":6523,"children":6524},{"class":4254},[6525],{"type":30,"value":4966},{"type":25,"tag":209,"props":6527,"children":6528},{"class":4249},[6529],{"type":30,"value":326},{"type":25,"tag":209,"props":6531,"children":6532},{"class":4273},[6533],{"type":30,"value":4975},{"type":25,"tag":209,"props":6535,"children":6536},{"class":4249},[6537],{"type":30,"value":4980},{"type":25,"tag":209,"props":6539,"children":6540},{"class":4264},[6541],{"type":30,"value":4985},{"type":25,"tag":209,"props":6543,"children":6544},{"class":4249},[6545],{"type":30,"value":230},{"type":25,"tag":209,"props":6547,"children":6548},{"class":4992},[6549],{"type":30,"value":4995},{"type":25,"tag":209,"props":6551,"children":6552},{"class":211,"line":388},[6553],{"type":25,"tag":209,"props":6554,"children":6555},{"class":4249},[6556],{"type":30,"value":6323},{"type":25,"tag":26,"props":6558,"children":6559},{},[6560,6562,6567],{"type":30,"value":6561},"Because only the pet can be fed or not, we add an if statement, returning ",{"type":25,"tag":33,"props":6563,"children":6564},{},[6565],{"type":30,"value":6566},"false",{"type":30,"value":6568}," 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":25,"tag":538,"props":6570,"children":6572},{"id":6571},"the-template-1",[6573],{"type":30,"value":5045},{"type":25,"tag":26,"props":6575,"children":6576},{},[6577],{"type":30,"value":6578},"Next, let's update the template:",{"type":25,"tag":26,"props":6580,"children":6581},{},[6582],{"type":30,"value":6583},"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":25,"tag":195,"props":6585,"children":6587},{"code":6586,"language":5054,"meta":199},"\u003Cdiv\n  v-if=\"item.type == 'pet'\"\n  class=\"fed-label\"\n>\n  {{ isFed ? '✅' : '❌ NOT' }} FED\n\u003C/div>\n",[6588],{"type":25,"tag":202,"props":6589,"children":6590},{},[6591],{"type":25,"tag":195,"props":6592,"children":6593},{"__ignoreMap":8},[6594,6605,6626,6646,6653,6661],{"type":25,"tag":209,"props":6595,"children":6596},{"class":211,"line":212},[6597,6601],{"type":25,"tag":209,"props":6598,"children":6599},{"class":4249},[6600],{"type":30,"value":2259},{"type":25,"tag":209,"props":6602,"children":6603},{"class":4291},[6604],{"type":30,"value":5127},{"type":25,"tag":209,"props":6606,"children":6607},{"class":211,"line":352},[6608,6612,6617,6621],{"type":25,"tag":209,"props":6609,"children":6610},{"class":4249},[6611],{"type":30,"value":1577},{"type":25,"tag":209,"props":6613,"children":6614},{"class":4992},[6615],{"type":30,"value":6616},"v-if",{"type":25,"tag":209,"props":6618,"children":6619},{"class":4249},[6620],{"type":30,"value":2301},{"type":25,"tag":209,"props":6622,"children":6623},{"class":4394},[6624],{"type":30,"value":6625},"\"item.type == 'pet'\"\n",{"type":25,"tag":209,"props":6627,"children":6628},{"class":211,"line":361},[6629,6633,6637,6641],{"type":25,"tag":209,"props":6630,"children":6631},{"class":4249},[6632],{"type":30,"value":1577},{"type":25,"tag":209,"props":6634,"children":6635},{"class":4992},[6636],{"type":30,"value":5081},{"type":25,"tag":209,"props":6638,"children":6639},{"class":4249},[6640],{"type":30,"value":2301},{"type":25,"tag":209,"props":6642,"children":6643},{"class":4394},[6644],{"type":30,"value":6645},"\"fed-label\"\n",{"type":25,"tag":209,"props":6647,"children":6648},{"class":211,"line":370},[6649],{"type":25,"tag":209,"props":6650,"children":6651},{"class":4249},[6652],{"type":30,"value":2270},{"type":25,"tag":209,"props":6654,"children":6655},{"class":211,"line":379},[6656],{"type":25,"tag":209,"props":6657,"children":6658},{"class":4249},[6659],{"type":30,"value":6660},"  {{ isFed ? '✅' : '❌ NOT' }} FED\n",{"type":25,"tag":209,"props":6662,"children":6663},{"class":211,"line":388},[6664,6668,6672],{"type":25,"tag":209,"props":6665,"children":6666},{"class":4249},[6667],{"type":30,"value":2526},{"type":25,"tag":209,"props":6669,"children":6670},{"class":4291},[6671],{"type":30,"value":2582},{"type":25,"tag":209,"props":6673,"children":6674},{"class":4249},[6675],{"type":30,"value":4957},{"type":25,"tag":538,"props":6677,"children":6679},{"id":6678},"iteration-2-results",[6680],{"type":30,"value":6681},"Iteration 2 Results",{"type":25,"tag":26,"props":6683,"children":6684},{},[6685],{"type":30,"value":6686},"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":25,"tag":26,"props":6688,"children":6689},{},[6690],{"type":30,"value":6691},"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":25,"tag":26,"props":6693,"children":6694},{},[6695],{"type":30,"value":6696},"Same applies to the change that we introduced to the template.",{"type":25,"tag":26,"props":6698,"children":6699},{},[6700,6702,6707],{"type":30,"value":6701},"This all sums up to: we have added a layer of complexity that wasn't there ",{"type":25,"tag":41,"props":6703,"children":6704},{},[6705],{"type":30,"value":6706},"by design",{"type":30,"value":326},{"type":25,"tag":538,"props":6709,"children":6711},{"id":6710},"iteration-3",[6712],{"type":30,"value":6713},"Iteration 3",{"type":25,"tag":26,"props":6715,"children":6716},{},[6717],{"type":30,"value":6718},"Let's take it one step further and add another item type",{"type":25,"tag":26,"props":6720,"children":6721},{},[6722],{"type":25,"tag":69,"props":6723,"children":6726},{"alt":6724,"src":6725},"example app third stage","/blog/extend-components/example-3.png",[],{"type":25,"tag":26,"props":6728,"children":6729},{},[6730,6732,6737],{"type":30,"value":6731},"We have added a new item to our application - this time it's an ",{"type":25,"tag":41,"props":6733,"children":6734},{},[6735],{"type":30,"value":6736},"amulet",{"type":30,"value":326},{"type":25,"tag":26,"props":6739,"children":6740},{},[6741,6743,6748],{"type":30,"value":6742},"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":25,"tag":41,"props":6744,"children":6745},{},[6746],{"type":30,"value":6747},"ability",{"type":30,"value":6749},", and this ability is displayed in place of stats with a completely new design.",{"type":25,"tag":26,"props":6751,"children":6752},{},[6753],{"type":30,"value":6754},"Since we've already started extending our component's prop's type, let's keep going extend it a bit further.",{"type":25,"tag":460,"props":6756,"children":6757},{},[6758],{"type":25,"tag":26,"props":6759,"children":6760},{},[6761,6766],{"type":25,"tag":103,"props":6762,"children":6763},{},[6764],{"type":30,"value":6765},"Side note",{"type":30,"value":6767},": 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":25,"tag":538,"props":6769,"children":6771},{"id":6770},"extend-the-components-props-1",[6772],{"type":30,"value":5611},{"type":25,"tag":195,"props":6774,"children":6776},{"code":6775,"language":1537,"meta":199},"const props = defineProps\u003C{\n  item: Pet|Weapon|Amulet\n}>()\n",[6777],{"type":25,"tag":202,"props":6778,"children":6779},{},[6780],{"type":25,"tag":195,"props":6781,"children":6782},{"__ignoreMap":8},[6783,6818,6854],{"type":25,"tag":209,"props":6784,"children":6785},{"class":211,"line":212},[6786,6790,6794,6798,6802,6806,6810,6814],{"type":25,"tag":209,"props":6787,"children":6788},{"class":4244},[6789],{"type":30,"value":2434},{"type":25,"tag":209,"props":6791,"children":6792},{"class":4249},[6793],{"type":30,"value":230},{"type":25,"tag":209,"props":6795,"children":6796},{"class":4254},[6797],{"type":30,"value":4257},{"type":25,"tag":209,"props":6799,"children":6800},{"class":4249},[6801],{"type":30,"value":230},{"type":25,"tag":209,"props":6803,"children":6804},{"class":4264},[6805],{"type":30,"value":2301},{"type":25,"tag":209,"props":6807,"children":6808},{"class":4249},[6809],{"type":30,"value":230},{"type":25,"tag":209,"props":6811,"children":6812},{"class":4273},[6813],{"type":30,"value":4276},{"type":25,"tag":209,"props":6815,"children":6816},{"class":4249},[6817],{"type":30,"value":4281},{"type":25,"tag":209,"props":6819,"children":6820},{"class":211,"line":352},[6821,6825,6829,6833,6837,6841,6845,6849],{"type":25,"tag":209,"props":6822,"children":6823},{"class":4249},[6824],{"type":30,"value":1577},{"type":25,"tag":209,"props":6826,"children":6827},{"class":4291},[6828],{"type":30,"value":5683},{"type":25,"tag":209,"props":6830,"children":6831},{"class":4249},[6832],{"type":30,"value":1593},{"type":25,"tag":209,"props":6834,"children":6835},{"class":4254},[6836],{"type":30,"value":4326},{"type":25,"tag":209,"props":6838,"children":6839},{"class":4249},[6840],{"type":30,"value":5696},{"type":25,"tag":209,"props":6842,"children":6843},{"class":4254},[6844],{"type":30,"value":5729},{"type":25,"tag":209,"props":6846,"children":6847},{"class":4249},[6848],{"type":30,"value":5696},{"type":25,"tag":209,"props":6850,"children":6851},{"class":4254},[6852],{"type":30,"value":6853},"Amulet\n",{"type":25,"tag":209,"props":6855,"children":6856},{"class":211,"line":361},[6857],{"type":25,"tag":209,"props":6858,"children":6859},{"class":4249},[6860],{"type":30,"value":4310},{"type":25,"tag":26,"props":6862,"children":6863},{},[6864],{"type":30,"value":6865},"Now our item can be any of these three types.",{"type":25,"tag":26,"props":6867,"children":6868},{},[6869,6871,6876],{"type":30,"value":6870},"And here is an expanded ",{"type":25,"tag":33,"props":6872,"children":6873},{},[6874],{"type":30,"value":6875},"Amulet",{"type":30,"value":6877}," type for you to get familiar with:",{"type":25,"tag":195,"props":6879,"children":6881},{"code":6880,"language":1537,"meta":199},"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",[6882],{"type":25,"tag":202,"props":6883,"children":6884},{},[6885],{"type":25,"tag":195,"props":6886,"children":6887},{"__ignoreMap":8},[6888,6915,6935,6954,6973,6993,7000,7028,7057,7076,7095],{"type":25,"tag":209,"props":6889,"children":6890},{"class":211,"line":212},[6891,6895,6899,6903,6907,6911],{"type":25,"tag":209,"props":6892,"children":6893},{"class":4244},[6894],{"type":30,"value":4356},{"type":25,"tag":209,"props":6896,"children":6897},{"class":4249},[6898],{"type":30,"value":230},{"type":25,"tag":209,"props":6900,"children":6901},{"class":4254},[6902],{"type":30,"value":6875},{"type":25,"tag":209,"props":6904,"children":6905},{"class":4249},[6906],{"type":30,"value":230},{"type":25,"tag":209,"props":6908,"children":6909},{"class":4264},[6910],{"type":30,"value":2301},{"type":25,"tag":209,"props":6912,"children":6913},{"class":4249},[6914],{"type":30,"value":1569},{"type":25,"tag":209,"props":6916,"children":6917},{"class":211,"line":352},[6918,6922,6926,6930],{"type":25,"tag":209,"props":6919,"children":6920},{"class":4249},[6921],{"type":30,"value":1577},{"type":25,"tag":209,"props":6923,"children":6924},{"class":4291},[6925],{"type":30,"value":4356},{"type":25,"tag":209,"props":6927,"children":6928},{"class":4249},[6929],{"type":30,"value":1593},{"type":25,"tag":209,"props":6931,"children":6932},{"class":4394},[6933],{"type":30,"value":6934},"'amulet'\n",{"type":25,"tag":209,"props":6936,"children":6937},{"class":211,"line":361},[6938,6942,6946,6950],{"type":25,"tag":209,"props":6939,"children":6940},{"class":4249},[6941],{"type":30,"value":1577},{"type":25,"tag":209,"props":6943,"children":6944},{"class":4291},[6945],{"type":30,"value":4409},{"type":25,"tag":209,"props":6947,"children":6948},{"class":4249},[6949],{"type":30,"value":1593},{"type":25,"tag":209,"props":6951,"children":6952},{"class":4254},[6953],{"type":30,"value":1794},{"type":25,"tag":209,"props":6955,"children":6956},{"class":211,"line":370},[6957,6961,6965,6969],{"type":25,"tag":209,"props":6958,"children":6959},{"class":4249},[6960],{"type":30,"value":1577},{"type":25,"tag":209,"props":6962,"children":6963},{"class":4291},[6964],{"type":30,"value":4429},{"type":25,"tag":209,"props":6966,"children":6967},{"class":4249},[6968],{"type":30,"value":1593},{"type":25,"tag":209,"props":6970,"children":6971},{"class":4254},[6972],{"type":30,"value":1794},{"type":25,"tag":209,"props":6974,"children":6975},{"class":211,"line":379},[6976,6980,6984,6988],{"type":25,"tag":209,"props":6977,"children":6978},{"class":4249},[6979],{"type":30,"value":1577},{"type":25,"tag":209,"props":6981,"children":6982},{"class":4291},[6983],{"type":30,"value":6747},{"type":25,"tag":209,"props":6985,"children":6986},{"class":4249},[6987],{"type":30,"value":1593},{"type":25,"tag":209,"props":6989,"children":6990},{"class":4254},[6991],{"type":30,"value":6992},"Ability\n",{"type":25,"tag":209,"props":6994,"children":6995},{"class":211,"line":388},[6996],{"type":25,"tag":209,"props":6997,"children":6998},{"class":4249},[6999],{"type":30,"value":1822},{"type":25,"tag":209,"props":7001,"children":7002},{"class":211,"line":397},[7003,7007,7011,7016,7020,7024],{"type":25,"tag":209,"props":7004,"children":7005},{"class":4244},[7006],{"type":30,"value":4356},{"type":25,"tag":209,"props":7008,"children":7009},{"class":4249},[7010],{"type":30,"value":230},{"type":25,"tag":209,"props":7012,"children":7013},{"class":4254},[7014],{"type":30,"value":7015},"Ability",{"type":25,"tag":209,"props":7017,"children":7018},{"class":4249},[7019],{"type":30,"value":230},{"type":25,"tag":209,"props":7021,"children":7022},{"class":4264},[7023],{"type":30,"value":2301},{"type":25,"tag":209,"props":7025,"children":7026},{"class":4249},[7027],{"type":30,"value":1569},{"type":25,"tag":209,"props":7029,"children":7030},{"class":211,"line":1896},[7031,7035,7039,7043,7048,7052],{"type":25,"tag":209,"props":7032,"children":7033},{"class":4249},[7034],{"type":30,"value":1577},{"type":25,"tag":209,"props":7036,"children":7037},{"class":4291},[7038],{"type":30,"value":4356},{"type":25,"tag":209,"props":7040,"children":7041},{"class":4249},[7042],{"type":30,"value":1593},{"type":25,"tag":209,"props":7044,"children":7045},{"class":4394},[7046],{"type":30,"value":7047},"'passive'",{"type":25,"tag":209,"props":7049,"children":7050},{"class":4249},[7051],{"type":30,"value":5696},{"type":25,"tag":209,"props":7053,"children":7054},{"class":4394},[7055],{"type":30,"value":7056},"'active'\n",{"type":25,"tag":209,"props":7058,"children":7059},{"class":211,"line":1918},[7060,7064,7068,7072],{"type":25,"tag":209,"props":7061,"children":7062},{"class":4249},[7063],{"type":30,"value":1577},{"type":25,"tag":209,"props":7065,"children":7066},{"class":4291},[7067],{"type":30,"value":4429},{"type":25,"tag":209,"props":7069,"children":7070},{"class":4249},[7071],{"type":30,"value":1593},{"type":25,"tag":209,"props":7073,"children":7074},{"class":4254},[7075],{"type":30,"value":1794},{"type":25,"tag":209,"props":7077,"children":7078},{"class":211,"line":2511},[7079,7083,7087,7091],{"type":25,"tag":209,"props":7080,"children":7081},{"class":4249},[7082],{"type":30,"value":1577},{"type":25,"tag":209,"props":7084,"children":7085},{"class":4291},[7086],{"type":30,"value":4409},{"type":25,"tag":209,"props":7088,"children":7089},{"class":4249},[7090],{"type":30,"value":1593},{"type":25,"tag":209,"props":7092,"children":7093},{"class":4254},[7094],{"type":30,"value":1794},{"type":25,"tag":209,"props":7096,"children":7097},{"class":211,"line":2520},[7098],{"type":25,"tag":209,"props":7099,"children":7100},{"class":4249},[7101],{"type":30,"value":1630},{"type":25,"tag":538,"props":7103,"children":7105},{"id":7104},"the-script-2",[7106],{"type":30,"value":5901},{"type":25,"tag":26,"props":7108,"children":7109},{},[7110],{"type":30,"value":7111},"Now let's see what needs to change in the script:",{"type":25,"tag":26,"props":7113,"children":7114},{},[7115],{"type":30,"value":7116},"Like before, the image portion remains untouched. And the \"fed\" label doesn't require any changes from the last time.",{"type":25,"tag":26,"props":7118,"children":7119},{},[7120],{"type":30,"value":7121},"But we need to add another case to our switch in the stats computed:",{"type":25,"tag":195,"props":7123,"children":7125},{"code":7124,"language":1537,"meta":199},"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",[7126],{"type":25,"tag":202,"props":7127,"children":7128},{},[7129],{"type":25,"tag":195,"props":7130,"children":7131},{"__ignoreMap":8},[7132,7175,7214,7237,7252,7339,7374,7381,7404,7419,7458,7493,7500,7524,7540,7547],{"type":25,"tag":209,"props":7133,"children":7134},{"class":211,"line":212},[7135,7139,7143,7147,7151,7155,7159,7163,7167,7171],{"type":25,"tag":209,"props":7136,"children":7137},{"class":4244},[7138],{"type":30,"value":2434},{"type":25,"tag":209,"props":7140,"children":7141},{"class":4249},[7142],{"type":30,"value":230},{"type":25,"tag":209,"props":7144,"children":7145},{"class":4254},[7146],{"type":30,"value":4706},{"type":25,"tag":209,"props":7148,"children":7149},{"class":4249},[7150],{"type":30,"value":230},{"type":25,"tag":209,"props":7152,"children":7153},{"class":4264},[7154],{"type":30,"value":2301},{"type":25,"tag":209,"props":7156,"children":7157},{"class":4249},[7158],{"type":30,"value":230},{"type":25,"tag":209,"props":7160,"children":7161},{"class":4273},[7162],{"type":30,"value":4607},{"type":25,"tag":209,"props":7164,"children":7165},{"class":4249},[7166],{"type":30,"value":3613},{"type":25,"tag":209,"props":7168,"children":7169},{"class":4244},[7170],{"type":30,"value":3618},{"type":25,"tag":209,"props":7172,"children":7173},{"class":4249},[7174],{"type":30,"value":1569},{"type":25,"tag":209,"props":7176,"children":7177},{"class":211,"line":352},[7178,7182,7186,7190,7194,7198,7202,7206,7210],{"type":25,"tag":209,"props":7179,"children":7180},{"class":4249},[7181],{"type":30,"value":1577},{"type":25,"tag":209,"props":7183,"children":7184},{"class":4244},[7185],{"type":30,"value":5986},{"type":25,"tag":209,"props":7187,"children":7188},{"class":4249},[7189],{"type":30,"value":826},{"type":25,"tag":209,"props":7191,"children":7192},{"class":4254},[7193],{"type":30,"value":4257},{"type":25,"tag":209,"props":7195,"children":7196},{"class":4249},[7197],{"type":30,"value":326},{"type":25,"tag":209,"props":7199,"children":7200},{"class":4254},[7201],{"type":30,"value":5683},{"type":25,"tag":209,"props":7203,"children":7204},{"class":4249},[7205],{"type":30,"value":326},{"type":25,"tag":209,"props":7207,"children":7208},{"class":4291},[7209],{"type":30,"value":4356},{"type":25,"tag":209,"props":7211,"children":7212},{"class":4249},[7213],{"type":30,"value":6015},{"type":25,"tag":209,"props":7215,"children":7216},{"class":211,"line":361},[7217,7221,7225,7229,7233],{"type":25,"tag":209,"props":7218,"children":7219},{"class":4249},[7220],{"type":30,"value":1577},{"type":25,"tag":209,"props":7222,"children":7223},{"class":4244},[7224],{"type":30,"value":6027},{"type":25,"tag":209,"props":7226,"children":7227},{"class":4249},[7228],{"type":30,"value":230},{"type":25,"tag":209,"props":7230,"children":7231},{"class":4394},[7232],{"type":30,"value":4541},{"type":25,"tag":209,"props":7234,"children":7235},{"class":4249},[7236],{"type":30,"value":6040},{"type":25,"tag":209,"props":7238,"children":7239},{"class":211,"line":370},[7240,7244,7248],{"type":25,"tag":209,"props":7241,"children":7242},{"class":4249},[7243],{"type":30,"value":2278},{"type":25,"tag":209,"props":7245,"children":7246},{"class":4244},[7247],{"type":30,"value":1906},{"type":25,"tag":209,"props":7249,"children":7250},{"class":4249},[7251],{"type":30,"value":1569},{"type":25,"tag":209,"props":7253,"children":7254},{"class":211,"line":379},[7255,7259,7263,7267,7271,7275,7279,7283,7287,7291,7295,7299,7303,7307,7311,7315,7319,7323,7327,7331,7335],{"type":25,"tag":209,"props":7256,"children":7257},{"class":4249},[7258],{"type":30,"value":6063},{"type":25,"tag":209,"props":7260,"children":7261},{"class":4394},[7262],{"type":30,"value":4746},{"type":25,"tag":209,"props":7264,"children":7265},{"class":4249},[7266],{"type":30,"value":1593},{"type":25,"tag":209,"props":7268,"children":7269},{"class":4394},[7270],{"type":30,"value":4755},{"type":25,"tag":209,"props":7272,"children":7273},{"class":4244},[7274],{"type":30,"value":4646},{"type":25,"tag":209,"props":7276,"children":7277},{"class":4254},[7278],{"type":30,"value":4257},{"type":25,"tag":209,"props":7280,"children":7281},{"class":4249},[7282],{"type":30,"value":326},{"type":25,"tag":209,"props":7284,"children":7285},{"class":4254},[7286],{"type":30,"value":5683},{"type":25,"tag":209,"props":7288,"children":7289},{"class":4249},[7290],{"type":30,"value":326},{"type":25,"tag":209,"props":7292,"children":7293},{"class":4291},[7294],{"type":30,"value":4449},{"type":25,"tag":209,"props":7296,"children":7297},{"class":4244},[7298],{"type":30,"value":1630},{"type":25,"tag":209,"props":7300,"children":7301},{"class":4394},[7302],{"type":30,"value":4788},{"type":25,"tag":209,"props":7304,"children":7305},{"class":4244},[7306],{"type":30,"value":4646},{"type":25,"tag":209,"props":7308,"children":7309},{"class":4254},[7310],{"type":30,"value":4257},{"type":25,"tag":209,"props":7312,"children":7313},{"class":4249},[7314],{"type":30,"value":326},{"type":25,"tag":209,"props":7316,"children":7317},{"class":4254},[7318],{"type":30,"value":5683},{"type":25,"tag":209,"props":7320,"children":7321},{"class":4249},[7322],{"type":30,"value":326},{"type":25,"tag":209,"props":7324,"children":7325},{"class":4291},[7326],{"type":30,"value":4470},{"type":25,"tag":209,"props":7328,"children":7329},{"class":4244},[7330],{"type":30,"value":1630},{"type":25,"tag":209,"props":7332,"children":7333},{"class":4394},[7334],{"type":30,"value":4755},{"type":25,"tag":209,"props":7336,"children":7337},{"class":4249},[7338],{"type":30,"value":4825},{"type":25,"tag":209,"props":7340,"children":7341},{"class":211,"line":388},[7342,7346,7350,7354,7358,7362,7366,7370],{"type":25,"tag":209,"props":7343,"children":7344},{"class":4249},[7345],{"type":30,"value":6063},{"type":25,"tag":209,"props":7347,"children":7348},{"class":4394},[7349],{"type":30,"value":4837},{"type":25,"tag":209,"props":7351,"children":7352},{"class":4249},[7353],{"type":30,"value":1593},{"type":25,"tag":209,"props":7355,"children":7356},{"class":4254},[7357],{"type":30,"value":4257},{"type":25,"tag":209,"props":7359,"children":7360},{"class":4249},[7361],{"type":30,"value":326},{"type":25,"tag":209,"props":7363,"children":7364},{"class":4254},[7365],{"type":30,"value":5683},{"type":25,"tag":209,"props":7367,"children":7368},{"class":4249},[7369],{"type":30,"value":326},{"type":25,"tag":209,"props":7371,"children":7372},{"class":4291},[7373],{"type":30,"value":4862},{"type":25,"tag":209,"props":7375,"children":7376},{"class":211,"line":397},[7377],{"type":25,"tag":209,"props":7378,"children":7379},{"class":4249},[7380],{"type":30,"value":2517},{"type":25,"tag":209,"props":7382,"children":7383},{"class":211,"line":1896},[7384,7388,7392,7396,7400],{"type":25,"tag":209,"props":7385,"children":7386},{"class":4249},[7387],{"type":30,"value":1577},{"type":25,"tag":209,"props":7389,"children":7390},{"class":4244},[7391],{"type":30,"value":6027},{"type":25,"tag":209,"props":7393,"children":7394},{"class":4249},[7395],{"type":30,"value":230},{"type":25,"tag":209,"props":7397,"children":7398},{"class":4394},[7399],{"type":30,"value":5893},{"type":25,"tag":209,"props":7401,"children":7402},{"class":4249},[7403],{"type":30,"value":6040},{"type":25,"tag":209,"props":7405,"children":7406},{"class":211,"line":1918},[7407,7411,7415],{"type":25,"tag":209,"props":7408,"children":7409},{"class":4249},[7410],{"type":30,"value":2278},{"type":25,"tag":209,"props":7412,"children":7413},{"class":4244},[7414],{"type":30,"value":1906},{"type":25,"tag":209,"props":7416,"children":7417},{"class":4249},[7418],{"type":30,"value":1569},{"type":25,"tag":209,"props":7420,"children":7421},{"class":211,"line":2511},[7422,7426,7430,7434,7438,7442,7446,7450,7454],{"type":25,"tag":209,"props":7423,"children":7424},{"class":4249},[7425],{"type":30,"value":6063},{"type":25,"tag":209,"props":7427,"children":7428},{"class":4394},[7429],{"type":30,"value":6235},{"type":25,"tag":209,"props":7431,"children":7432},{"class":4249},[7433],{"type":30,"value":1593},{"type":25,"tag":209,"props":7435,"children":7436},{"class":4254},[7437],{"type":30,"value":4257},{"type":25,"tag":209,"props":7439,"children":7440},{"class":4249},[7441],{"type":30,"value":326},{"type":25,"tag":209,"props":7443,"children":7444},{"class":4254},[7445],{"type":30,"value":5683},{"type":25,"tag":209,"props":7447,"children":7448},{"class":4249},[7449],{"type":30,"value":326},{"type":25,"tag":209,"props":7451,"children":7452},{"class":4291},[7453],{"type":30,"value":5848},{"type":25,"tag":209,"props":7455,"children":7456},{"class":4249},[7457],{"type":30,"value":4825},{"type":25,"tag":209,"props":7459,"children":7460},{"class":211,"line":2520},[7461,7465,7469,7473,7477,7481,7485,7489],{"type":25,"tag":209,"props":7462,"children":7463},{"class":4249},[7464],{"type":30,"value":6063},{"type":25,"tag":209,"props":7466,"children":7467},{"class":4394},[7468],{"type":30,"value":6275},{"type":25,"tag":209,"props":7470,"children":7471},{"class":4249},[7472],{"type":30,"value":1593},{"type":25,"tag":209,"props":7474,"children":7475},{"class":4254},[7476],{"type":30,"value":4257},{"type":25,"tag":209,"props":7478,"children":7479},{"class":4249},[7480],{"type":30,"value":326},{"type":25,"tag":209,"props":7482,"children":7483},{"class":4254},[7484],{"type":30,"value":5683},{"type":25,"tag":209,"props":7486,"children":7487},{"class":4249},[7488],{"type":30,"value":326},{"type":25,"tag":209,"props":7490,"children":7491},{"class":4291},[7492],{"type":30,"value":6300},{"type":25,"tag":209,"props":7494,"children":7495},{"class":211,"line":2537},[7496],{"type":25,"tag":209,"props":7497,"children":7498},{"class":4249},[7499],{"type":30,"value":2517},{"type":25,"tag":209,"props":7501,"children":7502},{"class":211,"line":2545},[7503,7507,7511,7515,7520],{"type":25,"tag":209,"props":7504,"children":7505},{"class":4249},[7506],{"type":30,"value":1577},{"type":25,"tag":209,"props":7508,"children":7509},{"class":4244},[7510],{"type":30,"value":6027},{"type":25,"tag":209,"props":7512,"children":7513},{"class":4249},[7514],{"type":30,"value":230},{"type":25,"tag":209,"props":7516,"children":7517},{"class":4394},[7518],{"type":30,"value":7519},"'amulet'",{"type":25,"tag":209,"props":7521,"children":7522},{"class":4249},[7523],{"type":30,"value":6040},{"type":25,"tag":209,"props":7525,"children":7526},{"class":211,"line":2571},[7527,7531,7535],{"type":25,"tag":209,"props":7528,"children":7529},{"class":4249},[7530],{"type":30,"value":2278},{"type":25,"tag":209,"props":7532,"children":7533},{"class":4244},[7534],{"type":30,"value":1906},{"type":25,"tag":209,"props":7536,"children":7537},{"class":4249},[7538],{"type":30,"value":7539}," {}\n",{"type":25,"tag":209,"props":7541,"children":7542},{"class":211,"line":2624},[7543],{"type":25,"tag":209,"props":7544,"children":7545},{"class":4249},[7546],{"type":30,"value":6315},{"type":25,"tag":209,"props":7548,"children":7549},{"class":211,"line":2633},[7550],{"type":25,"tag":209,"props":7551,"children":7552},{"class":4249},[7553],{"type":30,"value":6323},{"type":25,"tag":26,"props":7555,"children":7556},{},[7557],{"type":30,"value":7558},"If the item is an amulet, we will return an empty object, so that our for loop in template doesn't render anything.",{"type":25,"tag":26,"props":7560,"children":7561},{},[7562],{"type":30,"value":7563},"Also we'll add a computed for the ability icon style:",{"type":25,"tag":195,"props":7565,"children":7567},{"code":7566,"language":1537,"meta":199},"const abilityIconStyle = computed(() => {\n  if (props.item.type != 'amulet') return {}\n  return {\n    backgroundImage: `url(${props.item.ability.pictureUrl})`\n  }\n})\n",[7568],{"type":25,"tag":202,"props":7569,"children":7570},{},[7571],{"type":25,"tag":195,"props":7572,"children":7573},{"__ignoreMap":8},[7574,7618,7682,7697,7756,7763],{"type":25,"tag":209,"props":7575,"children":7576},{"class":211,"line":212},[7577,7581,7585,7590,7594,7598,7602,7606,7610,7614],{"type":25,"tag":209,"props":7578,"children":7579},{"class":4244},[7580],{"type":30,"value":2434},{"type":25,"tag":209,"props":7582,"children":7583},{"class":4249},[7584],{"type":30,"value":230},{"type":25,"tag":209,"props":7586,"children":7587},{"class":4254},[7588],{"type":30,"value":7589},"abilityIconStyle",{"type":25,"tag":209,"props":7591,"children":7592},{"class":4249},[7593],{"type":30,"value":230},{"type":25,"tag":209,"props":7595,"children":7596},{"class":4264},[7597],{"type":30,"value":2301},{"type":25,"tag":209,"props":7599,"children":7600},{"class":4249},[7601],{"type":30,"value":230},{"type":25,"tag":209,"props":7603,"children":7604},{"class":4273},[7605],{"type":30,"value":4607},{"type":25,"tag":209,"props":7607,"children":7608},{"class":4249},[7609],{"type":30,"value":3613},{"type":25,"tag":209,"props":7611,"children":7612},{"class":4244},[7613],{"type":30,"value":3618},{"type":25,"tag":209,"props":7615,"children":7616},{"class":4249},[7617],{"type":30,"value":1569},{"type":25,"tag":209,"props":7619,"children":7620},{"class":211,"line":352},[7621,7625,7629,7633,7637,7641,7645,7649,7653,7657,7661,7665,7669,7674,7678],{"type":25,"tag":209,"props":7622,"children":7623},{"class":4249},[7624],{"type":30,"value":1577},{"type":25,"tag":209,"props":7626,"children":7627},{"class":4244},[7628],{"type":30,"value":2556},{"type":25,"tag":209,"props":7630,"children":7631},{"class":4249},[7632],{"type":30,"value":826},{"type":25,"tag":209,"props":7634,"children":7635},{"class":4254},[7636],{"type":30,"value":4257},{"type":25,"tag":209,"props":7638,"children":7639},{"class":4249},[7640],{"type":30,"value":326},{"type":25,"tag":209,"props":7642,"children":7643},{"class":4254},[7644],{"type":30,"value":5683},{"type":25,"tag":209,"props":7646,"children":7647},{"class":4249},[7648],{"type":30,"value":326},{"type":25,"tag":209,"props":7650,"children":7651},{"class":4291},[7652],{"type":30,"value":4356},{"type":25,"tag":209,"props":7654,"children":7655},{"class":4249},[7656],{"type":30,"value":230},{"type":25,"tag":209,"props":7658,"children":7659},{"class":4264},[7660],{"type":30,"value":6436},{"type":25,"tag":209,"props":7662,"children":7663},{"class":4249},[7664],{"type":30,"value":230},{"type":25,"tag":209,"props":7666,"children":7667},{"class":4394},[7668],{"type":30,"value":7519},{"type":25,"tag":209,"props":7670,"children":7671},{"class":4249},[7672],{"type":30,"value":7673},") ",{"type":25,"tag":209,"props":7675,"children":7676},{"class":4244},[7677],{"type":30,"value":1906},{"type":25,"tag":209,"props":7679,"children":7680},{"class":4249},[7681],{"type":30,"value":7539},{"type":25,"tag":209,"props":7683,"children":7684},{"class":211,"line":361},[7685,7689,7693],{"type":25,"tag":209,"props":7686,"children":7687},{"class":4249},[7688],{"type":30,"value":1577},{"type":25,"tag":209,"props":7690,"children":7691},{"class":4244},[7692],{"type":30,"value":1906},{"type":25,"tag":209,"props":7694,"children":7695},{"class":4249},[7696],{"type":30,"value":1569},{"type":25,"tag":209,"props":7698,"children":7699},{"class":211,"line":370},[7700,7704,7708,7712,7716,7720,7724,7728,7732,7736,7740,7744,7748,7752],{"type":25,"tag":209,"props":7701,"children":7702},{"class":4249},[7703],{"type":30,"value":2278},{"type":25,"tag":209,"props":7705,"children":7706},{"class":4291},[7707],{"type":30,"value":4632},{"type":25,"tag":209,"props":7709,"children":7710},{"class":4249},[7711],{"type":30,"value":1593},{"type":25,"tag":209,"props":7713,"children":7714},{"class":4394},[7715],{"type":30,"value":4641},{"type":25,"tag":209,"props":7717,"children":7718},{"class":4244},[7719],{"type":30,"value":4646},{"type":25,"tag":209,"props":7721,"children":7722},{"class":4254},[7723],{"type":30,"value":4257},{"type":25,"tag":209,"props":7725,"children":7726},{"class":4249},[7727],{"type":30,"value":326},{"type":25,"tag":209,"props":7729,"children":7730},{"class":4254},[7731],{"type":30,"value":5683},{"type":25,"tag":209,"props":7733,"children":7734},{"class":4249},[7735],{"type":30,"value":326},{"type":25,"tag":209,"props":7737,"children":7738},{"class":4254},[7739],{"type":30,"value":6747},{"type":25,"tag":209,"props":7741,"children":7742},{"class":4249},[7743],{"type":30,"value":326},{"type":25,"tag":209,"props":7745,"children":7746},{"class":4291},[7747],{"type":30,"value":4409},{"type":25,"tag":209,"props":7749,"children":7750},{"class":4244},[7751],{"type":30,"value":1630},{"type":25,"tag":209,"props":7753,"children":7754},{"class":4394},[7755],{"type":30,"value":4675},{"type":25,"tag":209,"props":7757,"children":7758},{"class":211,"line":379},[7759],{"type":25,"tag":209,"props":7760,"children":7761},{"class":4249},[7762],{"type":30,"value":6315},{"type":25,"tag":209,"props":7764,"children":7765},{"class":211,"line":388},[7766],{"type":25,"tag":209,"props":7767,"children":7768},{"class":4249},[7769],{"type":30,"value":6323},{"type":25,"tag":26,"props":7771,"children":7772},{},[7773],{"type":30,"value":7774},"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":25,"tag":538,"props":7776,"children":7778},{"id":7777},"the-template-2",[7779],{"type":30,"value":5045},{"type":25,"tag":26,"props":7781,"children":7782},{},[7783],{"type":30,"value":7784},"Next up, changes to the template:",{"type":25,"tag":195,"props":7786,"children":7788},{"code":7787,"language":5054,"meta":199},"\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",[7789],{"type":25,"tag":202,"props":7790,"children":7791},{},[7792],{"type":25,"tag":195,"props":7793,"children":7794},{"__ignoreMap":8},[7795,7806,7826,7846,7853,7864,7884,7904,7911,7943,7975,7983,7998,8030,8038,8053,8068],{"type":25,"tag":209,"props":7796,"children":7797},{"class":211,"line":212},[7798,7802],{"type":25,"tag":209,"props":7799,"children":7800},{"class":4249},[7801],{"type":30,"value":2259},{"type":25,"tag":209,"props":7803,"children":7804},{"class":4291},[7805],{"type":30,"value":5127},{"type":25,"tag":209,"props":7807,"children":7808},{"class":211,"line":352},[7809,7813,7817,7821],{"type":25,"tag":209,"props":7810,"children":7811},{"class":4249},[7812],{"type":30,"value":1577},{"type":25,"tag":209,"props":7814,"children":7815},{"class":4992},[7816],{"type":30,"value":6616},{"type":25,"tag":209,"props":7818,"children":7819},{"class":4249},[7820],{"type":30,"value":2301},{"type":25,"tag":209,"props":7822,"children":7823},{"class":4394},[7824],{"type":30,"value":7825},"\"item.type == 'amulet'\"\n",{"type":25,"tag":209,"props":7827,"children":7828},{"class":211,"line":361},[7829,7833,7837,7841],{"type":25,"tag":209,"props":7830,"children":7831},{"class":4249},[7832],{"type":30,"value":1577},{"type":25,"tag":209,"props":7834,"children":7835},{"class":4992},[7836],{"type":30,"value":5081},{"type":25,"tag":209,"props":7838,"children":7839},{"class":4249},[7840],{"type":30,"value":2301},{"type":25,"tag":209,"props":7842,"children":7843},{"class":4394},[7844],{"type":30,"value":7845},"\"ability\"\n",{"type":25,"tag":209,"props":7847,"children":7848},{"class":211,"line":370},[7849],{"type":25,"tag":209,"props":7850,"children":7851},{"class":4249},[7852],{"type":30,"value":2270},{"type":25,"tag":209,"props":7854,"children":7855},{"class":211,"line":379},[7856,7860],{"type":25,"tag":209,"props":7857,"children":7858},{"class":4249},[7859],{"type":30,"value":5122},{"type":25,"tag":209,"props":7861,"children":7862},{"class":4291},[7863],{"type":30,"value":5127},{"type":25,"tag":209,"props":7865,"children":7866},{"class":211,"line":388},[7867,7871,7875,7879],{"type":25,"tag":209,"props":7868,"children":7869},{"class":4249},[7870],{"type":30,"value":2278},{"type":25,"tag":209,"props":7872,"children":7873},{"class":4992},[7874],{"type":30,"value":5081},{"type":25,"tag":209,"props":7876,"children":7877},{"class":4249},[7878],{"type":30,"value":2301},{"type":25,"tag":209,"props":7880,"children":7881},{"class":4394},[7882],{"type":30,"value":7883},"\"ability-icon\"\n",{"type":25,"tag":209,"props":7885,"children":7886},{"class":211,"line":397},[7887,7891,7895,7899],{"type":25,"tag":209,"props":7888,"children":7889},{"class":4249},[7890],{"type":30,"value":2278},{"type":25,"tag":209,"props":7892,"children":7893},{"class":4992},[7894],{"type":30,"value":5159},{"type":25,"tag":209,"props":7896,"children":7897},{"class":4249},[7898],{"type":30,"value":2301},{"type":25,"tag":209,"props":7900,"children":7901},{"class":4394},[7902],{"type":30,"value":7903},"\"abilityIconStyle\"\n",{"type":25,"tag":209,"props":7905,"children":7906},{"class":211,"line":1896},[7907],{"type":25,"tag":209,"props":7908,"children":7909},{"class":4249},[7910],{"type":30,"value":5176},{"type":25,"tag":209,"props":7912,"children":7913},{"class":211,"line":1918},[7914,7918,7922,7926,7930,7934,7939],{"type":25,"tag":209,"props":7915,"children":7916},{"class":4249},[7917],{"type":30,"value":5122},{"type":25,"tag":209,"props":7919,"children":7920},{"class":4291},[7921],{"type":30,"value":2582},{"type":25,"tag":209,"props":7923,"children":7924},{"class":4249},[7925],{"type":30,"value":230},{"type":25,"tag":209,"props":7927,"children":7928},{"class":4992},[7929],{"type":30,"value":5081},{"type":25,"tag":209,"props":7931,"children":7932},{"class":4249},[7933],{"type":30,"value":2301},{"type":25,"tag":209,"props":7935,"children":7936},{"class":4394},[7937],{"type":30,"value":7938},"\"ability-info\"",{"type":25,"tag":209,"props":7940,"children":7941},{"class":4249},[7942],{"type":30,"value":2270},{"type":25,"tag":209,"props":7944,"children":7945},{"class":211,"line":2511},[7946,7950,7954,7958,7962,7966,7971],{"type":25,"tag":209,"props":7947,"children":7948},{"class":4249},[7949],{"type":30,"value":2577},{"type":25,"tag":209,"props":7951,"children":7952},{"class":4291},[7953],{"type":30,"value":209},{"type":25,"tag":209,"props":7955,"children":7956},{"class":4249},[7957],{"type":30,"value":230},{"type":25,"tag":209,"props":7959,"children":7960},{"class":4992},[7961],{"type":30,"value":5081},{"type":25,"tag":209,"props":7963,"children":7964},{"class":4249},[7965],{"type":30,"value":2301},{"type":25,"tag":209,"props":7967,"children":7968},{"class":4394},[7969],{"type":30,"value":7970},"\"ability-description\"",{"type":25,"tag":209,"props":7972,"children":7973},{"class":4249},[7974],{"type":30,"value":2270},{"type":25,"tag":209,"props":7976,"children":7977},{"class":211,"line":2520},[7978],{"type":25,"tag":209,"props":7979,"children":7980},{"class":4249},[7981],{"type":30,"value":7982},"      {{ item.ability.type }} ability\n",{"type":25,"tag":209,"props":7984,"children":7985},{"class":211,"line":2537},[7986,7990,7994],{"type":25,"tag":209,"props":7987,"children":7988},{"class":4249},[7989],{"type":30,"value":2639},{"type":25,"tag":209,"props":7991,"children":7992},{"class":4291},[7993],{"type":30,"value":209},{"type":25,"tag":209,"props":7995,"children":7996},{"class":4249},[7997],{"type":30,"value":2270},{"type":25,"tag":209,"props":7999,"children":8000},{"class":211,"line":2545},[8001,8005,8009,8013,8017,8021,8026],{"type":25,"tag":209,"props":8002,"children":8003},{"class":4249},[8004],{"type":30,"value":2577},{"type":25,"tag":209,"props":8006,"children":8007},{"class":4291},[8008],{"type":30,"value":209},{"type":25,"tag":209,"props":8010,"children":8011},{"class":4249},[8012],{"type":30,"value":230},{"type":25,"tag":209,"props":8014,"children":8015},{"class":4992},[8016],{"type":30,"value":5081},{"type":25,"tag":209,"props":8018,"children":8019},{"class":4249},[8020],{"type":30,"value":2301},{"type":25,"tag":209,"props":8022,"children":8023},{"class":4394},[8024],{"type":30,"value":8025},"\"ability-name\"",{"type":25,"tag":209,"props":8027,"children":8028},{"class":4249},[8029],{"type":30,"value":2270},{"type":25,"tag":209,"props":8031,"children":8032},{"class":211,"line":2571},[8033],{"type":25,"tag":209,"props":8034,"children":8035},{"class":4249},[8036],{"type":30,"value":8037},"      {{ item.ability.name }}\n",{"type":25,"tag":209,"props":8039,"children":8040},{"class":211,"line":2624},[8041,8045,8049],{"type":25,"tag":209,"props":8042,"children":8043},{"class":4249},[8044],{"type":30,"value":2639},{"type":25,"tag":209,"props":8046,"children":8047},{"class":4291},[8048],{"type":30,"value":209},{"type":25,"tag":209,"props":8050,"children":8051},{"class":4249},[8052],{"type":30,"value":2270},{"type":25,"tag":209,"props":8054,"children":8055},{"class":211,"line":2633},[8056,8060,8064],{"type":25,"tag":209,"props":8057,"children":8058},{"class":4249},[8059],{"type":30,"value":5391},{"type":25,"tag":209,"props":8061,"children":8062},{"class":4291},[8063],{"type":30,"value":2582},{"type":25,"tag":209,"props":8065,"children":8066},{"class":4249},[8067],{"type":30,"value":2270},{"type":25,"tag":209,"props":8069,"children":8070},{"class":211,"line":2650},[8071,8075,8079],{"type":25,"tag":209,"props":8072,"children":8073},{"class":4249},[8074],{"type":30,"value":2526},{"type":25,"tag":209,"props":8076,"children":8077},{"class":4291},[8078],{"type":30,"value":2582},{"type":25,"tag":209,"props":8080,"children":8081},{"class":4249},[8082],{"type":30,"value":4957},{"type":25,"tag":26,"props":8084,"children":8085},{},[8086],{"type":30,"value":8087},"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":25,"tag":26,"props":8089,"children":8090},{},[8091],{"type":30,"value":8092},"Then, we apply our computed ability icon style and display some information about the ability.",{"type":25,"tag":26,"props":8094,"children":8095},{},[8096],{"type":30,"value":8097},"Like before, we will add styles for all of these elements to our component as well, but I won't include them here.",{"type":25,"tag":538,"props":8099,"children":8101},{"id":8100},"iteration-3-results",[8102],{"type":30,"value":8103},"Iteration 3 Results",{"type":25,"tag":26,"props":8105,"children":8106},{},[8107],{"type":30,"value":8108},"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":25,"tag":26,"props":8110,"children":8111},{},[8112],{"type":30,"value":8113},"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":25,"tag":26,"props":8115,"children":8116},{},[8117],{"type":30,"value":8118},"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":25,"tag":178,"props":8120,"children":8122},{"id":8121},"oop-parallel",[8123],{"type":30,"value":8124},"OOP Parallel",{"type":25,"tag":26,"props":8126,"children":8127},{},[8128],{"type":30,"value":8129},"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":25,"tag":26,"props":8131,"children":8132},{},[8133],{"type":30,"value":8134},"Imagine for a minute that we we're not dealing with a component, but instead with a plain class.",{"type":25,"tag":26,"props":8136,"children":8137},{},[8138],{"type":30,"value":8139},"Here's what our component would look like as a class (after all the applied extensions):",{"type":25,"tag":195,"props":8141,"children":8143},{"code":8142,"language":1537,"meta":199},"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",[8144],{"type":25,"tag":202,"props":8145,"children":8146},{},[8147],{"type":25,"tag":195,"props":8148,"children":8149},{"__ignoreMap":8},[8150,8170,8177,8212,8260,8296,8303,8310,8334,8370,8377,8384,8408,8444,8451,8458,8481,8520,8543,8558,8645,8680,8688,8711,8726,8765,8800,8808,8832,8848,8856,8864,8872,8896,8952,8972,8980,9056,9064,9072,9097,9166,9210,9218],{"type":25,"tag":209,"props":8151,"children":8152},{"class":211,"line":212},[8153,8157,8161,8166],{"type":25,"tag":209,"props":8154,"children":8155},{"class":4244},[8156],{"type":30,"value":5081},{"type":25,"tag":209,"props":8158,"children":8159},{"class":4249},[8160],{"type":30,"value":230},{"type":25,"tag":209,"props":8162,"children":8163},{"class":4254},[8164],{"type":30,"value":8165},"ItemCard",{"type":25,"tag":209,"props":8167,"children":8168},{"class":4249},[8169],{"type":30,"value":1569},{"type":25,"tag":209,"props":8171,"children":8172},{"class":211,"line":352},[8173],{"type":25,"tag":209,"props":8174,"children":8175},{},[8176],{"type":30,"value":1830},{"type":25,"tag":209,"props":8178,"children":8179},{"class":211,"line":361},[8180,8184,8188,8192,8196,8200,8204,8208],{"type":25,"tag":209,"props":8181,"children":8182},{"class":4249},[8183],{"type":30,"value":1577},{"type":25,"tag":209,"props":8185,"children":8186},{"class":4291},[8187],{"type":30,"value":5683},{"type":25,"tag":209,"props":8189,"children":8190},{"class":4249},[8191],{"type":30,"value":1593},{"type":25,"tag":209,"props":8193,"children":8194},{"class":4254},[8195],{"type":30,"value":4326},{"type":25,"tag":209,"props":8197,"children":8198},{"class":4249},[8199],{"type":30,"value":5696},{"type":25,"tag":209,"props":8201,"children":8202},{"class":4254},[8203],{"type":30,"value":5729},{"type":25,"tag":209,"props":8205,"children":8206},{"class":4249},[8207],{"type":30,"value":5696},{"type":25,"tag":209,"props":8209,"children":8210},{"class":4254},[8211],{"type":30,"value":6853},{"type":25,"tag":209,"props":8213,"children":8214},{"class":211,"line":370},[8215,8219,8224,8228,8232,8236,8240,8244,8248,8252,8256],{"type":25,"tag":209,"props":8216,"children":8217},{"class":4249},[8218],{"type":30,"value":1577},{"type":25,"tag":209,"props":8220,"children":8221},{"class":4244},[8222],{"type":30,"value":8223},"constructor",{"type":25,"tag":209,"props":8225,"children":8226},{"class":4249},[8227],{"type":30,"value":1853},{"type":25,"tag":209,"props":8229,"children":8230},{"class":4291},[8231],{"type":30,"value":5683},{"type":25,"tag":209,"props":8233,"children":8234},{"class":4249},[8235],{"type":30,"value":1593},{"type":25,"tag":209,"props":8237,"children":8238},{"class":4254},[8239],{"type":30,"value":4326},{"type":25,"tag":209,"props":8241,"children":8242},{"class":4249},[8243],{"type":30,"value":5696},{"type":25,"tag":209,"props":8245,"children":8246},{"class":4254},[8247],{"type":30,"value":5729},{"type":25,"tag":209,"props":8249,"children":8250},{"class":4249},[8251],{"type":30,"value":5696},{"type":25,"tag":209,"props":8253,"children":8254},{"class":4254},[8255],{"type":30,"value":6875},{"type":25,"tag":209,"props":8257,"children":8258},{"class":4249},[8259],{"type":30,"value":6015},{"type":25,"tag":209,"props":8261,"children":8262},{"class":211,"line":379},[8263,8267,8271,8275,8279,8283,8287,8291],{"type":25,"tag":209,"props":8264,"children":8265},{"class":4249},[8266],{"type":30,"value":2278},{"type":25,"tag":209,"props":8268,"children":8269},{"class":4254},[8270],{"type":30,"value":2600},{"type":25,"tag":209,"props":8272,"children":8273},{"class":4249},[8274],{"type":30,"value":326},{"type":25,"tag":209,"props":8276,"children":8277},{"class":4291},[8278],{"type":30,"value":5683},{"type":25,"tag":209,"props":8280,"children":8281},{"class":4249},[8282],{"type":30,"value":230},{"type":25,"tag":209,"props":8284,"children":8285},{"class":4264},[8286],{"type":30,"value":2301},{"type":25,"tag":209,"props":8288,"children":8289},{"class":4249},[8290],{"type":30,"value":230},{"type":25,"tag":209,"props":8292,"children":8293},{"class":4291},[8294],{"type":30,"value":8295},"item\n",{"type":25,"tag":209,"props":8297,"children":8298},{"class":211,"line":388},[8299],{"type":25,"tag":209,"props":8300,"children":8301},{"class":4249},[8302],{"type":30,"value":6315},{"type":25,"tag":209,"props":8304,"children":8305},{"class":211,"line":397},[8306],{"type":25,"tag":209,"props":8307,"children":8308},{},[8309],{"type":30,"value":1830},{"type":25,"tag":209,"props":8311,"children":8312},{"class":211,"line":1896},[8313,8317,8322,8326,8330],{"type":25,"tag":209,"props":8314,"children":8315},{"class":4249},[8316],{"type":30,"value":1577},{"type":25,"tag":209,"props":8318,"children":8319},{"class":4244},[8320],{"type":30,"value":8321},"get",{"type":25,"tag":209,"props":8323,"children":8324},{"class":4249},[8325],{"type":30,"value":230},{"type":25,"tag":209,"props":8327,"children":8328},{"class":4273},[8329],{"type":30,"value":4429},{"type":25,"tag":209,"props":8331,"children":8332},{"class":4249},[8333],{"type":30,"value":2373},{"type":25,"tag":209,"props":8335,"children":8336},{"class":211,"line":1918},[8337,8341,8345,8349,8353,8357,8361,8365],{"type":25,"tag":209,"props":8338,"children":8339},{"class":4249},[8340],{"type":30,"value":2278},{"type":25,"tag":209,"props":8342,"children":8343},{"class":4244},[8344],{"type":30,"value":1906},{"type":25,"tag":209,"props":8346,"children":8347},{"class":4249},[8348],{"type":30,"value":230},{"type":25,"tag":209,"props":8350,"children":8351},{"class":4254},[8352],{"type":30,"value":2600},{"type":25,"tag":209,"props":8354,"children":8355},{"class":4249},[8356],{"type":30,"value":326},{"type":25,"tag":209,"props":8358,"children":8359},{"class":4254},[8360],{"type":30,"value":5683},{"type":25,"tag":209,"props":8362,"children":8363},{"class":4249},[8364],{"type":30,"value":326},{"type":25,"tag":209,"props":8366,"children":8367},{"class":4291},[8368],{"type":30,"value":8369},"name\n",{"type":25,"tag":209,"props":8371,"children":8372},{"class":211,"line":2511},[8373],{"type":25,"tag":209,"props":8374,"children":8375},{"class":4249},[8376],{"type":30,"value":6315},{"type":25,"tag":209,"props":8378,"children":8379},{"class":211,"line":2520},[8380],{"type":25,"tag":209,"props":8381,"children":8382},{},[8383],{"type":30,"value":1830},{"type":25,"tag":209,"props":8385,"children":8386},{"class":211,"line":2537},[8387,8391,8395,8399,8404],{"type":25,"tag":209,"props":8388,"children":8389},{"class":4249},[8390],{"type":30,"value":1577},{"type":25,"tag":209,"props":8392,"children":8393},{"class":4244},[8394],{"type":30,"value":8321},{"type":25,"tag":209,"props":8396,"children":8397},{"class":4249},[8398],{"type":30,"value":230},{"type":25,"tag":209,"props":8400,"children":8401},{"class":4273},[8402],{"type":30,"value":8403},"image",{"type":25,"tag":209,"props":8405,"children":8406},{"class":4249},[8407],{"type":30,"value":2373},{"type":25,"tag":209,"props":8409,"children":8410},{"class":211,"line":2545},[8411,8415,8419,8423,8427,8431,8435,8439],{"type":25,"tag":209,"props":8412,"children":8413},{"class":4249},[8414],{"type":30,"value":2278},{"type":25,"tag":209,"props":8416,"children":8417},{"class":4244},[8418],{"type":30,"value":1906},{"type":25,"tag":209,"props":8420,"children":8421},{"class":4249},[8422],{"type":30,"value":230},{"type":25,"tag":209,"props":8424,"children":8425},{"class":4254},[8426],{"type":30,"value":2600},{"type":25,"tag":209,"props":8428,"children":8429},{"class":4249},[8430],{"type":30,"value":326},{"type":25,"tag":209,"props":8432,"children":8433},{"class":4254},[8434],{"type":30,"value":5683},{"type":25,"tag":209,"props":8436,"children":8437},{"class":4249},[8438],{"type":30,"value":326},{"type":25,"tag":209,"props":8440,"children":8441},{"class":4291},[8442],{"type":30,"value":8443},"pictureUrl\n",{"type":25,"tag":209,"props":8445,"children":8446},{"class":211,"line":2571},[8447],{"type":25,"tag":209,"props":8448,"children":8449},{"class":4249},[8450],{"type":30,"value":6315},{"type":25,"tag":209,"props":8452,"children":8453},{"class":211,"line":2624},[8454],{"type":25,"tag":209,"props":8455,"children":8456},{},[8457],{"type":30,"value":1830},{"type":25,"tag":209,"props":8459,"children":8460},{"class":211,"line":2633},[8461,8465,8469,8473,8477],{"type":25,"tag":209,"props":8462,"children":8463},{"class":4249},[8464],{"type":30,"value":1577},{"type":25,"tag":209,"props":8466,"children":8467},{"class":4244},[8468],{"type":30,"value":8321},{"type":25,"tag":209,"props":8470,"children":8471},{"class":4249},[8472],{"type":30,"value":230},{"type":25,"tag":209,"props":8474,"children":8475},{"class":4273},[8476],{"type":30,"value":4706},{"type":25,"tag":209,"props":8478,"children":8479},{"class":4249},[8480],{"type":30,"value":2373},{"type":25,"tag":209,"props":8482,"children":8483},{"class":211,"line":2650},[8484,8488,8492,8496,8500,8504,8508,8512,8516],{"type":25,"tag":209,"props":8485,"children":8486},{"class":4249},[8487],{"type":30,"value":2278},{"type":25,"tag":209,"props":8489,"children":8490},{"class":4244},[8491],{"type":30,"value":5986},{"type":25,"tag":209,"props":8493,"children":8494},{"class":4249},[8495],{"type":30,"value":826},{"type":25,"tag":209,"props":8497,"children":8498},{"class":4254},[8499],{"type":30,"value":2600},{"type":25,"tag":209,"props":8501,"children":8502},{"class":4249},[8503],{"type":30,"value":326},{"type":25,"tag":209,"props":8505,"children":8506},{"class":4254},[8507],{"type":30,"value":5683},{"type":25,"tag":209,"props":8509,"children":8510},{"class":4249},[8511],{"type":30,"value":326},{"type":25,"tag":209,"props":8513,"children":8514},{"class":4291},[8515],{"type":30,"value":4356},{"type":25,"tag":209,"props":8517,"children":8518},{"class":4249},[8519],{"type":30,"value":6015},{"type":25,"tag":209,"props":8521,"children":8522},{"class":211,"line":5343},[8523,8527,8531,8535,8539],{"type":25,"tag":209,"props":8524,"children":8525},{"class":4249},[8526],{"type":30,"value":2278},{"type":25,"tag":209,"props":8528,"children":8529},{"class":4244},[8530],{"type":30,"value":6027},{"type":25,"tag":209,"props":8532,"children":8533},{"class":4249},[8534],{"type":30,"value":230},{"type":25,"tag":209,"props":8536,"children":8537},{"class":4394},[8538],{"type":30,"value":4541},{"type":25,"tag":209,"props":8540,"children":8541},{"class":4249},[8542],{"type":30,"value":6040},{"type":25,"tag":209,"props":8544,"children":8545},{"class":211,"line":5385},[8546,8550,8554],{"type":25,"tag":209,"props":8547,"children":8548},{"class":4249},[8549],{"type":30,"value":6063},{"type":25,"tag":209,"props":8551,"children":8552},{"class":4244},[8553],{"type":30,"value":1906},{"type":25,"tag":209,"props":8555,"children":8556},{"class":4249},[8557],{"type":30,"value":1569},{"type":25,"tag":209,"props":8559,"children":8560},{"class":211,"line":5402},[8561,8565,8569,8573,8577,8581,8585,8589,8593,8597,8601,8605,8609,8613,8617,8621,8625,8629,8633,8637,8641],{"type":25,"tag":209,"props":8562,"children":8563},{"class":4249},[8564],{"type":30,"value":2381},{"type":25,"tag":209,"props":8566,"children":8567},{"class":4394},[8568],{"type":30,"value":4746},{"type":25,"tag":209,"props":8570,"children":8571},{"class":4249},[8572],{"type":30,"value":1593},{"type":25,"tag":209,"props":8574,"children":8575},{"class":4394},[8576],{"type":30,"value":4755},{"type":25,"tag":209,"props":8578,"children":8579},{"class":4244},[8580],{"type":30,"value":4646},{"type":25,"tag":209,"props":8582,"children":8583},{"class":4254},[8584],{"type":30,"value":2600},{"type":25,"tag":209,"props":8586,"children":8587},{"class":4249},[8588],{"type":30,"value":326},{"type":25,"tag":209,"props":8590,"children":8591},{"class":4254},[8592],{"type":30,"value":5683},{"type":25,"tag":209,"props":8594,"children":8595},{"class":4249},[8596],{"type":30,"value":326},{"type":25,"tag":209,"props":8598,"children":8599},{"class":4291},[8600],{"type":30,"value":4449},{"type":25,"tag":209,"props":8602,"children":8603},{"class":4244},[8604],{"type":30,"value":1630},{"type":25,"tag":209,"props":8606,"children":8607},{"class":4394},[8608],{"type":30,"value":4788},{"type":25,"tag":209,"props":8610,"children":8611},{"class":4244},[8612],{"type":30,"value":4646},{"type":25,"tag":209,"props":8614,"children":8615},{"class":4254},[8616],{"type":30,"value":2600},{"type":25,"tag":209,"props":8618,"children":8619},{"class":4249},[8620],{"type":30,"value":326},{"type":25,"tag":209,"props":8622,"children":8623},{"class":4254},[8624],{"type":30,"value":5683},{"type":25,"tag":209,"props":8626,"children":8627},{"class":4249},[8628],{"type":30,"value":326},{"type":25,"tag":209,"props":8630,"children":8631},{"class":4291},[8632],{"type":30,"value":4470},{"type":25,"tag":209,"props":8634,"children":8635},{"class":4244},[8636],{"type":30,"value":1630},{"type":25,"tag":209,"props":8638,"children":8639},{"class":4394},[8640],{"type":30,"value":4755},{"type":25,"tag":209,"props":8642,"children":8643},{"class":4249},[8644],{"type":30,"value":4825},{"type":25,"tag":209,"props":8646,"children":8647},{"class":211,"line":5410},[8648,8652,8656,8660,8664,8668,8672,8676],{"type":25,"tag":209,"props":8649,"children":8650},{"class":4249},[8651],{"type":30,"value":2381},{"type":25,"tag":209,"props":8653,"children":8654},{"class":4394},[8655],{"type":30,"value":4837},{"type":25,"tag":209,"props":8657,"children":8658},{"class":4249},[8659],{"type":30,"value":1593},{"type":25,"tag":209,"props":8661,"children":8662},{"class":4254},[8663],{"type":30,"value":2600},{"type":25,"tag":209,"props":8665,"children":8666},{"class":4249},[8667],{"type":30,"value":326},{"type":25,"tag":209,"props":8669,"children":8670},{"class":4254},[8671],{"type":30,"value":5683},{"type":25,"tag":209,"props":8673,"children":8674},{"class":4249},[8675],{"type":30,"value":326},{"type":25,"tag":209,"props":8677,"children":8678},{"class":4291},[8679],{"type":30,"value":4862},{"type":25,"tag":209,"props":8681,"children":8682},{"class":211,"line":5423},[8683],{"type":25,"tag":209,"props":8684,"children":8685},{"class":4249},[8686],{"type":30,"value":8687},"      }\n",{"type":25,"tag":209,"props":8689,"children":8690},{"class":211,"line":5456},[8691,8695,8699,8703,8707],{"type":25,"tag":209,"props":8692,"children":8693},{"class":4249},[8694],{"type":30,"value":2278},{"type":25,"tag":209,"props":8696,"children":8697},{"class":4244},[8698],{"type":30,"value":6027},{"type":25,"tag":209,"props":8700,"children":8701},{"class":4249},[8702],{"type":30,"value":230},{"type":25,"tag":209,"props":8704,"children":8705},{"class":4394},[8706],{"type":30,"value":5893},{"type":25,"tag":209,"props":8708,"children":8709},{"class":4249},[8710],{"type":30,"value":6040},{"type":25,"tag":209,"props":8712,"children":8713},{"class":211,"line":5465},[8714,8718,8722],{"type":25,"tag":209,"props":8715,"children":8716},{"class":4249},[8717],{"type":30,"value":6063},{"type":25,"tag":209,"props":8719,"children":8720},{"class":4244},[8721],{"type":30,"value":1906},{"type":25,"tag":209,"props":8723,"children":8724},{"class":4249},[8725],{"type":30,"value":1569},{"type":25,"tag":209,"props":8727,"children":8728},{"class":211,"line":5481},[8729,8733,8737,8741,8745,8749,8753,8757,8761],{"type":25,"tag":209,"props":8730,"children":8731},{"class":4249},[8732],{"type":30,"value":2381},{"type":25,"tag":209,"props":8734,"children":8735},{"class":4394},[8736],{"type":30,"value":6235},{"type":25,"tag":209,"props":8738,"children":8739},{"class":4249},[8740],{"type":30,"value":1593},{"type":25,"tag":209,"props":8742,"children":8743},{"class":4254},[8744],{"type":30,"value":2600},{"type":25,"tag":209,"props":8746,"children":8747},{"class":4249},[8748],{"type":30,"value":326},{"type":25,"tag":209,"props":8750,"children":8751},{"class":4254},[8752],{"type":30,"value":5683},{"type":25,"tag":209,"props":8754,"children":8755},{"class":4249},[8756],{"type":30,"value":326},{"type":25,"tag":209,"props":8758,"children":8759},{"class":4291},[8760],{"type":30,"value":5848},{"type":25,"tag":209,"props":8762,"children":8763},{"class":4249},[8764],{"type":30,"value":4825},{"type":25,"tag":209,"props":8766,"children":8767},{"class":211,"line":5490},[8768,8772,8776,8780,8784,8788,8792,8796],{"type":25,"tag":209,"props":8769,"children":8770},{"class":4249},[8771],{"type":30,"value":2381},{"type":25,"tag":209,"props":8773,"children":8774},{"class":4394},[8775],{"type":30,"value":6275},{"type":25,"tag":209,"props":8777,"children":8778},{"class":4249},[8779],{"type":30,"value":1593},{"type":25,"tag":209,"props":8781,"children":8782},{"class":4254},[8783],{"type":30,"value":2600},{"type":25,"tag":209,"props":8785,"children":8786},{"class":4249},[8787],{"type":30,"value":326},{"type":25,"tag":209,"props":8789,"children":8790},{"class":4254},[8791],{"type":30,"value":5683},{"type":25,"tag":209,"props":8793,"children":8794},{"class":4249},[8795],{"type":30,"value":326},{"type":25,"tag":209,"props":8797,"children":8798},{"class":4291},[8799],{"type":30,"value":6300},{"type":25,"tag":209,"props":8801,"children":8803},{"class":211,"line":8802},27,[8804],{"type":25,"tag":209,"props":8805,"children":8806},{"class":4249},[8807],{"type":30,"value":8687},{"type":25,"tag":209,"props":8809,"children":8811},{"class":211,"line":8810},28,[8812,8816,8820,8824,8828],{"type":25,"tag":209,"props":8813,"children":8814},{"class":4249},[8815],{"type":30,"value":2278},{"type":25,"tag":209,"props":8817,"children":8818},{"class":4244},[8819],{"type":30,"value":6027},{"type":25,"tag":209,"props":8821,"children":8822},{"class":4249},[8823],{"type":30,"value":230},{"type":25,"tag":209,"props":8825,"children":8826},{"class":4394},[8827],{"type":30,"value":7519},{"type":25,"tag":209,"props":8829,"children":8830},{"class":4249},[8831],{"type":30,"value":6040},{"type":25,"tag":209,"props":8833,"children":8835},{"class":211,"line":8834},29,[8836,8840,8844],{"type":25,"tag":209,"props":8837,"children":8838},{"class":4249},[8839],{"type":30,"value":6063},{"type":25,"tag":209,"props":8841,"children":8842},{"class":4244},[8843],{"type":30,"value":1906},{"type":25,"tag":209,"props":8845,"children":8846},{"class":4249},[8847],{"type":30,"value":7539},{"type":25,"tag":209,"props":8849,"children":8851},{"class":211,"line":8850},30,[8852],{"type":25,"tag":209,"props":8853,"children":8854},{"class":4249},[8855],{"type":30,"value":2517},{"type":25,"tag":209,"props":8857,"children":8859},{"class":211,"line":8858},31,[8860],{"type":25,"tag":209,"props":8861,"children":8862},{"class":4249},[8863],{"type":30,"value":6315},{"type":25,"tag":209,"props":8865,"children":8867},{"class":211,"line":8866},32,[8868],{"type":25,"tag":209,"props":8869,"children":8870},{},[8871],{"type":30,"value":1830},{"type":25,"tag":209,"props":8873,"children":8875},{"class":211,"line":8874},33,[8876,8880,8884,8888,8892],{"type":25,"tag":209,"props":8877,"children":8878},{"class":4249},[8879],{"type":30,"value":1577},{"type":25,"tag":209,"props":8881,"children":8882},{"class":4244},[8883],{"type":30,"value":8321},{"type":25,"tag":209,"props":8885,"children":8886},{"class":4249},[8887],{"type":30,"value":230},{"type":25,"tag":209,"props":8889,"children":8890},{"class":4273},[8891],{"type":30,"value":4892},{"type":25,"tag":209,"props":8893,"children":8894},{"class":4249},[8895],{"type":30,"value":2373},{"type":25,"tag":209,"props":8897,"children":8899},{"class":211,"line":8898},34,[8900,8904,8908,8912,8916,8920,8924,8928,8932,8936,8940,8944,8948],{"type":25,"tag":209,"props":8901,"children":8902},{"class":4249},[8903],{"type":30,"value":2278},{"type":25,"tag":209,"props":8905,"children":8906},{"class":4244},[8907],{"type":30,"value":2556},{"type":25,"tag":209,"props":8909,"children":8910},{"class":4249},[8911],{"type":30,"value":826},{"type":25,"tag":209,"props":8913,"children":8914},{"class":4254},[8915],{"type":30,"value":2600},{"type":25,"tag":209,"props":8917,"children":8918},{"class":4249},[8919],{"type":30,"value":326},{"type":25,"tag":209,"props":8921,"children":8922},{"class":4254},[8923],{"type":30,"value":5683},{"type":25,"tag":209,"props":8925,"children":8926},{"class":4249},[8927],{"type":30,"value":326},{"type":25,"tag":209,"props":8929,"children":8930},{"class":4291},[8931],{"type":30,"value":4356},{"type":25,"tag":209,"props":8933,"children":8934},{"class":4249},[8935],{"type":30,"value":230},{"type":25,"tag":209,"props":8937,"children":8938},{"class":4264},[8939],{"type":30,"value":6436},{"type":25,"tag":209,"props":8941,"children":8942},{"class":4249},[8943],{"type":30,"value":230},{"type":25,"tag":209,"props":8945,"children":8946},{"class":4394},[8947],{"type":30,"value":4541},{"type":25,"tag":209,"props":8949,"children":8950},{"class":4249},[8951],{"type":30,"value":6015},{"type":25,"tag":209,"props":8953,"children":8955},{"class":211,"line":8954},35,[8956,8960,8964,8968],{"type":25,"tag":209,"props":8957,"children":8958},{"class":4249},[8959],{"type":30,"value":6063},{"type":25,"tag":209,"props":8961,"children":8962},{"class":4244},[8963],{"type":30,"value":1906},{"type":25,"tag":209,"props":8965,"children":8966},{"class":4249},[8967],{"type":30,"value":230},{"type":25,"tag":209,"props":8969,"children":8970},{"class":4992},[8971],{"type":30,"value":2311},{"type":25,"tag":209,"props":8973,"children":8975},{"class":211,"line":8974},36,[8976],{"type":25,"tag":209,"props":8977,"children":8978},{"class":4249},[8979],{"type":30,"value":2517},{"type":25,"tag":209,"props":8981,"children":8983},{"class":211,"line":8982},37,[8984,8988,8992,8996,9000,9004,9008,9012,9016,9020,9024,9028,9032,9036,9040,9044,9048,9052],{"type":25,"tag":209,"props":8985,"children":8986},{"class":4249},[8987],{"type":30,"value":2278},{"type":25,"tag":209,"props":8989,"children":8990},{"class":4244},[8991],{"type":30,"value":1906},{"type":25,"tag":209,"props":8993,"children":8994},{"class":4249},[8995],{"type":30,"value":230},{"type":25,"tag":209,"props":8997,"children":8998},{"class":4254},[8999],{"type":30,"value":2600},{"type":25,"tag":209,"props":9001,"children":9002},{"class":4249},[9003],{"type":30,"value":326},{"type":25,"tag":209,"props":9005,"children":9006},{"class":4254},[9007],{"type":30,"value":5683},{"type":25,"tag":209,"props":9009,"children":9010},{"class":4249},[9011],{"type":30,"value":326},{"type":25,"tag":209,"props":9013,"children":9014},{"class":4291},[9015],{"type":30,"value":4510},{"type":25,"tag":209,"props":9017,"children":9018},{"class":4249},[9019],{"type":30,"value":230},{"type":25,"tag":209,"props":9021,"children":9022},{"class":4264},[9023],{"type":30,"value":4957},{"type":25,"tag":209,"props":9025,"children":9026},{"class":4249},[9027],{"type":30,"value":230},{"type":25,"tag":209,"props":9029,"children":9030},{"class":4254},[9031],{"type":30,"value":4966},{"type":25,"tag":209,"props":9033,"children":9034},{"class":4249},[9035],{"type":30,"value":326},{"type":25,"tag":209,"props":9037,"children":9038},{"class":4273},[9039],{"type":30,"value":4975},{"type":25,"tag":209,"props":9041,"children":9042},{"class":4249},[9043],{"type":30,"value":4980},{"type":25,"tag":209,"props":9045,"children":9046},{"class":4264},[9047],{"type":30,"value":4985},{"type":25,"tag":209,"props":9049,"children":9050},{"class":4249},[9051],{"type":30,"value":230},{"type":25,"tag":209,"props":9053,"children":9054},{"class":4992},[9055],{"type":30,"value":4995},{"type":25,"tag":209,"props":9057,"children":9059},{"class":211,"line":9058},38,[9060],{"type":25,"tag":209,"props":9061,"children":9062},{"class":4249},[9063],{"type":30,"value":6315},{"type":25,"tag":209,"props":9065,"children":9067},{"class":211,"line":9066},39,[9068],{"type":25,"tag":209,"props":9069,"children":9070},{},[9071],{"type":30,"value":1830},{"type":25,"tag":209,"props":9073,"children":9075},{"class":211,"line":9074},40,[9076,9080,9084,9088,9093],{"type":25,"tag":209,"props":9077,"children":9078},{"class":4249},[9079],{"type":30,"value":1577},{"type":25,"tag":209,"props":9081,"children":9082},{"class":4244},[9083],{"type":30,"value":8321},{"type":25,"tag":209,"props":9085,"children":9086},{"class":4249},[9087],{"type":30,"value":230},{"type":25,"tag":209,"props":9089,"children":9090},{"class":4273},[9091],{"type":30,"value":9092},"abilityImage",{"type":25,"tag":209,"props":9094,"children":9095},{"class":4249},[9096],{"type":30,"value":2373},{"type":25,"tag":209,"props":9098,"children":9100},{"class":211,"line":9099},41,[9101,9105,9109,9113,9117,9121,9125,9129,9133,9137,9141,9145,9149,9153,9157,9161],{"type":25,"tag":209,"props":9102,"children":9103},{"class":4249},[9104],{"type":30,"value":2278},{"type":25,"tag":209,"props":9106,"children":9107},{"class":4244},[9108],{"type":30,"value":2556},{"type":25,"tag":209,"props":9110,"children":9111},{"class":4249},[9112],{"type":30,"value":826},{"type":25,"tag":209,"props":9114,"children":9115},{"class":4254},[9116],{"type":30,"value":2600},{"type":25,"tag":209,"props":9118,"children":9119},{"class":4249},[9120],{"type":30,"value":326},{"type":25,"tag":209,"props":9122,"children":9123},{"class":4254},[9124],{"type":30,"value":5683},{"type":25,"tag":209,"props":9126,"children":9127},{"class":4249},[9128],{"type":30,"value":326},{"type":25,"tag":209,"props":9130,"children":9131},{"class":4291},[9132],{"type":30,"value":4356},{"type":25,"tag":209,"props":9134,"children":9135},{"class":4249},[9136],{"type":30,"value":230},{"type":25,"tag":209,"props":9138,"children":9139},{"class":4264},[9140],{"type":30,"value":6436},{"type":25,"tag":209,"props":9142,"children":9143},{"class":4249},[9144],{"type":30,"value":230},{"type":25,"tag":209,"props":9146,"children":9147},{"class":4394},[9148],{"type":30,"value":7519},{"type":25,"tag":209,"props":9150,"children":9151},{"class":4249},[9152],{"type":30,"value":7673},{"type":25,"tag":209,"props":9154,"children":9155},{"class":4244},[9156],{"type":30,"value":1906},{"type":25,"tag":209,"props":9158,"children":9159},{"class":4249},[9160],{"type":30,"value":230},{"type":25,"tag":209,"props":9162,"children":9163},{"class":4992},[9164],{"type":30,"value":9165},"null\n",{"type":25,"tag":209,"props":9167,"children":9169},{"class":211,"line":9168},42,[9170,9174,9178,9182,9186,9190,9194,9198,9202,9206],{"type":25,"tag":209,"props":9171,"children":9172},{"class":4249},[9173],{"type":30,"value":2278},{"type":25,"tag":209,"props":9175,"children":9176},{"class":4244},[9177],{"type":30,"value":1906},{"type":25,"tag":209,"props":9179,"children":9180},{"class":4249},[9181],{"type":30,"value":230},{"type":25,"tag":209,"props":9183,"children":9184},{"class":4254},[9185],{"type":30,"value":2600},{"type":25,"tag":209,"props":9187,"children":9188},{"class":4249},[9189],{"type":30,"value":326},{"type":25,"tag":209,"props":9191,"children":9192},{"class":4254},[9193],{"type":30,"value":5683},{"type":25,"tag":209,"props":9195,"children":9196},{"class":4249},[9197],{"type":30,"value":326},{"type":25,"tag":209,"props":9199,"children":9200},{"class":4254},[9201],{"type":30,"value":6747},{"type":25,"tag":209,"props":9203,"children":9204},{"class":4249},[9205],{"type":30,"value":326},{"type":25,"tag":209,"props":9207,"children":9208},{"class":4291},[9209],{"type":30,"value":8443},{"type":25,"tag":209,"props":9211,"children":9213},{"class":211,"line":9212},43,[9214],{"type":25,"tag":209,"props":9215,"children":9216},{"class":4249},[9217],{"type":30,"value":6315},{"type":25,"tag":209,"props":9219,"children":9221},{"class":211,"line":9220},44,[9222],{"type":25,"tag":209,"props":9223,"children":9224},{"class":4249},[9225],{"type":30,"value":1630},{"type":25,"tag":26,"props":9227,"children":9228},{},[9229,9231,9236],{"type":30,"value":9230},"You can see that the constructor here is expecting an item of type ",{"type":25,"tag":33,"props":9232,"children":9233},{},[9234],{"type":30,"value":9235},"Pet|Weapon|Amulet",{"type":30,"value":9237}," and assigns it to the corresponding property with the same type.",{"type":25,"tag":26,"props":9239,"children":9240},{},[9241],{"type":30,"value":9242},"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":25,"tag":26,"props":9244,"children":9245},{},[9246,9248,9253],{"type":30,"value":9247},"And I think that at this point we can all agree that it's a ",{"type":25,"tag":41,"props":9249,"children":9250},{},[9251],{"type":30,"value":9252},"bloody mess",{"type":30,"value":326},{"type":25,"tag":26,"props":9255,"children":9256},{},[9257,9259,9263,9265,9269,9271,9275,9276,9280],{"type":30,"value":9258},"A class should not implement methods that are irrelevant to it. For example, ",{"type":25,"tag":33,"props":9260,"children":9261},{},[9262],{"type":30,"value":9092},{"type":30,"value":9264}," should only exist in the ",{"type":25,"tag":33,"props":9266,"children":9267},{},[9268],{"type":30,"value":6875},{"type":30,"value":9270}," class. And the same goes for the ",{"type":25,"tag":33,"props":9272,"children":9273},{},[9274],{"type":30,"value":4892},{"type":30,"value":4087},{"type":25,"tag":33,"props":9277,"children":9278},{},[9279],{"type":30,"value":4326},{"type":30,"value":326},{"type":25,"tag":26,"props":9282,"children":9283},{},[9284],{"type":30,"value":9285},"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":25,"tag":538,"props":9287,"children":9289},{"id":9288},"abstraction",[9290],{"type":30,"value":9291},"Abstraction",{"type":25,"tag":26,"props":9293,"children":9294},{},[9295],{"type":30,"value":9296},"Let's see how we can implement the abstract class in our case:",{"type":25,"tag":26,"props":9298,"children":9299},{},[9300],{"type":30,"value":9301},"We can take everything that is common for our item types and move it to a separate abstract class:",{"type":25,"tag":195,"props":9303,"children":9305},{"code":9304,"language":1537,"meta":199},"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",[9306],{"type":25,"tag":202,"props":9307,"children":9308},{},[9309],{"type":25,"tag":195,"props":9310,"children":9311},{"__ignoreMap":8},[9312,9341,9384,9391,9414,9449,9456,9463,9486,9521,9528],{"type":25,"tag":209,"props":9313,"children":9314},{"class":211,"line":212},[9315,9320,9324,9328,9332,9337],{"type":25,"tag":209,"props":9316,"children":9317},{"class":4244},[9318],{"type":30,"value":9319},"abstract",{"type":25,"tag":209,"props":9321,"children":9322},{"class":4249},[9323],{"type":30,"value":230},{"type":25,"tag":209,"props":9325,"children":9326},{"class":4244},[9327],{"type":30,"value":5081},{"type":25,"tag":209,"props":9329,"children":9330},{"class":4249},[9331],{"type":30,"value":230},{"type":25,"tag":209,"props":9333,"children":9334},{"class":4254},[9335],{"type":30,"value":9336},"BaseCard",{"type":25,"tag":209,"props":9338,"children":9339},{"class":4249},[9340],{"type":30,"value":1569},{"type":25,"tag":209,"props":9342,"children":9343},{"class":211,"line":352},[9344,9348,9352,9356,9360,9364,9368,9372,9376,9380],{"type":25,"tag":209,"props":9345,"children":9346},{"class":4249},[9347],{"type":30,"value":1577},{"type":25,"tag":209,"props":9349,"children":9350},{"class":4244},[9351],{"type":30,"value":9319},{"type":25,"tag":209,"props":9353,"children":9354},{"class":4249},[9355],{"type":30,"value":230},{"type":25,"tag":209,"props":9357,"children":9358},{"class":4291},[9359],{"type":30,"value":5683},{"type":25,"tag":209,"props":9361,"children":9362},{"class":4249},[9363],{"type":30,"value":1593},{"type":25,"tag":209,"props":9365,"children":9366},{"class":4254},[9367],{"type":30,"value":4326},{"type":25,"tag":209,"props":9369,"children":9370},{"class":4249},[9371],{"type":30,"value":5696},{"type":25,"tag":209,"props":9373,"children":9374},{"class":4254},[9375],{"type":30,"value":5729},{"type":25,"tag":209,"props":9377,"children":9378},{"class":4249},[9379],{"type":30,"value":5696},{"type":25,"tag":209,"props":9381,"children":9382},{"class":4254},[9383],{"type":30,"value":6853},{"type":25,"tag":209,"props":9385,"children":9386},{"class":211,"line":361},[9387],{"type":25,"tag":209,"props":9388,"children":9389},{},[9390],{"type":30,"value":1830},{"type":25,"tag":209,"props":9392,"children":9393},{"class":211,"line":370},[9394,9398,9402,9406,9410],{"type":25,"tag":209,"props":9395,"children":9396},{"class":4249},[9397],{"type":30,"value":1577},{"type":25,"tag":209,"props":9399,"children":9400},{"class":4244},[9401],{"type":30,"value":8321},{"type":25,"tag":209,"props":9403,"children":9404},{"class":4249},[9405],{"type":30,"value":230},{"type":25,"tag":209,"props":9407,"children":9408},{"class":4273},[9409],{"type":30,"value":4429},{"type":25,"tag":209,"props":9411,"children":9412},{"class":4249},[9413],{"type":30,"value":2373},{"type":25,"tag":209,"props":9415,"children":9416},{"class":211,"line":379},[9417,9421,9425,9429,9433,9437,9441,9445],{"type":25,"tag":209,"props":9418,"children":9419},{"class":4249},[9420],{"type":30,"value":2278},{"type":25,"tag":209,"props":9422,"children":9423},{"class":4244},[9424],{"type":30,"value":1906},{"type":25,"tag":209,"props":9426,"children":9427},{"class":4249},[9428],{"type":30,"value":230},{"type":25,"tag":209,"props":9430,"children":9431},{"class":4254},[9432],{"type":30,"value":2600},{"type":25,"tag":209,"props":9434,"children":9435},{"class":4249},[9436],{"type":30,"value":326},{"type":25,"tag":209,"props":9438,"children":9439},{"class":4254},[9440],{"type":30,"value":5683},{"type":25,"tag":209,"props":9442,"children":9443},{"class":4249},[9444],{"type":30,"value":326},{"type":25,"tag":209,"props":9446,"children":9447},{"class":4291},[9448],{"type":30,"value":8369},{"type":25,"tag":209,"props":9450,"children":9451},{"class":211,"line":388},[9452],{"type":25,"tag":209,"props":9453,"children":9454},{"class":4249},[9455],{"type":30,"value":6315},{"type":25,"tag":209,"props":9457,"children":9458},{"class":211,"line":397},[9459],{"type":25,"tag":209,"props":9460,"children":9461},{},[9462],{"type":30,"value":1830},{"type":25,"tag":209,"props":9464,"children":9465},{"class":211,"line":1896},[9466,9470,9474,9478,9482],{"type":25,"tag":209,"props":9467,"children":9468},{"class":4249},[9469],{"type":30,"value":1577},{"type":25,"tag":209,"props":9471,"children":9472},{"class":4244},[9473],{"type":30,"value":8321},{"type":25,"tag":209,"props":9475,"children":9476},{"class":4249},[9477],{"type":30,"value":230},{"type":25,"tag":209,"props":9479,"children":9480},{"class":4273},[9481],{"type":30,"value":8403},{"type":25,"tag":209,"props":9483,"children":9484},{"class":4249},[9485],{"type":30,"value":2373},{"type":25,"tag":209,"props":9487,"children":9488},{"class":211,"line":1918},[9489,9493,9497,9501,9505,9509,9513,9517],{"type":25,"tag":209,"props":9490,"children":9491},{"class":4249},[9492],{"type":30,"value":2278},{"type":25,"tag":209,"props":9494,"children":9495},{"class":4244},[9496],{"type":30,"value":1906},{"type":25,"tag":209,"props":9498,"children":9499},{"class":4249},[9500],{"type":30,"value":230},{"type":25,"tag":209,"props":9502,"children":9503},{"class":4254},[9504],{"type":30,"value":2600},{"type":25,"tag":209,"props":9506,"children":9507},{"class":4249},[9508],{"type":30,"value":326},{"type":25,"tag":209,"props":9510,"children":9511},{"class":4254},[9512],{"type":30,"value":5683},{"type":25,"tag":209,"props":9514,"children":9515},{"class":4249},[9516],{"type":30,"value":326},{"type":25,"tag":209,"props":9518,"children":9519},{"class":4291},[9520],{"type":30,"value":8443},{"type":25,"tag":209,"props":9522,"children":9523},{"class":211,"line":2511},[9524],{"type":25,"tag":209,"props":9525,"children":9526},{"class":4249},[9527],{"type":30,"value":6315},{"type":25,"tag":209,"props":9529,"children":9530},{"class":211,"line":2520},[9531],{"type":25,"tag":209,"props":9532,"children":9533},{"class":4249},[9534],{"type":30,"value":1630},{"type":25,"tag":26,"props":9536,"children":9537},{},[9538,9540,9544],{"type":30,"value":9539},"We declare ",{"type":25,"tag":33,"props":9541,"children":9542},{},[9543],{"type":30,"value":5683},{"type":30,"value":9545}," 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":25,"tag":26,"props":9547,"children":9548},{},[9549,9551,9555,9556,9560],{"type":30,"value":9550},"And we move ",{"type":25,"tag":33,"props":9552,"children":9553},{},[9554],{"type":30,"value":4429},{"type":30,"value":4087},{"type":25,"tag":33,"props":9557,"children":9558},{},[9559],{"type":30,"value":8403},{"type":30,"value":9561}," here too, because those two are common for all of our items.",{"type":25,"tag":26,"props":9563,"children":9564},{},[9565],{"type":30,"value":9566},"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":25,"tag":538,"props":9568,"children":9570},{"id":9569},"pet-class",[9571],{"type":30,"value":9572},"Pet Class",{"type":25,"tag":26,"props":9574,"children":9575},{},[9576],{"type":30,"value":9577},"We'll start with the Pet class",{"type":25,"tag":195,"props":9579,"children":9581},{"code":9580,"language":1537,"meta":199},"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",[9582],{"type":25,"tag":202,"props":9583,"children":9584},{},[9585],{"type":25,"tag":195,"props":9586,"children":9587},{"__ignoreMap":8},[9588,9625,9644,9675,9691,9726,9733,9740,9763,9838,9845,9852,9875,9890,9977,10012,10019,10026],{"type":25,"tag":209,"props":9589,"children":9590},{"class":211,"line":212},[9591,9595,9599,9604,9608,9613,9617,9621],{"type":25,"tag":209,"props":9592,"children":9593},{"class":4244},[9594],{"type":30,"value":5081},{"type":25,"tag":209,"props":9596,"children":9597},{"class":4249},[9598],{"type":30,"value":230},{"type":25,"tag":209,"props":9600,"children":9601},{"class":4254},[9602],{"type":30,"value":9603},"PetCard",{"type":25,"tag":209,"props":9605,"children":9606},{"class":4249},[9607],{"type":30,"value":230},{"type":25,"tag":209,"props":9609,"children":9610},{"class":4244},[9611],{"type":30,"value":9612},"extends",{"type":25,"tag":209,"props":9614,"children":9615},{"class":4249},[9616],{"type":30,"value":230},{"type":25,"tag":209,"props":9618,"children":9619},{"class":4254},[9620],{"type":30,"value":9336},{"type":25,"tag":209,"props":9622,"children":9623},{"class":4249},[9624],{"type":30,"value":1569},{"type":25,"tag":209,"props":9626,"children":9627},{"class":211,"line":352},[9628,9632,9636,9640],{"type":25,"tag":209,"props":9629,"children":9630},{"class":4249},[9631],{"type":30,"value":1577},{"type":25,"tag":209,"props":9633,"children":9634},{"class":4291},[9635],{"type":30,"value":5683},{"type":25,"tag":209,"props":9637,"children":9638},{"class":4249},[9639],{"type":30,"value":1593},{"type":25,"tag":209,"props":9641,"children":9642},{"class":4254},[9643],{"type":30,"value":4302},{"type":25,"tag":209,"props":9645,"children":9646},{"class":211,"line":361},[9647,9651,9655,9659,9663,9667,9671],{"type":25,"tag":209,"props":9648,"children":9649},{"class":4249},[9650],{"type":30,"value":1577},{"type":25,"tag":209,"props":9652,"children":9653},{"class":4244},[9654],{"type":30,"value":8223},{"type":25,"tag":209,"props":9656,"children":9657},{"class":4249},[9658],{"type":30,"value":1853},{"type":25,"tag":209,"props":9660,"children":9661},{"class":4291},[9662],{"type":30,"value":5683},{"type":25,"tag":209,"props":9664,"children":9665},{"class":4249},[9666],{"type":30,"value":1593},{"type":25,"tag":209,"props":9668,"children":9669},{"class":4254},[9670],{"type":30,"value":4326},{"type":25,"tag":209,"props":9672,"children":9673},{"class":4249},[9674],{"type":30,"value":6015},{"type":25,"tag":209,"props":9676,"children":9677},{"class":211,"line":370},[9678,9682,9687],{"type":25,"tag":209,"props":9679,"children":9680},{"class":4249},[9681],{"type":30,"value":2278},{"type":25,"tag":209,"props":9683,"children":9684},{"class":4254},[9685],{"type":30,"value":9686},"super",{"type":25,"tag":209,"props":9688,"children":9689},{"class":4249},[9690],{"type":30,"value":2474},{"type":25,"tag":209,"props":9692,"children":9693},{"class":211,"line":379},[9694,9698,9702,9706,9710,9714,9718,9722],{"type":25,"tag":209,"props":9695,"children":9696},{"class":4249},[9697],{"type":30,"value":2278},{"type":25,"tag":209,"props":9699,"children":9700},{"class":4254},[9701],{"type":30,"value":2600},{"type":25,"tag":209,"props":9703,"children":9704},{"class":4249},[9705],{"type":30,"value":326},{"type":25,"tag":209,"props":9707,"children":9708},{"class":4291},[9709],{"type":30,"value":5683},{"type":25,"tag":209,"props":9711,"children":9712},{"class":4249},[9713],{"type":30,"value":230},{"type":25,"tag":209,"props":9715,"children":9716},{"class":4264},[9717],{"type":30,"value":2301},{"type":25,"tag":209,"props":9719,"children":9720},{"class":4249},[9721],{"type":30,"value":230},{"type":25,"tag":209,"props":9723,"children":9724},{"class":4291},[9725],{"type":30,"value":8295},{"type":25,"tag":209,"props":9727,"children":9728},{"class":211,"line":388},[9729],{"type":25,"tag":209,"props":9730,"children":9731},{"class":4249},[9732],{"type":30,"value":6315},{"type":25,"tag":209,"props":9734,"children":9735},{"class":211,"line":397},[9736],{"type":25,"tag":209,"props":9737,"children":9738},{},[9739],{"type":30,"value":1830},{"type":25,"tag":209,"props":9741,"children":9742},{"class":211,"line":1896},[9743,9747,9751,9755,9759],{"type":25,"tag":209,"props":9744,"children":9745},{"class":4249},[9746],{"type":30,"value":1577},{"type":25,"tag":209,"props":9748,"children":9749},{"class":4244},[9750],{"type":30,"value":8321},{"type":25,"tag":209,"props":9752,"children":9753},{"class":4249},[9754],{"type":30,"value":230},{"type":25,"tag":209,"props":9756,"children":9757},{"class":4273},[9758],{"type":30,"value":4892},{"type":25,"tag":209,"props":9760,"children":9761},{"class":4249},[9762],{"type":30,"value":2373},{"type":25,"tag":209,"props":9764,"children":9765},{"class":211,"line":1918},[9766,9770,9774,9778,9782,9786,9790,9794,9798,9802,9806,9810,9814,9818,9822,9826,9830,9834],{"type":25,"tag":209,"props":9767,"children":9768},{"class":4249},[9769],{"type":30,"value":2278},{"type":25,"tag":209,"props":9771,"children":9772},{"class":4244},[9773],{"type":30,"value":1906},{"type":25,"tag":209,"props":9775,"children":9776},{"class":4249},[9777],{"type":30,"value":230},{"type":25,"tag":209,"props":9779,"children":9780},{"class":4254},[9781],{"type":30,"value":2600},{"type":25,"tag":209,"props":9783,"children":9784},{"class":4249},[9785],{"type":30,"value":326},{"type":25,"tag":209,"props":9787,"children":9788},{"class":4254},[9789],{"type":30,"value":5683},{"type":25,"tag":209,"props":9791,"children":9792},{"class":4249},[9793],{"type":30,"value":326},{"type":25,"tag":209,"props":9795,"children":9796},{"class":4291},[9797],{"type":30,"value":4510},{"type":25,"tag":209,"props":9799,"children":9800},{"class":4249},[9801],{"type":30,"value":230},{"type":25,"tag":209,"props":9803,"children":9804},{"class":4264},[9805],{"type":30,"value":4957},{"type":25,"tag":209,"props":9807,"children":9808},{"class":4249},[9809],{"type":30,"value":230},{"type":25,"tag":209,"props":9811,"children":9812},{"class":4254},[9813],{"type":30,"value":4966},{"type":25,"tag":209,"props":9815,"children":9816},{"class":4249},[9817],{"type":30,"value":326},{"type":25,"tag":209,"props":9819,"children":9820},{"class":4273},[9821],{"type":30,"value":4975},{"type":25,"tag":209,"props":9823,"children":9824},{"class":4249},[9825],{"type":30,"value":4980},{"type":25,"tag":209,"props":9827,"children":9828},{"class":4264},[9829],{"type":30,"value":4985},{"type":25,"tag":209,"props":9831,"children":9832},{"class":4249},[9833],{"type":30,"value":230},{"type":25,"tag":209,"props":9835,"children":9836},{"class":4992},[9837],{"type":30,"value":4995},{"type":25,"tag":209,"props":9839,"children":9840},{"class":211,"line":2511},[9841],{"type":25,"tag":209,"props":9842,"children":9843},{"class":4249},[9844],{"type":30,"value":6315},{"type":25,"tag":209,"props":9846,"children":9847},{"class":211,"line":2520},[9848],{"type":25,"tag":209,"props":9849,"children":9850},{},[9851],{"type":30,"value":1830},{"type":25,"tag":209,"props":9853,"children":9854},{"class":211,"line":2537},[9855,9859,9863,9867,9871],{"type":25,"tag":209,"props":9856,"children":9857},{"class":4249},[9858],{"type":30,"value":1577},{"type":25,"tag":209,"props":9860,"children":9861},{"class":4244},[9862],{"type":30,"value":8321},{"type":25,"tag":209,"props":9864,"children":9865},{"class":4249},[9866],{"type":30,"value":230},{"type":25,"tag":209,"props":9868,"children":9869},{"class":4273},[9870],{"type":30,"value":4706},{"type":25,"tag":209,"props":9872,"children":9873},{"class":4249},[9874],{"type":30,"value":2373},{"type":25,"tag":209,"props":9876,"children":9877},{"class":211,"line":2545},[9878,9882,9886],{"type":25,"tag":209,"props":9879,"children":9880},{"class":4249},[9881],{"type":30,"value":2278},{"type":25,"tag":209,"props":9883,"children":9884},{"class":4244},[9885],{"type":30,"value":1906},{"type":25,"tag":209,"props":9887,"children":9888},{"class":4249},[9889],{"type":30,"value":1569},{"type":25,"tag":209,"props":9891,"children":9892},{"class":211,"line":2571},[9893,9897,9901,9905,9909,9913,9917,9921,9925,9929,9933,9937,9941,9945,9949,9953,9957,9961,9965,9969,9973],{"type":25,"tag":209,"props":9894,"children":9895},{"class":4249},[9896],{"type":30,"value":6063},{"type":25,"tag":209,"props":9898,"children":9899},{"class":4394},[9900],{"type":30,"value":4746},{"type":25,"tag":209,"props":9902,"children":9903},{"class":4249},[9904],{"type":30,"value":1593},{"type":25,"tag":209,"props":9906,"children":9907},{"class":4394},[9908],{"type":30,"value":4755},{"type":25,"tag":209,"props":9910,"children":9911},{"class":4244},[9912],{"type":30,"value":4646},{"type":25,"tag":209,"props":9914,"children":9915},{"class":4254},[9916],{"type":30,"value":2600},{"type":25,"tag":209,"props":9918,"children":9919},{"class":4249},[9920],{"type":30,"value":326},{"type":25,"tag":209,"props":9922,"children":9923},{"class":4254},[9924],{"type":30,"value":5683},{"type":25,"tag":209,"props":9926,"children":9927},{"class":4249},[9928],{"type":30,"value":326},{"type":25,"tag":209,"props":9930,"children":9931},{"class":4291},[9932],{"type":30,"value":4449},{"type":25,"tag":209,"props":9934,"children":9935},{"class":4244},[9936],{"type":30,"value":1630},{"type":25,"tag":209,"props":9938,"children":9939},{"class":4394},[9940],{"type":30,"value":4788},{"type":25,"tag":209,"props":9942,"children":9943},{"class":4244},[9944],{"type":30,"value":4646},{"type":25,"tag":209,"props":9946,"children":9947},{"class":4254},[9948],{"type":30,"value":2600},{"type":25,"tag":209,"props":9950,"children":9951},{"class":4249},[9952],{"type":30,"value":326},{"type":25,"tag":209,"props":9954,"children":9955},{"class":4254},[9956],{"type":30,"value":5683},{"type":25,"tag":209,"props":9958,"children":9959},{"class":4249},[9960],{"type":30,"value":326},{"type":25,"tag":209,"props":9962,"children":9963},{"class":4291},[9964],{"type":30,"value":4470},{"type":25,"tag":209,"props":9966,"children":9967},{"class":4244},[9968],{"type":30,"value":1630},{"type":25,"tag":209,"props":9970,"children":9971},{"class":4394},[9972],{"type":30,"value":4755},{"type":25,"tag":209,"props":9974,"children":9975},{"class":4249},[9976],{"type":30,"value":4825},{"type":25,"tag":209,"props":9978,"children":9979},{"class":211,"line":2624},[9980,9984,9988,9992,9996,10000,10004,10008],{"type":25,"tag":209,"props":9981,"children":9982},{"class":4249},[9983],{"type":30,"value":6063},{"type":25,"tag":209,"props":9985,"children":9986},{"class":4394},[9987],{"type":30,"value":4837},{"type":25,"tag":209,"props":9989,"children":9990},{"class":4249},[9991],{"type":30,"value":1593},{"type":25,"tag":209,"props":9993,"children":9994},{"class":4254},[9995],{"type":30,"value":2600},{"type":25,"tag":209,"props":9997,"children":9998},{"class":4249},[9999],{"type":30,"value":326},{"type":25,"tag":209,"props":10001,"children":10002},{"class":4254},[10003],{"type":30,"value":5683},{"type":25,"tag":209,"props":10005,"children":10006},{"class":4249},[10007],{"type":30,"value":326},{"type":25,"tag":209,"props":10009,"children":10010},{"class":4291},[10011],{"type":30,"value":4862},{"type":25,"tag":209,"props":10013,"children":10014},{"class":211,"line":2633},[10015],{"type":25,"tag":209,"props":10016,"children":10017},{"class":4249},[10018],{"type":30,"value":2517},{"type":25,"tag":209,"props":10020,"children":10021},{"class":211,"line":2650},[10022],{"type":25,"tag":209,"props":10023,"children":10024},{"class":4249},[10025],{"type":30,"value":6315},{"type":25,"tag":209,"props":10027,"children":10028},{"class":211,"line":5343},[10029],{"type":25,"tag":209,"props":10030,"children":10031},{"class":4249},[10032],{"type":30,"value":1630},{"type":25,"tag":26,"props":10034,"children":10035},{},[10036,10038,10042,10044,10048],{"type":30,"value":10037},"We declare item as ",{"type":25,"tag":33,"props":10039,"children":10040},{},[10041],{"type":30,"value":4326},{"type":30,"value":10043}," here. And the constructor expects only a ",{"type":25,"tag":33,"props":10045,"children":10046},{},[10047],{"type":30,"value":4326},{"type":30,"value":326},{"type":25,"tag":26,"props":10050,"children":10051},{},[10052,10054,10058,10060,10064],{"type":30,"value":10053},"This class has an ",{"type":25,"tag":33,"props":10055,"children":10056},{},[10057],{"type":30,"value":4892},{"type":30,"value":10059}," getter, and it implements the version of ",{"type":25,"tag":33,"props":10061,"children":10062},{},[10063],{"type":30,"value":4706},{"type":30,"value":10065}," that is relevant for a pet item.",{"type":25,"tag":26,"props":10067,"children":10068},{},[10069],{"type":30,"value":10070},"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":25,"tag":538,"props":10072,"children":10074},{"id":10073},"weapon-class",[10075],{"type":30,"value":10076},"Weapon Class",{"type":25,"tag":26,"props":10078,"children":10079},{},[10080],{"type":30,"value":10081},"Next let's implement a Weapon class:",{"type":25,"tag":195,"props":10083,"children":10085},{"code":10084,"language":1537,"meta":199},"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",[10086],{"type":25,"tag":202,"props":10087,"children":10088},{},[10089],{"type":25,"tag":195,"props":10090,"children":10091},{"__ignoreMap":8},[10092,10128,10147,10178,10193,10228,10235,10242,10265,10280,10319,10354,10361,10368],{"type":25,"tag":209,"props":10093,"children":10094},{"class":211,"line":212},[10095,10099,10103,10108,10112,10116,10120,10124],{"type":25,"tag":209,"props":10096,"children":10097},{"class":4244},[10098],{"type":30,"value":5081},{"type":25,"tag":209,"props":10100,"children":10101},{"class":4249},[10102],{"type":30,"value":230},{"type":25,"tag":209,"props":10104,"children":10105},{"class":4254},[10106],{"type":30,"value":10107},"WeaponCard",{"type":25,"tag":209,"props":10109,"children":10110},{"class":4249},[10111],{"type":30,"value":230},{"type":25,"tag":209,"props":10113,"children":10114},{"class":4244},[10115],{"type":30,"value":9612},{"type":25,"tag":209,"props":10117,"children":10118},{"class":4249},[10119],{"type":30,"value":230},{"type":25,"tag":209,"props":10121,"children":10122},{"class":4254},[10123],{"type":30,"value":9336},{"type":25,"tag":209,"props":10125,"children":10126},{"class":4249},[10127],{"type":30,"value":1569},{"type":25,"tag":209,"props":10129,"children":10130},{"class":211,"line":352},[10131,10135,10139,10143],{"type":25,"tag":209,"props":10132,"children":10133},{"class":4249},[10134],{"type":30,"value":1577},{"type":25,"tag":209,"props":10136,"children":10137},{"class":4291},[10138],{"type":30,"value":5683},{"type":25,"tag":209,"props":10140,"children":10141},{"class":4249},[10142],{"type":30,"value":1593},{"type":25,"tag":209,"props":10144,"children":10145},{"class":4254},[10146],{"type":30,"value":5701},{"type":25,"tag":209,"props":10148,"children":10149},{"class":211,"line":361},[10150,10154,10158,10162,10166,10170,10174],{"type":25,"tag":209,"props":10151,"children":10152},{"class":4249},[10153],{"type":30,"value":1577},{"type":25,"tag":209,"props":10155,"children":10156},{"class":4244},[10157],{"type":30,"value":8223},{"type":25,"tag":209,"props":10159,"children":10160},{"class":4249},[10161],{"type":30,"value":1853},{"type":25,"tag":209,"props":10163,"children":10164},{"class":4291},[10165],{"type":30,"value":5683},{"type":25,"tag":209,"props":10167,"children":10168},{"class":4249},[10169],{"type":30,"value":1593},{"type":25,"tag":209,"props":10171,"children":10172},{"class":4254},[10173],{"type":30,"value":5729},{"type":25,"tag":209,"props":10175,"children":10176},{"class":4249},[10177],{"type":30,"value":6015},{"type":25,"tag":209,"props":10179,"children":10180},{"class":211,"line":370},[10181,10185,10189],{"type":25,"tag":209,"props":10182,"children":10183},{"class":4249},[10184],{"type":30,"value":2278},{"type":25,"tag":209,"props":10186,"children":10187},{"class":4254},[10188],{"type":30,"value":9686},{"type":25,"tag":209,"props":10190,"children":10191},{"class":4249},[10192],{"type":30,"value":2474},{"type":25,"tag":209,"props":10194,"children":10195},{"class":211,"line":379},[10196,10200,10204,10208,10212,10216,10220,10224],{"type":25,"tag":209,"props":10197,"children":10198},{"class":4249},[10199],{"type":30,"value":2278},{"type":25,"tag":209,"props":10201,"children":10202},{"class":4254},[10203],{"type":30,"value":2600},{"type":25,"tag":209,"props":10205,"children":10206},{"class":4249},[10207],{"type":30,"value":326},{"type":25,"tag":209,"props":10209,"children":10210},{"class":4291},[10211],{"type":30,"value":5683},{"type":25,"tag":209,"props":10213,"children":10214},{"class":4249},[10215],{"type":30,"value":230},{"type":25,"tag":209,"props":10217,"children":10218},{"class":4264},[10219],{"type":30,"value":2301},{"type":25,"tag":209,"props":10221,"children":10222},{"class":4249},[10223],{"type":30,"value":230},{"type":25,"tag":209,"props":10225,"children":10226},{"class":4291},[10227],{"type":30,"value":8295},{"type":25,"tag":209,"props":10229,"children":10230},{"class":211,"line":388},[10231],{"type":25,"tag":209,"props":10232,"children":10233},{"class":4249},[10234],{"type":30,"value":6315},{"type":25,"tag":209,"props":10236,"children":10237},{"class":211,"line":397},[10238],{"type":25,"tag":209,"props":10239,"children":10240},{},[10241],{"type":30,"value":1830},{"type":25,"tag":209,"props":10243,"children":10244},{"class":211,"line":1896},[10245,10249,10253,10257,10261],{"type":25,"tag":209,"props":10246,"children":10247},{"class":4249},[10248],{"type":30,"value":1577},{"type":25,"tag":209,"props":10250,"children":10251},{"class":4244},[10252],{"type":30,"value":8321},{"type":25,"tag":209,"props":10254,"children":10255},{"class":4249},[10256],{"type":30,"value":230},{"type":25,"tag":209,"props":10258,"children":10259},{"class":4273},[10260],{"type":30,"value":4706},{"type":25,"tag":209,"props":10262,"children":10263},{"class":4249},[10264],{"type":30,"value":2373},{"type":25,"tag":209,"props":10266,"children":10267},{"class":211,"line":1918},[10268,10272,10276],{"type":25,"tag":209,"props":10269,"children":10270},{"class":4249},[10271],{"type":30,"value":2278},{"type":25,"tag":209,"props":10273,"children":10274},{"class":4244},[10275],{"type":30,"value":1906},{"type":25,"tag":209,"props":10277,"children":10278},{"class":4249},[10279],{"type":30,"value":1569},{"type":25,"tag":209,"props":10281,"children":10282},{"class":211,"line":2511},[10283,10287,10291,10295,10299,10303,10307,10311,10315],{"type":25,"tag":209,"props":10284,"children":10285},{"class":4249},[10286],{"type":30,"value":6063},{"type":25,"tag":209,"props":10288,"children":10289},{"class":4394},[10290],{"type":30,"value":6235},{"type":25,"tag":209,"props":10292,"children":10293},{"class":4249},[10294],{"type":30,"value":1593},{"type":25,"tag":209,"props":10296,"children":10297},{"class":4254},[10298],{"type":30,"value":2600},{"type":25,"tag":209,"props":10300,"children":10301},{"class":4249},[10302],{"type":30,"value":326},{"type":25,"tag":209,"props":10304,"children":10305},{"class":4254},[10306],{"type":30,"value":5683},{"type":25,"tag":209,"props":10308,"children":10309},{"class":4249},[10310],{"type":30,"value":326},{"type":25,"tag":209,"props":10312,"children":10313},{"class":4291},[10314],{"type":30,"value":5848},{"type":25,"tag":209,"props":10316,"children":10317},{"class":4249},[10318],{"type":30,"value":4825},{"type":25,"tag":209,"props":10320,"children":10321},{"class":211,"line":2520},[10322,10326,10330,10334,10338,10342,10346,10350],{"type":25,"tag":209,"props":10323,"children":10324},{"class":4249},[10325],{"type":30,"value":6063},{"type":25,"tag":209,"props":10327,"children":10328},{"class":4394},[10329],{"type":30,"value":6275},{"type":25,"tag":209,"props":10331,"children":10332},{"class":4249},[10333],{"type":30,"value":1593},{"type":25,"tag":209,"props":10335,"children":10336},{"class":4254},[10337],{"type":30,"value":2600},{"type":25,"tag":209,"props":10339,"children":10340},{"class":4249},[10341],{"type":30,"value":326},{"type":25,"tag":209,"props":10343,"children":10344},{"class":4254},[10345],{"type":30,"value":5683},{"type":25,"tag":209,"props":10347,"children":10348},{"class":4249},[10349],{"type":30,"value":326},{"type":25,"tag":209,"props":10351,"children":10352},{"class":4291},[10353],{"type":30,"value":6300},{"type":25,"tag":209,"props":10355,"children":10356},{"class":211,"line":2537},[10357],{"type":25,"tag":209,"props":10358,"children":10359},{"class":4249},[10360],{"type":30,"value":2517},{"type":25,"tag":209,"props":10362,"children":10363},{"class":211,"line":2545},[10364],{"type":25,"tag":209,"props":10365,"children":10366},{"class":4249},[10367],{"type":30,"value":6315},{"type":25,"tag":209,"props":10369,"children":10370},{"class":211,"line":2571},[10371],{"type":25,"tag":209,"props":10372,"children":10373},{"class":4249},[10374],{"type":30,"value":1630},{"type":25,"tag":26,"props":10376,"children":10377},{},[10378,10380,10384],{"type":30,"value":10379},"Here - similarly - we expect only a ",{"type":25,"tag":33,"props":10381,"children":10382},{},[10383],{"type":30,"value":5729},{"type":30,"value":10385}," and implement the relevant version of the stats. Again - no conditions, everything lean and simple.",{"type":25,"tag":538,"props":10387,"children":10389},{"id":10388},"amulet-class",[10390],{"type":30,"value":10391},"Amulet Class",{"type":25,"tag":26,"props":10393,"children":10394},{},[10395],{"type":30,"value":10396},"And lastly let's implement the Amulet class:",{"type":25,"tag":195,"props":10398,"children":10400},{"code":10399,"language":1537,"meta":199},"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",[10401],{"type":25,"tag":202,"props":10402,"children":10403},{},[10404],{"type":25,"tag":195,"props":10405,"children":10406},{"__ignoreMap":8},[10407,10452,10471,10502,10517,10552,10559,10566,10589,10632,10639],{"type":25,"tag":209,"props":10408,"children":10409},{"class":211,"line":212},[10410,10415,10419,10423,10427,10432,10436,10440,10444,10448],{"type":25,"tag":209,"props":10411,"children":10412},{"class":4244},[10413],{"type":30,"value":10414},"export",{"type":25,"tag":209,"props":10416,"children":10417},{"class":4249},[10418],{"type":30,"value":230},{"type":25,"tag":209,"props":10420,"children":10421},{"class":4244},[10422],{"type":30,"value":5081},{"type":25,"tag":209,"props":10424,"children":10425},{"class":4249},[10426],{"type":30,"value":230},{"type":25,"tag":209,"props":10428,"children":10429},{"class":4254},[10430],{"type":30,"value":10431},"AmuletCard",{"type":25,"tag":209,"props":10433,"children":10434},{"class":4249},[10435],{"type":30,"value":230},{"type":25,"tag":209,"props":10437,"children":10438},{"class":4244},[10439],{"type":30,"value":9612},{"type":25,"tag":209,"props":10441,"children":10442},{"class":4249},[10443],{"type":30,"value":230},{"type":25,"tag":209,"props":10445,"children":10446},{"class":4254},[10447],{"type":30,"value":9336},{"type":25,"tag":209,"props":10449,"children":10450},{"class":4249},[10451],{"type":30,"value":1569},{"type":25,"tag":209,"props":10453,"children":10454},{"class":211,"line":352},[10455,10459,10463,10467],{"type":25,"tag":209,"props":10456,"children":10457},{"class":4249},[10458],{"type":30,"value":1577},{"type":25,"tag":209,"props":10460,"children":10461},{"class":4291},[10462],{"type":30,"value":5683},{"type":25,"tag":209,"props":10464,"children":10465},{"class":4249},[10466],{"type":30,"value":1593},{"type":25,"tag":209,"props":10468,"children":10469},{"class":4254},[10470],{"type":30,"value":6853},{"type":25,"tag":209,"props":10472,"children":10473},{"class":211,"line":361},[10474,10478,10482,10486,10490,10494,10498],{"type":25,"tag":209,"props":10475,"children":10476},{"class":4249},[10477],{"type":30,"value":1577},{"type":25,"tag":209,"props":10479,"children":10480},{"class":4244},[10481],{"type":30,"value":8223},{"type":25,"tag":209,"props":10483,"children":10484},{"class":4249},[10485],{"type":30,"value":1853},{"type":25,"tag":209,"props":10487,"children":10488},{"class":4291},[10489],{"type":30,"value":5683},{"type":25,"tag":209,"props":10491,"children":10492},{"class":4249},[10493],{"type":30,"value":1593},{"type":25,"tag":209,"props":10495,"children":10496},{"class":4254},[10497],{"type":30,"value":6875},{"type":25,"tag":209,"props":10499,"children":10500},{"class":4249},[10501],{"type":30,"value":6015},{"type":25,"tag":209,"props":10503,"children":10504},{"class":211,"line":370},[10505,10509,10513],{"type":25,"tag":209,"props":10506,"children":10507},{"class":4249},[10508],{"type":30,"value":2278},{"type":25,"tag":209,"props":10510,"children":10511},{"class":4254},[10512],{"type":30,"value":9686},{"type":25,"tag":209,"props":10514,"children":10515},{"class":4249},[10516],{"type":30,"value":2474},{"type":25,"tag":209,"props":10518,"children":10519},{"class":211,"line":379},[10520,10524,10528,10532,10536,10540,10544,10548],{"type":25,"tag":209,"props":10521,"children":10522},{"class":4249},[10523],{"type":30,"value":2278},{"type":25,"tag":209,"props":10525,"children":10526},{"class":4254},[10527],{"type":30,"value":2600},{"type":25,"tag":209,"props":10529,"children":10530},{"class":4249},[10531],{"type":30,"value":326},{"type":25,"tag":209,"props":10533,"children":10534},{"class":4291},[10535],{"type":30,"value":5683},{"type":25,"tag":209,"props":10537,"children":10538},{"class":4249},[10539],{"type":30,"value":230},{"type":25,"tag":209,"props":10541,"children":10542},{"class":4264},[10543],{"type":30,"value":2301},{"type":25,"tag":209,"props":10545,"children":10546},{"class":4249},[10547],{"type":30,"value":230},{"type":25,"tag":209,"props":10549,"children":10550},{"class":4291},[10551],{"type":30,"value":8295},{"type":25,"tag":209,"props":10553,"children":10554},{"class":211,"line":388},[10555],{"type":25,"tag":209,"props":10556,"children":10557},{"class":4249},[10558],{"type":30,"value":6315},{"type":25,"tag":209,"props":10560,"children":10561},{"class":211,"line":397},[10562],{"type":25,"tag":209,"props":10563,"children":10564},{},[10565],{"type":30,"value":1830},{"type":25,"tag":209,"props":10567,"children":10568},{"class":211,"line":1896},[10569,10573,10577,10581,10585],{"type":25,"tag":209,"props":10570,"children":10571},{"class":4249},[10572],{"type":30,"value":1577},{"type":25,"tag":209,"props":10574,"children":10575},{"class":4244},[10576],{"type":30,"value":8321},{"type":25,"tag":209,"props":10578,"children":10579},{"class":4249},[10580],{"type":30,"value":230},{"type":25,"tag":209,"props":10582,"children":10583},{"class":4273},[10584],{"type":30,"value":9092},{"type":25,"tag":209,"props":10586,"children":10587},{"class":4249},[10588],{"type":30,"value":2373},{"type":25,"tag":209,"props":10590,"children":10591},{"class":211,"line":1918},[10592,10596,10600,10604,10608,10612,10616,10620,10624,10628],{"type":25,"tag":209,"props":10593,"children":10594},{"class":4249},[10595],{"type":30,"value":2278},{"type":25,"tag":209,"props":10597,"children":10598},{"class":4244},[10599],{"type":30,"value":1906},{"type":25,"tag":209,"props":10601,"children":10602},{"class":4249},[10603],{"type":30,"value":230},{"type":25,"tag":209,"props":10605,"children":10606},{"class":4254},[10607],{"type":30,"value":2600},{"type":25,"tag":209,"props":10609,"children":10610},{"class":4249},[10611],{"type":30,"value":326},{"type":25,"tag":209,"props":10613,"children":10614},{"class":4254},[10615],{"type":30,"value":5683},{"type":25,"tag":209,"props":10617,"children":10618},{"class":4249},[10619],{"type":30,"value":326},{"type":25,"tag":209,"props":10621,"children":10622},{"class":4254},[10623],{"type":30,"value":6747},{"type":25,"tag":209,"props":10625,"children":10626},{"class":4249},[10627],{"type":30,"value":326},{"type":25,"tag":209,"props":10629,"children":10630},{"class":4291},[10631],{"type":30,"value":8443},{"type":25,"tag":209,"props":10633,"children":10634},{"class":211,"line":2511},[10635],{"type":25,"tag":209,"props":10636,"children":10637},{"class":4249},[10638],{"type":30,"value":6315},{"type":25,"tag":209,"props":10640,"children":10641},{"class":211,"line":2520},[10642],{"type":25,"tag":209,"props":10643,"children":10644},{"class":4249},[10645],{"type":30,"value":1630},{"type":25,"tag":26,"props":10647,"children":10648},{},[10649],{"type":30,"value":10650},"Same principle here.",{"type":25,"tag":538,"props":10652,"children":10654},{"id":10653},"the-takeaway-from-our-oop-experiment",[10655],{"type":30,"value":10656},"The Takeaway from our OOP Experiment",{"type":25,"tag":26,"props":10658,"children":10659},{},[10660],{"type":30,"value":10661},"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":25,"tag":26,"props":10663,"children":10664},{},[10665],{"type":30,"value":10666},"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":25,"tag":133,"props":10668,"children":10669},{},[10670,10681,10692],{"type":25,"tag":137,"props":10671,"children":10672},{},[10673,10675,10679],{"type":30,"value":10674},"Everything about pets is in the ",{"type":25,"tag":33,"props":10676,"children":10677},{},[10678],{"type":30,"value":4326},{"type":30,"value":10680}," class,",{"type":25,"tag":137,"props":10682,"children":10683},{},[10684,10686,10690],{"type":30,"value":10685},"Everything about weapons - in ",{"type":25,"tag":33,"props":10687,"children":10688},{},[10689],{"type":30,"value":5729},{"type":30,"value":10691},",",{"type":25,"tag":137,"props":10693,"children":10694},{},[10695,10697],{"type":30,"value":10696},"And amulets - in ",{"type":25,"tag":33,"props":10698,"children":10699},{},[10700],{"type":30,"value":6875},{"type":25,"tag":26,"props":10702,"children":10703},{},[10704],{"type":30,"value":10705},"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":25,"tag":178,"props":10707,"children":10709},{"id":10708},"apply-the-same-oop-principles-to-our-component",[10710],{"type":30,"value":10711},"Apply the Same OOP Principles to our Component",{"type":25,"tag":26,"props":10713,"children":10714},{},[10715],{"type":30,"value":10716},"How do we do that? Very simple. We will do the same as we did with the classes earlier.",{"type":25,"tag":26,"props":10718,"children":10719},{},[10720],{"type":30,"value":10721},"We'll create a separate component for each item type and a single Base component that they all will extend.",{"type":25,"tag":26,"props":10723,"children":10724},{},[10725,10727,10732],{"type":30,"value":10726},"We'll call it ",{"type":25,"tag":33,"props":10728,"children":10729},{},[10730],{"type":30,"value":10731},"ItemBase",{"type":30,"value":326},{"type":25,"tag":538,"props":10734,"children":10736},{"id":10735},"base-script",[10737],{"type":30,"value":10738},"Base Script",{"type":25,"tag":26,"props":10740,"children":10741},{},[10742],{"type":30,"value":10743},"Let's start with the base component's script.",{"type":25,"tag":26,"props":10745,"children":10746},{},[10747],{"type":30,"value":10748},"Here's what its script will look like:",{"type":25,"tag":195,"props":10750,"children":10752},{"code":10751,"language":1537,"meta":199},"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",[10753],{"type":25,"tag":202,"props":10754,"children":10755},{},[10756],{"type":25,"tag":195,"props":10757,"children":10758},{"__ignoreMap":8},[10759,10794,10813,10832,10885,10893,10900,10943,10986],{"type":25,"tag":209,"props":10760,"children":10761},{"class":211,"line":212},[10762,10766,10770,10774,10778,10782,10786,10790],{"type":25,"tag":209,"props":10763,"children":10764},{"class":4244},[10765],{"type":30,"value":2434},{"type":25,"tag":209,"props":10767,"children":10768},{"class":4249},[10769],{"type":30,"value":230},{"type":25,"tag":209,"props":10771,"children":10772},{"class":4254},[10773],{"type":30,"value":4257},{"type":25,"tag":209,"props":10775,"children":10776},{"class":4249},[10777],{"type":30,"value":230},{"type":25,"tag":209,"props":10779,"children":10780},{"class":4264},[10781],{"type":30,"value":2301},{"type":25,"tag":209,"props":10783,"children":10784},{"class":4249},[10785],{"type":30,"value":230},{"type":25,"tag":209,"props":10787,"children":10788},{"class":4273},[10789],{"type":30,"value":4276},{"type":25,"tag":209,"props":10791,"children":10792},{"class":4249},[10793],{"type":30,"value":4281},{"type":25,"tag":209,"props":10795,"children":10796},{"class":211,"line":352},[10797,10801,10805,10809],{"type":25,"tag":209,"props":10798,"children":10799},{"class":4249},[10800],{"type":30,"value":1577},{"type":25,"tag":209,"props":10802,"children":10803},{"class":4291},[10804],{"type":30,"value":4429},{"type":25,"tag":209,"props":10806,"children":10807},{"class":4249},[10808],{"type":30,"value":1593},{"type":25,"tag":209,"props":10810,"children":10811},{"class":4254},[10812],{"type":30,"value":1794},{"type":25,"tag":209,"props":10814,"children":10815},{"class":211,"line":361},[10816,10820,10824,10828],{"type":25,"tag":209,"props":10817,"children":10818},{"class":4249},[10819],{"type":30,"value":1577},{"type":25,"tag":209,"props":10821,"children":10822},{"class":4291},[10823],{"type":30,"value":4409},{"type":25,"tag":209,"props":10825,"children":10826},{"class":4249},[10827],{"type":30,"value":1593},{"type":25,"tag":209,"props":10829,"children":10830},{"class":4254},[10831],{"type":30,"value":1794},{"type":25,"tag":209,"props":10833,"children":10834},{"class":211,"line":370},[10835,10839,10843,10847,10851,10856,10860,10864,10868,10872,10876,10881],{"type":25,"tag":209,"props":10836,"children":10837},{"class":4249},[10838],{"type":30,"value":1577},{"type":25,"tag":209,"props":10840,"children":10841},{"class":4291},[10842],{"type":30,"value":4706},{"type":25,"tag":209,"props":10844,"children":10845},{"class":4244},[10846],{"type":30,"value":1588},{"type":25,"tag":209,"props":10848,"children":10849},{"class":4249},[10850],{"type":30,"value":1593},{"type":25,"tag":209,"props":10852,"children":10853},{"class":4254},[10854],{"type":30,"value":10855},"Record",{"type":25,"tag":209,"props":10857,"children":10858},{"class":4249},[10859],{"type":30,"value":2259},{"type":25,"tag":209,"props":10861,"children":10862},{"class":4254},[10863],{"type":30,"value":1876},{"type":25,"tag":209,"props":10865,"children":10866},{"class":4249},[10867],{"type":30,"value":1227},{"type":25,"tag":209,"props":10869,"children":10870},{"class":4254},[10871],{"type":30,"value":1876},{"type":25,"tag":209,"props":10873,"children":10874},{"class":4249},[10875],{"type":30,"value":5696},{"type":25,"tag":209,"props":10877,"children":10878},{"class":4254},[10879],{"type":30,"value":10880},"number",{"type":25,"tag":209,"props":10882,"children":10883},{"class":4249},[10884],{"type":30,"value":2270},{"type":25,"tag":209,"props":10886,"children":10887},{"class":211,"line":379},[10888],{"type":25,"tag":209,"props":10889,"children":10890},{"class":4249},[10891],{"type":30,"value":10892},"}>()\n",{"type":25,"tag":209,"props":10894,"children":10895},{"class":211,"line":388},[10896],{"type":25,"tag":209,"props":10897,"children":10898},{},[10899],{"type":30,"value":1830},{"type":25,"tag":209,"props":10901,"children":10902},{"class":211,"line":397},[10903,10907,10911,10915,10919,10923,10927,10931,10935,10939],{"type":25,"tag":209,"props":10904,"children":10905},{"class":4244},[10906],{"type":30,"value":2434},{"type":25,"tag":209,"props":10908,"children":10909},{"class":4249},[10910],{"type":30,"value":230},{"type":25,"tag":209,"props":10912,"children":10913},{"class":4254},[10914],{"type":30,"value":4590},{"type":25,"tag":209,"props":10916,"children":10917},{"class":4249},[10918],{"type":30,"value":230},{"type":25,"tag":209,"props":10920,"children":10921},{"class":4264},[10922],{"type":30,"value":2301},{"type":25,"tag":209,"props":10924,"children":10925},{"class":4249},[10926],{"type":30,"value":230},{"type":25,"tag":209,"props":10928,"children":10929},{"class":4273},[10930],{"type":30,"value":4607},{"type":25,"tag":209,"props":10932,"children":10933},{"class":4249},[10934],{"type":30,"value":3613},{"type":25,"tag":209,"props":10936,"children":10937},{"class":4244},[10938],{"type":30,"value":3618},{"type":25,"tag":209,"props":10940,"children":10941},{"class":4249},[10942],{"type":30,"value":4620},{"type":25,"tag":209,"props":10944,"children":10945},{"class":211,"line":1896},[10946,10950,10954,10958,10962,10966,10970,10974,10978,10982],{"type":25,"tag":209,"props":10947,"children":10948},{"class":4249},[10949],{"type":30,"value":1577},{"type":25,"tag":209,"props":10951,"children":10952},{"class":4291},[10953],{"type":30,"value":4632},{"type":25,"tag":209,"props":10955,"children":10956},{"class":4249},[10957],{"type":30,"value":1593},{"type":25,"tag":209,"props":10959,"children":10960},{"class":4394},[10961],{"type":30,"value":4641},{"type":25,"tag":209,"props":10963,"children":10964},{"class":4244},[10965],{"type":30,"value":4646},{"type":25,"tag":209,"props":10967,"children":10968},{"class":4254},[10969],{"type":30,"value":4257},{"type":25,"tag":209,"props":10971,"children":10972},{"class":4249},[10973],{"type":30,"value":326},{"type":25,"tag":209,"props":10975,"children":10976},{"class":4291},[10977],{"type":30,"value":4409},{"type":25,"tag":209,"props":10979,"children":10980},{"class":4244},[10981],{"type":30,"value":1630},{"type":25,"tag":209,"props":10983,"children":10984},{"class":4394},[10985],{"type":30,"value":4675},{"type":25,"tag":209,"props":10987,"children":10988},{"class":211,"line":1918},[10989],{"type":25,"tag":209,"props":10990,"children":10991},{"class":4249},[10992],{"type":30,"value":10993},"}))",{"type":25,"tag":26,"props":10995,"children":10996},{},[10997],{"type":30,"value":10998},"We can move the computed image style in here, since it's the same for all items.",{"type":25,"tag":26,"props":11000,"children":11001},{},[11002],{"type":30,"value":11003},"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":25,"tag":26,"props":11005,"children":11006},{},[11007],{"type":30,"value":11008},"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":25,"tag":26,"props":11010,"children":11011},{},[11012],{"type":30,"value":11013},"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":25,"tag":26,"props":11015,"children":11016},{},[11017],{"type":30,"value":11018},"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":25,"tag":538,"props":11020,"children":11022},{"id":11021},"base-template",[11023],{"type":30,"value":11024},"Base Template",{"type":25,"tag":26,"props":11026,"children":11027},{},[11028],{"type":30,"value":11029},"Here's our base component's template:",{"type":25,"tag":26,"props":11031,"children":11032},{},[11033],{"type":30,"value":11034},"The main thing to notice here is that we're adding a slot.",{"type":25,"tag":26,"props":11036,"children":11037},{},[11038],{"type":30,"value":11039},"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":25,"tag":195,"props":11041,"children":11043},{"code":11042,"language":5054,"meta":199},"\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",[11044],{"type":25,"tag":202,"props":11045,"children":11046},{},[11047],{"type":25,"tag":195,"props":11048,"children":11049},{"__ignoreMap":8},[11050,11081,11088,11099,11118,11137,11144,11168,11175,11208,11219,11238,11257,11265,11305,11344,11359,11374,11381,11398,11405],{"type":25,"tag":209,"props":11051,"children":11052},{"class":211,"line":212},[11053,11057,11061,11065,11069,11073,11077],{"type":25,"tag":209,"props":11054,"children":11055},{"class":4249},[11056],{"type":30,"value":2259},{"type":25,"tag":209,"props":11058,"children":11059},{"class":4291},[11060],{"type":30,"value":2582},{"type":25,"tag":209,"props":11062,"children":11063},{"class":4249},[11064],{"type":30,"value":230},{"type":25,"tag":209,"props":11066,"children":11067},{"class":4992},[11068],{"type":30,"value":5081},{"type":25,"tag":209,"props":11070,"children":11071},{"class":4249},[11072],{"type":30,"value":2301},{"type":25,"tag":209,"props":11074,"children":11075},{"class":4394},[11076],{"type":30,"value":5090},{"type":25,"tag":209,"props":11078,"children":11079},{"class":4249},[11080],{"type":30,"value":2270},{"type":25,"tag":209,"props":11082,"children":11083},{"class":211,"line":352},[11084],{"type":25,"tag":209,"props":11085,"children":11086},{},[11087],{"type":30,"value":1830},{"type":25,"tag":209,"props":11089,"children":11090},{"class":211,"line":361},[11091,11095],{"type":25,"tag":209,"props":11092,"children":11093},{"class":4249},[11094],{"type":30,"value":5122},{"type":25,"tag":209,"props":11096,"children":11097},{"class":4291},[11098],{"type":30,"value":5127},{"type":25,"tag":209,"props":11100,"children":11101},{"class":211,"line":370},[11102,11106,11110,11114],{"type":25,"tag":209,"props":11103,"children":11104},{"class":4249},[11105],{"type":30,"value":2278},{"type":25,"tag":209,"props":11107,"children":11108},{"class":4992},[11109],{"type":30,"value":5081},{"type":25,"tag":209,"props":11111,"children":11112},{"class":4249},[11113],{"type":30,"value":2301},{"type":25,"tag":209,"props":11115,"children":11116},{"class":4394},[11117],{"type":30,"value":5147},{"type":25,"tag":209,"props":11119,"children":11120},{"class":211,"line":379},[11121,11125,11129,11133],{"type":25,"tag":209,"props":11122,"children":11123},{"class":4249},[11124],{"type":30,"value":2278},{"type":25,"tag":209,"props":11126,"children":11127},{"class":4992},[11128],{"type":30,"value":5159},{"type":25,"tag":209,"props":11130,"children":11131},{"class":4249},[11132],{"type":30,"value":2301},{"type":25,"tag":209,"props":11134,"children":11135},{"class":4394},[11136],{"type":30,"value":5168},{"type":25,"tag":209,"props":11138,"children":11139},{"class":211,"line":388},[11140],{"type":25,"tag":209,"props":11141,"children":11142},{"class":4249},[11143],{"type":30,"value":5176},{"type":25,"tag":209,"props":11145,"children":11146},{"class":211,"line":397},[11147,11151,11155,11160,11164],{"type":25,"tag":209,"props":11148,"children":11149},{"class":4249},[11150],{"type":30,"value":5122},{"type":25,"tag":209,"props":11152,"children":11153},{"class":4291},[11154],{"type":30,"value":538},{"type":25,"tag":209,"props":11156,"children":11157},{"class":4249},[11158],{"type":30,"value":11159},">{{ name }}\u003C/",{"type":25,"tag":209,"props":11161,"children":11162},{"class":4291},[11163],{"type":30,"value":538},{"type":25,"tag":209,"props":11165,"children":11166},{"class":4249},[11167],{"type":30,"value":2270},{"type":25,"tag":209,"props":11169,"children":11170},{"class":211,"line":1896},[11171],{"type":25,"tag":209,"props":11172,"children":11173},{},[11174],{"type":30,"value":1830},{"type":25,"tag":209,"props":11176,"children":11177},{"class":211,"line":1918},[11178,11182,11187,11191,11195,11199,11204],{"type":25,"tag":209,"props":11179,"children":11180},{"class":4249},[11181],{"type":30,"value":5122},{"type":25,"tag":209,"props":11183,"children":11184},{"class":4291},[11185],{"type":30,"value":11186},"template",{"type":25,"tag":209,"props":11188,"children":11189},{"class":4249},[11190],{"type":30,"value":230},{"type":25,"tag":209,"props":11192,"children":11193},{"class":4992},[11194],{"type":30,"value":6616},{"type":25,"tag":209,"props":11196,"children":11197},{"class":4249},[11198],{"type":30,"value":2301},{"type":25,"tag":209,"props":11200,"children":11201},{"class":4394},[11202],{"type":30,"value":11203},"\"stats\"",{"type":25,"tag":209,"props":11205,"children":11206},{"class":4249},[11207],{"type":30,"value":2270},{"type":25,"tag":209,"props":11209,"children":11210},{"class":211,"line":2511},[11211,11215],{"type":25,"tag":209,"props":11212,"children":11213},{"class":4249},[11214],{"type":30,"value":2577},{"type":25,"tag":209,"props":11216,"children":11217},{"class":4291},[11218],{"type":30,"value":5127},{"type":25,"tag":209,"props":11220,"children":11221},{"class":211,"line":2520},[11222,11226,11230,11234],{"type":25,"tag":209,"props":11223,"children":11224},{"class":4249},[11225],{"type":30,"value":6063},{"type":25,"tag":209,"props":11227,"children":11228},{"class":4992},[11229],{"type":30,"value":5261},{"type":25,"tag":209,"props":11231,"children":11232},{"class":4249},[11233],{"type":30,"value":2301},{"type":25,"tag":209,"props":11235,"children":11236},{"class":4394},[11237],{"type":30,"value":5270},{"type":25,"tag":209,"props":11239,"children":11240},{"class":211,"line":2537},[11241,11245,11249,11253],{"type":25,"tag":209,"props":11242,"children":11243},{"class":4249},[11244],{"type":30,"value":6063},{"type":25,"tag":209,"props":11246,"children":11247},{"class":4992},[11248],{"type":30,"value":5282},{"type":25,"tag":209,"props":11250,"children":11251},{"class":4249},[11252],{"type":30,"value":2301},{"type":25,"tag":209,"props":11254,"children":11255},{"class":4394},[11256],{"type":30,"value":5291},{"type":25,"tag":209,"props":11258,"children":11259},{"class":211,"line":2545},[11260],{"type":25,"tag":209,"props":11261,"children":11262},{"class":4249},[11263],{"type":30,"value":11264},"    >\n",{"type":25,"tag":209,"props":11266,"children":11267},{"class":211,"line":2571},[11268,11273,11277,11281,11285,11289,11293,11297,11301],{"type":25,"tag":209,"props":11269,"children":11270},{"class":4249},[11271],{"type":30,"value":11272},"      \u003C",{"type":25,"tag":209,"props":11274,"children":11275},{"class":4291},[11276],{"type":30,"value":209},{"type":25,"tag":209,"props":11278,"children":11279},{"class":4249},[11280],{"type":30,"value":230},{"type":25,"tag":209,"props":11282,"children":11283},{"class":4992},[11284],{"type":30,"value":5081},{"type":25,"tag":209,"props":11286,"children":11287},{"class":4249},[11288],{"type":30,"value":2301},{"type":25,"tag":209,"props":11290,"children":11291},{"class":4394},[11292],{"type":30,"value":5327},{"type":25,"tag":209,"props":11294,"children":11295},{"class":4249},[11296],{"type":30,"value":5332},{"type":25,"tag":209,"props":11298,"children":11299},{"class":4291},[11300],{"type":30,"value":209},{"type":25,"tag":209,"props":11302,"children":11303},{"class":4249},[11304],{"type":30,"value":2270},{"type":25,"tag":209,"props":11306,"children":11307},{"class":211,"line":2624},[11308,11312,11316,11320,11324,11328,11332,11336,11340],{"type":25,"tag":209,"props":11309,"children":11310},{"class":4249},[11311],{"type":30,"value":11272},{"type":25,"tag":209,"props":11313,"children":11314},{"class":4291},[11315],{"type":30,"value":209},{"type":25,"tag":209,"props":11317,"children":11318},{"class":4249},[11319],{"type":30,"value":230},{"type":25,"tag":209,"props":11321,"children":11322},{"class":4992},[11323],{"type":30,"value":5081},{"type":25,"tag":209,"props":11325,"children":11326},{"class":4249},[11327],{"type":30,"value":2301},{"type":25,"tag":209,"props":11329,"children":11330},{"class":4394},[11331],{"type":30,"value":5369},{"type":25,"tag":209,"props":11333,"children":11334},{"class":4249},[11335],{"type":30,"value":5374},{"type":25,"tag":209,"props":11337,"children":11338},{"class":4291},[11339],{"type":30,"value":209},{"type":25,"tag":209,"props":11341,"children":11342},{"class":4249},[11343],{"type":30,"value":2270},{"type":25,"tag":209,"props":11345,"children":11346},{"class":211,"line":2633},[11347,11351,11355],{"type":25,"tag":209,"props":11348,"children":11349},{"class":4249},[11350],{"type":30,"value":2639},{"type":25,"tag":209,"props":11352,"children":11353},{"class":4291},[11354],{"type":30,"value":2582},{"type":25,"tag":209,"props":11356,"children":11357},{"class":4249},[11358],{"type":30,"value":2270},{"type":25,"tag":209,"props":11360,"children":11361},{"class":211,"line":2650},[11362,11366,11370],{"type":25,"tag":209,"props":11363,"children":11364},{"class":4249},[11365],{"type":30,"value":5391},{"type":25,"tag":209,"props":11367,"children":11368},{"class":4291},[11369],{"type":30,"value":11186},{"type":25,"tag":209,"props":11371,"children":11372},{"class":4249},[11373],{"type":30,"value":2270},{"type":25,"tag":209,"props":11375,"children":11376},{"class":211,"line":5343},[11377],{"type":25,"tag":209,"props":11378,"children":11379},{},[11380],{"type":30,"value":1830},{"type":25,"tag":209,"props":11382,"children":11383},{"class":211,"line":5385},[11384,11388,11393],{"type":25,"tag":209,"props":11385,"children":11386},{"class":4249},[11387],{"type":30,"value":5122},{"type":25,"tag":209,"props":11389,"children":11390},{"class":4291},[11391],{"type":30,"value":11392},"slot",{"type":25,"tag":209,"props":11394,"children":11395},{"class":4249},[11396],{"type":30,"value":11397}," />\n",{"type":25,"tag":209,"props":11399,"children":11400},{"class":211,"line":5402},[11401],{"type":25,"tag":209,"props":11402,"children":11403},{},[11404],{"type":30,"value":1830},{"type":25,"tag":209,"props":11406,"children":11407},{"class":211,"line":5410},[11408,11412,11416],{"type":25,"tag":209,"props":11409,"children":11410},{"class":4249},[11411],{"type":30,"value":2526},{"type":25,"tag":209,"props":11413,"children":11414},{"class":4291},[11415],{"type":30,"value":2582},{"type":25,"tag":209,"props":11417,"children":11418},{"class":4249},[11419],{"type":30,"value":4957},{"type":25,"tag":26,"props":11421,"children":11422},{},[11423],{"type":30,"value":11424},"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":25,"tag":26,"props":11426,"children":11427},{},[11428],{"type":30,"value":11429},"Now let's implement our \"derived\" components.",{"type":25,"tag":538,"props":11431,"children":11433},{"id":11432},"pet-component",[11434],{"type":30,"value":11435},"Pet Component",{"type":25,"tag":26,"props":11437,"children":11438},{},[11439],{"type":30,"value":11440},"The script:",{"type":25,"tag":195,"props":11442,"children":11444},{"code":11443,"language":1537,"meta":199},"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",[11445],{"type":25,"tag":202,"props":11446,"children":11447},{},[11448],{"type":25,"tag":195,"props":11449,"children":11450},{"__ignoreMap":8},[11451,11486,11505,11512,11519,11562,11649,11684,11691,11698,11741,11808],{"type":25,"tag":209,"props":11452,"children":11453},{"class":211,"line":212},[11454,11458,11462,11466,11470,11474,11478,11482],{"type":25,"tag":209,"props":11455,"children":11456},{"class":4244},[11457],{"type":30,"value":2434},{"type":25,"tag":209,"props":11459,"children":11460},{"class":4249},[11461],{"type":30,"value":230},{"type":25,"tag":209,"props":11463,"children":11464},{"class":4254},[11465],{"type":30,"value":4257},{"type":25,"tag":209,"props":11467,"children":11468},{"class":4249},[11469],{"type":30,"value":230},{"type":25,"tag":209,"props":11471,"children":11472},{"class":4264},[11473],{"type":30,"value":2301},{"type":25,"tag":209,"props":11475,"children":11476},{"class":4249},[11477],{"type":30,"value":230},{"type":25,"tag":209,"props":11479,"children":11480},{"class":4273},[11481],{"type":30,"value":4276},{"type":25,"tag":209,"props":11483,"children":11484},{"class":4249},[11485],{"type":30,"value":4281},{"type":25,"tag":209,"props":11487,"children":11488},{"class":211,"line":352},[11489,11493,11497,11501],{"type":25,"tag":209,"props":11490,"children":11491},{"class":4249},[11492],{"type":30,"value":1577},{"type":25,"tag":209,"props":11494,"children":11495},{"class":4291},[11496],{"type":30,"value":4188},{"type":25,"tag":209,"props":11498,"children":11499},{"class":4249},[11500],{"type":30,"value":1593},{"type":25,"tag":209,"props":11502,"children":11503},{"class":4254},[11504],{"type":30,"value":4302},{"type":25,"tag":209,"props":11506,"children":11507},{"class":211,"line":361},[11508],{"type":25,"tag":209,"props":11509,"children":11510},{"class":4249},[11511],{"type":30,"value":10892},{"type":25,"tag":209,"props":11513,"children":11514},{"class":211,"line":370},[11515],{"type":25,"tag":209,"props":11516,"children":11517},{},[11518],{"type":30,"value":1830},{"type":25,"tag":209,"props":11520,"children":11521},{"class":211,"line":379},[11522,11526,11530,11534,11538,11542,11546,11550,11554,11558],{"type":25,"tag":209,"props":11523,"children":11524},{"class":4244},[11525],{"type":30,"value":2434},{"type":25,"tag":209,"props":11527,"children":11528},{"class":4249},[11529],{"type":30,"value":230},{"type":25,"tag":209,"props":11531,"children":11532},{"class":4254},[11533],{"type":30,"value":4706},{"type":25,"tag":209,"props":11535,"children":11536},{"class":4249},[11537],{"type":30,"value":230},{"type":25,"tag":209,"props":11539,"children":11540},{"class":4264},[11541],{"type":30,"value":2301},{"type":25,"tag":209,"props":11543,"children":11544},{"class":4249},[11545],{"type":30,"value":230},{"type":25,"tag":209,"props":11547,"children":11548},{"class":4273},[11549],{"type":30,"value":4607},{"type":25,"tag":209,"props":11551,"children":11552},{"class":4249},[11553],{"type":30,"value":3613},{"type":25,"tag":209,"props":11555,"children":11556},{"class":4244},[11557],{"type":30,"value":3618},{"type":25,"tag":209,"props":11559,"children":11560},{"class":4249},[11561],{"type":30,"value":4620},{"type":25,"tag":209,"props":11563,"children":11564},{"class":211,"line":388},[11565,11569,11573,11577,11581,11585,11589,11593,11597,11601,11605,11609,11613,11617,11621,11625,11629,11633,11637,11641,11645],{"type":25,"tag":209,"props":11566,"children":11567},{"class":4249},[11568],{"type":30,"value":1577},{"type":25,"tag":209,"props":11570,"children":11571},{"class":4394},[11572],{"type":30,"value":4746},{"type":25,"tag":209,"props":11574,"children":11575},{"class":4249},[11576],{"type":30,"value":1593},{"type":25,"tag":209,"props":11578,"children":11579},{"class":4394},[11580],{"type":30,"value":4755},{"type":25,"tag":209,"props":11582,"children":11583},{"class":4244},[11584],{"type":30,"value":4646},{"type":25,"tag":209,"props":11586,"children":11587},{"class":4254},[11588],{"type":30,"value":4257},{"type":25,"tag":209,"props":11590,"children":11591},{"class":4249},[11592],{"type":30,"value":326},{"type":25,"tag":209,"props":11594,"children":11595},{"class":4254},[11596],{"type":30,"value":4188},{"type":25,"tag":209,"props":11598,"children":11599},{"class":4249},[11600],{"type":30,"value":326},{"type":25,"tag":209,"props":11602,"children":11603},{"class":4291},[11604],{"type":30,"value":4449},{"type":25,"tag":209,"props":11606,"children":11607},{"class":4244},[11608],{"type":30,"value":1630},{"type":25,"tag":209,"props":11610,"children":11611},{"class":4394},[11612],{"type":30,"value":4788},{"type":25,"tag":209,"props":11614,"children":11615},{"class":4244},[11616],{"type":30,"value":4646},{"type":25,"tag":209,"props":11618,"children":11619},{"class":4254},[11620],{"type":30,"value":4257},{"type":25,"tag":209,"props":11622,"children":11623},{"class":4249},[11624],{"type":30,"value":326},{"type":25,"tag":209,"props":11626,"children":11627},{"class":4254},[11628],{"type":30,"value":4188},{"type":25,"tag":209,"props":11630,"children":11631},{"class":4249},[11632],{"type":30,"value":326},{"type":25,"tag":209,"props":11634,"children":11635},{"class":4291},[11636],{"type":30,"value":4470},{"type":25,"tag":209,"props":11638,"children":11639},{"class":4244},[11640],{"type":30,"value":1630},{"type":25,"tag":209,"props":11642,"children":11643},{"class":4394},[11644],{"type":30,"value":4755},{"type":25,"tag":209,"props":11646,"children":11647},{"class":4249},[11648],{"type":30,"value":4825},{"type":25,"tag":209,"props":11650,"children":11651},{"class":211,"line":397},[11652,11656,11660,11664,11668,11672,11676,11680],{"type":25,"tag":209,"props":11653,"children":11654},{"class":4249},[11655],{"type":30,"value":1577},{"type":25,"tag":209,"props":11657,"children":11658},{"class":4394},[11659],{"type":30,"value":4837},{"type":25,"tag":209,"props":11661,"children":11662},{"class":4249},[11663],{"type":30,"value":1593},{"type":25,"tag":209,"props":11665,"children":11666},{"class":4254},[11667],{"type":30,"value":4257},{"type":25,"tag":209,"props":11669,"children":11670},{"class":4249},[11671],{"type":30,"value":326},{"type":25,"tag":209,"props":11673,"children":11674},{"class":4254},[11675],{"type":30,"value":4188},{"type":25,"tag":209,"props":11677,"children":11678},{"class":4249},[11679],{"type":30,"value":326},{"type":25,"tag":209,"props":11681,"children":11682},{"class":4291},[11683],{"type":30,"value":4862},{"type":25,"tag":209,"props":11685,"children":11686},{"class":211,"line":1896},[11687],{"type":25,"tag":209,"props":11688,"children":11689},{"class":4249},[11690],{"type":30,"value":4683},{"type":25,"tag":209,"props":11692,"children":11693},{"class":211,"line":1918},[11694],{"type":25,"tag":209,"props":11695,"children":11696},{},[11697],{"type":30,"value":1830},{"type":25,"tag":209,"props":11699,"children":11700},{"class":211,"line":2511},[11701,11705,11709,11713,11717,11721,11725,11729,11733,11737],{"type":25,"tag":209,"props":11702,"children":11703},{"class":4244},[11704],{"type":30,"value":2434},{"type":25,"tag":209,"props":11706,"children":11707},{"class":4249},[11708],{"type":30,"value":230},{"type":25,"tag":209,"props":11710,"children":11711},{"class":4254},[11712],{"type":30,"value":4892},{"type":25,"tag":209,"props":11714,"children":11715},{"class":4249},[11716],{"type":30,"value":230},{"type":25,"tag":209,"props":11718,"children":11719},{"class":4264},[11720],{"type":30,"value":2301},{"type":25,"tag":209,"props":11722,"children":11723},{"class":4249},[11724],{"type":30,"value":230},{"type":25,"tag":209,"props":11726,"children":11727},{"class":4273},[11728],{"type":30,"value":4607},{"type":25,"tag":209,"props":11730,"children":11731},{"class":4249},[11732],{"type":30,"value":3613},{"type":25,"tag":209,"props":11734,"children":11735},{"class":4244},[11736],{"type":30,"value":3618},{"type":25,"tag":209,"props":11738,"children":11739},{"class":4249},[11740],{"type":30,"value":4921},{"type":25,"tag":209,"props":11742,"children":11743},{"class":211,"line":2520},[11744,11748,11752,11756,11760,11764,11768,11772,11776,11780,11784,11788,11792,11796,11800,11804],{"type":25,"tag":209,"props":11745,"children":11746},{"class":4249},[11747],{"type":30,"value":1577},{"type":25,"tag":209,"props":11749,"children":11750},{"class":4254},[11751],{"type":30,"value":4257},{"type":25,"tag":209,"props":11753,"children":11754},{"class":4249},[11755],{"type":30,"value":326},{"type":25,"tag":209,"props":11757,"children":11758},{"class":4254},[11759],{"type":30,"value":4188},{"type":25,"tag":209,"props":11761,"children":11762},{"class":4249},[11763],{"type":30,"value":326},{"type":25,"tag":209,"props":11765,"children":11766},{"class":4291},[11767],{"type":30,"value":4510},{"type":25,"tag":209,"props":11769,"children":11770},{"class":4249},[11771],{"type":30,"value":230},{"type":25,"tag":209,"props":11773,"children":11774},{"class":4264},[11775],{"type":30,"value":4957},{"type":25,"tag":209,"props":11777,"children":11778},{"class":4249},[11779],{"type":30,"value":230},{"type":25,"tag":209,"props":11781,"children":11782},{"class":4254},[11783],{"type":30,"value":4966},{"type":25,"tag":209,"props":11785,"children":11786},{"class":4249},[11787],{"type":30,"value":326},{"type":25,"tag":209,"props":11789,"children":11790},{"class":4273},[11791],{"type":30,"value":4975},{"type":25,"tag":209,"props":11793,"children":11794},{"class":4249},[11795],{"type":30,"value":4980},{"type":25,"tag":209,"props":11797,"children":11798},{"class":4264},[11799],{"type":30,"value":4985},{"type":25,"tag":209,"props":11801,"children":11802},{"class":4249},[11803],{"type":30,"value":230},{"type":25,"tag":209,"props":11805,"children":11806},{"class":4992},[11807],{"type":30,"value":4995},{"type":25,"tag":209,"props":11809,"children":11810},{"class":211,"line":2537},[11811],{"type":25,"tag":209,"props":11812,"children":11813},{"class":4249},[11814],{"type":30,"value":5003},{"type":25,"tag":26,"props":11816,"children":11817},{},[11818],{"type":30,"value":11819},"You can see that we're back to where we started:",{"type":25,"tag":133,"props":11821,"children":11822},{},[11823,11834],{"type":25,"tag":137,"props":11824,"children":11825},{},[11826,11828,11832],{"type":30,"value":11827},"props expect only ",{"type":25,"tag":33,"props":11829,"children":11830},{},[11831],{"type":30,"value":4326},{"type":30,"value":11833}," type",{"type":25,"tag":137,"props":11835,"children":11836},{},[11837],{"type":30,"value":11838},"there is no conditional logic in our computed properties",{"type":25,"tag":26,"props":11840,"children":11841},{},[11842],{"type":30,"value":11843},"And here's the template:",{"type":25,"tag":195,"props":11845,"children":11847},{"code":11846,"language":5054,"meta":199},"\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",[11848],{"type":25,"tag":202,"props":11849,"children":11850},{},[11851],{"type":25,"tag":195,"props":11852,"children":11853},{"__ignoreMap":8},[11854,11866,11887,11908,11929,11936,11967,11974,11989],{"type":25,"tag":209,"props":11855,"children":11856},{"class":211,"line":212},[11857,11861],{"type":25,"tag":209,"props":11858,"children":11859},{"class":4249},[11860],{"type":30,"value":2259},{"type":25,"tag":209,"props":11862,"children":11863},{"class":4291},[11864],{"type":30,"value":11865},"ItemBase\n",{"type":25,"tag":209,"props":11867,"children":11868},{"class":211,"line":352},[11869,11873,11878,11882],{"type":25,"tag":209,"props":11870,"children":11871},{"class":4249},[11872],{"type":30,"value":1577},{"type":25,"tag":209,"props":11874,"children":11875},{"class":4992},[11876],{"type":30,"value":11877},":name",{"type":25,"tag":209,"props":11879,"children":11880},{"class":4249},[11881],{"type":30,"value":2301},{"type":25,"tag":209,"props":11883,"children":11884},{"class":4394},[11885],{"type":30,"value":11886},"\"pet.name\"\n",{"type":25,"tag":209,"props":11888,"children":11889},{"class":211,"line":361},[11890,11894,11899,11903],{"type":25,"tag":209,"props":11891,"children":11892},{"class":4249},[11893],{"type":30,"value":1577},{"type":25,"tag":209,"props":11895,"children":11896},{"class":4992},[11897],{"type":30,"value":11898},":picture-url",{"type":25,"tag":209,"props":11900,"children":11901},{"class":4249},[11902],{"type":30,"value":2301},{"type":25,"tag":209,"props":11904,"children":11905},{"class":4394},[11906],{"type":30,"value":11907},"\"pet.pictureUrl\"\n",{"type":25,"tag":209,"props":11909,"children":11910},{"class":211,"line":370},[11911,11915,11920,11924],{"type":25,"tag":209,"props":11912,"children":11913},{"class":4249},[11914],{"type":30,"value":1577},{"type":25,"tag":209,"props":11916,"children":11917},{"class":4992},[11918],{"type":30,"value":11919},":stats",{"type":25,"tag":209,"props":11921,"children":11922},{"class":4249},[11923],{"type":30,"value":2301},{"type":25,"tag":209,"props":11925,"children":11926},{"class":4394},[11927],{"type":30,"value":11928},"\"stats\"\n",{"type":25,"tag":209,"props":11930,"children":11931},{"class":211,"line":379},[11932],{"type":25,"tag":209,"props":11933,"children":11934},{"class":4249},[11935],{"type":30,"value":2270},{"type":25,"tag":209,"props":11937,"children":11938},{"class":211,"line":388},[11939,11943,11947,11951,11955,11959,11963],{"type":25,"tag":209,"props":11940,"children":11941},{"class":4249},[11942],{"type":30,"value":5122},{"type":25,"tag":209,"props":11944,"children":11945},{"class":4291},[11946],{"type":30,"value":2582},{"type":25,"tag":209,"props":11948,"children":11949},{"class":4249},[11950],{"type":30,"value":230},{"type":25,"tag":209,"props":11952,"children":11953},{"class":4992},[11954],{"type":30,"value":5081},{"type":25,"tag":209,"props":11956,"children":11957},{"class":4249},[11958],{"type":30,"value":2301},{"type":25,"tag":209,"props":11960,"children":11961},{"class":4394},[11962],{"type":30,"value":5449},{"type":25,"tag":209,"props":11964,"children":11965},{"class":4249},[11966],{"type":30,"value":2270},{"type":25,"tag":209,"props":11968,"children":11969},{"class":211,"line":397},[11970],{"type":25,"tag":209,"props":11971,"children":11972},{"class":4249},[11973],{"type":30,"value":5462},{"type":25,"tag":209,"props":11975,"children":11976},{"class":211,"line":1896},[11977,11981,11985],{"type":25,"tag":209,"props":11978,"children":11979},{"class":4249},[11980],{"type":30,"value":5391},{"type":25,"tag":209,"props":11982,"children":11983},{"class":4291},[11984],{"type":30,"value":2582},{"type":25,"tag":209,"props":11986,"children":11987},{"class":4249},[11988],{"type":30,"value":2270},{"type":25,"tag":209,"props":11990,"children":11991},{"class":211,"line":1918},[11992,11996,12000],{"type":25,"tag":209,"props":11993,"children":11994},{"class":4249},[11995],{"type":30,"value":2526},{"type":25,"tag":209,"props":11997,"children":11998},{"class":4291},[11999],{"type":30,"value":10731},{"type":25,"tag":209,"props":12001,"children":12002},{"class":4249},[12003],{"type":30,"value":12004},"> ",{"type":25,"tag":26,"props":12006,"children":12007},{},[12008],{"type":30,"value":12009},"The template has change significantly.",{"type":25,"tag":26,"props":12011,"children":12012},{},[12013,12015,12019],{"type":30,"value":12014},"Since all of the common markup for our components now lives inside of the base ",{"type":25,"tag":33,"props":12016,"children":12017},{},[12018],{"type":30,"value":10731},{"type":30,"value":12020}," component, all we need to do here is:",{"type":25,"tag":133,"props":12022,"children":12023},{},[12024,12029,12034],{"type":25,"tag":137,"props":12025,"children":12026},{},[12027],{"type":30,"value":12028},"use the Base component,",{"type":25,"tag":137,"props":12030,"children":12031},{},[12032],{"type":30,"value":12033},"provide the props it expects,",{"type":25,"tag":137,"props":12035,"children":12036},{},[12037],{"type":30,"value":12038},"and extend it through slot with the additional markup (\"fed\" label) that is unique for the pet",{"type":25,"tag":26,"props":12040,"children":12041},{},[12042],{"type":30,"value":12043},"Perfect, let's move on.",{"type":25,"tag":538,"props":12045,"children":12047},{"id":12046},"weapon-component",[12048],{"type":30,"value":12049},"Weapon Component",{"type":25,"tag":26,"props":12051,"children":12052},{},[12053],{"type":30,"value":12054},"Here's the script:",{"type":25,"tag":195,"props":12056,"children":12058},{"code":12057,"language":1537,"meta":199},"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",[12059],{"type":25,"tag":202,"props":12060,"children":12061},{},[12062],{"type":25,"tag":195,"props":12063,"children":12064},{"__ignoreMap":8},[12065,12100,12119,12126,12133,12176,12215,12250],{"type":25,"tag":209,"props":12066,"children":12067},{"class":211,"line":212},[12068,12072,12076,12080,12084,12088,12092,12096],{"type":25,"tag":209,"props":12069,"children":12070},{"class":4244},[12071],{"type":30,"value":2434},{"type":25,"tag":209,"props":12073,"children":12074},{"class":4249},[12075],{"type":30,"value":230},{"type":25,"tag":209,"props":12077,"children":12078},{"class":4254},[12079],{"type":30,"value":4257},{"type":25,"tag":209,"props":12081,"children":12082},{"class":4249},[12083],{"type":30,"value":230},{"type":25,"tag":209,"props":12085,"children":12086},{"class":4264},[12087],{"type":30,"value":2301},{"type":25,"tag":209,"props":12089,"children":12090},{"class":4249},[12091],{"type":30,"value":230},{"type":25,"tag":209,"props":12093,"children":12094},{"class":4273},[12095],{"type":30,"value":4276},{"type":25,"tag":209,"props":12097,"children":12098},{"class":4249},[12099],{"type":30,"value":4281},{"type":25,"tag":209,"props":12101,"children":12102},{"class":211,"line":352},[12103,12107,12111,12115],{"type":25,"tag":209,"props":12104,"children":12105},{"class":4249},[12106],{"type":30,"value":1577},{"type":25,"tag":209,"props":12108,"children":12109},{"class":4291},[12110],{"type":30,"value":5581},{"type":25,"tag":209,"props":12112,"children":12113},{"class":4249},[12114],{"type":30,"value":1593},{"type":25,"tag":209,"props":12116,"children":12117},{"class":4254},[12118],{"type":30,"value":5701},{"type":25,"tag":209,"props":12120,"children":12121},{"class":211,"line":361},[12122],{"type":25,"tag":209,"props":12123,"children":12124},{"class":4249},[12125],{"type":30,"value":10892},{"type":25,"tag":209,"props":12127,"children":12128},{"class":211,"line":370},[12129],{"type":25,"tag":209,"props":12130,"children":12131},{},[12132],{"type":30,"value":1830},{"type":25,"tag":209,"props":12134,"children":12135},{"class":211,"line":379},[12136,12140,12144,12148,12152,12156,12160,12164,12168,12172],{"type":25,"tag":209,"props":12137,"children":12138},{"class":4244},[12139],{"type":30,"value":2434},{"type":25,"tag":209,"props":12141,"children":12142},{"class":4249},[12143],{"type":30,"value":230},{"type":25,"tag":209,"props":12145,"children":12146},{"class":4254},[12147],{"type":30,"value":4706},{"type":25,"tag":209,"props":12149,"children":12150},{"class":4249},[12151],{"type":30,"value":230},{"type":25,"tag":209,"props":12153,"children":12154},{"class":4264},[12155],{"type":30,"value":2301},{"type":25,"tag":209,"props":12157,"children":12158},{"class":4249},[12159],{"type":30,"value":230},{"type":25,"tag":209,"props":12161,"children":12162},{"class":4273},[12163],{"type":30,"value":4607},{"type":25,"tag":209,"props":12165,"children":12166},{"class":4249},[12167],{"type":30,"value":3613},{"type":25,"tag":209,"props":12169,"children":12170},{"class":4244},[12171],{"type":30,"value":3618},{"type":25,"tag":209,"props":12173,"children":12174},{"class":4249},[12175],{"type":30,"value":4620},{"type":25,"tag":209,"props":12177,"children":12178},{"class":211,"line":388},[12179,12183,12187,12191,12195,12199,12203,12207,12211],{"type":25,"tag":209,"props":12180,"children":12181},{"class":4249},[12182],{"type":30,"value":1577},{"type":25,"tag":209,"props":12184,"children":12185},{"class":4394},[12186],{"type":30,"value":6235},{"type":25,"tag":209,"props":12188,"children":12189},{"class":4249},[12190],{"type":30,"value":1593},{"type":25,"tag":209,"props":12192,"children":12193},{"class":4254},[12194],{"type":30,"value":4257},{"type":25,"tag":209,"props":12196,"children":12197},{"class":4249},[12198],{"type":30,"value":326},{"type":25,"tag":209,"props":12200,"children":12201},{"class":4254},[12202],{"type":30,"value":5581},{"type":25,"tag":209,"props":12204,"children":12205},{"class":4249},[12206],{"type":30,"value":326},{"type":25,"tag":209,"props":12208,"children":12209},{"class":4291},[12210],{"type":30,"value":5848},{"type":25,"tag":209,"props":12212,"children":12213},{"class":4249},[12214],{"type":30,"value":4825},{"type":25,"tag":209,"props":12216,"children":12217},{"class":211,"line":397},[12218,12222,12226,12230,12234,12238,12242,12246],{"type":25,"tag":209,"props":12219,"children":12220},{"class":4249},[12221],{"type":30,"value":1577},{"type":25,"tag":209,"props":12223,"children":12224},{"class":4394},[12225],{"type":30,"value":6275},{"type":25,"tag":209,"props":12227,"children":12228},{"class":4249},[12229],{"type":30,"value":1593},{"type":25,"tag":209,"props":12231,"children":12232},{"class":4254},[12233],{"type":30,"value":4257},{"type":25,"tag":209,"props":12235,"children":12236},{"class":4249},[12237],{"type":30,"value":326},{"type":25,"tag":209,"props":12239,"children":12240},{"class":4254},[12241],{"type":30,"value":5581},{"type":25,"tag":209,"props":12243,"children":12244},{"class":4249},[12245],{"type":30,"value":326},{"type":25,"tag":209,"props":12247,"children":12248},{"class":4291},[12249],{"type":30,"value":6300},{"type":25,"tag":209,"props":12251,"children":12252},{"class":211,"line":1896},[12253],{"type":25,"tag":209,"props":12254,"children":12255},{"class":4249},[12256],{"type":30,"value":10993},{"type":25,"tag":26,"props":12258,"children":12259},{},[12260,12262,12266],{"type":30,"value":12261},"Similarly to the pet, we expect a single typed prop: a ",{"type":25,"tag":33,"props":12263,"children":12264},{},[12265],{"type":30,"value":5729},{"type":30,"value":12267},", and parse the stats object relevant for this item type.",{"type":25,"tag":26,"props":12269,"children":12270},{},[12271],{"type":30,"value":12272},"The template here is even simpler:",{"type":25,"tag":195,"props":12274,"children":12276},{"code":12275,"language":5054,"meta":199},"\u003CItemBase\n  :name=\"weapon.name\"\n  :picture-url=\"weapon.pictureUrl\"\n  :stats=\"stats\"\n/>\n",[12277],{"type":25,"tag":202,"props":12278,"children":12279},{},[12280],{"type":25,"tag":195,"props":12281,"children":12282},{"__ignoreMap":8},[12283,12294,12314,12334,12353],{"type":25,"tag":209,"props":12284,"children":12285},{"class":211,"line":212},[12286,12290],{"type":25,"tag":209,"props":12287,"children":12288},{"class":4249},[12289],{"type":30,"value":2259},{"type":25,"tag":209,"props":12291,"children":12292},{"class":4291},[12293],{"type":30,"value":11865},{"type":25,"tag":209,"props":12295,"children":12296},{"class":211,"line":352},[12297,12301,12305,12309],{"type":25,"tag":209,"props":12298,"children":12299},{"class":4249},[12300],{"type":30,"value":1577},{"type":25,"tag":209,"props":12302,"children":12303},{"class":4992},[12304],{"type":30,"value":11877},{"type":25,"tag":209,"props":12306,"children":12307},{"class":4249},[12308],{"type":30,"value":2301},{"type":25,"tag":209,"props":12310,"children":12311},{"class":4394},[12312],{"type":30,"value":12313},"\"weapon.name\"\n",{"type":25,"tag":209,"props":12315,"children":12316},{"class":211,"line":361},[12317,12321,12325,12329],{"type":25,"tag":209,"props":12318,"children":12319},{"class":4249},[12320],{"type":30,"value":1577},{"type":25,"tag":209,"props":12322,"children":12323},{"class":4992},[12324],{"type":30,"value":11898},{"type":25,"tag":209,"props":12326,"children":12327},{"class":4249},[12328],{"type":30,"value":2301},{"type":25,"tag":209,"props":12330,"children":12331},{"class":4394},[12332],{"type":30,"value":12333},"\"weapon.pictureUrl\"\n",{"type":25,"tag":209,"props":12335,"children":12336},{"class":211,"line":370},[12337,12341,12345,12349],{"type":25,"tag":209,"props":12338,"children":12339},{"class":4249},[12340],{"type":30,"value":1577},{"type":25,"tag":209,"props":12342,"children":12343},{"class":4992},[12344],{"type":30,"value":11919},{"type":25,"tag":209,"props":12346,"children":12347},{"class":4249},[12348],{"type":30,"value":2301},{"type":25,"tag":209,"props":12350,"children":12351},{"class":4394},[12352],{"type":30,"value":11928},{"type":25,"tag":209,"props":12354,"children":12355},{"class":211,"line":379},[12356],{"type":25,"tag":209,"props":12357,"children":12358},{"class":4249},[12359],{"type":30,"value":12360},"/>",{"type":25,"tag":26,"props":12362,"children":12363},{},[12364],{"type":30,"value":12365},"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":25,"tag":538,"props":12367,"children":12369},{"id":12368},"amulet-component",[12370],{"type":30,"value":12371},"Amulet Component",{"type":25,"tag":26,"props":12373,"children":12374},{},[12375],{"type":30,"value":11440},{"type":25,"tag":195,"props":12377,"children":12379},{"code":12378,"language":1537,"meta":199},"const props = defineProps\u003C{\n  amulet: Amulet\n}>()\n\nconst abilityIconStyle = computed(() => ({\n  backgroundImage: `url(${props.amulet.ability.pictureUrl})`\n}))\n",[12380],{"type":25,"tag":202,"props":12381,"children":12382},{},[12383],{"type":25,"tag":195,"props":12384,"children":12385},{"__ignoreMap":8},[12386,12421,12440,12447,12454,12497,12556],{"type":25,"tag":209,"props":12387,"children":12388},{"class":211,"line":212},[12389,12393,12397,12401,12405,12409,12413,12417],{"type":25,"tag":209,"props":12390,"children":12391},{"class":4244},[12392],{"type":30,"value":2434},{"type":25,"tag":209,"props":12394,"children":12395},{"class":4249},[12396],{"type":30,"value":230},{"type":25,"tag":209,"props":12398,"children":12399},{"class":4254},[12400],{"type":30,"value":4257},{"type":25,"tag":209,"props":12402,"children":12403},{"class":4249},[12404],{"type":30,"value":230},{"type":25,"tag":209,"props":12406,"children":12407},{"class":4264},[12408],{"type":30,"value":2301},{"type":25,"tag":209,"props":12410,"children":12411},{"class":4249},[12412],{"type":30,"value":230},{"type":25,"tag":209,"props":12414,"children":12415},{"class":4273},[12416],{"type":30,"value":4276},{"type":25,"tag":209,"props":12418,"children":12419},{"class":4249},[12420],{"type":30,"value":4281},{"type":25,"tag":209,"props":12422,"children":12423},{"class":211,"line":352},[12424,12428,12432,12436],{"type":25,"tag":209,"props":12425,"children":12426},{"class":4249},[12427],{"type":30,"value":1577},{"type":25,"tag":209,"props":12429,"children":12430},{"class":4291},[12431],{"type":30,"value":6736},{"type":25,"tag":209,"props":12433,"children":12434},{"class":4249},[12435],{"type":30,"value":1593},{"type":25,"tag":209,"props":12437,"children":12438},{"class":4254},[12439],{"type":30,"value":6853},{"type":25,"tag":209,"props":12441,"children":12442},{"class":211,"line":361},[12443],{"type":25,"tag":209,"props":12444,"children":12445},{"class":4249},[12446],{"type":30,"value":10892},{"type":25,"tag":209,"props":12448,"children":12449},{"class":211,"line":370},[12450],{"type":25,"tag":209,"props":12451,"children":12452},{},[12453],{"type":30,"value":1830},{"type":25,"tag":209,"props":12455,"children":12456},{"class":211,"line":379},[12457,12461,12465,12469,12473,12477,12481,12485,12489,12493],{"type":25,"tag":209,"props":12458,"children":12459},{"class":4244},[12460],{"type":30,"value":2434},{"type":25,"tag":209,"props":12462,"children":12463},{"class":4249},[12464],{"type":30,"value":230},{"type":25,"tag":209,"props":12466,"children":12467},{"class":4254},[12468],{"type":30,"value":7589},{"type":25,"tag":209,"props":12470,"children":12471},{"class":4249},[12472],{"type":30,"value":230},{"type":25,"tag":209,"props":12474,"children":12475},{"class":4264},[12476],{"type":30,"value":2301},{"type":25,"tag":209,"props":12478,"children":12479},{"class":4249},[12480],{"type":30,"value":230},{"type":25,"tag":209,"props":12482,"children":12483},{"class":4273},[12484],{"type":30,"value":4607},{"type":25,"tag":209,"props":12486,"children":12487},{"class":4249},[12488],{"type":30,"value":3613},{"type":25,"tag":209,"props":12490,"children":12491},{"class":4244},[12492],{"type":30,"value":3618},{"type":25,"tag":209,"props":12494,"children":12495},{"class":4249},[12496],{"type":30,"value":4620},{"type":25,"tag":209,"props":12498,"children":12499},{"class":211,"line":388},[12500,12504,12508,12512,12516,12520,12524,12528,12532,12536,12540,12544,12548,12552],{"type":25,"tag":209,"props":12501,"children":12502},{"class":4249},[12503],{"type":30,"value":1577},{"type":25,"tag":209,"props":12505,"children":12506},{"class":4291},[12507],{"type":30,"value":4632},{"type":25,"tag":209,"props":12509,"children":12510},{"class":4249},[12511],{"type":30,"value":1593},{"type":25,"tag":209,"props":12513,"children":12514},{"class":4394},[12515],{"type":30,"value":4641},{"type":25,"tag":209,"props":12517,"children":12518},{"class":4244},[12519],{"type":30,"value":4646},{"type":25,"tag":209,"props":12521,"children":12522},{"class":4254},[12523],{"type":30,"value":4257},{"type":25,"tag":209,"props":12525,"children":12526},{"class":4249},[12527],{"type":30,"value":326},{"type":25,"tag":209,"props":12529,"children":12530},{"class":4254},[12531],{"type":30,"value":6736},{"type":25,"tag":209,"props":12533,"children":12534},{"class":4249},[12535],{"type":30,"value":326},{"type":25,"tag":209,"props":12537,"children":12538},{"class":4254},[12539],{"type":30,"value":6747},{"type":25,"tag":209,"props":12541,"children":12542},{"class":4249},[12543],{"type":30,"value":326},{"type":25,"tag":209,"props":12545,"children":12546},{"class":4291},[12547],{"type":30,"value":4409},{"type":25,"tag":209,"props":12549,"children":12550},{"class":4244},[12551],{"type":30,"value":1630},{"type":25,"tag":209,"props":12553,"children":12554},{"class":4394},[12555],{"type":30,"value":4675},{"type":25,"tag":209,"props":12557,"children":12558},{"class":211,"line":397},[12559],{"type":25,"tag":209,"props":12560,"children":12561},{"class":4249},[12562],{"type":30,"value":10993},{"type":25,"tag":26,"props":12564,"children":12565},{},[12566,12568,12572],{"type":30,"value":12567},"Like with other two components, we expect a prop of a single item type: ",{"type":25,"tag":33,"props":12569,"children":12570},{},[12571],{"type":30,"value":6875},{"type":30,"value":326},{"type":25,"tag":26,"props":12574,"children":12575},{},[12576],{"type":30,"value":12577},"Here we also have a computed property for the ability icon which is unique for this component.",{"type":25,"tag":26,"props":12579,"children":12580},{},[12581],{"type":30,"value":12582},"The template for amulet component implements the Base component like this:",{"type":25,"tag":195,"props":12584,"children":12586},{"code":12585,"language":5054,"meta":199},"\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",[12587],{"type":25,"tag":202,"props":12588,"children":12589},{},[12590],{"type":25,"tag":195,"props":12591,"children":12592},{"__ignoreMap":8},[12593,12604,12624,12644,12651,12683,12694,12713,12732,12740,12771,12802,12810,12826,12857,12865,12880,12895,12910],{"type":25,"tag":209,"props":12594,"children":12595},{"class":211,"line":212},[12596,12600],{"type":25,"tag":209,"props":12597,"children":12598},{"class":4249},[12599],{"type":30,"value":2259},{"type":25,"tag":209,"props":12601,"children":12602},{"class":4291},[12603],{"type":30,"value":11865},{"type":25,"tag":209,"props":12605,"children":12606},{"class":211,"line":352},[12607,12611,12615,12619],{"type":25,"tag":209,"props":12608,"children":12609},{"class":4249},[12610],{"type":30,"value":1577},{"type":25,"tag":209,"props":12612,"children":12613},{"class":4992},[12614],{"type":30,"value":11877},{"type":25,"tag":209,"props":12616,"children":12617},{"class":4249},[12618],{"type":30,"value":2301},{"type":25,"tag":209,"props":12620,"children":12621},{"class":4394},[12622],{"type":30,"value":12623},"\"amulet.name\"\n",{"type":25,"tag":209,"props":12625,"children":12626},{"class":211,"line":361},[12627,12631,12635,12639],{"type":25,"tag":209,"props":12628,"children":12629},{"class":4249},[12630],{"type":30,"value":1577},{"type":25,"tag":209,"props":12632,"children":12633},{"class":4992},[12634],{"type":30,"value":11898},{"type":25,"tag":209,"props":12636,"children":12637},{"class":4249},[12638],{"type":30,"value":2301},{"type":25,"tag":209,"props":12640,"children":12641},{"class":4394},[12642],{"type":30,"value":12643},"\"amulet.pictureUrl\"\n",{"type":25,"tag":209,"props":12645,"children":12646},{"class":211,"line":370},[12647],{"type":25,"tag":209,"props":12648,"children":12649},{"class":4249},[12650],{"type":30,"value":2270},{"type":25,"tag":209,"props":12652,"children":12653},{"class":211,"line":379},[12654,12658,12662,12666,12670,12674,12679],{"type":25,"tag":209,"props":12655,"children":12656},{"class":4249},[12657],{"type":30,"value":5122},{"type":25,"tag":209,"props":12659,"children":12660},{"class":4291},[12661],{"type":30,"value":2582},{"type":25,"tag":209,"props":12663,"children":12664},{"class":4249},[12665],{"type":30,"value":230},{"type":25,"tag":209,"props":12667,"children":12668},{"class":4992},[12669],{"type":30,"value":5081},{"type":25,"tag":209,"props":12671,"children":12672},{"class":4249},[12673],{"type":30,"value":2301},{"type":25,"tag":209,"props":12675,"children":12676},{"class":4394},[12677],{"type":30,"value":12678},"\"ability\"",{"type":25,"tag":209,"props":12680,"children":12681},{"class":4249},[12682],{"type":30,"value":2270},{"type":25,"tag":209,"props":12684,"children":12685},{"class":211,"line":388},[12686,12690],{"type":25,"tag":209,"props":12687,"children":12688},{"class":4249},[12689],{"type":30,"value":2577},{"type":25,"tag":209,"props":12691,"children":12692},{"class":4291},[12693],{"type":30,"value":5127},{"type":25,"tag":209,"props":12695,"children":12696},{"class":211,"line":397},[12697,12701,12705,12709],{"type":25,"tag":209,"props":12698,"children":12699},{"class":4249},[12700],{"type":30,"value":6063},{"type":25,"tag":209,"props":12702,"children":12703},{"class":4992},[12704],{"type":30,"value":5081},{"type":25,"tag":209,"props":12706,"children":12707},{"class":4249},[12708],{"type":30,"value":2301},{"type":25,"tag":209,"props":12710,"children":12711},{"class":4394},[12712],{"type":30,"value":7883},{"type":25,"tag":209,"props":12714,"children":12715},{"class":211,"line":1896},[12716,12720,12724,12728],{"type":25,"tag":209,"props":12717,"children":12718},{"class":4249},[12719],{"type":30,"value":6063},{"type":25,"tag":209,"props":12721,"children":12722},{"class":4992},[12723],{"type":30,"value":5159},{"type":25,"tag":209,"props":12725,"children":12726},{"class":4249},[12727],{"type":30,"value":2301},{"type":25,"tag":209,"props":12729,"children":12730},{"class":4394},[12731],{"type":30,"value":7903},{"type":25,"tag":209,"props":12733,"children":12734},{"class":211,"line":1918},[12735],{"type":25,"tag":209,"props":12736,"children":12737},{"class":4249},[12738],{"type":30,"value":12739},"    />\n",{"type":25,"tag":209,"props":12741,"children":12742},{"class":211,"line":2511},[12743,12747,12751,12755,12759,12763,12767],{"type":25,"tag":209,"props":12744,"children":12745},{"class":4249},[12746],{"type":30,"value":2577},{"type":25,"tag":209,"props":12748,"children":12749},{"class":4291},[12750],{"type":30,"value":2582},{"type":25,"tag":209,"props":12752,"children":12753},{"class":4249},[12754],{"type":30,"value":230},{"type":25,"tag":209,"props":12756,"children":12757},{"class":4992},[12758],{"type":30,"value":5081},{"type":25,"tag":209,"props":12760,"children":12761},{"class":4249},[12762],{"type":30,"value":2301},{"type":25,"tag":209,"props":12764,"children":12765},{"class":4394},[12766],{"type":30,"value":7938},{"type":25,"tag":209,"props":12768,"children":12769},{"class":4249},[12770],{"type":30,"value":2270},{"type":25,"tag":209,"props":12772,"children":12773},{"class":211,"line":2520},[12774,12778,12782,12786,12790,12794,12798],{"type":25,"tag":209,"props":12775,"children":12776},{"class":4249},[12777],{"type":30,"value":11272},{"type":25,"tag":209,"props":12779,"children":12780},{"class":4291},[12781],{"type":30,"value":209},{"type":25,"tag":209,"props":12783,"children":12784},{"class":4249},[12785],{"type":30,"value":230},{"type":25,"tag":209,"props":12787,"children":12788},{"class":4992},[12789],{"type":30,"value":5081},{"type":25,"tag":209,"props":12791,"children":12792},{"class":4249},[12793],{"type":30,"value":2301},{"type":25,"tag":209,"props":12795,"children":12796},{"class":4394},[12797],{"type":30,"value":7970},{"type":25,"tag":209,"props":12799,"children":12800},{"class":4249},[12801],{"type":30,"value":2270},{"type":25,"tag":209,"props":12803,"children":12804},{"class":211,"line":2537},[12805],{"type":25,"tag":209,"props":12806,"children":12807},{"class":4249},[12808],{"type":30,"value":12809},"        {{ amulet.ability.type }} ability\n",{"type":25,"tag":209,"props":12811,"children":12812},{"class":211,"line":2545},[12813,12818,12822],{"type":25,"tag":209,"props":12814,"children":12815},{"class":4249},[12816],{"type":30,"value":12817},"      \u003C/",{"type":25,"tag":209,"props":12819,"children":12820},{"class":4291},[12821],{"type":30,"value":209},{"type":25,"tag":209,"props":12823,"children":12824},{"class":4249},[12825],{"type":30,"value":2270},{"type":25,"tag":209,"props":12827,"children":12828},{"class":211,"line":2571},[12829,12833,12837,12841,12845,12849,12853],{"type":25,"tag":209,"props":12830,"children":12831},{"class":4249},[12832],{"type":30,"value":11272},{"type":25,"tag":209,"props":12834,"children":12835},{"class":4291},[12836],{"type":30,"value":209},{"type":25,"tag":209,"props":12838,"children":12839},{"class":4249},[12840],{"type":30,"value":230},{"type":25,"tag":209,"props":12842,"children":12843},{"class":4992},[12844],{"type":30,"value":5081},{"type":25,"tag":209,"props":12846,"children":12847},{"class":4249},[12848],{"type":30,"value":2301},{"type":25,"tag":209,"props":12850,"children":12851},{"class":4394},[12852],{"type":30,"value":8025},{"type":25,"tag":209,"props":12854,"children":12855},{"class":4249},[12856],{"type":30,"value":2270},{"type":25,"tag":209,"props":12858,"children":12859},{"class":211,"line":2624},[12860],{"type":25,"tag":209,"props":12861,"children":12862},{"class":4249},[12863],{"type":30,"value":12864},"        {{ amulet.ability.name }}\n",{"type":25,"tag":209,"props":12866,"children":12867},{"class":211,"line":2633},[12868,12872,12876],{"type":25,"tag":209,"props":12869,"children":12870},{"class":4249},[12871],{"type":30,"value":12817},{"type":25,"tag":209,"props":12873,"children":12874},{"class":4291},[12875],{"type":30,"value":209},{"type":25,"tag":209,"props":12877,"children":12878},{"class":4249},[12879],{"type":30,"value":2270},{"type":25,"tag":209,"props":12881,"children":12882},{"class":211,"line":2650},[12883,12887,12891],{"type":25,"tag":209,"props":12884,"children":12885},{"class":4249},[12886],{"type":30,"value":2639},{"type":25,"tag":209,"props":12888,"children":12889},{"class":4291},[12890],{"type":30,"value":2582},{"type":25,"tag":209,"props":12892,"children":12893},{"class":4249},[12894],{"type":30,"value":2270},{"type":25,"tag":209,"props":12896,"children":12897},{"class":211,"line":5343},[12898,12902,12906],{"type":25,"tag":209,"props":12899,"children":12900},{"class":4249},[12901],{"type":30,"value":5391},{"type":25,"tag":209,"props":12903,"children":12904},{"class":4291},[12905],{"type":30,"value":2582},{"type":25,"tag":209,"props":12907,"children":12908},{"class":4249},[12909],{"type":30,"value":2270},{"type":25,"tag":209,"props":12911,"children":12912},{"class":211,"line":5385},[12913,12917,12921],{"type":25,"tag":209,"props":12914,"children":12915},{"class":4249},[12916],{"type":30,"value":2526},{"type":25,"tag":209,"props":12918,"children":12919},{"class":4291},[12920],{"type":30,"value":10731},{"type":25,"tag":209,"props":12922,"children":12923},{"class":4249},[12924],{"type":30,"value":12004},{"type":25,"tag":26,"props":12926,"children":12927},{},[12928],{"type":30,"value":12929},"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":25,"tag":26,"props":12931,"children":12932},{},[12933],{"type":30,"value":12934},"Instead, we provide the ability markup to the slot, using the computed style that we prepared in the script.",{"type":25,"tag":26,"props":12936,"children":12937},{},[12938],{"type":30,"value":12939},"As always, we also add styles to this component related to the ability markup.",{"type":25,"tag":26,"props":12941,"children":12942},{},[12943],{"type":30,"value":12944},"And that's it for our components!",{"type":25,"tag":178,"props":12946,"children":12947},{"id":1433},[12948],{"type":30,"value":1436},{"type":25,"tag":26,"props":12950,"children":12951},{},[12952],{"type":30,"value":12953},"Yay you made it! This was quite a rollercoaster, huh?",{"type":25,"tag":26,"props":12955,"children":12956},{},[12957],{"type":30,"value":12958},"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":25,"tag":26,"props":12960,"children":12961},{},[12962],{"type":30,"value":12963},"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":25,"tag":538,"props":12965,"children":12967},{"id":12966},"before",[12968],{"type":30,"value":12969},"Before",{"type":25,"tag":26,"props":12971,"children":12972},{},[12973],{"type":25,"tag":69,"props":12974,"children":12978},{"alt":12975,"src":12976,"style":12977},"scheme before","/blog/extend-components/scheme-before.jpg","max-height: 600px",[],{"type":25,"tag":538,"props":12980,"children":12982},{"id":12981},"after",[12983],{"type":30,"value":12984},"After",{"type":25,"tag":26,"props":12986,"children":12987},{},[12988],{"type":25,"tag":69,"props":12989,"children":12991},{"alt":12975,"src":12990,"style":12977},"/blog/extend-components/scheme-after.jpg",[],{"type":25,"tag":26,"props":12993,"children":12994},{},[12995],{"type":30,"value":12996},"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":25,"tag":26,"props":12998,"children":12999},{},[13000,13002,13006,13007,13011,13012,13016],{"type":30,"value":13001},"If you look closely at our ",{"type":25,"tag":33,"props":13003,"children":13004},{},[13005],{"type":30,"value":4326},{"type":30,"value":1227},{"type":25,"tag":33,"props":13008,"children":13009},{},[13010],{"type":30,"value":5729},{"type":30,"value":4087},{"type":25,"tag":33,"props":13013,"children":13014},{},[13015],{"type":30,"value":6875},{"type":30,"value":13017}," 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":25,"tag":26,"props":13019,"children":13020},{},[13021],{"type":30,"value":13022},"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":25,"tag":26,"props":13024,"children":13025},{},[13026],{"type":30,"value":13027},"And if we focus on keeping our components lean and clean, we'll be on our way to building better codebases.",{"type":25,"tag":26,"props":13029,"children":13030},{},[13031],{"type":30,"value":13032},"Happy coding!",{"type":25,"tag":1479,"children":13034},[13035],{"type":30,"value":13036},".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":8,"searchDepth":352,"depth":352,"links":13038},[13039,13040,13041,13057,13064,13071],{"id":4031,"depth":352,"text":4034},{"id":4060,"depth":352,"text":4063},{"id":4162,"depth":352,"text":4165,"children":13042},[13043,13044,13045,13046,13047,13048,13049,13050,13051,13052,13053,13054,13055,13056],{"id":4202,"depth":361,"text":4205},{"id":4556,"depth":361,"text":4559},{"id":5042,"depth":361,"text":5045},{"id":5544,"depth":361,"text":5547},{"id":5555,"depth":361,"text":5558},{"id":5608,"depth":361,"text":5611},{"id":5898,"depth":361,"text":5901},{"id":6571,"depth":361,"text":5045},{"id":6678,"depth":361,"text":6681},{"id":6710,"depth":361,"text":6713},{"id":6770,"depth":361,"text":5611},{"id":7104,"depth":361,"text":5901},{"id":7777,"depth":361,"text":5045},{"id":8100,"depth":361,"text":8103},{"id":8121,"depth":352,"text":8124,"children":13058},[13059,13060,13061,13062,13063],{"id":9288,"depth":361,"text":9291},{"id":9569,"depth":361,"text":9572},{"id":10073,"depth":361,"text":10076},{"id":10388,"depth":361,"text":10391},{"id":10653,"depth":361,"text":10656},{"id":10708,"depth":352,"text":10711,"children":13065},[13066,13067,13068,13069,13070],{"id":10735,"depth":361,"text":10738},{"id":11021,"depth":361,"text":11024},{"id":11432,"depth":361,"text":11435},{"id":12046,"depth":361,"text":12049},{"id":12368,"depth":361,"text":12371},{"id":1433,"depth":352,"text":1436,"children":13072},[13073,13074],{"id":12966,"depth":361,"text":12969},{"id":12981,"depth":361,"text":12984},"content:blog:extending-components.md","blog/extending-components.md",1760572597445]