<spanclass="line"><spanstyle="color:#A6ACCD;"></span><spanstyle="color:#F07178;">title</span><spanstyle="color:#89DDFF;">:</span><spanstyle="color:#A6ACCD;"></span><spanstyle="color:#89DDFF;">"</span><spanstyle="color:#C3E88D;">Generator of Genericness</span><spanstyle="color:#89DDFF;">"</span><spanstyle="color:#89DDFF;">,</span></span>
<spanclass="line"><spanstyle="color:#A6ACCD;"></span><spanstyle="color:#F07178;">description</span><spanstyle="color:#89DDFF;">:</span><spanstyle="color:#A6ACCD;"></span><spanstyle="color:#89DDFF;">"</span><spanstyle="color:#C3E88D;">Gain 1 point every second</span><spanstyle="color:#89DDFF;">"</span></span>
<spanclass="line"><spanstyle="color:#89DDFF;">}</span><spanstyle="color:#A6ACCD;">))</span><spanstyle="color:#89DDFF;">;</span></span></code></pre></div><p>The result will be a <ahref="./layers#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 <ahref="./reactivity#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 <ahref="./../creating-your-project/project-entry#fixoldsave">fixOldSave</a>, but it'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><h4id="example"tabindex="-1">Example <aclass="header-anchor"href="#example"aria-label="Permalink to "Example""></a></h4><divclass="language-ts"><buttontitle="Copy Code"class="copy"></button><spanclass="lang">ts</span><preclass="shiki material-theme-palenight"><code><spanclass="line"><spanstyle="color:#C792EA;">const</span><spanstyle="color:#A6ACCD;"> upgrades </span><spanstyle="color:#89DDFF;">=</span><spanstyle="color:#A6ACCD;"></span><spanstyle="color:#89DDFF;">{</span><spanstyle="color:#A6ACCD;"> addGainUpgrade</span><spanstyle="color:#89DDFF;">,</span><spanstyle="color:#A6ACCD;"> gainMultUpgrade</span><spanstyle="color:#89DDFF;">,</span><spanstyle="color:#A6ACCD;"> upgMultUpgrade </span><spanstyle="color:#89DDFF;">};</span></span>
<spanclass="line"><spanstyle="color:#C792EA;">const</span><spanstyle="color:#A6ACCD;"> numUpgrades </span><spanstyle="color:#89DDFF;">=</span><spanstyle="color:#A6ACCD;"></span><spanstyle="color:#82AAFF;">computed</span><spanstyle="color:#A6ACCD;">(</span><spanstyle="color:#89DDFF;">()</span><spanstyle="color:#A6ACCD;"></span><spanstyle="color:#C792EA;">=></span><spanstyle="color:#A6ACCD;"> Object</span><spanstyle="color:#89DDFF;">.</span><spanstyle="color:#82AAFF;">values</span><spanstyle="color:#A6ACCD;">(upgrades)</span><spanstyle="color:#89DDFF;">.</span><spanstyle="color:#A6ACCD;">length)</span><spanstyle="color:#89DDFF;">;</span></span></code></pre></div><h2id="tree-shaking"tabindex="-1">Tree Shaking <aclass="header-anchor"href="#tree-shaking"aria-label="Permalink to "Tree Shaking""></a></h2><p>Since Profectus takes advantage of <ahref="https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking"target="_blank"rel="noreferrer">tree shaking</a>, any 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'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></div></div></main><footerclass="VPDocFooter"data-v-c4b0d3cfdata-v-face870a><!--[--><!--]--><divclass="edit-info"data-v-face870a><divclass="edit-link"data-v-face870a><aclass="VPLink link edit-link-button"href="https://github.com/profectus-engine/profectus-docs/edit/main/docs/guide/important-concepts/features.md"target="_blank"rel="noreferrer"data-v-face870adata-v-8f4dc553><!--[--><svgxmlns="http://www.w3.org/2000/svg"viewbox="0 0 24 24"class="edit-link-icon"aria-label="edit icon"data-v-face870a><pathd="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><pathd="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--><!----></a></div><divclass="last-updated"data-v-face870a><pclass="VPLastUpdated"data-v-face870adata-v-7b3ebfe1>Last updated: <timedatetime="2023-05-18T00:22:54.000Z"data-v-7b3ebfe1></time></p></div></div><divclass="prev-next"data-v-face870a><divclass="pager"data-v-face870a><aclass="pager-link prev"href="/guide/important-concepts/layers"data-v-face870a><spanclass="desc"data-v-face870a>Previous page</span><spanclass="title"data-v-face870a>Layers</span></a></div><divclass="has-prev pager"data-v-face870a><aclass="pager-link next"href="/guide/important-concepts/coercable"data-v-face870a><spanclass="desc"data-v-face870a>Next page</span><spanclass="title"data-v-face870a>Coercable Components</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
