profectus-docs/assets/guide_important-concepts_features.md.51cb0ae6.js

import{_ as e,c as s,o as a,a as n}from"./app.ab34650d.js";const D=JSON.parse('{"title":"Features","description":"","frontmatter":{},"headers":[{"level":2,"title":"Tree Shaking","slug":"tree-shaking"}],"relativePath":"guide/important-concepts/features.md","lastUpdated":1658111955000}'),t={name:"guide/important-concepts/features.md"},o=n(`<h1 id="features" tabindex="-1">Features <a class="header-anchor" href="#features" aria-hidden="true">#</a></h1><p>A <a href="./layers.html">layer</a> is made up of features. There are many types of features included in Profectus, and more can be created once you become familiar with the engine.</p><p>To create a feature, the feature type will have one or more functions to help you. They&#39;ll typically look something like this:</p><div class="language-ts"><span class="copy"></span><pre><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> addGainUpgrade </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">createUpgrade</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> (</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">display</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Generator of Genericness</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#F07178;">description</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Gain 1 point every second</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">cost</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">resource</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> points</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">))</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span></code></pre></div><p>The result will be a <a href="./layers.html#lazy-proxies">lazy proxy</a> of the feature being created. The feature can then be used throughout the rest of the layer. The main thing to keep in mind when creating features is that they should typically be included in the layer object that gets returned. If a feature has any <a href="./reactivity.html#persistent">persistent refs</a> they must be included or else they will not have their values saved and loaded correctly.</p><p>While the structure of layers is intentionally left up to the creator, it is recommended to avoid storing them in arrays. If you ever remove an upgrade from an array, or add an upgrade in between others, then it will interfere with the save data of existing users. You can manually fix these issues in <a href="./../creating-your-project/project-entry.html#fixoldsave">fixOldSave</a>, but it&#39;s recommended to avoid the error entirely.</p><p>Since usually you want to access a specific feature, storing them in an object is much more reliable and makes the code easier to read. For things like checking number of upgrades bought, for example, you can still use <code>Object.values</code> to get an array of the objects instead.</p><h4 id="example" tabindex="-1">Example <a class="header-anchor" href="#example" aria-hidden="true">#</a></h4><div class="language-ts"><span class="copy"></span><pre><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> upgrades </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> addGainUpgrade</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> gainMultUpgrade</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> upgMultUpgrade </span><span style="color:#89DDFF;">};</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> numUpgrades </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">computed</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Object</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">values</span><span style="color:#A6ACCD;">(upgrades)</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">length)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span></code></pre></div><h2 id="tree-shaking" tabindex="-1">Tree Shaking <a class="header-anchor" href="#tree-shaking" aria-hidden="true">#</a></h2><p>Since Profectus takes advantage of <a href="https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking" target="_blank" rel="noopener noreferrer">tree shaking</a>, and type of feature that is not used will not be included in the output of the project. That means users have less code to download, a slight performance boost, and you don&#39;t need to worry about feature type-specific settings appearing (such as whether to show maxed challenges).</p><p>It should be noted that a couple features depend on each other, such as Buyables depending on Clickables. That means you may see features included in the output despite not directly using them. Some features, such as Links and Tooltips, are used by the engine itself and will always be included in the output.</p>`,12),l=[o];function p(r,c,i,y,d,h){return a(),s("div",null,l)}var A=e(t,[["render",p]]);export{D as __pageData,A as default};