36 lines
No EOL
37 KiB
HTML
36 lines
No EOL
37 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Coercable Components | Profectus</title>
|
|
<meta name="description" content="A game engine that grows with you.">
|
|
<link rel="stylesheet" href="/assets/style.f4065569.css">
|
|
<link rel="modulepreload" href="/assets/app.189352af.js">
|
|
<link rel="modulepreload" href="/assets/guide_coercable.md.d4adf8d1.lean.js">
|
|
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,400;0,600;1,400">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
|
<link rel="manifest" href="/site.webmanifest">
|
|
<script defer="true" data-domain="moddingtree.com" src="https://plausible.io/js/plausible.js"></script>
|
|
<meta name="og:description" content="A game engine that grows with you">
|
|
<meta name="og:image" content="/Logo.png">
|
|
</head>
|
|
<body>
|
|
<div id="app"><div class="Layout" data-v-6b5fd0a9><!--[--><!--]--><!--[--><span tabindex="-1" data-v-45f6ae50></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-45f6ae50> Skip to content </a><!--]--><!----><header class="VPNav" data-v-6b5fd0a9 data-v-0e356168><div class="VPNavBar has-sidebar" data-v-0e356168 data-v-8856f192><div class="container" data-v-8856f192><div class="VPNavBarTitle has-sidebar" data-v-8856f192 data-v-6a6f7ff6><a class="title" href="/" data-v-6a6f7ff6><!--[--><img class="VPImage logo" src="/favicon.svg" data-v-73ae1788><!--]--><!--[-->Profectus<!--]--></a></div><div class="content" data-v-8856f192><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-8856f192 data-v-a30758ee><span id="main-nav-aria-label" class="visually-hidden" data-v-a30758ee>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/guide/" data-v-a30758ee data-v-8fba5fa8 data-v-5704c677><!--[-->Guide<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/api/" data-v-a30758ee data-v-8fba5fa8 data-v-5704c677><!--[-->API<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="https://forums.moddingtree.com" target="_blank" rel="noopener noreferrer" data-v-a30758ee data-v-8fba5fa8 data-v-5704c677><!--[-->Forums<!--]--><!----></a><!--]--><!--]--></nav><!----><!----><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-8856f192 data-v-0ae890f7 data-v-4dcbaf3a><!--[--><a class="VPSocialLink" href="https://discord.gg/F3xveHV" title="discord" target="_blank" rel="noopener noreferrer" data-v-4dcbaf3a data-v-48c45ef6><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-48c45ef6><path d="M20.222 0c1.406 0 2.54 1.137 2.607 2.475V24l-2.677-2.273-1.47-1.338-1.604-1.398.67 2.205H3.71c-1.402 0-2.54-1.065-2.54-2.476V2.48C1.17 1.142 2.31.003 3.715.003h16.5L20.222 0zm-6.118 5.683h-.03l-.202.2c2.073.6 3.076 1.537 3.076 1.537-1.336-.668-2.54-1.002-3.744-1.137-.87-.135-1.74-.064-2.475 0h-.2c-.47 0-1.47.2-2.81.735-.467.203-.735.336-.735.336s1.002-1.002 3.21-1.537l-.135-.135s-1.672-.064-3.477 1.27c0 0-1.805 3.144-1.805 7.02 0 0 1 1.74 3.743 1.806 0 0 .4-.533.805-1.002-1.54-.468-2.14-1.404-2.14-1.404s.134.066.335.2h.06c.03 0 .044.015.06.03v.006c.016.016.03.03.06.03.33.136.66.27.93.4.466.202 1.065.403 1.8.536.93.135 1.996.2 3.21 0 .6-.135 1.2-.267 1.8-.535.39-.2.87-.4 1.397-.737 0 0-.6.936-2.205 1.404.33.466.795 1 .795 1 2.744-.06 3.81-1.8 3.87-1.726 0-3.87-1.815-7.02-1.815-7.02-1.635-1.214-3.165-1.26-3.435-1.26l.056-.02zm.168 4.413c.703 0 1.27.6 1.27 1.335 0 .74-.57 1.34-1.27 1.34-.7 0-1.27-.6-1.27-1.334.002-.74.573-1.338 1.27-1.338zm-4.543 0c.7 0 1.266.6 1.266 1.335 0 .74-.57 1.34-1.27 1.34-.7 0-1.27-.6-1.27-1.334 0-.74.57-1.338 1.27-1.338z"></path></svg><span class="visually-hidden" data-v-48c45ef6>discord</span></a><a class="VPSocialLink" href="https://github.com/profectus-engine/Profectus" title="github" target="_blank" rel="noopener noreferrer" data-v-4dcbaf3a data-v-48c45ef6><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-48c45ef6><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg><span class="visually-hidden" data-v-48c45ef6>github</span></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-8856f192 data-v-0562f5c0 data-v-8dccea88><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-8dccea88><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-8dccea88><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-8dccea88><div class="VPMenu" data-v-8dccea88 data-v-e73581a2><!----><!--[--><!--[--><!----><!----><div class="group" data-v-0562f5c0><div class="item social-links" data-v-0562f5c0><div class="VPSocialLinks social-links-list" data-v-0562f5c0 data-v-4dcbaf3a><!--[--><a class="VPSocialLink" href="https://discord.gg/F3xveHV" title="discord" target="_blank" rel="noopener noreferrer" data-v-4dcbaf3a data-v-48c45ef6><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-48c45ef6><path d="M20.222 0c1.406 0 2.54 1.137 2.607 2.475V24l-2.677-2.273-1.47-1.338-1.604-1.398.67 2.205H3.71c-1.402 0-2.54-1.065-2.54-2.476V2.48C1.17 1.142 2.31.003 3.715.003h16.5L20.222 0zm-6.118 5.683h-.03l-.202.2c2.073.6 3.076 1.537 3.076 1.537-1.336-.668-2.54-1.002-3.744-1.137-.87-.135-1.74-.064-2.475 0h-.2c-.47 0-1.47.2-2.81.735-.467.203-.735.336-.735.336s1.002-1.002 3.21-1.537l-.135-.135s-1.672-.064-3.477 1.27c0 0-1.805 3.144-1.805 7.02 0 0 1 1.74 3.743 1.806 0 0 .4-.533.805-1.002-1.54-.468-2.14-1.404-2.14-1.404s.134.066.335.2h.06c.03 0 .044.015.06.03v.006c.016.016.03.03.06.03.33.136.66.27.93.4.466.202 1.065.403 1.8.536.93.135 1.996.2 3.21 0 .6-.135 1.2-.267 1.8-.535.39-.2.87-.4 1.397-.737 0 0-.6.936-2.205 1.404.33.466.795 1 .795 1 2.744-.06 3.81-1.8 3.87-1.726 0-3.87-1.815-7.02-1.815-7.02-1.635-1.214-3.165-1.26-3.435-1.26l.056-.02zm.168 4.413c.703 0 1.27.6 1.27 1.335 0 .74-.57 1.34-1.27 1.34-.7 0-1.27-.6-1.27-1.334.002-.74.573-1.338 1.27-1.338zm-4.543 0c.7 0 1.266.6 1.266 1.335 0 .74-.57 1.34-1.27 1.34-.7 0-1.27-.6-1.27-1.334 0-.74.57-1.338 1.27-1.338z"></path></svg><span class="visually-hidden" data-v-48c45ef6>discord</span></a><a class="VPSocialLink" href="https://github.com/profectus-engine/Profectus" title="github" target="_blank" rel="noopener noreferrer" data-v-4dcbaf3a data-v-48c45ef6><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-48c45ef6><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg><span class="visually-hidden" data-v-48c45ef6>github</span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-8856f192 data-v-6f008456><span class="container" data-v-6f008456><span class="top" data-v-6f008456></span><span class="middle" data-v-6f008456></span><span class="bottom" data-v-6f008456></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-6b5fd0a9 data-v-92b0f14a><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-92b0f14a><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-92b0f14a><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-92b0f14a>Menu</span></button><a class="top-link" href="#" data-v-92b0f14a> Return to top </a></div><aside class="VPSidebar" data-v-6b5fd0a9 data-v-55e4c7db><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-55e4c7db><span class="visually-hidden" id="sidebar-aria-label" data-v-55e4c7db> Sidebar Navigation </span><!--[--><div class="group" data-v-55e4c7db><section class="VPSidebarGroup collapsible" data-v-55e4c7db data-v-1f69a7ed><div class="title" role="button" data-v-1f69a7ed><h2 class="title-text" data-v-1f69a7ed>Getting Started</h2><div class="action" data-v-1f69a7ed><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-1f69a7ed><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-1f69a7ed><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-1f69a7ed><!--[--><a class="VPLink link" href="/guide/" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Introduction</span><!--]--><!----></a><a class="VPLink link" href="/guide/setup.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Setting Up</span><!--]--><!----></a><a class="VPLink link" href="/guide/updating.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Updating Profectus</span><!--]--><!----></a><a class="VPLink link" href="/guide/examples.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Example Projects</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-55e4c7db><section class="VPSidebarGroup collapsible" data-v-55e4c7db data-v-1f69a7ed><div class="title" role="button" data-v-1f69a7ed><h2 class="title-text" data-v-1f69a7ed>Creating Your Project</h2><div class="action" data-v-1f69a7ed><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-1f69a7ed><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-1f69a7ed><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-1f69a7ed><!--[--><a class="VPLink link" href="/guide/project-info.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Project Info</span><!--]--><!----></a><a class="VPLink link" href="/guide/project-entry.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Project Entry</span><!--]--><!----></a><a class="VPLink link" href="/guide/changelog.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Changelog</span><!--]--><!----></a><a class="VPLink link" href="/guide/themes.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Themes</span><!--]--><!----></a><a class="VPLink link" href="/guide/utils.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Utilities</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-55e4c7db><section class="VPSidebarGroup collapsible" data-v-55e4c7db data-v-1f69a7ed><div class="title" role="button" data-v-1f69a7ed><h2 class="title-text" data-v-1f69a7ed>Important Concepts</h2><div class="action" data-v-1f69a7ed><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-1f69a7ed><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-1f69a7ed><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-1f69a7ed><!--[--><a class="VPLink link" href="/guide/layers.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Layers</span><!--]--><!----></a><a class="VPLink link" href="/guide/features.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Features</span><!--]--><!----></a><a class="VPLink link active" href="/guide/coercable.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Coercable Components</span><!--]--><!----></a><a class="VPLink link" href="/guide/reactivity.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Reactivity</span><!--]--><!----></a><a class="VPLink link" href="/guide/persistence.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Persistence</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-55e4c7db><section class="VPSidebarGroup collapsible" data-v-55e4c7db data-v-1f69a7ed><div class="title" role="button" data-v-1f69a7ed><h2 class="title-text" data-v-1f69a7ed>Advanced Concepts</h2><div class="action" data-v-1f69a7ed><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-1f69a7ed><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-1f69a7ed><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-1f69a7ed><!--[--><a class="VPLink link" href="/guide/creating-features.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Creating Features</span><!--]--><!----></a><a class="VPLink link" href="/guide/dynamic-layers.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Dynamic Layers</span><!--]--><!----></a><!--]--></div></section></div><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-6b5fd0a9 data-v-a4c57a06><div class="VPDoc has-sidebar" data-v-a4c57a06 data-v-79ca2460><div class="container" data-v-79ca2460><div class="aside" data-v-79ca2460><div class="aside-curtain" data-v-79ca2460></div><div class="aside-container" data-v-79ca2460><div class="aside-content" data-v-79ca2460><div class="VPDocAside" data-v-79ca2460 data-v-779d834d><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline has-outline" data-v-779d834d data-v-51e5a8ce><div class="content" data-v-51e5a8ce><div class="outline-marker" data-v-51e5a8ce></div><div class="outline-title" data-v-51e5a8ce>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-51e5a8ce><span class="visually-hidden" id="doc-outline-aria-label" data-v-51e5a8ce> Table of Contents for current page </span><ul class="root" data-v-51e5a8ce><!--[--><li style="" data-v-51e5a8ce><a class="outline-link" href="#template-strings" data-v-51e5a8ce>Template Strings</a><!----></li><li style="" data-v-51e5a8ce><a class="outline-link" href="#render-functions-jsx" data-v-51e5a8ce>Render Functions (JSX)</a><!----></li><li style="" data-v-51e5a8ce><a class="outline-link" href="#components" data-v-51e5a8ce>Components</a><!----></li><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-779d834d></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-79ca2460><div class="content-container" data-v-79ca2460><!--[--><!--]--><main class="main" data-v-79ca2460><div style="position:relative;" class="vp-doc _guide_coercable" data-v-79ca2460><div><h1 id="coercable-components" tabindex="-1">Coercable Components <a class="header-anchor" href="#coercable-components" aria-hidden="true">#</a></h1><p>Most times a feature has some sort of dynamic display, it'll allow you to pass a "Coercable Component", or rather, something that can be coerced into a Vue component. This page goes over the different types of values you can use</p><h2 id="template-strings" tabindex="-1">Template Strings <a class="header-anchor" href="#template-strings" aria-hidden="true">#</a></h2><p>If you provide a string, it will be wrapped in a component using it as the template. This is the simplest method, although not suitable for complex displays, and realistically cannot use Vue components as none are registered globally (by default). Recommended for static or simple dynamic displays, such as displays on features.</p><p>Template strings need to be wrapped in some HTML element. By default, they'll be wrapped in a <code><span></code> element, although certain features may wrap things in div or header elements instead, as appropriate.</p><h2 id="render-functions-jsx" tabindex="-1">Render Functions (JSX) <a class="header-anchor" href="#render-functions-jsx" aria-hidden="true">#</a></h2><p>You can provide a render function and it will be wrapped in a component as well. The intended use for this is to write JSX inside a function, which will get automatically converted into a render function. You can read more about that process on the Vue docs on <a href="https://vuejs.org/guide/extras/render-function.html#render-functions-jsx" target="_blank" rel="noopener noreferrer">Render Functions & JSX</a>. Note that JSX must be returned in a function - it does not work "standalone". The CoercableComponent type will enforce this for you.</p><p>JSX can use imported components, making this suited for writing the display properties on things like Tabs or Layers. There are also built-in functions to <code>render</code> features (either as their own or in a layout via <code>renderRow</code> and <code>renderCol</code>), so you don't need to import the Vue component for every feature you plan on using.</p><p>Typically a feature will accept a <code>Computable<CoercableComponent></code>, which means functions would (normally) be wrapped in a computed (see <a href="./reactivity.html#computable">Computable</a> for more details). This would break render functions, so when passing a render function as a CoercableComponent it must be specially marked that it shouldn't be cached. You can use the built-in <code>jsx</code> function to mark a function for you.</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:#89DDFF;">{</span></span>
|
|
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">display</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">jsx</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> (</span></span>
|
|
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;"><></span></span>
|
|
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;"><</span><span style="color:#A6ACCD;">MainDisplay</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">resource</span><span style="color:#89DDFF;">={</span><span style="color:#A6ACCD;">points</span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">color</span><span style="color:#89DDFF;">={</span><span style="color:#A6ACCD;">color</span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">/></span></span>
|
|
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;">render</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">resetButton</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">}</span></span>
|
|
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;">renderRow</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">upgrade1</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">upgrade2</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">upgrade3</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">}</span></span>
|
|
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;"></></span></span>
|
|
<span class="line"><span style="color:#F07178;"> ))</span><span style="color:#89DDFF;">,</span></span>
|
|
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
|
<span class="line"></span></code></pre></div><h2 id="components" tabindex="-1">Components <a class="header-anchor" href="#components" aria-hidden="true">#</a></h2><p>This one might be the most obvious, but you can also just give it a Vue component to display outright. Keep in mind it will not be passed any props, so it should not depend on any. You can read more about creating Vue components on <a href="https://vuejs.org/guide/essentials/component-basics.html" target="_blank" rel="noopener noreferrer">Components Basics</a>.</p></div></div></main><footer class="VPDocFooter" data-v-79ca2460 data-v-04568844><div class="edit-info" data-v-04568844><div class="edit-link" data-v-04568844><a class="VPLink link edit-link-button" href="https://github.com/profectus-engine/profectus-docs/edit/main/docs/guide/coercable.md" target="_blank" rel="noopener noreferrer" data-v-04568844 data-v-5704c677><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" data-v-04568844><path d="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><path d="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><div class="last-updated" data-v-04568844><p class="VPLastUpdated" data-v-04568844 data-v-0ce8c960>Last updated: <time datatime="2022-07-14T13:21:08.000Z" data-v-0ce8c960></time></p></div></div><div class="prev-next" data-v-04568844><div class="pager" data-v-04568844><a class="pager-link prev" href="/guide/features.html" data-v-04568844><span class="desc" data-v-04568844>Previous page</span><span class="title" data-v-04568844>Features</span></a></div><div class="has-prev pager" data-v-04568844><a class="pager-link next" href="/guide/reactivity.html" data-v-04568844><span class="desc" data-v-04568844>Next page</span><span class="title" data-v-04568844>Reactivity</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><!----><!--[--><!--]--></div></div>
|
|
<script>__VP_HASH_MAP__ = JSON.parse("{\"api_classes_lib_break_eternity.default.md\":\"a7ccd653\",\"api_components_contextcomponent.md\":\"81a216f8\",\"api_components_infocomponent.md\":\"0d1330a4\",\"api_components_layercomponent.md\":\"d07394d6\",\"api_components_marknodecomponent.md\":\"5ad15a27\",\"api_components_modalcomponent.md\":\"ac6d8dde\",\"api_components_nodecomponent.md\":\"a2353d9e\",\"api_components_savecomponent.md\":\"b7e86f8f\",\"api_components_fields_dangerbuttoncomponent.md\":\"e5055cb6\",\"api_components_fields_feedbackbuttoncomponent.md\":\"f9162687\",\"api_components_fields_selectcomponent.md\":\"39e9b01f\",\"api_components_fields_slidercomponent.md\":\"652bf35b\",\"api_components_fields_textcomponent.md\":\"8ce5b830\",\"api_components_fields_togglecomponent.md\":\"30bf0492\",\"api_components_layout_collapsiblecomponent.md\":\"b5f7e138\",\"api_components_layout_columncomponent.md\":\"c48e5a5d\",\"api_components_layout_rowcomponent.md\":\"5603bb58\",\"api_components_layout_spacercomponent.md\":\"b5eabade\",\"api_components_layout_stickycomponent.md\":\"8a6b25a2\",\"api_components_layout_verticalrulecomponent.md\":\"62387ce2\",\"api_components_math_floorcomponent.md\":\"730afc12\",\"api_components_math_sqrtcomponent.md\":\"4115778e\",\"api_enums_data_themes.themes.md\":\"d3f56c2c\",\"api_enums_features_boards_board.progressdisplay.md\":\"3ffb6dd4\",\"api_enums_features_boards_board.shape.md\":\"7e0dd9e9\",\"api_enums_features_feature.visibility.md\":\"99fa84c8\",\"api_enums_features_milestones_milestone.milestonedisplay.md\":\"02c16741\",\"api_enums_util_common.direction.md\":\"6a873bbd\",\"api_index.md\":\"07e315b9\",\"api_interfaces_data_common.layertreenodeoptions.md\":\"56ddb209\",\"api_interfaces_data_common.resetbuttonoptions.md\":\"993f901c\",\"api_interfaces_data_themes.theme.md\":\"44bb7688\",\"api_interfaces_data_themes.themevars.md\":\"e43764dc\",\"api_interfaces_features_achievements_achievement.achievementoptions.md\":\"5410dbee\",\"api_interfaces_features_achievements_achievement.baseachievement.md\":\"f13bca5d\",\"api_interfaces_features_bars_bar.baroptions.md\":\"ee1adcbd\",\"api_interfaces_features_bars_bar.basebar.md\":\"73de2bd3\",\"api_interfaces_features_boards_board.baseboard.md\":\"c7ab14b8\",\"api_interfaces_features_boards_board.baseboardnodeaction.md\":\"e7365454\",\"api_interfaces_features_boards_board.basenodetype.md\":\"e74c1ae9\",\"api_interfaces_features_boards_board.boardnode.md\":\"6d9adb6a\",\"api_interfaces_features_boards_board.boardnodeactionoptions.md\":\"f5578422\",\"api_interfaces_features_boards_board.boardnodelink.md\":\"6ca55f3f\",\"api_interfaces_features_boards_board.boardoptions.md\":\"5e565b5b\",\"api_interfaces_features_boards_board.nodelabel.md\":\"41dd5cc4\",\"api_interfaces_features_boards_board.nodetypeoptions.md\":\"e490bae1\",\"api_interfaces_features_buyable.basebuyable.md\":\"309738dd\",\"api_interfaces_features_buyable.buyableoptions.md\":\"aaebcc9a\",\"api_interfaces_features_challenges_challenge.basechallenge.md\":\"d8e46419\",\"api_interfaces_features_challenges_challenge.challengeoptions.md\":\"273628aa\",\"api_interfaces_features_clickables_clickable.baseclickable.md\":\"47680ae8\",\"api_interfaces_features_clickables_clickable.clickableoptions.md\":\"a8db9d8f\",\"api_interfaces_features_conversion.baseconversion.md\":\"b747d298\",\"api_interfaces_features_conversion.conversionoptions.md\":\"bf13737d\",\"api_interfaces_features_conversion.scalingfunction.md\":\"c74138c3\",\"api_interfaces_features_grids_grid.basegrid.md\":\"8d8aed00\",\"api_interfaces_features_grids_grid.gridcell.md\":\"8a049273\",\"api_interfaces_features_grids_grid.gridoptions.md\":\"02627f61\",\"api_interfaces_features_hotkey.basehotkey.md\":\"d58928e3\",\"api_interfaces_features_hotkey.hotkeyoptions.md\":\"6a65c49a\",\"api_interfaces_features_infoboxes_infobox.baseinfobox.md\":\"7f62aac3\",\"api_interfaces_features_infoboxes_infobox.infoboxoptions.md\":\"12892a0a\",\"api_interfaces_features_links_links.baselinks.md\":\"e92020f3\",\"api_interfaces_features_links_links.link.md\":\"daa8296a\",\"api_interfaces_features_links_links.linksoptions.md\":\"f99c4662\",\"api_interfaces_features_milestones_milestone.basemilestone.md\":\"d3929165\",\"api_interfaces_features_milestones_milestone.milestoneoptions.md\":\"3648151b\",\"api_interfaces_features_particles_particles.baseparticles.md\":\"1de26e53\",\"api_interfaces_features_particles_particles.particlesoptions.md\":\"812d2514\",\"api_interfaces_features_reset.basereset.md\":\"85587bcb\",\"api_interfaces_features_reset.resetoptions.md\":\"0f709482\",\"api_interfaces_features_resources_resource.resource.md\":\"b18efa9a\",\"api_interfaces_features_tabs_tab.basetab.md\":\"e601ecdd\",\"api_interfaces_features_tabs_tab.taboptions.md\":\"48cf4a8d\",\"api_interfaces_features_tabs_tabfamily.basetabbutton.md\":\"735d7ac1\",\"api_interfaces_features_tabs_tabfamily.basetabfamily.md\":\"f77978f1\",\"api_interfaces_features_tabs_tabfamily.tabbuttonoptions.md\":\"a92e5257\",\"api_interfaces_features_tabs_tabfamily.tabfamilyoptions.md\":\"d3ebc4a0\",\"api_interfaces_features_tooltips_tooltip.basetooltip.md\":\"6e59cf5c\",\"api_interfaces_features_tooltips_tooltip.tooltipoptions.md\":\"1e41f81f\",\"api_interfaces_features_trees_tree.basetree.md\":\"422b4cb2\",\"api_interfaces_features_trees_tree.basetreenode.md\":\"b1b37257\",\"api_interfaces_features_trees_tree.treebranch.md\":\"c3f21f32\",\"api_interfaces_features_trees_tree.treenodeoptions.md\":\"632fdf91\",\"api_interfaces_features_trees_tree.treeoptions.md\":\"45908f7d\",\"api_interfaces_features_upgrades_upgrade.baseupgrade.md\":\"2826e501\",\"api_interfaces_features_upgrades_upgrade.upgradeoptions.md\":\"608dc28f\",\"api_interfaces_game_events.globalevents.md\":\"c9e684fb\",\"api_interfaces_game_layers.baselayer.md\":\"dcbb8dfd\",\"api_interfaces_game_layers.featurenode.md\":\"9cb0f386\",\"api_interfaces_game_layers.layerevents.md\":\"65f442c3\",\"api_interfaces_game_layers.layeroptions.md\":\"c4bd9e5f\",\"api_interfaces_game_layers.position.md\":\"09df980b\",\"api_interfaces_game_modifiers.modifier.md\":\"82214eb7\",\"api_interfaces_game_player.playerdata.md\":\"801f3927\",\"api_interfaces_game_settings.settings.md\":\"41c6b4e9\",\"api_interfaces_game_state.transient.md\":\"fb04dd91\",\"api_interfaces_lib_pwa-register.registerswoptions.md\":\"1f160cde\",\"api_modules_data_common.md\":\"e1b40dc0\",\"api_modules_data_projentry.md\":\"36861ad3\",\"api_modules_data_themes.md\":\"c539c10b\",\"api_modules_features_achievements_achievementcomponent.md\":\"8670f9c4\",\"api_modules_features_achievements_achievement.md\":\"33ea09df\",\"api_modules_features_bars_barcomponent.md\":\"d553d4d8\",\"api_modules_features_bars_bar.md\":\"ba21a389\",\"api_modules_features_boards_boardcomponent.md\":\"affe9e9f\",\"api_modules_features_boards_boardlinkcomponent.md\":\"52c734e1\",\"api_modules_features_boards_boardnodecomponent.md\":\"bf184ac9\",\"api_modules_features_boards_board.md\":\"3cb98046\",\"api_modules_features_buyable.md\":\"aaecabc1\",\"api_modules_features_challenges_challengecomponent.md\":\"9cb3b643\",\"api_modules_features_challenges_challenge.md\":\"6a5ffbba\",\"api_modules_features_clickables_clickablecomponent.md\":\"4e8a98c6\",\"api_modules_features_clickables_clickable.md\":\"25c48821\",\"api_modules_features_conversion.md\":\"9fcb2a44\",\"api_modules_features_feature.md\":\"273ac183\",\"api_modules_features_grids_gridcellcomponent.md\":\"160a6cc2\",\"api_modules_features_grids_gridcomponent.md\":\"04dfbc83\",\"api_modules_features_grids_grid.md\":\"596f63dd\",\"api_modules_features_hotkey.md\":\"556add1f\",\"api_modules_features_infoboxes_infoboxcomponent.md\":\"fb3eefcc\",\"api_modules_features_infoboxes_infobox.md\":\"27ffaed5\",\"api_modules_features_links_linkcomponent.md\":\"dde382c8\",\"api_modules_features_links_linkscomponent.md\":\"6c857663\",\"api_modules_features_links_links.md\":\"e8d5c37b\",\"api_modules_features_milestones_milestonecomponent.md\":\"a8d3b3ea\",\"api_modules_features_milestones_milestone.md\":\"bfc9a08b\",\"api_modules_features_particles_particlescomponent.md\":\"1a6d2e97\",\"api_modules_features_particles_particles.md\":\"38a1a272\",\"api_modules_features_reset.md\":\"a7394df6\",\"api_modules_features_resources_maindisplaycomponent.md\":\"ba686f3a\",\"api_modules_features_resources_resourcecomponent.md\":\"b86609c8\",\"api_modules_features_resources_resource.md\":\"100f56c5\",\"api_modules_features_tabs_tabbuttoncomponent.md\":\"d91078cd\",\"api_modules_features_tabs_tabcomponent.md\":\"d3630a66\",\"api_modules_features_tabs_tabfamilycomponent.md\":\"0e7430a7\",\"api_modules_features_tabs_tab.md\":\"c70e7def\",\"api_modules_features_tabs_tabfamily.md\":\"e3f6c36c\",\"api_modules_features_tooltips_tooltipcomponent.md\":\"e987a0e6\",\"api_modules_features_tooltips_tooltip.md\":\"fbf1efa1\",\"api_modules_features_trees_treecomponent.md\":\"035b3028\",\"api_modules_features_trees_treenodecomponent.md\":\"22f01f37\",\"api_modules_features_trees_tree.md\":\"50e6a557\",\"api_modules_features_upgrades_upgradecomponent.md\":\"47d206ac\",\"api_modules_features_upgrades_upgrade.md\":\"907699fb\",\"api_modules_game_events.md\":\"fe076ac4\",\"api_modules_game_layers.md\":\"f34f36c2\",\"api_modules_game_modifiers.md\":\"507a4e99\",\"api_modules_game_notifications.md\":\"7bafbb44\",\"api_modules_game_persistence.md\":\"cb757053\",\"api_modules_game_player.md\":\"4f38fcb1\",\"api_modules_game_settings.md\":\"30e3d70b\",\"api_modules_game_state.md\":\"4e084ce6\",\"api_modules_lib_break_eternity.md\":\"d853bf38\",\"api_modules_lib_pwa-register.md\":\"891ee8d8\",\"api_modules_util_bignum.md\":\"931d387a\",\"api_modules_util_break_eternity.md\":\"4518ebd0\",\"api_modules_util_common.md\":\"bf8b04d5\",\"api_modules_util_computed.md\":\"36103b29\",\"api_modules_util_proxies.md\":\"5655301f\",\"api_modules_util_save.md\":\"ab8adfb0\",\"api_modules_util_vue.md\":\"127efcdf\",\"guide_changelog.md\":\"0890d713\",\"guide_coercable.md\":\"d4adf8d1\",\"guide_creating-features.md\":\"a1318808\",\"guide_dynamic-layers.md\":\"07186286\",\"guide_examples.md\":\"ff88e505\",\"guide_features.md\":\"2bc27cf1\",\"guide_index.md\":\"9ed2697c\",\"guide_layers.md\":\"f2e41214\",\"guide_persistence.md\":\"06fa2788\",\"guide_project-entry.md\":\"c7b25c8b\",\"guide_project-info.md\":\"9c992835\",\"guide_reactivity.md\":\"c2d2f1b3\",\"guide_setup.md\":\"9be099a9\",\"guide_themes.md\":\"66022ed3\",\"guide_updating.md\":\"221b4760\",\"guide_utils.md\":\"8fb6eeea\",\"index.md\":\"d8169427\"}")</script>
|
|
<script type="module" async src="/assets/app.189352af.js"></script>
|
|
|
|
</body>
|
|
</html> |