38 lines
27 KiB
JavaScript
38 lines
27 KiB
JavaScript
import{_ as i,c as a,a0 as e,o as t}from"./chunks/framework.P9qPzDnn.js";const d=JSON.parse('{"title":"Migrating to Profectus 0.7","description":"","frontmatter":{},"headers":[],"relativePath":"guide/migrations/0-7.md","filePath":"guide/migrations/0-7.md","lastUpdated":1737056209000}'),n={name:"guide/migrations/0-7.md"};function h(l,s,p,k,r,o){return t(),a("div",null,s[0]||(s[0]=[e(`<h1 id="migrating-to-profectus-0-7" tabindex="-1">Migrating to Profectus 0.7 <a class="header-anchor" href="#migrating-to-profectus-0-7" aria-label="Permalink to "Migrating to Profectus 0.7""></a></h1><p>This update involved the feature rewrite and board rewrite, the largest refactors in Profectus' history at time of release. Here's how you can handle these changes.</p><h2 id="boards" tabindex="-1">Boards <a class="header-anchor" href="#boards" aria-label="Permalink to "Boards""></a></h2><p>If you have an existing board, there's no real way to migrate to the new board system. You'll likely want to either re-create it within the new system (see how to <a href="./../advanced-concepts/boards">here</a>) or use the legacy board implementation available <a href="https://forums.moddingtree.com/t/profectus-board-feature/1656" target="_blank" rel="noreferrer">here</a>.</p><h2 id="grids" tabindex="-1">Grids <a class="header-anchor" href="#grids" aria-label="Permalink to "Grids""></a></h2><p>Grids have been removed, and you'll need to either use Row and Column directly with whatever component you like, or use the legacy grid implementation available <a href="https://forums.moddingtree.com/t/profectus-grid-feature/1651" target="_blank" rel="noreferrer">here</a>.</p><h2 id="generic-feature-types" tabindex="-1">Generic Feature Types <a class="header-anchor" href="#generic-feature-types" aria-label="Permalink to "Generic Feature Types""></a></h2><p>Feature types no longer take the options as a type parameter, and are therefore generic by default. Any uses of the previous types (the generic type or passing a type parameter) will need to be updated. The typing of a feature should include any custom properties you add to the options object.</p><h2 id="displays" tabindex="-1">Displays <a class="header-anchor" href="#displays" aria-label="Permalink to "Displays""></a></h2><p>Displays are a bit different. There is no <code>jsx</code> function nor <code>JSXFunction</code> types anymore. Instead, you'll just use a function directly, or just a string if its purely static. Any feature that would previously except a function or ref returning an object of individual pieces to display (e.g. description, title, etc.) will now take the object directly, and allow each individual piece to be a function or ref.</p><h2 id="tooltips-and-marks" tabindex="-1">Tooltips and Marks <a class="header-anchor" href="#tooltips-and-marks" aria-label="Permalink to "Tooltips and Marks""></a></h2><p>Tooltips and marks now take options funcs like other features. Additionally, they're now considered "wrappers" so the import statement will need adjusting.</p><h2 id="this-in-options-funcs" tabindex="-1"><code>this</code> in options funcs <a class="header-anchor" href="#this-in-options-funcs" aria-label="Permalink to "\`this\` in options funcs""></a></h2><p>As a general rule, you should not use <code>this</code> inside of the functions that return the options object for a feature. In some cases it'll still work, but often will not. The typing of the features should allow you to reference the feature by name without causing cyclical dependencies now, though. So, for example, this code is perfectly fine:</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes material-theme-palenight material-theme-palenight vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#C792EA;--shiki-dark:#C792EA;">const</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;"> myMilestone </span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">=</span><span style="--shiki-light:#82AAFF;--shiki-dark:#82AAFF;"> createAchievement</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">(</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">()</span><span style="--shiki-light:#C792EA;--shiki-dark:#C792EA;"> =></span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;"> (</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;"> ...,</span></span>
|
||
<span class="line"><span style="--shiki-light:#F07178;--shiki-dark:#F07178;"> style</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">()</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#89DDFF;--shiki-light-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic;"> if</span><span style="--shiki-light:#F07178;--shiki-dark:#F07178;"> (</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">myMilestone</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">.</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">earned</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">.</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">value</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;"> !==</span><span style="--shiki-light:#FF9CAC;--shiki-dark:#FF9CAC;"> false</span><span style="--shiki-light:#F07178;--shiki-dark:#F07178;">) </span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="--shiki-light:#89DDFF;--shiki-light-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic;"> return</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;"> {</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;"> "</span><span style="--shiki-light:#F07178;--shiki-dark:#F07178;">--layer-color</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">"</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">:</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;"> "</span><span style="--shiki-light:#C3E88D;--shiki-dark:#C3E88D;">#1111DD</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">"</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;"> };</span></span>
|
||
<span class="line"><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;"> }</span></span>
|
||
<span class="line"><span style="--shiki-light:#89DDFF;--shiki-light-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic;"> return</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;"> {};</span></span>
|
||
<span class="line"><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;"> }</span></span>
|
||
<span class="line"><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">}</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">))</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">;</span></span></code></pre></div><h2 id="decorators" tabindex="-1">Decorators <a class="header-anchor" href="#decorators" aria-label="Permalink to "Decorators""></a></h2><p>The decorators system is no longer necessary with the rewrite, so features do not support them anymore. The bonus amount/completions decorators have been converted to mixins, so you can still use them.</p><h2 id="styling" tabindex="-1">Styling <a class="header-anchor" href="#styling" aria-label="Permalink to "Styling""></a></h2><p><code>style</code> properties should now always be in the form of an object, not a string. This allows them to more easily override individual properties. Additionally, vue features are structured a little bit differently in the DOM, so you may need to update any custom CSS you wrote.</p><h2 id="custom-features" tabindex="-1">Custom features <a class="header-anchor" href="#custom-features" aria-label="Permalink to "Custom features""></a></h2><p>The feature rewrite, obviously, most significantly impacts any custom features you've written. The general process for updating a feature went like this:</p><h3 id="update-types" tabindex="-1">Update types <a class="header-anchor" href="#update-types" aria-label="Permalink to "Update types""></a></h3><p>The options object should now extend <code>VueFeatureOptions</code>, and every Computable should be replaced with MaybeRefOrGetter. You'll no longer need the <code>visibility</code>, <code>style</code> and <code>classes</code> properties. If you had a <code>mark</code> property that can also be removed. If you have a custom display object, make the properties within it <code>MaybeGetter<Renderable></code>, and don't wrap the object itself in anything (neither <code>Computable</code> nor <code>MaybeRefOrGetter</code>). Otherwise, you can just make it take a <code>MaybeGetter<Renderable></code> directly.</p><p>The <code>Base</code> variant of your feature is going to become the new interface for the feature itself. You'll make it extend <code>VueFeature</code> and remove the <code>id</code>, <code>[Component]</code>, and <code>[GatherProps]</code> properties. Since we're not relying on any utility functions here, you'll need to add the <code>MaybeRef</code> version of every <code>MaybeRefOrGetter</code> property in the options object, and copy over any other properties that just get passed through. You won't handle default values for the properties since this is a generic interface, but you can mark those properties as required since they'll always be present. You can then delete the previous type for the feature itself and the <code>Generic</code> variant of it.</p><h3 id="update-constructor" tabindex="-1">Update constructor <a class="header-anchor" href="#update-constructor" aria-label="Permalink to "Update constructor""></a></h3><p>First, make the options func simply typed as <code>() => T</code>, and remove the return type annotation. You'll also remove the <code>feature</code> parameter from the function passed to <code>createLazyProxy</code>. Instead of creating the feature object immediately, we'll just destructure the options, and create the feature object later. For example, here's the first section of <code>createInfobox</code>'s proxy function:</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes material-theme-palenight material-theme-palenight vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#C792EA;--shiki-dark:#C792EA;">const</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;"> options </span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">=</span><span style="--shiki-light:#82AAFF;--shiki-dark:#82AAFF;"> optionsFunc</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">()</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#C792EA;--shiki-dark:#C792EA;">const</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;"> {</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;"> color</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">,</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;"> titleStyle</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">,</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;"> bodyStyle</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">,</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;"> title</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">,</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;"> display</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">,</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;"> ...</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">props </span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">}</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;"> =</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;"> options</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">;</span></span></code></pre></div><p>We can then construct the feature object, passing in <code>type</code>, adding the extra props and vue feature properties, and handling processing getters and default values. Here's the end of the <code>createInfobox</code> proxy function:</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes material-theme-palenight material-theme-palenight vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#C792EA;--shiki-dark:#C792EA;">const</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;"> infobox </span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">=</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#F07178;--shiki-dark:#F07178;"> type</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">:</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;"> InfoboxType</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;"> ...</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">(props </span><span style="--shiki-light:#89DDFF;--shiki-light-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic;">as</span><span style="--shiki-light:#FFCB6B;--shiki-dark:#FFCB6B;"> Omit</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;"><typeof</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;"> props</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">,</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;"> keyof</span><span style="--shiki-light:#FFCB6B;--shiki-dark:#FFCB6B;"> VueFeature</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;"> |</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;"> keyof</span><span style="--shiki-light:#FFCB6B;--shiki-dark:#FFCB6B;"> InfoboxOptions</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">></span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">)</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;"> ...</span><span style="--shiki-light:#82AAFF;--shiki-dark:#82AAFF;">vueFeatureMixin</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">(</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">"</span><span style="--shiki-light:#C3E88D;--shiki-dark:#C3E88D;">infobox</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">"</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">,</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;"> options</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">,</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;"> ()</span><span style="--shiki-light:#C792EA;--shiki-dark:#C792EA;"> =></span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;"> (</span></span>
|
||
<span class="line"><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;"> <</span><span style="--shiki-light:#BABED8;--shiki-light-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic;">Infobox</span></span>
|
||
<span class="line"><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;"> color</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">={</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">infobox.color</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">}</span></span>
|
||
<span class="line"><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;"> titleStyle</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">={</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">infobox.titleStyle</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">}</span></span>
|
||
<span class="line"><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;"> bodyStyle</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">={</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">infobox.bodyStyle</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">}</span></span>
|
||
<span class="line"><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;"> collapsed</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">={</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">infobox.collapsed</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">}</span></span>
|
||
<span class="line"><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;"> title</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">={</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">infobox.title</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">}</span></span>
|
||
<span class="line"><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;"> display</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">={</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">infobox.display</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">}</span></span>
|
||
<span class="line"><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;"> /></span></span>
|
||
<span class="line"><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;"> ))</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;"> collapsed</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#F07178;--shiki-dark:#F07178;"> color</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">:</span><span style="--shiki-light:#82AAFF;--shiki-dark:#82AAFF;"> processGetter</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">(color) </span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">??</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;"> "</span><span style="--shiki-light:#C3E88D;--shiki-dark:#C3E88D;">--layer-color</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">"</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#F07178;--shiki-dark:#F07178;"> titleStyle</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">:</span><span style="--shiki-light:#82AAFF;--shiki-dark:#82AAFF;"> processGetter</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">(titleStyle)</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#F07178;--shiki-dark:#F07178;"> bodyStyle</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">:</span><span style="--shiki-light:#82AAFF;--shiki-dark:#82AAFF;"> processGetter</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">(bodyStyle)</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;"> title</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;"> display</span></span>
|
||
<span class="line"><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">}</span><span style="--shiki-light:#89DDFF;--shiki-light-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic;"> satisfies</span><span style="--shiki-light:#FFCB6B;--shiki-dark:#FFCB6B;"> Infobox</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">;</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#89DDFF;--shiki-light-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic;">return</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;"> infobox</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">;</span></span></code></pre></div><p>For more complex use cases, I'd check out the other constructors of existing features. You can also ask the <a href="https://discord.gg/yJ4fjnjU54" target="_blank" rel="noreferrer">discord</a> if you're having trouble.</p><p>If you'd added support for the previous decorators system, you'll remove all of that code from the feature as its no longer necessary with the feature rewrite.</p><h3 id="update-vue-component" tabindex="-1">Update vue component <a class="header-anchor" href="#update-vue-component" aria-label="Permalink to "Update vue component""></a></h3><p>All the vue components in Profectus now use <code>script setup</code> and the composition API, and I recommend you use it as well. The props should just link to the individual properties in the class for maintainability (but you can'y just do <code>defineProps<MyFeature>()</code> because of the limitations on the vue compiler). Here's an example for Infobox:</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes material-theme-palenight material-theme-palenight vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#C792EA;--shiki-dark:#C792EA;">const</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;"> props </span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">=</span><span style="--shiki-light:#82AAFF;--shiki-dark:#82AAFF;"> defineProps</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;"><{</span></span>
|
||
<span class="line"><span style="--shiki-light:#F07178;--shiki-dark:#F07178;"> color</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">:</span><span style="--shiki-light:#FFCB6B;--shiki-dark:#FFCB6B;"> Infobox</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">[</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">"</span><span style="--shiki-light:#C3E88D;--shiki-dark:#C3E88D;">color</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">"</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">]</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#F07178;--shiki-dark:#F07178;"> titleStyle</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">:</span><span style="--shiki-light:#FFCB6B;--shiki-dark:#FFCB6B;"> Infobox</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">[</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">"</span><span style="--shiki-light:#C3E88D;--shiki-dark:#C3E88D;">titleStyle</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">"</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">]</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#F07178;--shiki-dark:#F07178;"> bodyStyle</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">:</span><span style="--shiki-light:#FFCB6B;--shiki-dark:#FFCB6B;"> Infobox</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">[</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">"</span><span style="--shiki-light:#C3E88D;--shiki-dark:#C3E88D;">bodyStyle</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">"</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">]</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#F07178;--shiki-dark:#F07178;"> collapsed</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">:</span><span style="--shiki-light:#FFCB6B;--shiki-dark:#FFCB6B;"> Infobox</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">[</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">"</span><span style="--shiki-light:#C3E88D;--shiki-dark:#C3E88D;">collapsed</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">"</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">]</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#F07178;--shiki-dark:#F07178;"> display</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">:</span><span style="--shiki-light:#FFCB6B;--shiki-dark:#FFCB6B;"> Infobox</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">[</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">"</span><span style="--shiki-light:#C3E88D;--shiki-dark:#C3E88D;">display</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">"</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">]</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#F07178;--shiki-dark:#F07178;"> title</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">:</span><span style="--shiki-light:#FFCB6B;--shiki-dark:#FFCB6B;"> Infobox</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">[</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">"</span><span style="--shiki-light:#C3E88D;--shiki-dark:#C3E88D;">title</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">"</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">]</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">}></span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">()</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">;</span></span></code></pre></div><p>For rendering a <code>Renderable</code>, it should just be defining a PascalCase variable that's just a function passing the renderable into <code>render</code>, like so:</p><p><code>const Title = () => render(props.title);</code></p><p>You can then just add <code><Title /></code> in the template.</p><p>Finally, make sure to remove the parts that are now handle by the vue feature mixin. Specifically, remove the <code>Node</code> component, the <code>Mark</code> component if present, and the handling for <code>visibility</code>, <code>style</code>, and <code>classes</code> props.</p>`,38)]))}const F=i(n,[["render",h]]);export{d as __pageData,F as default};
|