Files
dioxus/docs/nightly/guide/en/contributing/roadmap.html
T
2023-06-01 11:09:51 -05:00

381 lines
26 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE HTML>
<html lang="en" class="sidebar-visible no-js light">
<head>
<!-- Book generated using mdBook -->
<meta charset="UTF-8">
<title>Roadmap</title>
<!-- Custom HTML head -->
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#ffffff" />
<link rel="icon" href="../favicon.svg">
<link rel="shortcut icon" href="../favicon.png">
<link rel="stylesheet" href="../css/variables.css">
<link rel="stylesheet" href="../css/general.css">
<link rel="stylesheet" href="../css/chrome.css">
<link rel="stylesheet" href="../css/print.css" media="print">
<!-- Fonts -->
<link rel="stylesheet" href="../FontAwesome/css/font-awesome.css">
<link rel="stylesheet" href="../fonts/fonts.css">
<!-- Highlight.js Stylesheets -->
<link rel="stylesheet" href="../highlight.css">
<link rel="stylesheet" href="../tomorrow-night.css">
<link rel="stylesheet" href="../ayu-highlight.css">
<!-- Custom theme stylesheets -->
<!-- MathJax -->
<script async type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
</head>
<body>
<!-- Provide site root to javascript -->
<script type="text/javascript">
var path_to_root = "../";
var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "navy" : "light";
</script>
<!-- Work around some values being stored in localStorage wrapped in quotes -->
<script type="text/javascript">
try {
var theme = localStorage.getItem('mdbook-theme');
var sidebar = localStorage.getItem('mdbook-sidebar');
if (theme.startsWith('"') && theme.endsWith('"')) {
localStorage.setItem('mdbook-theme', theme.slice(1, theme.length - 1));
}
if (sidebar.startsWith('"') && sidebar.endsWith('"')) {
localStorage.setItem('mdbook-sidebar', sidebar.slice(1, sidebar.length - 1));
}
} catch (e) { }
</script>
<!-- Set the theme before any content is loaded, prevents flash -->
<script type="text/javascript">
var theme;
try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
if (theme === null || theme === undefined) { theme = default_theme; }
var html = document.querySelector('html');
html.classList.remove('no-js')
html.classList.remove('light')
html.classList.add(theme);
html.classList.add('js');
</script>
<!-- Hide / unhide sidebar before it is displayed -->
<script type="text/javascript">
var html = document.querySelector('html');
var sidebar = 'hidden';
if (document.body.clientWidth >= 1080) {
try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
sidebar = sidebar || 'visible';
}
html.classList.remove('sidebar-visible');
html.classList.add("sidebar-" + sidebar);
</script>
<nav id="sidebar" class="sidebar" aria-label="Table of contents">
<div class="sidebar-scrollbox">
<ol class="chapter"><li class="chapter-item expanded affix "><a href="../index.html">Introduction</a></li><li class="chapter-item expanded "><a href="../getting_started/index.html"><strong aria-hidden="true">1.</strong> Getting Started</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../getting_started/desktop.html"><strong aria-hidden="true">1.1.</strong> Desktop</a></li><li class="chapter-item expanded "><a href="../getting_started/web.html"><strong aria-hidden="true">1.2.</strong> Web</a></li><li class="chapter-item expanded "><a href="../getting_started/ssr.html"><strong aria-hidden="true">1.3.</strong> Server-Side Rendering</a></li><li class="chapter-item expanded "><a href="../getting_started/fullstack.html"><strong aria-hidden="true">1.4.</strong> Fullstack</a></li><li class="chapter-item expanded "><a href="../getting_started/liveview.html"><strong aria-hidden="true">1.5.</strong> Liveview</a></li><li class="chapter-item expanded "><a href="../getting_started/tui.html"><strong aria-hidden="true">1.6.</strong> Terminal UI</a></li><li class="chapter-item expanded "><a href="../getting_started/mobile.html"><strong aria-hidden="true">1.7.</strong> Mobile</a></li><li class="chapter-item expanded "><a href="../getting_started/hot_reload.html"><strong aria-hidden="true">1.8.</strong> Hot Reloading</a></li></ol></li><li class="chapter-item expanded "><a href="../describing_ui/index.html"><strong aria-hidden="true">2.</strong> Describing the UI</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../describing_ui/special_attributes.html"><strong aria-hidden="true">2.1.</strong> Special Attributes</a></li><li class="chapter-item expanded "><a href="../describing_ui/components.html"><strong aria-hidden="true">2.2.</strong> Components</a></li><li class="chapter-item expanded "><a href="../describing_ui/component_props.html"><strong aria-hidden="true">2.3.</strong> Props</a></li><li class="chapter-item expanded "><a href="../describing_ui/component_children.html"><strong aria-hidden="true">2.4.</strong> Component Children</a></li></ol></li><li class="chapter-item expanded "><a href="../interactivity/index.html"><strong aria-hidden="true">3.</strong> Interactivity</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../interactivity/event_handlers.html"><strong aria-hidden="true">3.1.</strong> Event Listeners</a></li><li class="chapter-item expanded "><a href="../interactivity/hooks.html"><strong aria-hidden="true">3.2.</strong> Hooks &amp; Component State</a></li><li class="chapter-item expanded "><a href="../interactivity/user_input.html"><strong aria-hidden="true">3.3.</strong> User Input</a></li><li class="chapter-item expanded "><a href="../interactivity/sharing_state.html"><strong aria-hidden="true">3.4.</strong> Sharing State</a></li><li class="chapter-item expanded "><a href="../interactivity/custom_hooks.html"><strong aria-hidden="true">3.5.</strong> Custom Hooks</a></li><li class="chapter-item expanded "><a href="../interactivity/dynamic_rendering.html"><strong aria-hidden="true">3.6.</strong> Dynamic Rendering</a></li><li class="chapter-item expanded "><a href="../interactivity/router.html"><strong aria-hidden="true">3.7.</strong> Routing</a></li></ol></li><li class="chapter-item expanded "><a href="../async/index.html"><strong aria-hidden="true">4.</strong> Async</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../async/use_future.html"><strong aria-hidden="true">4.1.</strong> UseFuture</a></li><li class="chapter-item expanded "><a href="../async/use_coroutine.html"><strong aria-hidden="true">4.2.</strong> UseCoroutine</a></li><li class="chapter-item expanded "><a href="../async/spawn.html"><strong aria-hidden="true">4.3.</strong> Spawning Futures</a></li></ol></li><li class="chapter-item expanded "><a href="../best_practices/index.html"><strong aria-hidden="true">5.</strong> Best Practices</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../best_practices/error_handling.html"><strong aria-hidden="true">5.1.</strong> Error Handling</a></li><li class="chapter-item expanded "><a href="../best_practices/antipatterns.html"><strong aria-hidden="true">5.2.</strong> Antipatterns</a></li></ol></li><li class="chapter-item expanded "><a href="../publishing/index.html"><strong aria-hidden="true">6.</strong> Publishing</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../publishing/desktop.html"><strong aria-hidden="true">6.1.</strong> Desktop</a></li><li class="chapter-item expanded "><a href="../publishing/web.html"><strong aria-hidden="true">6.2.</strong> Web</a></li><li class="spacer"></li></ol></li><li class="chapter-item expanded "><a href="../fullstack/index.html"><strong aria-hidden="true">7.</strong> Fullstack</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../fullstack/getting_started.html"><strong aria-hidden="true">7.1.</strong> Getting Started</a></li><li class="chapter-item expanded "><a href="../fullstack/server_functions.html"><strong aria-hidden="true">7.2.</strong> Communicating with the Server</a></li><li class="spacer"></li></ol></li><li class="chapter-item expanded "><a href="../custom_renderer/index.html"><strong aria-hidden="true">8.</strong> Custom Renderer</a></li><li class="spacer"></li><li class="chapter-item expanded "><a href="../contributing/index.html"><strong aria-hidden="true">9.</strong> Contributing</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../contributing/project_structure.html"><strong aria-hidden="true">9.1.</strong> Project Structure</a></li><li class="chapter-item expanded "><a href="../contributing/walkthrough_readme.html"><strong aria-hidden="true">9.2.</strong> Walkthrough of Internals</a></li><li class="chapter-item expanded "><a href="../contributing/guiding_principles.html"><strong aria-hidden="true">9.3.</strong> Guiding Principles</a></li><li class="chapter-item expanded "><a href="../contributing/roadmap.html" class="active"><strong aria-hidden="true">9.4.</strong> Roadmap</a></li></ol></li></ol>
</div>
<div id="sidebar-resize-handle" class="sidebar-resize-handle"></div>
</nav>
<div id="page-wrapper" class="page-wrapper">
<div class="page">
<div id="menu-bar-hover-placeholder"></div>
<div id="menu-bar" class="menu-bar sticky bordered">
<div class="left-buttons">
<button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
<i class="fa fa-bars"></i>
</button>
<button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
<i class="fa fa-paint-brush"></i>
</button>
<ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
<li role="none"><button role="menuitem" class="theme" id="light">Light (default)</button></li>
<li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
<li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
<li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
<li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
</ul>
<button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
<i class="fa fa-search"></i>
</button>
<button id="language-toggle" class="icon-button" type="button" title="Select language" aria-label="Select language" aria-haspopup="true" aria-expanded="false" aria-controls="language-list">
<i class="fa fa-globe"></i>
</button>
<ul id="language-list" class="language-popup" aria-label="Languages" role="menu">
<li role="none"><a href="../../en/contributing/roadmap.html"><button role="menuitem" class="language" id="light">English</button></a></li>
<li role="none"><a href="../../pt-br/contributing/roadmap.html"><button role="menuitem" class="language" id="light">Português Brasileiro</button></a></li>
</ul>
</div>
<h1 class="menu-title"></h1>
<div class="right-buttons">
<a href="../print.html" title="Print this book" aria-label="Print this book">
<i id="print-button" class="fa fa-print"></i>
</a>
<a href="https://github.com/DioxusLabs/dioxus/edit/master/docs/guide" title="Git repository" aria-label="Git repository">
<i id="git-repository-button" class="fa fa-github"></i>
</a>
<a href="https://github.com/DioxusLabs/dioxus/edit/master/docs/guide/src/contributing/roadmap.md" title="Suggest an edit" aria-label="Suggest an edit">
<i id="git-edit-button" class="fa fa-edit"></i>
</a>
</div>
</div>
<div id="search-wrapper" class="hidden">
<form id="searchbar-outer" class="searchbar-outer">
<input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
</form>
<div id="searchresults-outer" class="searchresults-outer hidden">
<div id="searchresults-header" class="searchresults-header"></div>
<ul id="searchresults">
</ul>
</div>
</div>
<!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
<script type="text/javascript">
document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) {
link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
});
</script>
<div id="content" class="content">
<main>
<h1 id="roadmap--feature-set"><a class="header" href="#roadmap--feature-set">Roadmap &amp; Feature-set</a></h1>
<p>This feature set and roadmap can help you decide if what Dioxus can do today works for you.</p>
<p>If a feature that you need doesn't exist or you want to contribute to projects on the roadmap, feel free to get involved by <a href="https://discord.gg/XgGxMSkvUM">joining the discord</a>.</p>
<p>Generally, here's the status of each platform:</p>
<ul>
<li>
<p><strong>Web</strong>: Dioxus is a great choice for pure web-apps – especially for CRUD/complex apps. However, it does lack the ecosystem of React, so you might be missing a component library or some useful hook.</p>
</li>
<li>
<p><strong>SSR</strong>: Dioxus is a great choice for pre-rendering, hydration, and rendering HTML on a web endpoint. Be warned – the VirtualDom is not (currently) <code>Send + Sync</code>.</p>
</li>
<li>
<p><strong>Desktop</strong>: You can build very competent single-window desktop apps right now. However, multi-window apps require support from Dioxus core and are not ready.</p>
</li>
<li>
<p><strong>Mobile</strong>: Mobile support is very young. You'll be figuring things out as you go and there are not many support crates for peripherals.</p>
</li>
<li>
<p><strong>LiveView</strong>: LiveView support is very young. You'll be figuring things out as you go. Thankfully, none of it is too hard and any work can be upstreamed into Dioxus.</p>
</li>
</ul>
<h2 id="features"><a class="header" href="#features">Features</a></h2>
<hr />
<table><thead><tr><th>Feature</th><th>Status</th><th>Description</th></tr></thead><tbody>
<tr><td>Conditional Rendering</td><td>✅</td><td>if/then to hide/show component</td></tr>
<tr><td>Map, Iterator</td><td>✅</td><td>map/filter/reduce to produce rsx!</td></tr>
<tr><td>Keyed Components</td><td>✅</td><td>advanced diffing with keys</td></tr>
<tr><td>Web</td><td>✅</td><td>renderer for web browser</td></tr>
<tr><td>Desktop (webview)</td><td>✅</td><td>renderer for desktop</td></tr>
<tr><td>Shared State (Context)</td><td>✅</td><td>share state through the tree</td></tr>
<tr><td>Hooks</td><td>✅</td><td>memory cells in components</td></tr>
<tr><td>SSR</td><td>✅</td><td>render directly to string</td></tr>
<tr><td>Component Children</td><td>✅</td><td>cx.children() as a list of nodes</td></tr>
<tr><td>Headless components</td><td>✅</td><td>components that don't return real elements</td></tr>
<tr><td>Fragments</td><td>✅</td><td>multiple elements without a real root</td></tr>
<tr><td>Manual Props</td><td>✅</td><td>Manually pass in props with spread syntax</td></tr>
<tr><td>Controlled Inputs</td><td>✅</td><td>stateful wrappers around inputs</td></tr>
<tr><td>CSS/Inline Styles</td><td>✅</td><td>syntax for inline styles/attribute groups</td></tr>
<tr><td>Custom elements</td><td>✅</td><td>Define new element primitives</td></tr>
<tr><td>Suspense</td><td>✅</td><td>schedule future render from future/promise</td></tr>
<tr><td>Integrated error handling</td><td>✅</td><td>Gracefully handle errors with ? syntax</td></tr>
<tr><td>NodeRef</td><td>✅</td><td>gain direct access to nodes</td></tr>
<tr><td>Re-hydration</td><td>✅</td><td>Pre-render to HTML to speed up first contentful paint</td></tr>
<tr><td>Jank-Free Rendering</td><td>✅</td><td>Large diffs are segmented across frames for silky-smooth transitions</td></tr>
<tr><td>Effects</td><td>✅</td><td>Run effects after a component has been committed to render</td></tr>
<tr><td>Portals</td><td>🛠</td><td>Render nodes outside of the traditional tree structure</td></tr>
<tr><td>Cooperative Scheduling</td><td>🛠</td><td>Prioritize important events over non-important events</td></tr>
<tr><td>Server Components</td><td>🛠</td><td>Hybrid components for SPA and Server</td></tr>
<tr><td>Bundle Splitting</td><td>👀</td><td>Efficiently and asynchronously load the app</td></tr>
<tr><td>Lazy Components</td><td>👀</td><td>Dynamically load the new components as the page is loaded</td></tr>
<tr><td>1st class global state</td><td>✅</td><td>redux/recoil/mobx on top of context</td></tr>
<tr><td>Runs natively</td><td>✅</td><td>runs as a portable binary w/o a runtime (Node)</td></tr>
<tr><td>Subtree Memoization</td><td>✅</td><td>skip diffing static element subtrees</td></tr>
<tr><td>High-efficiency templates</td><td>✅</td><td>rsx! calls are translated to templates on the DOM's side</td></tr>
<tr><td>Compile-time correct</td><td>✅</td><td>Throw errors on invalid template layouts</td></tr>
<tr><td>Heuristic Engine</td><td>✅</td><td>track component memory usage to minimize future allocations</td></tr>
<tr><td>Fine-grained reactivity</td><td>👀</td><td>Skip diffing for fine-grain updates</td></tr>
</tbody></table>
<ul>
<li>✅ = implemented and working</li>
<li>🛠 = actively being worked on</li>
<li>👀 = not yet implemented or being worked on</li>
</ul>
<h2 id="roadmap"><a class="header" href="#roadmap">Roadmap</a></h2>
<p>These Features are planned for the future of Dioxus:</p>
<h3 id="core"><a class="header" href="#core">Core</a></h3>
<ul>
<li><input disabled="" type="checkbox" checked=""/>
Release of Dioxus Core</li>
<li><input disabled="" type="checkbox" checked=""/>
Upgrade documentation to include more theory and be more comprehensive</li>
<li><input disabled="" type="checkbox" checked=""/>
Support for HTML-side templates for lightning-fast dom manipulation</li>
<li><input disabled="" type="checkbox"/>
Support for multiple renderers for same virtualdom (subtrees)</li>
<li><input disabled="" type="checkbox"/>
Support for ThreadSafe (Send + Sync)</li>
<li><input disabled="" type="checkbox"/>
Support for Portals</li>
</ul>
<h3 id="ssr"><a class="header" href="#ssr">SSR</a></h3>
<ul>
<li><input disabled="" type="checkbox" checked=""/>
SSR Support + Hydration</li>
<li><input disabled="" type="checkbox"/>
Integrated suspense support for SSR</li>
</ul>
<h3 id="desktop"><a class="header" href="#desktop">Desktop</a></h3>
<ul>
<li><input disabled="" type="checkbox"/>
Declarative window management</li>
<li><input disabled="" type="checkbox"/>
Templates for building/bundling</li>
<li><input disabled="" type="checkbox"/>
Access to Canvas/WebGL context natively</li>
</ul>
<h3 id="mobile"><a class="header" href="#mobile">Mobile</a></h3>
<ul>
<li><input disabled="" type="checkbox"/>
Mobile standard library
<ul>
<li><input disabled="" type="checkbox"/>
GPS</li>
<li><input disabled="" type="checkbox"/>
Camera</li>
<li><input disabled="" type="checkbox"/>
filesystem</li>
<li><input disabled="" type="checkbox"/>
Biometrics</li>
<li><input disabled="" type="checkbox"/>
WiFi</li>
<li><input disabled="" type="checkbox"/>
Bluetooth</li>
<li><input disabled="" type="checkbox"/>
Notifications</li>
<li><input disabled="" type="checkbox"/>
Clipboard</li>
</ul>
</li>
<li><input disabled="" type="checkbox"/>
Animations</li>
</ul>
<h3 id="bundling-cli"><a class="header" href="#bundling-cli">Bundling (CLI)</a></h3>
<ul>
<li><input disabled="" type="checkbox" checked=""/>
Translation from HTML into RSX</li>
<li><input disabled="" type="checkbox" checked=""/>
Dev server</li>
<li><input disabled="" type="checkbox" checked=""/>
Live reload</li>
<li><input disabled="" type="checkbox" checked=""/>
Translation from JSX into RSX</li>
<li><input disabled="" type="checkbox"/>
Hot module replacement</li>
<li><input disabled="" type="checkbox"/>
Code splitting</li>
<li><input disabled="" type="checkbox"/>
Asset macros</li>
<li><input disabled="" type="checkbox"/>
Css pipeline</li>
<li><input disabled="" type="checkbox"/>
Image pipeline</li>
</ul>
<h3 id="essential-hooks"><a class="header" href="#essential-hooks">Essential hooks</a></h3>
<ul>
<li><input disabled="" type="checkbox" checked=""/>
Router</li>
<li><input disabled="" type="checkbox" checked=""/>
Global state management</li>
<li><input disabled="" type="checkbox"/>
Resize observer</li>
</ul>
<h2 id="work-in-progress"><a class="header" href="#work-in-progress">Work in Progress</a></h2>
<h3 id="build-tool"><a class="header" href="#build-tool">Build Tool</a></h3>
<p>We are currently working on our own build tool called <a href="https://github.com/DioxusLabs/cli">Dioxus CLI</a> which will support:</p>
<ul>
<li>an interactive TUI</li>
<li>on-the-fly reconfiguration</li>
<li>hot CSS reloading</li>
<li>two-way data binding between browser and source code</li>
<li>an interpreter for <code>rsx!</code></li>
<li>ability to publish to github/netlify/vercel</li>
<li>bundling for iOS/Desktop/etc</li>
</ul>
<h3 id="server-component-support"><a class="header" href="#server-component-support">Server Component Support</a></h3>
<p>While not currently fully implemented, the expectation is that LiveView apps can be a hybrid between Wasm and server-rendered where only portions of a page are &quot;live&quot; and the rest of the page is either server-rendered, statically generated, or handled by the host SPA.</p>
<h3 id="native-rendering"><a class="header" href="#native-rendering">Native rendering</a></h3>
<p>We are currently working on a native renderer for Dioxus using WGPU called <a href="https://github.com/DioxusLabs/blitz/">Blitz</a>. This will allow you to build apps that are rendered natively for iOS, Android, and Desktop.</p>
</main>
<nav class="nav-wrapper" aria-label="Page navigation">
<!-- Mobile navigation buttons -->
<a rel="prev" href="../contributing/guiding_principles.html" class="mobile-nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
<i class="fa fa-angle-left"></i>
</a>
<div style="clear: both"></div>
</nav>
</div>
</div>
<nav class="nav-wide-wrapper" aria-label="Page navigation">
<a rel="prev" href="../contributing/guiding_principles.html" class="nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
<i class="fa fa-angle-left"></i>
</a>
</nav>
</div>
<script type="text/javascript">
window.playground_line_numbers = true;
</script>
<script type="text/javascript">
window.playground_copyable = true;
</script>
<script src="../ace.js" type="text/javascript" charset="utf-8"></script>
<script src="../editor.js" type="text/javascript" charset="utf-8"></script>
<script src="../mode-rust.js" type="text/javascript" charset="utf-8"></script>
<script src="../theme-dawn.js" type="text/javascript" charset="utf-8"></script>
<script src="../theme-tomorrow_night.js" type="text/javascript" charset="utf-8"></script>
<script src="../elasticlunr.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../mark.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../searcher.js" type="text/javascript" charset="utf-8"></script>
<script src="../clipboard.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../highlight.js" type="text/javascript" charset="utf-8"></script>
<script src="../book.js" type="text/javascript" charset="utf-8"></script>
<!-- Custom JS scripts -->
</body>
</html>