CINXE.COM
GitHub - nextapps-de/mikado: Mikado is the webs fastest template library for building user interfaces.
<!DOCTYPE html> <html lang="en" data-color-mode="auto" data-light-theme="light" data-dark-theme="dark" data-a11y-animated-images="system" data-a11y-link-underlines="true" > <head> <meta charset="utf-8"> <link rel="dns-prefetch" href="https://github.githubassets.com"> <link rel="dns-prefetch" href="https://avatars.githubusercontent.com"> <link rel="dns-prefetch" href="https://github-cloud.s3.amazonaws.com"> <link rel="dns-prefetch" href="https://user-images.githubusercontent.com/"> <link rel="preconnect" href="https://github.githubassets.com" crossorigin> <link rel="preconnect" href="https://avatars.githubusercontent.com"> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/light-7aa84bb7e11e.css" /><link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/dark-f65db3e8d171.css" /><link data-color-theme="dark_dimmed" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_dimmed-a8258e3c6dda.css" /><link data-color-theme="dark_high_contrast" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_high_contrast-7e97d834719c.css" /><link data-color-theme="dark_colorblind" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_colorblind-01d869f460be.css" /><link data-color-theme="light_colorblind" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_colorblind-534f3e971240.css" /><link data-color-theme="light_high_contrast" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_high_contrast-a8cc7d138001.css" /><link data-color-theme="light_tritanopia" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_tritanopia-35e9dfdc4f9f.css" /><link data-color-theme="dark_tritanopia" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_tritanopia-cf4cc5f62dfe.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-primitives-d9abecd14f1e.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-93aded0ee8a1.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/global-21a7f868f707.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/github-15d4b28ab680.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/repository-4fce88777fa8.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/code-0210be90f4d3.css" /> <script type="application/json" id="client-env">{"locale":"en","featureFlags":["a11y_quote_reply_fix","contentful_lp_optimize_image","contentful_response_validation","copilot_immersive_file_preview","copilot_new_references_ui","copilot_personal_instructions","copilot_personal_instructions_templates","copilot_chat_repo_custom_instructions_preview","copilot_chat_immersive_subthreading","copilot_chat_retry_on_error","copilot_chat_persist_submitted_input","copilot_conversational_ux_history_refs","copilot_chat_shared_chat_input","copilot_editor_upsells","copilot_implicit_context","copilot_no_floating_button","copilot_smell_icebreaker_ux","copilot_spaces_multi_file_picker","copilot_read_shared_conversation","dotcom_chat_client_side_skills","experimentation_azure_variant_endpoint","failbot_handle_non_errors","geojson_azure_maps","ghost_pilot_confidence_truncation_25","ghost_pilot_confidence_truncation_40","github_models_o3_mini_streaming","hide_billing_usage_filters","hovercard_accessibility","insert_before_patch","issues_react_remove_placeholders","issues_react_blur_item_picker_on_close","issues_react_include_bots_in_pickers","marketing_pages_search_explore_provider","remove_child_patch","sample_network_conn_type","swp_enterprise_contact_form","site_copilot_extensions_ga","site_copilot_extensions_hero","site_copilot_plans_2_27","site_copilot_vscode_link_update","site_proxima_australia_update","issues_react_create_milestone","issues_react_cache_fix_workaround","lifecycle_label_name_updates"]}</script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/wp-runtime-1e76f3c84c94.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_oddbird_popover-polyfill_dist_popover_js-9da652f58479.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_arianotify-polyfill_ariaNotify-polyfill_js-node_modules_github_mi-3abb8f-d7e6bc799724.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_failbot_failbot_ts-4600dbf2d60a.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/environment-f04cb2a9fc8c.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_primer_behaviors_dist_esm_index_mjs-0dbb79f97f8f.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_selector-observer_dist_index_esm_js-f690fd9ae3d5.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_relative-time-element_dist_index_js-f6da4b3fa34c.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_auto-complete-element_dist_index_js-node_modules_github_catalyst_-8e9f78-a74b4e0a8a6b.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_text-expander-element_dist_index_js-78748950cb0c.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_filter-input-element_dist_index_js-node_modules_github_remote-inp-b5f1d7-a1760ffda83d.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_markdown-toolbar-element_dist_index_js-ceef33f593fa.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_file-attachment-element_dist_index_js-node_modules_primer_view-co-c44a69-8094ee2ecc5e.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/github-elements-c5fd390b3ba0.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/element-registry-7adbcd7746ed.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_braintree_browser-detection_dist_browser-detection_js-node_modules_githu-bb80ec-72267f4e3ff9.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_lit-html_lit-html_js-be8cb88f481b.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_mini-throttle_dist_index_js-node_modules_morphdom_dist_morphdom-e-7c534c-a4a1922eb55f.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_turbo_dist_turbo_es2017-esm_js-e3cbe28f1638.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_remote-form_dist_index_js-node_modules_delegated-events_dist_inde-893f9f-6cf3320416b8.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_color-convert_index_js-e3180fe3bcb3.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_quote-selection_dist_index_js-node_modules_github_session-resume_-69cfcc-bc42a18e77d5.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_updatable-content_updatable-content_ts-a1563f62660e.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_behaviors_task-list_ts-app_assets_modules_github_sso_ts-ui_packages-900dde-035d0557f18e.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_sticky-scroll-into-view_ts-3e000c5d31a9.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_behaviors_ajax-error_ts-app_assets_modules_github_behaviors_include-87a4ae-97019968d380.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_behaviors_commenting_edit_ts-app_assets_modules_github_behaviors_ht-83c235-e429cff6ceb1.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/behaviors-35a199ae31f1.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_delegated-events_dist_index_js-node_modules_github_catalyst_lib_index_js-f6223d90c7ba.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/notifications-global-01e85cd1be94.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_virtualized-list_es_index_js-node_modules_github_template-parts_lib_index_js-94dc7a2157c1.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_remote-form_dist_index_js-node_modules_delegated-events_dist_inde-70450e-eecf0d50276f.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_ref-selector_ts-3e9d848bab5f.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/codespaces-7459d4a230c1.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_filter-input-element_dist_index_js-node_modules_github_remote-inp-3eebbd-0763620ad7bf.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_mini-throttle_dist_decorators_js-node_modules_delegated-events_di-e161aa-9d41fb1b6c9e.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_file-attachment-element_dist_index_js-node_modules_github_remote--3c9c82-7238cfcdaa51.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/repositories-7a0dbaa42c57.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_mini-throttle_dist_index_js-node_modules_github_catalyst_lib_inde-dbbea9-26cce2010167.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/code-menu-1c0aedc134b1.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/primer-react-9a5713772ca5.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/react-core-8ae1d26093eb.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/react-lib-f1bca44e0926.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/octicons-react-611691cca2f6.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_emotion_is-prop-valid_dist_emotion-is-prop-valid_esm_js-node_modules_emo-62da9f-2df2f32ec596.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_mini-throttle_dist_index_js-node_modules_stacktrace-parser_dist_s-e7dcdd-f7cc96ebae76.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_oddbird_popover-polyfill_dist_popover-fn_js-55fea94174bf.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/notifications-subscriptions-menu-a49269061276.js"></script> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-react.9c31aecc261f2550ab27.module.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/notifications-subscriptions-menu.1bcff9205c241e99cff2.module.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-react.9c31aecc261f2550ab27.module.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/notifications-subscriptions-menu.1bcff9205c241e99cff2.module.css" /> <title>GitHub - nextapps-de/mikado: Mikado is the webs fastest template library for building user interfaces.</title> <meta name="route-pattern" content="/:user_id/:repository" data-turbo-transient> <meta name="route-controller" content="files" data-turbo-transient> <meta name="route-action" content="disambiguate" data-turbo-transient> <meta name="current-catalog-service-hash" content="f3abb0cc802f3d7b95fc8762b94bdcb13bf39634c40c357301c4aa1d67a256fb"> <meta name="request-id" content="E15C:39A99F:126DB74:166287A:67C38015" data-pjax-transient="true"/><meta name="html-safe-nonce" content="f605162bf0761b9ee1b1ea810309faa361dc5335f55f4423a9d8829e4e46aeca" data-pjax-transient="true"/><meta name="visitor-payload" content="eyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiJFMTVDOjM5QTk5RjoxMjZEQjc0OjE2NjI4N0E6NjdDMzgwMTUiLCJ2aXNpdG9yX2lkIjoiMTc1NDgyMTQ2NTkwOTQ2MTAxMyIsInJlZ2lvbl9lZGdlIjoic291dGhlYXN0YXNpYSIsInJlZ2lvbl9yZW5kZXIiOiJzb3V0aGVhc3Rhc2lhIn0=" data-pjax-transient="true"/><meta name="visitor-hmac" content="1dd8d6e6bde24564fc2f6a0f2f06536978e3dbfcd2f2ca56471ca5185c7c8d98" data-pjax-transient="true"/> <meta name="hovercard-subject-tag" content="repository:206418939" data-turbo-transient> <meta name="github-keyboard-shortcuts" content="repository,copilot" data-turbo-transient="true" /> <meta name="selected-link" value="repo_source" data-turbo-transient> <link rel="assets" href="https://github.githubassets.com/"> <meta name="google-site-verification" content="Apib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I"> <meta name="octolytics-url" content="https://collector.github.com/github/collect" /> <meta name="analytics-location" content="/<user-name>/<repo-name>" data-turbo-transient="true" /> <meta name="user-login" content=""> <meta name="viewport" content="width=device-width"> <meta name="description" content="Mikado is the webs fastest template library for building user interfaces. - nextapps-de/mikado"> <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="GitHub"> <link rel="fluid-icon" href="https://github.com/fluidicon.png" title="GitHub"> <meta property="fb:app_id" content="1401488693436528"> <meta name="apple-itunes-app" content="app-id=1477376905, app-argument=https://github.com/nextapps-de/mikado" /> <meta name="twitter:image" content="https://repository-images.githubusercontent.com/206418939/73000a80-d97e-11e9-98c5-9f1febb30bce" /><meta name="twitter:site" content="@github" /><meta name="twitter:card" content="summary_large_image" /><meta name="twitter:title" content="GitHub - nextapps-de/mikado: Mikado is the webs fastest template library for building user interfaces." /><meta name="twitter:description" content="Mikado is the webs fastest template library for building user interfaces. - nextapps-de/mikado" /> <meta property="og:image" content="https://repository-images.githubusercontent.com/206418939/73000a80-d97e-11e9-98c5-9f1febb30bce" /><meta property="og:image:alt" content="Mikado is the webs fastest template library for building user interfaces. - nextapps-de/mikado" /><meta property="og:site_name" content="GitHub" /><meta property="og:type" content="object" /><meta property="og:title" content="GitHub - nextapps-de/mikado: Mikado is the webs fastest template library for building user interfaces." /><meta property="og:url" content="https://github.com/nextapps-de/mikado" /><meta property="og:description" content="Mikado is the webs fastest template library for building user interfaces. - nextapps-de/mikado" /> <meta name="hostname" content="github.com"> <meta name="expected-hostname" content="github.com"> <meta http-equiv="x-pjax-version" content="71301db3fff57942196ed3d4931fed9ee47a9a27218b37f12ab7e466a042cb9b" data-turbo-track="reload"> <meta http-equiv="x-pjax-csp-version" content="1387756d457e2f7c930482f0374bab8f35110d772491ea950a7236d69098c3a6" data-turbo-track="reload"> <meta http-equiv="x-pjax-css-version" content="a30977995814647d0827c66025b8a8c5cb8722c27765b03e9e34bf066d054640" data-turbo-track="reload"> <meta http-equiv="x-pjax-js-version" content="3edc4005bc546bb5cfc978399a15ee0e9c7901f7f912b18e86fff27ed0e9709d" data-turbo-track="reload"> <meta name="turbo-cache-control" content="no-preview" data-turbo-transient=""> <meta data-hydrostats="publish"> <meta name="go-import" content="github.com/nextapps-de/mikado git https://github.com/nextapps-de/mikado.git"> <meta name="octolytics-dimension-user_id" content="28928681" /><meta name="octolytics-dimension-user_login" content="nextapps-de" /><meta name="octolytics-dimension-repository_id" content="206418939" /><meta name="octolytics-dimension-repository_nwo" content="nextapps-de/mikado" /><meta name="octolytics-dimension-repository_public" content="true" /><meta name="octolytics-dimension-repository_is_fork" content="false" /><meta name="octolytics-dimension-repository_network_root_id" content="206418939" /><meta name="octolytics-dimension-repository_network_root_nwo" content="nextapps-de/mikado" /> <link rel="canonical" href="https://github.com/nextapps-de/mikado" data-turbo-transient> <meta name="turbo-body-classes" content="logged-out env-production page-responsive"> <meta name="browser-stats-url" content="https://api.github.com/_private/browser/stats"> <meta name="browser-errors-url" content="https://api.github.com/_private/browser/errors"> <link rel="mask-icon" href="https://github.githubassets.com/assets/pinned-octocat-093da3e6fa40.svg" color="#000000"> <link rel="alternate icon" class="js-site-favicon" type="image/png" href="https://github.githubassets.com/favicons/favicon.png"> <link rel="icon" class="js-site-favicon" type="image/svg+xml" href="https://github.githubassets.com/favicons/favicon.svg" data-base-href="https://github.githubassets.com/favicons/favicon"> <meta name="theme-color" content="#1e2327"> <meta name="color-scheme" content="light dark" /> <link rel="manifest" href="/manifest.json" crossOrigin="use-credentials"> </head> <body class="logged-out env-production page-responsive" style="word-wrap: break-word;"> <div data-turbo-body class="logged-out env-production page-responsive" style="word-wrap: break-word;"> <div class="position-relative header-wrapper js-header-wrapper "> <a href="#start-of-content" data-skip-target-assigned="false" class="px-2 py-4 color-bg-accent-emphasis color-fg-on-emphasis show-on-focus js-skip-to-content">Skip to content</a> <span data-view-component="true" class="progress-pjax-loader Progress position-fixed width-full"> <span style="width: 0%;" data-view-component="true" class="Progress-item progress-pjax-loader-bar left-0 top-0 color-bg-accent-emphasis"></span> </span> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_ui-commands_ui-commands_ts-97496b0f52ba.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/keyboard-shortcuts-dialog-ac448fe050d6.js"></script> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-react.9c31aecc261f2550ab27.module.css" /> <react-partial partial-name="keyboard-shortcuts-dialog" data-ssr="false" data-attempted-ssr="false" > <script type="application/json" data-target="react-partial.embeddedData">{"props":{"docsUrl":"https://docs.github.com/get-started/accessibility/keyboard-shortcuts"}}</script> <div data-target="react-partial.reactRoot"></div> </react-partial> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_remote-form_dist_index_js-node_modules_delegated-events_dist_inde-94fd67-56e2d9924e94.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/sessions-730dca81d0a2.js"></script> <header class="HeaderMktg header-logged-out js-details-container js-header Details f4 py-3" role="banner" data-is-top="true" data-color-mode=light data-light-theme=light data-dark-theme=dark> <h2 class="sr-only">Navigation Menu</h2> <button type="button" class="HeaderMktg-backdrop d-lg-none border-0 position-fixed top-0 left-0 width-full height-full js-details-target" aria-label="Toggle navigation"> <span class="d-none">Toggle navigation</span> </button> <div class="d-flex flex-column flex-lg-row flex-items-center px-3 px-md-4 px-lg-5 height-full position-relative z-1"> <div class="d-flex flex-justify-between flex-items-center width-full width-lg-auto"> <div class="flex-1"> <button aria-label="Toggle navigation" aria-expanded="false" type="button" data-view-component="true" class="js-details-target js-nav-padding-recalculate js-header-menu-toggle Button--link Button--medium Button d-lg-none color-fg-inherit p-1"> <span class="Button-content"> <span class="Button-label"><div class="HeaderMenu-toggle-bar rounded my-1"></div> <div class="HeaderMenu-toggle-bar rounded my-1"></div> <div class="HeaderMenu-toggle-bar rounded my-1"></div></span> </span> </button> </div> <a class="mr-lg-3 color-fg-inherit flex-order-2 js-prevent-focus-on-mobile-nav" href="/" aria-label="Homepage" data-analytics-event="{"category":"Marketing nav","action":"click to go to homepage","label":"ref_page:Marketing;ref_cta:Logomark;ref_loc:Header"}"> <svg height="32" aria-hidden="true" viewBox="0 0 24 24" version="1.1" width="32" data-view-component="true" class="octicon octicon-mark-github"> <path d="M12.5.75C6.146.75 1 5.896 1 12.25c0 5.089 3.292 9.387 7.863 10.91.575.101.79-.244.79-.546 0-.273-.014-1.178-.014-2.142-2.889.532-3.636-.704-3.866-1.35-.13-.331-.69-1.352-1.18-1.625-.402-.216-.977-.748-.014-.762.906-.014 1.553.834 1.769 1.179 1.035 1.74 2.688 1.25 3.349.948.1-.747.402-1.25.733-1.538-2.559-.287-5.232-1.279-5.232-5.678 0-1.25.445-2.285 1.178-3.09-.115-.288-.517-1.467.115-3.048 0 0 .963-.302 3.163 1.179.92-.259 1.897-.388 2.875-.388.977 0 1.955.13 2.875.388 2.2-1.495 3.162-1.179 3.162-1.179.633 1.581.23 2.76.115 3.048.733.805 1.179 1.825 1.179 3.09 0 4.413-2.688 5.39-5.247 5.678.417.36.776 1.05.776 2.128 0 1.538-.014 2.774-.014 3.162 0 .302.216.662.79.547C20.709 21.637 24 17.324 24 12.25 24 5.896 18.854.75 12.5.75Z"></path> </svg> </a> <div class="flex-1 flex-order-2 text-right"> <a href="/login?return_to=https%3A%2F%2Fgithub.com%2Fnextapps-de%2Fmikado" class="HeaderMenu-link HeaderMenu-button d-inline-flex d-lg-none flex-order-1 f5 no-underline border color-border-default rounded-2 px-2 py-1 color-fg-inherit js-prevent-focus-on-mobile-nav" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"site header menu","repository_id":null,"auth_type":"SIGN_UP","originating_url":"https://github.com/nextapps-de/mikado","user_id":null}}" data-hydro-click-hmac="e8aabf44ef7cdf5eaa0abd635bf15bb9330c258f716227d60ea8eca649894da6" data-analytics-event="{"category":"Marketing nav","action":"click to Sign in","label":"ref_page:Marketing;ref_cta:Sign in;ref_loc:Header"}" > Sign in </a> </div> </div> <div class="HeaderMenu js-header-menu height-fit position-lg-relative d-lg-flex flex-column flex-auto top-0"> <div class="HeaderMenu-wrapper d-flex flex-column flex-self-start flex-lg-row flex-auto rounded rounded-lg-0"> <nav class="HeaderMenu-nav" aria-label="Global"> <ul class="d-lg-flex list-style-none"> <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item"> <button type="button" class="HeaderMenu-link border-0 width-full width-lg-auto px-0 px-lg-2 py-lg-2 no-wrap d-flex flex-items-center flex-justify-between js-details-target" aria-expanded="false"> Product <svg opacity="0.5" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-down HeaderMenu-icon ml-1"> <path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path> </svg> </button> <div class="HeaderMenu-dropdown dropdown-menu rounded m-0 p-0 pt-2 pt-lg-4 position-relative position-lg-absolute left-0 left-lg-n3 pb-2 pb-lg-4 d-lg-flex flex-wrap dropdown-menu-wide"> <div class="HeaderMenu-column px-lg-4 border-lg-right mb-4 mb-lg-0 pr-lg-7"> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0"> <ul class="list-style-none f5" > <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"github_copilot","context":"product","tag":"link","label":"github_copilot_link_product_navbar"}" href="https://github.com/features/copilot"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-copilot color-fg-subtle mr-3"> <path d="M23.922 16.992c-.861 1.495-5.859 5.023-11.922 5.023-6.063 0-11.061-3.528-11.922-5.023A.641.641 0 0 1 0 16.736v-2.869a.841.841 0 0 1 .053-.22c.372-.935 1.347-2.292 2.605-2.656.167-.429.414-1.055.644-1.517a10.195 10.195 0 0 1-.052-1.086c0-1.331.282-2.499 1.132-3.368.397-.406.89-.717 1.474-.952 1.399-1.136 3.392-2.093 6.122-2.093 2.731 0 4.767.957 6.166 2.093.584.235 1.077.546 1.474.952.85.869 1.132 2.037 1.132 3.368 0 .368-.014.733-.052 1.086.23.462.477 1.088.644 1.517 1.258.364 2.233 1.721 2.605 2.656a.832.832 0 0 1 .053.22v2.869a.641.641 0 0 1-.078.256ZM12.172 11h-.344a4.323 4.323 0 0 1-.355.508C10.703 12.455 9.555 13 7.965 13c-1.725 0-2.989-.359-3.782-1.259a2.005 2.005 0 0 1-.085-.104L4 11.741v6.585c1.435.779 4.514 2.179 8 2.179 3.486 0 6.565-1.4 8-2.179v-6.585l-.098-.104s-.033.045-.085.104c-.793.9-2.057 1.259-3.782 1.259-1.59 0-2.738-.545-3.508-1.492a4.323 4.323 0 0 1-.355-.508h-.016.016Zm.641-2.935c.136 1.057.403 1.913.878 2.497.442.544 1.134.938 2.344.938 1.573 0 2.292-.337 2.657-.751.384-.435.558-1.15.558-2.361 0-1.14-.243-1.847-.705-2.319-.477-.488-1.319-.862-2.824-1.025-1.487-.161-2.192.138-2.533.529-.269.307-.437.808-.438 1.578v.021c0 .265.021.562.063.893Zm-1.626 0c.042-.331.063-.628.063-.894v-.02c-.001-.77-.169-1.271-.438-1.578-.341-.391-1.046-.69-2.533-.529-1.505.163-2.347.537-2.824 1.025-.462.472-.705 1.179-.705 2.319 0 1.211.175 1.926.558 2.361.365.414 1.084.751 2.657.751 1.21 0 1.902-.394 2.344-.938.475-.584.742-1.44.878-2.497Z"></path><path d="M14.5 14.25a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1Zm-5 0a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1Z"></path> </svg> <div> <div class="color-fg-default h4">GitHub Copilot</div> Write better code with AI </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"security","context":"product","tag":"link","label":"security_link_product_navbar"}" href="https://github.com/features/security"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-shield-check color-fg-subtle mr-3"> <path d="M16.53 9.78a.75.75 0 0 0-1.06-1.06L11 13.19l-1.97-1.97a.75.75 0 0 0-1.06 1.06l2.5 2.5a.75.75 0 0 0 1.06 0l5-5Z"></path><path d="m12.54.637 8.25 2.675A1.75 1.75 0 0 1 22 4.976V10c0 6.19-3.771 10.704-9.401 12.83a1.704 1.704 0 0 1-1.198 0C5.77 20.705 2 16.19 2 10V4.976c0-.758.489-1.43 1.21-1.664L11.46.637a1.748 1.748 0 0 1 1.08 0Zm-.617 1.426-8.25 2.676a.249.249 0 0 0-.173.237V10c0 5.46 3.28 9.483 8.43 11.426a.199.199 0 0 0 .14 0C17.22 19.483 20.5 15.461 20.5 10V4.976a.25.25 0 0 0-.173-.237l-8.25-2.676a.253.253 0 0 0-.154 0Z"></path> </svg> <div> <div class="color-fg-default h4">Security</div> Find and fix vulnerabilities </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"actions","context":"product","tag":"link","label":"actions_link_product_navbar"}" href="https://github.com/features/actions"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-workflow color-fg-subtle mr-3"> <path d="M1 3a2 2 0 0 1 2-2h6.5a2 2 0 0 1 2 2v6.5a2 2 0 0 1-2 2H7v4.063C7 16.355 7.644 17 8.438 17H12.5v-2.5a2 2 0 0 1 2-2H21a2 2 0 0 1 2 2V21a2 2 0 0 1-2 2h-6.5a2 2 0 0 1-2-2v-2.5H8.437A2.939 2.939 0 0 1 5.5 15.562V11.5H3a2 2 0 0 1-2-2Zm2-.5a.5.5 0 0 0-.5.5v6.5a.5.5 0 0 0 .5.5h6.5a.5.5 0 0 0 .5-.5V3a.5.5 0 0 0-.5-.5ZM14.5 14a.5.5 0 0 0-.5.5V21a.5.5 0 0 0 .5.5H21a.5.5 0 0 0 .5-.5v-6.5a.5.5 0 0 0-.5-.5Z"></path> </svg> <div> <div class="color-fg-default h4">Actions</div> Automate any workflow </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"codespaces","context":"product","tag":"link","label":"codespaces_link_product_navbar"}" href="https://github.com/features/codespaces"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-codespaces color-fg-subtle mr-3"> <path d="M3.5 3.75C3.5 2.784 4.284 2 5.25 2h13.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 18.75 13H5.25a1.75 1.75 0 0 1-1.75-1.75Zm-2 12c0-.966.784-1.75 1.75-1.75h17.5c.966 0 1.75.784 1.75 1.75v4a1.75 1.75 0 0 1-1.75 1.75H3.25a1.75 1.75 0 0 1-1.75-1.75ZM5.25 3.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h13.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Zm-2 12a.25.25 0 0 0-.25.25v4c0 .138.112.25.25.25h17.5a.25.25 0 0 0 .25-.25v-4a.25.25 0 0 0-.25-.25Z"></path><path d="M10 17.75a.75.75 0 0 1 .75-.75h6.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1-.75-.75Zm-4 0a.75.75 0 0 1 .75-.75h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1-.75-.75Z"></path> </svg> <div> <div class="color-fg-default h4">Codespaces</div> Instant dev environments </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"issues","context":"product","tag":"link","label":"issues_link_product_navbar"}" href="https://github.com/features/issues"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-issue-opened color-fg-subtle mr-3"> <path d="M12 1c6.075 0 11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1ZM2.5 12a9.5 9.5 0 0 0 9.5 9.5 9.5 9.5 0 0 0 9.5-9.5A9.5 9.5 0 0 0 12 2.5 9.5 9.5 0 0 0 2.5 12Zm9.5 2a2 2 0 1 1-.001-3.999A2 2 0 0 1 12 14Z"></path> </svg> <div> <div class="color-fg-default h4">Issues</div> Plan and track work </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"code_review","context":"product","tag":"link","label":"code_review_link_product_navbar"}" href="https://github.com/features/code-review"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-code-review color-fg-subtle mr-3"> <path d="M10.3 6.74a.75.75 0 0 1-.04 1.06l-2.908 2.7 2.908 2.7a.75.75 0 1 1-1.02 1.1l-3.5-3.25a.75.75 0 0 1 0-1.1l3.5-3.25a.75.75 0 0 1 1.06.04Zm3.44 1.06a.75.75 0 1 1 1.02-1.1l3.5 3.25a.75.75 0 0 1 0 1.1l-3.5 3.25a.75.75 0 1 1-1.02-1.1l2.908-2.7-2.908-2.7Z"></path><path d="M1.5 4.25c0-.966.784-1.75 1.75-1.75h17.5c.966 0 1.75.784 1.75 1.75v12.5a1.75 1.75 0 0 1-1.75 1.75h-9.69l-3.573 3.573A1.458 1.458 0 0 1 5 21.043V18.5H3.25a1.75 1.75 0 0 1-1.75-1.75ZM3.25 4a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h2.5a.75.75 0 0 1 .75.75v3.19l3.72-3.72a.749.749 0 0 1 .53-.22h10a.25.25 0 0 0 .25-.25V4.25a.25.25 0 0 0-.25-.25Z"></path> </svg> <div> <div class="color-fg-default h4">Code Review</div> Manage code changes </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"discussions","context":"product","tag":"link","label":"discussions_link_product_navbar"}" href="https://github.com/features/discussions"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-comment-discussion color-fg-subtle mr-3"> <path d="M1.75 1h12.5c.966 0 1.75.784 1.75 1.75v9.5A1.75 1.75 0 0 1 14.25 14H8.061l-2.574 2.573A1.458 1.458 0 0 1 3 15.543V14H1.75A1.75 1.75 0 0 1 0 12.25v-9.5C0 1.784.784 1 1.75 1ZM1.5 2.75v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25Z"></path><path d="M22.5 8.75a.25.25 0 0 0-.25-.25h-3.5a.75.75 0 0 1 0-1.5h3.5c.966 0 1.75.784 1.75 1.75v9.5A1.75 1.75 0 0 1 22.25 20H21v1.543a1.457 1.457 0 0 1-2.487 1.03L15.939 20H10.75A1.75 1.75 0 0 1 9 18.25v-1.465a.75.75 0 0 1 1.5 0v1.465c0 .138.112.25.25.25h5.5a.75.75 0 0 1 .53.22l2.72 2.72v-2.19a.75.75 0 0 1 .75-.75h2a.25.25 0 0 0 .25-.25v-9.5Z"></path> </svg> <div> <div class="color-fg-default h4">Discussions</div> Collaborate outside of code </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description" data-analytics-event="{"location":"navbar","action":"code_search","context":"product","tag":"link","label":"code_search_link_product_navbar"}" href="https://github.com/features/code-search"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-code-square color-fg-subtle mr-3"> <path d="M10.3 8.24a.75.75 0 0 1-.04 1.06L7.352 12l2.908 2.7a.75.75 0 1 1-1.02 1.1l-3.5-3.25a.75.75 0 0 1 0-1.1l3.5-3.25a.75.75 0 0 1 1.06.04Zm3.44 1.06a.75.75 0 1 1 1.02-1.1l3.5 3.25a.75.75 0 0 1 0 1.1l-3.5 3.25a.75.75 0 1 1-1.02-1.1l2.908-2.7-2.908-2.7Z"></path><path d="M2 3.75C2 2.784 2.784 2 3.75 2h16.5c.966 0 1.75.784 1.75 1.75v16.5A1.75 1.75 0 0 1 20.25 22H3.75A1.75 1.75 0 0 1 2 20.25Zm1.75-.25a.25.25 0 0 0-.25.25v16.5c0 .138.112.25.25.25h16.5a.25.25 0 0 0 .25-.25V3.75a.25.25 0 0 0-.25-.25Z"></path> </svg> <div> <div class="color-fg-default h4">Code Search</div> Find more, search less </div> </a></li> </ul> </div> </div> <div class="HeaderMenu-column px-lg-4"> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0 border-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="product-explore-heading">Explore</span> <ul class="list-style-none f5" aria-labelledby="product-explore-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"all_features","context":"product","tag":"link","label":"all_features_link_product_navbar"}" href="https://github.com/features"> All features </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary Link--external" target="_blank" data-analytics-event="{"location":"navbar","action":"documentation","context":"product","tag":"link","label":"documentation_link_product_navbar"}" href="https://docs.github.com"> Documentation <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path> </svg> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary Link--external" target="_blank" data-analytics-event="{"location":"navbar","action":"github_skills","context":"product","tag":"link","label":"github_skills_link_product_navbar"}" href="https://skills.github.com"> GitHub Skills <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path> </svg> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary Link--external" target="_blank" data-analytics-event="{"location":"navbar","action":"blog","context":"product","tag":"link","label":"blog_link_product_navbar"}" href="https://github.blog"> Blog <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path> </svg> </a></li> </ul> </div> </div> </div> </li> <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item"> <button type="button" class="HeaderMenu-link border-0 width-full width-lg-auto px-0 px-lg-2 py-lg-2 no-wrap d-flex flex-items-center flex-justify-between js-details-target" aria-expanded="false"> Solutions <svg opacity="0.5" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-down HeaderMenu-icon ml-1"> <path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path> </svg> </button> <div class="HeaderMenu-dropdown dropdown-menu rounded m-0 p-0 pt-2 pt-lg-4 position-relative position-lg-absolute left-0 left-lg-n3 d-lg-flex flex-wrap dropdown-menu-wide"> <div class="HeaderMenu-column px-lg-4 border-lg-right mb-4 mb-lg-0 pr-lg-7"> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0 pb-lg-3 mb-3 mb-lg-0"> <span class="d-block h4 color-fg-default my-1" id="solutions-by-company-size-heading">By company size</span> <ul class="list-style-none f5" aria-labelledby="solutions-by-company-size-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"enterprises","context":"solutions","tag":"link","label":"enterprises_link_solutions_navbar"}" href="https://github.com/enterprise"> Enterprises </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"small_and_medium_teams","context":"solutions","tag":"link","label":"small_and_medium_teams_link_solutions_navbar"}" href="https://github.com/team"> Small and medium teams </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"startups","context":"solutions","tag":"link","label":"startups_link_solutions_navbar"}" href="https://github.com/enterprise/startups"> Startups </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"nonprofits","context":"solutions","tag":"link","label":"nonprofits_link_solutions_navbar"}" href="/solutions/industry/nonprofits"> Nonprofits </a></li> </ul> </div> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="solutions-by-use-case-heading">By use case</span> <ul class="list-style-none f5" aria-labelledby="solutions-by-use-case-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"devsecops","context":"solutions","tag":"link","label":"devsecops_link_solutions_navbar"}" href="/solutions/use-case/devsecops"> DevSecOps </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"devops","context":"solutions","tag":"link","label":"devops_link_solutions_navbar"}" href="/solutions/use-case/devops"> DevOps </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"ci_cd","context":"solutions","tag":"link","label":"ci_cd_link_solutions_navbar"}" href="/solutions/use-case/ci-cd"> CI/CD </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"view_all_use_cases","context":"solutions","tag":"link","label":"view_all_use_cases_link_solutions_navbar"}" href="/solutions/use-case"> View all use cases </a></li> </ul> </div> </div> <div class="HeaderMenu-column px-lg-4"> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="solutions-by-industry-heading">By industry</span> <ul class="list-style-none f5" aria-labelledby="solutions-by-industry-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"healthcare","context":"solutions","tag":"link","label":"healthcare_link_solutions_navbar"}" href="/solutions/industry/healthcare"> Healthcare </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"financial_services","context":"solutions","tag":"link","label":"financial_services_link_solutions_navbar"}" href="/solutions/industry/financial-services"> Financial services </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"manufacturing","context":"solutions","tag":"link","label":"manufacturing_link_solutions_navbar"}" href="/solutions/industry/manufacturing"> Manufacturing </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"government","context":"solutions","tag":"link","label":"government_link_solutions_navbar"}" href="/solutions/industry/government"> Government </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"view_all_industries","context":"solutions","tag":"link","label":"view_all_industries_link_solutions_navbar"}" href="/solutions/industry"> View all industries </a></li> </ul> </div> </div> <div class="HeaderMenu-trailing-link rounded-bottom-2 flex-shrink-0 mt-lg-4 px-lg-4 py-4 py-lg-3 f5 text-semibold"> <a href="/solutions"> View all solutions <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-right HeaderMenu-trailing-link-icon"> <path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path> </svg> </a> </div> </div> </li> <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item"> <button type="button" class="HeaderMenu-link border-0 width-full width-lg-auto px-0 px-lg-2 py-lg-2 no-wrap d-flex flex-items-center flex-justify-between js-details-target" aria-expanded="false"> Resources <svg opacity="0.5" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-down HeaderMenu-icon ml-1"> <path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path> </svg> </button> <div class="HeaderMenu-dropdown dropdown-menu rounded m-0 p-0 pt-2 pt-lg-4 position-relative position-lg-absolute left-0 left-lg-n3 pb-2 pb-lg-4 d-lg-flex flex-wrap dropdown-menu-wide"> <div class="HeaderMenu-column px-lg-4 border-lg-right mb-4 mb-lg-0 pr-lg-7"> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="resources-topics-heading">Topics</span> <ul class="list-style-none f5" aria-labelledby="resources-topics-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"ai","context":"resources","tag":"link","label":"ai_link_resources_navbar"}" href="/resources/articles/ai"> AI </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"devops","context":"resources","tag":"link","label":"devops_link_resources_navbar"}" href="/resources/articles/devops"> DevOps </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"security","context":"resources","tag":"link","label":"security_link_resources_navbar"}" href="/resources/articles/security"> Security </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"software_development","context":"resources","tag":"link","label":"software_development_link_resources_navbar"}" href="/resources/articles/software-development"> Software Development </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"view_all","context":"resources","tag":"link","label":"view_all_link_resources_navbar"}" href="/resources/articles"> View all </a></li> </ul> </div> </div> <div class="HeaderMenu-column px-lg-4"> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0 border-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="resources-explore-heading">Explore</span> <ul class="list-style-none f5" aria-labelledby="resources-explore-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary Link--external" target="_blank" data-analytics-event="{"location":"navbar","action":"learning_pathways","context":"resources","tag":"link","label":"learning_pathways_link_resources_navbar"}" href="https://resources.github.com/learn/pathways"> Learning Pathways <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path> </svg> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary Link--external" target="_blank" data-analytics-event="{"location":"navbar","action":"events_amp_webinars","context":"resources","tag":"link","label":"events_amp_webinars_link_resources_navbar"}" href="https://resources.github.com"> Events & Webinars <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path> </svg> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"ebooks_amp_whitepapers","context":"resources","tag":"link","label":"ebooks_amp_whitepapers_link_resources_navbar"}" href="https://github.com/resources/whitepapers"> Ebooks & Whitepapers </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"customer_stories","context":"resources","tag":"link","label":"customer_stories_link_resources_navbar"}" href="https://github.com/customer-stories"> Customer Stories </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary Link--external" target="_blank" data-analytics-event="{"location":"navbar","action":"partners","context":"resources","tag":"link","label":"partners_link_resources_navbar"}" href="https://partner.github.com"> Partners <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path> </svg> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"executive_insights","context":"resources","tag":"link","label":"executive_insights_link_resources_navbar"}" href="https://github.com/solutions/executive-insights"> Executive Insights </a></li> </ul> </div> </div> </div> </li> <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item"> <button type="button" class="HeaderMenu-link border-0 width-full width-lg-auto px-0 px-lg-2 py-lg-2 no-wrap d-flex flex-items-center flex-justify-between js-details-target" aria-expanded="false"> Open Source <svg opacity="0.5" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-down HeaderMenu-icon ml-1"> <path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path> </svg> </button> <div class="HeaderMenu-dropdown dropdown-menu rounded m-0 p-0 pt-2 pt-lg-4 position-relative position-lg-absolute left-0 left-lg-n3 pb-2 pb-lg-4 px-lg-4"> <div class="HeaderMenu-column"> <div class="border-bottom pb-3 pb-lg-0 pb-lg-3 mb-3 mb-lg-0 mb-lg-3"> <ul class="list-style-none f5" > <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description" data-analytics-event="{"location":"navbar","action":"github_sponsors","context":"open_source","tag":"link","label":"github_sponsors_link_open_source_navbar"}" href="/sponsors"> <div> <div class="color-fg-default h4">GitHub Sponsors</div> Fund open source developers </div> </a></li> </ul> </div> <div class="border-bottom pb-3 pb-lg-0 pb-lg-3 mb-3 mb-lg-0 mb-lg-3"> <ul class="list-style-none f5" > <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description" data-analytics-event="{"location":"navbar","action":"the_readme_project","context":"open_source","tag":"link","label":"the_readme_project_link_open_source_navbar"}" href="https://github.com/readme"> <div> <div class="color-fg-default h4">The ReadME Project</div> GitHub community articles </div> </a></li> </ul> </div> <div class="border-bottom pb-3 pb-lg-0 border-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="open-source-repositories-heading">Repositories</span> <ul class="list-style-none f5" aria-labelledby="open-source-repositories-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"topics","context":"open_source","tag":"link","label":"topics_link_open_source_navbar"}" href="https://github.com/topics"> Topics </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"trending","context":"open_source","tag":"link","label":"trending_link_open_source_navbar"}" href="https://github.com/trending"> Trending </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"collections","context":"open_source","tag":"link","label":"collections_link_open_source_navbar"}" href="https://github.com/collections"> Collections </a></li> </ul> </div> </div> </div> </li> <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item"> <button type="button" class="HeaderMenu-link border-0 width-full width-lg-auto px-0 px-lg-2 py-lg-2 no-wrap d-flex flex-items-center flex-justify-between js-details-target" aria-expanded="false"> Enterprise <svg opacity="0.5" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-down HeaderMenu-icon ml-1"> <path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path> </svg> </button> <div class="HeaderMenu-dropdown dropdown-menu rounded m-0 p-0 pt-2 pt-lg-4 position-relative position-lg-absolute left-0 left-lg-n3 pb-2 pb-lg-4 px-lg-4"> <div class="HeaderMenu-column"> <div class="border-bottom pb-3 pb-lg-0 pb-lg-3 mb-3 mb-lg-0 mb-lg-3"> <ul class="list-style-none f5" > <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description" data-analytics-event="{"location":"navbar","action":"enterprise_platform","context":"enterprise","tag":"link","label":"enterprise_platform_link_enterprise_navbar"}" href="/enterprise"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-stack color-fg-subtle mr-3"> <path d="M11.063 1.456a1.749 1.749 0 0 1 1.874 0l8.383 5.316a1.751 1.751 0 0 1 0 2.956l-8.383 5.316a1.749 1.749 0 0 1-1.874 0L2.68 9.728a1.751 1.751 0 0 1 0-2.956Zm1.071 1.267a.25.25 0 0 0-.268 0L3.483 8.039a.25.25 0 0 0 0 .422l8.383 5.316a.25.25 0 0 0 .268 0l8.383-5.316a.25.25 0 0 0 0-.422Z"></path><path d="M1.867 12.324a.75.75 0 0 1 1.035-.232l8.964 5.685a.25.25 0 0 0 .268 0l8.964-5.685a.75.75 0 0 1 .804 1.267l-8.965 5.685a1.749 1.749 0 0 1-1.874 0l-8.965-5.685a.75.75 0 0 1-.231-1.035Z"></path><path d="M1.867 16.324a.75.75 0 0 1 1.035-.232l8.964 5.685a.25.25 0 0 0 .268 0l8.964-5.685a.75.75 0 0 1 .804 1.267l-8.965 5.685a1.749 1.749 0 0 1-1.874 0l-8.965-5.685a.75.75 0 0 1-.231-1.035Z"></path> </svg> <div> <div class="color-fg-default h4">Enterprise platform</div> AI-powered developer platform </div> </a></li> </ul> </div> <div class="border-bottom pb-3 pb-lg-0 border-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="enterprise-available-add-ons-heading">Available add-ons</span> <ul class="list-style-none f5" aria-labelledby="enterprise-available-add-ons-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"advanced_security","context":"enterprise","tag":"link","label":"advanced_security_link_enterprise_navbar"}" href="https://github.com/enterprise/advanced-security"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-shield-check color-fg-subtle mr-3"> <path d="M16.53 9.78a.75.75 0 0 0-1.06-1.06L11 13.19l-1.97-1.97a.75.75 0 0 0-1.06 1.06l2.5 2.5a.75.75 0 0 0 1.06 0l5-5Z"></path><path d="m12.54.637 8.25 2.675A1.75 1.75 0 0 1 22 4.976V10c0 6.19-3.771 10.704-9.401 12.83a1.704 1.704 0 0 1-1.198 0C5.77 20.705 2 16.19 2 10V4.976c0-.758.489-1.43 1.21-1.664L11.46.637a1.748 1.748 0 0 1 1.08 0Zm-.617 1.426-8.25 2.676a.249.249 0 0 0-.173.237V10c0 5.46 3.28 9.483 8.43 11.426a.199.199 0 0 0 .14 0C17.22 19.483 20.5 15.461 20.5 10V4.976a.25.25 0 0 0-.173-.237l-8.25-2.676a.253.253 0 0 0-.154 0Z"></path> </svg> <div> <div class="color-fg-default h4">Advanced Security</div> Enterprise-grade security features </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"github_copilot","context":"enterprise","tag":"link","label":"github_copilot_link_enterprise_navbar"}" href="/features/copilot#enterprise"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-copilot color-fg-subtle mr-3"> <path d="M23.922 16.992c-.861 1.495-5.859 5.023-11.922 5.023-6.063 0-11.061-3.528-11.922-5.023A.641.641 0 0 1 0 16.736v-2.869a.841.841 0 0 1 .053-.22c.372-.935 1.347-2.292 2.605-2.656.167-.429.414-1.055.644-1.517a10.195 10.195 0 0 1-.052-1.086c0-1.331.282-2.499 1.132-3.368.397-.406.89-.717 1.474-.952 1.399-1.136 3.392-2.093 6.122-2.093 2.731 0 4.767.957 6.166 2.093.584.235 1.077.546 1.474.952.85.869 1.132 2.037 1.132 3.368 0 .368-.014.733-.052 1.086.23.462.477 1.088.644 1.517 1.258.364 2.233 1.721 2.605 2.656a.832.832 0 0 1 .053.22v2.869a.641.641 0 0 1-.078.256ZM12.172 11h-.344a4.323 4.323 0 0 1-.355.508C10.703 12.455 9.555 13 7.965 13c-1.725 0-2.989-.359-3.782-1.259a2.005 2.005 0 0 1-.085-.104L4 11.741v6.585c1.435.779 4.514 2.179 8 2.179 3.486 0 6.565-1.4 8-2.179v-6.585l-.098-.104s-.033.045-.085.104c-.793.9-2.057 1.259-3.782 1.259-1.59 0-2.738-.545-3.508-1.492a4.323 4.323 0 0 1-.355-.508h-.016.016Zm.641-2.935c.136 1.057.403 1.913.878 2.497.442.544 1.134.938 2.344.938 1.573 0 2.292-.337 2.657-.751.384-.435.558-1.15.558-2.361 0-1.14-.243-1.847-.705-2.319-.477-.488-1.319-.862-2.824-1.025-1.487-.161-2.192.138-2.533.529-.269.307-.437.808-.438 1.578v.021c0 .265.021.562.063.893Zm-1.626 0c.042-.331.063-.628.063-.894v-.02c-.001-.77-.169-1.271-.438-1.578-.341-.391-1.046-.69-2.533-.529-1.505.163-2.347.537-2.824 1.025-.462.472-.705 1.179-.705 2.319 0 1.211.175 1.926.558 2.361.365.414 1.084.751 2.657.751 1.21 0 1.902-.394 2.344-.938.475-.584.742-1.44.878-2.497Z"></path><path d="M14.5 14.25a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1Zm-5 0a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1Z"></path> </svg> <div> <div class="color-fg-default h4">GitHub Copilot</div> Enterprise-grade AI features </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description" data-analytics-event="{"location":"navbar","action":"premium_support","context":"enterprise","tag":"link","label":"premium_support_link_enterprise_navbar"}" href="/premium-support"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-comment-discussion color-fg-subtle mr-3"> <path d="M1.75 1h12.5c.966 0 1.75.784 1.75 1.75v9.5A1.75 1.75 0 0 1 14.25 14H8.061l-2.574 2.573A1.458 1.458 0 0 1 3 15.543V14H1.75A1.75 1.75 0 0 1 0 12.25v-9.5C0 1.784.784 1 1.75 1ZM1.5 2.75v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25Z"></path><path d="M22.5 8.75a.25.25 0 0 0-.25-.25h-3.5a.75.75 0 0 1 0-1.5h3.5c.966 0 1.75.784 1.75 1.75v9.5A1.75 1.75 0 0 1 22.25 20H21v1.543a1.457 1.457 0 0 1-2.487 1.03L15.939 20H10.75A1.75 1.75 0 0 1 9 18.25v-1.465a.75.75 0 0 1 1.5 0v1.465c0 .138.112.25.25.25h5.5a.75.75 0 0 1 .53.22l2.72 2.72v-2.19a.75.75 0 0 1 .75-.75h2a.25.25 0 0 0 .25-.25v-9.5Z"></path> </svg> <div> <div class="color-fg-default h4">Premium Support</div> Enterprise-grade 24/7 support </div> </a></li> </ul> </div> </div> </div> </li> <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item"> <a class="HeaderMenu-link no-underline px-0 px-lg-2 py-3 py-lg-2 d-block d-lg-inline-block" data-analytics-event="{"location":"navbar","action":"pricing","context":"global","tag":"link","label":"pricing_link_global_navbar"}" href="https://github.com/pricing">Pricing</a> </li> </ul> </nav> <div class="d-flex flex-column flex-lg-row width-full flex-justify-end flex-lg-items-center text-center mt-3 mt-lg-0 text-lg-left ml-lg-3"> <qbsearch-input class="search-input" data-scope="repo:nextapps-de/mikado" data-custom-scopes-path="/search/custom_scopes" data-delete-custom-scopes-csrf="n6HAfvWBYFi_7tUKKH36gshG2WjqjLzEa9okmLOKwhaEZnNiEsWjW_RMtpRBhrK52fss4V7oaz0b5DTYQT4Iig" data-max-custom-scopes="10" data-header-redesign-enabled="false" data-initial-value="" data-blackbird-suggestions-path="/search/suggestions" data-jump-to-suggestions-path="/_graphql/GetSuggestedNavigationDestinations" data-current-repository="nextapps-de/mikado" data-current-org="nextapps-de" data-current-owner="" data-logged-in="false" data-copilot-chat-enabled="false" data-nl-search-enabled="false" data-retain-scroll-position="true"> <div class="search-input-container search-with-dialog position-relative d-flex flex-row flex-items-center mr-4 rounded" data-action="click:qbsearch-input#searchInputContainerClicked" > <button type="button" class="header-search-button placeholder input-button form-control d-flex flex-1 flex-self-stretch flex-items-center no-wrap width-full py-0 pl-2 pr-0 text-left border-0 box-shadow-none" data-target="qbsearch-input.inputButton" aria-label="Search or jump to…" aria-haspopup="dialog" placeholder="Search or jump to..." data-hotkey=s,/ autocapitalize="off" data-analytics-event="{"location":"navbar","action":"searchbar","context":"global","tag":"input","label":"searchbar_input_global_navbar"}" data-action="click:qbsearch-input#handleExpand" > <div class="mr-2 color-fg-muted"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-search"> <path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path> </svg> </div> <span class="flex-1" data-target="qbsearch-input.inputButtonText">Search or jump to...</span> <div class="d-flex" data-target="qbsearch-input.hotkeyIndicator"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="20" aria-hidden="true" class="mr-1"><path fill="none" stroke="#979A9C" opacity=".4" d="M3.5.5h12c1.7 0 3 1.3 3 3v13c0 1.7-1.3 3-3 3h-12c-1.7 0-3-1.3-3-3v-13c0-1.7 1.3-3 3-3z"></path><path fill="#979A9C" d="M11.8 6L8 15.1h-.9L10.8 6h1z"></path></svg> </div> </button> <input type="hidden" name="type" class="js-site-search-type-field"> <div class="Overlay--hidden " data-modal-dialog-overlay> <modal-dialog data-action="close:qbsearch-input#handleClose cancel:qbsearch-input#handleClose" data-target="qbsearch-input.searchSuggestionsDialog" role="dialog" id="search-suggestions-dialog" aria-modal="true" aria-labelledby="search-suggestions-dialog-header" data-view-component="true" class="Overlay Overlay--width-large Overlay--height-auto"> <h1 id="search-suggestions-dialog-header" class="sr-only">Search code, repositories, users, issues, pull requests...</h1> <div class="Overlay-body Overlay-body--paddingNone"> <div data-view-component="true"> <div class="search-suggestions position-fixed width-full color-shadow-large border color-fg-default color-bg-default overflow-hidden d-flex flex-column query-builder-container" style="border-radius: 12px;" data-target="qbsearch-input.queryBuilderContainer" hidden > <!-- '"` --><!-- </textarea></xmp> --></option></form><form id="query-builder-test-form" action="" accept-charset="UTF-8" method="get"> <query-builder data-target="qbsearch-input.queryBuilder" id="query-builder-query-builder-test" data-filter-key=":" data-view-component="true" class="QueryBuilder search-query-builder"> <div class="FormControl FormControl--fullWidth"> <label id="query-builder-test-label" for="query-builder-test" class="FormControl-label sr-only"> Search </label> <div class="QueryBuilder-StyledInput width-fit " data-target="query-builder.styledInput" > <span id="query-builder-test-leadingvisual-wrap" class="FormControl-input-leadingVisualWrap QueryBuilder-leadingVisualWrap"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-search FormControl-input-leadingVisual"> <path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path> </svg> </span> <div data-target="query-builder.styledInputContainer" class="QueryBuilder-StyledInputContainer"> <div aria-hidden="true" class="QueryBuilder-StyledInputContent" data-target="query-builder.styledInputContent" ></div> <div class="QueryBuilder-InputWrapper"> <div aria-hidden="true" class="QueryBuilder-Sizer" data-target="query-builder.sizer"></div> <input id="query-builder-test" name="query-builder-test" value="" autocomplete="off" type="text" role="combobox" spellcheck="false" aria-expanded="false" aria-describedby="validation-538ee51e-bd04-4f9b-8563-a1c6b024f919" data-target="query-builder.input" data-action=" input:query-builder#inputChange blur:query-builder#inputBlur keydown:query-builder#inputKeydown focus:query-builder#inputFocus " data-view-component="true" class="FormControl-input QueryBuilder-Input FormControl-medium" /> </div> </div> <span class="sr-only" id="query-builder-test-clear">Clear</span> <button role="button" id="query-builder-test-clear-button" aria-labelledby="query-builder-test-clear query-builder-test-label" data-target="query-builder.clearButton" data-action=" click:query-builder#clear focus:query-builder#clearButtonFocus blur:query-builder#clearButtonBlur " variant="small" hidden="hidden" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium mr-1 px-2 py-0 d-flex flex-items-center rounded-1 color-fg-muted"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x-circle-fill Button-visual"> <path d="M2.343 13.657A8 8 0 1 1 13.658 2.343 8 8 0 0 1 2.343 13.657ZM6.03 4.97a.751.751 0 0 0-1.042.018.751.751 0 0 0-.018 1.042L6.94 8 4.97 9.97a.749.749 0 0 0 .326 1.275.749.749 0 0 0 .734-.215L8 9.06l1.97 1.97a.749.749 0 0 0 1.275-.326.749.749 0 0 0-.215-.734L9.06 8l1.97-1.97a.749.749 0 0 0-.326-1.275.749.749 0 0 0-.734.215L8 6.94Z"></path> </svg> </button> </div> <template id="search-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-search"> <path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path> </svg> </template> <template id="code-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code"> <path d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z"></path> </svg> </template> <template id="file-code-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-file-code"> <path d="M4 1.75C4 .784 4.784 0 5.75 0h5.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v8.586A1.75 1.75 0 0 1 14.25 15h-9a.75.75 0 0 1 0-1.5h9a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 10 4.25V1.5H5.75a.25.25 0 0 0-.25.25v2.5a.75.75 0 0 1-1.5 0Zm1.72 4.97a.75.75 0 0 1 1.06 0l2 2a.75.75 0 0 1 0 1.06l-2 2a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734l1.47-1.47-1.47-1.47a.75.75 0 0 1 0-1.06ZM3.28 7.78 1.81 9.25l1.47 1.47a.751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018l-2-2a.75.75 0 0 1 0-1.06l2-2a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Zm8.22-6.218V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path> </svg> </template> <template id="history-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-history"> <path d="m.427 1.927 1.215 1.215a8.002 8.002 0 1 1-1.6 5.685.75.75 0 1 1 1.493-.154 6.5 6.5 0 1 0 1.18-4.458l1.358 1.358A.25.25 0 0 1 3.896 6H.25A.25.25 0 0 1 0 5.75V2.104a.25.25 0 0 1 .427-.177ZM7.75 4a.75.75 0 0 1 .75.75v2.992l2.028.812a.75.75 0 0 1-.557 1.392l-2.5-1A.751.751 0 0 1 7 8.25v-3.5A.75.75 0 0 1 7.75 4Z"></path> </svg> </template> <template id="repo-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-repo"> <path d="M2 2.5A2.5 2.5 0 0 1 4.5 0h8.75a.75.75 0 0 1 .75.75v12.5a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1 0-1.5h1.75v-2h-8a1 1 0 0 0-.714 1.7.75.75 0 1 1-1.072 1.05A2.495 2.495 0 0 1 2 11.5Zm10.5-1h-8a1 1 0 0 0-1 1v6.708A2.486 2.486 0 0 1 4.5 9h8ZM5 12.25a.25.25 0 0 1 .25-.25h3.5a.25.25 0 0 1 .25.25v3.25a.25.25 0 0 1-.4.2l-1.45-1.087a.249.249 0 0 0-.3 0L5.4 15.7a.25.25 0 0 1-.4-.2Z"></path> </svg> </template> <template id="bookmark-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-bookmark"> <path d="M3 2.75C3 1.784 3.784 1 4.75 1h6.5c.966 0 1.75.784 1.75 1.75v11.5a.75.75 0 0 1-1.227.579L8 11.722l-3.773 3.107A.751.751 0 0 1 3 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.91l3.023-2.489a.75.75 0 0 1 .954 0l3.023 2.49V2.75a.25.25 0 0 0-.25-.25Z"></path> </svg> </template> <template id="plus-circle-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-plus-circle"> <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm7.25-3.25v2.5h2.5a.75.75 0 0 1 0 1.5h-2.5v2.5a.75.75 0 0 1-1.5 0v-2.5h-2.5a.75.75 0 0 1 0-1.5h2.5v-2.5a.75.75 0 0 1 1.5 0Z"></path> </svg> </template> <template id="circle-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-dot-fill"> <path d="M8 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8Z"></path> </svg> </template> <template id="trash-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-trash"> <path d="M11 1.75V3h2.25a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75ZM4.496 6.675l.66 6.6a.25.25 0 0 0 .249.225h5.19a.25.25 0 0 0 .249-.225l.66-6.6a.75.75 0 0 1 1.492.149l-.66 6.6A1.748 1.748 0 0 1 10.595 15h-5.19a1.75 1.75 0 0 1-1.741-1.575l-.66-6.6a.75.75 0 1 1 1.492-.15ZM6.5 1.75V3h3V1.75a.25.25 0 0 0-.25-.25h-2.5a.25.25 0 0 0-.25.25Z"></path> </svg> </template> <template id="team-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-people"> <path d="M2 5.5a3.5 3.5 0 1 1 5.898 2.549 5.508 5.508 0 0 1 3.034 4.084.75.75 0 1 1-1.482.235 4 4 0 0 0-7.9 0 .75.75 0 0 1-1.482-.236A5.507 5.507 0 0 1 3.102 8.05 3.493 3.493 0 0 1 2 5.5ZM11 4a3.001 3.001 0 0 1 2.22 5.018 5.01 5.01 0 0 1 2.56 3.012.749.749 0 0 1-.885.954.752.752 0 0 1-.549-.514 3.507 3.507 0 0 0-2.522-2.372.75.75 0 0 1-.574-.73v-.352a.75.75 0 0 1 .416-.672A1.5 1.5 0 0 0 11 5.5.75.75 0 0 1 11 4Zm-5.5-.5a2 2 0 1 0-.001 3.999A2 2 0 0 0 5.5 3.5Z"></path> </svg> </template> <template id="project-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-project"> <path d="M1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25V1.75C0 .784.784 0 1.75 0ZM1.5 1.75v12.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25ZM11.75 3a.75.75 0 0 1 .75.75v7.5a.75.75 0 0 1-1.5 0v-7.5a.75.75 0 0 1 .75-.75Zm-8.25.75a.75.75 0 0 1 1.5 0v5.5a.75.75 0 0 1-1.5 0ZM8 3a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 3Z"></path> </svg> </template> <template id="pencil-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-pencil"> <path d="M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25c.081-.286.235-.547.445-.758l8.61-8.61Zm.176 4.823L9.75 4.81l-6.286 6.287a.253.253 0 0 0-.064.108l-.558 1.953 1.953-.558a.253.253 0 0 0 .108-.064Zm1.238-3.763a.25.25 0 0 0-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 0 0 0-.354Z"></path> </svg> </template> <template id="copilot-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copilot"> <path d="M7.998 15.035c-4.562 0-7.873-2.914-7.998-3.749V9.338c.085-.628.677-1.686 1.588-2.065.013-.07.024-.143.036-.218.029-.183.06-.384.126-.612-.201-.508-.254-1.084-.254-1.656 0-.87.128-1.769.693-2.484.579-.733 1.494-1.124 2.724-1.261 1.206-.134 2.262.034 2.944.765.05.053.096.108.139.165.044-.057.094-.112.143-.165.682-.731 1.738-.899 2.944-.765 1.23.137 2.145.528 2.724 1.261.566.715.693 1.614.693 2.484 0 .572-.053 1.148-.254 1.656.066.228.098.429.126.612.012.076.024.148.037.218.924.385 1.522 1.471 1.591 2.095v1.872c0 .766-3.351 3.795-8.002 3.795Zm0-1.485c2.28 0 4.584-1.11 5.002-1.433V7.862l-.023-.116c-.49.21-1.075.291-1.727.291-1.146 0-2.059-.327-2.71-.991A3.222 3.222 0 0 1 8 6.303a3.24 3.24 0 0 1-.544.743c-.65.664-1.563.991-2.71.991-.652 0-1.236-.081-1.727-.291l-.023.116v4.255c.419.323 2.722 1.433 5.002 1.433ZM6.762 2.83c-.193-.206-.637-.413-1.682-.297-1.019.113-1.479.404-1.713.7-.247.312-.369.789-.369 1.554 0 .793.129 1.171.308 1.371.162.181.519.379 1.442.379.853 0 1.339-.235 1.638-.54.315-.322.527-.827.617-1.553.117-.935-.037-1.395-.241-1.614Zm4.155-.297c-1.044-.116-1.488.091-1.681.297-.204.219-.359.679-.242 1.614.091.726.303 1.231.618 1.553.299.305.784.54 1.638.54.922 0 1.28-.198 1.442-.379.179-.2.308-.578.308-1.371 0-.765-.123-1.242-.37-1.554-.233-.296-.693-.587-1.713-.7Z"></path><path d="M6.25 9.037a.75.75 0 0 1 .75.75v1.501a.75.75 0 0 1-1.5 0V9.787a.75.75 0 0 1 .75-.75Zm4.25.75v1.501a.75.75 0 0 1-1.5 0V9.787a.75.75 0 0 1 1.5 0Z"></path> </svg> </template> <template id="copilot-error-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copilot-error"> <path d="M16 11.24c0 .112-.072.274-.21.467L13 9.688V7.862l-.023-.116c-.49.21-1.075.291-1.727.291-.198 0-.388-.009-.571-.029L6.833 5.226a4.01 4.01 0 0 0 .17-.782c.117-.935-.037-1.395-.241-1.614-.193-.206-.637-.413-1.682-.297-.683.076-1.115.231-1.395.415l-1.257-.91c.579-.564 1.413-.877 2.485-.996 1.206-.134 2.262.034 2.944.765.05.053.096.108.139.165.044-.057.094-.112.143-.165.682-.731 1.738-.899 2.944-.765 1.23.137 2.145.528 2.724 1.261.566.715.693 1.614.693 2.484 0 .572-.053 1.148-.254 1.656.066.228.098.429.126.612.012.076.024.148.037.218.924.385 1.522 1.471 1.591 2.095Zm-5.083-8.707c-1.044-.116-1.488.091-1.681.297-.204.219-.359.679-.242 1.614.091.726.303 1.231.618 1.553.299.305.784.54 1.638.54.922 0 1.28-.198 1.442-.379.179-.2.308-.578.308-1.371 0-.765-.123-1.242-.37-1.554-.233-.296-.693-.587-1.713-.7Zm2.511 11.074c-1.393.776-3.272 1.428-5.43 1.428-4.562 0-7.873-2.914-7.998-3.749V9.338c.085-.628.677-1.686 1.588-2.065.013-.07.024-.143.036-.218.029-.183.06-.384.126-.612-.18-.455-.241-.963-.252-1.475L.31 4.107A.747.747 0 0 1 0 3.509V3.49a.748.748 0 0 1 .625-.73c.156-.026.306.047.435.139l14.667 10.578a.592.592 0 0 1 .227.264.752.752 0 0 1 .046.249v.022a.75.75 0 0 1-1.19.596Zm-1.367-.991L5.635 7.964a5.128 5.128 0 0 1-.889.073c-.652 0-1.236-.081-1.727-.291l-.023.116v4.255c.419.323 2.722 1.433 5.002 1.433 1.539 0 3.089-.505 4.063-.934Z"></path> </svg> </template> <template id="workflow-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-workflow"> <path d="M0 1.75C0 .784.784 0 1.75 0h3.5C6.216 0 7 .784 7 1.75v3.5A1.75 1.75 0 0 1 5.25 7H4v4a1 1 0 0 0 1 1h4v-1.25C9 9.784 9.784 9 10.75 9h3.5c.966 0 1.75.784 1.75 1.75v3.5A1.75 1.75 0 0 1 14.25 16h-3.5A1.75 1.75 0 0 1 9 14.25v-.75H5A2.5 2.5 0 0 1 2.5 11V7h-.75A1.75 1.75 0 0 1 0 5.25Zm1.75-.25a.25.25 0 0 0-.25.25v3.5c0 .138.112.25.25.25h3.5a.25.25 0 0 0 .25-.25v-3.5a.25.25 0 0 0-.25-.25Zm9 9a.25.25 0 0 0-.25.25v3.5c0 .138.112.25.25.25h3.5a.25.25 0 0 0 .25-.25v-3.5a.25.25 0 0 0-.25-.25Z"></path> </svg> </template> <template id="book-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-book"> <path d="M0 1.75A.75.75 0 0 1 .75 1h4.253c1.227 0 2.317.59 3 1.501A3.743 3.743 0 0 1 11.006 1h4.245a.75.75 0 0 1 .75.75v10.5a.75.75 0 0 1-.75.75h-4.507a2.25 2.25 0 0 0-1.591.659l-.622.621a.75.75 0 0 1-1.06 0l-.622-.621A2.25 2.25 0 0 0 5.258 13H.75a.75.75 0 0 1-.75-.75Zm7.251 10.324.004-5.073-.002-2.253A2.25 2.25 0 0 0 5.003 2.5H1.5v9h3.757a3.75 3.75 0 0 1 1.994.574ZM8.755 4.75l-.004 7.322a3.752 3.752 0 0 1 1.992-.572H14.5v-9h-3.495a2.25 2.25 0 0 0-2.25 2.25Z"></path> </svg> </template> <template id="code-review-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code-review"> <path d="M1.75 1h12.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0 1 14.25 13H8.061l-2.574 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25v-8.5C0 1.784.784 1 1.75 1ZM1.5 2.75v8.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-8.5a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25Zm5.28 1.72a.75.75 0 0 1 0 1.06L5.31 7l1.47 1.47a.751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018l-2-2a.75.75 0 0 1 0-1.06l2-2a.75.75 0 0 1 1.06 0Zm2.44 0a.75.75 0 0 1 1.06 0l2 2a.75.75 0 0 1 0 1.06l-2 2a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.69 7 9.22 5.53a.75.75 0 0 1 0-1.06Z"></path> </svg> </template> <template id="codespaces-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-codespaces"> <path d="M0 11.25c0-.966.784-1.75 1.75-1.75h12.5c.966 0 1.75.784 1.75 1.75v3A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25Zm2-9.5C2 .784 2.784 0 3.75 0h8.5C13.216 0 14 .784 14 1.75v5a1.75 1.75 0 0 1-1.75 1.75h-8.5A1.75 1.75 0 0 1 2 6.75Zm1.75-.25a.25.25 0 0 0-.25.25v5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-5a.25.25 0 0 0-.25-.25Zm-2 9.5a.25.25 0 0 0-.25.25v3c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-3a.25.25 0 0 0-.25-.25Z"></path><path d="M7 12.75a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Zm-4 0a.75.75 0 0 1 .75-.75h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1-.75-.75Z"></path> </svg> </template> <template id="comment-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-comment"> <path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path> </svg> </template> <template id="comment-discussion-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-comment-discussion"> <path d="M1.75 1h8.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 10.25 10H7.061l-2.574 2.573A1.458 1.458 0 0 1 2 11.543V10h-.25A1.75 1.75 0 0 1 0 8.25v-5.5C0 1.784.784 1 1.75 1ZM1.5 2.75v5.5c0 .138.112.25.25.25h1a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h3.5a.25.25 0 0 0 .25-.25v-5.5a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25Zm13 2a.25.25 0 0 0-.25-.25h-.5a.75.75 0 0 1 0-1.5h.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 14.25 12H14v1.543a1.458 1.458 0 0 1-2.487 1.03L9.22 12.28a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215l2.22 2.22v-2.19a.75.75 0 0 1 .75-.75h1a.25.25 0 0 0 .25-.25Z"></path> </svg> </template> <template id="organization-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-organization"> <path d="M1.75 16A1.75 1.75 0 0 1 0 14.25V1.75C0 .784.784 0 1.75 0h8.5C11.216 0 12 .784 12 1.75v12.5c0 .085-.006.168-.018.25h2.268a.25.25 0 0 0 .25-.25V8.285a.25.25 0 0 0-.111-.208l-1.055-.703a.749.749 0 1 1 .832-1.248l1.055.703c.487.325.779.871.779 1.456v5.965A1.75 1.75 0 0 1 14.25 16h-3.5a.766.766 0 0 1-.197-.026c-.099.017-.2.026-.303.026h-3a.75.75 0 0 1-.75-.75V14h-1v1.25a.75.75 0 0 1-.75.75Zm-.25-1.75c0 .138.112.25.25.25H4v-1.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 .75.75v1.25h2.25a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25ZM3.75 6h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1 0-1.5ZM3 3.75A.75.75 0 0 1 3.75 3h.5a.75.75 0 0 1 0 1.5h-.5A.75.75 0 0 1 3 3.75Zm4 3A.75.75 0 0 1 7.75 6h.5a.75.75 0 0 1 0 1.5h-.5A.75.75 0 0 1 7 6.75ZM7.75 3h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1 0-1.5ZM3 9.75A.75.75 0 0 1 3.75 9h.5a.75.75 0 0 1 0 1.5h-.5A.75.75 0 0 1 3 9.75ZM7.75 9h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1 0-1.5Z"></path> </svg> </template> <template id="rocket-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-rocket"> <path d="M14.064 0h.186C15.216 0 16 .784 16 1.75v.186a8.752 8.752 0 0 1-2.564 6.186l-.458.459c-.314.314-.641.616-.979.904v3.207c0 .608-.315 1.172-.833 1.49l-2.774 1.707a.749.749 0 0 1-1.11-.418l-.954-3.102a1.214 1.214 0 0 1-.145-.125L3.754 9.816a1.218 1.218 0 0 1-.124-.145L.528 8.717a.749.749 0 0 1-.418-1.11l1.71-2.774A1.748 1.748 0 0 1 3.31 4h3.204c.288-.338.59-.665.904-.979l.459-.458A8.749 8.749 0 0 1 14.064 0ZM8.938 3.623h-.002l-.458.458c-.76.76-1.437 1.598-2.02 2.5l-1.5 2.317 2.143 2.143 2.317-1.5c.902-.583 1.74-1.26 2.499-2.02l.459-.458a7.25 7.25 0 0 0 2.123-5.127V1.75a.25.25 0 0 0-.25-.25h-.186a7.249 7.249 0 0 0-5.125 2.123ZM3.56 14.56c-.732.732-2.334 1.045-3.005 1.148a.234.234 0 0 1-.201-.064.234.234 0 0 1-.064-.201c.103-.671.416-2.273 1.15-3.003a1.502 1.502 0 1 1 2.12 2.12Zm6.94-3.935c-.088.06-.177.118-.266.175l-2.35 1.521.548 1.783 1.949-1.2a.25.25 0 0 0 .119-.213ZM3.678 8.116 5.2 5.766c.058-.09.117-.178.176-.266H3.309a.25.25 0 0 0-.213.119l-1.2 1.95ZM12 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> </template> <template id="shield-check-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-shield-check"> <path d="m8.533.133 5.25 1.68A1.75 1.75 0 0 1 15 3.48V7c0 1.566-.32 3.182-1.303 4.682-.983 1.498-2.585 2.813-5.032 3.855a1.697 1.697 0 0 1-1.33 0c-2.447-1.042-4.049-2.357-5.032-3.855C1.32 10.182 1 8.566 1 7V3.48a1.75 1.75 0 0 1 1.217-1.667l5.25-1.68a1.748 1.748 0 0 1 1.066 0Zm-.61 1.429.001.001-5.25 1.68a.251.251 0 0 0-.174.237V7c0 1.36.275 2.666 1.057 3.859.784 1.194 2.121 2.342 4.366 3.298a.196.196 0 0 0 .154 0c2.245-.957 3.582-2.103 4.366-3.297C13.225 9.666 13.5 8.358 13.5 7V3.48a.25.25 0 0 0-.174-.238l-5.25-1.68a.25.25 0 0 0-.153 0ZM11.28 6.28l-3.5 3.5a.75.75 0 0 1-1.06 0l-1.5-1.5a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215l.97.97 2.97-2.97a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path> </svg> </template> <template id="heart-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-heart"> <path d="m8 14.25.345.666a.75.75 0 0 1-.69 0l-.008-.004-.018-.01a7.152 7.152 0 0 1-.31-.17 22.055 22.055 0 0 1-3.434-2.414C2.045 10.731 0 8.35 0 5.5 0 2.836 2.086 1 4.25 1 5.797 1 7.153 1.802 8 3.02 8.847 1.802 10.203 1 11.75 1 13.914 1 16 2.836 16 5.5c0 2.85-2.045 5.231-3.885 6.818a22.066 22.066 0 0 1-3.744 2.584l-.018.01-.006.003h-.002ZM4.25 2.5c-1.336 0-2.75 1.164-2.75 3 0 2.15 1.58 4.144 3.365 5.682A20.58 20.58 0 0 0 8 13.393a20.58 20.58 0 0 0 3.135-2.211C12.92 9.644 14.5 7.65 14.5 5.5c0-1.836-1.414-3-2.75-3-1.373 0-2.609.986-3.029 2.456a.749.749 0 0 1-1.442 0C6.859 3.486 5.623 2.5 4.25 2.5Z"></path> </svg> </template> <template id="server-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-server"> <path d="M1.75 1h12.5c.966 0 1.75.784 1.75 1.75v4c0 .372-.116.717-.314 1 .198.283.314.628.314 1v4a1.75 1.75 0 0 1-1.75 1.75H1.75A1.75 1.75 0 0 1 0 12.75v-4c0-.358.109-.707.314-1a1.739 1.739 0 0 1-.314-1v-4C0 1.784.784 1 1.75 1ZM1.5 2.75v4c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-4a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25Zm.25 5.75a.25.25 0 0 0-.25.25v4c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-4a.25.25 0 0 0-.25-.25ZM7 4.75A.75.75 0 0 1 7.75 4h4.5a.75.75 0 0 1 0 1.5h-4.5A.75.75 0 0 1 7 4.75ZM7.75 10h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM3 4.75A.75.75 0 0 1 3.75 4h.5a.75.75 0 0 1 0 1.5h-.5A.75.75 0 0 1 3 4.75ZM3.75 10h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1 0-1.5Z"></path> </svg> </template> <template id="globe-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-globe"> <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM5.78 8.75a9.64 9.64 0 0 0 1.363 4.177c.255.426.542.832.857 1.215.245-.296.551-.705.857-1.215A9.64 9.64 0 0 0 10.22 8.75Zm4.44-1.5a9.64 9.64 0 0 0-1.363-4.177c-.307-.51-.612-.919-.857-1.215a9.927 9.927 0 0 0-.857 1.215A9.64 9.64 0 0 0 5.78 7.25Zm-5.944 1.5H1.543a6.507 6.507 0 0 0 4.666 5.5c-.123-.181-.24-.365-.352-.552-.715-1.192-1.437-2.874-1.581-4.948Zm-2.733-1.5h2.733c.144-2.074.866-3.756 1.58-4.948.12-.197.237-.381.353-.552a6.507 6.507 0 0 0-4.666 5.5Zm10.181 1.5c-.144 2.074-.866 3.756-1.58 4.948-.12.197-.237.381-.353.552a6.507 6.507 0 0 0 4.666-5.5Zm2.733-1.5a6.507 6.507 0 0 0-4.666-5.5c.123.181.24.365.353.552.714 1.192 1.436 2.874 1.58 4.948Z"></path> </svg> </template> <template id="issue-opened-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-issue-opened"> <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path> </svg> </template> <template id="device-mobile-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-device-mobile"> <path d="M3.75 0h8.5C13.216 0 14 .784 14 1.75v12.5A1.75 1.75 0 0 1 12.25 16h-8.5A1.75 1.75 0 0 1 2 14.25V1.75C2 .784 2.784 0 3.75 0ZM3.5 1.75v12.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25ZM8 13a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path> </svg> </template> <template id="package-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-package"> <path d="m8.878.392 5.25 3.045c.54.314.872.89.872 1.514v6.098a1.75 1.75 0 0 1-.872 1.514l-5.25 3.045a1.75 1.75 0 0 1-1.756 0l-5.25-3.045A1.75 1.75 0 0 1 1 11.049V4.951c0-.624.332-1.201.872-1.514L7.122.392a1.75 1.75 0 0 1 1.756 0ZM7.875 1.69l-4.63 2.685L8 7.133l4.755-2.758-4.63-2.685a.248.248 0 0 0-.25 0ZM2.5 5.677v5.372c0 .09.047.171.125.216l4.625 2.683V8.432Zm6.25 8.271 4.625-2.683a.25.25 0 0 0 .125-.216V5.677L8.75 8.432Z"></path> </svg> </template> <template id="credit-card-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-credit-card"> <path d="M10.75 9a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5h-1.5Z"></path><path d="M0 3.75C0 2.784.784 2 1.75 2h12.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25ZM14.5 6.5h-13v5.75c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25Zm0-2.75a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25V5h13Z"></path> </svg> </template> <template id="play-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-play"> <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm4.879-2.773 4.264 2.559a.25.25 0 0 1 0 .428l-4.264 2.559A.25.25 0 0 1 6 10.559V5.442a.25.25 0 0 1 .379-.215Z"></path> </svg> </template> <template id="gift-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-gift"> <path d="M2 2.75A2.75 2.75 0 0 1 4.75 0c.983 0 1.873.42 2.57 1.232.268.318.497.668.68 1.042.183-.375.411-.725.68-1.044C9.376.42 10.266 0 11.25 0a2.75 2.75 0 0 1 2.45 4h.55c.966 0 1.75.784 1.75 1.75v2c0 .698-.409 1.301-1 1.582v4.918A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25V9.332C.409 9.05 0 8.448 0 7.75v-2C0 4.784.784 4 1.75 4h.55c-.192-.375-.3-.8-.3-1.25ZM7.25 9.5H2.5v4.75c0 .138.112.25.25.25h4.5Zm1.5 0v5h4.5a.25.25 0 0 0 .25-.25V9.5Zm0-4V8h5.5a.25.25 0 0 0 .25-.25v-2a.25.25 0 0 0-.25-.25Zm-7 0a.25.25 0 0 0-.25.25v2c0 .138.112.25.25.25h5.5V5.5h-5.5Zm3-4a1.25 1.25 0 0 0 0 2.5h2.309c-.233-.818-.542-1.401-.878-1.793-.43-.502-.915-.707-1.431-.707ZM8.941 4h2.309a1.25 1.25 0 0 0 0-2.5c-.516 0-1 .205-1.43.707-.337.392-.646.975-.879 1.793Z"></path> </svg> </template> <template id="code-square-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code-square"> <path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25Zm7.47 3.97a.75.75 0 0 1 1.06 0l2 2a.75.75 0 0 1 0 1.06l-2 2a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L10.69 8 9.22 6.53a.75.75 0 0 1 0-1.06ZM6.78 6.53 5.31 8l1.47 1.47a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215l-2-2a.75.75 0 0 1 0-1.06l2-2a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path> </svg> </template> <template id="device-desktop-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-device-desktop"> <path d="M14.25 1c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 14.25 12h-3.727c.099 1.041.52 1.872 1.292 2.757A.752.752 0 0 1 11.25 16h-6.5a.75.75 0 0 1-.565-1.243c.772-.885 1.192-1.716 1.292-2.757H1.75A1.75 1.75 0 0 1 0 10.25v-7.5C0 1.784.784 1 1.75 1ZM1.75 2.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25ZM9.018 12H6.982a5.72 5.72 0 0 1-.765 2.5h3.566a5.72 5.72 0 0 1-.765-2.5Z"></path> </svg> </template> <div class="position-relative"> <ul role="listbox" class="ActionListWrap QueryBuilder-ListWrap" aria-label="Suggestions" data-action=" combobox-commit:query-builder#comboboxCommit mousedown:query-builder#resultsMousedown " data-target="query-builder.resultsList" data-persist-list=false id="query-builder-test-results" ></ul> </div> <div class="FormControl-inlineValidation" id="validation-538ee51e-bd04-4f9b-8563-a1c6b024f919" hidden="hidden"> <span class="FormControl-inlineValidation--visual"> <svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill"> <path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path> </svg> </span> <span></span> </div> </div> <div data-target="query-builder.screenReaderFeedback" aria-live="polite" aria-atomic="true" class="sr-only"></div> </query-builder></form> <div class="d-flex flex-row color-fg-muted px-3 text-small color-bg-default search-feedback-prompt"> <a target="_blank" href="https://docs.github.com/search-github/github-code-search/understanding-github-code-search-syntax" data-view-component="true" class="Link color-fg-accent text-normal ml-2">Search syntax tips</a> <div class="d-flex flex-1"></div> </div> </div> </div> </div> </modal-dialog></div> </div> <div data-action="click:qbsearch-input#retract" class="dark-backdrop position-fixed" hidden data-target="qbsearch-input.darkBackdrop"></div> <div class="color-fg-default"> <dialog-helper> <dialog data-target="qbsearch-input.feedbackDialog" data-action="close:qbsearch-input#handleDialogClose cancel:qbsearch-input#handleDialogClose" id="feedback-dialog" aria-modal="true" aria-labelledby="feedback-dialog-title" aria-describedby="feedback-dialog-description" data-view-component="true" class="Overlay Overlay-whenNarrow Overlay--size-medium Overlay--motion-scaleFade Overlay--disableScroll"> <div data-view-component="true" class="Overlay-header"> <div class="Overlay-headerContentWrap"> <div class="Overlay-titleWrap"> <h1 class="Overlay-title " id="feedback-dialog-title"> Provide feedback </h1> </div> <div class="Overlay-actionWrap"> <button data-close-dialog-id="feedback-dialog" aria-label="Close" type="button" data-view-component="true" class="close-button Overlay-closeButton"><svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg></button> </div> </div> </div> <scrollable-region data-labelled-by="feedback-dialog-title"> <div data-view-component="true" class="Overlay-body"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form id="code-search-feedback-form" data-turbo="false" action="/search/feedback" accept-charset="UTF-8" method="post"><input type="hidden" data-csrf="true" name="authenticity_token" value="NNrzgB10jCDvLq1Wz3IhsfbGC94F2Wm366+OLGyz95SGLvHhpkfahubA206+/7lR3ugNAA5Znchp+RbmScEiIw==" /> <p>We read every piece of feedback, and take your input very seriously.</p> <textarea name="feedback" class="form-control width-full mb-2" style="height: 120px" id="feedback"></textarea> <input name="include_email" id="include_email" aria-label="Include my email address so I can be contacted" class="form-control mr-2" type="checkbox"> <label for="include_email" style="font-weight: normal">Include my email address so I can be contacted</label> </form></div> </scrollable-region> <div data-view-component="true" class="Overlay-footer Overlay-footer--alignEnd"> <button data-close-dialog-id="feedback-dialog" type="button" data-view-component="true" class="btn"> Cancel </button> <button form="code-search-feedback-form" data-action="click:qbsearch-input#submitFeedback" type="submit" data-view-component="true" class="btn-primary btn"> Submit feedback </button> </div> </dialog></dialog-helper> <custom-scopes data-target="qbsearch-input.customScopesManager"> <dialog-helper> <dialog data-target="custom-scopes.customScopesModalDialog" data-action="close:qbsearch-input#handleDialogClose cancel:qbsearch-input#handleDialogClose" id="custom-scopes-dialog" aria-modal="true" aria-labelledby="custom-scopes-dialog-title" aria-describedby="custom-scopes-dialog-description" data-view-component="true" class="Overlay Overlay-whenNarrow Overlay--size-medium Overlay--motion-scaleFade Overlay--disableScroll"> <div data-view-component="true" class="Overlay-header Overlay-header--divided"> <div class="Overlay-headerContentWrap"> <div class="Overlay-titleWrap"> <h1 class="Overlay-title " id="custom-scopes-dialog-title"> Saved searches </h1> <h2 id="custom-scopes-dialog-description" class="Overlay-description">Use saved searches to filter your results more quickly</h2> </div> <div class="Overlay-actionWrap"> <button data-close-dialog-id="custom-scopes-dialog" aria-label="Close" type="button" data-view-component="true" class="close-button Overlay-closeButton"><svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg></button> </div> </div> </div> <scrollable-region data-labelled-by="custom-scopes-dialog-title"> <div data-view-component="true" class="Overlay-body"> <div data-target="custom-scopes.customScopesModalDialogFlash"></div> <div hidden class="create-custom-scope-form" data-target="custom-scopes.createCustomScopeForm"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form id="custom-scopes-dialog-form" data-turbo="false" action="/search/custom_scopes" accept-charset="UTF-8" method="post"><input type="hidden" data-csrf="true" name="authenticity_token" value="uNY0TPyxzbL/LATb3Fuhn7g6ZwcvinwSImcdJKpMrsyHdm1oB+vm3YD+/OZcPO2BVTgL2fbFQT/TPEzsgUonAQ==" /> <div data-target="custom-scopes.customScopesModalDialogFlash"></div> <input type="hidden" id="custom_scope_id" name="custom_scope_id" data-target="custom-scopes.customScopesIdField"> <div class="form-group"> <label for="custom_scope_name">Name</label> <auto-check src="/search/custom_scopes/check_name" required only-validate-on-blur="false"> <input type="text" name="custom_scope_name" id="custom_scope_name" data-target="custom-scopes.customScopesNameField" class="form-control" autocomplete="off" placeholder="github-ruby" required maxlength="50"> <input type="hidden" data-csrf="true" value="2nF6IcOhMF3i2/t6C6lKLGVEAdBi6zKxT8KONkap8CMYru9vii+TbZRZpUf6W4Yy73ve/vxLfSbyWV6rKn25hQ==" /> </auto-check> </div> <div class="form-group"> <label for="custom_scope_query">Query</label> <input type="text" name="custom_scope_query" id="custom_scope_query" data-target="custom-scopes.customScopesQueryField" class="form-control" autocomplete="off" placeholder="(repo:mona/a OR repo:mona/b) AND lang:python" required maxlength="500"> </div> <p class="text-small color-fg-muted"> To see all available qualifiers, see our <a class="Link--inTextBlock" href="https://docs.github.com/search-github/github-code-search/understanding-github-code-search-syntax">documentation</a>. </p> </form> </div> <div data-target="custom-scopes.manageCustomScopesForm"> <div data-target="custom-scopes.list"></div> </div> </div> </scrollable-region> <div data-view-component="true" class="Overlay-footer Overlay-footer--alignEnd Overlay-footer--divided"> <button data-action="click:custom-scopes#customScopesCancel" type="button" data-view-component="true" class="btn"> Cancel </button> <button form="custom-scopes-dialog-form" data-action="click:custom-scopes#customScopesSubmit" data-target="custom-scopes.customScopesSubmitButton" type="submit" data-view-component="true" class="btn-primary btn"> Create saved search </button> </div> </dialog></dialog-helper> </custom-scopes> </div> </qbsearch-input> <div class="position-relative HeaderMenu-link-wrap d-lg-inline-block"> <a href="/login?return_to=https%3A%2F%2Fgithub.com%2Fnextapps-de%2Fmikado" class="HeaderMenu-link HeaderMenu-link--sign-in HeaderMenu-button flex-shrink-0 no-underline d-none d-lg-inline-flex border border-lg-0 rounded rounded-lg-0 px-2 py-1" style="margin-left: 12px;" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"site header menu","repository_id":null,"auth_type":"SIGN_UP","originating_url":"https://github.com/nextapps-de/mikado","user_id":null}}" data-hydro-click-hmac="e8aabf44ef7cdf5eaa0abd635bf15bb9330c258f716227d60ea8eca649894da6" data-analytics-event="{"category":"Marketing nav","action":"click to go to homepage","label":"ref_page:Marketing;ref_cta:Sign in;ref_loc:Header"}" > Sign in </a> </div> <a href="/signup?ref_cta=Sign+up&ref_loc=header+logged+out&ref_page=%2F%3Cuser-name%3E%2F%3Crepo-name%3E&source=header-repo&source_repo=nextapps-de%2Fmikado" class="HeaderMenu-link HeaderMenu-link--sign-up HeaderMenu-button flex-shrink-0 d-flex d-lg-inline-flex no-underline border color-border-default rounded px-2 py-1" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"site header menu","repository_id":null,"auth_type":"SIGN_UP","originating_url":"https://github.com/nextapps-de/mikado","user_id":null}}" data-hydro-click-hmac="e8aabf44ef7cdf5eaa0abd635bf15bb9330c258f716227d60ea8eca649894da6" data-analytics-event="{"category":"Sign up","action":"click to sign up for account","label":"ref_page:/<user-name>/<repo-name>;ref_cta:Sign up;ref_loc:header logged out"}" > Sign up </a> <button type="button" class="sr-only js-header-menu-focus-trap d-block d-lg-none">Reseting focus</button> </div> </div> </div> </div> </header> <div hidden="hidden" data-view-component="true" class="js-stale-session-flash stale-session-flash flash flash-warn flash-full"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> <span class="js-stale-session-flash-signed-in" hidden>You signed in with another tab or window. <a class="Link--inTextBlock" href="">Reload</a> to refresh your session.</span> <span class="js-stale-session-flash-signed-out" hidden>You signed out in another tab or window. <a class="Link--inTextBlock" href="">Reload</a> to refresh your session.</span> <span class="js-stale-session-flash-switched" hidden>You switched accounts on another tab or window. <a class="Link--inTextBlock" href="">Reload</a> to refresh your session.</span> <button id="icon-button-5549a908-a161-46a9-b27e-d2028900e5be" aria-labelledby="tooltip-b14fc747-7c1c-435c-b370-e3b90a7e1dbb" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium flash-close js-flash-close"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x Button-visual"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button><tool-tip id="tooltip-b14fc747-7c1c-435c-b370-e3b90a7e1dbb" for="icon-button-5549a908-a161-46a9-b27e-d2028900e5be" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Dismiss alert</tool-tip> </div> </div> <div id="start-of-content" class="show-on-focus"></div> <div id="js-flash-container" class="flash-container" data-turbo-replace> <template class="js-flash-template"> <div class="flash flash-full {{ className }}"> <div > <button autofocus class="flash-close js-flash-close" type="button" aria-label="Dismiss this message"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button> <div aria-atomic="true" role="alert" class="js-flash-alert"> <div>{{ message }}</div> </div> </div> </div> </template> </div> <div class="application-main " data-commit-hovercards-enabled data-discussion-hovercards-enabled data-issue-and-pr-hovercards-enabled data-project-hovercards-enabled > <div itemscope itemtype="http://schema.org/SoftwareSourceCode" class=""> <main id="js-repo-pjax-container" > <div id="repository-container-header" class="pt-3 hide-full-screen" style="background-color: var(--page-header-bgColor, var(--color-page-header-bg));" data-turbo-replace> <div class="d-flex flex-nowrap flex-justify-end mb-3 px-3 px-lg-5" style="gap: 1rem;"> <div class="flex-auto min-width-0 width-fit"> <div class=" d-flex flex-wrap flex-items-center wb-break-word f3 text-normal"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-repo color-fg-muted mr-2"> <path d="M2 2.5A2.5 2.5 0 0 1 4.5 0h8.75a.75.75 0 0 1 .75.75v12.5a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1 0-1.5h1.75v-2h-8a1 1 0 0 0-.714 1.7.75.75 0 1 1-1.072 1.05A2.495 2.495 0 0 1 2 11.5Zm10.5-1h-8a1 1 0 0 0-1 1v6.708A2.486 2.486 0 0 1 4.5 9h8ZM5 12.25a.25.25 0 0 1 .25-.25h3.5a.25.25 0 0 1 .25.25v3.25a.25.25 0 0 1-.4.2l-1.45-1.087a.249.249 0 0 0-.3 0L5.4 15.7a.25.25 0 0 1-.4-.2Z"></path> </svg> <span class="author flex-self-stretch" itemprop="author"> <a class="url fn" rel="author" data-hovercard-type="organization" data-hovercard-url="/orgs/nextapps-de/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/nextapps-de"> nextapps-de </a> </span> <span class="mx-1 flex-self-stretch color-fg-muted">/</span> <strong itemprop="name" class="mr-2 flex-self-stretch"> <a data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" href="/nextapps-de/mikado">mikado</a> </strong> <span></span><span class="Label Label--secondary v-align-middle mr-1">Public</span> </div> </div> <div id="repository-details-container" class="flex-shrink-0" data-turbo-replace style="max-width: 70%;"> <ul class="pagehead-actions flex-shrink-0 d-none d-md-inline" style="padding: 2px 0;"> <li> <include-fragment src="/nextapps-de/mikado/sponsor_button"></include-fragment> </li> <li> <a href="/login?return_to=%2Fnextapps-de%2Fmikado" rel="nofollow" id="repository-details-watch-button" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"notification subscription menu watch","repository_id":null,"auth_type":"LOG_IN","originating_url":"https://github.com/nextapps-de/mikado","user_id":null}}" data-hydro-click-hmac="e286a8561069821ba5323ceef3553637816d5ec7128a8ae594e79e4cb86adb3b" aria-label="You must be signed in to change notification settings" data-view-component="true" class="btn-sm btn"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-bell mr-2"> <path d="M8 16a2 2 0 0 0 1.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 0 0 8 16ZM3 5a5 5 0 0 1 10 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.519 1.519 0 0 1 13.482 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947Zm5-3.5A3.5 3.5 0 0 0 4.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01l.001.006c0 .002.002.004.004.006l.006.004.007.001h10.964l.007-.001.006-.004.004-.006.001-.007a.017.017 0 0 0-.003-.01l-1.703-2.554a1.745 1.745 0 0 1-.294-.97V5A3.5 3.5 0 0 0 8 1.5Z"></path> </svg>Notifications </a> <tool-tip id="tooltip-c87f92c0-fd49-4a52-acc4-03bb82fe457a" for="repository-details-watch-button" popover="manual" data-direction="s" data-type="description" data-view-component="true" class="sr-only position-absolute">You must be signed in to change notification settings</tool-tip> </li> <li> <a icon="repo-forked" id="fork-button" href="/login?return_to=%2Fnextapps-de%2Fmikado" rel="nofollow" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"repo details fork button","repository_id":206418939,"auth_type":"LOG_IN","originating_url":"https://github.com/nextapps-de/mikado","user_id":null}}" data-hydro-click-hmac="89601f9553ca3263f07a4964178b6a5acd7440892f1cf60aefeb6b24bbe12274" data-view-component="true" class="btn-sm btn"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-repo-forked mr-2"> <path d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z"></path> </svg>Fork <span id="repo-network-counter" data-pjax-replace="true" data-turbo-replace="true" title="36" data-view-component="true" class="Counter">36</span> </a> </li> <li> <div data-view-component="true" class="BtnGroup d-flex"> <a href="/login?return_to=%2Fnextapps-de%2Fmikado" rel="nofollow" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"star button","repository_id":206418939,"auth_type":"LOG_IN","originating_url":"https://github.com/nextapps-de/mikado","user_id":null}}" data-hydro-click-hmac="e6e4250d13c81da62e12c1eaef9ffe3b51a5082030fc27bc6f08ab9836701718" aria-label="You must be signed in to star a repository" data-view-component="true" class="tooltipped tooltipped-sw btn-sm btn"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-star v-align-text-bottom d-inline-block mr-2"> <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z"></path> </svg><span data-view-component="true" class="d-inline"> Star </span> <span id="repo-stars-counter-star" aria-label="801 users starred this repository" data-singular-suffix="user starred this repository" data-plural-suffix="users starred this repository" data-turbo-replace="true" title="801" data-view-component="true" class="Counter js-social-count">801</span> </a></div> </li> </ul> </div> </div> <div id="responsive-meta-container" data-turbo-replace> <div class="d-block d-md-none mb-2 px-3 px-md-4 px-lg-5"> <p class="f4 mb-3 "> Mikado is the webs fastest template library for building user interfaces. </p> <h3 class="sr-only">License</h3> <div class="mb-2"> <a href="/nextapps-de/mikado/blob/master/LICENSE" class="Link--muted" data-analytics-event="{"category":"Repository Overview","action":"click","label":"location:sidebar;file:license"}" > <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-law mr-2"> <path d="M8.75.75V2h.985c.304 0 .603.08.867.231l1.29.736c.038.022.08.033.124.033h2.234a.75.75 0 0 1 0 1.5h-.427l2.111 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.006.005-.01.01-.045.04c-.21.176-.441.327-.686.45C14.556 10.78 13.88 11 13 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L12.178 4.5h-.162c-.305 0-.604-.079-.868-.231l-1.29-.736a.245.245 0 0 0-.124-.033H8.75V13h2.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1 0-1.5h2.5V3.5h-.984a.245.245 0 0 0-.124.033l-1.289.737c-.265.15-.564.23-.869.23h-.162l2.112 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.016.015-.045.04c-.21.176-.441.327-.686.45C4.556 10.78 3.88 11 3 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L2.178 4.5H1.75a.75.75 0 0 1 0-1.5h2.234a.249.249 0 0 0 .125-.033l1.288-.737c.265-.15.564-.23.869-.23h.984V.75a.75.75 0 0 1 1.5 0Zm2.945 8.477c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327Zm-10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327Z"></path> </svg> Apache-2.0 license </a> </div> <div class="mb-3"> <a class="Link--secondary no-underline mr-3" href="/nextapps-de/mikado/stargazers"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-star mr-1"> <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z"></path> </svg> <span class="text-bold">801</span> stars </a> <a class="Link--secondary no-underline mr-3" href="/nextapps-de/mikado/forks"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-repo-forked mr-1"> <path d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z"></path> </svg> <span class="text-bold">36</span> forks </a> <a class="Link--secondary no-underline mr-3 d-inline-block" href="/nextapps-de/mikado/branches"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-git-branch mr-1"> <path d="M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25Zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"></path> </svg> <span>Branches</span> </a> <a class="Link--secondary no-underline d-inline-block" href="/nextapps-de/mikado/tags"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-tag mr-1"> <path d="M1 7.775V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 0 1 0 2.474l-5.026 5.026a1.75 1.75 0 0 1-2.474 0l-6.25-6.25A1.752 1.752 0 0 1 1 7.775Zm1.5 0c0 .066.026.13.073.177l6.25 6.25a.25.25 0 0 0 .354 0l5.025-5.025a.25.25 0 0 0 0-.354l-6.25-6.25a.25.25 0 0 0-.177-.073H2.75a.25.25 0 0 0-.25.25ZM6 5a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"></path> </svg> <span>Tags</span> </a> <a class="Link--secondary no-underline d-inline-block" href="/nextapps-de/mikado/activity"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-pulse mr-1"> <path d="M6 2c.306 0 .582.187.696.471L10 10.731l1.304-3.26A.751.751 0 0 1 12 7h3.25a.75.75 0 0 1 0 1.5h-2.742l-1.812 4.528a.751.751 0 0 1-1.392 0L6 4.77 4.696 8.03A.75.75 0 0 1 4 8.5H.75a.75.75 0 0 1 0-1.5h2.742l1.812-4.529A.751.751 0 0 1 6 2Z"></path> </svg> <span>Activity</span> </a> </div> <div class="d-flex flex-wrap gap-2"> <div class="flex-1"> <div data-view-component="true" class="BtnGroup d-flex"> <a href="/login?return_to=%2Fnextapps-de%2Fmikado" rel="nofollow" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"star button","repository_id":206418939,"auth_type":"LOG_IN","originating_url":"https://github.com/nextapps-de/mikado","user_id":null}}" data-hydro-click-hmac="e6e4250d13c81da62e12c1eaef9ffe3b51a5082030fc27bc6f08ab9836701718" aria-label="You must be signed in to star a repository" data-view-component="true" class="tooltipped tooltipped-sw btn-sm btn btn-block"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-star v-align-text-bottom d-inline-block mr-2"> <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z"></path> </svg><span data-view-component="true" class="d-inline"> Star </span> </a></div> </div> <div class="flex-1"> <a href="/login?return_to=%2Fnextapps-de%2Fmikado" rel="nofollow" id="files-overview-watch-button" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"notification subscription menu watch","repository_id":null,"auth_type":"LOG_IN","originating_url":"https://github.com/nextapps-de/mikado","user_id":null}}" data-hydro-click-hmac="e286a8561069821ba5323ceef3553637816d5ec7128a8ae594e79e4cb86adb3b" aria-label="You must be signed in to change notification settings" data-view-component="true" class="btn-sm btn btn-block"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-bell mr-2"> <path d="M8 16a2 2 0 0 0 1.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 0 0 8 16ZM3 5a5 5 0 0 1 10 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.519 1.519 0 0 1 13.482 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947Zm5-3.5A3.5 3.5 0 0 0 4.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01l.001.006c0 .002.002.004.004.006l.006.004.007.001h10.964l.007-.001.006-.004.004-.006.001-.007a.017.017 0 0 0-.003-.01l-1.703-2.554a1.745 1.745 0 0 1-.294-.97V5A3.5 3.5 0 0 0 8 1.5Z"></path> </svg>Notifications </a> <tool-tip id="tooltip-7679c241-5831-4047-8a39-575e697a65ce" for="files-overview-watch-button" popover="manual" data-direction="s" data-type="description" data-view-component="true" class="sr-only position-absolute">You must be signed in to change notification settings</tool-tip> </div> <span> </span> </div> </div> </div> <nav data-pjax="#js-repo-pjax-container" aria-label="Repository" data-view-component="true" class="js-repo-nav js-sidenav-container-pjax js-responsive-underlinenav overflow-hidden UnderlineNav px-3 px-md-4 px-lg-5"> <ul data-view-component="true" class="UnderlineNav-body list-style-none"> <li data-view-component="true" class="d-inline-flex"> <a id="code-tab" href="/nextapps-de/mikado" data-tab-item="i0code-tab" data-selected-links="repo_source repo_downloads repo_commits repo_releases repo_tags repo_branches repo_packages repo_deployments repo_attestations /nextapps-de/mikado" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g c" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Code","target":"UNDERLINE_NAV.TAB"}" aria-current="page" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item selected"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code UnderlineNav-octicon d-none d-sm-inline"> <path d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z"></path> </svg> <span data-content="Code">Code</span> <span id="code-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="Not available" data-view-component="true" class="Counter"></span> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="issues-tab" href="/nextapps-de/mikado/issues" data-tab-item="i1issues-tab" data-selected-links="repo_issues repo_labels repo_milestones /nextapps-de/mikado/issues" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g i" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Issues","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-issue-opened UnderlineNav-octicon d-none d-sm-inline"> <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path> </svg> <span data-content="Issues">Issues</span> <span id="issues-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="5" data-view-component="true" class="Counter">5</span> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="pull-requests-tab" href="/nextapps-de/mikado/pulls" data-tab-item="i2pull-requests-tab" data-selected-links="repo_pulls checks /nextapps-de/mikado/pulls" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g p" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Pull requests","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-git-pull-request UnderlineNav-octicon d-none d-sm-inline"> <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"></path> </svg> <span data-content="Pull requests">Pull requests</span> <span id="pull-requests-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="0" hidden="hidden" data-view-component="true" class="Counter">0</span> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="discussions-tab" href="/nextapps-de/mikado/discussions" data-tab-item="i3discussions-tab" data-selected-links="repo_discussions /nextapps-de/mikado/discussions" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g g" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Discussions","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-comment-discussion UnderlineNav-octicon d-none d-sm-inline"> <path d="M1.75 1h8.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 10.25 10H7.061l-2.574 2.573A1.458 1.458 0 0 1 2 11.543V10h-.25A1.75 1.75 0 0 1 0 8.25v-5.5C0 1.784.784 1 1.75 1ZM1.5 2.75v5.5c0 .138.112.25.25.25h1a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h3.5a.25.25 0 0 0 .25-.25v-5.5a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25Zm13 2a.25.25 0 0 0-.25-.25h-.5a.75.75 0 0 1 0-1.5h.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 14.25 12H14v1.543a1.458 1.458 0 0 1-2.487 1.03L9.22 12.28a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215l2.22 2.22v-2.19a.75.75 0 0 1 .75-.75h1a.25.25 0 0 0 .25-.25Z"></path> </svg> <span data-content="Discussions">Discussions</span> <span id="discussions-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="Not available" data-view-component="true" class="Counter"></span> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="actions-tab" href="/nextapps-de/mikado/actions" data-tab-item="i4actions-tab" data-selected-links="repo_actions /nextapps-de/mikado/actions" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g a" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Actions","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-play UnderlineNav-octicon d-none d-sm-inline"> <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm4.879-2.773 4.264 2.559a.25.25 0 0 1 0 .428l-4.264 2.559A.25.25 0 0 1 6 10.559V5.442a.25.25 0 0 1 .379-.215Z"></path> </svg> <span data-content="Actions">Actions</span> <span id="actions-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="Not available" data-view-component="true" class="Counter"></span> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="projects-tab" href="/nextapps-de/mikado/projects" data-tab-item="i5projects-tab" data-selected-links="repo_projects new_repo_project repo_project /nextapps-de/mikado/projects" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g b" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Projects","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-table UnderlineNav-octicon d-none d-sm-inline"> <path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25ZM6.5 6.5v8h7.75a.25.25 0 0 0 .25-.25V6.5Zm8-1.5V1.75a.25.25 0 0 0-.25-.25H6.5V5Zm-13 1.5v7.75c0 .138.112.25.25.25H5v-8ZM5 5V1.5H1.75a.25.25 0 0 0-.25.25V5Z"></path> </svg> <span data-content="Projects">Projects</span> <span id="projects-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="0" hidden="hidden" data-view-component="true" class="Counter">0</span> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="security-tab" href="/nextapps-de/mikado/security" data-tab-item="i6security-tab" data-selected-links="security overview alerts policy token_scanning code_scanning /nextapps-de/mikado/security" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g s" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Security","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-shield UnderlineNav-octicon d-none d-sm-inline"> <path d="M7.467.133a1.748 1.748 0 0 1 1.066 0l5.25 1.68A1.75 1.75 0 0 1 15 3.48V7c0 1.566-.32 3.182-1.303 4.682-.983 1.498-2.585 2.813-5.032 3.855a1.697 1.697 0 0 1-1.33 0c-2.447-1.042-4.049-2.357-5.032-3.855C1.32 10.182 1 8.566 1 7V3.48a1.75 1.75 0 0 1 1.217-1.667Zm.61 1.429a.25.25 0 0 0-.153 0l-5.25 1.68a.25.25 0 0 0-.174.238V7c0 1.358.275 2.666 1.057 3.86.784 1.194 2.121 2.34 4.366 3.297a.196.196 0 0 0 .154 0c2.245-.956 3.582-2.104 4.366-3.298C13.225 9.666 13.5 8.36 13.5 7V3.48a.251.251 0 0 0-.174-.237l-5.25-1.68ZM8.75 4.75v3a.75.75 0 0 1-1.5 0v-3a.75.75 0 0 1 1.5 0ZM9 10.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> <span data-content="Security">Security</span> <include-fragment src="/nextapps-de/mikado/security/overall-count" accept="text/fragment+html"></include-fragment> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="insights-tab" href="/nextapps-de/mikado/pulse" data-tab-item="i7insights-tab" data-selected-links="repo_graphs repo_contributors dependency_graph dependabot_updates pulse people community /nextapps-de/mikado/pulse" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Insights","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-graph UnderlineNav-octicon d-none d-sm-inline"> <path d="M1.5 1.75V13.5h13.75a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1-.75-.75V1.75a.75.75 0 0 1 1.5 0Zm14.28 2.53-5.25 5.25a.75.75 0 0 1-1.06 0L7 7.06 4.28 9.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.25-3.25a.75.75 0 0 1 1.06 0L10 7.94l4.72-4.72a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path> </svg> <span data-content="Insights">Insights</span> <span id="insights-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="Not available" data-view-component="true" class="Counter"></span> </a></li> </ul> <div style="visibility:hidden;" data-view-component="true" class="UnderlineNav-actions js-responsive-underlinenav-overflow position-absolute pr-3 pr-md-4 pr-lg-5 right-0"> <action-menu data-select-variant="none" data-view-component="true"> <focus-group direction="vertical" mnemonics retain> <button id="action-menu-3ee4bd88-c9aa-4e80-beee-d76daccfd99a-button" popovertarget="action-menu-3ee4bd88-c9aa-4e80-beee-d76daccfd99a-overlay" aria-controls="action-menu-3ee4bd88-c9aa-4e80-beee-d76daccfd99a-list" aria-haspopup="true" aria-labelledby="tooltip-ee348240-00bf-4498-93ef-a69789546eee" type="button" data-view-component="true" class="Button Button--iconOnly Button--secondary Button--medium UnderlineNav-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal Button-visual"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg> </button><tool-tip id="tooltip-ee348240-00bf-4498-93ef-a69789546eee" for="action-menu-3ee4bd88-c9aa-4e80-beee-d76daccfd99a-button" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Additional navigation options</tool-tip> <anchored-position data-target="action-menu.overlay" id="action-menu-3ee4bd88-c9aa-4e80-beee-d76daccfd99a-overlay" anchor="action-menu-3ee4bd88-c9aa-4e80-beee-d76daccfd99a-button" align="start" side="outside-bottom" anchor-offset="normal" popover="auto" data-view-component="true"> <div data-view-component="true" class="Overlay Overlay--size-auto"> <div data-view-component="true" class="Overlay-body Overlay-body--paddingNone"> <action-list> <div data-view-component="true"> <ul aria-labelledby="action-menu-3ee4bd88-c9aa-4e80-beee-d76daccfd99a-button" id="action-menu-3ee4bd88-c9aa-4e80-beee-d76daccfd99a-list" role="menu" data-view-component="true" class="ActionListWrap--inset ActionListWrap"> <li hidden="hidden" data-menu-item="i0code-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-03c115dc-295e-4234-87fe-46a7c3db2d97" href="/nextapps-de/mikado" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code"> <path d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Code </span> </a> </li> <li hidden="hidden" data-menu-item="i1issues-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-b873992a-1efd-40c9-8610-31d55119b309" href="/nextapps-de/mikado/issues" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-issue-opened"> <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Issues </span> </a> </li> <li hidden="hidden" data-menu-item="i2pull-requests-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-47dd8052-d617-4987-8618-5f2893573622" href="/nextapps-de/mikado/pulls" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-git-pull-request"> <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Pull requests </span> </a> </li> <li hidden="hidden" data-menu-item="i3discussions-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-221eb931-86cc-43ff-9bd4-4c8e64f674da" href="/nextapps-de/mikado/discussions" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-comment-discussion"> <path d="M1.75 1h8.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 10.25 10H7.061l-2.574 2.573A1.458 1.458 0 0 1 2 11.543V10h-.25A1.75 1.75 0 0 1 0 8.25v-5.5C0 1.784.784 1 1.75 1ZM1.5 2.75v5.5c0 .138.112.25.25.25h1a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h3.5a.25.25 0 0 0 .25-.25v-5.5a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25Zm13 2a.25.25 0 0 0-.25-.25h-.5a.75.75 0 0 1 0-1.5h.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 14.25 12H14v1.543a1.458 1.458 0 0 1-2.487 1.03L9.22 12.28a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215l2.22 2.22v-2.19a.75.75 0 0 1 .75-.75h1a.25.25 0 0 0 .25-.25Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Discussions </span> </a> </li> <li hidden="hidden" data-menu-item="i4actions-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-db452510-4829-4583-a4a5-caef1a0df430" href="/nextapps-de/mikado/actions" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-play"> <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm4.879-2.773 4.264 2.559a.25.25 0 0 1 0 .428l-4.264 2.559A.25.25 0 0 1 6 10.559V5.442a.25.25 0 0 1 .379-.215Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Actions </span> </a> </li> <li hidden="hidden" data-menu-item="i5projects-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-73027003-3dea-4d31-83c9-76022c3ccf1a" href="/nextapps-de/mikado/projects" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-table"> <path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25ZM6.5 6.5v8h7.75a.25.25 0 0 0 .25-.25V6.5Zm8-1.5V1.75a.25.25 0 0 0-.25-.25H6.5V5Zm-13 1.5v7.75c0 .138.112.25.25.25H5v-8ZM5 5V1.5H1.75a.25.25 0 0 0-.25.25V5Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Projects </span> </a> </li> <li hidden="hidden" data-menu-item="i6security-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-482e275b-9bda-49dc-8d5a-9ce9b16a826a" href="/nextapps-de/mikado/security" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-shield"> <path d="M7.467.133a1.748 1.748 0 0 1 1.066 0l5.25 1.68A1.75 1.75 0 0 1 15 3.48V7c0 1.566-.32 3.182-1.303 4.682-.983 1.498-2.585 2.813-5.032 3.855a1.697 1.697 0 0 1-1.33 0c-2.447-1.042-4.049-2.357-5.032-3.855C1.32 10.182 1 8.566 1 7V3.48a1.75 1.75 0 0 1 1.217-1.667Zm.61 1.429a.25.25 0 0 0-.153 0l-5.25 1.68a.25.25 0 0 0-.174.238V7c0 1.358.275 2.666 1.057 3.86.784 1.194 2.121 2.34 4.366 3.297a.196.196 0 0 0 .154 0c2.245-.956 3.582-2.104 4.366-3.298C13.225 9.666 13.5 8.36 13.5 7V3.48a.251.251 0 0 0-.174-.237l-5.25-1.68ZM8.75 4.75v3a.75.75 0 0 1-1.5 0v-3a.75.75 0 0 1 1.5 0ZM9 10.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Security </span> </a> </li> <li hidden="hidden" data-menu-item="i7insights-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-dd3cad09-72d5-458e-8b05-b93c311f2682" href="/nextapps-de/mikado/pulse" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-graph"> <path d="M1.5 1.75V13.5h13.75a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1-.75-.75V1.75a.75.75 0 0 1 1.5 0Zm14.28 2.53-5.25 5.25a.75.75 0 0 1-1.06 0L7 7.06 4.28 9.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.25-3.25a.75.75 0 0 1 1.06 0L10 7.94l4.72-4.72a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Insights </span> </a> </li> </ul> </div></action-list> </div> </div></anchored-position> </focus-group> </action-menu></div> </nav> </div> <turbo-frame id="repo-content-turbo-frame" target="_top" data-turbo-action="advance" class=""> <div id="repo-content-pjax-container" class="repository-content " > <h1 class='sr-only'>nextapps-de/mikado</h1> <div class="clearfix container-xl px-md-4 px-lg-5 px-3"> <div> <div style="max-width: 100%" data-view-component="true" class="Layout Layout--flowRow-until-md react-repos-overview-margin Layout--sidebarPosition-end Layout--sidebarPosition-flowRow-end"> <div data-view-component="true" class="Layout-main"> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_dompurify_dist_purify_es_mjs-dd1d3ea6a436.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_tanstack_query-core_build_modern_queryObserver_js-node_modules_tanstack_-defd52-843b41414e0e.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_hydro-analytics-client_dist_analytics-client_js-node_modules_gith-40531a-09af0ef9a562.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_aria-live_aria-live_ts-ui_packages_promise-with-resolvers-polyfill_promise-with-r-17c672-34345cb18aac.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_paths_index_ts-6b6db20995f4.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_ref-selector_RefSelector_tsx-7496afc3784d.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_code-view-shared_hooks_use-canonical-object_ts-ui_packages_code-view-shared_hooks-a6859a-250df1353d69.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/repos-overview-f4ef8eeec393.js"></script> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-react.9c31aecc261f2550ab27.module.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/repos-overview.32a87dc4587d56dcf1eb.module.css" /> <react-partial partial-name="repos-overview" data-ssr="true" data-attempted-ssr="true" > <script type="application/json" data-target="react-partial.embeddedData">{"props":{"initialPayload":{"allShortcutsEnabled":false,"path":"/","repo":{"id":206418939,"defaultBranch":"master","name":"mikado","ownerLogin":"nextapps-de","currentUserCanPush":false,"isFork":false,"isEmpty":false,"createdAt":"2019-09-04T21:37:13.000Z","ownerAvatar":"https://avatars.githubusercontent.com/u/28928681?v=4","public":true,"private":false,"isOrgOwned":true},"currentUser":null,"refInfo":{"name":"master","listCacheKey":"v0:1723287673.0","canEdit":false,"refType":"branch","currentOid":"ab9460460816354dd5a04a6fa265ecc1071f2993"},"tree":{"items":[{"name":".github","path":".github","contentType":"directory"},{"name":"compiler","path":"compiler","contentType":"directory"},{"name":"dist","path":"dist","contentType":"directory"},{"name":"doc","path":"doc","contentType":"directory"},{"name":"examples/todomvc","path":"examples/todomvc","contentType":"directory","hasSimplifiedPath":true},{"name":"express","path":"express","contentType":"directory"},{"name":"src","path":"src","contentType":"directory"},{"name":"ssr","path":"ssr","contentType":"directory"},{"name":"task","path":"task","contentType":"directory"},{"name":"test","path":"test","contentType":"directory"},{"name":".gitignore","path":".gitignore","contentType":"file"},{"name":"CHANGELOG.md","path":"CHANGELOG.md","contentType":"file"},{"name":"LICENSE","path":"LICENSE","contentType":"file"},{"name":"README.md","path":"README.md","contentType":"file"},{"name":"index.d.ts","path":"index.d.ts","contentType":"file"},{"name":"package-lock.json","path":"package-lock.json","contentType":"file"},{"name":"package.json","path":"package.json","contentType":"file"}],"templateDirectorySuggestionUrl":null,"readme":null,"totalCount":17,"showBranchInfobar":false},"fileTree":null,"fileTreeProcessingTime":null,"foldersToFetch":[],"treeExpanded":false,"symbolsExpanded":false,"isOverview":true,"overview":{"banners":{"shouldRecommendReadme":false,"isPersonalRepo":false,"showUseActionBanner":false,"actionSlug":null,"actionId":null,"showProtectBranchBanner":false,"publishBannersInfo":{"dismissActionNoticePath":"/settings/dismiss-notice/publish_action_from_repo","releasePath":"/nextapps-de/mikado/releases/new?marketplace=true","showPublishActionBanner":false},"interactionLimitBanner":null,"showInvitationBanner":false,"inviterName":null,"actionsMigrationBannerInfo":{"releaseTags":[],"showImmutableActionsMigrationBanner":false,"initialMigrationStatus":null}},"codeButton":{"contactPath":"/contact","isEnterprise":false,"local":{"protocolInfo":{"httpAvailable":true,"sshAvailable":null,"httpUrl":"https://github.com/nextapps-de/mikado.git","showCloneWarning":null,"sshUrl":null,"sshCertificatesRequired":null,"sshCertificatesAvailable":null,"ghCliUrl":"gh repo clone nextapps-de/mikado","defaultProtocol":"http","newSshKeyUrl":"/settings/ssh/new","setProtocolPath":"/users/set_protocol"},"platformInfo":{"cloneUrl":"https://desktop.github.com","showVisualStudioCloneButton":false,"visualStudioCloneUrl":"https://windows.github.com","showXcodeCloneButton":false,"xcodeCloneUrl":"xcode://clone?repo=https%3A%2F%2Fgithub.com%2Fnextapps-de%2Fmikado","zipballUrl":"/nextapps-de/mikado/archive/refs/heads/master.zip"}},"newCodespacePath":"/codespaces/new?hide_repo_select=true\u0026repo=206418939"},"popovers":{"rename":null,"renamedParentRepo":null},"commitCount":"283","overviewFiles":[{"displayName":"README.md","repoName":"mikado","refName":"master","path":"README.md","preferredFileType":"readme","tabName":"README","richText":"\u003carticle class=\"markdown-body entry-content container-lg\" itemprop=\"text\"\u003e\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch1 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/ad856042c9ee8161f06b5738ebce0c72234212c7e767a597b2b1b8a3f6e1fe59/68747470733a2f2f63646e2e6a7364656c6976722e6e65742f67682f6e657874617070732d64652f6d696b61646f406d61737465722f646f632f6d696b61646f2d616e696d617465642e7376673f763d33\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/ad856042c9ee8161f06b5738ebce0c72234212c7e767a597b2b1b8a3f6e1fe59/68747470733a2f2f63646e2e6a7364656c6976722e6e65742f67682f6e657874617070732d64652f6d696b61646f406d61737465722f646f632f6d696b61646f2d616e696d617465642e7376673f763d33\" alt=\"Mikado - Webs fastest templating engine\" width=\"550px\" data-canonical-src=\"https://cdn.jsdelivr.net/gh/nextapps-de/mikado@master/doc/mikado-animated.svg?v=3\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003cp dir=\"auto\"\u003e\u003c/p\u003e\u003c/h1\u003e\u003ca id=\"\" class=\"anchor\" aria-label=\"Permalink: \" href=\"#\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eMikado is the webs fastest template engine for building user interfaces. Carefully crafted to get the most out of the browser. Also providing the fastest Express Render Engine of today. Super-lightweight, outstanding performance, no dependencies.\u003c/h3\u003e\u003ca id=\"user-content-mikado-is-the-webs-fastest-template-engine-for-building-user-interfaces-carefully-crafted-to-get-the-most-out-of-the-browser-also-providing-the-fastest-express-render-engine-of-today-super-lightweight-outstanding-performance-no-dependencies\" class=\"anchor\" aria-label=\"Permalink: Mikado is the webs fastest template engine for building user interfaces. Carefully crafted to get the most out of the browser. Also providing the fastest Express Render Engine of today. Super-lightweight, outstanding performance, no dependencies.\" href=\"#mikado-is-the-webs-fastest-template-engine-for-building-user-interfaces-carefully-crafted-to-get-the-most-out-of-the-browser-also-providing-the-fastest-express-render-engine-of-today-super-lightweight-outstanding-performance-no-dependencies\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca href=\"https://www.npmjs.com/package/mikado\" rel=\"nofollow\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/1cab20b1dc2917b3535325cd8f2f26c2fcbcac39b755109e5f1bf5f12f1ba12b/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f6d696b61646f2e737667\" data-canonical-src=\"https://img.shields.io/npm/v/mikado.svg\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\n\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/7c46a30435dfcf8db3fb1095dcf087c97dcf396f9361be69e5f84ff6ff21f276/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6275696c642d70617373696e672d627269676874677265656e\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/7c46a30435dfcf8db3fb1095dcf087c97dcf396f9361be69e5f84ff6ff21f276/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6275696c642d70617373696e672d627269676874677265656e\" data-canonical-src=\"https://img.shields.io/badge/build-passing-brightgreen\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\n\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/1c1f9382219abac9bae818322ccdaf248cc1e5e4284db69af84d0eafc284caed/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f636f7665726167652d39302532352d627269676874677265656e\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/1c1f9382219abac9bae818322ccdaf248cc1e5e4284db69af84d0eafc284caed/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f636f7665726167652d39302532352d627269676874677265656e\" data-canonical-src=\"https://img.shields.io/badge/coverage-90%25-brightgreen\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\n\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/e2b15b0b96ff985344c016e54980053ce29f32c22ae7d6c50934cf5e8015a206/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f74797065642d39332532352d627269676874677265656e\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/e2b15b0b96ff985344c016e54980053ce29f32c22ae7d6c50934cf5e8015a206/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f74797065642d39332532352d627269676874677265656e\" data-canonical-src=\"https://img.shields.io/badge/typed-93%25-brightgreen\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/nextapps-de/mikado/issues\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/2d39e3ec77fe95ea1def3f670cde53bfb63c3f03a8042a1b92e6e7ba67daa8c4/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6973737565732f6e657874617070732d64652f6d696b61646f2e737667\" data-canonical-src=\"https://img.shields.io/github/issues/nextapps-de/mikado.svg\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/nextapps-de/mikado/blob/master/LICENSE\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/56cd3e9ef4db4a5430c27caa8a8116df887b5a66284b86f2d6d28d4421477005/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f6c2f6d696b61646f2e737667\" data-canonical-src=\"https://img.shields.io/npm/l/mikado.svg\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca href=\"#get-started\"\u003eGetting Started\u003c/a\u003e • \n\u003ca href=\"#options\"\u003eOptions\u003c/a\u003e • \n\u003ca href=\"#api\"\u003eAPI\u003c/a\u003e • \n\u003ca href=\"#benchmark\"\u003eBenchmark\u003c/a\u003e • \n\u003ca href=\"#compiler\"\u003eTemplate Compiler\u003c/a\u003e • \n\u003ca href=\"#ssr\"\u003eServer-Side-Rendering\u003c/a\u003e • \n\u003ca href=\"#express\"\u003eExpress Render Engine\u003c/a\u003e • \n\u003ca href=\"#proxy\"\u003eReactive\u003c/a\u003e • \n\u003ca href=\"#hydration\"\u003eHydration\u003c/a\u003e • \n\u003ca href=\"#shadow\"\u003eWeb Components (Shadow DOM)\u003c/a\u003e • \n\u003ca href=\"/nextapps-de/mikado/blob/master/CHANGELOG.md\"\u003eChangelog\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eWhen you are coming from any previous version: \u003ca href=\"/nextapps-de/mikado/blob/master/doc/migrate-0.8.md\"\u003eMigration Guide 0.8.x\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003eBenchmark:\u003c/strong\u003e\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"#benchmark\"\u003eStress Test Benchmark\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://krausest.github.io/js-framework-benchmark/current.html\" rel=\"nofollow\"\u003ehttps://krausest.github.io/js-framework-benchmark/current.html\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003eDemo:\u003c/strong\u003e\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003eTodoMVC App: \u003ca href=\"/nextapps-de/mikado/blob/master/examples/todomvc\"\u003eProject\u003c/a\u003e / \u003ca href=\"/nextapps-de/mikado/blob/master/examples/todomvc/src\"\u003eSource\u003c/a\u003e / \u003ca href=\"https://raw.githack.com/nextapps-de/mikado/master/examples/todomvc/dist/index.html\" rel=\"nofollow\"\u003eDemo\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eSupport this Project\u003c/h2\u003e\u003ca id=\"user-content-support-this-project\" class=\"anchor\" aria-label=\"Permalink: Support this Project\" href=\"#support-this-project\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eMikado was getting so much positive feedback and also feature requests. Help keeping Mikado active by a personal donation.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca href=\"https://opencollective.com/mikado/donate\" rel=\"nofollow\"\u003e\u003cimg src=\"/nextapps-de/mikado/raw/master/doc/opencollective.png\" height=\"32\" alt=\"Donate using Open Collective\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/sponsors/ts-thomas/\"\u003e\u003cimg src=\"/nextapps-de/mikado/raw/master/doc/github-sponsors.png\" height=\"32\" alt=\"Donate using Github Sponsors\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\n\u003ca href=\"https://liberapay.com/ts-thomas/donate\" rel=\"nofollow\"\u003e\u003cimg src=\"/nextapps-de/mikado/raw/master/doc/liberapay.svg\" height=\"32\" alt=\"Donate using Liberapay\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.patreon.com/user?u=96245532\" rel=\"nofollow\"\u003e\u003cimg src=\"/nextapps-de/mikado/raw/master/doc/patron.png\" height=\"32\" alt=\"Donate using Patreon\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\n\u003ca href=\"https://salt.bountysource.com/teams/ts-thomas\" rel=\"nofollow\"\u003e\u003cimg src=\"/nextapps-de/mikado/raw/master/doc/bountysource.svg\" height=\"32\" alt=\"Donate using Bountysource\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.paypal.com/donate/?hosted_button_id=GEVR88FC9BWRW\" rel=\"nofollow\"\u003e\u003cimg src=\"/nextapps-de/mikado/raw/master/doc/paypal.png\" height=\"32\" alt=\"Donate using PayPal\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eTable of contents\u003c/h2\u003e\u003ca id=\"user-content-table-of-contents\" class=\"anchor\" aria-label=\"Permalink: Table of contents\" href=\"#table-of-contents\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eRendering has great \u003cstrong\u003eimpact\u003c/strong\u003e on application performance, especially \u003cstrong\u003eon mobile devices\u003c/strong\u003e. Mikado takes \u003ca href=\"#benchmark\"\u003etemplating performance\u003c/a\u003e to a new level and provides you \u003cstrong\u003ekeyed\u003c/strong\u003e, \u003cstrong\u003enon-keyed\u003c/strong\u003e recycling and also \u003cstrong\u003ereactive paradigm\u003c/strong\u003e switchable out of the box.\nAdditionally, Mikado provides a \u003cstrong\u003eserver-side-rendering\u003c/strong\u003e approach on a top-notch performance level along full support for \u003cstrong\u003ehydration\u003c/strong\u003e to inject templates progressively within the client's runtime.\nServer and client are sharing the same template definitions simply written in \u003cstrong\u003eHTML-like markup\u003c/strong\u003e.\nThe server side approach will also come with the \u003cstrong\u003efastest middleware render engine for Express\u003c/strong\u003e you can get today.\nPacked with a smart routing feature for event delegation and full support for web components by using the Shadow DOM, Mikado gives you everything you'll need to build \u003ca href=\"#concept\"\u003erealtime applications\u003c/a\u003e on a cutting edge performance level.\u003c/p\u003e\n\u003col dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"#get-latest\"\u003eGet Latest\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#feature-comparison\"\u003eFeature Comparison: Mikado Light\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#benchmark\"\u003eBenchmark Ranking (Rendering Performance)\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#api\"\u003eAPI Overview\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#options\"\u003eMikado Options\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#get-started\"\u003eGetting Started (Basic Example)\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#conventions\"\u003eRules and Conventions\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#advanced_example\"\u003eAdvanced Example\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#compiler\"\u003eTemplate Compiler\u003c/a\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"#identifier\"\u003eReserved Keywords\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#compiler-flags\"\u003eCompiler Flags\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#auto-naming\"\u003eAuto Naming\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#prebuilt-cache\"\u003ePrebuilt Cache\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#watcher\"\u003eWatcher (Auto-Compile)\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#runtime-compiler\"\u003eRuntime Compiler\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#expressions\"\u003eTemplate Expressions\u003c/a\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"#insertion\"\u003eValue Insertion\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#inline-js\"\u003eJS Inline Code\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#truthy\"\u003eTruthy Values\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#escape-ssr\"\u003eEscape Values (SSR)\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#html\"\u003eHTML Contents\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#sanitize\"\u003eSanitizer\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#bindings\"\u003eReactive Bindings\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#event\"\u003eRouting \u0026amp; Event Delegation\u003c/a\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"#bubbling\"\u003eEvent Bubbling\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#event-cache\"\u003eEvent Cache\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#view.listen\"\u003eExplicit Register Event Delegation\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#event-control\"\u003eControl Native Events\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#view.dispatch\"\u003eDispatch Routes\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003eRecycling Modes:\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"#non-keyed\"\u003eNon-Keyed Recycling\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#keyed\"\u003eKeyed Recycling\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003eViews:\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"#mikado.new\"\u003eCreate Views\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#view.mount\"\u003eMount Views\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#view.destroy\"\u003eDestroy Views\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#view.render\"\u003eRender Templates\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#view.create\"\u003eCreate Components\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#modify-views\"\u003eModify Views\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#helpers\"\u003eCommon View Helpers\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#manipulate\"\u003eManipulate Views\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#cache\"\u003eDOM State Caching\u003c/a\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"#cache-concept\"\u003eState Caching Concept\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#cache-helpers\"\u003eDOM Cache Helpers\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#view.state\"\u003eView State\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#callbacks\"\u003eCustom Callbacks\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#static\"\u003eStatic Templates\u003c/a\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"#mikado.once\"\u003eOnce (One-time rendering)\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#ssr\"\u003eServer-Side Rendering (SSR)\u003c/a\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"#ssr-exclusive\"\u003eSSR-exclusive Mode\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#express\"\u003eExpress Render Engine\u003c/a\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"#express-options\"\u003eCustom Options\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#express-render\"\u003eRender Views\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003eTemplate Features:\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"#expressions\"\u003eTemplate Expressions\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#includes\"\u003eIncludes\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#loop-partials\"\u003eLoop Partials\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#inline-loops\"\u003eInline Loops\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#conditional\"\u003eConditional Template Structures\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003eReactive Features:\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"#proxy\"\u003eReactive Properties (Proxy)\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#observable\"\u003eReactive Array (Virtual NodeList)\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#limitations\"\u003eLimitations\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#strict-proxy\"\u003eStrict-Proxy Mode\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#array.transaction\"\u003eTransactions\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#pools\"\u003eTemplate Pools\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#hydration\"\u003eHydration\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#shadow\"\u003eWeb Components (Shadow DOM)\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#full-template\"\u003eFull Template Example\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#best-practices\"\u003eBest Practices\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#concept\"\u003eConcept of Shared Components\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#builds\"\u003eCustom Builds\u003c/a\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"#build-flags\"\u003eSupported Build Flags\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-get-latest\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eGet Latest\u003c/h2\u003e\u003ca id=\"user-content-get-latest\" class=\"anchor\" aria-label=\"Permalink: Get Latest\" href=\"#get-latest\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eDo not use the \"src\" folder of this repo. It isn't meant to be used directly, instead it needs compilation. You can easily perform a \u003ca href=\"#builds\"\u003ecustom build\u003c/a\u003e, but don't use the source folder for production. You will need at least any kind of compiler which resolve the compiler flags within the code. The \"dist\" folder is containing every version which you probably need including unminified modules.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cmarkdown-accessiblity-table\u003e\u003ctable\u003e\n \u003ctbody\u003e\u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003eBuild\u003c/td\u003e\n \u003ctd\u003eFile\u003c/td\u003e\n \u003ctd\u003eCDN\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003emikado.bundle.debug.js\u003c/td\u003e\n \u003ctd\u003e\u003ca href=\"https://github.com/nextapps-de/mikado/raw/0.8.4/dist/mikado.bundle.debug.js\"\u003eDownload\u003c/a\u003e\u003c/td\u003e\n \u003ctd\u003e\u003ca href=\"https://rawcdn.githack.com/nextapps-de/mikado/0.8.4/dist/mikado.bundle.debug.js\" rel=\"nofollow\"\u003ehttps://rawcdn.githack.com/nextapps-de/mikado/0.8.4/dist/mikado.bundle.debug.js\u003c/a\u003e\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003emikado.bundle.min.js\u003c/td\u003e\n \u003ctd\u003e\u003ca href=\"https://github.com/nextapps-de/mikado/raw/0.8.4/dist/mikado.bundle.min.js\"\u003eDownload\u003c/a\u003e\u003c/td\u003e\n \u003ctd\u003e\u003ca href=\"https://rawcdn.githack.com/nextapps-de/mikado/0.8.4/dist/mikado.bundle.min.js\" rel=\"nofollow\"\u003ehttps://rawcdn.githack.com/nextapps-de/mikado/0.8.4/dist/mikado.bundle.min.js\u003c/a\u003e\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003emikado.bundle.module.debug.js\u003c/td\u003e\n \u003ctd\u003e\u003ca href=\"https://github.com/nextapps-de/mikado/raw/0.8.4/dist/mikado.bundle.module.debug.js\"\u003eDownload\u003c/a\u003e\u003c/td\u003e\n \u003ctd\u003e\u003ca href=\"https://rawcdn.githack.com/nextapps-de/mikado/0.8.4/dist/mikado.bundle.module.debug.js\" rel=\"nofollow\"\u003ehttps://rawcdn.githack.com/nextapps-de/mikado/0.8.4/dist/mikado.bundle.module.debug.js\u003c/a\u003e\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003emikado.bundle.module.min.js\u003c/td\u003e\n \u003ctd\u003e\u003ca href=\"https://github.com/nextapps-de/mikado/raw/0.8.4/dist/mikado.bundle.module.min.js\"\u003eDownload\u003c/a\u003e\u003c/td\u003e\n \u003ctd\u003e\u003ca href=\"https://rawcdn.githack.com/nextapps-de/mikado/0.8.4/dist/mikado.bundle.module.min.js\" rel=\"nofollow\"\u003ehttps://rawcdn.githack.com/nextapps-de/mikado/0.8.4/dist/mikado.bundle.module.min.js\u003c/a\u003e\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003emikado.es5.debug.js\u003c/td\u003e\n \u003ctd\u003e\u003ca href=\"https://github.com/nextapps-de/mikado/raw/0.8.4/dist/mikado.es5.debug.js\"\u003eDownload\u003c/a\u003e\u003c/td\u003e\n \u003ctd\u003e\u003ca href=\"https://rawcdn.githack.com/nextapps-de/mikado/0.8.4/dist/mikado.es5.debug.js\" rel=\"nofollow\"\u003ehttps://rawcdn.githack.com/nextapps-de/mikado/0.8.4/dist/mikado.es5.debug.js\u003c/a\u003e\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003emikado.es5.min.js\u003c/td\u003e\n \u003ctd\u003e\u003ca href=\"https://github.com/nextapps-de/mikado/raw/0.8.4/dist/mikado.es5.min.js\"\u003eDownload\u003c/a\u003e\u003c/td\u003e\n \u003ctd\u003e\u003ca href=\"https://rawcdn.githack.com/nextapps-de/mikado/0.8.4/dist/mikado.es5.min.js\" rel=\"nofollow\"\u003ehttps://rawcdn.githack.com/nextapps-de/mikado/0.8.4/dist/mikado.es5.min.js\u003c/a\u003e\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003emikado.light.debug.js\u003c/td\u003e\n \u003ctd\u003e\u003ca href=\"https://github.com/nextapps-de/mikado/raw/0.8.4/dist/mikado.light.debug.js\"\u003eDownload\u003c/a\u003e\u003c/td\u003e\n \u003ctd\u003e\u003ca href=\"https://rawcdn.githack.com/nextapps-de/mikado/0.8.4/dist/mikado.light.debug.js\" rel=\"nofollow\"\u003ehttps://rawcdn.githack.com/nextapps-de/mikado/0.8.4/dist/mikado.light.debug.js\u003c/a\u003e\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003emikado.light.min.js\u003c/td\u003e\n \u003ctd\u003e\u003ca href=\"https://github.com/nextapps-de/mikado/raw/0.8.4/dist/mikado.light.min.js\"\u003eDownload\u003c/a\u003e\u003c/td\u003e\n \u003ctd\u003e\u003ca href=\"https://rawcdn.githack.com/nextapps-de/mikado/0.8.4/dist/mikado.light.min.js\" rel=\"nofollow\"\u003ehttps://rawcdn.githack.com/nextapps-de/mikado/0.8.4/dist/mikado.light.min.js\u003c/a\u003e\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003emikado.light.module.debug.js\u003c/td\u003e\n \u003ctd\u003e\u003ca href=\"https://github.com/nextapps-de/mikado/raw/0.8.4/dist/mikado.light.module.debug.js\"\u003eDownload\u003c/a\u003e\u003c/td\u003e\n \u003ctd\u003e\u003ca href=\"https://rawcdn.githack.com/nextapps-de/mikado/0.8.4/dist/mikado.light.module.debug.js\" rel=\"nofollow\"\u003ehttps://rawcdn.githack.com/nextapps-de/mikado/0.8.4/dist/mikado.light.module.debug.js\u003c/a\u003e\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003emikado.light.module.min.js\u003c/td\u003e\n \u003ctd\u003e\u003ca href=\"https://github.com/nextapps-de/mikado/raw/0.8.4/dist/mikado.light.module.min.js\"\u003eDownload\u003c/a\u003e\u003c/td\u003e\n \u003ctd\u003e\u003ca href=\"https://rawcdn.githack.com/nextapps-de/mikado/0.8.4/dist/mikado.light.module.min.js\" rel=\"nofollow\"\u003ehttps://rawcdn.githack.com/nextapps-de/mikado/0.8.4/dist/mikado.light.module.min.js\u003c/a\u003e\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003eJavascript Modules\u003c/td\u003e\n \u003ctd\u003e\u003ca href=\"https://github.com/nextapps-de/mikado/raw/0.8.4/dist/module/\"\u003eDownload\u003c/a\u003e\u003c/td\u003e\n \u003ctd\u003e\u003ca href=\"https://github.com/nextapps-de/mikado/tree/0.8.4/dist/module\"\u003ehttps://github.com/nextapps-de/mikado/tree/0.8.4/dist/module\u003c/a\u003e\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003eJavascript Modules (Minified)\u003c/td\u003e\n \u003ctd\u003e\u003ca href=\"https://github.com/nextapps-de/mikado/raw/0.8.4/dist/module-min/\"\u003eDownload\u003c/a\u003e\u003c/td\u003e\n \u003ctd\u003e\u003ca href=\"https://github.com/nextapps-de/mikado/tree/0.8.4/dist/module-min\"\u003ehttps://github.com/nextapps-de/mikado/tree/0.8.4/dist/module-min\u003c/a\u003e\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003eJavascript Modules (Debug)\u003c/td\u003e\n \u003ctd\u003e\u003ca href=\"https://github.com/nextapps-de/mikado/raw/0.8.4/dist/module-debug/\"\u003eDownload\u003c/a\u003e\u003c/td\u003e\n \u003ctd\u003e\u003ca href=\"https://github.com/nextapps-de/mikado/tree/0.8.4/dist/module-debug\"\u003ehttps://github.com/nextapps-de/mikado/tree/0.8.4/dist/module-debug\u003c/a\u003e\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003emikado.custom.js\u003c/td\u003e\n \u003ctd colspan=\"2\"\u003e\u003ca href=\"#builds\"\u003eRead more about \"Custom Build\"\u003c/a\u003e\u003c/td\u003e\n \u003c/tr\u003e\n\u003c/tbody\u003e\u003c/table\u003e\u003c/markdown-accessiblity-table\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eAll debug versions are providing debug information through the console and gives you helpful advices on certain situations.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eBundles\u003c/h3\u003e\u003ca id=\"user-content-bundles\" class=\"anchor\" aria-label=\"Permalink: Bundles\" href=\"#bundles\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eBundles export all their features as static functions to the public class namespace \"Mikado\" e.g. \u003ccode\u003eMikado.register()\u003c/code\u003e.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp dir=\"auto\"\u003eThe abbreviations used at the end of the filenames indicates:\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ccode\u003ebundle\u003c/code\u003e All features included, Mikado is available on \u003ccode\u003ewindow.Mikado\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003elight\u003c/code\u003e Only basic features are included, Mikado is available on \u003ccode\u003ewindow.Mikado\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003ees5\u003c/code\u003e bundle has support for EcmaScript5, Mikado is available on \u003ccode\u003ewindow.Mikado\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003emodule\u003c/code\u003e bundle is a Javascript module, Mikado is available by \u003ccode\u003eimport Mikado from \"./mikado.bundle.module.min.js\"\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003emin\u003c/code\u003e bundle is minified\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003edebug\u003c/code\u003e bundle has enabled debug mode (only for development purposes, do not use for production)\u003c/li\u003e\n\u003c/ul\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eModule\u003c/h3\u003e\u003ca id=\"user-content-module\" class=\"anchor\" aria-label=\"Permalink: Module\" href=\"#module\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eWhen using modules you can choose from 2 variants: \u003ccode\u003emikado.xxx.module.min.js\u003c/code\u003e has all features bundled on the public class namespace e.g. \u003ccode\u003eMikado.register()\u003c/code\u003e, whereas the folder \u003ccode\u003e/dist/module/\u003c/code\u003e export most of the features as functions which needs to be imported explicitly by \u003ccode\u003eimport { register } from \"./dist/module/mikado.js\"\u003c/code\u003e.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eAlso, for each variant there exist:\u003c/p\u003e\n\u003col dir=\"auto\"\u003e\n\u003cli\u003eA debug version for the development\u003c/li\u003e\n\u003cli\u003eA pre-compiled minified version for production\u003c/li\u003e\n\u003c/ol\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eBrowser\u003c/h3\u003e\u003ca id=\"user-content-browser\" class=\"anchor\" aria-label=\"Permalink: Browser\" href=\"#browser\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eLoad the bundle by a script tag:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;script src=\u0026quot;dist/mikado.bundle.min.js\u0026quot;\u0026gt;\u0026lt;/script\u0026gt;\n\u0026lt;script\u0026gt;\n // ... access Mikado\n\u0026lt;/script\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003esrc\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003edist/mikado.bundle.min.js\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-c\"\u003e// ... access Mikado\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eNPM\u003c/h3\u003e\u003ca id=\"user-content-npm\" class=\"anchor\" aria-label=\"Permalink: NPM\" href=\"#npm\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eInstall Mikado via NPM:\u003c/p\u003e\n\u003cdiv class=\"snippet-clipboard-content notranslate position-relative overflow-auto\" data-snippet-clipboard-copy-content=\"npm install mikado\"\u003e\u003cpre lang=\"npm\" class=\"notranslate\"\u003e\u003ccode\u003enpm install mikado\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThe \u003cstrong\u003e\u003cem\u003edist\u003c/em\u003e\u003c/strong\u003e folder are located in \u003ccode\u003enode_modules/mikado/dist/\u003c/code\u003e.\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eJavascript Modules\u003c/h3\u003e\u003ca id=\"user-content-javascript-modules\" class=\"anchor\" aria-label=\"Permalink: Javascript Modules\" href=\"#javascript-modules\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eUse the bundled version exported as a module:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;script type=\u0026quot;module\u0026quot;\u0026gt;\n import Mikado from \u0026quot;./dist/mikado.bundle.module.min.js\u0026quot;;\n // bundled access by e.g. Mikado.register()\n\u0026lt;/script\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003etype\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003emodule\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-k\"\u003eimport\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efrom\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"./dist/mikado.bundle.module.min.js\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n \u003cspan class=\"pl-c\"\u003e// bundled access by e.g. Mikado.register()\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eAlso, pre-compiled non-bundled production-ready modules are located in \u003ccode\u003edist/module-min/\u003c/code\u003e.\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;script type=\u0026quot;module\u0026quot;\u0026gt;\n import Mikado, { register } from \u0026quot;./dist/module-min/mikado.js\u0026quot;;\n // bundled access by Mikado.register isn't available\n // requires direct access by e.g. register()\n\u0026lt;/script\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003etype\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003emodule\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-k\"\u003eimport\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eregister\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efrom\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"./dist/module-min/mikado.js\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n \u003cspan class=\"pl-c\"\u003e// bundled access by Mikado.register isn't available\u003c/span\u003e\n \u003cspan class=\"pl-c\"\u003e// requires direct access by e.g. register()\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eYou can also load modules via CDN:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;script type=\u0026quot;module\u0026quot;\u0026gt;\n import Mikado from \u0026quot;https://unpkg.com/mikado@0.8.404/dist/module/mikado.js\u0026quot;;\n\u0026lt;/script\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003etype\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003emodule\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-k\"\u003eimport\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efrom\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"https://unpkg.com/mikado@0.8.404/dist/module/mikado.js\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eLoading modules via CDN commonly expects to build/bundle your app properly before distribution. Do not load them via CDN in production.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-feature-comparison\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eFeature Comparison \"Bundle vs. Light\"\u003c/h3\u003e\u003ca id=\"user-content-feature-comparison-bundle-vs-light\" class=\"anchor\" aria-label=\"Permalink: Feature Comparison \u0026quot;Bundle vs. Light\u0026quot;\" href=\"#feature-comparison-bundle-vs-light\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cmarkdown-accessiblity-table\u003e\u003ctable\u003e\n \u003ctbody\u003e\u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003eFeature\u003c/td\u003e\n \u003ctd\u003emikado.bundle.js\u003c/td\u003e\n \u003ctd\u003emikado.light.js\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\n Template Render Engine\n \u003c/td\u003e\n \u003ctd\u003e✓\u003c/td\u003e\n \u003ctd\u003e✓\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\n \u003ca href=\"#cache\"\u003eDOM State Caching\u003c/a\u003e\n \u003c/td\u003e\n \u003ctd\u003e✓\u003c/td\u003e\n \u003ctd\u003e✓\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\n \u003ca href=\"#pool\"\u003eShared Pools / Live Pools\u003c/a\u003e\n \u003c/td\u003e\n \u003ctd\u003e✓\u003c/td\u003e\n \u003ctd\u003e✓\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\n \u003ca href=\"#keyed\"\u003eKeyed Recycle\u003c/a\u003e\n \u003c/td\u003e\n \u003ctd\u003e✓\u003c/td\u003e\n \u003ctd\u003e✓\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\n \u003ca href=\"#recycle\"\u003eNon-keyed Recycle\u003c/a\u003e\n \u003c/td\u003e\n \u003ctd\u003e✓\u003c/td\u003e\n \u003ctd\u003e✓\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\n \u003ca href=\"#reconcile\"\u003eReconcile (Diffing)\u003c/a\u003e\n \u003c/td\u003e\n \u003ctd\u003e✓\u003c/td\u003e\n \u003ctd\u003e✓\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\n \u003ca href=\"#hydration\"\u003eHydration\u003c/a\u003e\n \u003c/td\u003e\n \u003ctd\u003e✓\u003c/td\u003e\n \u003ctd\u003e✓\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\n \u003ca href=\"#expression\"\u003eTemplate Expressions\u003c/a\u003e\n \u003c/td\u003e\n \u003ctd\u003e✓\u003c/td\u003e\n \u003ctd\u003e✓\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\n \u003ca href=\"#conditional\"\u003eConditional Template Structures\u003c/a\u003e\n \u003c/td\u003e\n \u003ctd\u003e✓\u003c/td\u003e\n \u003ctd\u003e✓\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\n \u003ca href=\"#include\"\u003eIncludes/Partials/Loops\u003c/a\u003e\n \u003c/td\u003e\n \u003ctd\u003e✓\u003c/td\u003e\n \u003ctd\u003e✓\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\n \u003ca href=\"#shadow\"\u003eShadow DOM\u003c/a\u003e\n \u003c/td\u003e\n \u003ctd\u003e✓\u003c/td\u003e\n \u003ctd\u003e✓\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\n \u003ca href=\"#shadow\"\u003eWeb Components\u003c/a\u003e\n \u003c/td\u003e\n \u003ctd\u003e✓\u003c/td\u003e\n \u003ctd\u003e-\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\n \u003ca href=\"#runtime-compiler\"\u003eRuntime Compiler\u003c/a\u003e\n \u003c/td\u003e\n \u003ctd\u003e✓\u003c/td\u003e\n \u003ctd\u003e-\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\n \u003ca href=\"#event\"\u003eEvent Delegation + Routes\u003c/a\u003e\n \u003c/td\u003e\n \u003ctd\u003e✓\u003c/td\u003e\n \u003ctd\u003e-\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\n \u003ca href=\"#proxy\"\u003eReactive (Proxy, Observer)\u003c/a\u003e\n \u003c/td\u003e\n \u003ctd\u003e✓\u003c/td\u003e\n \u003ctd\u003e-\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\n \u003ca href=\"#async\"\u003eAsynchronous Render\u003c/a\u003e\n \u003c/td\u003e\n \u003ctd\u003e✓\u003c/td\u003e\n \u003ctd\u003e-\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\n \u003ca href=\"#manipulate\"\u003eView Manipulation Helpers\u003c/a\u003e\n \u003c/td\u003e\n \u003ctd\u003e✓\u003c/td\u003e\n \u003ctd\u003e-\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\n \u003ca href=\"#helper\"\u003eDOM Cache Helpers\u003c/a\u003e\n \u003c/td\u003e\n \u003ctd\u003e✓\u003c/td\u003e\n \u003ctd\u003e-\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003eFile Size (gzip)\u003c/td\u003e\n \u003ctd\u003e9.3 kb\u003c/td\u003e\n \u003ctd\u003e3.7 kb\u003c/td\u003e\n \u003c/tr\u003e\n\u003c/tbody\u003e\u003c/table\u003e\u003c/markdown-accessiblity-table\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-benchmark\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eBenchmark Ranking (Rendering Performance)\u003c/h2\u003e\u003ca id=\"user-content-benchmark-ranking-rendering-performance\" class=\"anchor\" aria-label=\"Permalink: Benchmark Ranking (Rendering Performance)\" href=\"#benchmark-ranking-rendering-performance\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eRun the benchmark (non-keyed recycle):\u003cbr\u003e\n\u003ca href=\"https://raw.githack.com/nextapps-de/mikado/bench/\" rel=\"nofollow\"\u003e\u003c/a\u003e\u003ca href=\"https://raw.githack.com/nextapps-de/mikado/bench/\" rel=\"nofollow\"\u003ehttps://raw.githack.com/nextapps-de/mikado/bench/\u003c/a\u003e\u003cbr\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eRun the benchmark (keyed recycle):\u003cbr\u003e\n\u003ca href=\"https://raw.githack.com/nextapps-de/mikado/bench/#keyed\" rel=\"nofollow\"\u003e\u003c/a\u003e\u003ca href=\"https://raw.githack.com/nextapps-de/mikado/bench/#keyed\" rel=\"nofollow\"\u003ehttps://raw.githack.com/nextapps-de/mikado/bench/#keyed\u003c/a\u003e\u003cbr\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eRun the benchmark (internal/data-driven):\u003cbr\u003e\n\u003ca href=\"https://raw.githack.com/nextapps-de/mikado/bench/#internal\" rel=\"nofollow\"\u003e\u003c/a\u003e\u003ca href=\"https://raw.githack.com/nextapps-de/mikado/bench/#internal\" rel=\"nofollow\"\u003ehttps://raw.githack.com/nextapps-de/mikado/bench/#internal\u003c/a\u003e\u003cbr\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eThe values represent operations per second, each benchmark task has to process a data array of 100 items. Higher values are better, except for memory (the sum of allocated memory during the whole test).\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eKeyed Test Results\u003c/h4\u003e\u003ca id=\"user-content-keyed-test-results\" class=\"anchor\" aria-label=\"Permalink: Keyed Test Results\" href=\"#keyed-test-results\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cmarkdown-accessiblity-table\u003e\u003ctable\u003e\n \u003ctbody\u003e\u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003csub\u003eLibrary\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"center\"\u003e\u003csub\u003eRAM\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"center\"\u003e\u003csub\u003eCreate\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"center\"\u003e\u003csub\u003eReplace\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"center\"\u003e\u003csub\u003eUpdate\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"center\"\u003e\u003csub\u003eOrder\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"center\"\u003e\u003csub\u003eRepaint\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"center\"\u003e\u003csub\u003eAdd\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"center\"\u003e\u003csub\u003eRemove\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"center\"\u003e\u003csub\u003eToggle\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"center\"\u003e\u003csub\u003eClear\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"center\"\u003e\u003csub\u003eScore\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"center\"\u003e\u003csub\u003eIndex\u003c/sub\u003e\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003csub\u003emikado\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e55\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e3589\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e2780\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e199816\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e134262\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e536052\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e93062\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e93058\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e92151\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e51219\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003cb\u003e\u003csub\u003e3202\u003c/sub\u003e\u003c/b\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003cb\u003e\u003csub\u003e92\u003c/sub\u003e\u003c/b\u003e\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003csub\u003esolid\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e44\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e2438\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e2230\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e20362\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e13101\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e34436\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e4595\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e24891\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e7858\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e70825\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003cb\u003e\u003csub\u003e312\u003c/sub\u003e\u003c/b\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003cb\u003e\u003csub\u003e37\u003c/sub\u003e\u003c/b\u003e\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003csub\u003einferno\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e46\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e2551\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e2151\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e14722\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e13900\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e16796\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e4780\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e20727\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e7724\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e54176\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003cb\u003e\u003csub\u003e238\u003c/sub\u003e\u003c/b\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003cb\u003e\u003csub\u003e34\u003c/sub\u003e\u003c/b\u003e\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003csub\u003emithril\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e45\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e1672\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e1505\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e15406\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e13868\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e16638\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e3599\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e21109\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e5653\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e41525\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003cb\u003e\u003csub\u003e223\u003c/sub\u003e\u003c/b\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003cb\u003e\u003csub\u003e28\u003c/sub\u003e\u003c/b\u003e\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003csub\u003estage0\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e56\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e2030\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e2446\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e11213\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e9749\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e11033\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e4427\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e18083\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e7209\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e90434\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003cb\u003e\u003csub\u003e199\u003c/sub\u003e\u003c/b\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003cb\u003e\u003csub\u003e35\u003c/sub\u003e\u003c/b\u003e\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003csub\u003eredom\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e81\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e1517\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e1421\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e10242\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e9614\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e10870\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e2857\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e16062\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e4875\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e28075\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003cb\u003e\u003csub\u003e160\u003c/sub\u003e\u003c/b\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003cb\u003e\u003csub\u003e22\u003c/sub\u003e\u003c/b\u003e\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003csub\u003edomc\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e124\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e3600\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e3424\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e3437\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e3472\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e3512\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e3592\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e6670\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e4540\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e100302\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003cb\u003e\u003csub\u003e120\u003c/sub\u003e\u003c/b\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003cb\u003e\u003csub\u003e38\u003c/sub\u003e\u003c/b\u003e\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003csub\u003einnerhtml\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e67\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e2791\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e2676\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e2471\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e2823\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e2799\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e2943\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e5752\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e3901\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e103405\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003cb\u003e\u003csub\u003e105\u003c/sub\u003e\u003c/b\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003cb\u003e\u003csub\u003e35\u003c/sub\u003e\u003c/b\u003e\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003csub\u003esurplus\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e92\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e2969\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e2577\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e2281\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e2386\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e2379\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e2285\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e4197\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e3023\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e86916\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003cb\u003e\u003csub\u003e91\u003c/sub\u003e\u003c/b\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003cb\u003e\u003csub\u003e32\u003c/sub\u003e\u003c/b\u003e\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003csub\u003edoohtml\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e71\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e2397\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e2308\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e2208\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e2208\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e2229\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e2275\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e4285\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e2945\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e63162\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003cb\u003e\u003csub\u003e82\u003c/sub\u003e\u003c/b\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003cb\u003e\u003csub\u003e29\u003c/sub\u003e\u003c/b\u003e\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003csub\u003esinuous\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e151\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e2038\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e2112\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e2454\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e2459\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e2461\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e2506\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e4820\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e3276\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e59556\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003cb\u003e\u003csub\u003e81\u003c/sub\u003e\u003c/b\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003cb\u003e\u003csub\u003e25\u003c/sub\u003e\u003c/b\u003e\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003csub\u003ejquery\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e103\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e2195\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e1919\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e1893\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e2092\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e2093\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e2084\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e3903\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e2594\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e19220\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003cb\u003e\u003csub\u003e66\u003c/sub\u003e\u003c/b\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003cb\u003e\u003csub\u003e21\u003c/sub\u003e\u003c/b\u003e\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003csub\u003elit-html\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e199\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e1410\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e1329\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e1349\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e1351\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e1333\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e1393\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e2415\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e1764\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e20837\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003cb\u003e\u003csub\u003e46\u003c/sub\u003e\u003c/b\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003cb\u003e\u003csub\u003e15\u003c/sub\u003e\u003c/b\u003e\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003csub\u003eractive\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e1870\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e739\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e672\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e690\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e686\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e691\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e725\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e1247\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e917\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e7394\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003cb\u003e\u003csub\u003e22\u003c/sub\u003e\u003c/b\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003cb\u003e\u003csub\u003e7\u003c/sub\u003e\u003c/b\u003e\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003csub\u003eknockout\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e1081\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e399\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e289\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e291\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e291\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e280\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e355\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e524\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e429\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003csub\u003e3424\u003c/sub\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003cb\u003e\u003csub\u003e12\u003c/sub\u003e\u003c/b\u003e\u003c/td\u003e\n \u003ctd align=\"right\"\u003e\u003cb\u003e\u003csub\u003e4\u003c/sub\u003e\u003c/b\u003e\u003c/td\u003e\n \u003c/tr\u003e\n\u003c/tbody\u003e\u003c/table\u003e\u003c/markdown-accessiblity-table\u003e\n\u003cp dir=\"auto\"\u003eThe \u003cstrong\u003e\u003cem\u003eindex\u003c/em\u003e\u003c/strong\u003e is a statistic rank having a maximum possible value of 100, this requires a library to be the best in each test category (regardless how much better).\nThe \u003cstrong\u003e\u003cem\u003escore\u003c/em\u003e\u003c/strong\u003e value is based on median factorization, here a score of 100 represents the statistical midfield.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-api\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eAPI Overview\u003c/h2\u003e\u003ca id=\"user-content-api-overview\" class=\"anchor\" aria-label=\"Permalink: API Overview\" href=\"#api-overview\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eMost of these methods are optional, you can just use \u003cstrong\u003e\u003cem\u003eview.render(data)\u003c/em\u003e\u003c/strong\u003e to apply all changes automatically.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp dir=\"auto\"\u003eConstructor:\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003enew \u003ca href=\"#mikado.new\"\u003e\u003cstrong\u003eMikado\u003c/strong\u003e(template, \u0026lt;options\u0026gt;)\u003c/a\u003e : \u003cem\u003eview\u003c/em\u003e\u003c/li\u003e\n\u003cli\u003enew Mikado.\u003ca href=\"#observable\"\u003e\u003cstrong\u003eArray\u003c/strong\u003e(array)\u003c/a\u003e : \u003cem\u003eobservable\u003c/em\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003eInstance properties:\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003eview.\u003ca href=\"#view.name\"\u003e\u003cstrong\u003ename\u003c/strong\u003e\u003c/a\u003e \u003cem\u003ereadonly\u003c/em\u003e\u003c/li\u003e\n\u003cli\u003eview.\u003ca href=\"#view.root\"\u003e\u003cstrong\u003eroot\u003c/strong\u003e\u003c/a\u003e \u003cem\u003ereadonly\u003c/em\u003e\u003c/li\u003e\n\u003cli\u003eview.\u003ca href=\"#view.length\"\u003e\u003cstrong\u003elength\u003c/strong\u003e\u003c/a\u003e \u003cem\u003ereadonly\u003c/em\u003e\u003c/li\u003e\n\u003cli\u003eview.\u003ca href=\"#view.state\"\u003e\u003cstrong\u003estate\u003c/strong\u003e\u003c/a\u003e \u003cem\u003ereadonly\u003c/em\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003eStatic properties (not included in mikado.light.js):\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003eMikado.\u003ca href=\"#mikado.eventCache\"\u003e\u003cstrong\u003eeventCache\u003c/strong\u003e\u003c/a\u003e : \u003cem\u003eboolean\u003c/em\u003e\u003c/li\u003e\n\u003cli\u003eMikado.\u003ca href=\"#mikado.eventBubble\"\u003e\u003cstrong\u003eeventBubble\u003c/strong\u003e\u003c/a\u003e : \u003cem\u003eboolean\u003c/em\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003eStatic methods:\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003eMikado.\u003ca href=\"#mikado.once\"\u003e\u003cstrong\u003eonce\u003c/strong\u003e(root, template, \u0026lt;data\u0026gt;, \u0026lt;state\u0026gt;, \u0026lt;callback\u0026gt;)\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eMikado.\u003ca href=\"#mikado.register\"\u003e\u003cstrong\u003eregister\u003c/strong\u003e(template, \u0026lt;options\u0026gt;)\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eMikado.\u003ca href=\"#mikado.unregister\"\u003e\u003cstrong\u003eunregister\u003c/strong\u003e(template)\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003eStatic methods (not included in mikado.light.js):\u003c/p\u003e\n\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003eMikado.\u003ca href=\"#mikado.route\"\u003e\u003cstrong\u003eroute\u003c/strong\u003e(name, function, \u0026lt;options\u0026gt;)\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eMikado.\u003ca href=\"#mikado.listen\"\u003e\u003cstrong\u003elisten\u003c/strong\u003e(event, \u0026lt;options\u0026gt;)\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eMikado.\u003ca href=\"#mikado.unlisten\"\u003e\u003cstrong\u003eunlisten\u003c/strong\u003e(event)\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eMikado.\u003ca href=\"#mikado.dispatch\"\u003e\u003cstrong\u003edispatch\u003c/strong\u003e(route, \u0026lt;target\u0026gt;, \u0026lt;event\u0026gt;)\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eMikado.\u003ca href=\"#mikado.escape\"\u003e\u003cstrong\u003eescape\u003c/strong\u003e(text)\u003c/a\u003e : \u003cem\u003estring\u003c/em\u003e\u003c/li\u003e\n\u003cli\u003eMikado.\u003ca href=\"#mikado.sanitize\"\u003e\u003cstrong\u003esanitize\u003c/strong\u003e(text)\u003c/a\u003e : \u003cem\u003estring\u003c/em\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003eInstance methods:\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003eview.\u003ca href=\"#view.mount\"\u003e\u003cstrong\u003emount\u003c/strong\u003e(root, \u0026lt;hydrate\u0026gt;)\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eview.\u003ca href=\"#view.render\"\u003e\u003cstrong\u003erender\u003c/strong\u003e(\u0026lt;data\u0026gt;, \u0026lt;state\u0026gt;, \u0026lt;callback\u0026gt;)\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eview.\u003ca href=\"#view.create\"\u003e\u003cstrong\u003ecreate\u003c/strong\u003e(data, \u0026lt;state\u0026gt;, \u0026lt;index\u0026gt;)\u003c/a\u003e : \u003cem\u003enode\u003c/em\u003e\u003c/li\u003e\n\u003cli\u003eview.\u003ca href=\"#view.add\"\u003e\u003cstrong\u003eadd\u003c/strong\u003e(data, \u0026lt;state\u0026gt;, \u0026lt;position\u0026gt;)\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eview.\u003ca href=\"#view.append\"\u003e\u003cstrong\u003eappend\u003c/strong\u003e(data, \u0026lt;state\u0026gt;, \u0026lt;position\u0026gt;)\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eview.\u003ca href=\"#view.update\"\u003e\u003cstrong\u003eupdate\u003c/strong\u003e(node | index, data, \u0026lt;state\u0026gt;)\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eview.\u003ca href=\"#view.replace\"\u003e\u003cstrong\u003ereplace\u003c/strong\u003e(node | index, data, \u0026lt;state\u0026gt;)\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eview.\u003ca href=\"#view.remove\"\u003e\u003cstrong\u003eremove\u003c/strong\u003e(node, \u0026lt;count\u0026gt;)\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eview.\u003ca href=\"#view.clear\"\u003e\u003cstrong\u003eclear\u003c/strong\u003e()\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eview.\u003ca href=\"#view.node\"\u003e\u003cstrong\u003enode\u003c/strong\u003e(index)\u003c/a\u003e : \u003cem\u003enode\u003c/em\u003e\u003c/li\u003e\n\u003cli\u003eview.\u003ca href=\"#view.index\"\u003e\u003cstrong\u003eindex\u003c/strong\u003e(node)\u003c/a\u003e : \u003cem\u003enumber\u003c/em\u003e\u003c/li\u003e\n\u003cli\u003eview.\u003ca href=\"#view.flush\"\u003e\u003cstrong\u003eflush\u003c/strong\u003e()\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eview.\u003ca href=\"#view.destroy\"\u003e\u003cstrong\u003edestroy\u003c/strong\u003e()\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003eInstance methods (not included in mikado.light.js):\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003eview.\u003ca href=\"#view.route\"\u003e\u003cstrong\u003eroute\u003c/strong\u003e(name, function, \u0026lt;options\u0026gt;)\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eview.\u003ca href=\"#view.listen\"\u003e\u003cstrong\u003elisten\u003c/strong\u003e(event, \u0026lt;options\u0026gt;)\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eview.\u003ca href=\"#view.unlisten\"\u003e\u003cstrong\u003eunlisten\u003c/strong\u003e(event)\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eview.\u003ca href=\"#view.dispatch\"\u003e\u003cstrong\u003edispatch\u003c/strong\u003e(name, \u0026lt;target\u0026gt;, \u0026lt;event\u0026gt;)\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003eView manipulation helpers (optional, not included in mikado.light.js):\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003eview.\u003ca href=\"#view.move\"\u003e\u003cstrong\u003emove\u003c/strong\u003e(node | index, position)\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eview.\u003ca href=\"#view.shift\"\u003e\u003cstrong\u003eshift\u003c/strong\u003e(node | index, offset)\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eview.\u003ca href=\"#view.up\"\u003e\u003cstrong\u003eup\u003c/strong\u003e(node | index)\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eview.\u003ca href=\"#view.down\"\u003e\u003cstrong\u003edown\u003c/strong\u003e(node | index)\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eview.\u003ca href=\"#view.first\"\u003e\u003cstrong\u003efirst\u003c/strong\u003e(node | index)\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eview.\u003ca href=\"#view.last\"\u003e\u003cstrong\u003elast\u003c/strong\u003e(node | index)\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eview.\u003ca href=\"#view.before\"\u003e\u003cstrong\u003ebefore\u003c/strong\u003e(node | index, node | index)\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eview.\u003ca href=\"#view.after\"\u003e\u003cstrong\u003eafter\u003c/strong\u003e(node | index, node | index)\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eview.\u003ca href=\"#view.swap\"\u003e\u003cstrong\u003eswap\u003c/strong\u003e(node | index, node | index)\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003eStatic DOM Cache helpers (optional, not included in mikado.light.js):\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\n\u003cp dir=\"auto\"\u003eMikado.\u003ca href=\"#Mikado.setText\"\u003e\u003cstrong\u003esetText\u003c/strong\u003e(node, text)\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp dir=\"auto\"\u003eMikado.\u003ca href=\"#Mikado.getText\"\u003e\u003cstrong\u003egetText\u003c/strong\u003e(node)\u003c/a\u003e : \u003cem\u003estring\u003c/em\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp dir=\"auto\"\u003eMikado.\u003ca href=\"#Mikado.setHtml\"\u003e\u003cstrong\u003esetHtml\u003c/strong\u003e(node, html)\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp dir=\"auto\"\u003eMikado.\u003ca href=\"#Mikado.getHtml\"\u003e\u003cstrong\u003egetHtml\u003c/strong\u003e(node)\u003c/a\u003e : \u003cem\u003estring\u003c/em\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp dir=\"auto\"\u003eMikado.\u003ca href=\"#Mikado.setClass\"\u003e\u003cstrong\u003esetClass\u003c/strong\u003e(node, [classnames])\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp dir=\"auto\"\u003eMikado.\u003ca href=\"#Mikado.getClass\"\u003e\u003cstrong\u003egetClass\u003c/strong\u003e(node)\u003c/a\u003e : \u003cem\u003e[string]\u003c/em\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp dir=\"auto\"\u003eMikado.\u003ca href=\"#Mikado.addClass\"\u003e\u003cstrong\u003eaddClass\u003c/strong\u003e(node, classname)\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp dir=\"auto\"\u003eMikado.\u003ca href=\"#Mikado.addClass\"\u003e\u003cstrong\u003eaddClass\u003c/strong\u003e(node, [classnames])\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp dir=\"auto\"\u003eMikado.\u003ca href=\"#Mikado.hasClass\"\u003e\u003cstrong\u003ehasClass\u003c/strong\u003e(node, classname)\u003c/a\u003e : \u003cem\u003eboolean\u003c/em\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp dir=\"auto\"\u003eMikado.\u003ca href=\"#Mikado.removeClass\"\u003e\u003cstrong\u003eremoveClass\u003c/strong\u003e(node, classname)\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp dir=\"auto\"\u003eMikado.\u003ca href=\"#Mikado.removeClass\"\u003e\u003cstrong\u003eremoveClasses\u003c/strong\u003e(node, [classnames])\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp dir=\"auto\"\u003eMikado.\u003ca href=\"#Mikado.toggleClass\"\u003e\u003cstrong\u003etoggleClass\u003c/strong\u003e(node, classname, \u0026lt;state\u0026gt;)\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp dir=\"auto\"\u003eMikado.\u003ca href=\"#Mikado.toggleClass\"\u003e\u003cstrong\u003etoggleClasses\u003c/strong\u003e(node, [classnames], \u0026lt;state\u0026gt;)\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp dir=\"auto\"\u003eMikado.\u003ca href=\"#Mikado.toggleClass\"\u003e\u003cstrong\u003etoggleClasses\u003c/strong\u003e(node, {classname: state})\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp dir=\"auto\"\u003eMikado.\u003ca href=\"#Mikado.setStyle\"\u003e\u003cstrong\u003esetStyle\u003c/strong\u003e(node, property, value)\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp dir=\"auto\"\u003eMikado.\u003ca href=\"#Mikado.setStyle\"\u003e\u003cstrong\u003esetStyles\u003c/strong\u003e(node, {property: value})\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp dir=\"auto\"\u003eMikado.\u003ca href=\"#Mikado.getStyle\"\u003e\u003cstrong\u003egetStyle\u003c/strong\u003e(node, property)\u003c/a\u003e : \u003cem\u003estring\u003c/em\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp dir=\"auto\"\u003eMikado.\u003ca href=\"#Mikado.setCss\"\u003e\u003cstrong\u003esetCss\u003c/strong\u003e(node, css)\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp dir=\"auto\"\u003eMikado.\u003ca href=\"#Mikado.getCss\"\u003e\u003cstrong\u003egetCss\u003c/strong\u003e(node)\u003c/a\u003e : \u003cem\u003estring\u003c/em\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp dir=\"auto\"\u003eMikado.\u003ca href=\"#Mikado.setAttribute\"\u003e\u003cstrong\u003esetAttribute\u003c/strong\u003e(node, attribute, value)\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp dir=\"auto\"\u003eMikado.\u003ca href=\"#Mikado.setAttribute\"\u003e\u003cstrong\u003esetAttribute\u003c/strong\u003e(node, {attribute: value})\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp dir=\"auto\"\u003eMikado.\u003ca href=\"#Mikado.getAttribute\"\u003e\u003cstrong\u003egetAttribute\u003c/strong\u003e(node, attribute)\u003c/a\u003e : \u003cem\u003estring | null\u003c/em\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp dir=\"auto\"\u003eMikado.\u003ca href=\"#Mikado.hasAttribute\"\u003e\u003cstrong\u003ehasAttribute\u003c/strong\u003e(node, attribute)\u003c/a\u003e : \u003cem\u003eboolean\u003c/em\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp dir=\"auto\"\u003eMikado.\u003ca href=\"#Mikado.removeAttribute\"\u003e\u003cstrong\u003eremoveAttribute\u003c/strong\u003e(node, attribute)\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp dir=\"auto\"\u003eMikado.\u003ca href=\"#Mikado.removeAttribute\"\u003e\u003cstrong\u003eremoveAttribute\u003c/strong\u003e(node, [attributes])\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003eObservable constructor (optional, not included in mikado.light.js):\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003enew \u003ca href=\"#mikado.array\"\u003e\u003cstrong\u003eMikado.Array\u003c/strong\u003e(\u0026lt;array\u0026gt;)\u003c/a\u003e : \u003cem\u003eobservable\u003c/em\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003eObservable array-like methods (optional, not included in mikado.light.js):\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003eobservable.\u003ca href=\"#array.length\"\u003e\u003cstrong\u003elength\u003c/strong\u003e\u003c/a\u003e : \u003cem\u003enumber\u003c/em\u003e\u003c/li\u003e\n\u003cli\u003eobservable.\u003ca href=\"#array.mount\"\u003e\u003cstrong\u003emount\u003c/strong\u003e(view)\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eobservable.\u003ca href=\"#array.concat\"\u003e\u003cstrong\u003econcat\u003c/strong\u003e([object])\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eobservable.\u003ca href=\"#array.push\"\u003e\u003cstrong\u003epush\u003c/strong\u003e(object)\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eobservable.\u003ca href=\"#array.splice\"\u003e\u003cstrong\u003esplice\u003c/strong\u003e\u003c/a\u003e : \u003cem\u003e[Object]\u003c/em\u003e\u003c/li\u003e\n\u003cli\u003eobservable.\u003ca href=\"#array.pop\"\u003e\u003cstrong\u003epop\u003c/strong\u003e\u003c/a\u003e : \u003cem\u003eObject\u003c/em\u003e\u003c/li\u003e\n\u003cli\u003eobservable.\u003ca href=\"#array.shift\"\u003e\u003cstrong\u003eshift\u003c/strong\u003e\u003c/a\u003e : \u003cem\u003eObject\u003c/em\u003e\u003c/li\u003e\n\u003cli\u003eobservable.\u003ca href=\"#array.unshift\"\u003e\u003cstrong\u003eunshift\u003c/strong\u003e(object)\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eobservable.\u003ca href=\"#array.slice\"\u003e\u003cstrong\u003eslice\u003c/strong\u003e(\u0026lt;index\u0026gt;, \u0026lt;count\u0026gt;)\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eobservable.\u003ca href=\"#array.set\"\u003e\u003cstrong\u003eset\u003c/strong\u003e([object])\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eobservable.\u003ca href=\"#array.sort\"\u003e\u003cstrong\u003esort\u003c/strong\u003e(fn)\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eobservable.\u003ca href=\"#array.reverse\"\u003e\u003cstrong\u003ereverse\u003c/strong\u003e()\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eobservable.\u003ca href=\"#array.swap\"\u003e\u003cstrong\u003eswap\u003c/strong\u003e(idx_a, idx_b)\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eobservable.\u003ca href=\"#array.map\"\u003e\u003cstrong\u003emap\u003c/strong\u003e(fn)\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eobservable.\u003ca href=\"#array.filter\"\u003e\u003cstrong\u003efilter\u003c/strong\u003e(fn)\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eobservable.\u003ca href=\"#array.indexOf\"\u003e\u003cstrong\u003eindexOf\u003c/strong\u003e(object)\u003c/a\u003e : \u003cem\u003enumber\u003c/em\u003e\u003c/li\u003e\n\u003cli\u003eobservable.\u003ca href=\"#array.lastIndexOf\"\u003e\u003cstrong\u003elastIndexOf\u003c/strong\u003e(object)\u003c/a\u003e : \u003cem\u003enumber\u003c/em\u003e\u003c/li\u003e\n\u003cli\u003eobservable.\u003ca href=\"#array.includes\"\u003e\u003cstrong\u003eincludes\u003c/strong\u003e(object)\u003c/a\u003e : \u003cem\u003eboolean\u003c/em\u003e\u003c/li\u003e\n\u003cli\u003eobservable.\u003ca href=\"#array.forEach\"\u003e\u003cstrong\u003eforEach\u003c/strong\u003e(fn)\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eobservable.\u003ca href=\"#array.transaction\"\u003e\u003cstrong\u003etransaction\u003c/strong\u003e(fn)\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-options\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eMikado Options\u003c/h2\u003e\u003ca id=\"user-content-mikado-options\" class=\"anchor\" aria-label=\"Permalink: Mikado Options\" href=\"#mikado-options\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eEach Mikado instance, also named includes/partials can have their own options. Except inline partials always inherits the same options from its parent. For this reason you should prefer named includes over inlining in certain situations.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cmarkdown-accessiblity-table\u003e\u003ctable\u003e\n \u003ctbody\u003e\u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003eOption\u003c/td\u003e\n \u003ctd\u003eDescription\u003c/td\u003e\n \u003ctd\u003eDefault\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003cb\u003eroot\u003c/b\u003e\u003cbr\u003e\u003cb\u003emount\u003c/b\u003e\u003c/td\u003e\n \u003ctd\u003eThe destination root element on where the template should be rendered.\u003c/td\u003e\n \u003ctd\u003enull\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003cb\u003etemplate\u003c/b\u003e\u003c/td\u003e\n \u003ctd\u003eYou will need to assign a template to the Mikado instance (or the name of the template when already registered/loaded).\u003c/td\u003e\n \u003ctd\u003e\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003cb\u003easync\u003c/b\u003e\u003c/td\u003e\n \u003ctd\u003ePerform the \u003ccode\u003e.render(data)\u003c/code\u003e task asynchronously and return a Promise.\u003c/td\u003e\n \u003ctd\u003efalse\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003cb\u003ecache\u003c/b\u003e\u003c/td\u003e\n \u003ctd\u003eEnable/disable \u003ca href=\"#cache\"\u003eDOM state caching\u003c/a\u003e which can greatly increase performance by a factor up to 25. When enabled make sure to use the \u003ca href=\"#cache\"\u003eDOM Cache Helpers\u003c/a\u003e when manipulating the DOM directly on properties which are also covered by template expressions.\u003c/td\u003e\n \u003ctd\u003efalse\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003cb\u003eobserve\u003c/b\u003e\u003c/td\u003e\n \u003ctd\u003eWhen using \u003ccode\u003eMikado.Array()\u003c/code\u003e for reactive approach you will need to pass this array instance to this property.\u003c/td\u003e\n \u003ctd\u003enull\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003cb\u003erecycle\u003c/b\u003e\u003c/td\u003e\n \u003ctd\u003eWhen enabled all dom elements which are already rendered will be re-used (recycled) for the next render task. This performs better, but it may produce issues when manual dom manipulations was made which are not fully covered by the template. Alternatively use the \u003ccode\u003ekeyed\u003c/code\u003e strategy, which limits recycling of components by matching the same data key (e.g. ID).\u003c/td\u003e\n \u003ctd\u003efalse\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003cb\u003estate\u003c/b\u003e\u003c/td\u003e\n \u003ctd\u003ePass an extern object which should be referenced as the \u003ccode\u003estate\u003c/code\u003e used within template expressions.\u003c/td\u003e\n \u003ctd\u003e{ }\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003cb\u003epool\u003c/b\u003e\u003c/td\u003e\n \u003ctd\u003ePooling can greatly enhance both the keyed and non-keyed recycle strategy.\u003c/td\u003e\n \u003ctd\u003efalse\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003cb\u003ehydrate\u003c/b\u003e\u003c/td\u003e\n \u003ctd\u003eProgressively enables hydration of already existing DOM structures when mounted. Make sure the existing DOM structure is based on the same template. When something differs from the given template schema, the hydration will stop and silently falls back into the default build strategy.\u003c/td\u003e\n \u003ctd\u003efalse\u003c/td\u003e\n \u003c/tr\u003e\n\u003c/tbody\u003e\u003c/table\u003e\u003c/markdown-accessiblity-table\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-get-started\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eGetting Started (Basic Example)\u003c/h2\u003e\u003ca id=\"user-content-getting-started-basic-example\" class=\"anchor\" aria-label=\"Permalink: Getting Started (Basic Example)\" href=\"#getting-started-basic-example\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThe Mikado Compiler requires Node.js to be installed. This is probably the simplest step in this guide.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eInstall Mikado from NPM (this will also install the compiler):\u003c/p\u003e\n\u003cdiv class=\"snippet-clipboard-content notranslate position-relative overflow-auto\" data-snippet-clipboard-copy-content=\"npm install mikado\"\u003e\u003cpre lang=\"npm\" class=\"notranslate\"\u003e\u003ccode\u003enpm install mikado\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eAssume there is an array of data items to render (or just one item as an object):\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"const data = [{\n username: \u0026quot;User A\u0026quot;,\n tweets: [\u0026quot;foo\u0026quot;, \u0026quot;bar\u0026quot;, \u0026quot;foobar\u0026quot;]\n},{\n username: \u0026quot;User B\u0026quot;,\n tweets: [\u0026quot;foo\u0026quot;, \u0026quot;bar\u0026quot;, \u0026quot;foobar\u0026quot;]\n},{\n username: \u0026quot;User C\u0026quot;,\n tweets: [\u0026quot;foo\u0026quot;, \u0026quot;bar\u0026quot;, \u0026quot;foobar\u0026quot;]\n}];\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003edata\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e[\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003eusername\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"User A\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003etweets\u003c/span\u003e: \u003cspan class=\"pl-kos\"\u003e[\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"foo\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"bar\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"foobar\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e]\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003eusername\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"User B\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003etweets\u003c/span\u003e: \u003cspan class=\"pl-kos\"\u003e[\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"foo\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"bar\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"foobar\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e]\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003eusername\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"User C\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003etweets\u003c/span\u003e: \u003cspan class=\"pl-kos\"\u003e[\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"foo\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"bar\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"foobar\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e]\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e]\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eAccordingly, a template \u003cstrong\u003e\u003cem\u003etpl/partial/user.html\u003c/em\u003e\u003c/strong\u003e might look like:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;table\u0026gt;\n \u0026lt;tr\u0026gt;\n \u0026lt;td\u0026gt;User:\u0026lt;/td\u0026gt;\n \u0026lt;td\u0026gt;{{ data.username }}\u0026lt;/td\u0026gt;\n \u0026lt;/tr\u0026gt;\n \u0026lt;tr\u0026gt;\n \u0026lt;td\u0026gt;Tweets:\u0026lt;/td\u0026gt;\n \u0026lt;td\u0026gt;{{ data.tweets.length }}\u0026lt;/td\u0026gt;\n \u0026lt;/tr\u0026gt;\n\u0026lt;/table\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etable\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eUser:\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{ data.username }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eTweets:\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{ data.tweets.length }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etable\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eCompile the template:\u003c/h3\u003e\u003ca id=\"user-content-compile-the-template\" class=\"anchor\" aria-label=\"Permalink: Compile the template:\" href=\"#compile-the-template\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eIn your console type this command line:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-batchfile notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"npx mikado-compile ./tpl/\"\u003e\u003cpre\u003enpx mikado-compile ./tpl/\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eLoad library and initialize template as ES6 modules:\u003c/h3\u003e\u003ca id=\"user-content-load-library-and-initialize-template-as-es6-modules\" class=\"anchor\" aria-label=\"Permalink: Load library and initialize template as ES6 modules:\" href=\"#load-library-and-initialize-template-as-es6-modules\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;script type=\u0026quot;module\u0026quot;\u0026gt;\n import Mikado from \u0026quot;mikado.bundle.module.min.js\u0026quot;;\n import template from \u0026quot;tpl/partial/user.js\u0026quot;;\n const view = new Mikado(template, {/* options */});\n\u0026lt;/script\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003etype\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003emodule\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-k\"\u003eimport\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efrom\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"mikado.bundle.module.min.js\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n \u003cspan class=\"pl-k\"\u003eimport\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003etemplate\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efrom\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"tpl/partial/user.js\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n \u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-k\"\u003enew\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003etemplate\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\u003cspan class=\"pl-c\"\u003e/* options */\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eLoad library and initialize template as legacy ES5:\u003c/h3\u003e\u003ca id=\"user-content-load-library-and-initialize-template-as-legacy-es5\" class=\"anchor\" aria-label=\"Permalink: Load library and initialize template as legacy ES5:\" href=\"#load-library-and-initialize-template-as-legacy-es5\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;script src=\u0026quot;mikado.bundle.min.js\u0026quot;\u0026gt;\u0026lt;/script\u0026gt;\n\u0026lt;script src=\u0026quot;tpl/partial/user.es5.js\u0026quot;\u0026gt;\u0026lt;/script\u0026gt;\n\u0026lt;script\u0026gt;\n var view = new Mikado(\u0026quot;user/list\u0026quot;, {/* options */});\n\u0026lt;/script\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003esrc\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003emikado.bundle.min.js\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003esrc\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etpl/partial/user.es5.js\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-k\"\u003evar\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-k\"\u003enew\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"user/list\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\u003cspan class=\"pl-c\"\u003e/* options */\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eThe name of a template inherits from its corresponding filename starting by the folder you've passed through the \u003ccode\u003e--src\u003c/code\u003e flag when calling the compiler.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp dir=\"auto\"\u003eAfter creation, you need mount the Mikado view instance to an HTML element as a destination for your render tasks:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.mount(HTMLelement);\nview.render(data);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003emount\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-v\"\u003eHTMLelement\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003erender\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003edata\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eYou can also chain methods:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"Mikado(template).mount(HTMLelement).render(data);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003etemplate\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003emount\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-v\"\u003eHTMLelement\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003erender\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003edata\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-conventions\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eRules and Conventions\u003c/h2\u003e\u003ca id=\"user-content-rules-and-conventions\" class=\"anchor\" aria-label=\"Permalink: Rules and Conventions\" href=\"#rules-and-conventions\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThere is just a single convention you always need to keep in mind:\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003eEvery template has to provide one single root element as the outer boundary.\u003c/strong\u003e\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp dir=\"auto\"\u003eInstead of doing this in a template:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;header\u0026gt;\n \u0026lt;nav\u0026gt;\u0026lt;/nav\u0026gt;\n\u0026lt;/header\u0026gt;\n\u0026lt;section\u0026gt;\n \u0026lt;p\u0026gt;\u0026lt;/p\u0026gt;\n\u0026lt;/section\u0026gt;\n\u0026lt;footer\u0026gt;\n \u0026lt;nav\u0026gt;\u0026lt;/nav\u0026gt;\n\u0026lt;/footer\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eheader\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003enav\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003enav\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eheader\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003esection\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003esection\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003efooter\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003enav\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003enav\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003efooter\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eWrapping everything into a single outer root element by doing this:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;main\u0026gt;\n \u0026lt;header\u0026gt;\n \u0026lt;nav\u0026gt;\u0026lt;/nav\u0026gt;\n \u0026lt;/header\u0026gt;\n \u0026lt;section\u0026gt;\n \u0026lt;p\u0026gt;\u0026lt;/p\u0026gt;\n \u0026lt;/section\u0026gt;\n \u0026lt;footer\u0026gt;\n \u0026lt;nav\u0026gt;\u0026lt;/nav\u0026gt;\n \u0026lt;/footer\u0026gt;\n\u0026lt;/main\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003emain\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eheader\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003enav\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003enav\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eheader\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003esection\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003esection\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003efooter\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003enav\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003enav\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003efooter\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003emain\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eYou can also use a \u003ccode\u003e\u0026lt;div\u0026gt;\u003c/code\u003e or any other element as a template root (also custom elements). The root element can also hold two special attributes \u003ccode\u003ekey\u003c/code\u003e and \u003ccode\u003ecache\u003c/code\u003e. We will come later to it.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-advanced_example\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eAdvanced Example\u003c/h2\u003e\u003ca id=\"user-content-advanced-example\" class=\"anchor\" aria-label=\"Permalink: Advanced Example\" href=\"#advanced-example\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eA bit more complex template:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;section id=\u0026quot;{{ data.id }}\u0026quot; class=\u0026quot;{{ this.state.theme }}\u0026quot; data-index=\u0026quot;{{ index }}\u0026quot;\u0026gt;\n {{@ var is_today = data.date === state.today }}\n \u0026lt;div class=\u0026quot;{{ data.class }} {{ is_today ? 'on' : 'off' }}\u0026quot;\u0026gt;\n \u0026lt;div class=\u0026quot;title\u0026quot; style=\u0026quot;font-size: 2em\u0026quot;\u0026gt;{{ data.title.toUpperCase() }}\u0026lt;/div\u0026gt;\n \u0026lt;div class=\u0026quot;content {{ index % 2 ? 'odd' : 'even' }}\u0026quot;\u0026gt;{{# data.content }}\u0026lt;/div\u0026gt;\n \u0026lt;div class=\u0026quot;footer\u0026quot;\u0026gt;{{ state.parseFooter(data) }}\u0026lt;/div\u0026gt;\n \u0026lt;/div\u0026gt;\n\u0026lt;/section\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003esection\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eid\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e{{ data.id }}\u003c/span\u003e\" \u003cspan class=\"pl-c1\"\u003eclass\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e{{ this.state.theme }}\u003c/span\u003e\" \u003cspan class=\"pl-c1\"\u003edata-index\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e{{ index }}\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n {{@ var is_today = data.date === state.today }}\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eclass\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e{{ data.class }} {{ is_today ? 'on' : 'off' }}\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eclass\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etitle\u003c/span\u003e\" \u003cspan class=\"pl-c1\"\u003estyle\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003efont-size: 2em\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{ data.title.toUpperCase() }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eclass\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003econtent {{ index % 2 ? 'odd' : 'even' }}\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{# data.content }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eclass\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003efooter\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{ state.parseFooter(data) }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003esection\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eYou can use any Javascript within the {{ ... }} curly bracket notation. The scope is limited by the template, so variables from one template can't be accessed within another template (use \u003ccode\u003estate\u003c/code\u003e for this purpose).\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eTo pass HTML markup as a string, the curly brackets needs to be followed by \u003cstrong\u003e#\u003c/strong\u003e e.g. \u003ccode\u003e{{# ... }}\u003c/code\u003e. For better performance, relevant tasks avoid passing HTML contents as a string.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eTo use Javascript outside an element's context you need to prevent concatenation of the returned value. For this purpose, the curly brackets need to be followed by \u003cstrong\u003e@\u003c/strong\u003e e.g. \u003ccode\u003e{{@ ... }}\u003c/code\u003e.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-identifier\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eWithin a template there are several \u003cstrong\u003ereserved keywords\u003c/strong\u003e you can use as an identifier:\u003c/p\u003e\n\u003cmarkdown-accessiblity-table\u003e\u003ctable\u003e\n \u003ctbody\u003e\u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003eIdentifier\u003c/td\u003e\n \u003ctd\u003eDescription\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003cb\u003edata\u003c/b\u003e\u003c/td\u003e\n \u003ctd\u003eA full reference to the passed data item. Within loops the keyword data points to each of the looped data items.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003cb\u003estate\u003c/b\u003e\u003c/td\u003e\n \u003ctd\u003eAn optional payload used to manually pass in custom specific values or helper functions. The state will be delegated through all nested templates.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003cb\u003eindex\u003c/b\u003e\u003c/td\u003e\n \u003ctd\u003eRepresents the index of the currently rendered data item (starting by 0 for the first item).\u003c/td\u003e\n \u003c/tr\u003e\n \n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003cb\u003ethis\u003c/b\u003e\u003c/td\u003e\n \u003ctd\u003eProvides you access to the Mikado view instance (e.g. this.state).\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003cb\u003ewindow\u003c/b\u003e\u003c/td\u003e\n \u003ctd\u003eGives access to the global namespace.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e_p\u003cbr\u003e_v\u003cbr\u003e_x\u003cbr\u003e_o\u003cbr\u003e_f\u003cbr\u003e_inc\u003c/td\u003e\n \u003ctd\u003eprivate identifiers, used by internal processing\u003c/td\u003e\n \u003c/tr\u003e\n\u003c/tbody\u003e\u003c/table\u003e\u003c/markdown-accessiblity-table\u003e\n\u003cp dir=\"auto\"\u003eYou cannot change the names of those preserved keywords, also make sure you didn't override them.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eIt is recommended to pass custom functions via the \u003cem\u003estate\u003c/em\u003e object (see example above \u003ccode\u003estate.parseFooter = function(str){ return str; }\u003c/code\u003e). Alternatively you can also nest more complex computations inline as an IIFE and return the result.\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;div class=\u0026quot;date\u0026quot;\u0026gt;{{ \n (function(){ \n var date = new Date();\n // perform some code ...\n return date.toLocaleString();\n }())\n}}\u0026lt;/div\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eclass\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003edate\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{ \n (function(){ \n var date = new Date();\n // perform some code ...\n return date.toLocaleString();\n }())\n}}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eTo finish the example from above you need one single data object or an array of \u003cstrong\u003e\u003cem\u003edata\u003c/em\u003e\u003c/strong\u003e items:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"var data = [{\n \u0026quot;id\u0026quot;: \u0026quot;230BA161-675A-2288-3B15-C343DB3A1DFC\u0026quot;,\n \u0026quot;date\u0026quot;: \u0026quot;2019-01-11\u0026quot;,\n \u0026quot;class\u0026quot;: \u0026quot;yellow, green\u0026quot;,\n \u0026quot;title\u0026quot;: \u0026quot;Sed congue, egestas lacinia.\u0026quot;,\n \u0026quot;content\u0026quot;: \u0026quot;\u0026lt;p\u0026gt;Vivamus non lorem \u0026lt;b\u0026gt;vitae\u0026lt;/b\u0026gt; odio sagittis amet ante.\u0026lt;/p\u0026gt;\u0026quot;,\n \u0026quot;footer\u0026quot;: \u0026quot;Pellentesque tincidunt tempus vehicula.\u0026quot;\n}];\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003evar\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003edata\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e[\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"id\"\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"230BA161-675A-2288-3B15-C343DB3A1DFC\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"date\"\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"2019-01-11\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"class\"\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"yellow, green\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"title\"\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"Sed congue, egestas lacinia.\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"content\"\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"\u0026lt;p\u0026gt;Vivamus non lorem \u0026lt;b\u0026gt;vitae\u0026lt;/b\u0026gt; odio sagittis amet ante.\u0026lt;/p\u0026gt;\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"footer\"\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"Pellentesque tincidunt tempus vehicula.\"\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e]\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eProvide the optional \u003cstrong\u003e\u003cem\u003estate\u003c/em\u003e\u003c/strong\u003e payload which includes specific values and helper methods used within template expressions:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"const state = {\n today: \u0026quot;2019-01-11\u0026quot;,\n theme: \u0026quot;custom\u0026quot;,\n parseFooter: function(data) {\n return data.footer;\n }\n};\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003estate\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003etoday\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"2019-01-11\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003etheme\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"custom\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-en\"\u003eparseFooter\u003c/span\u003e: \u003cspan class=\"pl-k\"\u003efunction\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003edata\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-k\"\u003ereturn\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003edata\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003efooter\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eMount the view to a target element as a destination for all the render tasks:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.mount(HTMLelement);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003emount\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-v\"\u003eHTMLelement\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eRender a mounted template:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.render(data, state);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003erender\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003edata\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003estate\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eRender asynchronously automatically by just providing a callback function:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.render(data, state, function() {\n console.log(\u0026quot;finished.\u0026quot;);\n});\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003erender\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003edata\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003estate\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efunction\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-smi\"\u003econsole\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003elog\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"finished.\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eTo render asynchronously by using promises you need to set the callback value to \u003ccode\u003etrue\u003c/code\u003e:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"// callback \u0026quot;true\u0026quot; will use Promises\nview.render(data, state, true).then(function() {\n console.log(\u0026quot;finished.\u0026quot;);\n});\n\n// same, but uses async/await:\nawait view.render(data, state, true);\nconsole.log(\u0026quot;finished.\u0026quot;);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-c\"\u003e// callback \"true\" will use Promises\u003c/span\u003e\n\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003erender\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003edata\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003estate\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003etrue\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003ethen\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-k\"\u003efunction\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-smi\"\u003econsole\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003elog\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"finished.\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\n\u003cspan class=\"pl-c\"\u003e// same, but uses async/await:\u003c/span\u003e\n\u003cspan class=\"pl-k\"\u003eawait\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003erender\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003edata\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003estate\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003etrue\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-smi\"\u003econsole\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003elog\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"finished.\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eWhen async should be the default strategy for all render tasks then you can also set the \u003cstrong\u003e\u003cem\u003easync\u003c/em\u003e\u003c/strong\u003e option flag:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"const view = new Mikado(template, { async: true });\nawait view.render(data, state);\nconsole.log(\u0026quot;finished.\u0026quot;);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-k\"\u003enew\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003etemplate\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003easync\u003c/span\u003e: \u003cspan class=\"pl-c1\"\u003etrue\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-k\"\u003eawait\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003erender\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003edata\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003estate\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-smi\"\u003econsole\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003elog\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"finished.\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-compiler\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eCompile Templates\u003c/h2\u003e\u003ca id=\"user-content-compile-templates\" class=\"anchor\" aria-label=\"Permalink: Compile Templates\" href=\"#compile-templates\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-compiler\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eDefine an HTML-like template and use double curly brackets to markup dynamic expressions which should be calculated and replaced during runtime:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;table\u0026gt;\n \u0026lt;tr\u0026gt;\n \u0026lt;td\u0026gt;User:\u0026lt;/td\u0026gt;\n \u0026lt;td\u0026gt;{{ data.username }}\u0026lt;/td\u0026gt;\n \u0026lt;/tr\u0026gt;\n \u0026lt;tr\u0026gt;\n \u0026lt;td\u0026gt;Tweets:\u0026lt;/td\u0026gt;\n \u0026lt;td\u0026gt;{{ data.tweets.length }}\u0026lt;/td\u0026gt;\n \u0026lt;/tr\u0026gt;\n\u0026lt;/table\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etable\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eUser:\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{ data.username }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eTweets:\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{ data.tweets.length }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etable\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eSave this template e.g. to \u003cem\u003etpl/partial/user.html\u003c/em\u003e\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eThe preserved keyword \u003cstrong\u003e\u003cem\u003edata\u003c/em\u003e\u003c/strong\u003e is a reference to the passed data item. You can access the whole nested object.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp dir=\"auto\"\u003eMikado comes with a builtin template compiler you can simply access by typing \u003ccode\u003enpx mikado-compile\u003c/code\u003e into your console. The compiler uses a very simple command-line interface (CLI) running on Node.js to perform compilation tasks. The template compiles into a native javascript file which needs to be passed during creation of a Mikado instance. The same markup is also used for the server-side rendering part, so you can share the same template sources for client and server rendering.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eShow help to list all available commands:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-batchfile notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"npx mikado-compile --help\"\u003e\u003cpre\u003enpx mikado-compile --help\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eCompile the template through the command line by:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-batchfile notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"npx mikado-compile tpl/partial/user.html\"\u003e\u003cpre\u003enpx mikado-compile tpl/partial/user.html\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003eBasic Notation:\u003c/strong\u003e\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003enpx mikado-compile \u003cem\u003esource \u0026lt;destination\u0026gt;\u003c/em\u003e\u003c/p\u003e\n\u003c/blockquote\u003e\n\n\u003cp dir=\"auto\"\u003eWhen no destination folder was set, the compiled files will be saved to the source folder. After compilation, you will have 3 different files:\u003c/p\u003e\n\u003col dir=\"auto\"\u003e\n\u003cli\u003e\u003cstrong\u003elist.js\u003c/strong\u003e the template compiled as a ES6 module (which needs to be imported)\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003elist.es5.js\u003c/strong\u003e the template compiled as ES5 compatible Javascript (which automatically register when loaded by script tag)\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003elist.html\u003c/strong\u003e the source template you have implemented (do not delete it)\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003eExtended Notation:\u003c/strong\u003e\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003enpx mikado-compile --src \u003cem\u003e{ source }\u003c/em\u003e --dest \u003cem\u003e{ destination }\u003c/em\u003e --extension html --type module --compact\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-compiler-flags\"\u003e\u003c/a\u003e\nCompiler Flags:\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ccode\u003e--type module\u003c/code\u003e, \u003ccode\u003e-t module\u003c/code\u003e export as javascript modules (recommended)\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e--type es5\u003c/code\u003e, \u003ccode\u003e-t es5\u003c/code\u003e export as ES5-compatible package\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e--extension html\u003c/code\u003e, \u003ccode\u003e--ext html\u003c/code\u003e, \u003ccode\u003e-e html\u003c/code\u003e the file extension which should be compiled\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e--inline\u003c/code\u003e, \u003ccode\u003e-i\u003c/code\u003e or \u003ccode\u003e--compact\u003c/code\u003e, \u003ccode\u003e-c\u003c/code\u003e switch the build strategy to optimize either the performance (inline) or size (compact)\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e--force\u003c/code\u003e, \u003ccode\u003e-f\u003c/code\u003e force overwriting existing files\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e--pretty\u003c/code\u003e, \u003ccode\u003e-p\u003c/code\u003e do not minify the compiled result\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e--watch\u003c/code\u003e, \u003ccode\u003e-w\u003c/code\u003e start the watcher for automatically compile when files has changed (just for development purposes)\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003eSupported flags as attributes on the template root:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;!-- switch the build strategy to prebuilt enabled cache --\u0026gt;\n\u0026lt;table cache=\u0026quot;true\u0026quot;\u0026gt;\u0026lt;/table\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-c\"\u003e\u0026lt;!-- switch the build strategy to prebuilt enabled cache --\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etable\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003ecache\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etrue\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etable\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;!-- switch the build strategy to prebuilt disabled cache --\u0026gt;\n\u0026lt;table cache=\u0026quot;false\u0026quot;\u0026gt;\u0026lt;/table\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-c\"\u003e\u0026lt;!-- switch the build strategy to prebuilt disabled cache --\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etable\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003ecache\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003efalse\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etable\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eUsing the flag attributes are the most performant variants but also cost you some flexibility, because the cache strategy couldn't be changed in runtime, it needs to change in markup before compilation.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-auto-naming\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eAuto Naming\u003c/h3\u003e\u003ca id=\"user-content-auto-naming\" class=\"anchor\" aria-label=\"Permalink: Auto Naming\" href=\"#auto-naming\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThere is a new naming system which will apply by default. The name of your html files will be used as unique identifiers of your templates.\nBecause several folders can include same filenames, the template name inherits from the full path you pass in as \u003ccode\u003e--src\u003c/code\u003e.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eAssuming the following file structure:\u003c/p\u003e\n\u003cdiv class=\"snippet-clipboard-content notranslate position-relative overflow-auto\" data-snippet-clipboard-copy-content=\"tpl/view/start.html\ntpl/view/user.html\ntpl/view/cart.html\ntpl/partial/start.html\ntpl/partial/user.html\ntpl/partial/cart.html\"\u003e\u003cpre class=\"notranslate\"\u003e\u003ccode\u003etpl/view/start.html\ntpl/view/user.html\ntpl/view/cart.html\ntpl/partial/start.html\ntpl/partial/user.html\ntpl/partial/cart.html\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThe command should define the path \u003ccode\u003e/tpl/\u003c/code\u003e as the source root because it is the most inner folder which covers all files:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-batchfile notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"npx mikado-compile ./tpl/\"\u003e\u003cpre\u003enpx mikado-compile ./tpl/\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThe template names then becomes \u003ccode\u003eview/start\u003c/code\u003e, \u003ccode\u003eview/user\u003c/code\u003e, \u003ccode\u003eview/cart\u003c/code\u003e and \u003ccode\u003epartial/start\u003c/code\u003e, \u003ccode\u003epartial/user\u003c/code\u003e, \u003ccode\u003epartial/cart\u003c/code\u003e for the partials. So when including just use this name in your expression \u003ccode\u003e\u0026lt;table include=\"partial/user\"\u0026gt;\u003c/code\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eThe wrong way is to compile the folder /view/ and /partial/ separately, because their template names will be same.\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-batchfile notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"npx mikado-compile ./tpl/view/\nnpx mikado-compile ./tpl/partial/\"\u003e\u003cpre\u003enpx mikado-compile ./tpl/view/\nnpx mikado-compile ./tpl/partial/\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThis might also work, but it is better not to do.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-prebuilt-cache\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003ePrebuilt Cache Strategy\u003c/h3\u003e\u003ca id=\"user-content-prebuilt-cache-strategy\" class=\"anchor\" aria-label=\"Permalink: Prebuilt Cache Strategy\" href=\"#prebuilt-cache-strategy\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThe option \u003ccode\u003e{ cache: true/false }\u003c/code\u003e when creating a Mikado instance could be better declared withing templates on their root element, let the compiler produce more optimized code for this strategy.\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;table cache=\u0026quot;true\u0026quot;\u0026gt;\n \u0026lt;!-- ... --\u0026gt;\n\u0026lt;/table\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etable\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003ecache\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etrue\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-c\"\u003e\u0026lt;!-- ... --\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etable\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eAlso use this approach when set \u003ccode\u003ecache=\"false\"\u003c/code\u003e:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;table cache=\u0026quot;false\u0026quot;\u0026gt;\n \u0026lt;!-- ... --\u0026gt;\n\u0026lt;/table\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etable\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003ecache\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003efalse\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-c\"\u003e\u0026lt;!-- ... --\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etable\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-watcher\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eWatcher (Auto-Compile)\u003c/h3\u003e\u003ca id=\"user-content-watcher-auto-compile\" class=\"anchor\" aria-label=\"Permalink: Watcher (Auto-Compile)\" href=\"#watcher-auto-compile\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eA perfect fit for your local development environment is spawning a watcher to automatically compile files when they get changed. Just use the same command line you would also use for a full compilation and append the flag \u003ccode\u003e--watch\u003c/code\u003e or \u003ccode\u003e-w\u003c/code\u003e to it:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-batchfile notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"npx mikado-compile ./tpl/ --watch\"\u003e\u003cpre\u003enpx mikado-compile ./tpl/ --watch\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eDon't close the console, otherwise the watcher will stop. You can stop the watcher explicitly by pressing \u003ccode\u003eCTRL + C\u003c/code\u003e.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-expressions\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eTemplate Expressions\u003c/h2\u003e\u003ca id=\"user-content-template-expressions\" class=\"anchor\" aria-label=\"Permalink: Template Expressions\" href=\"#template-expressions\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eThe template notation expects double curly brackets \u003ccode\u003e{{ ... }}\u003c/code\u003e for any kind of dynamic expressions.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eExcept when using {{@ ... }} for inline code notation, the returned value of every dynamic expression will be replaced to its position.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-insertion\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eValue Insertion \u003ccode\u003e{{ ... }}\u003c/code\u003e\u003c/h3\u003e\u003ca id=\"user-content-value-insertion---\" class=\"anchor\" aria-label=\"Permalink: Value Insertion {{ ... }}\" href=\"#value-insertion---\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;div\u0026gt;{{ data.value }}\u0026lt;/div\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{ data.value }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.render({ value: \u0026quot;test\u0026quot; });\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003erender\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003evalue\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"test\"\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eYou can also combine multiple expressions with non-expression contents:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;div\u0026gt;The title \u0026quot;{{ data.title }}\u0026quot; has the value: {{ data.value }}\u0026lt;/div\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eThe title \"{{ data.title }}\" has the value: {{ data.value }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.render({ title: \u0026quot;title\u0026quot;, value: \u0026quot;test\u0026quot; });\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003erender\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003etitle\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"title\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003evalue\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"test\"\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eYou can also mix text nodes with elements on the same root element:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;div\u0026gt;Title: \u0026lt;b\u0026gt;{{ data.title }}\u0026lt;/b\u0026gt;\u0026lt;br\u0026gt;Value: {{ data.value }}\u0026lt;/div\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eTitle: \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eb\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{ data.title }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eb\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eValue: {{ data.value }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.render({ title: \u0026quot;title\u0026quot;, value: \u0026quot;test\u0026quot; });\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003erender\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003etitle\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"title\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003evalue\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"test\"\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eAlso, you can use expressions within every attribute:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;div data-id=\u0026quot;{{ data.title }}\u0026quot; class=\u0026quot;{{ data.class }}\u0026quot;\u0026gt;{{ data.value }}\u0026lt;/div\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003edata-id\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e{{ data.title }}\u003c/span\u003e\" \u003cspan class=\"pl-c1\"\u003eclass\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e{{ data.class }}\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{ data.value }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.render({ id: 1, value: \u0026quot;test\u0026quot;, class: \u0026quot;test\u0026quot; });\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003erender\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eid\u003c/span\u003e: \u003cspan class=\"pl-c1\"\u003e1\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003evalue\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"test\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eclass\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"test\"\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eEvery Javascript syntax is allowed withing expression:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;div style=\u0026quot;color: {{ data.active ? 'green' : 'black' }}; {{ data.value ? '' : 'display: none;' }}\u0026quot;\u0026gt;\u0026lt;/div\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003estyle\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003ecolor: {{ data.active ? 'green' : 'black' }}; {{ data.value ? '' : 'display: none;' }}\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.render({ active: true, value: \u0026quot;not empty\u0026quot; });\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003erender\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eactive\u003c/span\u003e: \u003cspan class=\"pl-c1\"\u003etrue\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003evalue\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"not empty\"\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eSince expressions just need to return a value you can also use IIFE:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;div\u0026gt;{{ \n (function(){ \n var date = new Date();\n // perform some code ...\n return date.toLocaleString();\n }())\n}}\u0026lt;/div\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{ \n (function(){ \n var date = new Date();\n // perform some code ...\n return date.toLocaleString();\n }())\n}}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.render();\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003erender\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-inline-js\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eJS Inline Code \u003ccode\u003e{{@ ... }}\u003c/code\u003e\u003c/h3\u003e\u003ca id=\"user-content-js-inline-code---\" class=\"anchor\" aria-label=\"Permalink: JS Inline Code {{@ ... }}\" href=\"#js-inline-code---\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThe inline code expression is the only one which doesn't return a value to be rendered in place, it just executes.\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;div\u0026gt;\n {{@ const value = data.title.toUpperCase(); }}\n \u0026lt;h1\u0026gt;{{ value }}\u0026lt;/h1\u0026gt;\n\u0026lt;/div\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n {{@ const value = data.title.toUpperCase(); }}\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eh1\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{ value }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eh1\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.render({ title: \u0026quot;title\u0026quot; });\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003erender\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003etitle\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"title\"\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThe scope is limited to the template scope, but you can assign to \u003ccode\u003estate\u003c/code\u003e alternatively to share values across nested instances:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;div\u0026gt;\n {{@ state.value = data.title.toUpperCase(); }}\n \u0026lt;div include=\u0026quot;header\u0026quot;\u0026gt;\n \u0026lt;!-- contents of header.html:\n \u0026lt;h1\u0026gt;{{ state.value }}\u0026lt;/h1\u0026gt;\n --\u0026gt;\n \u0026lt;/div\u0026gt;\n\u0026lt;/div\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n {{@ state.value = data.title.toUpperCase(); }}\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003einclude\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003eheader\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-c\"\u003e\u0026lt;!-- contents of header.html:\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e \u0026lt;h1\u0026gt;{{ state.value }}\u0026lt;/h1\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e --\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.render({ title: \u0026quot;title\u0026quot; });\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003erender\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003etitle\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"title\"\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-truthy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eTruthy Values \u003ccode\u003e{{? ... }}\u003c/code\u003e\u003c/h3\u003e\u003ca id=\"user-content-truthy-values---\" class=\"anchor\" aria-label=\"Permalink: Truthy Values {{? ... }}\" href=\"#truthy-values---\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThis will just output the result when it is not \u003ccode\u003enull\u003c/code\u003e, \u003ccode\u003eundefined\u003c/code\u003e, \u003ccode\u003eNaN\u003c/code\u003e or \u003ccode\u003efalse\u003c/code\u003e.\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;div\u0026gt;{{? data.value }}\u0026lt;/div\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{? data.value }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.render([{\n value: null\n},{\n value: NaN\n},{\n value: undefined\n},{\n value: false\n}]);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003erender\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e[\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003evalue\u003c/span\u003e: \u003cspan class=\"pl-c1\"\u003enull\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003evalue\u003c/span\u003e: \u003cspan class=\"pl-v\"\u003eNaN\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003evalue\u003c/span\u003e: \u003cspan class=\"pl-c1\"\u003eundefined\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003evalue\u003c/span\u003e: \u003cspan class=\"pl-c1\"\u003efalse\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e]\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-escape-ssr\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eEscape Values \u003ccode\u003e{{! ... }}\u003c/code\u003e (SSR only)\u003c/h3\u003e\u003ca id=\"user-content-escape-values----ssr-only\" class=\"anchor\" aria-label=\"Permalink: Escape Values {{! ... }} (SSR only)\" href=\"#escape-values----ssr-only\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThis will escape the value before return. This is just important for the server-side-rendering part, the client automatically escape contents by default (except when using the HTML-expression).\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;div\u0026gt;{{! data.value }}\u0026lt;/div\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{! data.value }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.render({ value: \u0026quot;\u0026lt;b\u0026gt;html is not allowed\u0026lt;/b\u0026gt;\u0026quot; });\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003erender\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003evalue\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"\u0026lt;b\u0026gt;html is not allowed\u0026lt;/b\u0026gt;\"\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-html\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eHTML Contents \u003ccode\u003e{{# ... }}\u003c/code\u003e\u003c/h3\u003e\u003ca id=\"user-content-html-contents---\" class=\"anchor\" aria-label=\"Permalink: HTML Contents {{# ... }}\" href=\"#html-contents---\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThis will allow for inserting HTML returned string.\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eBe aware of this can potentially lead into security issues like XSS. Use carefully!\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;div\u0026gt;{{# data.value }}\u0026lt;/div\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{# data.value }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.render({ value: \u0026quot;\u0026lt;b\u0026gt;html is allowed\u0026lt;/b\u0026gt;\u0026quot; });\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003erender\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003evalue\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"\u0026lt;b\u0026gt;html is allowed\u0026lt;/b\u0026gt;\"\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-mikado.escape\"\u003e\u003c/a\u003e\u003ca name=\"user-content-mikado.sanitize\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eSanitizer\u003c/h4\u003e\u003ca id=\"user-content-sanitizer\" class=\"anchor\" aria-label=\"Permalink: Sanitizer\" href=\"#sanitizer\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eMikado provides you high performant helper function you can use in this context to escape contents or to sanitize.\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.render({ \n value: \u0026quot;\u0026lt;b\u0026gt;html allowed\u0026lt;/b\u0026gt;\u0026lt;br\u0026gt;\u0026quot; + Mikado.escape(\u0026quot;\u0026lt;b\u0026gt;not allowed\u0026lt;/b\u0026gt;\u0026quot;)\n});\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003erender\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \n \u003cspan class=\"pl-c1\"\u003evalue\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"\u0026lt;b\u0026gt;html allowed\u0026lt;/b\u0026gt;\u0026lt;br\u0026gt;\"\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e+\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eescape\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"\u0026lt;b\u0026gt;not allowed\u0026lt;/b\u0026gt;\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.render({ \n value: \u0026quot;\u0026lt;b\u0026gt;html allowed\u0026lt;/b\u0026gt;\u0026lt;br\u0026gt;\u0026quot; + Mikado.sanitize(\u0026quot;\u0026lt;b\u0026gt;not allowed\u0026lt;/b\u0026gt;\u0026quot;)\n});\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003erender\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \n \u003cspan class=\"pl-c1\"\u003evalue\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"\u0026lt;b\u0026gt;html allowed\u0026lt;/b\u0026gt;\u0026lt;br\u0026gt;\"\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e+\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003esanitize\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"\u0026lt;b\u0026gt;not allowed\u0026lt;/b\u0026gt;\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eUsing the sanitizer will remove the tags completely, whereas when escaping the content aren't removed but just escaped.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-bindings\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eReactive Bindings \u003ccode\u003e{{= ... }}\u003c/code\u003e\u003c/h3\u003e\u003ca id=\"user-content-reactive-bindings---\" class=\"anchor\" aria-label=\"Permalink: Reactive Bindings {{= ... }}\" href=\"#reactive-bindings---\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eDefine properties by using pure data object notation without any javascript inside:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;div class=\u0026quot;{{= data.class }}\u0026quot;\u0026gt;{{= data.value }}\u0026lt;/div\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eclass\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e{{= data.class }}\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{= data.value }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"// store must be an array of elements:\nconst store = [{ class: \u0026quot;active\u0026quot;, value: \u0026quot;foo\u0026quot; }];\n// it needs a initial render if store isn't empty:\nview.render(store);\n// the store array now was proxified!\"\u003e\u003cpre\u003e\u003cspan class=\"pl-c\"\u003e// store must be an array of elements:\u003c/span\u003e\n\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003estore\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e[\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eclass\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"active\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003evalue\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"foo\"\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e]\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e// it needs a initial render if store isn't empty:\u003c/span\u003e\n\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003erender\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003estore\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e// the store array now was proxified!\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eNow you can change the properties of \u003ccode\u003estore\u003c/code\u003e and the corresponding DOM elements will change automatically:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"store[0].class = \u0026quot;inactive\u0026quot;;\nstore[0].value = \u0026quot;bar\u0026quot;;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003estore\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e[\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e0\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e]\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003eclass\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"inactive\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-s1\"\u003estore\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e[\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e0\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e]\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003evalue\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"bar\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-runtime-compiler\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eRuntime Compiler\u003c/h2\u003e\u003ca id=\"user-content-runtime-compiler\" class=\"anchor\" aria-label=\"Permalink: Runtime Compiler\" href=\"#runtime-compiler\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eAlternatively of using the \u003ccode\u003enpx mikado-compile\u003c/code\u003e you can also compile templates during runtime.\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eIf a page has set a \u003ccode\u003eContent-Security-Policy\u003c/code\u003e (CSP) header field, using the runtime compiler has disadvantage when not configure \u003ccode\u003escript-src 'unsafe-eval'\u003c/code\u003e. It is recommended to use the Mikado native compiler, which is CSP-friendly and also can optimize your templates more powerful.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp dir=\"auto\"\u003eThe runtime compiler uses the performance optimized \u003ccode\u003einline\u003c/code\u003e strategy for every task, you can't switch it. The compiler property flag \u003ccode\u003ecache=\"true\"\u003c/code\u003e or \u003ccode\u003ecache=\"false\"\u003c/code\u003e on a template root is not supported, therefore you can't use 2 of the most performant strategies. But they are just slightly faster, so this shouldn't be an issue.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eThose features aren't supported by the runtime compiler:\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ccode\u003ecache=\"true\"\u003c/code\u003e or \u003ccode\u003ecache=\"false\"\u003c/code\u003e on a template root\u003c/li\u003e\n\u003cli\u003eusing any other compiler strategy than \u003ccode\u003einline\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003edetect and replace repeating inline includes\u003c/li\u003e\n\u003cli\u003edetect and solve/unroll non-dynamic expressions, e.g. \u003ccode\u003e\u0026lt;h1\u0026gt;{{ \"foor\" + \"bar \" }}\u0026lt;/h1\u0026gt;\u003c/code\u003e will transform to a static content \u003ccode\u003e\u0026lt;h1\u0026gt;foobar\u0026lt;/h1\u0026gt;\u003c/code\u003e and removes the expression completely\u003c/li\u003e\n\u003cli\u003eruntime-ready templates aren't available on page load (they need to compile)\u003c/li\u003e\n\u003cli\u003ethe runtime compiler does not pass the \u003ca href=\"https://github.com/nextapps-de/mikado/blob/master/test/tpl/crazy.html\"\u003e\"crazy template\"\u003c/a\u003e test\u003c/li\u003e\n\u003c/ul\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eExamples\u003c/h4\u003e\u003ca id=\"user-content-examples\" class=\"anchor\" aria-label=\"Permalink: Examples\" href=\"#examples\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eDefine some HTML template structure:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;template id=\u0026quot;user-list\u0026quot;\u0026gt;\n \u0026lt;!-- just a single outer root element allowed: --\u0026gt; \n \u0026lt;table\u0026gt;\n \u0026lt;tr\u0026gt;\n \u0026lt;td\u0026gt;User:\u0026lt;/td\u0026gt;\n \u0026lt;td\u0026gt;{{ data.user }}\u0026lt;/td\u0026gt;\n \u0026lt;/tr\u0026gt;\n \u0026lt;tr\u0026gt;\n \u0026lt;td\u0026gt;Tweets:\u0026lt;/td\u0026gt;\n \u0026lt;td\u0026gt;{{ data.tweets.length }}\u0026lt;/td\u0026gt;\n \u0026lt;/tr\u0026gt;\n \u0026lt;/table\u0026gt;\n\u0026lt;/template\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etemplate\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eid\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003euser-list\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-c\"\u003e\u0026lt;!-- just a single outer root element allowed: --\u0026gt;\u003c/span\u003e \n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etable\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eUser:\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{ data.user }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eTweets:\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{ data.tweets.length }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etable\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etemplate\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eTemplate definitions used by the runtime compiler needs manual naming when used as named includes.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp dir=\"auto\"\u003eThe template name will derive from \u003ccode\u003e\u0026lt;template id=\"user-list\"\u0026gt;\u003c/code\u003e or \u003ccode\u003e\u0026lt;template name=\"user-list\"\u0026gt;\u003c/code\u003e and becomes \u003ccode\u003euser-list\u003c/code\u003e.\nWhen using named includes you will need to use this name for referencing, e.g. \u003ccode\u003e\u0026lt;div include=\"user-list\"\u0026gt;\"\u003c/code\u003e.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eCompile the template and use it for creating a Mikado view instance:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"const template = document.getElementById(\u0026quot;user-list\u0026quot;);\nconst tpl = Mikado.compile(template);\nconst view = new Mikado(tpl, { /* options */ });\n\nview.render(data);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003etemplate\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-smi\"\u003edocument\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003egetElementById\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"user-list\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003etpl\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003ecompile\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003etemplate\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-k\"\u003enew\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003etpl\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-c\"\u003e/* options */\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\n\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003erender\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003edata\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eWhen the template was get through element ID you can use a shortcut:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"const tpl = Mikado.compile(\u0026quot;user-list\u0026quot;);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003etpl\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003ecompile\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"user-list\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eAlso, you can compile the template and use it for registration as a named include referenced by another template e.g. \u003ccode\u003e\u0026lt;div include=\"user-list\"\u0026gt;\"\u003c/code\u003e:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"Mikado.register(Mikado.compile(\u0026quot;user-list\u0026quot;));\"\u003e\u003cpre\u003e\u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eregister\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003ecompile\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"user-list\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eYou can use non-template elements for defining templates also:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-css notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"#user-list{ display: none }\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e#\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003euser-list\u003c/span\u003e{ \u003cspan class=\"pl-c1\"\u003edisplay\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e:\u003c/span\u003e none }\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;!-- just a single outer root element allowed: --\u0026gt; \n\u0026lt;table id=\u0026quot;user-list\u0026quot;\u0026gt;\n \u0026lt;tr\u0026gt;\n \u0026lt;td\u0026gt;User:\u0026lt;/td\u0026gt;\n \u0026lt;td\u0026gt;{{ data.user }}\u0026lt;/td\u0026gt;\n \u0026lt;/tr\u0026gt;\n \u0026lt;tr\u0026gt;\n \u0026lt;td\u0026gt;Tweets:\u0026lt;/td\u0026gt;\n \u0026lt;td\u0026gt;{{ data.tweets.length }}\u0026lt;/td\u0026gt;\n \u0026lt;/tr\u0026gt;\n\u0026lt;/table\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-c\"\u003e\u0026lt;!-- just a single outer root element allowed: --\u0026gt;\u003c/span\u003e \n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etable\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eid\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003euser-list\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eUser:\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{ data.user }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eTweets:\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{ data.tweets.length }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etable\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eLast but not least you can pass the template markup as a string:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"const tpl_str = `\n\u0026lt;table name=\u0026quot;user-list\u0026quot;\u0026gt;\n \u0026lt;tr\u0026gt;\n \u0026lt;td\u0026gt;User:\u0026lt;/td\u0026gt;\n \u0026lt;td\u0026gt;{{ data.user }}\u0026lt;/td\u0026gt;\n \u0026lt;/tr\u0026gt;\n \u0026lt;tr\u0026gt;\n \u0026lt;td\u0026gt;Tweets:\u0026lt;/td\u0026gt;\n \u0026lt;td\u0026gt;{{ data.tweets.length }}\u0026lt;/td\u0026gt;\n \u0026lt;/tr\u0026gt;\n\u0026lt;/table\u0026gt;`;\n\nconst tpl = Mikado.compile(tpl_str);\nconst view = new Mikado(tpl, { /* options */ });\n\nview.render(data);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003etpl_str\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e`\u003c/span\u003e\n\u003cspan class=\"pl-s\"\u003e\u0026lt;table name=\"user-list\"\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-s\"\u003e \u0026lt;tr\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-s\"\u003e \u0026lt;td\u0026gt;User:\u0026lt;/td\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-s\"\u003e \u0026lt;td\u0026gt;{{ data.user }}\u0026lt;/td\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-s\"\u003e \u0026lt;/tr\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-s\"\u003e \u0026lt;tr\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-s\"\u003e \u0026lt;td\u0026gt;Tweets:\u0026lt;/td\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-s\"\u003e \u0026lt;td\u0026gt;{{ data.tweets.length }}\u0026lt;/td\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-s\"\u003e \u0026lt;/tr\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-s\"\u003e\u0026lt;/table\u0026gt;`\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\n\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003etpl\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003ecompile\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003etpl_str\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-k\"\u003enew\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003etpl\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-c\"\u003e/* options */\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\n\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003erender\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003edata\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eUsing Inline Code\u003c/h3\u003e\u003ca id=\"user-content-using-inline-code\" class=\"anchor\" aria-label=\"Permalink: Using Inline Code\" href=\"#using-inline-code\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThe runtime compiler does not support all places of inserting inline code expressions. In some situations it might produce issues like here:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;table id=\u0026quot;user-list\u0026quot;\u0026gt;\n \u0026lt;tbody foreach=\u0026quot;data.entries\u0026quot;\u0026gt;\n {{@\n /* the browser will move this before \u0026lt;table\u0026gt;! */ \n const value = \u0026quot;test\u0026quot;;\n }}\n \u0026lt;tr\u0026gt;\n \u0026lt;td\u0026gt;Value: {{ value }}\u0026lt;/td\u0026gt;\n \u0026lt;/tr\u0026gt;\n \u0026lt;/tbody\u0026gt;\n\u0026lt;/table\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etable\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eid\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003euser-list\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etbody\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eforeach\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003edata.entries\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n {{@\n /* the browser will move this before \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etable\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e! */ \n const value = \"test\";\n }}\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eValue: {{ value }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etbody\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etable\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThe runtime compiler didn't parse the template by string, instead the compiler creates a dom structure when passing a template as string.\nOn the example above the \u003ccode\u003e{{@ ... }}\u003c/code\u003e expression is treated as a text node by the browser.\nSince the position isn't allowed to place text nodes (after \u003ccode\u003e\u0026lt;table\u0026gt;\u003c/code\u003e, \u003ccode\u003e\u0026lt;tbody\u0026gt;\u003c/code\u003e, \u003ccode\u003e\u0026lt;tr\u0026gt;\u003c/code\u003e) the browser moves this text node up to the outer scope of the table. But the inline code is now executed within the first outer template function, instead the inline loop template function needs the value and is running in its own scope.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eIn this situation you can store values on \u003ccode\u003estate\u003c/code\u003e to pass through inline looped partials.\nOr you can use the \u003ccode\u003e\u0026lt;script\u0026gt;\u003c/code\u003e tag in combination with the js-expression. The latter will keep the hierarchy, because those tags won't move outside by the browser:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;table id=\u0026quot;user-list\u0026quot;\u0026gt;\n \u0026lt;tbody foreach=\u0026quot;data.entries\u0026quot;\u0026gt;\n \u0026lt;script\u0026gt;{{@ const value = \u0026quot;test\u0026quot;; }}\u0026lt;/script\u0026gt;\n \u0026lt;tr\u0026gt;\n \u0026lt;td\u0026gt;Value: {{ value }}\u0026lt;/td\u0026gt;\n \u0026lt;/tr\u0026gt;\n \u0026lt;/tbody\u0026gt;\n\u0026lt;/table\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etable\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eid\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003euser-list\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etbody\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eforeach\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003edata.entries\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e@ \u003cspan class=\"pl-s1\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003evalue\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"test\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eValue: {{ value }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etbody\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etable\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eDon't forget to use the expression notation, otherwise it will be inserted as a normal code element.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eWhen the \u003ccode\u003e\u0026lt;script\u0026gt;\u003c/code\u003e just including js-inline code expression it won't be added to the template as a script element.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-event\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eRouting \u0026amp; Event Delegation\u003c/h2\u003e\u003ca id=\"user-content-routing--event-delegation\" class=\"anchor\" aria-label=\"Permalink: Routing \u0026amp; Event Delegation\" href=\"#routing--event-delegation\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eAll the special attributes used to assign event routing within templates are inherited from the native inline listener name but without the prefix \u003ccode\u003eon\u003c/code\u003e, e.g. to bind routing for an \"onclick\" just use \u003ccode\u003eclick\u003c/code\u003e.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp dir=\"auto\"\u003eLet's take this example:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;table foreach=\u0026quot;data\u0026quot; data-user=\u0026quot;{{ data.user }}\u0026quot;\u0026gt;\n \u0026lt;tr data-id=\u0026quot;{{ data.id }}\u0026quot; entry\u0026gt;\n \u0026lt;td\u0026gt;Item:\u0026lt;/td\u0026gt;\n \u0026lt;td click=\u0026quot;item-show\u0026quot;\u0026gt;{{ data.name }}\u0026lt;/td\u0026gt;\n \u0026lt;td\u0026gt;\u0026lt;a click=\u0026quot;item-edit:entry\u0026quot;\u0026gt;Edit\u0026lt;/a\u0026gt;\u0026lt;/td\u0026gt;\n \u0026lt;td\u0026gt;\u0026lt;a click=\u0026quot;item-delete:entry\u0026quot;\u0026gt;Delete\u0026lt;/a\u0026gt;\u0026lt;/td\u0026gt;\n \u0026lt;td\u0026gt;\u0026lt;a click=\u0026quot;item-sort:root\u0026quot;\u0026gt;Sort\u0026lt;/a\u0026gt;\u0026lt;/td\u0026gt;\n \u0026lt;/tr\u0026gt;\n\u0026lt;/table\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etable\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eforeach\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003edata\u003c/span\u003e\" \u003cspan class=\"pl-c1\"\u003edata-user\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e{{ data.user }}\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003edata-id\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e{{ data.id }}\u003c/span\u003e\" \u003cspan class=\"pl-c1\"\u003eentry\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eItem:\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eclick\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003eitem-show\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{ data.name }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ea\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eclick\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003eitem-edit:entry\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eEdit\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ea\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ea\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eclick\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003eitem-delete:entry\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eDelete\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ea\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ea\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eclick\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003eitem-sort:root\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eSort\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ea\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etable\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThere are 4 click listeners. The attribute value represents the name of the route.\nSome of the listener has a route separated by colon \":\", this will delegate the event from the route e.g. \"item-delete\" to the closest element which contains the attribute \"entry\".\nYou can freely choose attribute names, but it shouldn't collide with native attributes.\nThe last listener contains the keyword \u003ccode\u003eroot\u003c/code\u003e which is a shortcut to automatically forward the components root (the \u0026lt;table\u0026gt; in this example) as \u003ccode\u003etarget\u003c/code\u003e to the assigned route.\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eForwarding events to a parent element by using the colon notation is also helpful when you have corresponding data-attributes assigned to an outer context and each of the nested listener needs to access those values.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp dir=\"auto\"\u003eDefine routes:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.route(\u0026quot;show-user\u0026quot;, function(target, event) {\n alert(target.textContent);\n});\n\nview.route(\u0026quot;delete-user\u0026quot;, function(target, event) {\n // target was delegated to \u0026quot;root\u0026quot; by using the colon expression\n alert(target.dataset.id); \n // when target is delegated you can still get the\n // original element where the event was fired:\n const anchor = event.target;\n});\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eroute\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"show-user\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efunction\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003etarget\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eevent\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-en\"\u003ealert\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003etarget\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003etextContent\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\n\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eroute\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"delete-user\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efunction\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003etarget\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eevent\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-c\"\u003e// target was delegated to \"root\" by using the colon expression\u003c/span\u003e\n \u003cspan class=\"pl-en\"\u003ealert\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003etarget\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003edataset\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003eid\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e \n \u003cspan class=\"pl-c\"\u003e// when target is delegated you can still get the\u003c/span\u003e\n \u003cspan class=\"pl-c\"\u003e// original element where the event was fired:\u003c/span\u003e\n \u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eanchor\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eevent\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003etarget\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eRoutes are stored globally, so they share through all Mikado instances.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cb\u003eList of all supported events:\u003c/b\u003e\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003etap (synthetic touch-enabled \"click\" listener, see below)\u003c/li\u003e\n\u003cli\u003echange, input, select, toggle\u003c/li\u003e\n\u003cli\u003eclick, dblclick\u003c/li\u003e\n\u003cli\u003ekeydown, keyup, keypress\u003c/li\u003e\n\u003cli\u003emousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover, mouseup, mousewheel\u003c/li\u003e\n\u003cli\u003etouchstart, touchmove, touchend\u003c/li\u003e\n\u003cli\u003esubmit, reset\u003c/li\u003e\n\u003cli\u003efocus, blur\u003c/li\u003e\n\u003cli\u003eload, error\u003c/li\u003e\n\u003cli\u003eresize\u003c/li\u003e\n\u003cli\u003escroll\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003e\u003cb\u003eSynthetic events:\u003c/b\u003e\u003c/p\u003e\n\u003cmarkdown-accessiblity-table\u003e\u003ctable\u003e\n \u003ctbody\u003e\u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003eEvent\u003c/td\u003e\n \u003ctd\u003eDescription\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003cb\u003etap\u003c/b\u003e\u003c/td\u003e\n \u003ctd\u003eThe tap event is a synthetic click event for touch-enabled devices. It also fully prevents the 300ms click delay. The tap event automatically falls back to a native click listener when running on non-touchable device.\u003c/td\u003e\n \u003c/tr\u003e\n\u003c/tbody\u003e\u003c/table\u003e\u003c/markdown-accessiblity-table\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-bubbling\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eEvent Bubbling\u003c/h3\u003e\u003ca id=\"user-content-event-bubbling\" class=\"anchor\" aria-label=\"Permalink: Event Bubbling\" href=\"#event-bubbling\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eWhen multiple listeners of the same type are nested, the event will bubble up to the HTML root element when enabling the global flag \u003ccode\u003eMikado.eventBubble = true\u003c/code\u003e, otherwise bubbling will stop on the most inner definition which gets matched.\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;table\u0026gt;\n \u0026lt;tr click=\u0026quot;route-tr\u0026quot;\u0026gt;\n \u0026lt;td click=\u0026quot;route-td\u0026quot;\u0026gt;\u0026lt;/td\u0026gt;\n \u0026lt;td\u0026gt;\u0026lt;/td\u0026gt;\n \u0026lt;td\u0026gt;\u0026lt;/td\u0026gt;\n \u0026lt;/tr\u0026gt;\n\u0026lt;/table\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etable\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eclick\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003eroute-tr\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eclick\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003eroute-td\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etable\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"Mikado.route(\u0026quot;route-td\u0026quot;, function(target, event){\n console.log(\u0026quot;clicked td\u0026quot;);\n});\n\nMikado.route(\u0026quot;route-tr\u0026quot;, function(target, event){\n console.log(\u0026quot;clicked tr\u0026quot;);\n});\"\u003e\u003cpre\u003e\u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eroute\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"route-td\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efunction\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003etarget\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eevent\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-smi\"\u003econsole\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003elog\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"clicked td\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\n\u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eroute\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"route-tr\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efunction\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003etarget\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eevent\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-smi\"\u003econsole\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003elog\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"clicked tr\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eBy default, the above example will just execute the route named \"route-td\" when clicked on the TD element. When \u003ccode\u003eMikado.eventBubble = true\u003c/code\u003e was enabled the bubble continues after calling the most inner matched handler and both routes will be executed when clicking on TD element.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eTo control Mikados internal event bubbling mechanism you can pass in options as the 3rd parameter when defining routes:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"Mikado.route(\u0026quot;route-td\u0026quot;, function(){ /*...*/ }, { stop: true });\"\u003e\u003cpre\u003e\u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eroute\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"route-td\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efunction\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-c\"\u003e/*...*/\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003estop\u003c/span\u003e: \u003cspan class=\"pl-c1\"\u003etrue\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eSupported Options (mixable):\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ccode\u003estop: boolean\u003c/code\u003e stop capturing/bubbling the event up to the root element (stops Mikado event + native event)\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eprevent: boolean\u003c/code\u003e prevents the default behavior for this native event\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003ecancel: boolean\u003c/code\u003e just stop bubbling the Mikado event, but the native event bubbling will still continue\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eonce: boolean\u003c/code\u003e just catch the event once and remove the route then\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-event-cache\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eEvent Cache\u003c/h4\u003e\u003ca id=\"user-content-event-cache\" class=\"anchor\" aria-label=\"Permalink: Event Cache\" href=\"#event-cache\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eYou can cache more complex event delegations by setting the global flag \u003ccode\u003eMikado.eventCache = true\u003c/code\u003e.\nA candidate for a complex delegation is forwarding a different target to the handler by using the \":\" colon notation or when using \u003ccode\u003eMikado.eventBubble = true\u003c/code\u003e.\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eWhen using Event Cache the scope of forwarding custom target elements to the handler and also nested routes of the same event type should be defined in the same template scope. Thinks may break when components are shared through multiple instances.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp dir=\"auto\"\u003eThis is okay, because all partials are inline:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;table foreach=\u0026quot;data.result\u0026quot;\u0026gt;\n \u0026lt;!-- a new template scope --\u0026gt;\n \u0026lt;tr foreach=\u0026quot;data.user\u0026quot; click=\u0026quot;route-tr:root\u0026quot;\u0026gt;\n \u0026lt;!-- a new template scope --\u0026gt;\n \u0026lt;td click=\u0026quot;route-td:root\u0026quot;\u0026gt;{{ data.username }}\u0026lt;/td\u0026gt;\n \u0026lt;/tr\u0026gt;\n\u0026lt;/table\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etable\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eforeach\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003edata.result\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-c\"\u003e\u0026lt;!-- a new template scope --\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eforeach\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003edata.user\u003c/span\u003e\" \u003cspan class=\"pl-c1\"\u003eclick\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003eroute-tr:root\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-c\"\u003e\u0026lt;!-- a new template scope --\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eclick\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003eroute-td:root\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{ data.username }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etable\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eWhen using extern includes it might produce unexpected behavior:\u003c/p\u003e\n\u003cp dir=\"auto\"\u003etpl.html:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;table foreach=\u0026quot;data.result\u0026quot; entry\u0026gt;\n \u0026lt;!-- a new template scope --\u0026gt;\n \u0026lt;tr foreach=\u0026quot;data.user\u0026quot; include=\u0026quot;tpl-td\u0026quot;\u0026gt;\n \u0026lt;!-- a new template scope --\u0026gt;\n \u0026lt;/tr\u0026gt;\n\u0026lt;/table\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etable\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eforeach\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003edata.result\u003c/span\u003e\" \u003cspan class=\"pl-c1\"\u003eentry\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-c\"\u003e\u0026lt;!-- a new template scope --\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eforeach\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003edata.user\u003c/span\u003e\" \u003cspan class=\"pl-c1\"\u003einclude\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etpl-td\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-c\"\u003e\u0026lt;!-- a new template scope --\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etable\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003etpl-td.html:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;td click=\u0026quot;route-td:entry\u0026quot;\u0026gt;{{ data.username }}\u0026lt;/td\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eclick\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003eroute-td:entry\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{ data.username }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThis will have no side effects when the partial \"tpl-td.html\" is just use for the template \"tpl.html\".\nBut imagine you have another template which includes \"tpl-td.html\" and \u003cstrong\u003ealso\u003c/strong\u003e one of the recycle strategies (keyed, non-keyed) was enabled on both.\nIn this specific situation the cache might point to a false element \u003ccode\u003e\u0026lt;table entry\u0026gt;\u003c/code\u003e used to forward to the handler.\nThen you need to choose between: 1. limiting the scope of used event notation to the template scope, 2. do not enable \u003ccode\u003eMikado.eventCache = true\u003c/code\u003e.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-view.listen\"\u003e\u003c/a\u003e\u003ca name=\"user-content-view.unlisten\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eExplicit Register/Unregister Event Delegation\u003c/h4\u003e\u003ca id=\"user-content-explicit-registerunregister-event-delegation\" class=\"anchor\" aria-label=\"Permalink: Explicit Register/Unregister Event Delegation\" href=\"#explicit-registerunregister-event-delegation\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eYou can use Mikado routing and event delegation feature everywhere, also outside a template. Just apply the event attribute as you would do in a template.\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;body\u0026gt;\n \u0026lt;div click=\u0026quot;handler\u0026quot;\u0026gt;Click Me\u0026lt;/div\u0026gt;\n\u0026lt;/body\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebody\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eclick\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003ehandler\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eClick Me\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebody\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"Mikado.route(\u0026quot;handler\u0026quot;, function(target, event) {\n console.log(\u0026quot;Clicked\u0026quot;);\n});\"\u003e\u003cpre\u003e\u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eroute\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"handler\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efunction\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003etarget\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eevent\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-smi\"\u003econsole\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003elog\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"Clicked\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThen you have to explicit register the global \"click\" listener once:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"Mikado.listen(\u0026quot;click\u0026quot;);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003elisten\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"click\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eBecause events automatically register when creating the template factory under the hood. When no template was created which includes the same type of event, a global listener does not exist. For that reason, you have to explicitly register the listener once.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-event-control\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eControl the Native Event Flow\u003c/h4\u003e\u003ca id=\"user-content-control-the-native-event-flow\" class=\"anchor\" aria-label=\"Permalink: Control the Native Event Flow\" href=\"#control-the-native-event-flow\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThe default \"EventListenerOptions\" are set to \u003ccode\u003etrue\u003c/code\u003e by default and is using the capturing phase, this is preferred since the event is required on a global listener.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eWhen you need to configure event capturing and passive listener globally just register the specific listener manually before creating any Mikado instance which is including references to this specific event type:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"Mikado.listen(\u0026quot;touchmove\u0026quot;, {\n passive: true,\n capture: true \n});\"\u003e\u003cpre\u003e\u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003elisten\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"touchmove\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003epassive\u003c/span\u003e: \u003cspan class=\"pl-c1\"\u003etrue\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003ecapture\u003c/span\u003e: \u003cspan class=\"pl-c1\"\u003etrue\u003c/span\u003e \n\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eUnregister listener:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"Mikado.unlisten(\u0026quot;click\u0026quot;);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eunlisten\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"click\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eMikado will store the original \u003ccode\u003eEventListenerOptions\u003c/code\u003e when calling \u003ccode\u003e.listen(event)\u003c/code\u003e under the hood, to make sure the listener will be removed properly.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-view.dispatch\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eDispatch Routes\u003c/h4\u003e\u003ca id=\"user-content-dispatch-routes\" class=\"anchor\" aria-label=\"Permalink: Dispatch Routes\" href=\"#dispatch-routes\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eManually dispatch a route:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.dispatch(\u0026quot;route-name\u0026quot;);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003edispatch\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"route-name\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eManually dispatch a route and pass parameters for the assigned handler:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.dispatch(\u0026quot;handler\u0026quot;, target, event);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003edispatch\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"handler\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003etarget\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eevent\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-recycle\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eKeyed \u0026amp; Non-Keyed Recycling\u003c/h2\u003e\u003ca id=\"user-content-keyed--non-keyed-recycling\" class=\"anchor\" aria-label=\"Permalink: Keyed \u0026amp; Non-Keyed Recycling\" href=\"#keyed--non-keyed-recycling\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eEach template instance can run in its own mode independently.\u003c/p\u003e\n\u003c/blockquote\u003e\n\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-non-keyed\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003e1. Non-Keyed Recycle\u003c/h4\u003e\u003ca id=\"user-content-1-non-keyed-recycle\" class=\"anchor\" aria-label=\"Permalink: 1. Non-Keyed Recycle\" href=\"#1-non-keyed-recycle\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eA non-keyed recycle strategy will re-use all existing components without any limitations and is faster than keyed but also has some side effects when not used properly. That's why limitation by keyed data is a more common strategy for recycling. But when an unlimited recycle strategy was used carefully you won't get any disadvantages.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eJust provide a template as usual:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;div\u0026gt;\n \u0026lt;div\u0026gt;User:\u0026lt;/div\u0026gt;\n \u0026lt;div\u0026gt;{{data.name}}\u0026lt;/div\u0026gt;\n\u0026lt;/div\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eUser:\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{data.name}}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003ealong with these options:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"var view = new Mikado(template, { recycle: true });\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003evar\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-k\"\u003enew\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003etemplate\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003erecycle\u003c/span\u003e: \u003cspan class=\"pl-c1\"\u003etrue\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThis will switch Mikado into a recycle strategy to enable re-use of already rendered components.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-keyed\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003e2. Keyed Recycle\u003c/h4\u003e\u003ca id=\"user-content-2-keyed-recycle\" class=\"anchor\" aria-label=\"Permalink: 2. Keyed Recycle\" href=\"#2-keyed-recycle\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eA keyed strategy limits the recycle strategy on components matching the given data key. It just requires a \u003cstrong\u003eunique identifier\u003c/strong\u003e on each rendered item (e.g. the ID).\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eJust add the attribute \u003cstrong\u003e\u003cem\u003ekey\u003c/em\u003e\u003c/strong\u003e to the \u003cstrong\u003e\u003cem\u003eroot element\u003c/em\u003e\u003c/strong\u003e of a template (or the root of an inline partial) and assign the scope to the unique identifier will automatically switch Mikado into keyed-recycle mode:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;div key=\u0026quot;data.id\u0026quot;\u0026gt;\n \u0026lt;div\u0026gt;User:\u0026lt;/div\u0026gt;\n \u0026lt;div\u0026gt;{{ data.name }}\u0026lt;/div\u0026gt;\n\u0026lt;/div\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003ekey\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003edata.id\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eUser:\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{ data.name }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eA given key in template does not need the \u003ccode\u003erecycle: true\u003c/code\u003e option to be passed.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"var view = Mikado(template);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003evar\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003etemplate\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThis will switch Mikado into a recycle strategy which is limited by its corresponding data keys.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-usage\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eCreate, Mount, Destroy Views\u003c/h2\u003e\u003ca id=\"user-content-create-mount-destroy-views\" class=\"anchor\" aria-label=\"Permalink: Create, Mount, Destroy Views\" href=\"#create-mount-destroy-views\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-mikado.new\"\u003e\u003c/a\u003e\nCreate a view by passing a template and customized options:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"var view = Mikado(template, options);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003evar\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003etemplate\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eoptions\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eCreate a view and also mount it to a target element right away (you can also do this before render):\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"var view = Mikado(template, { \n mount: HTMLElement\n});\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003evar\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003etemplate\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \n \u003cspan class=\"pl-c1\"\u003emount\u003c/span\u003e: \u003cspan class=\"pl-v\"\u003eHTMLElement\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eWhenever \u003ccode\u003e.mount()\u003c/code\u003e is called for the first time, the template factory will be created once. Also, within this routine the hydration will apply when enabled. You can \"prebuild\" views by mounting early. Bigger sized applications does not hold all views in memory, so here it is recommended to mount the view right before render \u003ccode\u003eview.mount(node).render(data)\u003c/code\u003e.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-view.mount\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eMount or re-mount a view to an HTML element:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.mount(element);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003emount\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003eelement\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-view.destroy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eDestroy a view:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.destroy();\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003edestroy\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-view.render\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eRender Templates\u003c/h2\u003e\u003ca id=\"user-content-render-templates\" class=\"anchor\" aria-label=\"Permalink: Render Templates\" href=\"#render-templates\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eRender just a single data object:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.render({/* object */});\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003erender\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\u003cspan class=\"pl-c\"\u003e/* object */\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eRender a template repeated incrementally through a set of data items:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.render([/* array of objects */]);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003erender\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e[\u003c/span\u003e\u003cspan class=\"pl-c\"\u003e/* array of objects */\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e]\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eRender a template and also pass a custom state:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.render(data, state);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003erender\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003edata\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003estate\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eWhen passing a custom state you can still access the original view state by using \u003ccode\u003ethis.state\u003c/code\u003e within template expressions.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp dir=\"auto\"\u003eSchedule an asynchronous render task without any callback:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.render(data, state, true);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003erender\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003edata\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003estate\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003etrue\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eAll asynchronous render tasks will be scheduled to the next animation frame.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp dir=\"auto\"\u003eSchedule an asynchronous render task by using a callback:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.render(data, state, function() {\n // finished\n});\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003erender\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003edata\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003estate\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efunction\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-c\"\u003e// finished\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eSchedule a render task by using promises (requires the option \u003cstrong\u003e\u003cem\u003easync\u003c/em\u003e\u003c/strong\u003e to be enabled during initialization):\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.render(data, state).then(function() {\n // finished\n});\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003erender\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003edata\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003estate\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003ethen\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-k\"\u003efunction\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-c\"\u003e// finished\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eOr as async/await (requires the option \u003cstrong\u003e\u003cem\u003easync\u003c/em\u003e\u003c/strong\u003e to be enabled during initialization):\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"await view.render(data, payload);\n// finished\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003eawait\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003erender\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003edata\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003epayload\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e// finished\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eRender a static template (didn't include any dynamic contents):\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.render();\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003erender\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-view.create\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eCreate Components\u003c/h4\u003e\u003ca id=\"user-content-create-components\" class=\"anchor\" aria-label=\"Permalink: Create Components\" href=\"#create-components\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eJust create a component from a template without adding/assigning/rendering them to the root (\"orphan\"):\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"var partial = view.create(data);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003evar\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003epartial\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003ecreate\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003edata\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eOrphans are not a part of the internal render tree of a view. The construction of orphan components is also really fast.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-modify-views\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eModify Views\u003c/h2\u003e\u003ca id=\"user-content-modify-views\" class=\"anchor\" aria-label=\"Permalink: Modify Views\" href=\"#modify-views\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-view.add\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eAdd one data item to the end:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.add(data);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eadd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003edata\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eAdd one data item to a specific index position (did not replace):\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"// add to beginning:\nview.add(data, 0);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-c\"\u003e// add to beginning:\u003c/span\u003e\n\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eadd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003edata\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e0\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eAdd one data item to a reversed index position (did not replace):\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"// add before the last element:\nview.add(data, -1);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-c\"\u003e// add before the last element:\u003c/span\u003e\n\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eadd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003edata\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e-\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e1\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-view.append\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eAppend multiple data items to the end:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.append(data);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eappend\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003edata\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eAppend multiple data before an index:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"// append to beginning\nview.append(data, 0);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-c\"\u003e// append to beginning\u003c/span\u003e\n\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eappend\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003edata\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e0\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eAppend multiple data before a reversed index position:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"// append before the last element:\nview.append(data, -1);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-c\"\u003e// append before the last element:\u003c/span\u003e\n\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eappend\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003edata\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e-\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e1\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-view.remove\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eRemove a specific template node:\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eParameter: \u003ccode\u003eremove(position, \u0026lt;count\u0026gt;)\u003c/code\u003e\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.remove(node);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eremove\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eRemove a specific template node by its index:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.remove(20);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eremove\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e20\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eRemove a specific template node by its reversed index:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"// remove the last:\nview.remove(-1);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-c\"\u003e// remove the last:\u003c/span\u003e\n\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eremove\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e-\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e1\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eRemove a range of nodes starting from a specific node or index (included in removal):\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.remove(20, 10);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eremove\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e20\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e10\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.remove(node, 20);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eremove\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e20\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eRemove last 20 node items by using reversed index:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.remove(-20, 20);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eremove\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e-\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e20\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e20\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eRemove previous 20 node items starting of a given node/index (included in removal):\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.remove(node, -20);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eremove\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e-\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e20\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-view.clear\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eRemove all:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.clear();\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eclear\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-view.replace\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eReplace a data item/node:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.replace(node, data);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003ereplace\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003edata\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.replace(index, data);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003ereplace\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003eindex\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003edata\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-view.update\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eUpdate a single data item/node:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.update(node, data);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eupdate\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003edata\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.update(index, data);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eupdate\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003eindex\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003edata\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-helpers\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eCommon View Helpers\u003c/h4\u003e\u003ca id=\"user-content-common-view-helpers\" class=\"anchor\" aria-label=\"Permalink: Common View Helpers\" href=\"#common-view-helpers\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-view.node\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eGet a components root element by a specific index:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"var node = view.node(index);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003evar\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003eindex\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-view.index\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eGet the index from a specific components root element:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"var index = view.index(node);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003evar\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eindex\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eindex\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-view.length\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eGet the length of all components currently rendered:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"var length = view.length;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003evar\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003elength\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003elength\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-view.name\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eGet the current template name which is assigned to a Mikado instance:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"var name = view.name;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003evar\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003ename\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003ename\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-view.root\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eGet the mounted root element on which the template is assigned to:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"var element = view.root;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003evar\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eelement\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003eroot\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-manipulate\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eManipulate Views\u003c/h2\u003e\u003ca id=\"user-content-manipulate-views\" class=\"anchor\" aria-label=\"Permalink: Manipulate Views\" href=\"#manipulate-views\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eMikado provides you several optional helper functions to manipulate the DOM and also keep them in sync with the internal view state. Using the helper functions also will gain performance.\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eAll helpers support passed parameter by index or by node.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp dir=\"auto\"\u003eHelpers let you apply simple transformations without running through the whole render loop of the template. Reconciliation isn't the holy grail, it is just for your laziness. In certain situations it is just more efficient to apply a known transformation directly instead of altering the data and request a whole render task.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-view.move\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eMove a data item/node to a specific index position:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.move(node, 15); // 15 from start\nview.move(node, -15); // 15 from end\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003emove\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e15\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e \u003cspan class=\"pl-c\"\u003e// 15 from start\u003c/span\u003e\n\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003emove\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e-\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e15\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e \u003cspan class=\"pl-c\"\u003e// 15 from end\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-view.first\"\u003e\u003c/a\u003e\u003ca name=\"user-content-view.last\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eMove a data item/node to the top or bottom:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.first(node);\nview.last(node);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003efirst\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003elast\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-view.up\"\u003e\u003c/a\u003e\u003ca name=\"user-content-view.down\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eMove a data item/node by 1 index up or down:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.up(node);\nview.down(node);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eup\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003edown\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eMove a data item/node by a specific offset (pretty much the same as \u003cstrong\u003e\u003cem\u003eshift\u003c/em\u003e\u003c/strong\u003e):\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.up(node, 3);\nview.down(node, 3);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eup\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e3\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003edown\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e3\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-view.shift\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eShift a data item/node relatively by a specific offset (both directions):\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.shift(node, 3);\nview.shift(node, -3);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eshift\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e3\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eshift\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e-\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e3\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-view.before\"\u003e\u003c/a\u003e\u003ca name=\"user-content-view.after\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eMove a data item/node before or after another data item/node:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.before(node_a, node_b);\nview.after(node_a, node_b);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003ebefore\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode_a\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003enode_b\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eafter\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode_a\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003enode_b\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-view.swap\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eSwap two data items/nodes:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.swap(node_a, node_b);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eswap\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode_a\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003enode_b\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-cache\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eDOM State Caching\u003c/h2\u003e\u003ca id=\"user-content-dom-state-caching\" class=\"anchor\" aria-label=\"Permalink: DOM State Caching\" href=\"#dom-state-caching\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eCaching of DOM properties can greatly increase performance (up to 20x). There are just a few situations where caching will not improve performance, it fully depends on your application.\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003eRecommendation:\u003c/strong\u003e enable caching when some of your data will stay unchanged from one to another render task. Disable caching when changes on data almost requires a fully re-render.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eThe state cache will just apply when \u003ccode\u003erecycle\u003c/code\u003e was enabled or the \u003ccode\u003ekeyed\u003c/code\u003e strategy was used. Otherwise, the cache is never used.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp dir=\"auto\"\u003eCaching is disabled by default, you will need to explicitly set this flag when initializing:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"const view = new Mikado(template, { \n recycle:true,\n cache: true \n});\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-k\"\u003enew\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003etemplate\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \n \u003cspan class=\"pl-c1\"\u003erecycle\u003c/span\u003e:\u003cspan class=\"pl-c1\"\u003etrue\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003ecache\u003c/span\u003e: \u003cspan class=\"pl-c1\"\u003etrue\u003c/span\u003e \n\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eIt is very recommended reading the next section to understand how caching is working.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-cache-concept\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eState Caching Concept\u003c/h4\u003e\u003ca id=\"user-content-state-caching-concept\" class=\"anchor\" aria-label=\"Permalink: State Caching Concept\" href=\"#state-caching-concept\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eLet's take a simple template as an example:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;root\u0026gt;\n \u0026lt;div class=\u0026quot;active\u0026quot;\u0026gt;{{ data.title }}\u0026lt;/div\u0026gt;\n\u0026lt;/root\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eroot\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eclass\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003eactive\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{ data.title }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eroot\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThe template above has just one dynamic expression. It could be rendered as follows:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.render({ title: \u0026quot;foobar\u0026quot; });\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003erender\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003etitle\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"foobar\"\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eAssume you get new data and wants to update the view, but the new data has still the same value for the \u003cem\u003etitle\u003c/em\u003e:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.render({ title: \u0026quot;foobar\u0026quot; });\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003erender\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003etitle\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"foobar\"\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThis time, when cache was enabled no changes are applied to the text node, since the new value matches the previous cached value.\nThat specific part now executes more than 10,000 times faster. Make a maximum use of this strategy will speed up things amazingly.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eNow let's come to the most important part when using caching properly. Assume you have rendered the template above with caching enabled. Now you \u003cstrong\u003emanually\u003c/strong\u003e change parts of the DOM \u003cstrong\u003ewhich is covered by a dynamic template expression\u003c/strong\u003e:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"var node = document.querySelector(\u0026quot;.active\u0026quot;);\nnode.textContent = \u0026quot;manual change\u0026quot;;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003evar\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-smi\"\u003edocument\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003equerySelector\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\".active\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003etextContent\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"manual change\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThe changes will apply to the DOM as expected. Now you re-render the template with the \"old\" state from the previous render:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.render({ title: \u0026quot;foobar\u0026quot; });\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003erender\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003etitle\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"foobar\"\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThis time the change will not apply! Because the internal cache assumes that the current value is still \"foobar\" and skips the change.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eYou have 2 options in this situation:\u003c/p\u003e\n\u003col dir=\"auto\"\u003e\n\u003cli\u003eDo not manually change dom entries which are part of a dynamic template expression and update specific parts through rendering templates only.\u003c/li\u003e\n\u003cli\u003eUsing the \u003ca href=\"#cache-helpers\"\u003eDOM Cache Helpers\u003c/a\u003e Mikado provides you exactly for this situation.\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-cache-helpers\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eDOM Cache Helpers (optional)\u003c/h4\u003e\u003ca id=\"user-content-dom-cache-helpers-optional\" class=\"anchor\" aria-label=\"Permalink: DOM Cache Helpers (optional)\" href=\"#dom-cache-helpers-optional\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eCaching helpers let you apply manual changes to the DOM easily without going out of sync with the corresponding view instance.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eIt is recommended also using these helpers to any DOM changes regardless if it is part of the template or not. Generally, these helpers will greatly improve your application performance.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp dir=\"auto\"\u003eA well implemented application can still save between 20 and 40% of unnecessary DOM access just by using those helpers everywhere. On regular implementations it is almost between 50% and 70%.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-view.setattribute\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eSet an attribute of a node (will not replace old attributes):\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"Mikado.setAttribute(node, \u0026quot;href\u0026quot;, \u0026quot;/foo\u0026quot;);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003esetAttribute\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"href\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"/foo\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eSet multiple attributes of a node (will not replace old attributes):\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"Mikado.setAttribute(node, {\n id: \u0026quot;foo\u0026quot;,\n href: \u0026quot;/foo\u0026quot;\n});\"\u003e\u003cpre\u003e\u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003esetAttribute\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003eid\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"foo\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003ehref\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"/foo\"\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-mikado.getattribute\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eGet an attribute value of a node:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"var attr = Mikado.getAttribute(node, \u0026quot;href\u0026quot;);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003evar\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eattr\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003egetAttribute\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"href\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-mikado.removeattribute\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eRemove an attribute of a node:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"var attr = Mikado.removeAttribute(node, \u0026quot;href\u0026quot;);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003evar\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eattr\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eremoveAttribute\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"href\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eRemove multiple attributes of a node:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"var attr = Mikado.removeAttribute(node, [\u0026quot;href\u0026quot;, \u0026quot;target\u0026quot;]);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003evar\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eattr\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eremoveAttribute\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e[\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"href\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"target\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e]\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-mikado.hasattribute\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eCheck existence of a nodes attribute:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"var href = Mikado.hasAttribute(node, \u0026quot;href\u0026quot;);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003evar\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003ehref\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003ehasAttribute\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"href\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-mikado.setclass\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eSet class name of a node (fully replaces old classes):\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"Mikado.setClass(node, \u0026quot;class_a class_b\u0026quot;);\n```~~\n~~\n```js\nMikado.setClass(node, [\u0026quot;class_a\u0026quot;, \u0026quot;class_b\u0026quot;]);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003esetClass\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"class_a class_b\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-s\"\u003e``\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e`~~\u003c/span\u003e\n\u003cspan class=\"pl-s\"\u003e~~\u003c/span\u003e\n\u003cspan class=\"pl-s\"\u003e`\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e``\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003ejs\u003c/span\u003e\n\u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003esetClass\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e[\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"class_a\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"class_b\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e]\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-mikado.addclass\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eAdd a classname to a node:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"Mikado.addClass(node, \u0026quot;class_a\u0026quot;);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eaddClass\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"class_a\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eAdd multiple classnames to a node:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"Mikado.addClass(node, [\u0026quot;class_a\u0026quot;, \u0026quot;class_b\u0026quot;]);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eaddClass\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e[\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"class_a\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"class_b\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e]\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-mikado.getclass\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eGet all classnames of a node (returns an array):\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"var classList = Mikado.getClass(node);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003evar\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eclassList\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003egetClass\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-mikado.toggleclass\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eToggle classnames of a node:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"var classList = Mikado.toggleClass(node, \u0026quot;class_a\u0026quot;);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003evar\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eclassList\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003etoggleClass\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"class_a\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eToggle classnames of a node to a specific state (a short variant of conditional \"add\" and \"remove\"):\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"var classList = Mikado.toggleClass(node, \u0026quot;class_a\u0026quot;, true);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003evar\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eclassList\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003etoggleClass\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"class_a\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003etrue\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eToggle multiple classnames of a node:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"var classList = Mikado.toggleClass(node, [\u0026quot;class_a\u0026quot;, \u0026quot;class_b\u0026quot;]);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003evar\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eclassList\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003etoggleClass\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e[\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"class_a\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"class_b\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e]\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eToggle multiple classnames of a node each of them to a specific state:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"var classList = Mikado.toggleClass(node, {\n \u0026quot;class_a\u0026quot;: true,\n \u0026quot;class_b\u0026quot;: false\n});\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003evar\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eclassList\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003etoggleClass\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"class_a\"\u003c/span\u003e: \u003cspan class=\"pl-c1\"\u003etrue\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e\"class_b\"\u003c/span\u003e: \u003cspan class=\"pl-c1\"\u003efalse\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-mikado.hasclass\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eCheck existence of a nodes classnames:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"var class_a = Mikado.hasClass(node, \u0026quot;class_a\u0026quot;);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003evar\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eclass_a\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003ehasClass\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"class_a\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-mikado.removeclass\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eRemoves a classnames of a node:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"Mikado.removeClass(node, \u0026quot;class_a\u0026quot;);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eremoveClass\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"class_a\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eRemoves multiple classnames of a node:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"Mikado.removeClass(node, [\u0026quot;class_a\u0026quot;, \u0026quot;class_b\u0026quot;]);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eremoveClass\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e[\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"class_a\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"class_b\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e]\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-mikado.setcss\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eSet the whole elements inline style tag \u003ccode\u003estyle=\"...\"\u003c/code\u003e (fully replaces old styles):\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"Mikado.setCss(node, \u0026quot;top: 0; padding-right: 10px\u0026quot;);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003esetCss\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"top: 0; padding-right: 10px\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"Mikado.setCss(node, [\u0026quot;top: 0\u0026quot;, \u0026quot;padding-right: 10px\u0026quot;]);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003esetCss\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e[\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"top: 0\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"padding-right: 10px\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e]\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-mikado.getcss\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eGet all inline styles of a nodes style tag:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"var css = Mikado.getCss(node);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003evar\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003ecss\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003egetCss\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-mikado.setstyle\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eSet a specific inline style of a node (will not replace old styles):\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"Mikado.setStyle(node, \u0026quot;padding-right\u0026quot;, \u0026quot;10px\u0026quot;);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003esetStyle\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"padding-right\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"10px\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eSet multiple specific inline styles of a node (will not replace old styles):\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"Mikado.setStyle(node, { \u0026quot;top\u0026quot;: 0, \u0026quot;padding-right\u0026quot;: \u0026quot;10px\u0026quot; });\"\u003e\u003cpre\u003e\u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003esetStyle\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"top\"\u003c/span\u003e: \u003cspan class=\"pl-c1\"\u003e0\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"padding-right\"\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"10px\"\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-mikado.getstyle\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eGet a specific inline style value of a node:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"var padding = Mikado.getStyle(node, \u0026quot;padding-right\u0026quot;);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003evar\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003epadding\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003egetStyle\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"padding-right\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-mikado.settext\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eSet text of an element or text node:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"Mikado.setText(node, \u0026quot;This is a title.\u0026quot;);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003esetText\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"This is a title.\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-mikado.gettext\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eGet text of an element or text node:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"var text = Mikado.getText(node);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003evar\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003etext\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003egetText\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-mikado.sethtml\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eSet inner HTML of an element:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"Mikado.setHtml(node, \u0026quot;\u0026lt;b\u0026gt;This is a title.\u0026lt;/b\u0026gt;\u0026quot;);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003esetHtml\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"\u0026lt;b\u0026gt;This is a title.\u0026lt;/b\u0026gt;\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-mikado.gethtml\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eGet inner HTML of an element:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"var html = Mikado.getHtml(node);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003evar\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003ehtml\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003egetHtml\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-view.state\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eView State\u003c/h2\u003e\u003ca id=\"user-content-view-state\" class=\"anchor\" aria-label=\"Permalink: View State\" href=\"#view-state\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eEvery Mikado instance has by default a state object you can access by \u003ccode\u003eview.state\u003c/code\u003e.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eState is a payload keeping values and functions during runtime you can use within template expressions additionally to the data.\nThe state also will be delegated through the whole render loop (including partials).\nYou can bind one global state to every Mikado instances, you can also assign a dedicated state for each view.\nAdditionally, a custom state could be passed on all render tasks.\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"const view = Mikado(template, options);\nconsole.log(view.state); // {}\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003etemplate\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eoptions\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-smi\"\u003econsole\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003elog\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003estate\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e \u003cspan class=\"pl-c\"\u003e// {}\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eWhen creating an instance you can optionally pass an extern state via options to share the same state object through multiple views:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"const state = { foo: 1 };\nconst view_a = Mikado(template_a, { state });\nconst view_b = Mikado(template_b, { state });\nconsole.log(view_a.state); // { foo: 1 }\nconsole.log(view_b.state); // { foo: 1 }\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003estate\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003efoo\u003c/span\u003e: \u003cspan class=\"pl-c1\"\u003e1\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eview_a\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003etemplate_a\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e state \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eview_b\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003etemplate_b\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e state \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-smi\"\u003econsole\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003elog\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003eview_a\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003estate\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e \u003cspan class=\"pl-c\"\u003e// { foo: 1 }\u003c/span\u003e\n\u003cspan class=\"pl-smi\"\u003econsole\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003elog\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003eview_b\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003estate\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e \u003cspan class=\"pl-c\"\u003e// { foo: 1 }\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eYou can access the state within templates by the builtin keyword \"state\" or also by using \"this\" which points to the current Mikado instance.\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;div\u0026gt;\n \u0026lt;p\u0026gt;{{ state.foo }}\u0026lt;/p\u0026gt; \u0026lt;!-- output: 1 --\u0026gt;\n \u0026lt;p\u0026gt;{{ this.state.foo }}\u0026lt;/p\u0026gt; \u0026lt;!-- output: 1 --\u0026gt;\n\u0026lt;/div\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{ state.foo }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e \u003cspan class=\"pl-c\"\u003e\u0026lt;!-- output: 1 --\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{ this.state.foo }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e \u003cspan class=\"pl-c\"\u003e\u0026lt;!-- output: 1 --\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eWhen using \u003ccode\u003e.render()\u003c/code\u003e you can optionally pass a state as 2nd parameter which will temporarily override the views default keyword \"state\" for this specific render task:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"const state = { foo: 1 };\nconst view = Mikado(template, { state });\nview.render(data, { foo: 2 });\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003estate\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003efoo\u003c/span\u003e: \u003cspan class=\"pl-c1\"\u003e1\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003etemplate\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e state \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003erender\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003edata\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003efoo\u003c/span\u003e: \u003cspan class=\"pl-c1\"\u003e2\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;div\u0026gt;\n \u0026lt;p\u0026gt;{{ state.foo }}\u0026lt;/p\u0026gt; \u0026lt;!-- output: 2 --\u0026gt;\n \u0026lt;p\u0026gt;{{ this.state.foo }}\u0026lt;/p\u0026gt; \u0026lt;!-- output: 1 --\u0026gt;\n\u0026lt;/div\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{ state.foo }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e \u003cspan class=\"pl-c\"\u003e\u0026lt;!-- output: 2 --\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{ this.state.foo }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e \u003cspan class=\"pl-c\"\u003e\u0026lt;!-- output: 1 --\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eAs you can see you can still access the original state by using \u003ccode\u003ethis.state\u003c/code\u003e.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eWhen using \u003ccode\u003eforeach\u003c/code\u003e the keyword \u003ccode\u003edata\u003c/code\u003e within nested template expressions refers to the most inner element.\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;!-- data points to root --\u0026gt;\n\u0026lt;table foreach=\u0026quot;data.rows\u0026quot;\u0026gt;\n \u0026lt;!-- data points to root.rows[] --\u0026gt;\n \u0026lt;tr foreach=\u0026quot;data.columns\u0026quot;\u0026gt;\n \u0026lt;!-- data points to root.rows[].columns[] --\u0026gt;\n \u0026lt;td\u0026gt;{{ data.value }}\u0026lt;/td\u0026gt;\n \u0026lt;/tr\u0026gt;\n\u0026lt;/table\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-c\"\u003e\u0026lt;!-- data points to root --\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etable\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eforeach\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003edata.rows\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-c\"\u003e\u0026lt;!-- data points to root.rows[] --\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eforeach\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003edata.columns\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-c\"\u003e\u0026lt;!-- data points to root.rows[].columns[] --\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{ data.value }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etable\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eIf you need the root data element within nested templates then just assign the data to the \u003ccode\u003estate\u003c/code\u003e or pass a temporary state object as 2nd parameter by simply using \u003ccode\u003e.render(data, data)\u003c/code\u003e. Now you can access the root data element via \u003ccode\u003estate\u003c/code\u003e through all the template scopes.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-callbacks\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eCustom Callbacks\u003c/h2\u003e\u003ca id=\"user-content-custom-callbacks\" class=\"anchor\" aria-label=\"Permalink: Custom Callbacks\" href=\"#custom-callbacks\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eThe 2nd parameter \u003ccode\u003eview\u003c/code\u003e of custom callbacks points to the Mikado view instance.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp dir=\"auto\"\u003eDefine custom callbacks during initialization:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"var view = new Mikado(template, {\n on: {\n create: function(node, view) {\n console.log(\u0026quot;created:\u0026quot;, node);\n },\n recycle: function(node, view) {\n console.log(\u0026quot;recycled:\u0026quot;, node);\n },\n insert: function(node, view) {\n console.log(\u0026quot;inserted:\u0026quot;, node);\n },\n update: function(node, view) {\n console.log(\u0026quot;updated:\u0026quot;, node);\n },\n replace: function(node, view) {\n console.log(\u0026quot;replaced:\u0026quot;, node);\n },\n remove: function(node, view) {\n console.log(\u0026quot;removed:\u0026quot;, node);\n },\n mount: function(root, view) {\n console.log(\u0026quot;mounted:\u0026quot;, root);\n },\n unmount: function(root, view) {\n console.log(\u0026quot;unmounted:\u0026quot;, root);\n }\n }\n});\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003evar\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-k\"\u003enew\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003etemplate\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003eon\u003c/span\u003e: \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-en\"\u003ecreate\u003c/span\u003e: \u003cspan class=\"pl-k\"\u003efunction\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-smi\"\u003econsole\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003elog\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"created:\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-en\"\u003erecycle\u003c/span\u003e: \u003cspan class=\"pl-k\"\u003efunction\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-smi\"\u003econsole\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003elog\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"recycled:\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-en\"\u003einsert\u003c/span\u003e: \u003cspan class=\"pl-k\"\u003efunction\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-smi\"\u003econsole\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003elog\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"inserted:\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-en\"\u003eupdate\u003c/span\u003e: \u003cspan class=\"pl-k\"\u003efunction\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-smi\"\u003econsole\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003elog\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"updated:\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-en\"\u003ereplace\u003c/span\u003e: \u003cspan class=\"pl-k\"\u003efunction\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-smi\"\u003econsole\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003elog\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"replaced:\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-en\"\u003eremove\u003c/span\u003e: \u003cspan class=\"pl-k\"\u003efunction\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-smi\"\u003econsole\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003elog\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"removed:\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003enode\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-en\"\u003emount\u003c/span\u003e: \u003cspan class=\"pl-k\"\u003efunction\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003eroot\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-smi\"\u003econsole\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003elog\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"mounted:\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eroot\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-en\"\u003eunmount\u003c/span\u003e: \u003cspan class=\"pl-k\"\u003efunction\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003eroot\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-smi\"\u003econsole\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003elog\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"unmounted:\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eroot\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cmarkdown-accessiblity-table\u003e\u003ctable\u003e\n \u003ctbody\u003e\u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003eCallback\u003c/td\u003e\n \u003ctd\u003eDescription\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003ecreate\u003c/td\u003e\n \u003ctd\u003eCalled when a new template node was created (not recycled).\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003erecycle\u003c/td\u003e\n \u003ctd\u003eCalled when a template node was recycled instead of created.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003einsert\u003c/td\u003e\n \u003ctd\u003eCalled when a template node was inserted into DOM.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003eupdate\u003c/td\u003e\n \u003ctd\u003eCalled when a template node was updated.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003ereplace\u003c/td\u003e\n \u003ctd\u003eCalled when a template node was replaced ny another template node.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003eremove\u003c/td\u003e\n \u003ctd\u003eCalled when a template node was removed.\u003c/td\u003e\n \u003c/tr\u003e\n\u003c/tbody\u003e\u003c/table\u003e\u003c/markdown-accessiblity-table\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-static\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eStatic Templates\u003c/h2\u003e\u003ca id=\"user-content-static-templates\" class=\"anchor\" aria-label=\"Permalink: Static Templates\" href=\"#static-templates\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eWhen a template has no dynamic expressions (within curly brackets) which needs to be evaluated during runtime Mikado will handle those templates as \u003cem\u003estatic\u003c/em\u003e and skips the dynamic render part. You can render static views without passing data.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-mikado.once\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eOnce (One-time rendering)\u003c/h4\u003e\u003ca id=\"user-content-once-one-time-rendering\" class=\"anchor\" aria-label=\"Permalink: Once (One-time rendering)\" href=\"#once-one-time-rendering\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eWhen a template just needs to be rendered once you can theoretically create, mount, render and destroy as follows:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"Mikado(template)\n .mount(root)\n .render()\n .destroy();\"\u003e\u003cpre\u003e\u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003etemplate\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003emount\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003eroot\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003erender\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003edestroy\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eYou can also simply use a shorthand function:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"// static views doesn't require data\nMikado.once(root, template);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-c\"\u003e// static views doesn't require data\u003c/span\u003e\n\u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eonce\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003eroot\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003etemplate\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"// if the view has dynamic contents just pass data\nMikado.once(root, template, data);\n// full example by also using async callback\nMikado.once(root, template, data, state, callback);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-c\"\u003e// if the view has dynamic contents just pass data\u003c/span\u003e\n\u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eonce\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003eroot\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003etemplate\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003edata\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e// full example by also using async callback\u003c/span\u003e\n\u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eonce\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003eroot\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003etemplate\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003edata\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003estate\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003ecallback\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThere is one important advantage when using \u003ccode\u003eonce\u003c/code\u003e over \u003ccode\u003erender\u003c/code\u003e. It will always append to the root without mounting:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"Mikado.once(document.body, template);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eonce\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-smi\"\u003edocument\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003ebody\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003etemplate\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eWhen using \u003ccode\u003erender\u003c/code\u003e instead you probably can't do that, because it needs mounting and \u003ccode\u003edocument.body\u003c/code\u003e isn't a root which just includes elements from the same template.\nSo using \u003ccode\u003eMikado.once\u003c/code\u003e is great when initializing your app and building the shape of the DOM layout.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eIf a view was destroyed you will need to create the Mikado instance again when re-using.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-ssr\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eServer-Side Rendering (SSR)\u003c/h2\u003e\u003ca id=\"user-content-server-side-rendering-ssr\" class=\"anchor\" aria-label=\"Permalink: Server-Side Rendering (SSR)\" href=\"#server-side-rendering-ssr\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eJust use the same template syntax (or same source files also served for the client).\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"const mikado = require(\u0026quot;mikado/ssr\u0026quot;);\nconst view = await mikado.compile(\u0026quot;view/start.html\u0026quot;, {\n compression: true,\n debug: false,\n cache: 200\n});\n\n// render the html markup\nconst html = view.render([{ /* data */ }]);\n\n// send the html to the client, e.g.:\nres.send(html);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003emikado\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-en\"\u003erequire\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"mikado/ssr\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-k\"\u003eawait\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003emikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003ecompile\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"view/start.html\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003ecompression\u003c/span\u003e: \u003cspan class=\"pl-c1\"\u003etrue\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003edebug\u003c/span\u003e: \u003cspan class=\"pl-c1\"\u003efalse\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003ecache\u003c/span\u003e: \u003cspan class=\"pl-c1\"\u003e200\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\n\u003cspan class=\"pl-c\"\u003e// render the html markup\u003c/span\u003e\n\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003ehtml\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003erender\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e[\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-c\"\u003e/* data */\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e]\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\n\u003cspan class=\"pl-c\"\u003e// send the html to the client, e.g.:\u003c/span\u003e\n\u003cspan class=\"pl-s1\"\u003eres\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003esend\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003ehtml\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eSupported Options (mixable):\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ccode\u003ecompression\u003c/code\u003e minify the html markup (true/false)\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003edebug\u003c/code\u003e when enabled it compiles the template on every render, good for development environments (true/false)\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003ecache\u003c/code\u003e sets the size of the encoder-cache (true/false/number)\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003ecsr\u003c/code\u003e when set to \"false\" it fully unlocks template restrictions applied by the support of client-side-rendering\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-ssr-exclusive\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eSSR-exclusive Mode\u003c/h3\u003e\u003ca id=\"user-content-ssr-exclusive-mode\" class=\"anchor\" aria-label=\"Permalink: SSR-exclusive Mode\" href=\"#ssr-exclusive-mode\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eBy explicitly setting the option \u003ccode\u003ecsr\u003c/code\u003e to \"false\" you can switch into SSR-exclusive mode where the limitation of having one outer element as the template root is unlocked, also there is an \u003ccode\u003eextract\u003c/code\u003e directive to place logical placeholder elements, which will be self-extracted when rendered.\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"const mikado = require(\u0026quot;mikado/ssr\u0026quot;);\nconst view = await mikado.compile(\u0026quot;view/start.html\u0026quot;, {\n csr: false\n});\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003emikado\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-en\"\u003erequire\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"mikado/ssr\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-k\"\u003eawait\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003emikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003ecompile\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"view/start.html\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003ecsr\u003c/span\u003e: \u003cspan class=\"pl-c1\"\u003efalse\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;div if=\u0026quot;data.length\u0026quot; extract\u0026gt;\n \u0026lt;table foreach=\u0026quot;data\u0026quot;\u0026gt;\n \u0026lt;tr\u0026gt;\n \u0026lt;td\u0026gt;1\u0026lt;/td\u0026gt;\n \u0026lt;/tr\u0026gt;\n \u0026lt;tr\u0026gt;\n \u0026lt;td\u0026gt;2\u0026lt;/td\u0026gt;\n \u0026lt;/tr\u0026gt;\n \u0026lt;tr\u0026gt;\n \u0026lt;td\u0026gt;3\u0026lt;/td\u0026gt;\n \u0026lt;/tr\u0026gt;\n \u0026lt;/table\u0026gt;\n\u0026lt;/div\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eif\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003edata.length\u003c/span\u003e\" \u003cspan class=\"pl-c1\"\u003eextract\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etable\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eforeach\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003edata\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e1\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e2\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e3\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etable\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eThose templates aren't supported by the client render engine, also you can't hydrate them.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-express\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eExpress Render Engine\u003c/h2\u003e\u003ca id=\"user-content-express-render-engine\" class=\"anchor\" aria-label=\"Permalink: Express Render Engine\" href=\"#express-render-engine\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"const mikado = require(\u0026quot;mikado/express\u0026quot;);\nconst express = require(\u0026quot;express\u0026quot;);\nconst app = express();\n\n// set path to your static views\napp.set(\u0026quot;views\u0026quot;, [\n __dirname + \u0026quot;/view\u0026quot;\n // ...\n]);\n\n// set path to your partial views (optional)\napp.set(\u0026quot;partials\u0026quot;, [\n __dirname + \u0026quot;/partial\u0026quot;\n // ...\n]);\n\n// register engine to filetype .html\napp.engine(\u0026quot;html\u0026quot;, mikado);\n// enable engine for filetype .html\napp.set(\u0026quot;view engine\u0026quot;, \u0026quot;html\u0026quot;);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003emikado\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-en\"\u003erequire\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"mikado/express\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eexpress\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-en\"\u003erequire\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"express\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eapp\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eexpress\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\n\u003cspan class=\"pl-c\"\u003e// set path to your static views\u003c/span\u003e\n\u003cspan class=\"pl-s1\"\u003eapp\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eset\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"views\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e[\u003c/span\u003e\n \u003cspan class=\"pl-s1\"\u003e__dirname\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e+\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"/view\"\u003c/span\u003e\n \u003cspan class=\"pl-c\"\u003e// ...\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e]\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\n\u003cspan class=\"pl-c\"\u003e// set path to your partial views (optional)\u003c/span\u003e\n\u003cspan class=\"pl-s1\"\u003eapp\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eset\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"partials\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e[\u003c/span\u003e\n \u003cspan class=\"pl-s1\"\u003e__dirname\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e+\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"/partial\"\u003c/span\u003e\n \u003cspan class=\"pl-c\"\u003e// ...\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e]\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\n\u003cspan class=\"pl-c\"\u003e// register engine to filetype .html\u003c/span\u003e\n\u003cspan class=\"pl-s1\"\u003eapp\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eengine\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"html\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003emikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e// enable engine for filetype .html\u003c/span\u003e\n\u003cspan class=\"pl-s1\"\u003eapp\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eset\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"view engine\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"html\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-express-options\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eCustom Options\u003c/h4\u003e\u003ca id=\"user-content-custom-options\" class=\"anchor\" aria-label=\"Permalink: Custom Options\" href=\"#custom-options\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eYou can set options by Express \u003ccode\u003eapp.set\u003c/code\u003e:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"// enable compression (optional)\napp.set(\u0026quot;view compression\u0026quot;, true);\n// enable cache and set pool size (optional)\napp.set(\u0026quot;view cache\u0026quot;, 200);\n// set debug to false to enable compiler cache\napp.set(\u0026quot;view debug\u0026quot;, false);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-c\"\u003e// enable compression (optional)\u003c/span\u003e\n\u003cspan class=\"pl-s1\"\u003eapp\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eset\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"view compression\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003etrue\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e// enable cache and set pool size (optional)\u003c/span\u003e\n\u003cspan class=\"pl-s1\"\u003eapp\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eset\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"view cache\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e200\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e// set debug to false to enable compiler cache\u003c/span\u003e\n\u003cspan class=\"pl-s1\"\u003eapp\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eset\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"view debug\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003efalse\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eOr you can specify options by \u003ccode\u003emikado.options\u003c/code\u003e alternatively:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"mikado.options = {\n compression: true,\n cache: 200,\n debug: false\n};\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003emikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003eoptions\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003ecompression\u003c/span\u003e: \u003cspan class=\"pl-c1\"\u003etrue\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003ecache\u003c/span\u003e: \u003cspan class=\"pl-c1\"\u003e200\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003edebug\u003c/span\u003e: \u003cspan class=\"pl-c1\"\u003efalse\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-express-render\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eRender Views\u003c/h4\u003e\u003ca id=\"user-content-render-views\" class=\"anchor\" aria-label=\"Permalink: Render Views\" href=\"#render-views\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eRegister a route and render the file \u003ccode\u003e./view/start.html\u003c/code\u003e:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"app.get(\u0026quot;/\u0026quot;, function(req, res){\n\n res.render(\u0026quot;view/start\u0026quot;, [{ /* data */ }]);\n});\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eapp\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eget\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"/\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efunction\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003ereq\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eres\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n\n \u003cspan class=\"pl-s1\"\u003eres\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003erender\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"view/start\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e[\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-c\"\u003e/* data */\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e]\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-includes\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eIncludes\u003c/h2\u003e\u003ca id=\"user-content-includes\" class=\"anchor\" aria-label=\"Permalink: Includes\" href=\"#includes\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003ePartials gets its own instance under the hood. This performance gain also makes a template factory re-usable when the same partials are shared across different views.\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eBe aware of circular includes. A partial cannot include itself or somewhere later in its own chain.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp dir=\"auto\"\u003eAssume you've created one or more partial templates. Make sure each of the partial templates is providing one single root as the outer bound.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eThe file structure might look like:\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003cem\u003etpl/header.html\u003c/em\u003e\u003c/li\u003e\n\u003cli\u003e\u003cem\u003etpl/article.html\u003c/em\u003e\u003c/li\u003e\n\u003cli\u003e\u003cem\u003etpl/footer.html\u003c/em\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003eYou will need to compile the templates:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-shell notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"npx mikado-compile ./tpl/\"\u003e\u003cpre\u003enpx mikado-compile ./tpl/\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eYou have to register all partial templates once \u003cstrong\u003ebefore\u003c/strong\u003e you initialize the templates which will including them:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"import tpl_header from \u0026quot;./tpl/header.es6.js\u0026quot;;\nimport tpl_article from \u0026quot;./tpl/article.es6.js\u0026quot;;\nimport tpl_footer from \u0026quot;./tpl/footer.es6.js\u0026quot;;\n\nMikado.register(tpl_header);\nMikado.register(tpl_article);\nMikado.register(tpl_footer);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003eimport\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003etpl_header\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efrom\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"./tpl/header.es6.js\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-k\"\u003eimport\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003etpl_article\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efrom\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"./tpl/article.es6.js\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-k\"\u003eimport\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003etpl_footer\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efrom\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"./tpl/footer.es6.js\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\n\u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eregister\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003etpl_header\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eregister\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003etpl_article\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eregister\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003etpl_footer\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eWhen using templates in ES5 compatible format, they are automatically registered by default when loaded.\u003c/p\u003e\n\n\u003cp dir=\"auto\"\u003eInclude partial templates in another template \u003cstrong\u003etpl/section.html\u003c/strong\u003e:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;section\u0026gt;\n \u0026lt;header include=\u0026quot;header\u0026quot;\u0026gt;\u0026lt;/header\u0026gt;\n \u0026lt;article include=\u0026quot;article\u0026quot;\u0026gt;\u0026lt;/article\u0026gt;\n \u0026lt;footer include=\u0026quot;footer\u0026quot;\u0026gt;\u0026lt;/footer\u0026gt;\n\u0026lt;/section\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003esection\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eheader\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003einclude\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003eheader\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eheader\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003earticle\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003einclude\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003earticle\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003earticle\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003efooter\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003einclude\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003efooter\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003efooter\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003esection\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThe \"section\" from above could be also included by another one (and so on):\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;html\u0026gt;\n\u0026lt;body\u0026gt;\n \u0026lt;main foreach=\u0026quot;data.sections\u0026quot; include=\u0026quot;section\u0026quot;\u0026gt;\u0026lt;/main\u0026gt;\n\u0026lt;/body\u0026gt;\n\u0026lt;/html\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ehtml\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebody\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003emain\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eforeach\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003edata.sections\u003c/span\u003e\" \u003cspan class=\"pl-c1\"\u003einclude\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003esection\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003emain\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebody\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ehtml\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-loop-partials\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eLoop Partials\u003c/h2\u003e\u003ca id=\"user-content-loop-partials\" class=\"anchor\" aria-label=\"Permalink: Loop Partials\" href=\"#loop-partials\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eAssume the template example from above is a tweet (title, article, footer).\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;section\u0026gt;\n \u0026lt;title\u0026gt;{{ data.title }}\u0026lt;/title\u0026gt;\n \u0026lt;tweets foreach=\u0026quot;data.tweets\u0026quot; include=\u0026quot;tweet\u0026quot;\u0026gt;\n \u0026lt;!-- tweet --\u0026gt;\n \u0026lt;!-- tweet --\u0026gt;\n \u0026lt;!-- tweet --\u0026gt;\n \u0026lt;/tweets\u0026gt;\n\u0026lt;/section\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003esection\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etitle\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{ data.title }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etitle\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etweets\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eforeach\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003edata.tweets\u003c/span\u003e\" \u003cspan class=\"pl-c1\"\u003einclude\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etweet\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-c\"\u003e\u0026lt;!-- tweet --\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-c\"\u003e\u0026lt;!-- tweet --\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-c\"\u003e\u0026lt;!-- tweet --\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etweets\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003esection\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThis expression will render the template \"tweet\" through an array of data items/tweets. The template \"tweet\" is getting the array value \u003cstrong\u003e\u003cem\u003edata.tweets\u003c/em\u003e\u003c/strong\u003e as \u003cstrong\u003e\u003cem\u003edata\u003c/em\u003e\u003c/strong\u003e.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eThe \u003cstrong\u003e\u003cem\u003elimit\u003c/em\u003e\u003c/strong\u003e and \u003cstrong\u003e\u003cem\u003eoffset\u003c/em\u003e\u003c/strong\u003e attributes could be used optionally to specify a custom portion of the partial loop:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;tweets foreach=\u0026quot;data.tweets\u0026quot; include=\u0026quot;tweet\u0026quot; limit=\u0026quot;5\u0026quot; offset=\u0026quot;5\u0026quot;\u0026gt;\u0026lt;/tweets\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etweets\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eforeach\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003edata.tweets\u003c/span\u003e\" \u003cspan class=\"pl-c1\"\u003einclude\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etweet\u003c/span\u003e\" \u003cspan class=\"pl-c1\"\u003elimit\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e5\u003c/span\u003e\" \u003cspan class=\"pl-c1\"\u003eoffset\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e5\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etweets\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThe \u003cstrong\u003e\u003cem\u003eoffset\u003c/em\u003e\u003c/strong\u003e attribute could also be negative to reverse the boundary direction, e.g. loop through the last 5 items:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;tweets foreach=\u0026quot;data.tweets\u0026quot; include=\u0026quot;tweet\u0026quot; limit=\u0026quot;5\u0026quot; offset=\u0026quot;-5\u0026quot;\u0026gt;\u0026lt;/tweets\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etweets\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eforeach\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003edata.tweets\u003c/span\u003e\" \u003cspan class=\"pl-c1\"\u003einclude\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etweet\u003c/span\u003e\" \u003cspan class=\"pl-c1\"\u003elimit\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e5\u003c/span\u003e\" \u003cspan class=\"pl-c1\"\u003eoffset\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e-5\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etweets\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-inline-loops\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eInline Loops\u003c/h3\u003e\u003ca id=\"user-content-inline-loops\" class=\"anchor\" aria-label=\"Permalink: Inline Loops\" href=\"#inline-loops\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eYou can also loop through an inline partial. Mikado will extract and referencing this partial to its own instance under the hood.\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;main\u0026gt;\n \u0026lt;title\u0026gt;{{ data.title }}\u0026lt;/title\u0026gt;\n \u0026lt;tweets foreach=\u0026quot;data.tweets\u0026quot;\u0026gt;\n \u0026lt;section\u0026gt;\n \u0026lt;header include=\u0026quot;header\u0026quot;\u0026gt;\u0026lt;/header\u0026gt;\n \u0026lt;article include=\u0026quot;article\u0026quot;\u0026gt;\u0026lt;/article\u0026gt;\n \u0026lt;footer include=\u0026quot;footer\u0026quot;\u0026gt;\u0026lt;/footer\u0026gt;\n \u0026lt;/section\u0026gt;\n \u0026lt;/tweets\u0026gt;\n\u0026lt;/main\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003emain\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etitle\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{ data.title }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etitle\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etweets\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eforeach\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003edata.tweets\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003esection\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eheader\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003einclude\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003eheader\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eheader\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003earticle\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003einclude\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003earticle\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003earticle\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003efooter\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003einclude\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003efooter\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003efooter\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003esection\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etweets\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003emain\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eYou can also nest loops:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;!-- root view --\u0026gt;\n\u0026lt;tweets foreach=\u0026quot;data.tweets\u0026quot;\u0026gt;\n \u0026lt;!-- new partial template --\u0026gt;\n \u0026lt;tweet\u0026gt;\n \u0026lt;h1\u0026gt;{{ data.title }}\u0026lt;/h1\u0026gt;\n \u0026lt;title\u0026gt;Comments:\u0026lt;/title\u0026gt;\n \u0026lt;div foreach=\u0026quot;data.comments\u0026quot;\u0026gt;\n \u0026lt;!-- new partial template --\u0026gt;\n \u0026lt;comment\u0026gt;\n \u0026lt;p\u0026gt;{{ data.content }}\u0026lt;/p\u0026gt;\n \u0026lt;title\u0026gt;Replies:\u0026lt;/title\u0026gt;\n \u0026lt;div foreach=\u0026quot;data.replies\u0026quot;\u0026gt;\n \u0026lt;!-- new partial template --\u0026gt;\n \u0026lt;p\u0026gt;{{ data.content }}\u0026lt;/p\u0026gt;\n \u0026lt;/div\u0026gt;\n \u0026lt;/comment\u0026gt;\n \u0026lt;/div\u0026gt;\n \u0026lt;/tweet\u0026gt;\n\u0026lt;/tweets\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-c\"\u003e\u0026lt;!-- root view --\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etweets\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eforeach\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003edata.tweets\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-c\"\u003e\u0026lt;!-- new partial template --\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etweet\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eh1\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{ data.title }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eh1\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etitle\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eComments:\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etitle\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eforeach\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003edata.comments\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-c\"\u003e\u0026lt;!-- new partial template --\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ecomment\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{ data.content }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etitle\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eReplies:\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etitle\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eforeach\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003edata.replies\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-c\"\u003e\u0026lt;!-- new partial template --\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{ data.content }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ecomment\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etweet\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etweets\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eEvery looped partial has to provide \u003cstrong\u003eone single element root\u003c/strong\u003e as the outer bound.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp dir=\"auto\"\u003eIn this example every foreach-expression is wrong (you will find the right example above):\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;tweets foreach=\u0026quot;data.tweets\u0026quot;\u0026gt;\n \u0026lt;!-- no outer bound! --\u0026gt;\n \u0026lt;h1\u0026gt;{{ data.title }}\u0026lt;/h1\u0026gt;\n \u0026lt;title\u0026gt;Comments:\u0026lt;/title\u0026gt;\n \u0026lt;div foreach=\u0026quot;data.comments\u0026quot;\u0026gt;\n \u0026lt;!-- no outer bound! --\u0026gt;\n \u0026lt;p\u0026gt;{{ data.content }}\u0026lt;/p\u0026gt;\n \u0026lt;title\u0026gt;Replies:\u0026lt;/title\u0026gt;\n \u0026lt;div foreach=\u0026quot;data.replies\u0026quot;\u0026gt;\n \u0026lt;!-- no outer bound! --\u0026gt;\n {{ data.content }}\n \u0026lt;/div\u0026gt;\n \u0026lt;/div\u0026gt;\n\u0026lt;/tweets\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etweets\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eforeach\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003edata.tweets\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-c\"\u003e\u0026lt;!-- no outer bound! --\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eh1\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{ data.title }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eh1\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etitle\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eComments:\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etitle\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eforeach\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003edata.comments\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-c\"\u003e\u0026lt;!-- no outer bound! --\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{ data.content }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etitle\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eReplies:\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etitle\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eforeach\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003edata.replies\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-c\"\u003e\u0026lt;!-- no outer bound! --\u0026gt;\u003c/span\u003e\n {{ data.content }}\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etweets\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-conditional\" id=\"user-content-conditional\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eConditional Template Structures\u003c/h2\u003e\u003ca id=\"user-content-conditional-template-structures\" class=\"anchor\" aria-label=\"Permalink: Conditional Template Structures\" href=\"#conditional-template-structures\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;main\u0026gt;\n \u0026lt;title if=\u0026quot;data.tweet.length\u0026quot;\u0026gt;Tweets: {{ data.tweet.length }}\u0026lt;/title\u0026gt;\n \u0026lt;title if=\u0026quot;!data.tweet.length\u0026quot;\u0026gt;No tweets found.\u0026lt;/title\u0026gt;\n\u0026lt;/main\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003emain\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etitle\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eif\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003edata.tweet.length\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eTweets: {{ data.tweet.length }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etitle\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etitle\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eif\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e!data.tweet.length\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eNo tweets found.\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etitle\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003emain\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;main\u0026gt;\n \u0026lt;title\u0026gt;{{ data.title }}\u0026lt;/title\u0026gt;\n \u0026lt;tweets if=\u0026quot;data.tweets.length\u0026quot; foreach=\u0026quot;data.tweets\u0026quot;\u0026gt;\n \u0026lt;section\u0026gt;{{ data.content }}\u0026lt;/section\u0026gt;\n \u0026lt;/tweets\u0026gt;\n\u0026lt;/main\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003emain\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etitle\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{ data.title }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etitle\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etweets\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eif\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003edata.tweets.length\u003c/span\u003e\" \u003cspan class=\"pl-c1\"\u003eforeach\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003edata.tweets\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003esection\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{ data.content }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003esection\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etweets\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003emain\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;main\u0026gt;\n \u0026lt;title\u0026gt;{{ data.title }}\u0026lt;/title\u0026gt;\n \u0026lt;tweets foreach=\u0026quot;data.tweets\u0026quot;\u0026gt;\n \u0026lt;section if=\u0026quot;data.content\u0026quot;\u0026gt;{{ data.content }}\u0026lt;/section\u0026gt;\n \u0026lt;/tweets\u0026gt;\n\u0026lt;/main\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003emain\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etitle\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{ data.title }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etitle\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etweets\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eforeach\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003edata.tweets\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003esection\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eif\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003edata.content\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{ data.content }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003esection\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etweets\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003emain\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThink in real code branches, instead of doing this:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;main\u0026gt;\n {{@ var result = (function(){ return \u0026quot;some big computation\u0026quot;; }()) }}\n \u0026lt;section if=\u0026quot;data.content\u0026quot;\u0026gt;{{ result }}\u0026lt;/section\u0026gt;\n\u0026lt;/main\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003emain\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n {{@ var result = (function(){ return \"some big computation\"; }()) }}\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003esection\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eif\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003edata.content\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{ result }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003esection\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003emain\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eDoing this:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;main\u0026gt;\n \u0026lt;section if=\u0026quot;data.content\u0026quot;\u0026gt;\n {{ (function(){ return \u0026quot;some big computation\u0026quot;; }()) }}\n \u0026lt;/section\u0026gt;\n\u0026lt;/main\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003emain\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003esection\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eif\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003edata.content\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n {{ (function(){ return \"some big computation\"; }()) }}\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003esection\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003emain\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eConditional branches will skip their expressions inside when not taken.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp dir=\"auto\"\u003eAlso, try to assign computations outside a loop by using the state to delegate values to the scope of the partial loop:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;main\u0026gt;\n {{@ state.result = (function(){ return \u0026quot;some big computation\u0026quot;; }()) }}\n \u0026lt;tweets foreach=\u0026quot;data.tweets\u0026quot;\u0026gt;\n \u0026lt;section\u0026gt;{{ state.result }}\u0026lt;/section\u0026gt;\n \u0026lt;/tweets\u0026gt;\n\u0026lt;/main\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003emain\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n {{@ state.result = (function(){ return \"some big computation\"; }()) }}\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etweets\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eforeach\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003edata.tweets\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003esection\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{ state.result }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003esection\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etweets\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003emain\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-proxy\" id=\"user-content-proxy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eReactive Properties (Proxy)\u003c/h2\u003e\u003ca id=\"user-content-reactive-properties-proxy\" class=\"anchor\" aria-label=\"Permalink: Reactive Properties (Proxy)\" href=\"#reactive-properties-proxy\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eMikado provides you a reactive approach to listen for changes to the data and apply them accordingly to the DOM.\nIt is based on native Proxy feature which has great performance, a small memory footprint and fully falls back to a legacy observer when Proxy is not available.\nUsing a reactive strategy can additionally boost performance beyond a factor of 100 when updating specific data instead of leverage a full render task.\nIt depends on your application or current view, this feature has an advantage when updating data \u003cstrong\u003epartially\u003c/strong\u003e has to process more often than full data updates.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003eTemplate markup\u003c/strong\u003e:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;table\u0026gt;\n \u0026lt;tr\u0026gt;\n \u0026lt;td\u0026gt;Name:\u0026lt;/td\u0026gt;\n \u0026lt;td\u0026gt;{{= data.name }}\u0026lt;/td\u0026gt;\n \u0026lt;/tr\u0026gt;\n \u0026lt;tr\u0026gt;\n \u0026lt;td\u0026gt;Email:\u0026lt;/td\u0026gt;\n \u0026lt;td\u0026gt;{{= data.email }}\u0026lt;/td\u0026gt;\n \u0026lt;/tr\u0026gt;\n\u0026lt;/table\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etable\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eName:\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{= data.name }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eEmail:\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{= data.email }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etable\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eThe expression for an observable property uses this syntax: \u003ccode\u003e{{=\u003c/code\u003e. You can combine with other expressions, but should be defined at least, e.g. \u003ccode\u003e{{#=\u003c/code\u003e or \u003ccode\u003e{{!=\u003c/code\u003e or \u003ccode\u003e{{?=\u003c/code\u003e.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eYou can't use any Javascript code inside reactive expressions, just the full data scope of the value is allowed to specify within those expressions.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp dir=\"auto\"\u003eWhen using reactive properties you'll need to manage a store (could be a simple Array) which gets proxified under the hood.\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"// store must be an array of elements:\nconst store = [/* Array of objects */];\n\n// create, mount and initial render the store by using\n// a template which has reactive properties included\nMikado(template).mount(root).render(store);\n\n// the store now has proxified item properties!\n// do not throw it away, instead apply updates on it\nstore[0].name = \u0026quot;John Doe\u0026quot;;\nstore[0].email = \u0026quot;john@doe.com\u0026quot;;\n\n// when data changes, the corresponding DOM elements\n// will automatically change also\"\u003e\u003cpre\u003e\u003cspan class=\"pl-c\"\u003e// store must be an array of elements:\u003c/span\u003e\n\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003estore\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e[\u003c/span\u003e\u003cspan class=\"pl-c\"\u003e/* Array of objects */\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e]\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\n\u003cspan class=\"pl-c\"\u003e// create, mount and initial render the store by using\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e// a template which has reactive properties included\u003c/span\u003e\n\u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003etemplate\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003emount\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003eroot\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003erender\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003estore\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\n\u003cspan class=\"pl-c\"\u003e// the store now has proxified item properties!\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e// do not throw it away, instead apply updates on it\u003c/span\u003e\n\u003cspan class=\"pl-s1\"\u003estore\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e[\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e0\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e]\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003ename\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"John Doe\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-s1\"\u003estore\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e[\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e0\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e]\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003eemail\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"john@doe.com\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\n\u003cspan class=\"pl-c\"\u003e// when data changes, the corresponding DOM elements\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e// will automatically change also\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eThe data store must be an Array of elements, also when just having one item. Because the array index reference gets proxified, that's why you can't pass a single object.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp dir=\"auto\"\u003eIf you just have a single data item, and you don't like the array index access you can also define a reference, but you need to do this after initially calling \u003ccode\u003erender\u003c/code\u003e:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"const store = [{ class: \u0026quot;active\u0026quot;, value: \u0026quot;foo\u0026quot; }];\n// the store isn't proxified\nconst test = store[0];\n// initial render\nview.render(store);\n// the store array now was proxified!\nconst item = store[0];\n\n// these objects aren't the same anymore\nconsole.log(test === item); // false\n\n// nothing will change on screen:\ntest.value = \u0026quot;bar\u0026quot;;\n// this works properly\nitem.value = \u0026quot;bar\u0026quot;;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003estore\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e[\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eclass\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"active\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003evalue\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"foo\"\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e]\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e// the store isn't proxified\u003c/span\u003e\n\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003etest\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003estore\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e[\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e0\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e]\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e// initial render\u003c/span\u003e\n\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003erender\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003estore\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e// the store array now was proxified!\u003c/span\u003e\n\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eitem\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003estore\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e[\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e0\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e]\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\n\u003cspan class=\"pl-c\"\u003e// these objects aren't the same anymore\u003c/span\u003e\n\u003cspan class=\"pl-smi\"\u003econsole\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003elog\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003etest\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e===\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eitem\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e \u003cspan class=\"pl-c\"\u003e// false\u003c/span\u003e\n\n\u003cspan class=\"pl-c\"\u003e// nothing will change on screen:\u003c/span\u003e\n\u003cspan class=\"pl-s1\"\u003etest\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003evalue\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"bar\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e// this works properly\u003c/span\u003e\n\u003cspan class=\"pl-s1\"\u003eitem\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003evalue\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"bar\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eOn the upper example nothing on the DOM will change when you set the values \u003ccode\u003etest.value = \"bar\"\u003c/code\u003e, because this reference holds the un-proxified original version.\nSet \u003ccode\u003eitem.value = \"bar\"\u003c/code\u003e will work properly.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-limitations\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eLimitations\u003c/h3\u003e\u003ca id=\"user-content-limitations\" class=\"anchor\" aria-label=\"Permalink: Limitations\" href=\"#limitations\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eActually there are some limitations on template expressions.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e1. Fields from deeply nested data objects are not reactive:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"var data = {\n id: \u0026quot;foobar\u0026quot;, // \u0026lt;-- observable\n content: { // \u0026lt;-- observable\n title: \u0026quot;title\u0026quot;, // \u0026lt;-- NOT\n body: \u0026quot;body\u0026quot;, // \u0026lt;-- NOT\n footer: \u0026quot;footer\u0026quot; // \u0026lt;-- NOT\n }\n};\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003evar\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003edata\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003eid\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"foobar\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-c\"\u003e// \u0026lt;-- observable\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003econtent\u003c/span\u003e: \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-c\"\u003e// \u0026lt;-- observable\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003etitle\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"title\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-c\"\u003e// \u0026lt;-- NOT\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003ebody\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"body\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-c\"\u003e// \u0026lt;-- NOT\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003efooter\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"footer\"\u003c/span\u003e \u003cspan class=\"pl-c\"\u003e// \u0026lt;-- NOT\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e2. Template expressions including any kind of Javascript syntax are not supported:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;table\u0026gt;\n \u0026lt;tr\u0026gt;\n \u0026lt;td\u0026gt;Name:\u0026lt;/td\u0026gt;\n \u0026lt;!-- Supported: --\u0026gt;\n \u0026lt;td\u0026gt;{{= data.name }}\u0026lt;/td\u0026gt;\n \u0026lt;/tr\u0026gt;\n \u0026lt;tr\u0026gt;\n \u0026lt;td\u0026gt;Tweets:\u0026lt;/td\u0026gt;\n \u0026lt;!-- Not Supported: --\u0026gt;\n \u0026lt;td\u0026gt;{{= data.tweets ? data.tweets.length : 0 }}\u0026lt;/td\u0026gt;\n \u0026lt;/tr\u0026gt;\n\u0026lt;/table\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etable\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eName:\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-c\"\u003e\u0026lt;!-- Supported: --\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{= data.name }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eTweets:\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-c\"\u003e\u0026lt;!-- Not Supported: --\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{= data.tweets ? data.tweets.length : 0 }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etable\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eJust use plain property notation within the curly brackets.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-strict-proxy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eStrict-Proxy Mode\u003c/h3\u003e\u003ca id=\"user-content-strict-proxy-mode\" class=\"anchor\" aria-label=\"Permalink: Strict-Proxy Mode\" href=\"#strict-proxy-mode\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eWhenever \u003cstrong\u003eall\u003c/strong\u003e your template expressions are just using proxy notation it enables a special \"strict-proxy\" mode under the hood, which further boosts performance from every update to a maximum. This mode has no advantage when every render loop has to apply almost new items.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eThis enables \"strict-proxy\" mode:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;item\u0026gt;\n \u0026lt;caption\u0026gt;\n Name:\n \u0026lt;/caption\u0026gt;\n \u0026lt;p\u0026gt;{{= data.name }}\u0026lt;/p\u0026gt;\n \u0026lt;caption\u0026gt;\n Email:\n \u0026lt;/caption\u0026gt;\n \u0026lt;p\u0026gt;{{= data.mail }}\u0026lt;/p\u0026gt;\n\u0026lt;/item\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eitem\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ecaption\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n Name:\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ecaption\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{= data.name }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ecaption\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n Email:\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ecaption\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{= data.mail }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eitem\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThis won't enable it:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;item\u0026gt;\n \u0026lt;caption\u0026gt;\n Name:\n \u0026lt;/caption\u0026gt;\n \u0026lt;p\u0026gt;{{= data.name }}\u0026lt;/p\u0026gt;\n \u0026lt;caption\u0026gt;\n Email:\n \u0026lt;/caption\u0026gt;\n \u0026lt;p\u0026gt;{{ data.mail }}\u0026lt;/p\u0026gt;\n\u0026lt;/item\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eitem\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ecaption\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n Name:\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ecaption\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{= data.name }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ecaption\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n Email:\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ecaption\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{ data.mail }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eitem\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eAlso using conditionals, includes, loops and inline Javascript will prevent switching to the \"strict-proxy\" mode. You can't switch this mode by yourself. It just activates when conditions are met.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-observable\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eObservable Array (Virtual NodeList)\u003c/h3\u003e\u003ca id=\"user-content-observable-array-virtual-nodelist\" class=\"anchor\" aria-label=\"Permalink: Observable Array (Virtual NodeList)\" href=\"#observable-array-virtual-nodelist\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eIn addition to react on changes of property values you can additionally also listen to changes made to the Array index of the store.\nMikado provides you an observable Array that acts like a native Array and apply all changes to a synchronized NodeList under the hood.\nIt also uses native Proxy which fully falls back to a legacy observer, when not available.\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eSemantically the observable array you will get from \u003ccode\u003eMikado.Array()\u003c/code\u003e is equal to an array-like Javascript Array.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-mikado.array\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eCreate an observable array:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"var store = new Mikado.Array();\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003evar\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003estore\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-k\"\u003enew\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003eArray\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eCreate an observable array with initial data:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"var items = [ ... ];\nvar store = new Mikado.Array(items);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003evar\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eitems\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e[\u003c/span\u003e ... \u003cspan class=\"pl-kos\"\u003e]\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-k\"\u003evar\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003estore\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-k\"\u003enew\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003eArray\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003eitems\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eEvery observable array requires binding to a \u003cstrong\u003emounted\u003c/strong\u003e Mikado instance, because it needs to apply render tasks somewhere:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"var view = Mikado(template, { observe: store, mount: root });\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003evar\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003etemplate\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eobserve\u003c/span\u003e: \u003cspan class=\"pl-s1\"\u003estore\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003emount\u003c/span\u003e: \u003cspan class=\"pl-s1\"\u003eroot\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-array.mount\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eYou can also mount an observable array to a Mikado instance (and also switch mounting):\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"const store = new Mikado.Array();\nconst view = Mikado(template, { mount: root });\n\nstore.mount(view);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003estore\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-k\"\u003enew\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003eArray\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003etemplate\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003emount\u003c/span\u003e: \u003cspan class=\"pl-s1\"\u003eroot\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\n\u003cspan class=\"pl-s1\"\u003estore\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003emount\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eNow the observable array is linked with your instance. Whenever you change the array all changes will apply automatically to the corresponding DOM components.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eYou can use all common array built-ins, e.g.:\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-array.push\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"store.push({ ... });\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003estore\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003epush\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e ... \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-array.pop\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"var last = store.pop();\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003evar\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003elast\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003estore\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003epop\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-array.unshift\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"store.unshift({ ... });\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003estore\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eunshift\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e ... \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-array.shift\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"var first = store.shift();\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003evar\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003efirst\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003estore\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eshift\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-array.slice\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"store.slice(3, 1);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003estore\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eslice\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e3\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e1\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-array.splice\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"store.splice(0, 1, { ... });\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003estore\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003esplice\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e0\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e1\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e ... \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eYou can \u003cstrong\u003eget and set via array index access\u003c/strong\u003e. This feature also has a non-proxy fallback included.\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"store[0] = { ... };\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003estore\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e[\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e0\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e]\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e ... \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"store[store.length] = { ... };\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003estore\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e[\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003estore\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003elength\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e]\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e ... \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"var first = store[0];\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003evar\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003efirst\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003estore\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e[\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e0\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e]\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-array.set\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eYou can replace the array contents by:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"var items = [ ... ];\nstore.set(items);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003evar\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eitems\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e[\u003c/span\u003e ... \u003cspan class=\"pl-kos\"\u003e]\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-s1\"\u003estore\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eset\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003eitems\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThis is recommended instead of pushing each item one by one, \u003ccode\u003estore.set\u003c/code\u003e will also handle keyed reconciliation.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-array.concat\"\u003e\u003c/a\u003e\n\u003ca name=\"user-content-array.indexof\"\u003e\u003c/a\u003e\n\u003ca name=\"user-content-array.lastindexof\"\u003e\u003c/a\u003e\n\u003ca name=\"user-content-array.includes\"\u003e\u003c/a\u003e\n\u003ca name=\"user-content-array.filter\"\u003e\u003c/a\u003e\n\u003ca name=\"user-content-array.map\"\u003e\u003c/a\u003e\n\u003ca name=\"user-content-array.reverse\"\u003e\u003c/a\u003e\n\u003ca name=\"user-content-array.sort\"\u003e\u003c/a\u003e\n\u003ca name=\"user-content-array.swap\"\u003e\u003c/a\u003e\n\u003ca name=\"user-content-array.foreach\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eA list of all supported array prototypes:\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003elength\u003c/li\u003e\n\u003cli\u003epush(obj)\u003c/li\u003e\n\u003cli\u003epop()\u003c/li\u003e\n\u003cli\u003eshift(obj)\u003c/li\u003e\n\u003cli\u003eunshift(obj)\u003c/li\u003e\n\u003cli\u003eslice(index, count)\u003c/li\u003e\n\u003cli\u003esplice(index, count, insert)\u003c/li\u003e\n\u003cli\u003econcat(arr)\u003c/li\u003e\n\u003cli\u003eindexOf(obj)\u003c/li\u003e\n\u003cli\u003elastIndexOf(obj)\u003c/li\u003e\n\u003cli\u003eincludes(obj)\u003c/li\u003e\n\u003cli\u003efilter(fn)\u003c/li\u003e\n\u003cli\u003emap(fn)\u003c/li\u003e\n\u003cli\u003ereverse()\u003c/li\u003e\n\u003cli\u003esort(fn)\u003c/li\u003e\n\u003cli\u003eswap(a, b)\u003c/li\u003e\n\u003cli\u003eforEach(fn)\u003c/li\u003e\n\u003cli\u003eset(arr) (used to replace the array contents)\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003eThese methods are implemented without some extensions like parameter chaining, e.g. \u003ccode\u003earray.push(a, b, c)\u003c/code\u003e is not available, instead, you have to call push for each item one by one.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eThere are some methods which slightly differs from the original implementation of native Arrays. The following methods will apply changes \u003cstrong\u003e\u003cem\u003ein place\u003c/em\u003e\u003c/strong\u003e and returning the original reference instead of making a copy:\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003econcat\u003c/li\u003e\n\u003cli\u003efilter\u003c/li\u003e\n\u003cli\u003emap\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003eWhenever you need the original native Array behavior including all extensions and variants you can simply do that by:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"const new_array = [ ... ];\nconst copy = Array.prototype.concat.call(store, new_array);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003enew_array\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e[\u003c/span\u003e ... \u003cspan class=\"pl-kos\"\u003e]\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003ecopy\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eArray\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003eprototype\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003econcat\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003ecall\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003estore\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003enew_array\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"const copy = Array.prototype.map.call(store, obj =\u0026gt; obj);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003ecopy\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eArray\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003eprototype\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003emap\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003ecall\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003estore\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eobj\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u0026gt;\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eobj\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eIn a situation when falling back to the non-proxy polyfill because of missing support for native Proxy, there is a limitation.\nYou cannot fill sparse arrays or access indexes which are greater than the current \u003ccode\u003earray.length\u003c/code\u003e.\nThere is just one undefined index that could always access (by read/write) that is the last \"undefined\" index on an array when you call \u003ccode\u003earray[array.length]\u003c/code\u003e.\nThis index is a special marker that increases the \"virtual\" array size.\nWhenever you assign a value to this special index the size of the observable index growth automatically and the next \"undefined\" index in the queue becomes this marker.\nThis limitation is not existing when the ES6 proxy is available.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eAlso, there are some divergent characteristics when using reflection:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"var store = Mikado.Array();\nconsole.log(store.constructor === Array); // -\u0026gt; false\nconsole.log(store.prototype === Array.prototype); // -\u0026gt; false\nconsole.log(store instanceof Array); // -\u0026gt; false\nconsole.log(Array.isArray(store)); // -\u0026gt; false\nconsole.log(store instanceof Mikado.Array); // -\u0026gt; true\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003evar\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003estore\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eArray\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-smi\"\u003econsole\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003elog\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003estore\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003econstructor\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e===\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eArray\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e \u003cspan class=\"pl-c\"\u003e// -\u0026gt; false\u003c/span\u003e\n\u003cspan class=\"pl-smi\"\u003econsole\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003elog\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003estore\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003eprototype\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e===\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eArray\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003eprototype\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e \u003cspan class=\"pl-c\"\u003e// -\u0026gt; false\u003c/span\u003e\n\u003cspan class=\"pl-smi\"\u003econsole\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003elog\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003estore\u003c/span\u003e \u003cspan class=\"pl-k\"\u003einstanceof\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eArray\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e \u003cspan class=\"pl-c\"\u003e// -\u0026gt; false\u003c/span\u003e\n\u003cspan class=\"pl-smi\"\u003econsole\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003elog\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-v\"\u003eArray\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eisArray\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003estore\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e \u003cspan class=\"pl-c\"\u003e// -\u0026gt; false\u003c/span\u003e\n\u003cspan class=\"pl-smi\"\u003econsole\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003elog\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003estore\u003c/span\u003e \u003cspan class=\"pl-k\"\u003einstanceof\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003eArray\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e \u003cspan class=\"pl-c\"\u003e// -\u0026gt; true\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThe proxy feature theoretically allows all those checks but could not be used to keep the polyfill working in addition to sharing most of the same codebase. Alternatively you can use an \u003ccode\u003einstanceof\u003c/code\u003e check for identification.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-array.transaction\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eTransactions\u003c/h3\u003e\u003ca id=\"user-content-transactions\" class=\"anchor\" aria-label=\"Permalink: Transactions\" href=\"#transactions\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eSince the array observer apply all changes on the array index instantly to the DOM, reconciliation has no chance to run.\nFor this purpose you can use the \u003ccode\u003estore.transaction()\u003c/code\u003e feature, which let you apply all changes within a function and commit them by taking reconciling into account.\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"store.transaction(function(){\n // collect changes:\n store[0].title = \u0026quot;John\u0026quot;;\n store[12].class = \u0026quot;active\u0026quot;;\n store[10] = store.pop();\n store[11] = store.shift();\n});\n// changes applied\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003estore\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003etransaction\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-k\"\u003efunction\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-c\"\u003e// collect changes:\u003c/span\u003e\n \u003cspan class=\"pl-s1\"\u003estore\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e[\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e0\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e]\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003etitle\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"John\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n \u003cspan class=\"pl-s1\"\u003estore\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e[\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e12\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e]\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003eclass\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"active\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n \u003cspan class=\"pl-s1\"\u003estore\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e[\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e10\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e]\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003estore\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003epop\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n \u003cspan class=\"pl-s1\"\u003estore\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e[\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e11\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e]\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003estore\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eshift\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e// changes applied\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eA transaction is used when editing an \u003cstrong\u003eexisting\u003c/strong\u003e state in a bulk. Whenever you want to initialize a new state, e.g. when data was coming from a server, you should use \u003ccode\u003estore.set(data)\u003c/code\u003e instead.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-pools\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eComponent Pools\u003c/h2\u003e\u003ca id=\"user-content-component-pools\" class=\"anchor\" aria-label=\"Permalink: Component Pools\" href=\"#component-pools\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eUsing pools greatly enhance the strategy of keyed and non-keyed recycling. Mikado detects automatically if it needs to use keyed or non-keyed pooling and will apply different strategies optimized for each of them.\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003ePools just enables when a keyed or non-keyed recycle strategy was used in combination.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp dir=\"auto\"\u003eEnable pool (keyed or non-keyed):\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"const view = new Mikado(tpl, {\n recycle: true,\n pool: true\n});\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-k\"\u003enew\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003etpl\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003erecycle\u003c/span\u003e: \u003cspan class=\"pl-c1\"\u003etrue\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003epool\u003c/span\u003e: \u003cspan class=\"pl-c1\"\u003etrue\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eMikado will auto-balance pools automatically.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-mikado.flush\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eFlush Pools\u003c/h4\u003e\u003ca id=\"user-content-flush-pools\" class=\"anchor\" aria-label=\"Permalink: Flush Pools\" href=\"#flush-pools\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eYou can delete pool contents at any time by:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"view.flush();\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eflush\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-hydration\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eHydration\u003c/h2\u003e\u003ca id=\"user-content-hydration\" class=\"anchor\" aria-label=\"Permalink: Hydration\" href=\"#hydration\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eHydration is a concept where the server is sending some basic HTML structure (or the whole App/Page) and the client consumes those contents into its own rendering system. This will improve several performance aspects of page loading (e.g. the Lighthouse test) but also it enables you to have server-side-rendered content by also providing a full PWA (aka \"Single-Page-Application\") experience at the same time.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eMikado uses hydration strategy, where components are hydrated progressively right before a render task will be performed.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eAssume the server was sending this HTML structure as initial:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;html\u0026gt;\n\u0026lt;body\u0026gt;\n \u0026lt;main\u0026gt;\n \u0026lt;section\u0026gt;\n \u0026lt;title\u0026gt;Title\u0026lt;/title\u0026gt;\n \u0026lt;tweets\u0026gt;\n \u0026lt;tweet\u0026gt;\u0026lt;!-- ... --\u0026gt;\u0026lt;/tweet\u0026gt;\n \u0026lt;tweet\u0026gt;\u0026lt;!-- ... --\u0026gt;\u0026lt;/tweet\u0026gt;\n \u0026lt;tweet\u0026gt;\u0026lt;!-- ... --\u0026gt;\u0026lt;/tweet\u0026gt;\n \u0026lt;/tweets\u0026gt;\n \u0026lt;/section\u0026gt;\n \u0026lt;/main\u0026gt;\n\u0026lt;/body\u0026gt;\n\u0026lt;/html\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ehtml\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebody\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003emain\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003esection\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etitle\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eTitle\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etitle\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etweets\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etweet\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-c\"\u003e\u0026lt;!-- ... --\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etweet\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etweet\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-c\"\u003e\u0026lt;!-- ... --\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etweet\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etweet\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-c\"\u003e\u0026lt;!-- ... --\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etweet\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etweets\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003esection\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003emain\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ebody\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ehtml\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eYour template looks like:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;section\u0026gt;\n \u0026lt;title\u0026gt;{{ data.title }}\u0026lt;/title\u0026gt;\n \u0026lt;tweets foreach=\u0026quot;data.tweets\u0026quot;\u0026gt;\n \u0026lt;tweet\u0026gt;\n \u0026lt;h1\u0026gt;{{ data.title }}\u0026lt;/h1\u0026gt;\n \u0026lt;title\u0026gt;Comments:\u0026lt;/title\u0026gt;\n \u0026lt;div foreach=\u0026quot;data.comments\u0026quot;\u0026gt;\n \u0026lt;comment\u0026gt;\u0026lt;!-- ... --\u0026gt;\u0026lt;/comment\u0026gt;\n \u0026lt;/div\u0026gt;\n \u0026lt;/tweet\u0026gt;\n \u0026lt;/tweets\u0026gt;\n\u0026lt;/section\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003esection\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etitle\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{ data.title }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etitle\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etweets\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eforeach\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003edata.tweets\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etweet\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eh1\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{ data.title }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eh1\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etitle\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eComments:\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etitle\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eforeach\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003edata.comments\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ecomment\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-c\"\u003e\u0026lt;!-- ... --\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ecomment\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ediv\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etweet\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etweets\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003esection\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eWhen a mounted template matches the same DOM structure like the component which should be hydrated, the initialization of the template will boot up faster because the factory is derived instead of created. You can use Mikados SSR feature to provide client-compatible structures on the server-side.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eWhen \u003ccode\u003eDEBUG\u003c/code\u003e is enabled (or by using one of the debug builds) you'll get a message in the console when hydration falls back into factory construction because of an incompatible DOM structure.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp dir=\"auto\"\u003eYou can hydrate the existing structure when creating instance (prefetch):\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"const root = document.querySelector(\u0026quot;main\u0026quot;);\nconst view = new Mikado(tpl, { mount: root, hydrate: true });\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eroot\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-smi\"\u003edocument\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003equerySelector\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"main\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-k\"\u003enew\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003etpl\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003emount\u003c/span\u003e: \u003cspan class=\"pl-s1\"\u003eroot\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003ehydrate\u003c/span\u003e: \u003cspan class=\"pl-c1\"\u003etrue\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eYou can also do this just right before mounting by passing the 2nd parameter:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"const view = new Mikado(tpl);\n// ... somewhat later in the runtime\nview.mount(document.querySelector(\u0026quot;main\u0026quot;), /* hydrate? */ true);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-k\"\u003enew\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003etpl\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e// ... somewhat later in the runtime\u003c/span\u003e\n\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003emount\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-smi\"\u003edocument\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003equerySelector\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"main\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-c\"\u003e/* hydrate? */\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003etrue\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eWhen a hydration breaks because it isn't compatible for some reason, it fully skips this process silently (logs a message when DEBUG was enabled) and falls back to a construction of a factory instead.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-shadow\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eWeb Components (Shadow DOM)\u003c/h2\u003e\u003ca id=\"user-content-web-components-shadow-dom\" class=\"anchor\" aria-label=\"Permalink: Web Components (Shadow DOM)\" href=\"#web-components-shadow-dom\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eWhen using shadow DOM to build web components the compiler needs to apply a different strategy.\nTherefore, you will need 2 additional template tags:\u003c/p\u003e\n\u003col dir=\"auto\"\u003e\n\u003cli\u003e\u003ccode\u003e\u0026lt;component/\u0026gt;\u003c/code\u003e as the outer root will enable rendering on a shadow root\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e\u0026lt;template/\u0026gt;\u003c/code\u003e will identify your template from the rest of markup\u003c/li\u003e\n\u003c/ol\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;component\u0026gt;\n \u0026lt;!-- optional styles/scripts/etc. --\u0026gt;\n \u0026lt;link href=\u0026quot;css/component.css\u0026quot; rel=\u0026quot;stylesheet\u0026quot;\u0026gt;\n \u0026lt;script src=\u0026quot;js/component.js\u0026quot;\u0026gt;\u0026lt;/script\u0026gt;\n \u0026lt;style\u0026gt;#user-list{ width: 100%; }\u0026lt;/style\u0026gt;\n \u0026lt;script\u0026gt;window.username = \u0026quot;John\u0026quot;;\u0026lt;/script\u0026gt;\n \u0026lt;!-- you can include anything here ... --\u0026gt;\n \u0026lt;!-- components requires the template tag --\u0026gt;\n \u0026lt;template\u0026gt;\n \u0026lt;!-- templates has single outer root element: --\u0026gt;\n \u0026lt;table id=\u0026quot;user-list\u0026quot;\u0026gt;\n \u0026lt;tr\u0026gt;\n \u0026lt;td\u0026gt;User:\u0026lt;/td\u0026gt;\n \u0026lt;td\u0026gt;{{ window.username }}\u0026lt;/td\u0026gt;\n \u0026lt;/tr\u0026gt;\n \u0026lt;tr\u0026gt;\n \u0026lt;td\u0026gt;Tweets:\u0026lt;/td\u0026gt;\n \u0026lt;td\u0026gt;{{ data.tweets.length }}\u0026lt;/td\u0026gt;\n \u0026lt;/tr\u0026gt;\n \u0026lt;/table\u0026gt;\n \u0026lt;/template\u0026gt;\n\u0026lt;/component\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ecomponent\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-c\"\u003e\u0026lt;!-- optional styles/scripts/etc. --\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003elink\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003ehref\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003ecss/component.css\u003c/span\u003e\" \u003cspan class=\"pl-c1\"\u003erel\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003estylesheet\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003esrc\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003ejs/component.js\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003estyle\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e#\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003euser-list\u003c/span\u003e{ \u003cspan class=\"pl-c1\"\u003ewidth\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e100\u003cspan class=\"pl-smi\"\u003e%\u003c/span\u003e\u003c/span\u003e; }\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003estyle\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-smi\"\u003ewindow\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003eusername\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"John\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-c\"\u003e\u0026lt;!-- you can include anything here ... --\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-c\"\u003e\u0026lt;!-- components requires the template tag --\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etemplate\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-c\"\u003e\u0026lt;!-- templates has single outer root element: --\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etable\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eid\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003euser-list\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eUser:\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{ window.username }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eTweets:\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{ data.tweets.length }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etable\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etemplate\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ecomponent\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eYou can't use any template expressions outside \u003ccode\u003e\u0026lt;template/\u0026gt;\u003c/code\u003e.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp dir=\"auto\"\u003eYou can also render any normal template (non-components) to a plain dedicated shadow root by using the \u003ccode\u003eshadow: true\u003c/code\u003e option (also supported by the light bundle):\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"const view = new Mikado(tpl, { shadow: true });\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-k\"\u003enew\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003etpl\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eshadow\u003c/span\u003e: \u003cspan class=\"pl-c1\"\u003etrue\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eTheoretically you can put the \u003ccode\u003e\u0026lt;link/\u0026gt;\u003c/code\u003e, \u003ccode\u003e\u0026lt;style/\u0026gt;\u003c/code\u003e and \u003ccode\u003e\u0026lt;script/\u0026gt;\u003c/code\u003e inside a normal non-component template by also using the \u003ccode\u003eshadow: true\u003c/code\u003e option.\nBut there is one important difference. Within a normal template those tags could be re-rendered and this might end in re-initializing of all those assets.\nWithin a web component there is a top level scope, which is created once and will stay for all your further template tasks.\nThe template will render on a new \"hidden\" element \u003ccode\u003e\u0026lt;root/\u0026gt;\u003c/code\u003e which is part of the top level scope.\nThat is because the view needs to be mounted to an element, and the top level scope of shadow root couldn't be mounted because of mixed content.\nDon't rely on the existence of \u003ccode\u003e\u0026lt;root/\u0026gt;\u003c/code\u003e, when using static templates or \u003ccode\u003eview.once()\u003c/code\u003e it might not exist.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eAssume when mounted a web component template to an element \u003ccode\u003e\u0026lt;main\u0026gt;\u003c/code\u003e, the DOM structure looks like:\u003c/p\u003e\n\u003cdiv class=\"snippet-clipboard-content notranslate position-relative overflow-auto\" data-snippet-clipboard-copy-content=\"\u0026lt;main\u0026gt;\n #shadow-root\n \u0026lt;link/\u0026gt;\n \u0026lt;style/\u0026gt;\n \u0026lt;script/\u0026gt;\n \u0026lt;root\u0026gt;\n #template\n #template\n #template\n ...\n \u0026lt;/root\u0026gt;\"\u003e\u003cpre class=\"notranslate\"\u003e\u003ccode\u003e\u0026lt;main\u0026gt;\n #shadow-root\n \u0026lt;link/\u0026gt;\n \u0026lt;style/\u0026gt;\n \u0026lt;script/\u0026gt;\n \u0026lt;root\u0026gt;\n #template\n #template\n #template\n ...\n \u0026lt;/root\u0026gt;\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-full-template\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eFull Template Example\u003c/h2\u003e\u003ca id=\"user-content-full-template-example\" class=\"anchor\" aria-label=\"Permalink: Full Template Example\" href=\"#full-template-example\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eUse this almost complete template example to check if you know everything about the template mechanism:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;main cache=\u0026quot;true\u0026quot; id=\u0026quot;{{ data.view }}\u0026quot;\u0026gt;\n \u0026lt;table\u0026gt;\n \u0026lt;thead\u0026gt;\n \u0026lt;tr\u0026gt;\n \u0026lt;th\u0026gt;Index\u0026lt;/th\u0026gt;\n \u0026lt;th\u0026gt;Title\u0026lt;/th\u0026gt;\n \u0026lt;th\u0026gt;Media\u0026lt;/th\u0026gt;\n \u0026lt;th\u0026gt;Category\u0026lt;/th\u0026gt;\n \u0026lt;th\u0026gt;Comment\u0026lt;/th\u0026gt;\n \u0026lt;th\u0026gt;Date\u0026lt;/th\u0026gt;\n \u0026lt;th include=\u0026quot;pager\u0026quot;\u0026gt;\u0026lt;/th\u0026gt;\n \u0026lt;/tr\u0026gt;\n \u0026lt;/thead\u0026gt;\n \u0026lt;tbody foreach=\u0026quot;data.entries\u0026quot;\u0026gt;\n \u0026lt;script\u0026gt;{{@ const datestr = new Date(data.date).toLocaleString() }}\u0026lt;/script\u0026gt;\n \u0026lt;tr key=\u0026quot;data.id\u0026quot; data-id=\u0026quot;{{ data.id }}\u0026quot;\u0026gt;\n \u0026lt;td\u0026gt;{{ index + 1 }}\u0026lt;/td\u0026gt;\n \u0026lt;td\u0026gt;{{= data.title }}\u0026lt;/td\u0026gt;\n \u0026lt;td\u0026gt;{{# data.media }}\u0026lt;/td\u0026gt;\n \u0026lt;td\u0026gt;{{? data.category }}\u0026lt;/td\u0026gt;\n \u0026lt;td\u0026gt;{{! data.comment }}\u0026lt;/td\u0026gt;\n \u0026lt;td\u0026gt;{{ datestr }}\u0026lt;/td\u0026gt;\n \u0026lt;td style=\u0026quot;opacity: {{ state.selected === data.id ? '1' : '0.5' }}\u0026quot;\u0026gt;\n \u0026lt;select change=\u0026quot;select-active:root\u0026quot;\u0026gt;\n \u0026lt;option value=\u0026quot;on\u0026quot; selected=\u0026quot;{{ data.mode === 'on' }}\u0026quot;\u0026gt;Enabled\u0026lt;/option\u0026gt;\n \u0026lt;option value=\u0026quot;off\u0026quot; selected=\u0026quot;{{ data.mode === 'off' }}\u0026quot;\u0026gt;Disabled\u0026lt;/option\u0026gt;\n \u0026lt;/select\u0026gt;\n \u0026lt;/td\u0026gt;\n \u0026lt;/tr\u0026gt;\n \u0026lt;/tbody\u0026gt;\n \u0026lt;tfoot if=\u0026quot;!data.entries.length\u0026quot;\u0026gt;\n \u0026lt;tr\u0026gt;\n \u0026lt;td colspan=\u0026quot;7\u0026quot;\u0026gt;No entries found.\u0026lt;/td\u0026gt;\n \u0026lt;/tr\u0026gt;\n \u0026lt;/tfoot\u0026gt;\n \u0026lt;/table\u0026gt;\n\u0026lt;/main\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003emain\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003ecache\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003etrue\u003c/span\u003e\" \u003cspan class=\"pl-c1\"\u003eid\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e{{ data.view }}\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etable\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ethead\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eth\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eIndex\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eth\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eth\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eTitle\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eth\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eth\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eMedia\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eth\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eth\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eCategory\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eth\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eth\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eComment\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eth\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eth\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eDate\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eth\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eth\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003einclude\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003epager\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eth\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ethead\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etbody\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eforeach\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003edata.entries\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e@ \u003cspan class=\"pl-s1\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003edatestr\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-k\"\u003enew\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eDate\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003edata\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003edate\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003etoLocaleString\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003ekey\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003edata.id\u003c/span\u003e\" \u003cspan class=\"pl-c1\"\u003edata-id\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e{{ data.id }}\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{ index + 1 }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{= data.title }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{# data.media }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{? data.category }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{! data.comment }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e{{ datestr }}\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003estyle\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003eopacity: {{ state.selected === data.id ? '1' : '0.5' }}\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eselect\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003echange\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003eselect-active:root\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eoption\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003evalue\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003eon\u003c/span\u003e\" \u003cspan class=\"pl-c1\"\u003eselected\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e{{ data.mode === 'on' }}\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eEnabled\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eoption\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eoption\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003evalue\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003eoff\u003c/span\u003e\" \u003cspan class=\"pl-c1\"\u003eselected\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e{{ data.mode === 'off' }}\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eDisabled\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eoption\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eselect\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etbody\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etfoot\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eif\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e!data.entries.length\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003ecolspan\u003c/span\u003e=\"\u003cspan class=\"pl-s\"\u003e7\u003c/span\u003e\"\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003eNo entries found.\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etd\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etr\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etfoot\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etable\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003emain\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eA proper definition and call for this template could look like this:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"// the named include \u0026quot;pager\u0026quot; needs to be registered before use\nMikado.register(tpl_pager);\n\n// define route \u0026quot;select-active\u0026quot;\nview.route(\u0026quot;select-active\u0026quot;, function(target, event){\n const id = Number(target.dataset.id);\n view.state.selected = id;\n});\n\nview.render({\n view: \u0026quot;video\u0026quot;,\n entries: [{\n id: 1,\n date: \u0026quot;2023-12-01T14:00:00\u0026quot;,\n title: \u0026quot;A simple title 1\u0026quot;,\n media: \u0026quot;\u0026lt;img src='img1.jpg'\u0026gt;\u0026quot;,\n category: null,\n comment: \u0026quot;Some \u0026lt;script\u0026gt;untrusted\u0026lt;/script\u0026gt; content\u0026quot;,\n mode: \u0026quot;off\u0026quot;\n },{\n id: 2,\n date: \u0026quot;2023-12-02T15:00:00\u0026quot;,\n title: \u0026quot;A simple title 2\u0026quot;,\n media: \u0026quot;\u0026lt;video src='mov2.mp4'\u0026gt;\u0026quot;,\n category: null,\n comment: \u0026quot;Some \u0026lt;script\u0026gt;untrusted\u0026lt;/script\u0026gt; content\u0026quot;,\n mode: \u0026quot;on\u0026quot;\n },{\n id: 3,\n date: \u0026quot;2023-12-03T16:00:00\u0026quot;,\n title: \u0026quot;A simple title 3\u0026quot;,\n media: \u0026quot;\u0026lt;img src='img3.jpg'\u0026gt;\u0026quot;,\n category: null,\n comment: \u0026quot;Some \u0026lt;script\u0026gt;untrusted\u0026lt;/script\u0026gt; content\u0026quot;,\n mode: \u0026quot;off\u0026quot;\n }]\n});\"\u003e\u003cpre\u003e\u003cspan class=\"pl-c\"\u003e// the named include \"pager\" needs to be registered before use\u003c/span\u003e\n\u003cspan class=\"pl-v\"\u003eMikado\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eregister\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003etpl_pager\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\n\u003cspan class=\"pl-c\"\u003e// define route \"select-active\"\u003c/span\u003e\n\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eroute\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s\"\u003e\"select-active\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efunction\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003etarget\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eevent\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eid\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eNumber\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003etarget\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003edataset\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003eid\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n \u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003estate\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003eselected\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eid\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\n\u003cspan class=\"pl-s1\"\u003eview\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003erender\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003eview\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"video\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003eentries\u003c/span\u003e: \u003cspan class=\"pl-kos\"\u003e[\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003eid\u003c/span\u003e: \u003cspan class=\"pl-c1\"\u003e1\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003edate\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"2023-12-01T14:00:00\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003etitle\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"A simple title 1\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003emedia\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"\u0026lt;img src='img1.jpg'\u0026gt;\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003ecategory\u003c/span\u003e: \u003cspan class=\"pl-c1\"\u003enull\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003ecomment\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"Some \u0026lt;script\u0026gt;untrusted\u0026lt;/script\u0026gt; content\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003emode\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"off\"\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003eid\u003c/span\u003e: \u003cspan class=\"pl-c1\"\u003e2\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003edate\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"2023-12-02T15:00:00\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003etitle\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"A simple title 2\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003emedia\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"\u0026lt;video src='mov2.mp4'\u0026gt;\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003ecategory\u003c/span\u003e: \u003cspan class=\"pl-c1\"\u003enull\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003ecomment\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"Some \u0026lt;script\u0026gt;untrusted\u0026lt;/script\u0026gt; content\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003emode\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"on\"\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003eid\u003c/span\u003e: \u003cspan class=\"pl-c1\"\u003e3\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003edate\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"2023-12-03T16:00:00\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003etitle\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"A simple title 3\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003emedia\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"\u0026lt;img src='img3.jpg'\u0026gt;\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003ecategory\u003c/span\u003e: \u003cspan class=\"pl-c1\"\u003enull\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003ecomment\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"Some \u0026lt;script\u0026gt;untrusted\u0026lt;/script\u0026gt; content\"\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003emode\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e\"off\"\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e]\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eEach template part explained:\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ccode\u003ecache=\"true\"\u003c/code\u003e let the compiler prebuilt the cache strategy, you can't switch it to off when creating an instance\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eid=\"{{ data.view }}\"\u003c/code\u003e simple expression for inserting dynamic content\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eif=\"!data.entries.length\"\u003c/code\u003e the if-directive checks the condition and will render everything nested as a new template (inline definition or extern by using \"include\"), the nested template needs to have one outer element as the root\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eforeach=\"data.entries\"\u003c/code\u003e the foreach-directive loops the rendering of array items by everything nested as a new template (inline definition or extern by using \"include\"), the nested template needs to have one outer element as the root\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e{{@ ... }}\u003c/code\u003e an expression to include pure javascript syntax (access limited by the scope of the template), wrapped into a \u003ccode\u003e\u0026lt;script/\u0026gt;\u003c/code\u003e tag just for runtime compiler support.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003ekey=\"data.id\"\u003c/code\u003e extract the key value from the data, a given key is limiting the recycling of already rendered components by a keyed strategy\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003edata-id=\"{{ data.id }}\" root\u003c/code\u003e exports \"data.id\" as an attribute, also define \"root\" as the event target for the listener \"select-active\", pretty useful when multiple routes on different elements needs the same data attributes\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e{{ index + 1 }}\u003c/code\u003e uses the builtin keyword \"index\" which refers to the current index of looped data\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e{{= data.title }}\u003c/code\u003e uses reactive approach by binding the html node to the data field, so when changing the data \u003ccode\u003edata.title =\"another title\"\u003c/code\u003e the node contents will also change accordingly\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e{{# data.media }}\u003c/code\u003e allows to include html syntax (this is unsafe, don't pass user inputs, you will need to prevent XSS by yourself)\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e{{? data.category }}\u003c/code\u003e only prints a \"truthy\" value including 0 (skips undefined, null, NaN, false)\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e{{! data.comment }}\u003c/code\u003e escape the value before print out (SSR only)\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e{{ datestr }}\u003c/code\u003e access the variable which was created by inline syntax before\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003estyle=\"opacity: {{ state.selected === data.id '1' ? '0.5' }}\"\u003c/code\u003e example of dynamic attribute value\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003echange=\"select-active:root\"\u003c/code\u003e assign the route named \"select-active\" and forward the event to the element which has the given attribute name assigned to it or in this case \"root\" points to the components root (so the target inside the root function becomes the forwarded element)\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eselected=\"data.active === 'yes'\"\u003c/code\u003e when dynamic attribute values results to boolean \"false\" (not string) it will be removed from the element, because some attributes enables just by their existence (consider an option element having selected=\"false\" will end up also as a truthy selection state)\u003c/li\u003e\n\u003c/ul\u003e\n\n\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-concept\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eConcept of Shared Components\u003c/h2\u003e\u003ca id=\"user-content-concept-of-shared-components\" class=\"anchor\" aria-label=\"Permalink: Concept of Shared Components\" href=\"#concept-of-shared-components\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eMikado heavily makes use of runtime optimization. Since it is not possible to predict the recycle state of the next render task, Mikado uses a technique called \u003ccode\u003eprogressive enhancement\u003c/code\u003e on which optimizations will apply iteratively. Recycle enhancements growth as needed.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eThe most benchmarks you will find ends at the point where Mikado starts to shine. Rendering a simple table isn't really a complex task. Real applications have bigger structures including partials, includes, conditionals, etc. The concept of shared components was the basic idea of this library. It is the \"ultimate\" upgrade of the recycle paradigm and when properly used, it is one of the biggest optimization improvement you can unlock.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cbr\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/a1edf52329980ccb019e47ca3c07a86c964b91a211d78cbd74cd17b721074807/68747470733a2f2f63646e2e6a7364656c6976722e6e65742f67682f6e657874617070732d64652f6d696b61646f406d61737465722f646f632f636f6e636570742e737667\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/a1edf52329980ccb019e47ca3c07a86c964b91a211d78cbd74cd17b721074807/68747470733a2f2f63646e2e6a7364656c6976722e6e65742f67682f6e657874617070732d64652f6d696b61646f406d61737465722f646f632f636f6e636570742e737667\" alt=\"Mikado Shared Components (Concept)\" data-canonical-src=\"https://cdn.jsdelivr.net/gh/nextapps-de/mikado@master/doc/concept.svg\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003cbr\u003e\u003cbr\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eMikado will take away every complexity you might expect of such a system. You just need to structure your HTML templates and use \u003ccode\u003e.render(data)\u003c/code\u003e, that's it!\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-builds\" id=\"user-content-builds\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eCustom Builds\u003c/h2\u003e\u003ca id=\"user-content-custom-builds\" class=\"anchor\" aria-label=\"Permalink: Custom Builds\" href=\"#custom-builds\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThe \u003ccode\u003esrc\u003c/code\u003e folder of this repository requires some compilation to resolve the build flags. Those are your options:\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003eClosure Compiler (Simple or Advanced, used by this library, \u003ca href=\"https://github.com/krausest/js-framework-benchmark/blob/master/frameworks/keyed/mikado/task/build.js\"\u003eexample\u003c/a\u003e)\u003c/li\u003e\n\u003cli\u003eBabel + Plugin \u003ccode\u003ebabel-plugin-conditional-compile\u003c/code\u003e (used by this library \u003ca href=\"/nextapps-de/mikado/blob/master/task/babel.min.json\"\u003ehere\u003c/a\u003e)\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003eAs far as I know you can't resolve build flags with:\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003eWebpack\u003c/li\u003e\n\u003cli\u003eesbuild\u003c/li\u003e\n\u003cli\u003erollup\u003c/li\u003e\n\u003cli\u003eTerser\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003ePlease let me know when you have some additions. As long as you will see flags like \u003ccode\u003eif(DEBUG)\u003c/code\u003e (could be minified) in your build you shouldn't use that.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eThese are some of the basic builds located in the \u003ccode\u003edist\u003c/code\u003e folder:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-shell notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"npm run build:bundle\nnpm run build:light\nnpm run build:module\nnpm run build:es5\"\u003e\u003cpre\u003enpm run build:bundle\nnpm run build:light\nnpm run build:module\nnpm run build:es5\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003ePerform a custom build (UMD bundle) by passing build flags:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-shell notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"npm run build:custom SUPPORT_CACHE=true SUPPORT_POOLS=true LANGUAGE_OUT=ECMASCRIPT5 POLYFILL=true\"\u003e\u003cpre\u003enpm run build:custom SUPPORT_CACHE=true SUPPORT_POOLS=true LANGUAGE_OUT=ECMASCRIPT5 POLYFILL=true\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003ePerform a custom build in ESM module format:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-shell notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"npm run build:custom RELEASE=custom.module SUPPORT_CACHE=true SUPPORT_POOLS=true \"\u003e\u003cpre\u003enpm run build:custom RELEASE=custom.module SUPPORT_CACHE=true SUPPORT_POOLS=true \u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003ePerform a debug build:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-shell notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"npm run build:custom DEBUG=true SUPPORT_CACHE=true SUPPORT_POOLS=true \"\u003e\u003cpre\u003enpm run build:custom DEBUG=true SUPPORT_CACHE=true SUPPORT_POOLS=true \u003c/pre\u003e\u003c/div\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eOn custom builds each build flag will be set to \u003cem\u003e\u003cstrong\u003efalse\u003c/strong\u003e\u003c/em\u003e by default when not passed.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp dir=\"auto\"\u003eThe custom build will be saved to \u003ccode\u003edist/mikado.custom.xxxx.min.js\u003c/code\u003e or when format is module to \u003ccode\u003edist/mikado.custom.module.xxxx.min.js\u003c/code\u003e (the \"xxxx\" is a hash based on the used build flags).\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca name=\"user-content-build-flags\" id=\"user-content-builds\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch5 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eSupported Build Flags\u003c/h5\u003e\u003ca id=\"user-content-supported-build-flags\" class=\"anchor\" aria-label=\"Permalink: Supported Build Flags\" href=\"#supported-build-flags\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cmarkdown-accessiblity-table\u003e\u003ctable\u003e\n \u003ctbody\u003e\u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003eFlag\u003c/td\u003e\n \u003ctd\u003eValues\u003c/td\u003e\n \u003ctd\u003eInfo\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003eDEBUG\u003c/td\u003e\n \u003ctd\u003etrue, \u003cb\u003efalse\u003c/b\u003e\u003c/td\u003e\n \u003ctd\u003eOutput debug information to the console (default: false)\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003eSUPPORT_CACHE\u003c/td\u003e\n \u003ctd\u003etrue, false\u003c/td\u003e\n \u003ctd\u003eDOM State Cache\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003eSUPPORT_EVENTS\u003c/td\u003e\n \u003ctd\u003etrue, false\u003c/td\u003e\n \u003ctd\u003eRouting \u0026amp; Event Delegation (template event bindings)\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003eSUPPORT_KEYED\u003c/td\u003e\n \u003ctd\u003etrue, false\u003c/td\u003e\n \u003ctd\u003eSupport for keyed recycling (reconciliation)\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003eSUPPORT_WEB_COMPONENTS\u003c/td\u003e\n \u003ctd\u003etrue, false\u003c/td\u003e\n \u003ctd\u003eSupport for web components (Shadow DOM)\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003eSUPPORT_DOM_HELPERS\u003c/td\u003e\n \u003ctd\u003etrue, false\u003c/td\u003e\n \u003ctd\u003eDOM Manipulation Helpers\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003eSUPPORT_CACHE_HELPERS\u003c/td\u003e\n \u003ctd\u003etrue, false\u003c/td\u003e\n \u003ctd\u003eDOM Cache Helpers\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003eSUPPORT_ASYNC\u003c/td\u003e\n \u003ctd\u003etrue, false\u003c/td\u003e\n \u003ctd\u003eAsynchronous Rendering (support Promises)\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003eSUPPORT_POOLS\u003c/td\u003e\n \u003ctd\u003etrue, false\u003c/td\u003e\n \u003ctd\u003eSupport component pools for keyed and non-keyed recycle strategies\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003eSUPPORT_REACTIVE\u003c/td\u003e\n \u003ctd\u003etrue, false\u003c/td\u003e\n \u003ctd\u003eUse reactive data binding\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003eREACTIVE_ONLY\u003c/td\u003e\n \u003ctd\u003etrue, \u003cb\u003efalse\u003c/b\u003e\u003c/td\u003e\n \u003ctd\u003eUse a full reactive approach for all views, exclude \u003ccode\u003e.render()\u003c/code\u003e and dependencies from build (default: false)\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003eSUPPORT_CALLBACKS\u003c/td\u003e\n \u003ctd\u003etrue, false\u003c/td\u003e\n \u003ctd\u003eUse callbacks for specific render tasks\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003eSUPPORT_COMPACT_TEMPLATE\u003c/td\u003e\n \u003ctd\u003etrue, false\u003c/td\u003e\n \u003ctd\u003eTurn on when templates are compiled with the \u003ccode\u003ecompact\u003c/code\u003e or \u003ccode\u003edefault\u003c/code\u003e strategy\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003eSUPPORT_COMPILE\u003c/td\u003e\n \u003ctd\u003etrue, false\u003c/td\u003e\n \u003ctd\u003eUse the runtime compiler\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd colspan=\"3\"\u003e\u003cbr\u003e\u003cb\u003eCompiler Flags\u003c/b\u003e\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003eRELEASE\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003c/td\u003e\n \u003ctd\u003e\u003cb\u003ecustom\u003c/b\u003e\u003cbr\u003ecustom.module\u003cbr\u003ebundle\u003cbr\u003ebundle.module\u003cbr\u003ees5\u003cbr\u003elight\u003c/td\u003e\n \u003ctd\u003eOutput debug information to the console (default: false)\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003ePOLYFILL\u003c/td\u003e\n \u003ctd\u003etrue, \u003cb\u003efalse\u003c/b\u003e\u003c/td\u003e\n \u003ctd\u003eInclude Polyfills (based on LANGUAGE_OUT)\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003ePROFILER\u003c/td\u003e\n \u003ctd\u003etrue, \u003cb\u003efalse\u003c/b\u003e\u003c/td\u003e\n \u003ctd\u003eJust used for automatic performance tests\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003eLANGUAGE_OUT\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003c/td\u003e\n \u003ctd\u003eECMASCRIPT3\u003cbr\u003eECMASCRIPT5\u003cbr\u003eECMASCRIPT_2015\u003cbr\u003eECMASCRIPT_2016\u003cbr\u003eECMASCRIPT_2017\u003cbr\u003eECMASCRIPT_2018\u003cbr\u003eECMASCRIPT_2019\u003cbr\u003eECMASCRIPT_2020\u003cbr\u003eECMASCRIPT_2021\u003cbr\u003eECMASCRIPT_2022\u003cbr\u003eECMASCRIPT_NEXT\u003cbr\u003eSTABLE\u003c/td\u003e\n \u003ctd\u003eTarget language\u003c/td\u003e\n \u003c/tr\u003e\n\u003c/tbody\u003e\u003c/table\u003e\u003c/markdown-accessiblity-table\u003e\n\u003chr\u003e\n\u003cp dir=\"auto\"\u003eCopyright 2019-2024 Nextapps GmbH\u003cbr\u003e\nReleased under the \u003ca href=\"http://www.apache.org/licenses/LICENSE-2.0.html\" rel=\"nofollow\"\u003eApache 2.0 License\u003c/a\u003e\u003cbr\u003e\u003c/p\u003e\n\u003c/article\u003e","loaded":true,"timedOut":false,"errorMessage":null,"headerInfo":{"toc":[{"level":1,"text":"","anchor":"","htmlText":""},{"level":3,"text":"Mikado is the webs fastest template engine for building user interfaces. Carefully crafted to get the most out of the browser. Also providing the fastest Express Render Engine of today. Super-lightweight, outstanding performance, no dependencies.","anchor":"mikado-is-the-webs-fastest-template-engine-for-building-user-interfaces-carefully-crafted-to-get-the-most-out-of-the-browser-also-providing-the-fastest-express-render-engine-of-today-super-lightweight-outstanding-performance-no-dependencies","htmlText":"Mikado is the webs fastest template engine for building user interfaces. Carefully crafted to get the most out of the browser. Also providing the fastest Express Render Engine of today. Super-lightweight, outstanding performance, no dependencies."},{"level":2,"text":"Support this Project","anchor":"support-this-project","htmlText":"Support this Project"},{"level":2,"text":"Table of contents","anchor":"table-of-contents","htmlText":"Table of contents"},{"level":2,"text":"Get Latest","anchor":"get-latest","htmlText":"Get Latest"},{"level":3,"text":"Bundles","anchor":"bundles","htmlText":"Bundles"},{"level":3,"text":"Module","anchor":"module","htmlText":"Module"},{"level":3,"text":"Browser","anchor":"browser","htmlText":"Browser"},{"level":3,"text":"NPM","anchor":"npm","htmlText":"NPM"},{"level":3,"text":"Javascript Modules","anchor":"javascript-modules","htmlText":"Javascript Modules"},{"level":3,"text":"Feature Comparison \"Bundle vs. Light\"","anchor":"feature-comparison-bundle-vs-light","htmlText":"Feature Comparison \"Bundle vs. Light\""},{"level":2,"text":"Benchmark Ranking (Rendering Performance)","anchor":"benchmark-ranking-rendering-performance","htmlText":"Benchmark Ranking (Rendering Performance)"},{"level":4,"text":"Keyed Test Results","anchor":"keyed-test-results","htmlText":"Keyed Test Results"},{"level":2,"text":"API Overview","anchor":"api-overview","htmlText":"API Overview"},{"level":2,"text":"Mikado Options","anchor":"mikado-options","htmlText":"Mikado Options"},{"level":2,"text":"Getting Started (Basic Example)","anchor":"getting-started-basic-example","htmlText":"Getting Started (Basic Example)"},{"level":3,"text":"Compile the template:","anchor":"compile-the-template","htmlText":"Compile the template:"},{"level":3,"text":"Load library and initialize template as ES6 modules:","anchor":"load-library-and-initialize-template-as-es6-modules","htmlText":"Load library and initialize template as ES6 modules:"},{"level":3,"text":"Load library and initialize template as legacy ES5:","anchor":"load-library-and-initialize-template-as-legacy-es5","htmlText":"Load library and initialize template as legacy ES5:"},{"level":2,"text":"Rules and Conventions","anchor":"rules-and-conventions","htmlText":"Rules and Conventions"},{"level":2,"text":"Advanced Example","anchor":"advanced-example","htmlText":"Advanced Example"},{"level":2,"text":"Compile Templates","anchor":"compile-templates","htmlText":"Compile Templates"},{"level":3,"text":"Auto Naming","anchor":"auto-naming","htmlText":"Auto Naming"},{"level":3,"text":"Prebuilt Cache Strategy","anchor":"prebuilt-cache-strategy","htmlText":"Prebuilt Cache Strategy"},{"level":3,"text":"Watcher (Auto-Compile)","anchor":"watcher-auto-compile","htmlText":"Watcher (Auto-Compile)"},{"level":2,"text":"Template Expressions","anchor":"template-expressions","htmlText":"Template Expressions"},{"level":3,"text":"Value Insertion {{ ... }}","anchor":"value-insertion---","htmlText":"Value Insertion {{ ... }}"},{"level":3,"text":"JS Inline Code {{@ ... }}","anchor":"js-inline-code---","htmlText":"JS Inline Code {{@ ... }}"},{"level":3,"text":"Truthy Values {{? ... }}","anchor":"truthy-values---","htmlText":"Truthy Values {{? ... }}"},{"level":3,"text":"Escape Values {{! ... }} (SSR only)","anchor":"escape-values----ssr-only","htmlText":"Escape Values {{! ... }} (SSR only)"},{"level":3,"text":"HTML Contents {{# ... }}","anchor":"html-contents---","htmlText":"HTML Contents {{# ... }}"},{"level":4,"text":"Sanitizer","anchor":"sanitizer","htmlText":"Sanitizer"},{"level":3,"text":"Reactive Bindings {{= ... }}","anchor":"reactive-bindings---","htmlText":"Reactive Bindings {{= ... }}"},{"level":2,"text":"Runtime Compiler","anchor":"runtime-compiler","htmlText":"Runtime Compiler"},{"level":4,"text":"Examples","anchor":"examples","htmlText":"Examples"},{"level":3,"text":"Using Inline Code","anchor":"using-inline-code","htmlText":"Using Inline Code"},{"level":2,"text":"Routing \u0026 Event Delegation","anchor":"routing--event-delegation","htmlText":"Routing \u0026amp; Event Delegation"},{"level":3,"text":"Event Bubbling","anchor":"event-bubbling","htmlText":"Event Bubbling"},{"level":4,"text":"Event Cache","anchor":"event-cache","htmlText":"Event Cache"},{"level":4,"text":"Explicit Register/Unregister Event Delegation","anchor":"explicit-registerunregister-event-delegation","htmlText":"Explicit Register/Unregister Event Delegation"},{"level":4,"text":"Control the Native Event Flow","anchor":"control-the-native-event-flow","htmlText":"Control the Native Event Flow"},{"level":4,"text":"Dispatch Routes","anchor":"dispatch-routes","htmlText":"Dispatch Routes"},{"level":2,"text":"Keyed \u0026 Non-Keyed Recycling","anchor":"keyed--non-keyed-recycling","htmlText":"Keyed \u0026amp; Non-Keyed Recycling"},{"level":4,"text":"1. Non-Keyed Recycle","anchor":"1-non-keyed-recycle","htmlText":"1. Non-Keyed Recycle"},{"level":4,"text":"2. Keyed Recycle","anchor":"2-keyed-recycle","htmlText":"2. Keyed Recycle"},{"level":2,"text":"Create, Mount, Destroy Views","anchor":"create-mount-destroy-views","htmlText":"Create, Mount, Destroy Views"},{"level":2,"text":"Render Templates","anchor":"render-templates","htmlText":"Render Templates"},{"level":4,"text":"Create Components","anchor":"create-components","htmlText":"Create Components"},{"level":2,"text":"Modify Views","anchor":"modify-views","htmlText":"Modify Views"},{"level":4,"text":"Common View Helpers","anchor":"common-view-helpers","htmlText":"Common View Helpers"},{"level":2,"text":"Manipulate Views","anchor":"manipulate-views","htmlText":"Manipulate Views"},{"level":2,"text":"DOM State Caching","anchor":"dom-state-caching","htmlText":"DOM State Caching"},{"level":4,"text":"State Caching Concept","anchor":"state-caching-concept","htmlText":"State Caching Concept"},{"level":4,"text":"DOM Cache Helpers (optional)","anchor":"dom-cache-helpers-optional","htmlText":"DOM Cache Helpers (optional)"},{"level":2,"text":"View State","anchor":"view-state","htmlText":"View State"},{"level":2,"text":"Custom Callbacks","anchor":"custom-callbacks","htmlText":"Custom Callbacks"},{"level":2,"text":"Static Templates","anchor":"static-templates","htmlText":"Static Templates"},{"level":4,"text":"Once (One-time rendering)","anchor":"once-one-time-rendering","htmlText":"Once (One-time rendering)"},{"level":2,"text":"Server-Side Rendering (SSR)","anchor":"server-side-rendering-ssr","htmlText":"Server-Side Rendering (SSR)"},{"level":3,"text":"SSR-exclusive Mode","anchor":"ssr-exclusive-mode","htmlText":"SSR-exclusive Mode"},{"level":2,"text":"Express Render Engine","anchor":"express-render-engine","htmlText":"Express Render Engine"},{"level":4,"text":"Custom Options","anchor":"custom-options","htmlText":"Custom Options"},{"level":4,"text":"Render Views","anchor":"render-views","htmlText":"Render Views"},{"level":2,"text":"Includes","anchor":"includes","htmlText":"Includes"},{"level":2,"text":"Loop Partials","anchor":"loop-partials","htmlText":"Loop Partials"},{"level":3,"text":"Inline Loops","anchor":"inline-loops","htmlText":"Inline Loops"},{"level":2,"text":"Conditional Template Structures","anchor":"conditional-template-structures","htmlText":"Conditional Template Structures"},{"level":2,"text":"Reactive Properties (Proxy)","anchor":"reactive-properties-proxy","htmlText":"Reactive Properties (Proxy)"},{"level":3,"text":"Limitations","anchor":"limitations","htmlText":"Limitations"},{"level":3,"text":"Strict-Proxy Mode","anchor":"strict-proxy-mode","htmlText":"Strict-Proxy Mode"},{"level":3,"text":"Observable Array (Virtual NodeList)","anchor":"observable-array-virtual-nodelist","htmlText":"Observable Array (Virtual NodeList)"},{"level":3,"text":"Transactions","anchor":"transactions","htmlText":"Transactions"},{"level":2,"text":"Component Pools","anchor":"component-pools","htmlText":"Component Pools"},{"level":4,"text":"Flush Pools","anchor":"flush-pools","htmlText":"Flush Pools"},{"level":2,"text":"Hydration","anchor":"hydration","htmlText":"Hydration"},{"level":2,"text":"Web Components (Shadow DOM)","anchor":"web-components-shadow-dom","htmlText":"Web Components (Shadow DOM)"},{"level":2,"text":"Full Template Example","anchor":"full-template-example","htmlText":"Full Template Example"},{"level":2,"text":"Concept of Shared Components","anchor":"concept-of-shared-components","htmlText":"Concept of Shared Components"},{"level":2,"text":"Custom Builds","anchor":"custom-builds","htmlText":"Custom Builds"},{"level":5,"text":"Supported Build Flags","anchor":"supported-build-flags","htmlText":"Supported Build Flags"}],"siteNavLoginPath":"/login?return_to=https%3A%2F%2Fgithub.com%2Fnextapps-de%2Fmikado"}},{"displayName":"LICENSE","repoName":"mikado","refName":"master","path":"LICENSE","preferredFileType":"license","tabName":"Apache-2.0","richText":null,"loaded":false,"timedOut":false,"errorMessage":null,"headerInfo":{"toc":null,"siteNavLoginPath":"/login?return_to=https%3A%2F%2Fgithub.com%2Fnextapps-de%2Fmikado"}}],"overviewFilesProcessingTime":0}},"appPayload":{"helpUrl":"https://docs.github.com","findFileWorkerPath":"/assets-cdn/worker/find-file-worker-9f8a877aa99f.js","findInFileWorkerPath":"/assets-cdn/worker/find-in-file-worker-96e76d5fdb2c.js","githubDevUrl":null,"enabled_features":{"copilot_workspace":null,"code_nav_ui_events":false,"overview_shared_code_dropdown_button":false,"react_blob_overlay":false,"copilot_conversational_ux_embedding_update":false,"copilot_smell_icebreaker_ux":true,"accessible_code_button":true}}}}</script> <div data-target="react-partial.reactRoot"><style data-styled="true" data-styled-version="5.3.11">.iVEunk{margin-top:16px;margin-bottom:16px;}/*!sc*/ .jzuOtQ{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}/*!sc*/ .bGojzy{margin-bottom:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;row-gap:16px;}/*!sc*/ .iNSVHo{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;padding-bottom:16px;padding-top:8px;}/*!sc*/ .bVgnfw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;gap:8px;}/*!sc*/ @media screen and (max-width:320px){.bVgnfw{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}}/*!sc*/ .CEgMp{position:relative;}/*!sc*/ @media screen and (max-width:380px){.CEgMp .ref-selector-button-text-container{max-width:80px;}}/*!sc*/ @media screen and (max-width:320px){.CEgMp{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}.CEgMp .overview-ref-selector{width:100%;}.CEgMp .overview-ref-selector > span{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;}.CEgMp .overview-ref-selector > span > span[data-component="text"]{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}}/*!sc*/ .gMOVLe[data-size="medium"]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-width:0;}/*!sc*/ .gMOVLe[data-size="medium"] svg{color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .gMOVLe[data-size="medium"] > span{width:inherit;}/*!sc*/ .gUkoLg{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}/*!sc*/ .bZBlpz{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;}/*!sc*/ .lhTYNA{margin-right:4px;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .ffLUq{font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}/*!sc*/ .fLXEGX{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ @media screen and (max-width:1079px){.fLXEGX{display:none;}}/*!sc*/ .lmSMZJ[data-size="medium"]{color:var(--fgColor-muted,var(--color-fg-muted,#656d76));padding-left:4px;padding-right:4px;}/*!sc*/ .lmSMZJ[data-size="medium"] span[data-component="leadingVisual"]{margin-right:4px !important;}/*!sc*/ .dqfxud{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ @media screen and (min-width:1080px){.dqfxud{display:none;}}/*!sc*/ @media screen and (max-width:543px){.dqfxud{display:none;}}/*!sc*/ .fGwBZA[data-size="medium"][data-no-visuals]{color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .jxTzTd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding-left:8px;gap:8px;}/*!sc*/ .gqqBXN{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:8px;}/*!sc*/ @media screen and (max-width:543px){.gqqBXN{display:none;}}/*!sc*/ .dzXgxt{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ @media screen and (max-width:1011px){.dzXgxt{display:none;}}/*!sc*/ .iWFGlI{margin-left:8px;margin-right:8px;margin:0;}/*!sc*/ .YUPas{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ @media screen and (min-width:1012px){.YUPas{display:none;}}/*!sc*/ .izFOf{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ @media screen and (min-width:544px){.izFOf{display:none;}}/*!sc*/ .vIPPs{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:16px;}/*!sc*/ .fdROMU{width:100%;border-collapse:separate;border-spacing:0;border:1px solid;border-color:var(--borderColor-default,var(--color-border-default,#d0d7de));border-radius:6px;table-layout:fixed;overflow:unset;}/*!sc*/ .jGKpsv{height:0px;line-height:0px;}/*!sc*/ .jGKpsv tr{height:0px;font-size:0px;}/*!sc*/ .jdgHnn{padding:16px;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));font-size:12px;text-align:left;height:40px;}/*!sc*/ .jdgHnn th{padding-left:16px;background-color:var(--bgColor-muted,var(--color-canvas-subtle,#f6f8fa));}/*!sc*/ .bQivRW{width:100%;border-top-left-radius:6px;}/*!sc*/ @media screen and (min-width:544px){.bQivRW{display:none;}}/*!sc*/ .ldkMIO{width:40%;border-top-left-radius:6px;}/*!sc*/ @media screen and (max-width:543px){.ldkMIO{display:none;}}/*!sc*/ .jMbWeI{text-align:right;padding-right:16px;width:136px;border-top-right-radius:6px;}/*!sc*/ .gpqjiB{color:var(--fgColor-muted,var(--color-fg-muted,#656d76));font-size:12px;height:40px;}/*!sc*/ .dzCJzi{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px;min-width:273px;padding:8px;}/*!sc*/ @media screen and (min-width:544px){.dzCJzi{-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}}/*!sc*/ .eNCcrz{text-align:center;vertical-align:center;height:40px;border-top:1px solid;border-color:var(--borderColor-default,var(--color-border-default,#d0d7de));}/*!sc*/ .bHTcCe{border-top:1px solid var(--borderColor-default,var(--color-border-default));cursor:pointer;}/*!sc*/ .csrIcr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;gap:16px;}/*!sc*/ .bUQNHB{border:1px solid;border-color:var(--borderColor-default,var(--color-border-default,#d0d7de));border-radius:6px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}/*!sc*/ @media screen and (max-width:543px){.bUQNHB{margin-left:-16px;margin-right:-16px;max-width:calc(100% + 32px);}}/*!sc*/ @media screen and (min-width:544px){.bUQNHB{max-width:100%;}}/*!sc*/ .jPdcfu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border-bottom:1px solid;border-bottom-color:var(--borderColor-default,var(--color-border-default,#d0d7de));-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-right:8px;position:-webkit-sticky;position:sticky;top:0;background-color:var(--bgColor-default,var(--color-canvas-default,#ffffff));z-index:1;border-top-left-radius:6px;border-top-right-radius:6px;}/*!sc*/ .hUCRAk{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}/*!sc*/ .cwoBXV[data-size="medium"]{color:var(--fgColor-muted,var(--color-fg-subtle,#6e7781));padding-left:8px;padding-right:8px;}/*!sc*/ .QkQOb{padding:32px;overflow:auto;}/*!sc*/ data-styled.g1[id="Box-sc-g0xbh4-0"]{content:"iVEunk,jzuOtQ,bGojzy,iNSVHo,bVgnfw,CEgMp,gMOVLe,gUkoLg,bZBlpz,lhTYNA,ffLUq,fLXEGX,lmSMZJ,dqfxud,fGwBZA,jxTzTd,gqqBXN,dzXgxt,iWFGlI,YUPas,izFOf,vIPPs,fdROMU,jGKpsv,jdgHnn,bQivRW,ldkMIO,jMbWeI,gpqjiB,dzCJzi,eNCcrz,bHTcCe,csrIcr,bUQNHB,jPdcfu,hUCRAk,cwoBXV,QkQOb,"}/*!sc*/ .eMMFM{min-width:0;}/*!sc*/ .eMMFM:where([data-size='small']){font-size:var(--text-body-size-small,0.75rem);line-height:var(--text-body-lineHeight-small,1.6666);}/*!sc*/ .eMMFM:where([data-size='medium']){font-size:var(--text-body-size-medium,0.875rem);line-height:var(--text-body-lineHeight-medium,1.4285);}/*!sc*/ .eMMFM:where([data-size='large']){font-size:var(--text-body-size-large,1rem);line-height:var(--text-body-lineHeight-large,1.5);}/*!sc*/ .eMMFM:where([data-weight='light']){font-weight:var(--base-text-weight-light,300);}/*!sc*/ .eMMFM:where([data-weight='normal']){font-weight:var(--base-text-weight-normal,400);}/*!sc*/ .eMMFM:where([data-weight='medium']){font-weight:var(--base-text-weight-medium,500);}/*!sc*/ .eMMFM:where([data-weight='semibold']){font-weight:var(--base-text-weight-semibold,600);}/*!sc*/ data-styled.g3[id="Text__StyledText-sc-17v1xeu-0"]{content:"eMMFM,"}/*!sc*/ .brGdpi{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;-webkit-clip:rect(0,0,0,0);clip:rect(0,0,0,0);white-space:nowrap;border-width:0;}/*!sc*/ data-styled.g4[id="_VisuallyHidden__VisuallyHidden-sc-11jhm7a-0"]{content:"brGdpi,"}/*!sc*/ .jkNcAv{border:0;font-size:inherit;font-family:inherit;background-color:transparent;-webkit-appearance:none;color:inherit;width:100%;}/*!sc*/ .jkNcAv:focus{outline:0;}/*!sc*/ data-styled.g13[id="UnstyledTextInput__ToggledUnstyledTextInput-sc-14ypya-0"]{content:"jkNcAv,"}/*!sc*/ .hLzFvi{font-size:14px;line-height:var(--base-size-20);color:var(--fgColor-default,var(--color-fg-default,#1F2328));vertical-align:middle;background-color:var(--bgColor-default,var(--color-canvas-default,#ffffff));border:1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));border-radius:6px;outline:none;box-shadow:var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;min-height:var(--base-size-32);overflow:hidden;--inner-action-size:var(--base-size-24);}/*!sc*/ .hLzFvi input,.hLzFvi textarea{cursor:text;}/*!sc*/ .hLzFvi select{cursor:pointer;}/*!sc*/ .hLzFvi input::-webkit-input-placeholder,.hLzFvi textarea::-webkit-input-placeholder,.hLzFvi select::-webkit-input-placeholder{color:var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .hLzFvi input::-moz-placeholder,.hLzFvi textarea::-moz-placeholder,.hLzFvi select::-moz-placeholder{color:var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .hLzFvi input:-ms-input-placeholder,.hLzFvi textarea:-ms-input-placeholder,.hLzFvi select:-ms-input-placeholder{color:var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .hLzFvi input::placeholder,.hLzFvi textarea::placeholder,.hLzFvi select::placeholder{color:var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .hLzFvi:where([data-trailing-action][data-focused]),.hLzFvi:where(:not([data-trailing-action]):focus-within){border-color:var(--fgColor-accent,var(--color-accent-fg,#0969da));outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-1px;}/*!sc*/ .hLzFvi > textarea{padding:var(--base-size-12);}/*!sc*/ .hLzFvi:where([data-contrast]){background-color:var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));}/*!sc*/ .hLzFvi:where([data-disabled]){color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));background-color:var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2)));box-shadow:none;border-color:var(--control-borderColor-disabled,var(--borderColor-default,var(--color-border-default,#d0d7de)));}/*!sc*/ .hLzFvi:where([data-disabled]) input,.hLzFvi:where([data-disabled]) textarea,.hLzFvi:where([data-disabled]) select{cursor:not-allowed;}/*!sc*/ .hLzFvi:where([data-monospace]){font-family:var(--fontStack-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace);}/*!sc*/ .hLzFvi:where([data-validation='error']){border-color:var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));}/*!sc*/ .hLzFvi:where([data-validation='error']):where([data-trailing-action][data-focused]),.hLzFvi:where([data-validation='error']):where(:not([data-trailing-action])):focus-within{border-color:var(--fgColor-accent,var(--color-accent-fg,#0969da));outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-1px;}/*!sc*/ .hLzFvi:where([data-validation='success']){border-color:var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));}/*!sc*/ .hLzFvi:where([data-block]){width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;}/*!sc*/ @media (min-width:768px){.hLzFvi{font-size:var(--text-body-size-medium);}}/*!sc*/ .hLzFvi:where([data-size='small']){--inner-action-size:var(--base-size-20);min-height:var(--base-size-28);padding-top:3px;padding-right:var(--base-size-8);padding-bottom:3px;padding-left:var(--base-size-8);font-size:var(--text-body-size-small);line-height:var(--base-size-20);}/*!sc*/ .hLzFvi:where([data-size='large']){--inner-action-size:var(--base-size-28);height:var(--base-size-40);padding-top:10px;padding-right:var(--base-size-8);padding-bottom:10px;padding-left:var(--base-size-8);}/*!sc*/ .hLzFvi:where([data-variant='small']){min-height:28px;padding-top:3px;padding-right:var(--base-size-8);padding-bottom:3px;padding-left:var(--base-size-8);font-size:(--text-body-size-small);line-height:var(--base-size-20);}/*!sc*/ .hLzFvi:where([data-variant='large']){padding-top:10px;padding-right:var(--base-size-8);padding-bottom:10px;padding-left:var(--base-size-8);font-size:var(--text-title-size-medium);}/*!sc*/ .hLzFvi{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-width:160px;}/*!sc*/ data-styled.g14[id="TextInputWrapper__StyledTextInputBaseWrapper-sc-1mqhpbi-0"]{content:"hLzFvi,"}/*!sc*/ .iHYdQq{background-repeat:no-repeat;background-position:right 8px center;padding-right:0;padding-left:0;}/*!sc*/ .iHYdQq > :not(:last-child){margin-right:8px;}/*!sc*/ .iHYdQq .TextInput-icon,.iHYdQq .TextInput-action{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}/*!sc*/ .iHYdQq > input,.iHYdQq > select{padding-right:0;padding-left:0;}/*!sc*/ .iHYdQq:where([data-leading-visual]){padding-left:var(--base-size-12);}/*!sc*/ .iHYdQq:where([data-trailing-visual]:not([data-trailing-action])){padding-right:var(--base-size-12);}/*!sc*/ .iHYdQq:where(:not([data-leading-visual])) > input,.iHYdQq:where(:not([data-leading-visual])) > select{padding-left:var(--base-size-12);}/*!sc*/ .iHYdQq:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,.iHYdQq:where(:not([data-trailing-visual]):not([data-trailing-action])) > select{padding-right:var(--base-size-12);}/*!sc*/ .iHYdQq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-width:160px;}/*!sc*/ data-styled.g15[id="TextInputWrapper__StyledTextInputWrapper-sc-1mqhpbi-1"]{content:"iHYdQq,"}/*!sc*/ .hWlpPn{position:relative;display:inline-block;}/*!sc*/ .hWlpPn::after{position:absolute;z-index:1000000;display:none;padding:0.5em 0.75em;font:normal normal 11px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";-webkit-font-smoothing:subpixel-antialiased;color:var(--tooltip-fgColor,var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff)));text-align:center;-webkit-text-decoration:none;text-decoration:none;text-shadow:none;text-transform:none;-webkit-letter-spacing:normal;-moz-letter-spacing:normal;-ms-letter-spacing:normal;letter-spacing:normal;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:var(--tooltip-bgColor,var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f)));border-radius:6px;opacity:0;}/*!sc*/ @-webkit-keyframes tooltip-appear{from{opacity:0;}to{opacity:1;}}/*!sc*/ @keyframes tooltip-appear{from{opacity:0;}to{opacity:1;}}/*!sc*/ .hWlpPn:hover::after,.hWlpPn:active::after,.hWlpPn:focus::after,.hWlpPn:focus-within::after{display:inline-block;-webkit-text-decoration:none;text-decoration:none;-webkit-animation-name:tooltip-appear;animation-name:tooltip-appear;-webkit-animation-duration:0.1s;animation-duration:0.1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-animation-delay:0s;animation-delay:0s;}/*!sc*/ .hWlpPn.tooltipped-no-delay:hover::after,.hWlpPn.tooltipped-no-delay:active::after,.hWlpPn.tooltipped-no-delay:focus::after,.hWlpPn.tooltipped-no-delay:focus-within::after{-webkit-animation-delay:0s;animation-delay:0s;}/*!sc*/ .hWlpPn.tooltipped-multiline:hover::after,.hWlpPn.tooltipped-multiline:active::after,.hWlpPn.tooltipped-multiline:focus::after,.hWlpPn.tooltipped-multiline:focus-within::after{display:table-cell;}/*!sc*/ .hWlpPn.tooltipped-s::after,.hWlpPn.tooltipped-se::after,.hWlpPn.tooltipped-sw::after{top:100%;right:50%;margin-top:6px;}/*!sc*/ .hWlpPn.tooltipped-se::after{right:auto;left:50%;margin-left:-16px;}/*!sc*/ .hWlpPn.tooltipped-sw::after{margin-right:-16px;}/*!sc*/ .hWlpPn.tooltipped-n::after,.hWlpPn.tooltipped-ne::after,.hWlpPn.tooltipped-nw::after{right:50%;bottom:100%;margin-bottom:6px;}/*!sc*/ .hWlpPn.tooltipped-ne::after{right:auto;left:50%;margin-left:-16px;}/*!sc*/ .hWlpPn.tooltipped-nw::after{margin-right:-16px;}/*!sc*/ .hWlpPn.tooltipped-s::after,.hWlpPn.tooltipped-n::after{-webkit-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%);}/*!sc*/ .hWlpPn.tooltipped-w::after{right:100%;bottom:50%;margin-right:6px;-webkit-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%);}/*!sc*/ .hWlpPn.tooltipped-e::after{bottom:50%;left:100%;margin-left:6px;-webkit-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%);}/*!sc*/ .hWlpPn.tooltipped-multiline::after{width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:250px;word-wrap:break-word;white-space:pre-line;border-collapse:separate;}/*!sc*/ .hWlpPn.tooltipped-multiline.tooltipped-s::after,.hWlpPn.tooltipped-multiline.tooltipped-n::after{right:auto;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);}/*!sc*/ .hWlpPn.tooltipped-multiline.tooltipped-w::after,.hWlpPn.tooltipped-multiline.tooltipped-e::after{right:100%;}/*!sc*/ .hWlpPn.tooltipped-align-right-2::after{right:0;margin-right:0;}/*!sc*/ .hWlpPn.tooltipped-align-left-2::after{left:0;margin-left:0;}/*!sc*/ data-styled.g17[id="Tooltip__TooltipBase-sc-17tf59c-0"]{content:"hWlpPn,"}/*!sc*/ .liVpTx{display:inline-block;overflow:hidden;text-overflow:ellipsis;vertical-align:top;white-space:nowrap;max-width:125px;}/*!sc*/ data-styled.g19[id="Truncate__StyledTruncate-sc-23o1d2-0"]{content:"liVpTx,"}/*!sc*/ .eBevHz{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding-inline:var(--stack-padding-normal,16px);-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:var(--control-xlarge-size,48px);box-shadow:inset 0px -1px var(--borderColor-muted,var(--borderColor-muted,var(--color-border-muted,hsla(210,18%,87%,1))));-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;border-bottom:none;max-width:100%;padding-left:8px;padding-right:8px;}/*!sc*/ data-styled.g99[id="UnderlineTabbedInterface__StyledComponentUnderlineWrapper-sc-4ilrg0-0"]{content:"eBevHz,"}/*!sc*/ .ehEdWC{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;list-style:none;white-space:nowrap;padding:0;margin:0;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px;position:relative;}/*!sc*/ data-styled.g100[id="UnderlineTabbedInterface__StyledComponentUnderlineItemList-sc-4ilrg0-1"]{content:"ehEdWC,"}/*!sc*/ .beOdPj{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;cursor:pointer;font:inherit;position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;color:var(--fgColor-default,var(--color-fg-default,#1F2328));text-align:center;-webkit-text-decoration:none;text-decoration:none;line-height:var(--text-body-lineHeight-medium,1.4285);border-radius:var(--borderRadius-medium,6px);font-size:var(--text-body-size-medium,14px);padding-inline:var(--control-medium-paddingInline-condensed,8px);padding-block:var(--control-medium-paddingBlock,6px);-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}/*!sc*/ @media (hover:hover){.beOdPj:hover{background-color:var(--bgColor-neutral-muted,var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5))));-webkit-transition:background 0.12s ease-out;transition:background 0.12s ease-out;-webkit-text-decoration:none;text-decoration:none;}}/*!sc*/ .beOdPj:focus:{outline:2px solid transparent;box-shadow:inset 0 0 0 2px var(--fgColor-accent,var(--fgColor-accent,var(--color-accent-fg,#0969da)));}/*!sc*/ .beOdPj:focus::not(:focus-visible){box-shadow:none;}/*!sc*/ .beOdPj:focus-visible{outline:2px solid transparent;box-shadow:inset 0 0 0 2px var(--fgColor-accent,var(--fgColor-accent,var(--color-accent-fg,#0969da)));}/*!sc*/ .beOdPj [data-content]::before{content:attr(data-content);display:block;height:0;font-weight:var(--base-text-weight-semibold,500);visibility:hidden;white-space:nowrap;}/*!sc*/ .beOdPj [data-component='icon']{color:var(--fgColor-muted,var(--fgColor-muted,var(--color-fg-muted,#656d76)));-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;margin-inline-end:var(--control-medium-gap,8px);}/*!sc*/ .beOdPj [data-component='counter']{margin-inline-start:var(--control-medium-gap,8px);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}/*!sc*/ .beOdPj::after{position:absolute;right:50%;bottom:calc(50% - calc(var(--control-xlarge-size,48px) / 2 + 1px));width:100%;height:2px;content:'';background-color:transparent;border-radius:0;-webkit-transform:translate(50%,-50%);-ms-transform:translate(50%,-50%);transform:translate(50%,-50%);}/*!sc*/ .beOdPj[aria-current]:not([aria-current='false']) [data-component='text'],.beOdPj[aria-selected='true'] [data-component='text']{font-weight:var(--base-text-weight-semibold,500);}/*!sc*/ .beOdPj[aria-current]:not([aria-current='false'])::after,.beOdPj[aria-selected='true']::after{background-color:var(--underlineNav-borderColor-active,var(--color-primer-border-active,#fd8c73));}/*!sc*/ @media (forced-colors:active){.beOdPj[aria-current]:not([aria-current='false'])::after,.beOdPj[aria-selected='true']::after{background-color:LinkText;}}/*!sc*/ data-styled.g101[id="UnderlineTabbedInterface__StyledUnderlineItem-sc-4ilrg0-2"]{content:"beOdPj,"}/*!sc*/ </style> <!-- --> <!-- --> <div class="Box-sc-g0xbh4-0 iVEunk"><div class="Box-sc-g0xbh4-0 jzuOtQ"><div class="Box-sc-g0xbh4-0 bGojzy"></div></div><div class="Box-sc-g0xbh4-0 iNSVHo"><div class="Box-sc-g0xbh4-0 bVgnfw"><div class="Box-sc-g0xbh4-0 CEgMp"><button type="button" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-label="master branch" data-testid="anchor-button" class="Box-sc-g0xbh4-0 gMOVLe prc-Button-ButtonBase-c50BI overview-ref-selector width-full" data-loading="false" data-size="medium" data-variant="default" aria-describedby="branch-picker-repos-header-ref-selector-loading-announcement" id="branch-picker-repos-header-ref-selector"><span data-component="buttonContent" class="Box-sc-g0xbh4-0 gUkoLg prc-Button-ButtonContent-HKbr-"><span data-component="text" class="prc-Button-Label-pTQ3x"><div class="Box-sc-g0xbh4-0 bZBlpz"><div class="Box-sc-g0xbh4-0 lhTYNA"><svg aria-hidden="true" focusable="false" class="octicon octicon-git-branch" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25Zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"></path></svg></div><div class="Box-sc-g0xbh4-0 ffLUq ref-selector-button-text-container"><span class="Text__StyledText-sc-17v1xeu-0 eMMFM"> <!-- -->master</span></div></div></span><span data-component="trailingVisual" class="prc-Button-Visual-2epfX prc-Button-VisualWrap-Db-eB"><svg aria-hidden="true" focusable="false" class="octicon octicon-triangle-down" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path></svg></span></span></button><button hidden="" data-hotkey-scope="read-only-cursor-text-area"></button></div><div class="Box-sc-g0xbh4-0 fLXEGX"><a style="--button-color:fg.muted" type="button" href="/nextapps-de/mikado/branches" class="Box-sc-g0xbh4-0 lmSMZJ prc-Button-ButtonBase-c50BI" data-loading="false" data-size="medium" data-variant="invisible" aria-describedby=":Rclab:-loading-announcement"><span data-component="buttonContent" class="Box-sc-g0xbh4-0 gUkoLg prc-Button-ButtonContent-HKbr-"><span data-component="leadingVisual" class="prc-Button-Visual-2epfX prc-Button-VisualWrap-Db-eB"><svg aria-hidden="true" focusable="false" class="octicon octicon-git-branch" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25Zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"></path></svg></span><span data-component="text" class="prc-Button-Label-pTQ3x">Branches</span></span></a><a style="--button-color:fg.muted" type="button" href="/nextapps-de/mikado/tags" class="Box-sc-g0xbh4-0 lmSMZJ prc-Button-ButtonBase-c50BI" data-loading="false" data-size="medium" data-variant="invisible" aria-describedby=":Rklab:-loading-announcement"><span data-component="buttonContent" class="Box-sc-g0xbh4-0 gUkoLg prc-Button-ButtonContent-HKbr-"><span data-component="leadingVisual" class="prc-Button-Visual-2epfX prc-Button-VisualWrap-Db-eB"><svg aria-hidden="true" focusable="false" class="octicon octicon-tag" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M1 7.775V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 0 1 0 2.474l-5.026 5.026a1.75 1.75 0 0 1-2.474 0l-6.25-6.25A1.752 1.752 0 0 1 1 7.775Zm1.5 0c0 .066.026.13.073.177l6.25 6.25a.25.25 0 0 0 .354 0l5.025-5.025a.25.25 0 0 0 0-.354l-6.25-6.25a.25.25 0 0 0-.177-.073H2.75a.25.25 0 0 0-.25.25ZM6 5a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"></path></svg></span><span data-component="text" class="prc-Button-Label-pTQ3x">Tags</span></span></a></div><div class="Box-sc-g0xbh4-0 dqfxud"><a style="--button-color:fg.muted" type="button" aria-label="Go to Branches page" href="/nextapps-de/mikado/branches" class="Box-sc-g0xbh4-0 fGwBZA prc-Button-ButtonBase-c50BI" data-loading="false" data-no-visuals="true" data-size="medium" data-variant="invisible" aria-describedby=":Relab:-loading-announcement"><svg aria-hidden="true" focusable="false" class="octicon octicon-git-branch" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25Zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"></path></svg></a><a style="--button-color:fg.muted" type="button" aria-label="Go to Tags page" href="/nextapps-de/mikado/tags" class="Box-sc-g0xbh4-0 fGwBZA prc-Button-ButtonBase-c50BI" data-loading="false" data-no-visuals="true" data-size="medium" data-variant="invisible" aria-describedby=":Rmlab:-loading-announcement"><svg aria-hidden="true" focusable="false" class="octicon octicon-tag" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M1 7.775V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 0 1 0 2.474l-5.026 5.026a1.75 1.75 0 0 1-2.474 0l-6.25-6.25A1.752 1.752 0 0 1 1 7.775Zm1.5 0c0 .066.026.13.073.177l6.25 6.25a.25.25 0 0 0 .354 0l5.025-5.025a.25.25 0 0 0 0-.354l-6.25-6.25a.25.25 0 0 0-.177-.073H2.75a.25.25 0 0 0-.25.25ZM6 5a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"></path></svg></a></div></div><div class="Box-sc-g0xbh4-0 jxTzTd"><div class="Box-sc-g0xbh4-0 gqqBXN"><div class="Box-sc-g0xbh4-0 dzXgxt"><!--$--><div class="Box-sc-g0xbh4-0 iWFGlI"><span class="TextInputWrapper__StyledTextInputBaseWrapper-sc-1mqhpbi-0 hLzFvi TextInputWrapper__StyledTextInputWrapper-sc-1mqhpbi-1 iHYdQq TextInput-wrapper" data-leading-visual="true" data-trailing-visual="true" aria-busy="false"><span class="TextInput-icon" id=":R2j5ab:" aria-hidden="true"><svg aria-hidden="true" focusable="false" class="octicon octicon-search" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path></svg></span><input type="text" aria-label="Go to file" role="combobox" aria-controls="file-results-list" aria-expanded="false" aria-haspopup="dialog" autoCorrect="off" spellcheck="false" placeholder="Go to file" aria-describedby=":R2j5ab: :R2j5abH1:" data-component="input" class="UnstyledTextInput__ToggledUnstyledTextInput-sc-14ypya-0 jkNcAv" value=""/><span class="TextInput-icon" id=":R2j5abH1:" aria-hidden="true"></span></span></div><!--/$--></div><div class="Box-sc-g0xbh4-0 YUPas"><button type="button" class="prc-Button-ButtonBase-c50BI" data-loading="false" data-no-visuals="true" data-size="medium" data-variant="default" aria-describedby=":Rr5ab:-loading-announcement"><span data-component="buttonContent" data-align="center" class="prc-Button-ButtonContent-HKbr-"><span data-component="text" class="prc-Button-Label-pTQ3x">Go to file</span></span></button></div><div class="react-directory-add-file-icon"></div><div class="react-directory-remove-file-icon"></div></div><button type="button" aria-haspopup="true" aria-expanded="false" tabindex="0" class="prc-Button-ButtonBase-c50BI" data-loading="false" data-size="medium" data-variant="primary" aria-describedby=":R55ab:-loading-announcement" id=":R55ab:"><span data-component="buttonContent" data-align="center" class="prc-Button-ButtonContent-HKbr-"><span data-component="leadingVisual" class="prc-Button-Visual-2epfX prc-Button-VisualWrap-Db-eB"><svg aria-hidden="true" focusable="false" class="hide-sm" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z"></path></svg></span><span data-component="text" class="prc-Button-Label-pTQ3x">Code</span><span data-component="trailingVisual" class="prc-Button-Visual-2epfX prc-Button-VisualWrap-Db-eB"><svg aria-hidden="true" focusable="false" class="octicon octicon-triangle-down" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path></svg></span></span></button><div class="Box-sc-g0xbh4-0 izFOf"><button data-component="IconButton" type="button" aria-label="Open more actions menu" aria-haspopup="true" aria-expanded="false" tabindex="0" class="prc-Button-ButtonBase-c50BI prc-Button-IconButton-szpyj" data-loading="false" data-no-visuals="true" data-size="medium" data-variant="default" aria-describedby=":R75ab:-loading-announcement" id=":R75ab:"><svg aria-hidden="true" focusable="false" class="octicon octicon-kebab-horizontal" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path></svg></button></div></div></div><div class="Box-sc-g0xbh4-0 vIPPs"><div data-hpc="true"><button hidden="" data-testid="focus-next-element-button" data-hotkey="j"></button><button hidden="" data-testid="focus-previous-element-button" data-hotkey="k"></button><h2 class="sr-only ScreenReaderHeading-module__userSelectNone--vW4Cq prc-Heading-Heading-6CmGO" data-testid="screen-reader-heading" id="folders-and-files">Folders and files</h2><table aria-labelledby="folders-and-files" class="Box-sc-g0xbh4-0 fdROMU"><thead class="Box-sc-g0xbh4-0 jGKpsv"><tr class="Box-sc-g0xbh4-0 jdgHnn"><th colSpan="2" class="Box-sc-g0xbh4-0 bQivRW"><span class="text-bold">Name</span></th><th colSpan="1" class="Box-sc-g0xbh4-0 ldkMIO"><span class="text-bold">Name</span></th><th class="hide-sm"><div title="Last commit message" class="Truncate__StyledTruncate-sc-23o1d2-0 liVpTx width-fit"><span class="text-bold">Last commit message</span></div></th><th colSpan="1" class="Box-sc-g0xbh4-0 jMbWeI"><div title="Last commit date" class="Truncate__StyledTruncate-sc-23o1d2-0 liVpTx width-fit"><span class="text-bold">Last commit date</span></div></th></tr></thead><tbody><tr class="Box-sc-g0xbh4-0 gpqjiB"><td colSpan="3" class="bgColor-muted p-1 rounded-top-2"><div class="Box-sc-g0xbh4-0 dzCJzi"><h2 class="sr-only ScreenReaderHeading-module__userSelectNone--vW4Cq prc-Heading-Heading-6CmGO" data-testid="screen-reader-heading">Latest commit</h2><div style="width:120px" class="Skeleton Skeleton--text" data-testid="loading"> </div><div class="d-flex flex-shrink-0 gap-2"><div data-testid="latest-commit-details" class="d-none d-sm-flex flex-items-center"></div><div class="d-flex gap-2"><h2 class="sr-only ScreenReaderHeading-module__userSelectNone--vW4Cq prc-Heading-Heading-6CmGO" data-testid="screen-reader-heading">History</h2><a href="/nextapps-de/mikado/commits/master/" class="prc-Button-ButtonBase-c50BI d-none d-lg-flex LinkButton-module__code-view-link-button--xvCGA flex-items-center fgColor-default" data-loading="false" data-size="small" data-variant="invisible" aria-describedby=":Raqj8pab:-loading-announcement"><span data-component="buttonContent" data-align="center" class="prc-Button-ButtonContent-HKbr-"><span data-component="leadingVisual" class="prc-Button-Visual-2epfX prc-Button-VisualWrap-Db-eB"><svg aria-hidden="true" focusable="false" class="octicon octicon-history" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="m.427 1.927 1.215 1.215a8.002 8.002 0 1 1-1.6 5.685.75.75 0 1 1 1.493-.154 6.5 6.5 0 1 0 1.18-4.458l1.358 1.358A.25.25 0 0 1 3.896 6H.25A.25.25 0 0 1 0 5.75V2.104a.25.25 0 0 1 .427-.177ZM7.75 4a.75.75 0 0 1 .75.75v2.992l2.028.812a.75.75 0 0 1-.557 1.392l-2.5-1A.751.751 0 0 1 7 8.25v-3.5A.75.75 0 0 1 7.75 4Z"></path></svg></span><span data-component="text" class="prc-Button-Label-pTQ3x"><span class="fgColor-default">283 Commits</span></span></span></a><div class="d-sm-none"></div><div class="d-flex d-lg-none"><span role="tooltip" aria-label="283 Commits" id="history-icon-button-tooltip" class="Tooltip__TooltipBase-sc-17tf59c-0 hWlpPn tooltipped-n"><a href="/nextapps-de/mikado/commits/master/" class="prc-Button-ButtonBase-c50BI LinkButton-module__code-view-link-button--xvCGA flex-items-center fgColor-default" data-loading="false" data-size="small" data-variant="invisible" aria-describedby=":R1iqj8pab:-loading-announcement history-icon-button-tooltip"><span data-component="buttonContent" data-align="center" class="prc-Button-ButtonContent-HKbr-"><span data-component="leadingVisual" class="prc-Button-Visual-2epfX prc-Button-VisualWrap-Db-eB"><svg aria-hidden="true" focusable="false" class="octicon octicon-history" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="m.427 1.927 1.215 1.215a8.002 8.002 0 1 1-1.6 5.685.75.75 0 1 1 1.493-.154 6.5 6.5 0 1 0 1.18-4.458l1.358 1.358A.25.25 0 0 1 3.896 6H.25A.25.25 0 0 1 0 5.75V2.104a.25.25 0 0 1 .427-.177ZM7.75 4a.75.75 0 0 1 .75.75v2.992l2.028.812a.75.75 0 0 1-.557 1.392l-2.5-1A.751.751 0 0 1 7 8.25v-3.5A.75.75 0 0 1 7.75 4Z"></path></svg></span></span></a></span></div></div></div></div></td></tr><tr class="react-directory-row undefined" id="folder-row-0"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="icon-directory" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title=".github" aria-label=".github, (Directory)" class="Link--primary" href="/nextapps-de/mikado/tree/master/.github">.github</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="icon-directory" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title=".github" aria-label=".github, (Directory)" class="Link--primary" href="/nextapps-de/mikado/tree/master/.github">.github</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row undefined" id="folder-row-1"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="icon-directory" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="compiler" aria-label="compiler, (Directory)" class="Link--primary" href="/nextapps-de/mikado/tree/master/compiler">compiler</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="icon-directory" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="compiler" aria-label="compiler, (Directory)" class="Link--primary" href="/nextapps-de/mikado/tree/master/compiler">compiler</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row undefined" id="folder-row-2"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="icon-directory" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="dist" aria-label="dist, (Directory)" class="Link--primary" href="/nextapps-de/mikado/tree/master/dist">dist</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="icon-directory" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="dist" aria-label="dist, (Directory)" class="Link--primary" href="/nextapps-de/mikado/tree/master/dist">dist</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row undefined" id="folder-row-3"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="icon-directory" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="doc" aria-label="doc, (Directory)" class="Link--primary" href="/nextapps-de/mikado/tree/master/doc">doc</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="icon-directory" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="doc" aria-label="doc, (Directory)" class="Link--primary" href="/nextapps-de/mikado/tree/master/doc">doc</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row undefined" id="folder-row-4"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="icon-directory" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="This path skips through empty directories" aria-label="examples/todomvc, (Directory)" class="Link--primary" href="/nextapps-de/mikado/tree/master/examples/todomvc"><span class="react-directory-default-color" data-testid="path-name-segment">examples/</span><span class="" data-testid="path-name-segment">todomvc</span></a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="icon-directory" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="This path skips through empty directories" aria-label="examples/todomvc, (Directory)" class="Link--primary" href="/nextapps-de/mikado/tree/master/examples/todomvc"><span class="react-directory-default-color" data-testid="path-name-segment">examples/</span><span class="" data-testid="path-name-segment">todomvc</span></a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row undefined" id="folder-row-5"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="icon-directory" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="express" aria-label="express, (Directory)" class="Link--primary" href="/nextapps-de/mikado/tree/master/express">express</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="icon-directory" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="express" aria-label="express, (Directory)" class="Link--primary" href="/nextapps-de/mikado/tree/master/express">express</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row undefined" id="folder-row-6"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="icon-directory" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="src" aria-label="src, (Directory)" class="Link--primary" href="/nextapps-de/mikado/tree/master/src">src</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="icon-directory" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="src" aria-label="src, (Directory)" class="Link--primary" href="/nextapps-de/mikado/tree/master/src">src</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row undefined" id="folder-row-7"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="icon-directory" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="ssr" aria-label="ssr, (Directory)" class="Link--primary" href="/nextapps-de/mikado/tree/master/ssr">ssr</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="icon-directory" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="ssr" aria-label="ssr, (Directory)" class="Link--primary" href="/nextapps-de/mikado/tree/master/ssr">ssr</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row undefined" id="folder-row-8"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="icon-directory" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="task" aria-label="task, (Directory)" class="Link--primary" href="/nextapps-de/mikado/tree/master/task">task</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="icon-directory" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="task" aria-label="task, (Directory)" class="Link--primary" href="/nextapps-de/mikado/tree/master/task">task</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row undefined" id="folder-row-9"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="icon-directory" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="test" aria-label="test, (Directory)" class="Link--primary" href="/nextapps-de/mikado/tree/master/test">test</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="icon-directory" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="test" aria-label="test, (Directory)" class="Link--primary" href="/nextapps-de/mikado/tree/master/test">test</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row truncate-for-mobile" id="folder-row-10"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title=".gitignore" aria-label=".gitignore, (File)" class="Link--primary" href="/nextapps-de/mikado/blob/master/.gitignore">.gitignore</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title=".gitignore" aria-label=".gitignore, (File)" class="Link--primary" href="/nextapps-de/mikado/blob/master/.gitignore">.gitignore</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row truncate-for-mobile" id="folder-row-11"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="CHANGELOG.md" aria-label="CHANGELOG.md, (File)" class="Link--primary" href="/nextapps-de/mikado/blob/master/CHANGELOG.md">CHANGELOG.md</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="CHANGELOG.md" aria-label="CHANGELOG.md, (File)" class="Link--primary" href="/nextapps-de/mikado/blob/master/CHANGELOG.md">CHANGELOG.md</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row truncate-for-mobile" id="folder-row-12"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="LICENSE" aria-label="LICENSE, (File)" class="Link--primary" href="/nextapps-de/mikado/blob/master/LICENSE">LICENSE</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="LICENSE" aria-label="LICENSE, (File)" class="Link--primary" href="/nextapps-de/mikado/blob/master/LICENSE">LICENSE</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row truncate-for-mobile" id="folder-row-13"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="README.md" aria-label="README.md, (File)" class="Link--primary" href="/nextapps-de/mikado/blob/master/README.md">README.md</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="README.md" aria-label="README.md, (File)" class="Link--primary" href="/nextapps-de/mikado/blob/master/README.md">README.md</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row truncate-for-mobile" id="folder-row-14"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="index.d.ts" aria-label="index.d.ts, (File)" class="Link--primary" href="/nextapps-de/mikado/blob/master/index.d.ts">index.d.ts</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="index.d.ts" aria-label="index.d.ts, (File)" class="Link--primary" href="/nextapps-de/mikado/blob/master/index.d.ts">index.d.ts</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row truncate-for-mobile" id="folder-row-15"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="package-lock.json" aria-label="package-lock.json, (File)" class="Link--primary" href="/nextapps-de/mikado/blob/master/package-lock.json">package-lock.json</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="package-lock.json" aria-label="package-lock.json, (File)" class="Link--primary" href="/nextapps-de/mikado/blob/master/package-lock.json">package-lock.json</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row truncate-for-mobile" id="folder-row-16"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="package.json" aria-label="package.json, (File)" class="Link--primary" href="/nextapps-de/mikado/blob/master/package.json">package.json</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="package.json" aria-label="package.json, (File)" class="Link--primary" href="/nextapps-de/mikado/blob/master/package.json">package.json</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="Box-sc-g0xbh4-0 eNCcrz show-for-mobile" data-testid="view-all-files-row"><td colSpan="3" class="Box-sc-g0xbh4-0 bHTcCe"><div><button class="prc-Link-Link-85e08">View all files</button></div></td></tr></tbody></table></div><div class="Box-sc-g0xbh4-0 csrIcr"><div class="Box-sc-g0xbh4-0 bUQNHB"><div itemscope="" itemType="https://schema.org/abstract" class="Box-sc-g0xbh4-0 jPdcfu"><h2 class="_VisuallyHidden__VisuallyHidden-sc-11jhm7a-0 brGdpi">Repository files navigation</h2><nav class="UnderlineTabbedInterface__StyledComponentUnderlineWrapper-sc-4ilrg0-0 eBevHz" aria-label="Repository files"><ul role="list" class="UnderlineTabbedInterface__StyledComponentUnderlineItemList-sc-4ilrg0-1 ehEdWC"><li class="Box-sc-g0xbh4-0 hUCRAk"><a href="#" aria-current="page" class="UnderlineTabbedInterface__StyledUnderlineItem-sc-4ilrg0-2 beOdPj"><span data-component="icon"><svg aria-hidden="true" focusable="false" class="octicon octicon-book" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M0 1.75A.75.75 0 0 1 .75 1h4.253c1.227 0 2.317.59 3 1.501A3.743 3.743 0 0 1 11.006 1h4.245a.75.75 0 0 1 .75.75v10.5a.75.75 0 0 1-.75.75h-4.507a2.25 2.25 0 0 0-1.591.659l-.622.621a.75.75 0 0 1-1.06 0l-.622-.621A2.25 2.25 0 0 0 5.258 13H.75a.75.75 0 0 1-.75-.75Zm7.251 10.324.004-5.073-.002-2.253A2.25 2.25 0 0 0 5.003 2.5H1.5v9h3.757a3.75 3.75 0 0 1 1.994.574ZM8.755 4.75l-.004 7.322a3.752 3.752 0 0 1 1.992-.572H14.5v-9h-3.495a2.25 2.25 0 0 0-2.25 2.25Z"></path></svg></span><span data-component="text" data-content="README">README</span></a></li><li class="Box-sc-g0xbh4-0 hUCRAk"><a href="#" class="UnderlineTabbedInterface__StyledUnderlineItem-sc-4ilrg0-2 beOdPj"><span data-component="icon"><svg aria-hidden="true" focusable="false" class="octicon octicon-law" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M8.75.75V2h.985c.304 0 .603.08.867.231l1.29.736c.038.022.08.033.124.033h2.234a.75.75 0 0 1 0 1.5h-.427l2.111 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.006.005-.01.01-.045.04c-.21.176-.441.327-.686.45C14.556 10.78 13.88 11 13 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L12.178 4.5h-.162c-.305 0-.604-.079-.868-.231l-1.29-.736a.245.245 0 0 0-.124-.033H8.75V13h2.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1 0-1.5h2.5V3.5h-.984a.245.245 0 0 0-.124.033l-1.289.737c-.265.15-.564.23-.869.23h-.162l2.112 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.016.015-.045.04c-.21.176-.441.327-.686.45C4.556 10.78 3.88 11 3 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L2.178 4.5H1.75a.75.75 0 0 1 0-1.5h2.234a.249.249 0 0 0 .125-.033l1.288-.737c.265-.15.564-.23.869-.23h.984V.75a.75.75 0 0 1 1.5 0Zm2.945 8.477c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327Zm-10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327Z"></path></svg></span><span data-component="text" data-content="Apache-2.0 license">Apache-2.0 license</span></a></li></ul></nav><button style="--button-color:fg.subtle" type="button" aria-label="Outline" aria-haspopup="true" aria-expanded="false" tabindex="0" class="Box-sc-g0xbh4-0 cwoBXV prc-Button-ButtonBase-c50BI" data-loading="false" data-size="medium" data-variant="invisible" aria-describedby=":Rr9ab:-loading-announcement" id=":Rr9ab:"><svg aria-hidden="true" focusable="false" class="octicon octicon-list-unordered" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M5.75 2.5h8.5a.75.75 0 0 1 0 1.5h-8.5a.75.75 0 0 1 0-1.5Zm0 5h8.5a.75.75 0 0 1 0 1.5h-8.5a.75.75 0 0 1 0-1.5Zm0 5h8.5a.75.75 0 0 1 0 1.5h-8.5a.75.75 0 0 1 0-1.5ZM2 14a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-6a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM2 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg></button></div><div class="Box-sc-g0xbh4-0 QkQOb js-snippet-clipboard-copy-unpositioned undefined" data-hpc="true"><article class="markdown-body entry-content container-lg" itemprop="text"><div class="markdown-heading" dir="auto"><h1 tabindex="-1" class="heading-element" dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/ad856042c9ee8161f06b5738ebce0c72234212c7e767a597b2b1b8a3f6e1fe59/68747470733a2f2f63646e2e6a7364656c6976722e6e65742f67682f6e657874617070732d64652f6d696b61646f406d61737465722f646f632f6d696b61646f2d616e696d617465642e7376673f763d33"><img src="https://camo.githubusercontent.com/ad856042c9ee8161f06b5738ebce0c72234212c7e767a597b2b1b8a3f6e1fe59/68747470733a2f2f63646e2e6a7364656c6976722e6e65742f67682f6e657874617070732d64652f6d696b61646f406d61737465722f646f632f6d696b61646f2d616e696d617465642e7376673f763d33" alt="Mikado - Webs fastest templating engine" width="550px" data-canonical-src="https://cdn.jsdelivr.net/gh/nextapps-de/mikado@master/doc/mikado-animated.svg?v=3" style="max-width: 100%;"></a><p dir="auto"></p></h1><a id="" class="anchor" aria-label="Permalink: " href="#"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Mikado is the webs fastest template engine for building user interfaces. Carefully crafted to get the most out of the browser. Also providing the fastest Express Render Engine of today. Super-lightweight, outstanding performance, no dependencies.</h3><a id="user-content-mikado-is-the-webs-fastest-template-engine-for-building-user-interfaces-carefully-crafted-to-get-the-most-out-of-the-browser-also-providing-the-fastest-express-render-engine-of-today-super-lightweight-outstanding-performance-no-dependencies" class="anchor" aria-label="Permalink: Mikado is the webs fastest template engine for building user interfaces. Carefully crafted to get the most out of the browser. Also providing the fastest Express Render Engine of today. Super-lightweight, outstanding performance, no dependencies." href="#mikado-is-the-webs-fastest-template-engine-for-building-user-interfaces-carefully-crafted-to-get-the-most-out-of-the-browser-also-providing-the-fastest-express-render-engine-of-today-super-lightweight-outstanding-performance-no-dependencies"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto"><a href="https://www.npmjs.com/package/mikado" rel="nofollow"><img src="https://camo.githubusercontent.com/1cab20b1dc2917b3535325cd8f2f26c2fcbcac39b755109e5f1bf5f12f1ba12b/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f6d696b61646f2e737667" data-canonical-src="https://img.shields.io/npm/v/mikado.svg" style="max-width: 100%;"></a> <a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/7c46a30435dfcf8db3fb1095dcf087c97dcf396f9361be69e5f84ff6ff21f276/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6275696c642d70617373696e672d627269676874677265656e"><img src="https://camo.githubusercontent.com/7c46a30435dfcf8db3fb1095dcf087c97dcf396f9361be69e5f84ff6ff21f276/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6275696c642d70617373696e672d627269676874677265656e" data-canonical-src="https://img.shields.io/badge/build-passing-brightgreen" style="max-width: 100%;"></a> <a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/1c1f9382219abac9bae818322ccdaf248cc1e5e4284db69af84d0eafc284caed/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f636f7665726167652d39302532352d627269676874677265656e"><img src="https://camo.githubusercontent.com/1c1f9382219abac9bae818322ccdaf248cc1e5e4284db69af84d0eafc284caed/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f636f7665726167652d39302532352d627269676874677265656e" data-canonical-src="https://img.shields.io/badge/coverage-90%25-brightgreen" style="max-width: 100%;"></a> <a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/e2b15b0b96ff985344c016e54980053ce29f32c22ae7d6c50934cf5e8015a206/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f74797065642d39332532352d627269676874677265656e"><img src="https://camo.githubusercontent.com/e2b15b0b96ff985344c016e54980053ce29f32c22ae7d6c50934cf5e8015a206/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f74797065642d39332532352d627269676874677265656e" data-canonical-src="https://img.shields.io/badge/typed-93%25-brightgreen" style="max-width: 100%;"></a> <a href="https://github.com/nextapps-de/mikado/issues"><img src="https://camo.githubusercontent.com/2d39e3ec77fe95ea1def3f670cde53bfb63c3f03a8042a1b92e6e7ba67daa8c4/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6973737565732f6e657874617070732d64652f6d696b61646f2e737667" data-canonical-src="https://img.shields.io/github/issues/nextapps-de/mikado.svg" style="max-width: 100%;"></a> <a href="https://github.com/nextapps-de/mikado/blob/master/LICENSE"><img src="https://camo.githubusercontent.com/56cd3e9ef4db4a5430c27caa8a8116df887b5a66284b86f2d6d28d4421477005/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f6c2f6d696b61646f2e737667" data-canonical-src="https://img.shields.io/npm/l/mikado.svg" style="max-width: 100%;"></a></p> <p dir="auto"><a href="#get-started">Getting Started</a> • <a href="#options">Options</a> • <a href="#api">API</a> • <a href="#benchmark">Benchmark</a> • <a href="#compiler">Template Compiler</a> • <a href="#ssr">Server-Side-Rendering</a> • <a href="#express">Express Render Engine</a> • <a href="#proxy">Reactive</a> • <a href="#hydration">Hydration</a> • <a href="#shadow">Web Components (Shadow DOM)</a> • <a href="/nextapps-de/mikado/blob/master/CHANGELOG.md">Changelog</a></p> <p dir="auto">When you are coming from any previous version: <a href="/nextapps-de/mikado/blob/master/doc/migrate-0.8.md">Migration Guide 0.8.x</a></p> <p dir="auto"><strong>Benchmark:</strong></p> <ul dir="auto"> <li><a href="#benchmark">Stress Test Benchmark</a></li> <li><a href="https://krausest.github.io/js-framework-benchmark/current.html" rel="nofollow">https://krausest.github.io/js-framework-benchmark/current.html</a></li> </ul> <p dir="auto"><strong>Demo:</strong></p> <ul dir="auto"> <li>TodoMVC App: <a href="/nextapps-de/mikado/blob/master/examples/todomvc">Project</a> / <a href="/nextapps-de/mikado/blob/master/examples/todomvc/src">Source</a> / <a href="https://raw.githack.com/nextapps-de/mikado/master/examples/todomvc/dist/index.html" rel="nofollow">Demo</a></li> </ul> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Support this Project</h2><a id="user-content-support-this-project" class="anchor" aria-label="Permalink: Support this Project" href="#support-this-project"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Mikado was getting so much positive feedback and also feature requests. Help keeping Mikado active by a personal donation.</p> <p dir="auto"><a href="https://opencollective.com/mikado/donate" rel="nofollow"><img src="/nextapps-de/mikado/raw/master/doc/opencollective.png" height="32" alt="Donate using Open Collective" style="max-width: 100%;"></a> <a href="https://github.com/sponsors/ts-thomas/"><img src="/nextapps-de/mikado/raw/master/doc/github-sponsors.png" height="32" alt="Donate using Github Sponsors" style="max-width: 100%;"></a> <a href="https://liberapay.com/ts-thomas/donate" rel="nofollow"><img src="/nextapps-de/mikado/raw/master/doc/liberapay.svg" height="32" alt="Donate using Liberapay" style="max-width: 100%;"></a> <a href="https://www.patreon.com/user?u=96245532" rel="nofollow"><img src="/nextapps-de/mikado/raw/master/doc/patron.png" height="32" alt="Donate using Patreon" style="max-width: 100%;"></a> <a href="https://salt.bountysource.com/teams/ts-thomas" rel="nofollow"><img src="/nextapps-de/mikado/raw/master/doc/bountysource.svg" height="32" alt="Donate using Bountysource" style="max-width: 100%;"></a> <a href="https://www.paypal.com/donate/?hosted_button_id=GEVR88FC9BWRW" rel="nofollow"><img src="/nextapps-de/mikado/raw/master/doc/paypal.png" height="32" alt="Donate using PayPal" style="max-width: 100%;"></a></p> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Table of contents</h2><a id="user-content-table-of-contents" class="anchor" aria-label="Permalink: Table of contents" href="#table-of-contents"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Rendering has great <strong>impact</strong> on application performance, especially <strong>on mobile devices</strong>. Mikado takes <a href="#benchmark">templating performance</a> to a new level and provides you <strong>keyed</strong>, <strong>non-keyed</strong> recycling and also <strong>reactive paradigm</strong> switchable out of the box. Additionally, Mikado provides a <strong>server-side-rendering</strong> approach on a top-notch performance level along full support for <strong>hydration</strong> to inject templates progressively within the client's runtime. Server and client are sharing the same template definitions simply written in <strong>HTML-like markup</strong>. The server side approach will also come with the <strong>fastest middleware render engine for Express</strong> you can get today. Packed with a smart routing feature for event delegation and full support for web components by using the Shadow DOM, Mikado gives you everything you'll need to build <a href="#concept">realtime applications</a> on a cutting edge performance level.</p> <ol dir="auto"> <li><a href="#get-latest">Get Latest</a></li> <li><a href="#feature-comparison">Feature Comparison: Mikado Light</a></li> <li><a href="#benchmark">Benchmark Ranking (Rendering Performance)</a></li> <li><a href="#api">API Overview</a></li> <li><a href="#options">Mikado Options</a></li> <li><a href="#get-started">Getting Started (Basic Example)</a></li> <li><a href="#conventions">Rules and Conventions</a></li> <li><a href="#advanced_example">Advanced Example</a></li> <li><a href="#compiler">Template Compiler</a> <ul dir="auto"> <li><a href="#identifier">Reserved Keywords</a></li> <li><a href="#compiler-flags">Compiler Flags</a></li> <li><a href="#auto-naming">Auto Naming</a></li> <li><a href="#prebuilt-cache">Prebuilt Cache</a></li> <li><a href="#watcher">Watcher (Auto-Compile)</a></li> <li><a href="#runtime-compiler">Runtime Compiler</a></li> </ul> </li> <li><a href="#expressions">Template Expressions</a> <ul dir="auto"> <li><a href="#insertion">Value Insertion</a></li> <li><a href="#inline-js">JS Inline Code</a></li> <li><a href="#truthy">Truthy Values</a></li> <li><a href="#escape-ssr">Escape Values (SSR)</a></li> <li><a href="#html">HTML Contents</a></li> <li><a href="#sanitize">Sanitizer</a></li> <li><a href="#bindings">Reactive Bindings</a></li> </ul> </li> <li><a href="#event">Routing & Event Delegation</a> <ul dir="auto"> <li><a href="#bubbling">Event Bubbling</a></li> <li><a href="#event-cache">Event Cache</a></li> <li><a href="#view.listen">Explicit Register Event Delegation</a></li> <li><a href="#event-control">Control Native Events</a></li> <li><a href="#view.dispatch">Dispatch Routes</a></li> </ul> </li> <li>Recycling Modes: <ul dir="auto"> <li><a href="#non-keyed">Non-Keyed Recycling</a></li> <li><a href="#keyed">Keyed Recycling</a></li> </ul> </li> <li>Views: <ul dir="auto"> <li><a href="#mikado.new">Create Views</a></li> <li><a href="#view.mount">Mount Views</a></li> <li><a href="#view.destroy">Destroy Views</a></li> <li><a href="#view.render">Render Templates</a></li> <li><a href="#view.create">Create Components</a></li> <li><a href="#modify-views">Modify Views</a></li> <li><a href="#helpers">Common View Helpers</a></li> <li><a href="#manipulate">Manipulate Views</a></li> </ul> </li> <li><a href="#cache">DOM State Caching</a> <ul dir="auto"> <li><a href="#cache-concept">State Caching Concept</a></li> <li><a href="#cache-helpers">DOM Cache Helpers</a></li> </ul> </li> <li><a href="#view.state">View State</a></li> <li><a href="#callbacks">Custom Callbacks</a></li> <li><a href="#static">Static Templates</a> <ul dir="auto"> <li><a href="#mikado.once">Once (One-time rendering)</a></li> </ul> </li> <li><a href="#ssr">Server-Side Rendering (SSR)</a> <ul dir="auto"> <li><a href="#ssr-exclusive">SSR-exclusive Mode</a></li> </ul> </li> <li><a href="#express">Express Render Engine</a> <ul dir="auto"> <li><a href="#express-options">Custom Options</a></li> <li><a href="#express-render">Render Views</a></li> </ul> </li> <li>Template Features: <ul dir="auto"> <li><a href="#expressions">Template Expressions</a></li> <li><a href="#includes">Includes</a></li> <li><a href="#loop-partials">Loop Partials</a></li> <li><a href="#inline-loops">Inline Loops</a></li> <li><a href="#conditional">Conditional Template Structures</a></li> </ul> </li> <li>Reactive Features: <ul dir="auto"> <li><a href="#proxy">Reactive Properties (Proxy)</a></li> <li><a href="#observable">Reactive Array (Virtual NodeList)</a></li> <li><a href="#limitations">Limitations</a></li> <li><a href="#strict-proxy">Strict-Proxy Mode</a></li> <li><a href="#array.transaction">Transactions</a></li> </ul> </li> <li><a href="#pools">Template Pools</a></li> <li><a href="#hydration">Hydration</a></li> <li><a href="#shadow">Web Components (Shadow DOM)</a></li> <li><a href="#full-template">Full Template Example</a></li> <li><a href="#best-practices">Best Practices</a></li> <li><a href="#concept">Concept of Shared Components</a></li> <li><a href="#builds">Custom Builds</a> <ul dir="auto"> <li><a href="#build-flags">Supported Build Flags</a></li> </ul> </li> </ol> <p dir="auto"><a name="user-content-get-latest"></a></p> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Get Latest</h2><a id="user-content-get-latest" class="anchor" aria-label="Permalink: Get Latest" href="#get-latest"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <blockquote> <p dir="auto">Do not use the "src" folder of this repo. It isn't meant to be used directly, instead it needs compilation. You can easily perform a <a href="#builds">custom build</a>, but don't use the source folder for production. You will need at least any kind of compiler which resolve the compiler flags within the code. The "dist" folder is containing every version which you probably need including unminified modules.</p> </blockquote> <markdown-accessiblity-table><table> <tbody><tr></tr> <tr> <td>Build</td> <td>File</td> <td>CDN</td> </tr> <tr> <td>mikado.bundle.debug.js</td> <td><a href="https://github.com/nextapps-de/mikado/raw/0.8.4/dist/mikado.bundle.debug.js">Download</a></td> <td><a href="https://rawcdn.githack.com/nextapps-de/mikado/0.8.4/dist/mikado.bundle.debug.js" rel="nofollow">https://rawcdn.githack.com/nextapps-de/mikado/0.8.4/dist/mikado.bundle.debug.js</a></td> </tr> <tr></tr> <tr> <td>mikado.bundle.min.js</td> <td><a href="https://github.com/nextapps-de/mikado/raw/0.8.4/dist/mikado.bundle.min.js">Download</a></td> <td><a href="https://rawcdn.githack.com/nextapps-de/mikado/0.8.4/dist/mikado.bundle.min.js" rel="nofollow">https://rawcdn.githack.com/nextapps-de/mikado/0.8.4/dist/mikado.bundle.min.js</a></td> </tr> <tr></tr> <tr> <td>mikado.bundle.module.debug.js</td> <td><a href="https://github.com/nextapps-de/mikado/raw/0.8.4/dist/mikado.bundle.module.debug.js">Download</a></td> <td><a href="https://rawcdn.githack.com/nextapps-de/mikado/0.8.4/dist/mikado.bundle.module.debug.js" rel="nofollow">https://rawcdn.githack.com/nextapps-de/mikado/0.8.4/dist/mikado.bundle.module.debug.js</a></td> </tr> <tr></tr> <tr> <td>mikado.bundle.module.min.js</td> <td><a href="https://github.com/nextapps-de/mikado/raw/0.8.4/dist/mikado.bundle.module.min.js">Download</a></td> <td><a href="https://rawcdn.githack.com/nextapps-de/mikado/0.8.4/dist/mikado.bundle.module.min.js" rel="nofollow">https://rawcdn.githack.com/nextapps-de/mikado/0.8.4/dist/mikado.bundle.module.min.js</a></td> </tr> <tr></tr> <tr> <td>mikado.es5.debug.js</td> <td><a href="https://github.com/nextapps-de/mikado/raw/0.8.4/dist/mikado.es5.debug.js">Download</a></td> <td><a href="https://rawcdn.githack.com/nextapps-de/mikado/0.8.4/dist/mikado.es5.debug.js" rel="nofollow">https://rawcdn.githack.com/nextapps-de/mikado/0.8.4/dist/mikado.es5.debug.js</a></td> </tr> <tr></tr> <tr> <td>mikado.es5.min.js</td> <td><a href="https://github.com/nextapps-de/mikado/raw/0.8.4/dist/mikado.es5.min.js">Download</a></td> <td><a href="https://rawcdn.githack.com/nextapps-de/mikado/0.8.4/dist/mikado.es5.min.js" rel="nofollow">https://rawcdn.githack.com/nextapps-de/mikado/0.8.4/dist/mikado.es5.min.js</a></td> </tr> <tr></tr> <tr> <td>mikado.light.debug.js</td> <td><a href="https://github.com/nextapps-de/mikado/raw/0.8.4/dist/mikado.light.debug.js">Download</a></td> <td><a href="https://rawcdn.githack.com/nextapps-de/mikado/0.8.4/dist/mikado.light.debug.js" rel="nofollow">https://rawcdn.githack.com/nextapps-de/mikado/0.8.4/dist/mikado.light.debug.js</a></td> </tr> <tr></tr> <tr> <td>mikado.light.min.js</td> <td><a href="https://github.com/nextapps-de/mikado/raw/0.8.4/dist/mikado.light.min.js">Download</a></td> <td><a href="https://rawcdn.githack.com/nextapps-de/mikado/0.8.4/dist/mikado.light.min.js" rel="nofollow">https://rawcdn.githack.com/nextapps-de/mikado/0.8.4/dist/mikado.light.min.js</a></td> </tr> <tr></tr> <tr> <td>mikado.light.module.debug.js</td> <td><a href="https://github.com/nextapps-de/mikado/raw/0.8.4/dist/mikado.light.module.debug.js">Download</a></td> <td><a href="https://rawcdn.githack.com/nextapps-de/mikado/0.8.4/dist/mikado.light.module.debug.js" rel="nofollow">https://rawcdn.githack.com/nextapps-de/mikado/0.8.4/dist/mikado.light.module.debug.js</a></td> </tr> <tr></tr> <tr> <td>mikado.light.module.min.js</td> <td><a href="https://github.com/nextapps-de/mikado/raw/0.8.4/dist/mikado.light.module.min.js">Download</a></td> <td><a href="https://rawcdn.githack.com/nextapps-de/mikado/0.8.4/dist/mikado.light.module.min.js" rel="nofollow">https://rawcdn.githack.com/nextapps-de/mikado/0.8.4/dist/mikado.light.module.min.js</a></td> </tr> <tr></tr> <tr> <td>Javascript Modules</td> <td><a href="https://github.com/nextapps-de/mikado/raw/0.8.4/dist/module/">Download</a></td> <td><a href="https://github.com/nextapps-de/mikado/tree/0.8.4/dist/module">https://github.com/nextapps-de/mikado/tree/0.8.4/dist/module</a></td> </tr> <tr></tr> <tr> <td>Javascript Modules (Minified)</td> <td><a href="https://github.com/nextapps-de/mikado/raw/0.8.4/dist/module-min/">Download</a></td> <td><a href="https://github.com/nextapps-de/mikado/tree/0.8.4/dist/module-min">https://github.com/nextapps-de/mikado/tree/0.8.4/dist/module-min</a></td> </tr> <tr></tr> <tr> <td>Javascript Modules (Debug)</td> <td><a href="https://github.com/nextapps-de/mikado/raw/0.8.4/dist/module-debug/">Download</a></td> <td><a href="https://github.com/nextapps-de/mikado/tree/0.8.4/dist/module-debug">https://github.com/nextapps-de/mikado/tree/0.8.4/dist/module-debug</a></td> </tr> <tr></tr> <tr> <td>mikado.custom.js</td> <td colspan="2"><a href="#builds">Read more about "Custom Build"</a></td> </tr> </tbody></table></markdown-accessiblity-table> <blockquote> <p dir="auto">All debug versions are providing debug information through the console and gives you helpful advices on certain situations.</p> </blockquote> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Bundles</h3><a id="user-content-bundles" class="anchor" aria-label="Permalink: Bundles" href="#bundles"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <blockquote> <p dir="auto">Bundles export all their features as static functions to the public class namespace "Mikado" e.g. <code>Mikado.register()</code>.</p> </blockquote> <p dir="auto">The abbreviations used at the end of the filenames indicates:</p> <ul dir="auto"> <li><code>bundle</code> All features included, Mikado is available on <code>window.Mikado</code></li> <li><code>light</code> Only basic features are included, Mikado is available on <code>window.Mikado</code></li> <li><code>es5</code> bundle has support for EcmaScript5, Mikado is available on <code>window.Mikado</code></li> <li><code>module</code> bundle is a Javascript module, Mikado is available by <code>import Mikado from "./mikado.bundle.module.min.js"</code></li> <li><code>min</code> bundle is minified</li> <li><code>debug</code> bundle has enabled debug mode (only for development purposes, do not use for production)</li> </ul> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Module</h3><a id="user-content-module" class="anchor" aria-label="Permalink: Module" href="#module"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">When using modules you can choose from 2 variants: <code>mikado.xxx.module.min.js</code> has all features bundled on the public class namespace e.g. <code>Mikado.register()</code>, whereas the folder <code>/dist/module/</code> export most of the features as functions which needs to be imported explicitly by <code>import { register } from "./dist/module/mikado.js"</code>.</p> <p dir="auto">Also, for each variant there exist:</p> <ol dir="auto"> <li>A debug version for the development</li> <li>A pre-compiled minified version for production</li> </ol> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Browser</h3><a id="user-content-browser" class="anchor" aria-label="Permalink: Browser" href="#browser"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Load the bundle by a script tag:</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<script src="dist/mikado.bundle.min.js"></script> <script> // ... access Mikado </script>"><pre><span class="pl-kos"><</span><span class="pl-ent">script</span> <span class="pl-c1">src</span>="<span class="pl-s">dist/mikado.bundle.min.js</span>"<span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">script</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">script</span><span class="pl-kos">></span> <span class="pl-c">// ... access Mikado</span> <span class="pl-kos"></</span><span class="pl-ent">script</span><span class="pl-kos">></span></pre></div> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">NPM</h3><a id="user-content-npm" class="anchor" aria-label="Permalink: NPM" href="#npm"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Install Mikado via NPM:</p> <div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="npm install mikado"><pre lang="npm" class="notranslate"><code>npm install mikado </code></pre></div> <p dir="auto">The <strong><em>dist</em></strong> folder are located in <code>node_modules/mikado/dist/</code>.</p> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Javascript Modules</h3><a id="user-content-javascript-modules" class="anchor" aria-label="Permalink: Javascript Modules" href="#javascript-modules"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Use the bundled version exported as a module:</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<script type="module"> import Mikado from "./dist/mikado.bundle.module.min.js"; // bundled access by e.g. Mikado.register() </script>"><pre><span class="pl-kos"><</span><span class="pl-ent">script</span> <span class="pl-c1">type</span>="<span class="pl-s">module</span>"<span class="pl-kos">></span> <span class="pl-k">import</span> <span class="pl-v">Mikado</span> <span class="pl-k">from</span> <span class="pl-s">"./dist/mikado.bundle.module.min.js"</span><span class="pl-kos">;</span> <span class="pl-c">// bundled access by e.g. Mikado.register()</span> <span class="pl-kos"></</span><span class="pl-ent">script</span><span class="pl-kos">></span></pre></div> <p dir="auto">Also, pre-compiled non-bundled production-ready modules are located in <code>dist/module-min/</code>.</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<script type="module"> import Mikado, { register } from "./dist/module-min/mikado.js"; // bundled access by Mikado.register isn't available // requires direct access by e.g. register() </script>"><pre><span class="pl-kos"><</span><span class="pl-ent">script</span> <span class="pl-c1">type</span>="<span class="pl-s">module</span>"<span class="pl-kos">></span> <span class="pl-k">import</span> <span class="pl-v">Mikado</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-s1">register</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"./dist/module-min/mikado.js"</span><span class="pl-kos">;</span> <span class="pl-c">// bundled access by Mikado.register isn't available</span> <span class="pl-c">// requires direct access by e.g. register()</span> <span class="pl-kos"></</span><span class="pl-ent">script</span><span class="pl-kos">></span></pre></div> <p dir="auto">You can also load modules via CDN:</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<script type="module"> import Mikado from "https://unpkg.com/mikado@0.8.404/dist/module/mikado.js"; </script>"><pre><span class="pl-kos"><</span><span class="pl-ent">script</span> <span class="pl-c1">type</span>="<span class="pl-s">module</span>"<span class="pl-kos">></span> <span class="pl-k">import</span> <span class="pl-v">Mikado</span> <span class="pl-k">from</span> <span class="pl-s">"https://unpkg.com/mikado@0.8.404/dist/module/mikado.js"</span><span class="pl-kos">;</span> <span class="pl-kos"></</span><span class="pl-ent">script</span><span class="pl-kos">></span></pre></div> <blockquote> <p dir="auto">Loading modules via CDN commonly expects to build/bundle your app properly before distribution. Do not load them via CDN in production.</p> </blockquote> <p dir="auto"><a name="user-content-feature-comparison"></a></p> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Feature Comparison "Bundle vs. Light"</h3><a id="user-content-feature-comparison-bundle-vs-light" class="anchor" aria-label="Permalink: Feature Comparison "Bundle vs. Light"" href="#feature-comparison-bundle-vs-light"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <markdown-accessiblity-table><table> <tbody><tr></tr> <tr> <td>Feature</td> <td>mikado.bundle.js</td> <td>mikado.light.js</td> </tr> <tr> <td> Template Render Engine </td> <td>✓</td> <td>✓</td> </tr> <tr></tr> <tr> <td> <a href="#cache">DOM State Caching</a> </td> <td>✓</td> <td>✓</td> </tr> <tr></tr> <tr> <td> <a href="#pool">Shared Pools / Live Pools</a> </td> <td>✓</td> <td>✓</td> </tr> <tr></tr> <tr> <td> <a href="#keyed">Keyed Recycle</a> </td> <td>✓</td> <td>✓</td> </tr> <tr></tr> <tr> <td> <a href="#recycle">Non-keyed Recycle</a> </td> <td>✓</td> <td>✓</td> </tr> <tr></tr> <tr> <td> <a href="#reconcile">Reconcile (Diffing)</a> </td> <td>✓</td> <td>✓</td> </tr> <tr></tr> <tr> <td> <a href="#hydration">Hydration</a> </td> <td>✓</td> <td>✓</td> </tr> <tr></tr> <tr> <td> <a href="#expression">Template Expressions</a> </td> <td>✓</td> <td>✓</td> </tr> <tr></tr> <tr> <td> <a href="#conditional">Conditional Template Structures</a> </td> <td>✓</td> <td>✓</td> </tr> <tr></tr> <tr> <td> <a href="#include">Includes/Partials/Loops</a> </td> <td>✓</td> <td>✓</td> </tr> <tr></tr> <tr> <td> <a href="#shadow">Shadow DOM</a> </td> <td>✓</td> <td>✓</td> </tr> <tr></tr> <tr> <td> <a href="#shadow">Web Components</a> </td> <td>✓</td> <td>-</td> </tr> <tr></tr> <tr> <td> <a href="#runtime-compiler">Runtime Compiler</a> </td> <td>✓</td> <td>-</td> </tr> <tr></tr> <tr> <td> <a href="#event">Event Delegation + Routes</a> </td> <td>✓</td> <td>-</td> </tr> <tr></tr> <tr> <td> <a href="#proxy">Reactive (Proxy, Observer)</a> </td> <td>✓</td> <td>-</td> </tr> <tr></tr> <tr> <td> <a href="#async">Asynchronous Render</a> </td> <td>✓</td> <td>-</td> </tr> <tr></tr> <tr> <td> <a href="#manipulate">View Manipulation Helpers</a> </td> <td>✓</td> <td>-</td> </tr> <tr></tr> <tr> <td> <a href="#helper">DOM Cache Helpers</a> </td> <td>✓</td> <td>-</td> </tr> <tr> <td>File Size (gzip)</td> <td>9.3 kb</td> <td>3.7 kb</td> </tr> </tbody></table></markdown-accessiblity-table> <p dir="auto"><a name="user-content-benchmark"></a></p> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Benchmark Ranking (Rendering Performance)</h2><a id="user-content-benchmark-ranking-rendering-performance" class="anchor" aria-label="Permalink: Benchmark Ranking (Rendering Performance)" href="#benchmark-ranking-rendering-performance"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Run the benchmark (non-keyed recycle):<br> <a href="https://raw.githack.com/nextapps-de/mikado/bench/" rel="nofollow"></a><a href="https://raw.githack.com/nextapps-de/mikado/bench/" rel="nofollow">https://raw.githack.com/nextapps-de/mikado/bench/</a><br></p> <p dir="auto">Run the benchmark (keyed recycle):<br> <a href="https://raw.githack.com/nextapps-de/mikado/bench/#keyed" rel="nofollow"></a><a href="https://raw.githack.com/nextapps-de/mikado/bench/#keyed" rel="nofollow">https://raw.githack.com/nextapps-de/mikado/bench/#keyed</a><br></p> <p dir="auto">Run the benchmark (internal/data-driven):<br> <a href="https://raw.githack.com/nextapps-de/mikado/bench/#internal" rel="nofollow"></a><a href="https://raw.githack.com/nextapps-de/mikado/bench/#internal" rel="nofollow">https://raw.githack.com/nextapps-de/mikado/bench/#internal</a><br></p> <p dir="auto">The values represent operations per second, each benchmark task has to process a data array of 100 items. Higher values are better, except for memory (the sum of allocated memory during the whole test).</p> <div class="markdown-heading" dir="auto"><h4 tabindex="-1" class="heading-element" dir="auto">Keyed Test Results</h4><a id="user-content-keyed-test-results" class="anchor" aria-label="Permalink: Keyed Test Results" href="#keyed-test-results"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <markdown-accessiblity-table><table> <tbody><tr></tr> <tr> <td><sub>Library</sub></td> <td align="center"><sub>RAM</sub></td> <td align="center"><sub>Create</sub></td> <td align="center"><sub>Replace</sub></td> <td align="center"><sub>Update</sub></td> <td align="center"><sub>Order</sub></td> <td align="center"><sub>Repaint</sub></td> <td align="center"><sub>Add</sub></td> <td align="center"><sub>Remove</sub></td> <td align="center"><sub>Toggle</sub></td> <td align="center"><sub>Clear</sub></td> <td align="center"><sub>Score</sub></td> <td align="center"><sub>Index</sub></td> </tr> <tr> <td><sub>mikado</sub></td> <td align="right"><sub>55</sub></td> <td align="right"><sub>3589</sub></td> <td align="right"><sub>2780</sub></td> <td align="right"><sub>199816</sub></td> <td align="right"><sub>134262</sub></td> <td align="right"><sub>536052</sub></td> <td align="right"><sub>93062</sub></td> <td align="right"><sub>93058</sub></td> <td align="right"><sub>92151</sub></td> <td align="right"><sub>51219</sub></td> <td align="right"><b><sub>3202</sub></b></td> <td align="right"><b><sub>92</sub></b></td> </tr> <tr></tr> <tr> <td><sub>solid</sub></td> <td align="right"><sub>44</sub></td> <td align="right"><sub>2438</sub></td> <td align="right"><sub>2230</sub></td> <td align="right"><sub>20362</sub></td> <td align="right"><sub>13101</sub></td> <td align="right"><sub>34436</sub></td> <td align="right"><sub>4595</sub></td> <td align="right"><sub>24891</sub></td> <td align="right"><sub>7858</sub></td> <td align="right"><sub>70825</sub></td> <td align="right"><b><sub>312</sub></b></td> <td align="right"><b><sub>37</sub></b></td> </tr> <tr></tr> <tr> <td><sub>inferno</sub></td> <td align="right"><sub>46</sub></td> <td align="right"><sub>2551</sub></td> <td align="right"><sub>2151</sub></td> <td align="right"><sub>14722</sub></td> <td align="right"><sub>13900</sub></td> <td align="right"><sub>16796</sub></td> <td align="right"><sub>4780</sub></td> <td align="right"><sub>20727</sub></td> <td align="right"><sub>7724</sub></td> <td align="right"><sub>54176</sub></td> <td align="right"><b><sub>238</sub></b></td> <td align="right"><b><sub>34</sub></b></td> </tr> <tr></tr> <tr> <td><sub>mithril</sub></td> <td align="right"><sub>45</sub></td> <td align="right"><sub>1672</sub></td> <td align="right"><sub>1505</sub></td> <td align="right"><sub>15406</sub></td> <td align="right"><sub>13868</sub></td> <td align="right"><sub>16638</sub></td> <td align="right"><sub>3599</sub></td> <td align="right"><sub>21109</sub></td> <td align="right"><sub>5653</sub></td> <td align="right"><sub>41525</sub></td> <td align="right"><b><sub>223</sub></b></td> <td align="right"><b><sub>28</sub></b></td> </tr> <tr></tr> <tr> <td><sub>stage0</sub></td> <td align="right"><sub>56</sub></td> <td align="right"><sub>2030</sub></td> <td align="right"><sub>2446</sub></td> <td align="right"><sub>11213</sub></td> <td align="right"><sub>9749</sub></td> <td align="right"><sub>11033</sub></td> <td align="right"><sub>4427</sub></td> <td align="right"><sub>18083</sub></td> <td align="right"><sub>7209</sub></td> <td align="right"><sub>90434</sub></td> <td align="right"><b><sub>199</sub></b></td> <td align="right"><b><sub>35</sub></b></td> </tr> <tr></tr> <tr> <td><sub>redom</sub></td> <td align="right"><sub>81</sub></td> <td align="right"><sub>1517</sub></td> <td align="right"><sub>1421</sub></td> <td align="right"><sub>10242</sub></td> <td align="right"><sub>9614</sub></td> <td align="right"><sub>10870</sub></td> <td align="right"><sub>2857</sub></td> <td align="right"><sub>16062</sub></td> <td align="right"><sub>4875</sub></td> <td align="right"><sub>28075</sub></td> <td align="right"><b><sub>160</sub></b></td> <td align="right"><b><sub>22</sub></b></td> </tr> <tr></tr> <tr> <td><sub>domc</sub></td> <td align="right"><sub>124</sub></td> <td align="right"><sub>3600</sub></td> <td align="right"><sub>3424</sub></td> <td align="right"><sub>3437</sub></td> <td align="right"><sub>3472</sub></td> <td align="right"><sub>3512</sub></td> <td align="right"><sub>3592</sub></td> <td align="right"><sub>6670</sub></td> <td align="right"><sub>4540</sub></td> <td align="right"><sub>100302</sub></td> <td align="right"><b><sub>120</sub></b></td> <td align="right"><b><sub>38</sub></b></td> </tr> <tr> <td><sub>innerhtml</sub></td> <td align="right"><sub>67</sub></td> <td align="right"><sub>2791</sub></td> <td align="right"><sub>2676</sub></td> <td align="right"><sub>2471</sub></td> <td align="right"><sub>2823</sub></td> <td align="right"><sub>2799</sub></td> <td align="right"><sub>2943</sub></td> <td align="right"><sub>5752</sub></td> <td align="right"><sub>3901</sub></td> <td align="right"><sub>103405</sub></td> <td align="right"><b><sub>105</sub></b></td> <td align="right"><b><sub>35</sub></b></td> </tr> <tr> <td><sub>surplus</sub></td> <td align="right"><sub>92</sub></td> <td align="right"><sub>2969</sub></td> <td align="right"><sub>2577</sub></td> <td align="right"><sub>2281</sub></td> <td align="right"><sub>2386</sub></td> <td align="right"><sub>2379</sub></td> <td align="right"><sub>2285</sub></td> <td align="right"><sub>4197</sub></td> <td align="right"><sub>3023</sub></td> <td align="right"><sub>86916</sub></td> <td align="right"><b><sub>91</sub></b></td> <td align="right"><b><sub>32</sub></b></td> </tr> <tr></tr> <tr> <td><sub>doohtml</sub></td> <td align="right"><sub>71</sub></td> <td align="right"><sub>2397</sub></td> <td align="right"><sub>2308</sub></td> <td align="right"><sub>2208</sub></td> <td align="right"><sub>2208</sub></td> <td align="right"><sub>2229</sub></td> <td align="right"><sub>2275</sub></td> <td align="right"><sub>4285</sub></td> <td align="right"><sub>2945</sub></td> <td align="right"><sub>63162</sub></td> <td align="right"><b><sub>82</sub></b></td> <td align="right"><b><sub>29</sub></b></td> </tr> <tr></tr> <tr> <td><sub>sinuous</sub></td> <td align="right"><sub>151</sub></td> <td align="right"><sub>2038</sub></td> <td align="right"><sub>2112</sub></td> <td align="right"><sub>2454</sub></td> <td align="right"><sub>2459</sub></td> <td align="right"><sub>2461</sub></td> <td align="right"><sub>2506</sub></td> <td align="right"><sub>4820</sub></td> <td align="right"><sub>3276</sub></td> <td align="right"><sub>59556</sub></td> <td align="right"><b><sub>81</sub></b></td> <td align="right"><b><sub>25</sub></b></td> </tr> <tr></tr> <tr> <td><sub>jquery</sub></td> <td align="right"><sub>103</sub></td> <td align="right"><sub>2195</sub></td> <td align="right"><sub>1919</sub></td> <td align="right"><sub>1893</sub></td> <td align="right"><sub>2092</sub></td> <td align="right"><sub>2093</sub></td> <td align="right"><sub>2084</sub></td> <td align="right"><sub>3903</sub></td> <td align="right"><sub>2594</sub></td> <td align="right"><sub>19220</sub></td> <td align="right"><b><sub>66</sub></b></td> <td align="right"><b><sub>21</sub></b></td> </tr> <tr></tr> <tr> <td><sub>lit-html</sub></td> <td align="right"><sub>199</sub></td> <td align="right"><sub>1410</sub></td> <td align="right"><sub>1329</sub></td> <td align="right"><sub>1349</sub></td> <td align="right"><sub>1351</sub></td> <td align="right"><sub>1333</sub></td> <td align="right"><sub>1393</sub></td> <td align="right"><sub>2415</sub></td> <td align="right"><sub>1764</sub></td> <td align="right"><sub>20837</sub></td> <td align="right"><b><sub>46</sub></b></td> <td align="right"><b><sub>15</sub></b></td> </tr> <tr></tr> <tr> <td><sub>ractive</sub></td> <td align="right"><sub>1870</sub></td> <td align="right"><sub>739</sub></td> <td align="right"><sub>672</sub></td> <td align="right"><sub>690</sub></td> <td align="right"><sub>686</sub></td> <td align="right"><sub>691</sub></td> <td align="right"><sub>725</sub></td> <td align="right"><sub>1247</sub></td> <td align="right"><sub>917</sub></td> <td align="right"><sub>7394</sub></td> <td align="right"><b><sub>22</sub></b></td> <td align="right"><b><sub>7</sub></b></td> </tr> <tr></tr> <tr> <td><sub>knockout</sub></td> <td align="right"><sub>1081</sub></td> <td align="right"><sub>399</sub></td> <td align="right"><sub>289</sub></td> <td align="right"><sub>291</sub></td> <td align="right"><sub>291</sub></td> <td align="right"><sub>280</sub></td> <td align="right"><sub>355</sub></td> <td align="right"><sub>524</sub></td> <td align="right"><sub>429</sub></td> <td align="right"><sub>3424</sub></td> <td align="right"><b><sub>12</sub></b></td> <td align="right"><b><sub>4</sub></b></td> </tr> </tbody></table></markdown-accessiblity-table> <p dir="auto">The <strong><em>index</em></strong> is a statistic rank having a maximum possible value of 100, this requires a library to be the best in each test category (regardless how much better). The <strong><em>score</em></strong> value is based on median factorization, here a score of 100 represents the statistical midfield.</p> <p dir="auto"><a name="user-content-api"></a></p> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">API Overview</h2><a id="user-content-api-overview" class="anchor" aria-label="Permalink: API Overview" href="#api-overview"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <blockquote> <p dir="auto">Most of these methods are optional, you can just use <strong><em>view.render(data)</em></strong> to apply all changes automatically.</p> </blockquote> <p dir="auto">Constructor:</p> <ul dir="auto"> <li>new <a href="#mikado.new"><strong>Mikado</strong>(template, <options>)</a> : <em>view</em></li> <li>new Mikado.<a href="#observable"><strong>Array</strong>(array)</a> : <em>observable</em></li> </ul> <p dir="auto">Instance properties:</p> <ul dir="auto"> <li>view.<a href="#view.name"><strong>name</strong></a> <em>readonly</em></li> <li>view.<a href="#view.root"><strong>root</strong></a> <em>readonly</em></li> <li>view.<a href="#view.length"><strong>length</strong></a> <em>readonly</em></li> <li>view.<a href="#view.state"><strong>state</strong></a> <em>readonly</em></li> </ul> <p dir="auto">Static properties (not included in mikado.light.js):</p> <ul dir="auto"> <li>Mikado.<a href="#mikado.eventCache"><strong>eventCache</strong></a> : <em>boolean</em></li> <li>Mikado.<a href="#mikado.eventBubble"><strong>eventBubble</strong></a> : <em>boolean</em></li> </ul> <p dir="auto">Static methods:</p> <ul dir="auto"> <li>Mikado.<a href="#mikado.once"><strong>once</strong>(root, template, <data>, <state>, <callback>)</a></li> <li>Mikado.<a href="#mikado.register"><strong>register</strong>(template, <options>)</a></li> <li>Mikado.<a href="#mikado.unregister"><strong>unregister</strong>(template)</a></li> </ul> <p dir="auto">Static methods (not included in mikado.light.js):</p> <ul dir="auto"> <li>Mikado.<a href="#mikado.route"><strong>route</strong>(name, function, <options>)</a></li> <li>Mikado.<a href="#mikado.listen"><strong>listen</strong>(event, <options>)</a></li> <li>Mikado.<a href="#mikado.unlisten"><strong>unlisten</strong>(event)</a></li> <li>Mikado.<a href="#mikado.dispatch"><strong>dispatch</strong>(route, <target>, <event>)</a></li> <li>Mikado.<a href="#mikado.escape"><strong>escape</strong>(text)</a> : <em>string</em></li> <li>Mikado.<a href="#mikado.sanitize"><strong>sanitize</strong>(text)</a> : <em>string</em></li> </ul> <p dir="auto">Instance methods:</p> <ul dir="auto"> <li>view.<a href="#view.mount"><strong>mount</strong>(root, <hydrate>)</a></li> <li>view.<a href="#view.render"><strong>render</strong>(<data>, <state>, <callback>)</a></li> <li>view.<a href="#view.create"><strong>create</strong>(data, <state>, <index>)</a> : <em>node</em></li> <li>view.<a href="#view.add"><strong>add</strong>(data, <state>, <position>)</a></li> <li>view.<a href="#view.append"><strong>append</strong>(data, <state>, <position>)</a></li> <li>view.<a href="#view.update"><strong>update</strong>(node | index, data, <state>)</a></li> <li>view.<a href="#view.replace"><strong>replace</strong>(node | index, data, <state>)</a></li> <li>view.<a href="#view.remove"><strong>remove</strong>(node, <count>)</a></li> <li>view.<a href="#view.clear"><strong>clear</strong>()</a></li> <li>view.<a href="#view.node"><strong>node</strong>(index)</a> : <em>node</em></li> <li>view.<a href="#view.index"><strong>index</strong>(node)</a> : <em>number</em></li> <li>view.<a href="#view.flush"><strong>flush</strong>()</a></li> <li>view.<a href="#view.destroy"><strong>destroy</strong>()</a></li> </ul> <p dir="auto">Instance methods (not included in mikado.light.js):</p> <ul dir="auto"> <li>view.<a href="#view.route"><strong>route</strong>(name, function, <options>)</a></li> <li>view.<a href="#view.listen"><strong>listen</strong>(event, <options>)</a></li> <li>view.<a href="#view.unlisten"><strong>unlisten</strong>(event)</a></li> <li>view.<a href="#view.dispatch"><strong>dispatch</strong>(name, <target>, <event>)</a></li> </ul> <p dir="auto">View manipulation helpers (optional, not included in mikado.light.js):</p> <ul dir="auto"> <li>view.<a href="#view.move"><strong>move</strong>(node | index, position)</a></li> <li>view.<a href="#view.shift"><strong>shift</strong>(node | index, offset)</a></li> <li>view.<a href="#view.up"><strong>up</strong>(node | index)</a></li> <li>view.<a href="#view.down"><strong>down</strong>(node | index)</a></li> <li>view.<a href="#view.first"><strong>first</strong>(node | index)</a></li> <li>view.<a href="#view.last"><strong>last</strong>(node | index)</a></li> <li>view.<a href="#view.before"><strong>before</strong>(node | index, node | index)</a></li> <li>view.<a href="#view.after"><strong>after</strong>(node | index, node | index)</a></li> <li>view.<a href="#view.swap"><strong>swap</strong>(node | index, node | index)</a></li> </ul> <p dir="auto">Static DOM Cache helpers (optional, not included in mikado.light.js):</p> <ul dir="auto"> <li> <p dir="auto">Mikado.<a href="#Mikado.setText"><strong>setText</strong>(node, text)</a></p> </li> <li> <p dir="auto">Mikado.<a href="#Mikado.getText"><strong>getText</strong>(node)</a> : <em>string</em></p> </li> <li> <p dir="auto">Mikado.<a href="#Mikado.setHtml"><strong>setHtml</strong>(node, html)</a></p> </li> <li> <p dir="auto">Mikado.<a href="#Mikado.getHtml"><strong>getHtml</strong>(node)</a> : <em>string</em></p> </li> <li> <p dir="auto">Mikado.<a href="#Mikado.setClass"><strong>setClass</strong>(node, [classnames])</a></p> </li> <li> <p dir="auto">Mikado.<a href="#Mikado.getClass"><strong>getClass</strong>(node)</a> : <em>[string]</em></p> </li> <li> <p dir="auto">Mikado.<a href="#Mikado.addClass"><strong>addClass</strong>(node, classname)</a></p> </li> <li> <p dir="auto">Mikado.<a href="#Mikado.addClass"><strong>addClass</strong>(node, [classnames])</a></p> </li> <li> <p dir="auto">Mikado.<a href="#Mikado.hasClass"><strong>hasClass</strong>(node, classname)</a> : <em>boolean</em></p> </li> <li> <p dir="auto">Mikado.<a href="#Mikado.removeClass"><strong>removeClass</strong>(node, classname)</a></p> </li> <li> <p dir="auto">Mikado.<a href="#Mikado.removeClass"><strong>removeClasses</strong>(node, [classnames])</a></p> </li> <li> <p dir="auto">Mikado.<a href="#Mikado.toggleClass"><strong>toggleClass</strong>(node, classname, <state>)</a></p> </li> <li> <p dir="auto">Mikado.<a href="#Mikado.toggleClass"><strong>toggleClasses</strong>(node, [classnames], <state>)</a></p> </li> <li> <p dir="auto">Mikado.<a href="#Mikado.toggleClass"><strong>toggleClasses</strong>(node, {classname: state})</a></p> </li> <li> <p dir="auto">Mikado.<a href="#Mikado.setStyle"><strong>setStyle</strong>(node, property, value)</a></p> </li> <li> <p dir="auto">Mikado.<a href="#Mikado.setStyle"><strong>setStyles</strong>(node, {property: value})</a></p> </li> <li> <p dir="auto">Mikado.<a href="#Mikado.getStyle"><strong>getStyle</strong>(node, property)</a> : <em>string</em></p> </li> <li> <p dir="auto">Mikado.<a href="#Mikado.setCss"><strong>setCss</strong>(node, css)</a></p> </li> <li> <p dir="auto">Mikado.<a href="#Mikado.getCss"><strong>getCss</strong>(node)</a> : <em>string</em></p> </li> <li> <p dir="auto">Mikado.<a href="#Mikado.setAttribute"><strong>setAttribute</strong>(node, attribute, value)</a></p> </li> <li> <p dir="auto">Mikado.<a href="#Mikado.setAttribute"><strong>setAttribute</strong>(node, {attribute: value})</a></p> </li> <li> <p dir="auto">Mikado.<a href="#Mikado.getAttribute"><strong>getAttribute</strong>(node, attribute)</a> : <em>string | null</em></p> </li> <li> <p dir="auto">Mikado.<a href="#Mikado.hasAttribute"><strong>hasAttribute</strong>(node, attribute)</a> : <em>boolean</em></p> </li> <li> <p dir="auto">Mikado.<a href="#Mikado.removeAttribute"><strong>removeAttribute</strong>(node, attribute)</a></p> </li> <li> <p dir="auto">Mikado.<a href="#Mikado.removeAttribute"><strong>removeAttribute</strong>(node, [attributes])</a></p> </li> </ul> <p dir="auto">Observable constructor (optional, not included in mikado.light.js):</p> <ul dir="auto"> <li>new <a href="#mikado.array"><strong>Mikado.Array</strong>(<array>)</a> : <em>observable</em></li> </ul> <p dir="auto">Observable array-like methods (optional, not included in mikado.light.js):</p> <ul dir="auto"> <li>observable.<a href="#array.length"><strong>length</strong></a> : <em>number</em></li> <li>observable.<a href="#array.mount"><strong>mount</strong>(view)</a></li> <li>observable.<a href="#array.concat"><strong>concat</strong>([object])</a></li> <li>observable.<a href="#array.push"><strong>push</strong>(object)</a></li> <li>observable.<a href="#array.splice"><strong>splice</strong></a> : <em>[Object]</em></li> <li>observable.<a href="#array.pop"><strong>pop</strong></a> : <em>Object</em></li> <li>observable.<a href="#array.shift"><strong>shift</strong></a> : <em>Object</em></li> <li>observable.<a href="#array.unshift"><strong>unshift</strong>(object)</a></li> <li>observable.<a href="#array.slice"><strong>slice</strong>(<index>, <count>)</a></li> <li>observable.<a href="#array.set"><strong>set</strong>([object])</a></li> <li>observable.<a href="#array.sort"><strong>sort</strong>(fn)</a></li> <li>observable.<a href="#array.reverse"><strong>reverse</strong>()</a></li> <li>observable.<a href="#array.swap"><strong>swap</strong>(idx_a, idx_b)</a></li> <li>observable.<a href="#array.map"><strong>map</strong>(fn)</a></li> <li>observable.<a href="#array.filter"><strong>filter</strong>(fn)</a></li> <li>observable.<a href="#array.indexOf"><strong>indexOf</strong>(object)</a> : <em>number</em></li> <li>observable.<a href="#array.lastIndexOf"><strong>lastIndexOf</strong>(object)</a> : <em>number</em></li> <li>observable.<a href="#array.includes"><strong>includes</strong>(object)</a> : <em>boolean</em></li> <li>observable.<a href="#array.forEach"><strong>forEach</strong>(fn)</a></li> <li>observable.<a href="#array.transaction"><strong>transaction</strong>(fn)</a></li> </ul> <p dir="auto"><a name="user-content-options"></a></p> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Mikado Options</h2><a id="user-content-mikado-options" class="anchor" aria-label="Permalink: Mikado Options" href="#mikado-options"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <blockquote> <p dir="auto">Each Mikado instance, also named includes/partials can have their own options. Except inline partials always inherits the same options from its parent. For this reason you should prefer named includes over inlining in certain situations.</p> </blockquote> <markdown-accessiblity-table><table> <tbody><tr></tr> <tr> <td>Option</td> <td>Description</td> <td>Default</td> </tr> <tr> <td><b>root</b><br><b>mount</b></td> <td>The destination root element on where the template should be rendered.</td> <td>null</td> </tr> <tr></tr> <tr> <td><b>template</b></td> <td>You will need to assign a template to the Mikado instance (or the name of the template when already registered/loaded).</td> <td></td> </tr> <tr></tr> <tr> <td><b>async</b></td> <td>Perform the <code>.render(data)</code> task asynchronously and return a Promise.</td> <td>false</td> </tr> <tr></tr> <tr> <td><b>cache</b></td> <td>Enable/disable <a href="#cache">DOM state caching</a> which can greatly increase performance by a factor up to 25. When enabled make sure to use the <a href="#cache">DOM Cache Helpers</a> when manipulating the DOM directly on properties which are also covered by template expressions.</td> <td>false</td> </tr> <tr></tr> <tr> <td><b>observe</b></td> <td>When using <code>Mikado.Array()</code> for reactive approach you will need to pass this array instance to this property.</td> <td>null</td> </tr> <tr></tr> <tr> <td><b>recycle</b></td> <td>When enabled all dom elements which are already rendered will be re-used (recycled) for the next render task. This performs better, but it may produce issues when manual dom manipulations was made which are not fully covered by the template. Alternatively use the <code>keyed</code> strategy, which limits recycling of components by matching the same data key (e.g. ID).</td> <td>false</td> </tr> <tr></tr> <tr> <td><b>state</b></td> <td>Pass an extern object which should be referenced as the <code>state</code> used within template expressions.</td> <td>{ }</td> </tr> <tr></tr> <tr> <td><b>pool</b></td> <td>Pooling can greatly enhance both the keyed and non-keyed recycle strategy.</td> <td>false</td> </tr> <tr></tr> <tr> <td><b>hydrate</b></td> <td>Progressively enables hydration of already existing DOM structures when mounted. Make sure the existing DOM structure is based on the same template. When something differs from the given template schema, the hydration will stop and silently falls back into the default build strategy.</td> <td>false</td> </tr> </tbody></table></markdown-accessiblity-table> <p dir="auto"><a name="user-content-get-started"></a></p> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Getting Started (Basic Example)</h2><a id="user-content-getting-started-basic-example" class="anchor" aria-label="Permalink: Getting Started (Basic Example)" href="#getting-started-basic-example"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">The Mikado Compiler requires Node.js to be installed. This is probably the simplest step in this guide.</p> <p dir="auto">Install Mikado from NPM (this will also install the compiler):</p> <div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="npm install mikado"><pre lang="npm" class="notranslate"><code>npm install mikado </code></pre></div> <p dir="auto">Assume there is an array of data items to render (or just one item as an object):</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const data = [{ username: "User A", tweets: ["foo", "bar", "foobar"] },{ username: "User B", tweets: ["foo", "bar", "foobar"] },{ username: "User C", tweets: ["foo", "bar", "foobar"] }];"><pre><span class="pl-k">const</span> <span class="pl-s1">data</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span><span class="pl-kos">{</span> <span class="pl-c1">username</span>: <span class="pl-s">"User A"</span><span class="pl-kos">,</span> <span class="pl-c1">tweets</span>: <span class="pl-kos">[</span><span class="pl-s">"foo"</span><span class="pl-kos">,</span> <span class="pl-s">"bar"</span><span class="pl-kos">,</span> <span class="pl-s">"foobar"</span><span class="pl-kos">]</span> <span class="pl-kos">}</span><span class="pl-kos">,</span><span class="pl-kos">{</span> <span class="pl-c1">username</span>: <span class="pl-s">"User B"</span><span class="pl-kos">,</span> <span class="pl-c1">tweets</span>: <span class="pl-kos">[</span><span class="pl-s">"foo"</span><span class="pl-kos">,</span> <span class="pl-s">"bar"</span><span class="pl-kos">,</span> <span class="pl-s">"foobar"</span><span class="pl-kos">]</span> <span class="pl-kos">}</span><span class="pl-kos">,</span><span class="pl-kos">{</span> <span class="pl-c1">username</span>: <span class="pl-s">"User C"</span><span class="pl-kos">,</span> <span class="pl-c1">tweets</span>: <span class="pl-kos">[</span><span class="pl-s">"foo"</span><span class="pl-kos">,</span> <span class="pl-s">"bar"</span><span class="pl-kos">,</span> <span class="pl-s">"foobar"</span><span class="pl-kos">]</span> <span class="pl-kos">}</span><span class="pl-kos">]</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Accordingly, a template <strong><em>tpl/partial/user.html</em></strong> might look like:</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<table> <tr> <td>User:</td> <td>{{ data.username }}</td> </tr> <tr> <td>Tweets:</td> <td>{{ data.tweets.length }}</td> </tr> </table>"><pre><span class="pl-kos"><</span><span class="pl-ent">table</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">tr</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">td</span><span class="pl-kos">></span>User:<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">td</span><span class="pl-kos">></span>{{ data.username }}<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">tr</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">tr</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">td</span><span class="pl-kos">></span>Tweets:<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">td</span><span class="pl-kos">></span>{{ data.tweets.length }}<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">tr</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">table</span><span class="pl-kos">></span></pre></div> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Compile the template:</h3><a id="user-content-compile-the-template" class="anchor" aria-label="Permalink: Compile the template:" href="#compile-the-template"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">In your console type this command line:</p> <div class="highlight highlight-source-batchfile notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="npx mikado-compile ./tpl/"><pre>npx mikado-compile ./tpl/</pre></div> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Load library and initialize template as ES6 modules:</h3><a id="user-content-load-library-and-initialize-template-as-es6-modules" class="anchor" aria-label="Permalink: Load library and initialize template as ES6 modules:" href="#load-library-and-initialize-template-as-es6-modules"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<script type="module"> import Mikado from "mikado.bundle.module.min.js"; import template from "tpl/partial/user.js"; const view = new Mikado(template, {/* options */}); </script>"><pre><span class="pl-kos"><</span><span class="pl-ent">script</span> <span class="pl-c1">type</span>="<span class="pl-s">module</span>"<span class="pl-kos">></span> <span class="pl-k">import</span> <span class="pl-v">Mikado</span> <span class="pl-k">from</span> <span class="pl-s">"mikado.bundle.module.min.js"</span><span class="pl-kos">;</span> <span class="pl-k">import</span> <span class="pl-s1">template</span> <span class="pl-k">from</span> <span class="pl-s">"tpl/partial/user.js"</span><span class="pl-kos">;</span> <span class="pl-k">const</span> <span class="pl-s1">view</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">Mikado</span><span class="pl-kos">(</span><span class="pl-s1">template</span><span class="pl-kos">,</span> <span class="pl-kos">{</span><span class="pl-c">/* options */</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos"></</span><span class="pl-ent">script</span><span class="pl-kos">></span></pre></div> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Load library and initialize template as legacy ES5:</h3><a id="user-content-load-library-and-initialize-template-as-legacy-es5" class="anchor" aria-label="Permalink: Load library and initialize template as legacy ES5:" href="#load-library-and-initialize-template-as-legacy-es5"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<script src="mikado.bundle.min.js"></script> <script src="tpl/partial/user.es5.js"></script> <script> var view = new Mikado("user/list", {/* options */}); </script>"><pre><span class="pl-kos"><</span><span class="pl-ent">script</span> <span class="pl-c1">src</span>="<span class="pl-s">mikado.bundle.min.js</span>"<span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">script</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">script</span> <span class="pl-c1">src</span>="<span class="pl-s">tpl/partial/user.es5.js</span>"<span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">script</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">script</span><span class="pl-kos">></span> <span class="pl-k">var</span> <span class="pl-s1">view</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">Mikado</span><span class="pl-kos">(</span><span class="pl-s">"user/list"</span><span class="pl-kos">,</span> <span class="pl-kos">{</span><span class="pl-c">/* options */</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos"></</span><span class="pl-ent">script</span><span class="pl-kos">></span></pre></div> <blockquote> <p dir="auto">The name of a template inherits from its corresponding filename starting by the folder you've passed through the <code>--src</code> flag when calling the compiler.</p> </blockquote> <p dir="auto">After creation, you need mount the Mikado view instance to an HTML element as a destination for your render tasks:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.mount(HTMLelement); view.render(data);"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">mount</span><span class="pl-kos">(</span><span class="pl-v">HTMLelement</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-s1">data</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">You can also chain methods:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Mikado(template).mount(HTMLelement).render(data);"><pre><span class="pl-v">Mikado</span><span class="pl-kos">(</span><span class="pl-s1">template</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">mount</span><span class="pl-kos">(</span><span class="pl-v">HTMLelement</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-s1">data</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-conventions"></a></p> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Rules and Conventions</h2><a id="user-content-rules-and-conventions" class="anchor" aria-label="Permalink: Rules and Conventions" href="#rules-and-conventions"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">There is just a single convention you always need to keep in mind:</p> <blockquote> <p dir="auto"><strong>Every template has to provide one single root element as the outer boundary.</strong></p> </blockquote> <p dir="auto">Instead of doing this in a template:</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<header> <nav></nav> </header> <section> <p></p> </section> <footer> <nav></nav> </footer>"><pre><span class="pl-kos"><</span><span class="pl-ent">header</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">nav</span><span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">nav</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">header</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">section</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">p</span><span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">p</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">section</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">footer</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">nav</span><span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">nav</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">footer</span><span class="pl-kos">></span></pre></div> <p dir="auto">Wrapping everything into a single outer root element by doing this:</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<main> <header> <nav></nav> </header> <section> <p></p> </section> <footer> <nav></nav> </footer> </main>"><pre><span class="pl-kos"><</span><span class="pl-ent">main</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">header</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">nav</span><span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">nav</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">header</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">section</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">p</span><span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">p</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">section</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">footer</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">nav</span><span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">nav</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">footer</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">main</span><span class="pl-kos">></span></pre></div> <p dir="auto">You can also use a <code><div></code> or any other element as a template root (also custom elements). The root element can also hold two special attributes <code>key</code> and <code>cache</code>. We will come later to it.</p> <p dir="auto"><a name="user-content-advanced_example"></a></p> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Advanced Example</h2><a id="user-content-advanced-example" class="anchor" aria-label="Permalink: Advanced Example" href="#advanced-example"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">A bit more complex template:</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<section id="{{ data.id }}" class="{{ this.state.theme }}" data-index="{{ index }}"> {{@ var is_today = data.date === state.today }} <div class="{{ data.class }} {{ is_today ? 'on' : 'off' }}"> <div class="title" style="font-size: 2em">{{ data.title.toUpperCase() }}</div> <div class="content {{ index % 2 ? 'odd' : 'even' }}">{{# data.content }}</div> <div class="footer">{{ state.parseFooter(data) }}</div> </div> </section>"><pre><span class="pl-kos"><</span><span class="pl-ent">section</span> <span class="pl-c1">id</span>="<span class="pl-s">{{ data.id }}</span>" <span class="pl-c1">class</span>="<span class="pl-s">{{ this.state.theme }}</span>" <span class="pl-c1">data-index</span>="<span class="pl-s">{{ index }}</span>"<span class="pl-kos">></span> {{@ var is_today = data.date === state.today }} <span class="pl-kos"><</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">{{ data.class }} {{ is_today ? 'on' : 'off' }}</span>"<span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">title</span>" <span class="pl-c1">style</span>="<span class="pl-s">font-size: 2em</span>"<span class="pl-kos">></span>{{ data.title.toUpperCase() }}<span class="pl-kos"></</span><span class="pl-ent">div</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">content {{ index % 2 ? 'odd' : 'even' }}</span>"<span class="pl-kos">></span>{{# data.content }}<span class="pl-kos"></</span><span class="pl-ent">div</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">footer</span>"<span class="pl-kos">></span>{{ state.parseFooter(data) }}<span class="pl-kos"></</span><span class="pl-ent">div</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">div</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">section</span><span class="pl-kos">></span></pre></div> <p dir="auto">You can use any Javascript within the {{ ... }} curly bracket notation. The scope is limited by the template, so variables from one template can't be accessed within another template (use <code>state</code> for this purpose).</p> <blockquote> <p dir="auto">To pass HTML markup as a string, the curly brackets needs to be followed by <strong>#</strong> e.g. <code>{{# ... }}</code>. For better performance, relevant tasks avoid passing HTML contents as a string.</p> </blockquote> <blockquote> <p dir="auto">To use Javascript outside an element's context you need to prevent concatenation of the returned value. For this purpose, the curly brackets need to be followed by <strong>@</strong> e.g. <code>{{@ ... }}</code>.</p> </blockquote> <p dir="auto"><a name="user-content-identifier"></a></p> <p dir="auto">Within a template there are several <strong>reserved keywords</strong> you can use as an identifier:</p> <markdown-accessiblity-table><table> <tbody><tr></tr> <tr> <td>Identifier</td> <td>Description</td> </tr> <tr> <td><b>data</b></td> <td>A full reference to the passed data item. Within loops the keyword data points to each of the looped data items.</td> </tr> <tr></tr> <tr> <td><b>state</b></td> <td>An optional payload used to manually pass in custom specific values or helper functions. The state will be delegated through all nested templates.</td> </tr> <tr></tr> <tr> <td><b>index</b></td> <td>Represents the index of the currently rendered data item (starting by 0 for the first item).</td> </tr> <tr></tr> <tr> <td><b>this</b></td> <td>Provides you access to the Mikado view instance (e.g. this.state).</td> </tr> <tr></tr> <tr> <td><b>window</b></td> <td>Gives access to the global namespace.</td> </tr> <tr> <td>_p<br>_v<br>_x<br>_o<br>_f<br>_inc</td> <td>private identifiers, used by internal processing</td> </tr> </tbody></table></markdown-accessiblity-table> <p dir="auto">You cannot change the names of those preserved keywords, also make sure you didn't override them.</p> <p dir="auto">It is recommended to pass custom functions via the <em>state</em> object (see example above <code>state.parseFooter = function(str){ return str; }</code>). Alternatively you can also nest more complex computations inline as an IIFE and return the result.</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<div class="date">{{ (function(){ var date = new Date(); // perform some code ... return date.toLocaleString(); }()) }}</div>"><pre><span class="pl-kos"><</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">date</span>"<span class="pl-kos">></span>{{ (function(){ var date = new Date(); // perform some code ... return date.toLocaleString(); }()) }}<span class="pl-kos"></</span><span class="pl-ent">div</span><span class="pl-kos">></span></pre></div> <p dir="auto">To finish the example from above you need one single data object or an array of <strong><em>data</em></strong> items:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var data = [{ "id": "230BA161-675A-2288-3B15-C343DB3A1DFC", "date": "2019-01-11", "class": "yellow, green", "title": "Sed congue, egestas lacinia.", "content": "<p>Vivamus non lorem <b>vitae</b> odio sagittis amet ante.</p>", "footer": "Pellentesque tincidunt tempus vehicula." }];"><pre><span class="pl-k">var</span> <span class="pl-s1">data</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span><span class="pl-kos">{</span> <span class="pl-s">"id"</span>: <span class="pl-s">"230BA161-675A-2288-3B15-C343DB3A1DFC"</span><span class="pl-kos">,</span> <span class="pl-s">"date"</span>: <span class="pl-s">"2019-01-11"</span><span class="pl-kos">,</span> <span class="pl-s">"class"</span>: <span class="pl-s">"yellow, green"</span><span class="pl-kos">,</span> <span class="pl-s">"title"</span>: <span class="pl-s">"Sed congue, egestas lacinia."</span><span class="pl-kos">,</span> <span class="pl-s">"content"</span>: <span class="pl-s">"<p>Vivamus non lorem <b>vitae</b> odio sagittis amet ante.</p>"</span><span class="pl-kos">,</span> <span class="pl-s">"footer"</span>: <span class="pl-s">"Pellentesque tincidunt tempus vehicula."</span> <span class="pl-kos">}</span><span class="pl-kos">]</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Provide the optional <strong><em>state</em></strong> payload which includes specific values and helper methods used within template expressions:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const state = { today: "2019-01-11", theme: "custom", parseFooter: function(data) { return data.footer; } };"><pre><span class="pl-k">const</span> <span class="pl-s1">state</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span> <span class="pl-c1">today</span>: <span class="pl-s">"2019-01-11"</span><span class="pl-kos">,</span> <span class="pl-c1">theme</span>: <span class="pl-s">"custom"</span><span class="pl-kos">,</span> <span class="pl-en">parseFooter</span>: <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">data</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">return</span> <span class="pl-s1">data</span><span class="pl-kos">.</span><span class="pl-c1">footer</span><span class="pl-kos">;</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Mount the view to a target element as a destination for all the render tasks:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.mount(HTMLelement);"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">mount</span><span class="pl-kos">(</span><span class="pl-v">HTMLelement</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Render a mounted template:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.render(data, state);"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-s1">data</span><span class="pl-kos">,</span> <span class="pl-s1">state</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Render asynchronously automatically by just providing a callback function:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.render(data, state, function() { console.log("finished."); });"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-s1">data</span><span class="pl-kos">,</span> <span class="pl-s1">state</span><span class="pl-kos">,</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">"finished."</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">To render asynchronously by using promises you need to set the callback value to <code>true</code>:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// callback "true" will use Promises view.render(data, state, true).then(function() { console.log("finished."); }); // same, but uses async/await: await view.render(data, state, true); console.log("finished.");"><pre><span class="pl-c">// callback "true" will use Promises</span> <span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-s1">data</span><span class="pl-kos">,</span> <span class="pl-s1">state</span><span class="pl-kos">,</span> <span class="pl-c1">true</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">then</span><span class="pl-kos">(</span><span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">"finished."</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// same, but uses async/await:</span> <span class="pl-k">await</span> <span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-s1">data</span><span class="pl-kos">,</span> <span class="pl-s1">state</span><span class="pl-kos">,</span> <span class="pl-c1">true</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">"finished."</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">When async should be the default strategy for all render tasks then you can also set the <strong><em>async</em></strong> option flag:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const view = new Mikado(template, { async: true }); await view.render(data, state); console.log("finished.");"><pre><span class="pl-k">const</span> <span class="pl-s1">view</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">Mikado</span><span class="pl-kos">(</span><span class="pl-s1">template</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">async</span>: <span class="pl-c1">true</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-k">await</span> <span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-s1">data</span><span class="pl-kos">,</span> <span class="pl-s1">state</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">"finished."</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-compiler"></a></p> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Compile Templates</h2><a id="user-content-compile-templates" class="anchor" aria-label="Permalink: Compile Templates" href="#compile-templates"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto"><a name="user-content-compiler"></a></p> <p dir="auto">Define an HTML-like template and use double curly brackets to markup dynamic expressions which should be calculated and replaced during runtime:</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<table> <tr> <td>User:</td> <td>{{ data.username }}</td> </tr> <tr> <td>Tweets:</td> <td>{{ data.tweets.length }}</td> </tr> </table>"><pre><span class="pl-kos"><</span><span class="pl-ent">table</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">tr</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">td</span><span class="pl-kos">></span>User:<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">td</span><span class="pl-kos">></span>{{ data.username }}<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">tr</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">tr</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">td</span><span class="pl-kos">></span>Tweets:<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">td</span><span class="pl-kos">></span>{{ data.tweets.length }}<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">tr</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">table</span><span class="pl-kos">></span></pre></div> <p dir="auto">Save this template e.g. to <em>tpl/partial/user.html</em></p> <blockquote> <p dir="auto">The preserved keyword <strong><em>data</em></strong> is a reference to the passed data item. You can access the whole nested object.</p> </blockquote> <p dir="auto">Mikado comes with a builtin template compiler you can simply access by typing <code>npx mikado-compile</code> into your console. The compiler uses a very simple command-line interface (CLI) running on Node.js to perform compilation tasks. The template compiles into a native javascript file which needs to be passed during creation of a Mikado instance. The same markup is also used for the server-side rendering part, so you can share the same template sources for client and server rendering.</p> <p dir="auto">Show help to list all available commands:</p> <div class="highlight highlight-source-batchfile notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="npx mikado-compile --help"><pre>npx mikado-compile --help</pre></div> <p dir="auto">Compile the template through the command line by:</p> <div class="highlight highlight-source-batchfile notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="npx mikado-compile tpl/partial/user.html"><pre>npx mikado-compile tpl/partial/user.html</pre></div> <p dir="auto"><strong>Basic Notation:</strong></p> <blockquote> <p dir="auto">npx mikado-compile <em>source <destination></em></p> </blockquote> <p dir="auto">When no destination folder was set, the compiled files will be saved to the source folder. After compilation, you will have 3 different files:</p> <ol dir="auto"> <li><strong>list.js</strong> the template compiled as a ES6 module (which needs to be imported)</li> <li><strong>list.es5.js</strong> the template compiled as ES5 compatible Javascript (which automatically register when loaded by script tag)</li> <li><strong>list.html</strong> the source template you have implemented (do not delete it)</li> </ol> <p dir="auto"><strong>Extended Notation:</strong></p> <blockquote> <p dir="auto">npx mikado-compile --src <em>{ source }</em> --dest <em>{ destination }</em> --extension html --type module --compact</p> </blockquote> <p dir="auto"><a name="user-content-compiler-flags"></a> Compiler Flags:</p> <ul dir="auto"> <li><code>--type module</code>, <code>-t module</code> export as javascript modules (recommended)</li> <li><code>--type es5</code>, <code>-t es5</code> export as ES5-compatible package</li> <li><code>--extension html</code>, <code>--ext html</code>, <code>-e html</code> the file extension which should be compiled</li> <li><code>--inline</code>, <code>-i</code> or <code>--compact</code>, <code>-c</code> switch the build strategy to optimize either the performance (inline) or size (compact)</li> <li><code>--force</code>, <code>-f</code> force overwriting existing files</li> <li><code>--pretty</code>, <code>-p</code> do not minify the compiled result</li> <li><code>--watch</code>, <code>-w</code> start the watcher for automatically compile when files has changed (just for development purposes)</li> </ul> <p dir="auto">Supported flags as attributes on the template root:</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<!-- switch the build strategy to prebuilt enabled cache --> <table cache="true"></table>"><pre><span class="pl-c"><!-- switch the build strategy to prebuilt enabled cache --></span> <span class="pl-kos"><</span><span class="pl-ent">table</span> <span class="pl-c1">cache</span>="<span class="pl-s">true</span>"<span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">table</span><span class="pl-kos">></span></pre></div> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<!-- switch the build strategy to prebuilt disabled cache --> <table cache="false"></table>"><pre><span class="pl-c"><!-- switch the build strategy to prebuilt disabled cache --></span> <span class="pl-kos"><</span><span class="pl-ent">table</span> <span class="pl-c1">cache</span>="<span class="pl-s">false</span>"<span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">table</span><span class="pl-kos">></span></pre></div> <p dir="auto">Using the flag attributes are the most performant variants but also cost you some flexibility, because the cache strategy couldn't be changed in runtime, it needs to change in markup before compilation.</p> <p dir="auto"><a name="user-content-auto-naming"></a></p> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Auto Naming</h3><a id="user-content-auto-naming" class="anchor" aria-label="Permalink: Auto Naming" href="#auto-naming"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">There is a new naming system which will apply by default. The name of your html files will be used as unique identifiers of your templates. Because several folders can include same filenames, the template name inherits from the full path you pass in as <code>--src</code>.</p> <p dir="auto">Assuming the following file structure:</p> <div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="tpl/view/start.html tpl/view/user.html tpl/view/cart.html tpl/partial/start.html tpl/partial/user.html tpl/partial/cart.html"><pre class="notranslate"><code>tpl/view/start.html tpl/view/user.html tpl/view/cart.html tpl/partial/start.html tpl/partial/user.html tpl/partial/cart.html </code></pre></div> <p dir="auto">The command should define the path <code>/tpl/</code> as the source root because it is the most inner folder which covers all files:</p> <div class="highlight highlight-source-batchfile notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="npx mikado-compile ./tpl/"><pre>npx mikado-compile ./tpl/</pre></div> <p dir="auto">The template names then becomes <code>view/start</code>, <code>view/user</code>, <code>view/cart</code> and <code>partial/start</code>, <code>partial/user</code>, <code>partial/cart</code> for the partials. So when including just use this name in your expression <code><table include="partial/user"></code></p> <p dir="auto">The wrong way is to compile the folder /view/ and /partial/ separately, because their template names will be same.</p> <div class="highlight highlight-source-batchfile notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="npx mikado-compile ./tpl/view/ npx mikado-compile ./tpl/partial/"><pre>npx mikado-compile ./tpl/view/ npx mikado-compile ./tpl/partial/</pre></div> <p dir="auto">This might also work, but it is better not to do.</p> <p dir="auto"><a name="user-content-prebuilt-cache"></a></p> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Prebuilt Cache Strategy</h3><a id="user-content-prebuilt-cache-strategy" class="anchor" aria-label="Permalink: Prebuilt Cache Strategy" href="#prebuilt-cache-strategy"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">The option <code>{ cache: true/false }</code> when creating a Mikado instance could be better declared withing templates on their root element, let the compiler produce more optimized code for this strategy.</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<table cache="true"> <!-- ... --> </table>"><pre><span class="pl-kos"><</span><span class="pl-ent">table</span> <span class="pl-c1">cache</span>="<span class="pl-s">true</span>"<span class="pl-kos">></span> <span class="pl-c"><!-- ... --></span> <span class="pl-kos"></</span><span class="pl-ent">table</span><span class="pl-kos">></span></pre></div> <p dir="auto">Also use this approach when set <code>cache="false"</code>:</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<table cache="false"> <!-- ... --> </table>"><pre><span class="pl-kos"><</span><span class="pl-ent">table</span> <span class="pl-c1">cache</span>="<span class="pl-s">false</span>"<span class="pl-kos">></span> <span class="pl-c"><!-- ... --></span> <span class="pl-kos"></</span><span class="pl-ent">table</span><span class="pl-kos">></span></pre></div> <p dir="auto"><a name="user-content-watcher"></a></p> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Watcher (Auto-Compile)</h3><a id="user-content-watcher-auto-compile" class="anchor" aria-label="Permalink: Watcher (Auto-Compile)" href="#watcher-auto-compile"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">A perfect fit for your local development environment is spawning a watcher to automatically compile files when they get changed. Just use the same command line you would also use for a full compilation and append the flag <code>--watch</code> or <code>-w</code> to it:</p> <div class="highlight highlight-source-batchfile notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="npx mikado-compile ./tpl/ --watch"><pre>npx mikado-compile ./tpl/ --watch</pre></div> <p dir="auto">Don't close the console, otherwise the watcher will stop. You can stop the watcher explicitly by pressing <code>CTRL + C</code>.</p> <p dir="auto"><a name="user-content-expressions"></a></p> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Template Expressions</h2><a id="user-content-template-expressions" class="anchor" aria-label="Permalink: Template Expressions" href="#template-expressions"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <blockquote> <p dir="auto">The template notation expects double curly brackets <code>{{ ... }}</code> for any kind of dynamic expressions.</p> </blockquote> <blockquote> <p dir="auto">Except when using {{@ ... }} for inline code notation, the returned value of every dynamic expression will be replaced to its position.</p> </blockquote> <p dir="auto"><a name="user-content-insertion"></a></p> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Value Insertion <code>{{ ... }}</code></h3><a id="user-content-value-insertion---" class="anchor" aria-label="Permalink: Value Insertion {{ ... }}" href="#value-insertion---"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<div>{{ data.value }}</div>"><pre><span class="pl-kos"><</span><span class="pl-ent">div</span><span class="pl-kos">></span>{{ data.value }}<span class="pl-kos"></</span><span class="pl-ent">div</span><span class="pl-kos">></span></pre></div> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.render({ value: "test" });"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">value</span>: <span class="pl-s">"test"</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">You can also combine multiple expressions with non-expression contents:</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<div>The title "{{ data.title }}" has the value: {{ data.value }}</div>"><pre><span class="pl-kos"><</span><span class="pl-ent">div</span><span class="pl-kos">></span>The title "{{ data.title }}" has the value: {{ data.value }}<span class="pl-kos"></</span><span class="pl-ent">div</span><span class="pl-kos">></span></pre></div> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.render({ title: "title", value: "test" });"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">title</span>: <span class="pl-s">"title"</span><span class="pl-kos">,</span> <span class="pl-c1">value</span>: <span class="pl-s">"test"</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">You can also mix text nodes with elements on the same root element:</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<div>Title: <b>{{ data.title }}</b><br>Value: {{ data.value }}</div>"><pre><span class="pl-kos"><</span><span class="pl-ent">div</span><span class="pl-kos">></span>Title: <span class="pl-kos"><</span><span class="pl-ent">b</span><span class="pl-kos">></span>{{ data.title }}<span class="pl-kos"></</span><span class="pl-ent">b</span><span class="pl-kos">></span><span class="pl-kos"><</span><span class="pl-ent">br</span><span class="pl-kos">></span>Value: {{ data.value }}<span class="pl-kos"></</span><span class="pl-ent">div</span><span class="pl-kos">></span></pre></div> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.render({ title: "title", value: "test" });"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">title</span>: <span class="pl-s">"title"</span><span class="pl-kos">,</span> <span class="pl-c1">value</span>: <span class="pl-s">"test"</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Also, you can use expressions within every attribute:</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<div data-id="{{ data.title }}" class="{{ data.class }}">{{ data.value }}</div>"><pre><span class="pl-kos"><</span><span class="pl-ent">div</span> <span class="pl-c1">data-id</span>="<span class="pl-s">{{ data.title }}</span>" <span class="pl-c1">class</span>="<span class="pl-s">{{ data.class }}</span>"<span class="pl-kos">></span>{{ data.value }}<span class="pl-kos"></</span><span class="pl-ent">div</span><span class="pl-kos">></span></pre></div> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.render({ id: 1, value: "test", class: "test" });"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">id</span>: <span class="pl-c1">1</span><span class="pl-kos">,</span> <span class="pl-c1">value</span>: <span class="pl-s">"test"</span><span class="pl-kos">,</span> <span class="pl-c1">class</span>: <span class="pl-s">"test"</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Every Javascript syntax is allowed withing expression:</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<div style="color: {{ data.active ? 'green' : 'black' }}; {{ data.value ? '' : 'display: none;' }}"></div>"><pre><span class="pl-kos"><</span><span class="pl-ent">div</span> <span class="pl-c1">style</span>="<span class="pl-s">color: {{ data.active ? 'green' : 'black' }}; {{ data.value ? '' : 'display: none;' }}</span>"<span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">div</span><span class="pl-kos">></span></pre></div> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.render({ active: true, value: "not empty" });"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">active</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span> <span class="pl-c1">value</span>: <span class="pl-s">"not empty"</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Since expressions just need to return a value you can also use IIFE:</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<div>{{ (function(){ var date = new Date(); // perform some code ... return date.toLocaleString(); }()) }}</div>"><pre><span class="pl-kos"><</span><span class="pl-ent">div</span><span class="pl-kos">></span>{{ (function(){ var date = new Date(); // perform some code ... return date.toLocaleString(); }()) }}<span class="pl-kos"></</span><span class="pl-ent">div</span><span class="pl-kos">></span></pre></div> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.render();"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-inline-js"></a></p> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">JS Inline Code <code>{{@ ... }}</code></h3><a id="user-content-js-inline-code---" class="anchor" aria-label="Permalink: JS Inline Code {{@ ... }}" href="#js-inline-code---"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">The inline code expression is the only one which doesn't return a value to be rendered in place, it just executes.</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<div> {{@ const value = data.title.toUpperCase(); }} <h1>{{ value }}</h1> </div>"><pre><span class="pl-kos"><</span><span class="pl-ent">div</span><span class="pl-kos">></span> {{@ const value = data.title.toUpperCase(); }} <span class="pl-kos"><</span><span class="pl-ent">h1</span><span class="pl-kos">></span>{{ value }}<span class="pl-kos"></</span><span class="pl-ent">h1</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">div</span><span class="pl-kos">></span></pre></div> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.render({ title: "title" });"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">title</span>: <span class="pl-s">"title"</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">The scope is limited to the template scope, but you can assign to <code>state</code> alternatively to share values across nested instances:</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<div> {{@ state.value = data.title.toUpperCase(); }} <div include="header"> <!-- contents of header.html: <h1>{{ state.value }}</h1> --> </div> </div>"><pre><span class="pl-kos"><</span><span class="pl-ent">div</span><span class="pl-kos">></span> {{@ state.value = data.title.toUpperCase(); }} <span class="pl-kos"><</span><span class="pl-ent">div</span> <span class="pl-c1">include</span>="<span class="pl-s">header</span>"<span class="pl-kos">></span> <span class="pl-c"><!-- contents of header.html:</span> <span class="pl-c"> <h1>{{ state.value }}</h1></span> <span class="pl-c"> --></span> <span class="pl-kos"></</span><span class="pl-ent">div</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">div</span><span class="pl-kos">></span></pre></div> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.render({ title: "title" });"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">title</span>: <span class="pl-s">"title"</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-truthy"></a></p> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Truthy Values <code>{{? ... }}</code></h3><a id="user-content-truthy-values---" class="anchor" aria-label="Permalink: Truthy Values {{? ... }}" href="#truthy-values---"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">This will just output the result when it is not <code>null</code>, <code>undefined</code>, <code>NaN</code> or <code>false</code>.</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<div>{{? data.value }}</div>"><pre><span class="pl-kos"><</span><span class="pl-ent">div</span><span class="pl-kos">></span>{{? data.value }}<span class="pl-kos"></</span><span class="pl-ent">div</span><span class="pl-kos">></span></pre></div> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.render([{ value: null },{ value: NaN },{ value: undefined },{ value: false }]);"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">[</span><span class="pl-kos">{</span> <span class="pl-c1">value</span>: <span class="pl-c1">null</span> <span class="pl-kos">}</span><span class="pl-kos">,</span><span class="pl-kos">{</span> <span class="pl-c1">value</span>: <span class="pl-v">NaN</span> <span class="pl-kos">}</span><span class="pl-kos">,</span><span class="pl-kos">{</span> <span class="pl-c1">value</span>: <span class="pl-c1">undefined</span> <span class="pl-kos">}</span><span class="pl-kos">,</span><span class="pl-kos">{</span> <span class="pl-c1">value</span>: <span class="pl-c1">false</span> <span class="pl-kos">}</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-escape-ssr"></a></p> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Escape Values <code>{{! ... }}</code> (SSR only)</h3><a id="user-content-escape-values----ssr-only" class="anchor" aria-label="Permalink: Escape Values {{! ... }} (SSR only)" href="#escape-values----ssr-only"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">This will escape the value before return. This is just important for the server-side-rendering part, the client automatically escape contents by default (except when using the HTML-expression).</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<div>{{! data.value }}</div>"><pre><span class="pl-kos"><</span><span class="pl-ent">div</span><span class="pl-kos">></span>{{! data.value }}<span class="pl-kos"></</span><span class="pl-ent">div</span><span class="pl-kos">></span></pre></div> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.render({ value: "<b>html is not allowed</b>" });"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">value</span>: <span class="pl-s">"<b>html is not allowed</b>"</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-html"></a></p> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">HTML Contents <code>{{# ... }}</code></h3><a id="user-content-html-contents---" class="anchor" aria-label="Permalink: HTML Contents {{# ... }}" href="#html-contents---"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">This will allow for inserting HTML returned string.</p> <blockquote> <p dir="auto">Be aware of this can potentially lead into security issues like XSS. Use carefully!</p> </blockquote> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<div>{{# data.value }}</div>"><pre><span class="pl-kos"><</span><span class="pl-ent">div</span><span class="pl-kos">></span>{{# data.value }}<span class="pl-kos"></</span><span class="pl-ent">div</span><span class="pl-kos">></span></pre></div> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.render({ value: "<b>html is allowed</b>" });"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">value</span>: <span class="pl-s">"<b>html is allowed</b>"</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-mikado.escape"></a><a name="user-content-mikado.sanitize"></a></p> <div class="markdown-heading" dir="auto"><h4 tabindex="-1" class="heading-element" dir="auto">Sanitizer</h4><a id="user-content-sanitizer" class="anchor" aria-label="Permalink: Sanitizer" href="#sanitizer"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Mikado provides you high performant helper function you can use in this context to escape contents or to sanitize.</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.render({ value: "<b>html allowed</b><br>" + Mikado.escape("<b>not allowed</b>") });"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">value</span>: <span class="pl-s">"<b>html allowed</b><br>"</span> <span class="pl-c1">+</span> <span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">escape</span><span class="pl-kos">(</span><span class="pl-s">"<b>not allowed</b>"</span><span class="pl-kos">)</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.render({ value: "<b>html allowed</b><br>" + Mikado.sanitize("<b>not allowed</b>") });"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">value</span>: <span class="pl-s">"<b>html allowed</b><br>"</span> <span class="pl-c1">+</span> <span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">sanitize</span><span class="pl-kos">(</span><span class="pl-s">"<b>not allowed</b>"</span><span class="pl-kos">)</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Using the sanitizer will remove the tags completely, whereas when escaping the content aren't removed but just escaped.</p> <p dir="auto"><a name="user-content-bindings"></a></p> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Reactive Bindings <code>{{= ... }}</code></h3><a id="user-content-reactive-bindings---" class="anchor" aria-label="Permalink: Reactive Bindings {{= ... }}" href="#reactive-bindings---"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Define properties by using pure data object notation without any javascript inside:</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<div class="{{= data.class }}">{{= data.value }}</div>"><pre><span class="pl-kos"><</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">{{= data.class }}</span>"<span class="pl-kos">></span>{{= data.value }}<span class="pl-kos"></</span><span class="pl-ent">div</span><span class="pl-kos">></span></pre></div> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// store must be an array of elements: const store = [{ class: "active", value: "foo" }]; // it needs a initial render if store isn't empty: view.render(store); // the store array now was proxified!"><pre><span class="pl-c">// store must be an array of elements:</span> <span class="pl-k">const</span> <span class="pl-s1">store</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span><span class="pl-kos">{</span> <span class="pl-c1">class</span>: <span class="pl-s">"active"</span><span class="pl-kos">,</span> <span class="pl-c1">value</span>: <span class="pl-s">"foo"</span> <span class="pl-kos">}</span><span class="pl-kos">]</span><span class="pl-kos">;</span> <span class="pl-c">// it needs a initial render if store isn't empty:</span> <span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-s1">store</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// the store array now was proxified!</span></pre></div> <p dir="auto">Now you can change the properties of <code>store</code> and the corresponding DOM elements will change automatically:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="store[0].class = "inactive"; store[0].value = "bar";"><pre><span class="pl-s1">store</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-c1">class</span> <span class="pl-c1">=</span> <span class="pl-s">"inactive"</span><span class="pl-kos">;</span> <span class="pl-s1">store</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-c1">value</span> <span class="pl-c1">=</span> <span class="pl-s">"bar"</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-runtime-compiler"></a></p> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Runtime Compiler</h2><a id="user-content-runtime-compiler" class="anchor" aria-label="Permalink: Runtime Compiler" href="#runtime-compiler"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Alternatively of using the <code>npx mikado-compile</code> you can also compile templates during runtime.</p> <blockquote> <p dir="auto">If a page has set a <code>Content-Security-Policy</code> (CSP) header field, using the runtime compiler has disadvantage when not configure <code>script-src 'unsafe-eval'</code>. It is recommended to use the Mikado native compiler, which is CSP-friendly and also can optimize your templates more powerful.</p> </blockquote> <p dir="auto">The runtime compiler uses the performance optimized <code>inline</code> strategy for every task, you can't switch it. The compiler property flag <code>cache="true"</code> or <code>cache="false"</code> on a template root is not supported, therefore you can't use 2 of the most performant strategies. But they are just slightly faster, so this shouldn't be an issue.</p> <p dir="auto">Those features aren't supported by the runtime compiler:</p> <ul dir="auto"> <li><code>cache="true"</code> or <code>cache="false"</code> on a template root</li> <li>using any other compiler strategy than <code>inline</code></li> <li>detect and replace repeating inline includes</li> <li>detect and solve/unroll non-dynamic expressions, e.g. <code><h1>{{ "foor" + "bar " }}</h1></code> will transform to a static content <code><h1>foobar</h1></code> and removes the expression completely</li> <li>runtime-ready templates aren't available on page load (they need to compile)</li> <li>the runtime compiler does not pass the <a href="https://github.com/nextapps-de/mikado/blob/master/test/tpl/crazy.html">"crazy template"</a> test</li> </ul> <div class="markdown-heading" dir="auto"><h4 tabindex="-1" class="heading-element" dir="auto">Examples</h4><a id="user-content-examples" class="anchor" aria-label="Permalink: Examples" href="#examples"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Define some HTML template structure:</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<template id="user-list"> <!-- just a single outer root element allowed: --> <table> <tr> <td>User:</td> <td>{{ data.user }}</td> </tr> <tr> <td>Tweets:</td> <td>{{ data.tweets.length }}</td> </tr> </table> </template>"><pre><span class="pl-kos"><</span><span class="pl-ent">template</span> <span class="pl-c1">id</span>="<span class="pl-s">user-list</span>"<span class="pl-kos">></span> <span class="pl-c"><!-- just a single outer root element allowed: --></span> <span class="pl-kos"><</span><span class="pl-ent">table</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">tr</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">td</span><span class="pl-kos">></span>User:<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">td</span><span class="pl-kos">></span>{{ data.user }}<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">tr</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">tr</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">td</span><span class="pl-kos">></span>Tweets:<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">td</span><span class="pl-kos">></span>{{ data.tweets.length }}<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">tr</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">table</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">template</span><span class="pl-kos">></span></pre></div> <blockquote> <p dir="auto">Template definitions used by the runtime compiler needs manual naming when used as named includes.</p> </blockquote> <p dir="auto">The template name will derive from <code><template id="user-list"></code> or <code><template name="user-list"></code> and becomes <code>user-list</code>. When using named includes you will need to use this name for referencing, e.g. <code><div include="user-list">"</code>.</p> <p dir="auto">Compile the template and use it for creating a Mikado view instance:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const template = document.getElementById("user-list"); const tpl = Mikado.compile(template); const view = new Mikado(tpl, { /* options */ }); view.render(data);"><pre><span class="pl-k">const</span> <span class="pl-s1">template</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">getElementById</span><span class="pl-kos">(</span><span class="pl-s">"user-list"</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-k">const</span> <span class="pl-s1">tpl</span> <span class="pl-c1">=</span> <span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">compile</span><span class="pl-kos">(</span><span class="pl-s1">template</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-k">const</span> <span class="pl-s1">view</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">Mikado</span><span class="pl-kos">(</span><span class="pl-s1">tpl</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c">/* options */</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-s1">data</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">When the template was get through element ID you can use a shortcut:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const tpl = Mikado.compile("user-list");"><pre><span class="pl-k">const</span> <span class="pl-s1">tpl</span> <span class="pl-c1">=</span> <span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">compile</span><span class="pl-kos">(</span><span class="pl-s">"user-list"</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Also, you can compile the template and use it for registration as a named include referenced by another template e.g. <code><div include="user-list">"</code>:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Mikado.register(Mikado.compile("user-list"));"><pre><span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">register</span><span class="pl-kos">(</span><span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">compile</span><span class="pl-kos">(</span><span class="pl-s">"user-list"</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">You can use non-template elements for defining templates also:</p> <div class="highlight highlight-source-css notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="#user-list{ display: none }"><pre><span class="pl-kos">#</span><span class="pl-c1">user-list</span>{ <span class="pl-c1">display</span><span class="pl-kos">:</span> none }</pre></div> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<!-- just a single outer root element allowed: --> <table id="user-list"> <tr> <td>User:</td> <td>{{ data.user }}</td> </tr> <tr> <td>Tweets:</td> <td>{{ data.tweets.length }}</td> </tr> </table>"><pre><span class="pl-c"><!-- just a single outer root element allowed: --></span> <span class="pl-kos"><</span><span class="pl-ent">table</span> <span class="pl-c1">id</span>="<span class="pl-s">user-list</span>"<span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">tr</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">td</span><span class="pl-kos">></span>User:<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">td</span><span class="pl-kos">></span>{{ data.user }}<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">tr</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">tr</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">td</span><span class="pl-kos">></span>Tweets:<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">td</span><span class="pl-kos">></span>{{ data.tweets.length }}<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">tr</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">table</span><span class="pl-kos">></span></pre></div> <p dir="auto">Last but not least you can pass the template markup as a string:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const tpl_str = ` <table name="user-list"> <tr> <td>User:</td> <td>{{ data.user }}</td> </tr> <tr> <td>Tweets:</td> <td>{{ data.tweets.length }}</td> </tr> </table>`; const tpl = Mikado.compile(tpl_str); const view = new Mikado(tpl, { /* options */ }); view.render(data);"><pre><span class="pl-k">const</span> <span class="pl-s1">tpl_str</span> <span class="pl-c1">=</span> <span class="pl-s">`</span> <span class="pl-s"><table name="user-list"></span> <span class="pl-s"> <tr></span> <span class="pl-s"> <td>User:</td></span> <span class="pl-s"> <td>{{ data.user }}</td></span> <span class="pl-s"> </tr></span> <span class="pl-s"> <tr></span> <span class="pl-s"> <td>Tweets:</td></span> <span class="pl-s"> <td>{{ data.tweets.length }}</td></span> <span class="pl-s"> </tr></span> <span class="pl-s"></table>`</span><span class="pl-kos">;</span> <span class="pl-k">const</span> <span class="pl-s1">tpl</span> <span class="pl-c1">=</span> <span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">compile</span><span class="pl-kos">(</span><span class="pl-s1">tpl_str</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-k">const</span> <span class="pl-s1">view</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">Mikado</span><span class="pl-kos">(</span><span class="pl-s1">tpl</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c">/* options */</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-s1">data</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Using Inline Code</h3><a id="user-content-using-inline-code" class="anchor" aria-label="Permalink: Using Inline Code" href="#using-inline-code"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">The runtime compiler does not support all places of inserting inline code expressions. In some situations it might produce issues like here:</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<table id="user-list"> <tbody foreach="data.entries"> {{@ /* the browser will move this before <table>! */ const value = "test"; }} <tr> <td>Value: {{ value }}</td> </tr> </tbody> </table>"><pre><span class="pl-kos"><</span><span class="pl-ent">table</span> <span class="pl-c1">id</span>="<span class="pl-s">user-list</span>"<span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">tbody</span> <span class="pl-c1">foreach</span>="<span class="pl-s">data.entries</span>"<span class="pl-kos">></span> {{@ /* the browser will move this before <span class="pl-kos"><</span><span class="pl-ent">table</span><span class="pl-kos">></span>! */ const value = "test"; }} <span class="pl-kos"><</span><span class="pl-ent">tr</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">td</span><span class="pl-kos">></span>Value: {{ value }}<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">tr</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">tbody</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">table</span><span class="pl-kos">></span></pre></div> <p dir="auto">The runtime compiler didn't parse the template by string, instead the compiler creates a dom structure when passing a template as string. On the example above the <code>{{@ ... }}</code> expression is treated as a text node by the browser. Since the position isn't allowed to place text nodes (after <code><table></code>, <code><tbody></code>, <code><tr></code>) the browser moves this text node up to the outer scope of the table. But the inline code is now executed within the first outer template function, instead the inline loop template function needs the value and is running in its own scope.</p> <p dir="auto">In this situation you can store values on <code>state</code> to pass through inline looped partials. Or you can use the <code><script></code> tag in combination with the js-expression. The latter will keep the hierarchy, because those tags won't move outside by the browser:</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<table id="user-list"> <tbody foreach="data.entries"> <script>{{@ const value = "test"; }}</script> <tr> <td>Value: {{ value }}</td> </tr> </tbody> </table>"><pre><span class="pl-kos"><</span><span class="pl-ent">table</span> <span class="pl-c1">id</span>="<span class="pl-s">user-list</span>"<span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">tbody</span> <span class="pl-c1">foreach</span>="<span class="pl-s">data.entries</span>"<span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">script</span><span class="pl-kos">></span><span class="pl-kos">{</span><span class="pl-kos">{</span>@ <span class="pl-s1">const</span> <span class="pl-c1">value</span> <span class="pl-c1">=</span> <span class="pl-s">"test"</span><span class="pl-kos">;</span> <span class="pl-kos">}</span><span class="pl-kos">}</span><span class="pl-kos"></</span><span class="pl-ent">script</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">tr</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">td</span><span class="pl-kos">></span>Value: {{ value }}<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">tr</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">tbody</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">table</span><span class="pl-kos">></span></pre></div> <blockquote> <p dir="auto">Don't forget to use the expression notation, otherwise it will be inserted as a normal code element.</p> </blockquote> <blockquote> <p dir="auto">When the <code><script></code> just including js-inline code expression it won't be added to the template as a script element.</p> </blockquote> <p dir="auto"><a name="user-content-event"></a></p> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Routing & Event Delegation</h2><a id="user-content-routing--event-delegation" class="anchor" aria-label="Permalink: Routing & Event Delegation" href="#routing--event-delegation"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <blockquote> <p dir="auto">All the special attributes used to assign event routing within templates are inherited from the native inline listener name but without the prefix <code>on</code>, e.g. to bind routing for an "onclick" just use <code>click</code>.</p> </blockquote> <p dir="auto">Let's take this example:</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<table foreach="data" data-user="{{ data.user }}"> <tr data-id="{{ data.id }}" entry> <td>Item:</td> <td click="item-show">{{ data.name }}</td> <td><a click="item-edit:entry">Edit</a></td> <td><a click="item-delete:entry">Delete</a></td> <td><a click="item-sort:root">Sort</a></td> </tr> </table>"><pre><span class="pl-kos"><</span><span class="pl-ent">table</span> <span class="pl-c1">foreach</span>="<span class="pl-s">data</span>" <span class="pl-c1">data-user</span>="<span class="pl-s">{{ data.user }}</span>"<span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">tr</span> <span class="pl-c1">data-id</span>="<span class="pl-s">{{ data.id }}</span>" <span class="pl-c1">entry</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">td</span><span class="pl-kos">></span>Item:<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">td</span> <span class="pl-c1">click</span>="<span class="pl-s">item-show</span>"<span class="pl-kos">></span>{{ data.name }}<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">td</span><span class="pl-kos">></span><span class="pl-kos"><</span><span class="pl-ent">a</span> <span class="pl-c1">click</span>="<span class="pl-s">item-edit:entry</span>"<span class="pl-kos">></span>Edit<span class="pl-kos"></</span><span class="pl-ent">a</span><span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">td</span><span class="pl-kos">></span><span class="pl-kos"><</span><span class="pl-ent">a</span> <span class="pl-c1">click</span>="<span class="pl-s">item-delete:entry</span>"<span class="pl-kos">></span>Delete<span class="pl-kos"></</span><span class="pl-ent">a</span><span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">td</span><span class="pl-kos">></span><span class="pl-kos"><</span><span class="pl-ent">a</span> <span class="pl-c1">click</span>="<span class="pl-s">item-sort:root</span>"<span class="pl-kos">></span>Sort<span class="pl-kos"></</span><span class="pl-ent">a</span><span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">tr</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">table</span><span class="pl-kos">></span></pre></div> <p dir="auto">There are 4 click listeners. The attribute value represents the name of the route. Some of the listener has a route separated by colon ":", this will delegate the event from the route e.g. "item-delete" to the closest element which contains the attribute "entry". You can freely choose attribute names, but it shouldn't collide with native attributes. The last listener contains the keyword <code>root</code> which is a shortcut to automatically forward the components root (the <table> in this example) as <code>target</code> to the assigned route.</p> <blockquote> <p dir="auto">Forwarding events to a parent element by using the colon notation is also helpful when you have corresponding data-attributes assigned to an outer context and each of the nested listener needs to access those values.</p> </blockquote> <p dir="auto">Define routes:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.route("show-user", function(target, event) { alert(target.textContent); }); view.route("delete-user", function(target, event) { // target was delegated to "root" by using the colon expression alert(target.dataset.id); // when target is delegated you can still get the // original element where the event was fired: const anchor = event.target; });"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">route</span><span class="pl-kos">(</span><span class="pl-s">"show-user"</span><span class="pl-kos">,</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">target</span><span class="pl-kos">,</span> <span class="pl-s1">event</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-en">alert</span><span class="pl-kos">(</span><span class="pl-s1">target</span><span class="pl-kos">.</span><span class="pl-c1">textContent</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">route</span><span class="pl-kos">(</span><span class="pl-s">"delete-user"</span><span class="pl-kos">,</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">target</span><span class="pl-kos">,</span> <span class="pl-s1">event</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-c">// target was delegated to "root" by using the colon expression</span> <span class="pl-en">alert</span><span class="pl-kos">(</span><span class="pl-s1">target</span><span class="pl-kos">.</span><span class="pl-c1">dataset</span><span class="pl-kos">.</span><span class="pl-c1">id</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// when target is delegated you can still get the</span> <span class="pl-c">// original element where the event was fired:</span> <span class="pl-k">const</span> <span class="pl-s1">anchor</span> <span class="pl-c1">=</span> <span class="pl-s1">event</span><span class="pl-kos">.</span><span class="pl-c1">target</span><span class="pl-kos">;</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Routes are stored globally, so they share through all Mikado instances.</p> <p dir="auto"><b>List of all supported events:</b></p> <ul dir="auto"> <li>tap (synthetic touch-enabled "click" listener, see below)</li> <li>change, input, select, toggle</li> <li>click, dblclick</li> <li>keydown, keyup, keypress</li> <li>mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover, mouseup, mousewheel</li> <li>touchstart, touchmove, touchend</li> <li>submit, reset</li> <li>focus, blur</li> <li>load, error</li> <li>resize</li> <li>scroll</li> </ul> <p dir="auto"><b>Synthetic events:</b></p> <markdown-accessiblity-table><table> <tbody><tr></tr> <tr> <td>Event</td> <td>Description</td> </tr> <tr> <td><b>tap</b></td> <td>The tap event is a synthetic click event for touch-enabled devices. It also fully prevents the 300ms click delay. The tap event automatically falls back to a native click listener when running on non-touchable device.</td> </tr> </tbody></table></markdown-accessiblity-table> <p dir="auto"><a name="user-content-bubbling"></a></p> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Event Bubbling</h3><a id="user-content-event-bubbling" class="anchor" aria-label="Permalink: Event Bubbling" href="#event-bubbling"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">When multiple listeners of the same type are nested, the event will bubble up to the HTML root element when enabling the global flag <code>Mikado.eventBubble = true</code>, otherwise bubbling will stop on the most inner definition which gets matched.</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<table> <tr click="route-tr"> <td click="route-td"></td> <td></td> <td></td> </tr> </table>"><pre><span class="pl-kos"><</span><span class="pl-ent">table</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">tr</span> <span class="pl-c1">click</span>="<span class="pl-s">route-tr</span>"<span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">td</span> <span class="pl-c1">click</span>="<span class="pl-s">route-td</span>"<span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">td</span><span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">td</span><span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">tr</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">table</span><span class="pl-kos">></span></pre></div> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Mikado.route("route-td", function(target, event){ console.log("clicked td"); }); Mikado.route("route-tr", function(target, event){ console.log("clicked tr"); });"><pre><span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">route</span><span class="pl-kos">(</span><span class="pl-s">"route-td"</span><span class="pl-kos">,</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">target</span><span class="pl-kos">,</span> <span class="pl-s1">event</span><span class="pl-kos">)</span><span class="pl-kos">{</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">"clicked td"</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">route</span><span class="pl-kos">(</span><span class="pl-s">"route-tr"</span><span class="pl-kos">,</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">target</span><span class="pl-kos">,</span> <span class="pl-s1">event</span><span class="pl-kos">)</span><span class="pl-kos">{</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">"clicked tr"</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">By default, the above example will just execute the route named "route-td" when clicked on the TD element. When <code>Mikado.eventBubble = true</code> was enabled the bubble continues after calling the most inner matched handler and both routes will be executed when clicking on TD element.</p> <p dir="auto">To control Mikados internal event bubbling mechanism you can pass in options as the 3rd parameter when defining routes:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Mikado.route("route-td", function(){ /*...*/ }, { stop: true });"><pre><span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">route</span><span class="pl-kos">(</span><span class="pl-s">"route-td"</span><span class="pl-kos">,</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">{</span> <span class="pl-c">/*...*/</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">stop</span>: <span class="pl-c1">true</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Supported Options (mixable):</p> <ul dir="auto"> <li><code>stop: boolean</code> stop capturing/bubbling the event up to the root element (stops Mikado event + native event)</li> <li><code>prevent: boolean</code> prevents the default behavior for this native event</li> <li><code>cancel: boolean</code> just stop bubbling the Mikado event, but the native event bubbling will still continue</li> <li><code>once: boolean</code> just catch the event once and remove the route then</li> </ul> <p dir="auto"><a name="user-content-event-cache"></a></p> <div class="markdown-heading" dir="auto"><h4 tabindex="-1" class="heading-element" dir="auto">Event Cache</h4><a id="user-content-event-cache" class="anchor" aria-label="Permalink: Event Cache" href="#event-cache"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">You can cache more complex event delegations by setting the global flag <code>Mikado.eventCache = true</code>. A candidate for a complex delegation is forwarding a different target to the handler by using the ":" colon notation or when using <code>Mikado.eventBubble = true</code>.</p> <blockquote> <p dir="auto">When using Event Cache the scope of forwarding custom target elements to the handler and also nested routes of the same event type should be defined in the same template scope. Thinks may break when components are shared through multiple instances.</p> </blockquote> <p dir="auto">This is okay, because all partials are inline:</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<table foreach="data.result"> <!-- a new template scope --> <tr foreach="data.user" click="route-tr:root"> <!-- a new template scope --> <td click="route-td:root">{{ data.username }}</td> </tr> </table>"><pre><span class="pl-kos"><</span><span class="pl-ent">table</span> <span class="pl-c1">foreach</span>="<span class="pl-s">data.result</span>"<span class="pl-kos">></span> <span class="pl-c"><!-- a new template scope --></span> <span class="pl-kos"><</span><span class="pl-ent">tr</span> <span class="pl-c1">foreach</span>="<span class="pl-s">data.user</span>" <span class="pl-c1">click</span>="<span class="pl-s">route-tr:root</span>"<span class="pl-kos">></span> <span class="pl-c"><!-- a new template scope --></span> <span class="pl-kos"><</span><span class="pl-ent">td</span> <span class="pl-c1">click</span>="<span class="pl-s">route-td:root</span>"<span class="pl-kos">></span>{{ data.username }}<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">tr</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">table</span><span class="pl-kos">></span></pre></div> <p dir="auto">When using extern includes it might produce unexpected behavior:</p> <p dir="auto">tpl.html:</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<table foreach="data.result" entry> <!-- a new template scope --> <tr foreach="data.user" include="tpl-td"> <!-- a new template scope --> </tr> </table>"><pre><span class="pl-kos"><</span><span class="pl-ent">table</span> <span class="pl-c1">foreach</span>="<span class="pl-s">data.result</span>" <span class="pl-c1">entry</span><span class="pl-kos">></span> <span class="pl-c"><!-- a new template scope --></span> <span class="pl-kos"><</span><span class="pl-ent">tr</span> <span class="pl-c1">foreach</span>="<span class="pl-s">data.user</span>" <span class="pl-c1">include</span>="<span class="pl-s">tpl-td</span>"<span class="pl-kos">></span> <span class="pl-c"><!-- a new template scope --></span> <span class="pl-kos"></</span><span class="pl-ent">tr</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">table</span><span class="pl-kos">></span></pre></div> <p dir="auto">tpl-td.html:</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<td click="route-td:entry">{{ data.username }}</td>"><pre><span class="pl-kos"><</span><span class="pl-ent">td</span> <span class="pl-c1">click</span>="<span class="pl-s">route-td:entry</span>"<span class="pl-kos">></span>{{ data.username }}<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span></pre></div> <p dir="auto">This will have no side effects when the partial "tpl-td.html" is just use for the template "tpl.html". But imagine you have another template which includes "tpl-td.html" and <strong>also</strong> one of the recycle strategies (keyed, non-keyed) was enabled on both. In this specific situation the cache might point to a false element <code><table entry></code> used to forward to the handler. Then you need to choose between: 1. limiting the scope of used event notation to the template scope, 2. do not enable <code>Mikado.eventCache = true</code>.</p> <p dir="auto"><a name="user-content-view.listen"></a><a name="user-content-view.unlisten"></a></p> <div class="markdown-heading" dir="auto"><h4 tabindex="-1" class="heading-element" dir="auto">Explicit Register/Unregister Event Delegation</h4><a id="user-content-explicit-registerunregister-event-delegation" class="anchor" aria-label="Permalink: Explicit Register/Unregister Event Delegation" href="#explicit-registerunregister-event-delegation"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">You can use Mikado routing and event delegation feature everywhere, also outside a template. Just apply the event attribute as you would do in a template.</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<body> <div click="handler">Click Me</div> </body>"><pre><span class="pl-kos"><</span><span class="pl-ent">body</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">div</span> <span class="pl-c1">click</span>="<span class="pl-s">handler</span>"<span class="pl-kos">></span>Click Me<span class="pl-kos"></</span><span class="pl-ent">div</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">body</span><span class="pl-kos">></span></pre></div> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Mikado.route("handler", function(target, event) { console.log("Clicked"); });"><pre><span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">route</span><span class="pl-kos">(</span><span class="pl-s">"handler"</span><span class="pl-kos">,</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">target</span><span class="pl-kos">,</span> <span class="pl-s1">event</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">"Clicked"</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Then you have to explicit register the global "click" listener once:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Mikado.listen("click");"><pre><span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">listen</span><span class="pl-kos">(</span><span class="pl-s">"click"</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Because events automatically register when creating the template factory under the hood. When no template was created which includes the same type of event, a global listener does not exist. For that reason, you have to explicitly register the listener once.</p> <p dir="auto"><a name="user-content-event-control"></a></p> <div class="markdown-heading" dir="auto"><h4 tabindex="-1" class="heading-element" dir="auto">Control the Native Event Flow</h4><a id="user-content-control-the-native-event-flow" class="anchor" aria-label="Permalink: Control the Native Event Flow" href="#control-the-native-event-flow"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">The default "EventListenerOptions" are set to <code>true</code> by default and is using the capturing phase, this is preferred since the event is required on a global listener.</p> <p dir="auto">When you need to configure event capturing and passive listener globally just register the specific listener manually before creating any Mikado instance which is including references to this specific event type:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Mikado.listen("touchmove", { passive: true, capture: true });"><pre><span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">listen</span><span class="pl-kos">(</span><span class="pl-s">"touchmove"</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">passive</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span> <span class="pl-c1">capture</span>: <span class="pl-c1">true</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Unregister listener:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Mikado.unlisten("click");"><pre><span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">unlisten</span><span class="pl-kos">(</span><span class="pl-s">"click"</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <blockquote> <p dir="auto">Mikado will store the original <code>EventListenerOptions</code> when calling <code>.listen(event)</code> under the hood, to make sure the listener will be removed properly.</p> </blockquote> <p dir="auto"><a name="user-content-view.dispatch"></a></p> <div class="markdown-heading" dir="auto"><h4 tabindex="-1" class="heading-element" dir="auto">Dispatch Routes</h4><a id="user-content-dispatch-routes" class="anchor" aria-label="Permalink: Dispatch Routes" href="#dispatch-routes"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Manually dispatch a route:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.dispatch("route-name");"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">dispatch</span><span class="pl-kos">(</span><span class="pl-s">"route-name"</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Manually dispatch a route and pass parameters for the assigned handler:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.dispatch("handler", target, event);"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">dispatch</span><span class="pl-kos">(</span><span class="pl-s">"handler"</span><span class="pl-kos">,</span> <span class="pl-s1">target</span><span class="pl-kos">,</span> <span class="pl-s1">event</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-recycle"></a></p> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Keyed & Non-Keyed Recycling</h2><a id="user-content-keyed--non-keyed-recycling" class="anchor" aria-label="Permalink: Keyed & Non-Keyed Recycling" href="#keyed--non-keyed-recycling"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <blockquote> <p dir="auto">Each template instance can run in its own mode independently.</p> </blockquote> <p dir="auto"><a name="user-content-non-keyed"></a></p> <div class="markdown-heading" dir="auto"><h4 tabindex="-1" class="heading-element" dir="auto">1. Non-Keyed Recycle</h4><a id="user-content-1-non-keyed-recycle" class="anchor" aria-label="Permalink: 1. Non-Keyed Recycle" href="#1-non-keyed-recycle"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">A non-keyed recycle strategy will re-use all existing components without any limitations and is faster than keyed but also has some side effects when not used properly. That's why limitation by keyed data is a more common strategy for recycling. But when an unlimited recycle strategy was used carefully you won't get any disadvantages.</p> <p dir="auto">Just provide a template as usual:</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<div> <div>User:</div> <div>{{data.name}}</div> </div>"><pre><span class="pl-kos"><</span><span class="pl-ent">div</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">div</span><span class="pl-kos">></span>User:<span class="pl-kos"></</span><span class="pl-ent">div</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">div</span><span class="pl-kos">></span>{{data.name}}<span class="pl-kos"></</span><span class="pl-ent">div</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">div</span><span class="pl-kos">></span></pre></div> <p dir="auto">along with these options:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var view = new Mikado(template, { recycle: true });"><pre><span class="pl-k">var</span> <span class="pl-s1">view</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">Mikado</span><span class="pl-kos">(</span><span class="pl-s1">template</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">recycle</span>: <span class="pl-c1">true</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">This will switch Mikado into a recycle strategy to enable re-use of already rendered components.</p> <p dir="auto"><a name="user-content-keyed"></a></p> <div class="markdown-heading" dir="auto"><h4 tabindex="-1" class="heading-element" dir="auto">2. Keyed Recycle</h4><a id="user-content-2-keyed-recycle" class="anchor" aria-label="Permalink: 2. Keyed Recycle" href="#2-keyed-recycle"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">A keyed strategy limits the recycle strategy on components matching the given data key. It just requires a <strong>unique identifier</strong> on each rendered item (e.g. the ID).</p> <p dir="auto">Just add the attribute <strong><em>key</em></strong> to the <strong><em>root element</em></strong> of a template (or the root of an inline partial) and assign the scope to the unique identifier will automatically switch Mikado into keyed-recycle mode:</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<div key="data.id"> <div>User:</div> <div>{{ data.name }}</div> </div>"><pre><span class="pl-kos"><</span><span class="pl-ent">div</span> <span class="pl-c1">key</span>="<span class="pl-s">data.id</span>"<span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">div</span><span class="pl-kos">></span>User:<span class="pl-kos"></</span><span class="pl-ent">div</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">div</span><span class="pl-kos">></span>{{ data.name }}<span class="pl-kos"></</span><span class="pl-ent">div</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">div</span><span class="pl-kos">></span></pre></div> <blockquote> <p dir="auto">A given key in template does not need the <code>recycle: true</code> option to be passed.</p> </blockquote> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var view = Mikado(template);"><pre><span class="pl-k">var</span> <span class="pl-s1">view</span> <span class="pl-c1">=</span> <span class="pl-v">Mikado</span><span class="pl-kos">(</span><span class="pl-s1">template</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">This will switch Mikado into a recycle strategy which is limited by its corresponding data keys.</p> <p dir="auto"><a name="user-content-usage"></a></p> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Create, Mount, Destroy Views</h2><a id="user-content-create-mount-destroy-views" class="anchor" aria-label="Permalink: Create, Mount, Destroy Views" href="#create-mount-destroy-views"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto"><a name="user-content-mikado.new"></a> Create a view by passing a template and customized options:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var view = Mikado(template, options);"><pre><span class="pl-k">var</span> <span class="pl-s1">view</span> <span class="pl-c1">=</span> <span class="pl-v">Mikado</span><span class="pl-kos">(</span><span class="pl-s1">template</span><span class="pl-kos">,</span> <span class="pl-s1">options</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Create a view and also mount it to a target element right away (you can also do this before render):</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var view = Mikado(template, { mount: HTMLElement });"><pre><span class="pl-k">var</span> <span class="pl-s1">view</span> <span class="pl-c1">=</span> <span class="pl-v">Mikado</span><span class="pl-kos">(</span><span class="pl-s1">template</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">mount</span>: <span class="pl-v">HTMLElement</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <blockquote> <p dir="auto">Whenever <code>.mount()</code> is called for the first time, the template factory will be created once. Also, within this routine the hydration will apply when enabled. You can "prebuild" views by mounting early. Bigger sized applications does not hold all views in memory, so here it is recommended to mount the view right before render <code>view.mount(node).render(data)</code>.</p> </blockquote> <p dir="auto"><a name="user-content-view.mount"></a></p> <p dir="auto">Mount or re-mount a view to an HTML element:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.mount(element);"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">mount</span><span class="pl-kos">(</span><span class="pl-s1">element</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-view.destroy"></a></p> <p dir="auto">Destroy a view:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.destroy();"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">destroy</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-view.render"></a></p> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Render Templates</h2><a id="user-content-render-templates" class="anchor" aria-label="Permalink: Render Templates" href="#render-templates"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Render just a single data object:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.render({/* object */});"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-c">/* object */</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Render a template repeated incrementally through a set of data items:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.render([/* array of objects */]);"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">[</span><span class="pl-c">/* array of objects */</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Render a template and also pass a custom state:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.render(data, state);"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-s1">data</span><span class="pl-kos">,</span> <span class="pl-s1">state</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <blockquote> <p dir="auto">When passing a custom state you can still access the original view state by using <code>this.state</code> within template expressions.</p> </blockquote> <p dir="auto">Schedule an asynchronous render task without any callback:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.render(data, state, true);"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-s1">data</span><span class="pl-kos">,</span> <span class="pl-s1">state</span><span class="pl-kos">,</span> <span class="pl-c1">true</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <blockquote> <p dir="auto">All asynchronous render tasks will be scheduled to the next animation frame.</p> </blockquote> <p dir="auto">Schedule an asynchronous render task by using a callback:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.render(data, state, function() { // finished });"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-s1">data</span><span class="pl-kos">,</span> <span class="pl-s1">state</span><span class="pl-kos">,</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-c">// finished</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Schedule a render task by using promises (requires the option <strong><em>async</em></strong> to be enabled during initialization):</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.render(data, state).then(function() { // finished });"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-s1">data</span><span class="pl-kos">,</span> <span class="pl-s1">state</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">then</span><span class="pl-kos">(</span><span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-c">// finished</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Or as async/await (requires the option <strong><em>async</em></strong> to be enabled during initialization):</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="await view.render(data, payload); // finished"><pre><span class="pl-k">await</span> <span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-s1">data</span><span class="pl-kos">,</span> <span class="pl-s1">payload</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// finished</span></pre></div> <p dir="auto">Render a static template (didn't include any dynamic contents):</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.render();"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-view.create"></a></p> <div class="markdown-heading" dir="auto"><h4 tabindex="-1" class="heading-element" dir="auto">Create Components</h4><a id="user-content-create-components" class="anchor" aria-label="Permalink: Create Components" href="#create-components"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Just create a component from a template without adding/assigning/rendering them to the root ("orphan"):</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var partial = view.create(data);"><pre><span class="pl-k">var</span> <span class="pl-s1">partial</span> <span class="pl-c1">=</span> <span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">create</span><span class="pl-kos">(</span><span class="pl-s1">data</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Orphans are not a part of the internal render tree of a view. The construction of orphan components is also really fast.</p> <p dir="auto"><a name="user-content-modify-views"></a></p> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Modify Views</h2><a id="user-content-modify-views" class="anchor" aria-label="Permalink: Modify Views" href="#modify-views"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto"><a name="user-content-view.add"></a></p> <p dir="auto">Add one data item to the end:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.add(data);"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">add</span><span class="pl-kos">(</span><span class="pl-s1">data</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Add one data item to a specific index position (did not replace):</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// add to beginning: view.add(data, 0);"><pre><span class="pl-c">// add to beginning:</span> <span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">add</span><span class="pl-kos">(</span><span class="pl-s1">data</span><span class="pl-kos">,</span> <span class="pl-c1">0</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Add one data item to a reversed index position (did not replace):</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// add before the last element: view.add(data, -1);"><pre><span class="pl-c">// add before the last element:</span> <span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">add</span><span class="pl-kos">(</span><span class="pl-s1">data</span><span class="pl-kos">,</span> <span class="pl-c1">-</span><span class="pl-c1">1</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-view.append"></a></p> <p dir="auto">Append multiple data items to the end:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.append(data);"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">append</span><span class="pl-kos">(</span><span class="pl-s1">data</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Append multiple data before an index:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// append to beginning view.append(data, 0);"><pre><span class="pl-c">// append to beginning</span> <span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">append</span><span class="pl-kos">(</span><span class="pl-s1">data</span><span class="pl-kos">,</span> <span class="pl-c1">0</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Append multiple data before a reversed index position:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// append before the last element: view.append(data, -1);"><pre><span class="pl-c">// append before the last element:</span> <span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">append</span><span class="pl-kos">(</span><span class="pl-s1">data</span><span class="pl-kos">,</span> <span class="pl-c1">-</span><span class="pl-c1">1</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-view.remove"></a></p> <p dir="auto">Remove a specific template node:</p> <blockquote> <p dir="auto">Parameter: <code>remove(position, <count>)</code></p> </blockquote> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.remove(node);"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">remove</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Remove a specific template node by its index:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.remove(20);"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">remove</span><span class="pl-kos">(</span><span class="pl-c1">20</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Remove a specific template node by its reversed index:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// remove the last: view.remove(-1);"><pre><span class="pl-c">// remove the last:</span> <span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">remove</span><span class="pl-kos">(</span><span class="pl-c1">-</span><span class="pl-c1">1</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Remove a range of nodes starting from a specific node or index (included in removal):</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.remove(20, 10);"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">remove</span><span class="pl-kos">(</span><span class="pl-c1">20</span><span class="pl-kos">,</span> <span class="pl-c1">10</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.remove(node, 20);"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">remove</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">,</span> <span class="pl-c1">20</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Remove last 20 node items by using reversed index:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.remove(-20, 20);"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">remove</span><span class="pl-kos">(</span><span class="pl-c1">-</span><span class="pl-c1">20</span><span class="pl-kos">,</span> <span class="pl-c1">20</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Remove previous 20 node items starting of a given node/index (included in removal):</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.remove(node, -20);"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">remove</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">,</span> <span class="pl-c1">-</span><span class="pl-c1">20</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-view.clear"></a></p> <p dir="auto">Remove all:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.clear();"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">clear</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-view.replace"></a></p> <p dir="auto">Replace a data item/node:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.replace(node, data);"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">replace</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">,</span> <span class="pl-s1">data</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.replace(index, data);"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">replace</span><span class="pl-kos">(</span><span class="pl-s1">index</span><span class="pl-kos">,</span> <span class="pl-s1">data</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-view.update"></a></p> <p dir="auto">Update a single data item/node:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.update(node, data);"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">update</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">,</span> <span class="pl-s1">data</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.update(index, data);"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">update</span><span class="pl-kos">(</span><span class="pl-s1">index</span><span class="pl-kos">,</span> <span class="pl-s1">data</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-helpers"></a></p> <div class="markdown-heading" dir="auto"><h4 tabindex="-1" class="heading-element" dir="auto">Common View Helpers</h4><a id="user-content-common-view-helpers" class="anchor" aria-label="Permalink: Common View Helpers" href="#common-view-helpers"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto"><a name="user-content-view.node"></a></p> <p dir="auto">Get a components root element by a specific index:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var node = view.node(index);"><pre><span class="pl-k">var</span> <span class="pl-s1">node</span> <span class="pl-c1">=</span> <span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">node</span><span class="pl-kos">(</span><span class="pl-s1">index</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-view.index"></a></p> <p dir="auto">Get the index from a specific components root element:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var index = view.index(node);"><pre><span class="pl-k">var</span> <span class="pl-s1">index</span> <span class="pl-c1">=</span> <span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">index</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-view.length"></a></p> <p dir="auto">Get the length of all components currently rendered:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var length = view.length;"><pre><span class="pl-k">var</span> <span class="pl-s1">length</span> <span class="pl-c1">=</span> <span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-c1">length</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-view.name"></a></p> <p dir="auto">Get the current template name which is assigned to a Mikado instance:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var name = view.name;"><pre><span class="pl-k">var</span> <span class="pl-s1">name</span> <span class="pl-c1">=</span> <span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-c1">name</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-view.root"></a></p> <p dir="auto">Get the mounted root element on which the template is assigned to:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var element = view.root;"><pre><span class="pl-k">var</span> <span class="pl-s1">element</span> <span class="pl-c1">=</span> <span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-c1">root</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-manipulate"></a></p> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Manipulate Views</h2><a id="user-content-manipulate-views" class="anchor" aria-label="Permalink: Manipulate Views" href="#manipulate-views"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Mikado provides you several optional helper functions to manipulate the DOM and also keep them in sync with the internal view state. Using the helper functions also will gain performance.</p> <blockquote> <p dir="auto">All helpers support passed parameter by index or by node.</p> </blockquote> <p dir="auto">Helpers let you apply simple transformations without running through the whole render loop of the template. Reconciliation isn't the holy grail, it is just for your laziness. In certain situations it is just more efficient to apply a known transformation directly instead of altering the data and request a whole render task.</p> <p dir="auto"><a name="user-content-view.move"></a></p> <p dir="auto">Move a data item/node to a specific index position:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.move(node, 15); // 15 from start view.move(node, -15); // 15 from end"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">move</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">,</span> <span class="pl-c1">15</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// 15 from start</span> <span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">move</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">,</span> <span class="pl-c1">-</span><span class="pl-c1">15</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// 15 from end</span></pre></div> <p dir="auto"><a name="user-content-view.first"></a><a name="user-content-view.last"></a></p> <p dir="auto">Move a data item/node to the top or bottom:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.first(node); view.last(node);"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">first</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">last</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-view.up"></a><a name="user-content-view.down"></a></p> <p dir="auto">Move a data item/node by 1 index up or down:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.up(node); view.down(node);"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">up</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">down</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Move a data item/node by a specific offset (pretty much the same as <strong><em>shift</em></strong>):</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.up(node, 3); view.down(node, 3);"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">up</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">,</span> <span class="pl-c1">3</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">down</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">,</span> <span class="pl-c1">3</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-view.shift"></a></p> <p dir="auto">Shift a data item/node relatively by a specific offset (both directions):</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.shift(node, 3); view.shift(node, -3);"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">shift</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">,</span> <span class="pl-c1">3</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">shift</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">,</span> <span class="pl-c1">-</span><span class="pl-c1">3</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-view.before"></a><a name="user-content-view.after"></a></p> <p dir="auto">Move a data item/node before or after another data item/node:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.before(node_a, node_b); view.after(node_a, node_b);"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">before</span><span class="pl-kos">(</span><span class="pl-s1">node_a</span><span class="pl-kos">,</span> <span class="pl-s1">node_b</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">after</span><span class="pl-kos">(</span><span class="pl-s1">node_a</span><span class="pl-kos">,</span> <span class="pl-s1">node_b</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-view.swap"></a></p> <p dir="auto">Swap two data items/nodes:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.swap(node_a, node_b);"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">swap</span><span class="pl-kos">(</span><span class="pl-s1">node_a</span><span class="pl-kos">,</span> <span class="pl-s1">node_b</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-cache"></a></p> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">DOM State Caching</h2><a id="user-content-dom-state-caching" class="anchor" aria-label="Permalink: DOM State Caching" href="#dom-state-caching"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Caching of DOM properties can greatly increase performance (up to 20x). There are just a few situations where caching will not improve performance, it fully depends on your application.</p> <blockquote> <p dir="auto"><strong>Recommendation:</strong> enable caching when some of your data will stay unchanged from one to another render task. Disable caching when changes on data almost requires a fully re-render.</p> </blockquote> <blockquote> <p dir="auto">The state cache will just apply when <code>recycle</code> was enabled or the <code>keyed</code> strategy was used. Otherwise, the cache is never used.</p> </blockquote> <p dir="auto">Caching is disabled by default, you will need to explicitly set this flag when initializing:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const view = new Mikado(template, { recycle:true, cache: true });"><pre><span class="pl-k">const</span> <span class="pl-s1">view</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">Mikado</span><span class="pl-kos">(</span><span class="pl-s1">template</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">recycle</span>:<span class="pl-c1">true</span><span class="pl-kos">,</span> <span class="pl-c1">cache</span>: <span class="pl-c1">true</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">It is very recommended reading the next section to understand how caching is working.</p> <p dir="auto"><a name="user-content-cache-concept"></a></p> <div class="markdown-heading" dir="auto"><h4 tabindex="-1" class="heading-element" dir="auto">State Caching Concept</h4><a id="user-content-state-caching-concept" class="anchor" aria-label="Permalink: State Caching Concept" href="#state-caching-concept"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Let's take a simple template as an example:</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<root> <div class="active">{{ data.title }}</div> </root>"><pre><span class="pl-kos"><</span><span class="pl-ent">root</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">active</span>"<span class="pl-kos">></span>{{ data.title }}<span class="pl-kos"></</span><span class="pl-ent">div</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">root</span><span class="pl-kos">></span></pre></div> <p dir="auto">The template above has just one dynamic expression. It could be rendered as follows:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.render({ title: "foobar" });"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">title</span>: <span class="pl-s">"foobar"</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Assume you get new data and wants to update the view, but the new data has still the same value for the <em>title</em>:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.render({ title: "foobar" });"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">title</span>: <span class="pl-s">"foobar"</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">This time, when cache was enabled no changes are applied to the text node, since the new value matches the previous cached value. That specific part now executes more than 10,000 times faster. Make a maximum use of this strategy will speed up things amazingly.</p> <p dir="auto">Now let's come to the most important part when using caching properly. Assume you have rendered the template above with caching enabled. Now you <strong>manually</strong> change parts of the DOM <strong>which is covered by a dynamic template expression</strong>:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var node = document.querySelector(".active"); node.textContent = "manual change";"><pre><span class="pl-k">var</span> <span class="pl-s1">node</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">querySelector</span><span class="pl-kos">(</span><span class="pl-s">".active"</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-s1">node</span><span class="pl-kos">.</span><span class="pl-c1">textContent</span> <span class="pl-c1">=</span> <span class="pl-s">"manual change"</span><span class="pl-kos">;</span></pre></div> <p dir="auto">The changes will apply to the DOM as expected. Now you re-render the template with the "old" state from the previous render:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.render({ title: "foobar" });"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">title</span>: <span class="pl-s">"foobar"</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">This time the change will not apply! Because the internal cache assumes that the current value is still "foobar" and skips the change.</p> <p dir="auto">You have 2 options in this situation:</p> <ol dir="auto"> <li>Do not manually change dom entries which are part of a dynamic template expression and update specific parts through rendering templates only.</li> <li>Using the <a href="#cache-helpers">DOM Cache Helpers</a> Mikado provides you exactly for this situation.</li> </ol> <p dir="auto"><a name="user-content-cache-helpers"></a></p> <div class="markdown-heading" dir="auto"><h4 tabindex="-1" class="heading-element" dir="auto">DOM Cache Helpers (optional)</h4><a id="user-content-dom-cache-helpers-optional" class="anchor" aria-label="Permalink: DOM Cache Helpers (optional)" href="#dom-cache-helpers-optional"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <blockquote> <p dir="auto">Caching helpers let you apply manual changes to the DOM easily without going out of sync with the corresponding view instance.</p> </blockquote> <blockquote> <p dir="auto">It is recommended also using these helpers to any DOM changes regardless if it is part of the template or not. Generally, these helpers will greatly improve your application performance.</p> </blockquote> <p dir="auto">A well implemented application can still save between 20 and 40% of unnecessary DOM access just by using those helpers everywhere. On regular implementations it is almost between 50% and 70%.</p> <p dir="auto"><a name="user-content-view.setattribute"></a></p> <p dir="auto">Set an attribute of a node (will not replace old attributes):</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Mikado.setAttribute(node, "href", "/foo");"><pre><span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">setAttribute</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">,</span> <span class="pl-s">"href"</span><span class="pl-kos">,</span> <span class="pl-s">"/foo"</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Set multiple attributes of a node (will not replace old attributes):</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Mikado.setAttribute(node, { id: "foo", href: "/foo" });"><pre><span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">setAttribute</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">id</span>: <span class="pl-s">"foo"</span><span class="pl-kos">,</span> <span class="pl-c1">href</span>: <span class="pl-s">"/foo"</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-mikado.getattribute"></a></p> <p dir="auto">Get an attribute value of a node:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var attr = Mikado.getAttribute(node, "href");"><pre><span class="pl-k">var</span> <span class="pl-s1">attr</span> <span class="pl-c1">=</span> <span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">getAttribute</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">,</span> <span class="pl-s">"href"</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-mikado.removeattribute"></a></p> <p dir="auto">Remove an attribute of a node:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var attr = Mikado.removeAttribute(node, "href");"><pre><span class="pl-k">var</span> <span class="pl-s1">attr</span> <span class="pl-c1">=</span> <span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">removeAttribute</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">,</span> <span class="pl-s">"href"</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Remove multiple attributes of a node:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var attr = Mikado.removeAttribute(node, ["href", "target"]);"><pre><span class="pl-k">var</span> <span class="pl-s1">attr</span> <span class="pl-c1">=</span> <span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">removeAttribute</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-s">"href"</span><span class="pl-kos">,</span> <span class="pl-s">"target"</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-mikado.hasattribute"></a></p> <p dir="auto">Check existence of a nodes attribute:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var href = Mikado.hasAttribute(node, "href");"><pre><span class="pl-k">var</span> <span class="pl-s1">href</span> <span class="pl-c1">=</span> <span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">hasAttribute</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">,</span> <span class="pl-s">"href"</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-mikado.setclass"></a></p> <p dir="auto">Set class name of a node (fully replaces old classes):</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Mikado.setClass(node, "class_a class_b"); ```~~ ~~ ```js Mikado.setClass(node, ["class_a", "class_b"]);"><pre><span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">setClass</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">,</span> <span class="pl-s">"class_a class_b"</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-s">``</span><span class="pl-s">`~~</span> <span class="pl-s">~~</span> <span class="pl-s">`</span><span class="pl-s">``</span><span class="pl-kos"></span><span class="pl-s1">js</span> <span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">setClass</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-s">"class_a"</span><span class="pl-kos">,</span> <span class="pl-s">"class_b"</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-mikado.addclass"></a></p> <p dir="auto">Add a classname to a node:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Mikado.addClass(node, "class_a");"><pre><span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">addClass</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">,</span> <span class="pl-s">"class_a"</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Add multiple classnames to a node:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Mikado.addClass(node, ["class_a", "class_b"]);"><pre><span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">addClass</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-s">"class_a"</span><span class="pl-kos">,</span> <span class="pl-s">"class_b"</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-mikado.getclass"></a></p> <p dir="auto">Get all classnames of a node (returns an array):</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var classList = Mikado.getClass(node);"><pre><span class="pl-k">var</span> <span class="pl-s1">classList</span> <span class="pl-c1">=</span> <span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">getClass</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-mikado.toggleclass"></a></p> <p dir="auto">Toggle classnames of a node:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var classList = Mikado.toggleClass(node, "class_a");"><pre><span class="pl-k">var</span> <span class="pl-s1">classList</span> <span class="pl-c1">=</span> <span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">toggleClass</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">,</span> <span class="pl-s">"class_a"</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Toggle classnames of a node to a specific state (a short variant of conditional "add" and "remove"):</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var classList = Mikado.toggleClass(node, "class_a", true);"><pre><span class="pl-k">var</span> <span class="pl-s1">classList</span> <span class="pl-c1">=</span> <span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">toggleClass</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">,</span> <span class="pl-s">"class_a"</span><span class="pl-kos">,</span> <span class="pl-c1">true</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Toggle multiple classnames of a node:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var classList = Mikado.toggleClass(node, ["class_a", "class_b"]);"><pre><span class="pl-k">var</span> <span class="pl-s1">classList</span> <span class="pl-c1">=</span> <span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">toggleClass</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-s">"class_a"</span><span class="pl-kos">,</span> <span class="pl-s">"class_b"</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Toggle multiple classnames of a node each of them to a specific state:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var classList = Mikado.toggleClass(node, { "class_a": true, "class_b": false });"><pre><span class="pl-k">var</span> <span class="pl-s1">classList</span> <span class="pl-c1">=</span> <span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">toggleClass</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-s">"class_a"</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span> <span class="pl-s">"class_b"</span>: <span class="pl-c1">false</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-mikado.hasclass"></a></p> <p dir="auto">Check existence of a nodes classnames:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var class_a = Mikado.hasClass(node, "class_a");"><pre><span class="pl-k">var</span> <span class="pl-s1">class_a</span> <span class="pl-c1">=</span> <span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">hasClass</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">,</span> <span class="pl-s">"class_a"</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-mikado.removeclass"></a></p> <p dir="auto">Removes a classnames of a node:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Mikado.removeClass(node, "class_a");"><pre><span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">removeClass</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">,</span> <span class="pl-s">"class_a"</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Removes multiple classnames of a node:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Mikado.removeClass(node, ["class_a", "class_b"]);"><pre><span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">removeClass</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-s">"class_a"</span><span class="pl-kos">,</span> <span class="pl-s">"class_b"</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-mikado.setcss"></a></p> <p dir="auto">Set the whole elements inline style tag <code>style="..."</code> (fully replaces old styles):</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Mikado.setCss(node, "top: 0; padding-right: 10px");"><pre><span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">setCss</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">,</span> <span class="pl-s">"top: 0; padding-right: 10px"</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Mikado.setCss(node, ["top: 0", "padding-right: 10px"]);"><pre><span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">setCss</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-s">"top: 0"</span><span class="pl-kos">,</span> <span class="pl-s">"padding-right: 10px"</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-mikado.getcss"></a></p> <p dir="auto">Get all inline styles of a nodes style tag:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var css = Mikado.getCss(node);"><pre><span class="pl-k">var</span> <span class="pl-s1">css</span> <span class="pl-c1">=</span> <span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">getCss</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-mikado.setstyle"></a></p> <p dir="auto">Set a specific inline style of a node (will not replace old styles):</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Mikado.setStyle(node, "padding-right", "10px");"><pre><span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">setStyle</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">,</span> <span class="pl-s">"padding-right"</span><span class="pl-kos">,</span> <span class="pl-s">"10px"</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Set multiple specific inline styles of a node (will not replace old styles):</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Mikado.setStyle(node, { "top": 0, "padding-right": "10px" });"><pre><span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">setStyle</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-s">"top"</span>: <span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-s">"padding-right"</span>: <span class="pl-s">"10px"</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-mikado.getstyle"></a></p> <p dir="auto">Get a specific inline style value of a node:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var padding = Mikado.getStyle(node, "padding-right");"><pre><span class="pl-k">var</span> <span class="pl-s1">padding</span> <span class="pl-c1">=</span> <span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">getStyle</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">,</span> <span class="pl-s">"padding-right"</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-mikado.settext"></a></p> <p dir="auto">Set text of an element or text node:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Mikado.setText(node, "This is a title.");"><pre><span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">setText</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">,</span> <span class="pl-s">"This is a title."</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-mikado.gettext"></a></p> <p dir="auto">Get text of an element or text node:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var text = Mikado.getText(node);"><pre><span class="pl-k">var</span> <span class="pl-s1">text</span> <span class="pl-c1">=</span> <span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">getText</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-mikado.sethtml"></a></p> <p dir="auto">Set inner HTML of an element:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Mikado.setHtml(node, "<b>This is a title.</b>");"><pre><span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">setHtml</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">,</span> <span class="pl-s">"<b>This is a title.</b>"</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-mikado.gethtml"></a></p> <p dir="auto">Get inner HTML of an element:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var html = Mikado.getHtml(node);"><pre><span class="pl-k">var</span> <span class="pl-s1">html</span> <span class="pl-c1">=</span> <span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">getHtml</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-view.state"></a></p> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">View State</h2><a id="user-content-view-state" class="anchor" aria-label="Permalink: View State" href="#view-state"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Every Mikado instance has by default a state object you can access by <code>view.state</code>.</p> <p dir="auto">State is a payload keeping values and functions during runtime you can use within template expressions additionally to the data. The state also will be delegated through the whole render loop (including partials). You can bind one global state to every Mikado instances, you can also assign a dedicated state for each view. Additionally, a custom state could be passed on all render tasks.</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const view = Mikado(template, options); console.log(view.state); // {}"><pre><span class="pl-k">const</span> <span class="pl-s1">view</span> <span class="pl-c1">=</span> <span class="pl-v">Mikado</span><span class="pl-kos">(</span><span class="pl-s1">template</span><span class="pl-kos">,</span> <span class="pl-s1">options</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-c1">state</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// {}</span></pre></div> <p dir="auto">When creating an instance you can optionally pass an extern state via options to share the same state object through multiple views:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const state = { foo: 1 }; const view_a = Mikado(template_a, { state }); const view_b = Mikado(template_b, { state }); console.log(view_a.state); // { foo: 1 } console.log(view_b.state); // { foo: 1 }"><pre><span class="pl-k">const</span> <span class="pl-s1">state</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span> <span class="pl-c1">foo</span>: <span class="pl-c1">1</span> <span class="pl-kos">}</span><span class="pl-kos">;</span> <span class="pl-k">const</span> <span class="pl-s1">view_a</span> <span class="pl-c1">=</span> <span class="pl-v">Mikado</span><span class="pl-kos">(</span><span class="pl-s1">template_a</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> state <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-k">const</span> <span class="pl-s1">view_b</span> <span class="pl-c1">=</span> <span class="pl-v">Mikado</span><span class="pl-kos">(</span><span class="pl-s1">template_b</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> state <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">view_a</span><span class="pl-kos">.</span><span class="pl-c1">state</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// { foo: 1 }</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">view_b</span><span class="pl-kos">.</span><span class="pl-c1">state</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// { foo: 1 }</span></pre></div> <p dir="auto">You can access the state within templates by the builtin keyword "state" or also by using "this" which points to the current Mikado instance.</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<div> <p>{{ state.foo }}</p> <!-- output: 1 --> <p>{{ this.state.foo }}</p> <!-- output: 1 --> </div>"><pre><span class="pl-kos"><</span><span class="pl-ent">div</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">p</span><span class="pl-kos">></span>{{ state.foo }}<span class="pl-kos"></</span><span class="pl-ent">p</span><span class="pl-kos">></span> <span class="pl-c"><!-- output: 1 --></span> <span class="pl-kos"><</span><span class="pl-ent">p</span><span class="pl-kos">></span>{{ this.state.foo }}<span class="pl-kos"></</span><span class="pl-ent">p</span><span class="pl-kos">></span> <span class="pl-c"><!-- output: 1 --></span> <span class="pl-kos"></</span><span class="pl-ent">div</span><span class="pl-kos">></span></pre></div> <p dir="auto">When using <code>.render()</code> you can optionally pass a state as 2nd parameter which will temporarily override the views default keyword "state" for this specific render task:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const state = { foo: 1 }; const view = Mikado(template, { state }); view.render(data, { foo: 2 });"><pre><span class="pl-k">const</span> <span class="pl-s1">state</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span> <span class="pl-c1">foo</span>: <span class="pl-c1">1</span> <span class="pl-kos">}</span><span class="pl-kos">;</span> <span class="pl-k">const</span> <span class="pl-s1">view</span> <span class="pl-c1">=</span> <span class="pl-v">Mikado</span><span class="pl-kos">(</span><span class="pl-s1">template</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> state <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-s1">data</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">foo</span>: <span class="pl-c1">2</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<div> <p>{{ state.foo }}</p> <!-- output: 2 --> <p>{{ this.state.foo }}</p> <!-- output: 1 --> </div>"><pre><span class="pl-kos"><</span><span class="pl-ent">div</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">p</span><span class="pl-kos">></span>{{ state.foo }}<span class="pl-kos"></</span><span class="pl-ent">p</span><span class="pl-kos">></span> <span class="pl-c"><!-- output: 2 --></span> <span class="pl-kos"><</span><span class="pl-ent">p</span><span class="pl-kos">></span>{{ this.state.foo }}<span class="pl-kos"></</span><span class="pl-ent">p</span><span class="pl-kos">></span> <span class="pl-c"><!-- output: 1 --></span> <span class="pl-kos"></</span><span class="pl-ent">div</span><span class="pl-kos">></span></pre></div> <p dir="auto">As you can see you can still access the original state by using <code>this.state</code>.</p> <p dir="auto">When using <code>foreach</code> the keyword <code>data</code> within nested template expressions refers to the most inner element.</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<!-- data points to root --> <table foreach="data.rows"> <!-- data points to root.rows[] --> <tr foreach="data.columns"> <!-- data points to root.rows[].columns[] --> <td>{{ data.value }}</td> </tr> </table>"><pre><span class="pl-c"><!-- data points to root --></span> <span class="pl-kos"><</span><span class="pl-ent">table</span> <span class="pl-c1">foreach</span>="<span class="pl-s">data.rows</span>"<span class="pl-kos">></span> <span class="pl-c"><!-- data points to root.rows[] --></span> <span class="pl-kos"><</span><span class="pl-ent">tr</span> <span class="pl-c1">foreach</span>="<span class="pl-s">data.columns</span>"<span class="pl-kos">></span> <span class="pl-c"><!-- data points to root.rows[].columns[] --></span> <span class="pl-kos"><</span><span class="pl-ent">td</span><span class="pl-kos">></span>{{ data.value }}<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">tr</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">table</span><span class="pl-kos">></span></pre></div> <p dir="auto">If you need the root data element within nested templates then just assign the data to the <code>state</code> or pass a temporary state object as 2nd parameter by simply using <code>.render(data, data)</code>. Now you can access the root data element via <code>state</code> through all the template scopes.</p> <p dir="auto"><a name="user-content-callbacks"></a></p> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Custom Callbacks</h2><a id="user-content-custom-callbacks" class="anchor" aria-label="Permalink: Custom Callbacks" href="#custom-callbacks"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <blockquote> <p dir="auto">The 2nd parameter <code>view</code> of custom callbacks points to the Mikado view instance.</p> </blockquote> <p dir="auto">Define custom callbacks during initialization:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var view = new Mikado(template, { on: { create: function(node, view) { console.log("created:", node); }, recycle: function(node, view) { console.log("recycled:", node); }, insert: function(node, view) { console.log("inserted:", node); }, update: function(node, view) { console.log("updated:", node); }, replace: function(node, view) { console.log("replaced:", node); }, remove: function(node, view) { console.log("removed:", node); }, mount: function(root, view) { console.log("mounted:", root); }, unmount: function(root, view) { console.log("unmounted:", root); } } });"><pre><span class="pl-k">var</span> <span class="pl-s1">view</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">Mikado</span><span class="pl-kos">(</span><span class="pl-s1">template</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">on</span>: <span class="pl-kos">{</span> <span class="pl-en">create</span>: <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">,</span> <span class="pl-s1">view</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">"created:"</span><span class="pl-kos">,</span> <span class="pl-s1">node</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-en">recycle</span>: <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">,</span> <span class="pl-s1">view</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">"recycled:"</span><span class="pl-kos">,</span> <span class="pl-s1">node</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-en">insert</span>: <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">,</span> <span class="pl-s1">view</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">"inserted:"</span><span class="pl-kos">,</span> <span class="pl-s1">node</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-en">update</span>: <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">,</span> <span class="pl-s1">view</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">"updated:"</span><span class="pl-kos">,</span> <span class="pl-s1">node</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-en">replace</span>: <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">,</span> <span class="pl-s1">view</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">"replaced:"</span><span class="pl-kos">,</span> <span class="pl-s1">node</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-en">remove</span>: <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">,</span> <span class="pl-s1">view</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">"removed:"</span><span class="pl-kos">,</span> <span class="pl-s1">node</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-en">mount</span>: <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">root</span><span class="pl-kos">,</span> <span class="pl-s1">view</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">"mounted:"</span><span class="pl-kos">,</span> <span class="pl-s1">root</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-en">unmount</span>: <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">root</span><span class="pl-kos">,</span> <span class="pl-s1">view</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">"unmounted:"</span><span class="pl-kos">,</span> <span class="pl-s1">root</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <markdown-accessiblity-table><table> <tbody><tr></tr> <tr> <td>Callback</td> <td>Description</td> </tr> <tr> <td>create</td> <td>Called when a new template node was created (not recycled).</td> </tr> <tr></tr> <tr> <td>recycle</td> <td>Called when a template node was recycled instead of created.</td> </tr> <tr></tr> <tr> <td>insert</td> <td>Called when a template node was inserted into DOM.</td> </tr> <tr></tr> <tr> <td>update</td> <td>Called when a template node was updated.</td> </tr> <tr></tr> <tr> <td>replace</td> <td>Called when a template node was replaced ny another template node.</td> </tr> <tr></tr> <tr> <td>remove</td> <td>Called when a template node was removed.</td> </tr> </tbody></table></markdown-accessiblity-table> <p dir="auto"><a name="user-content-static"></a></p> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Static Templates</h2><a id="user-content-static-templates" class="anchor" aria-label="Permalink: Static Templates" href="#static-templates"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">When a template has no dynamic expressions (within curly brackets) which needs to be evaluated during runtime Mikado will handle those templates as <em>static</em> and skips the dynamic render part. You can render static views without passing data.</p> <p dir="auto"><a name="user-content-mikado.once"></a></p> <div class="markdown-heading" dir="auto"><h4 tabindex="-1" class="heading-element" dir="auto">Once (One-time rendering)</h4><a id="user-content-once-one-time-rendering" class="anchor" aria-label="Permalink: Once (One-time rendering)" href="#once-one-time-rendering"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">When a template just needs to be rendered once you can theoretically create, mount, render and destroy as follows:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Mikado(template) .mount(root) .render() .destroy();"><pre><span class="pl-v">Mikado</span><span class="pl-kos">(</span><span class="pl-s1">template</span><span class="pl-kos">)</span> <span class="pl-kos">.</span><span class="pl-en">mount</span><span class="pl-kos">(</span><span class="pl-s1">root</span><span class="pl-kos">)</span> <span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">.</span><span class="pl-en">destroy</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">You can also simply use a shorthand function:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// static views doesn't require data Mikado.once(root, template);"><pre><span class="pl-c">// static views doesn't require data</span> <span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">once</span><span class="pl-kos">(</span><span class="pl-s1">root</span><span class="pl-kos">,</span> <span class="pl-s1">template</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// if the view has dynamic contents just pass data Mikado.once(root, template, data); // full example by also using async callback Mikado.once(root, template, data, state, callback);"><pre><span class="pl-c">// if the view has dynamic contents just pass data</span> <span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">once</span><span class="pl-kos">(</span><span class="pl-s1">root</span><span class="pl-kos">,</span> <span class="pl-s1">template</span><span class="pl-kos">,</span> <span class="pl-s1">data</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// full example by also using async callback</span> <span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">once</span><span class="pl-kos">(</span><span class="pl-s1">root</span><span class="pl-kos">,</span> <span class="pl-s1">template</span><span class="pl-kos">,</span> <span class="pl-s1">data</span><span class="pl-kos">,</span> <span class="pl-s1">state</span><span class="pl-kos">,</span> <span class="pl-s1">callback</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">There is one important advantage when using <code>once</code> over <code>render</code>. It will always append to the root without mounting:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Mikado.once(document.body, template);"><pre><span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">once</span><span class="pl-kos">(</span><span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-c1">body</span><span class="pl-kos">,</span> <span class="pl-s1">template</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">When using <code>render</code> instead you probably can't do that, because it needs mounting and <code>document.body</code> isn't a root which just includes elements from the same template. So using <code>Mikado.once</code> is great when initializing your app and building the shape of the DOM layout.</p> <p dir="auto">If a view was destroyed you will need to create the Mikado instance again when re-using.</p> <p dir="auto"><a name="user-content-ssr"></a></p> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Server-Side Rendering (SSR)</h2><a id="user-content-server-side-rendering-ssr" class="anchor" aria-label="Permalink: Server-Side Rendering (SSR)" href="#server-side-rendering-ssr"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Just use the same template syntax (or same source files also served for the client).</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const mikado = require("mikado/ssr"); const view = await mikado.compile("view/start.html", { compression: true, debug: false, cache: 200 }); // render the html markup const html = view.render([{ /* data */ }]); // send the html to the client, e.g.: res.send(html);"><pre><span class="pl-k">const</span> <span class="pl-s1">mikado</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"mikado/ssr"</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-k">const</span> <span class="pl-s1">view</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-s1">mikado</span><span class="pl-kos">.</span><span class="pl-en">compile</span><span class="pl-kos">(</span><span class="pl-s">"view/start.html"</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">compression</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span> <span class="pl-c1">debug</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span> <span class="pl-c1">cache</span>: <span class="pl-c1">200</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// render the html markup</span> <span class="pl-k">const</span> <span class="pl-s1">html</span> <span class="pl-c1">=</span> <span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">[</span><span class="pl-kos">{</span> <span class="pl-c">/* data */</span> <span class="pl-kos">}</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// send the html to the client, e.g.:</span> <span class="pl-s1">res</span><span class="pl-kos">.</span><span class="pl-en">send</span><span class="pl-kos">(</span><span class="pl-s1">html</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Supported Options (mixable):</p> <ul dir="auto"> <li><code>compression</code> minify the html markup (true/false)</li> <li><code>debug</code> when enabled it compiles the template on every render, good for development environments (true/false)</li> <li><code>cache</code> sets the size of the encoder-cache (true/false/number)</li> <li><code>csr</code> when set to "false" it fully unlocks template restrictions applied by the support of client-side-rendering</li> </ul> <p dir="auto"><a name="user-content-ssr-exclusive"></a></p> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">SSR-exclusive Mode</h3><a id="user-content-ssr-exclusive-mode" class="anchor" aria-label="Permalink: SSR-exclusive Mode" href="#ssr-exclusive-mode"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">By explicitly setting the option <code>csr</code> to "false" you can switch into SSR-exclusive mode where the limitation of having one outer element as the template root is unlocked, also there is an <code>extract</code> directive to place logical placeholder elements, which will be self-extracted when rendered.</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const mikado = require("mikado/ssr"); const view = await mikado.compile("view/start.html", { csr: false });"><pre><span class="pl-k">const</span> <span class="pl-s1">mikado</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"mikado/ssr"</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-k">const</span> <span class="pl-s1">view</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-s1">mikado</span><span class="pl-kos">.</span><span class="pl-en">compile</span><span class="pl-kos">(</span><span class="pl-s">"view/start.html"</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">csr</span>: <span class="pl-c1">false</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<div if="data.length" extract> <table foreach="data"> <tr> <td>1</td> </tr> <tr> <td>2</td> </tr> <tr> <td>3</td> </tr> </table> </div>"><pre><span class="pl-kos"><</span><span class="pl-ent">div</span> <span class="pl-c1">if</span>="<span class="pl-s">data.length</span>" <span class="pl-c1">extract</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">table</span> <span class="pl-c1">foreach</span>="<span class="pl-s">data</span>"<span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">tr</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">td</span><span class="pl-kos">></span>1<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">tr</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">tr</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">td</span><span class="pl-kos">></span>2<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">tr</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">tr</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">td</span><span class="pl-kos">></span>3<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">tr</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">table</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">div</span><span class="pl-kos">></span></pre></div> <blockquote> <p dir="auto">Those templates aren't supported by the client render engine, also you can't hydrate them.</p> </blockquote> <p dir="auto"><a name="user-content-express"></a></p> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Express Render Engine</h2><a id="user-content-express-render-engine" class="anchor" aria-label="Permalink: Express Render Engine" href="#express-render-engine"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const mikado = require("mikado/express"); const express = require("express"); const app = express(); // set path to your static views app.set("views", [ __dirname + "/view" // ... ]); // set path to your partial views (optional) app.set("partials", [ __dirname + "/partial" // ... ]); // register engine to filetype .html app.engine("html", mikado); // enable engine for filetype .html app.set("view engine", "html");"><pre><span class="pl-k">const</span> <span class="pl-s1">mikado</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"mikado/express"</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-k">const</span> <span class="pl-s1">express</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"express"</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-k">const</span> <span class="pl-s1">app</span> <span class="pl-c1">=</span> <span class="pl-s1">express</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// set path to your static views</span> <span class="pl-s1">app</span><span class="pl-kos">.</span><span class="pl-en">set</span><span class="pl-kos">(</span><span class="pl-s">"views"</span><span class="pl-kos">,</span> <span class="pl-kos">[</span> <span class="pl-s1">__dirname</span> <span class="pl-c1">+</span> <span class="pl-s">"/view"</span> <span class="pl-c">// ...</span> <span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// set path to your partial views (optional)</span> <span class="pl-s1">app</span><span class="pl-kos">.</span><span class="pl-en">set</span><span class="pl-kos">(</span><span class="pl-s">"partials"</span><span class="pl-kos">,</span> <span class="pl-kos">[</span> <span class="pl-s1">__dirname</span> <span class="pl-c1">+</span> <span class="pl-s">"/partial"</span> <span class="pl-c">// ...</span> <span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// register engine to filetype .html</span> <span class="pl-s1">app</span><span class="pl-kos">.</span><span class="pl-en">engine</span><span class="pl-kos">(</span><span class="pl-s">"html"</span><span class="pl-kos">,</span> <span class="pl-s1">mikado</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// enable engine for filetype .html</span> <span class="pl-s1">app</span><span class="pl-kos">.</span><span class="pl-en">set</span><span class="pl-kos">(</span><span class="pl-s">"view engine"</span><span class="pl-kos">,</span> <span class="pl-s">"html"</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-express-options"></a></p> <div class="markdown-heading" dir="auto"><h4 tabindex="-1" class="heading-element" dir="auto">Custom Options</h4><a id="user-content-custom-options" class="anchor" aria-label="Permalink: Custom Options" href="#custom-options"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">You can set options by Express <code>app.set</code>:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// enable compression (optional) app.set("view compression", true); // enable cache and set pool size (optional) app.set("view cache", 200); // set debug to false to enable compiler cache app.set("view debug", false);"><pre><span class="pl-c">// enable compression (optional)</span> <span class="pl-s1">app</span><span class="pl-kos">.</span><span class="pl-en">set</span><span class="pl-kos">(</span><span class="pl-s">"view compression"</span><span class="pl-kos">,</span> <span class="pl-c1">true</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// enable cache and set pool size (optional)</span> <span class="pl-s1">app</span><span class="pl-kos">.</span><span class="pl-en">set</span><span class="pl-kos">(</span><span class="pl-s">"view cache"</span><span class="pl-kos">,</span> <span class="pl-c1">200</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// set debug to false to enable compiler cache</span> <span class="pl-s1">app</span><span class="pl-kos">.</span><span class="pl-en">set</span><span class="pl-kos">(</span><span class="pl-s">"view debug"</span><span class="pl-kos">,</span> <span class="pl-c1">false</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Or you can specify options by <code>mikado.options</code> alternatively:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="mikado.options = { compression: true, cache: 200, debug: false };"><pre><span class="pl-s1">mikado</span><span class="pl-kos">.</span><span class="pl-c1">options</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span> <span class="pl-c1">compression</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span> <span class="pl-c1">cache</span>: <span class="pl-c1">200</span><span class="pl-kos">,</span> <span class="pl-c1">debug</span>: <span class="pl-c1">false</span> <span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-express-render"></a></p> <div class="markdown-heading" dir="auto"><h4 tabindex="-1" class="heading-element" dir="auto">Render Views</h4><a id="user-content-render-views" class="anchor" aria-label="Permalink: Render Views" href="#render-views"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Register a route and render the file <code>./view/start.html</code>:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="app.get("/", function(req, res){ res.render("view/start", [{ /* data */ }]); });"><pre><span class="pl-s1">app</span><span class="pl-kos">.</span><span class="pl-en">get</span><span class="pl-kos">(</span><span class="pl-s">"/"</span><span class="pl-kos">,</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">req</span><span class="pl-kos">,</span> <span class="pl-s1">res</span><span class="pl-kos">)</span><span class="pl-kos">{</span> <span class="pl-s1">res</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-s">"view/start"</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-kos">{</span> <span class="pl-c">/* data */</span> <span class="pl-kos">}</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-includes"></a></p> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Includes</h2><a id="user-content-includes" class="anchor" aria-label="Permalink: Includes" href="#includes"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Partials gets its own instance under the hood. This performance gain also makes a template factory re-usable when the same partials are shared across different views.</p> <blockquote> <p dir="auto">Be aware of circular includes. A partial cannot include itself or somewhere later in its own chain.</p> </blockquote> <p dir="auto">Assume you've created one or more partial templates. Make sure each of the partial templates is providing one single root as the outer bound.</p> <p dir="auto">The file structure might look like:</p> <ul dir="auto"> <li><em>tpl/header.html</em></li> <li><em>tpl/article.html</em></li> <li><em>tpl/footer.html</em></li> </ul> <p dir="auto">You will need to compile the templates:</p> <div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="npx mikado-compile ./tpl/"><pre>npx mikado-compile ./tpl/</pre></div> <p dir="auto">You have to register all partial templates once <strong>before</strong> you initialize the templates which will including them:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import tpl_header from "./tpl/header.es6.js"; import tpl_article from "./tpl/article.es6.js"; import tpl_footer from "./tpl/footer.es6.js"; Mikado.register(tpl_header); Mikado.register(tpl_article); Mikado.register(tpl_footer);"><pre><span class="pl-k">import</span> <span class="pl-s1">tpl_header</span> <span class="pl-k">from</span> <span class="pl-s">"./tpl/header.es6.js"</span><span class="pl-kos">;</span> <span class="pl-k">import</span> <span class="pl-s1">tpl_article</span> <span class="pl-k">from</span> <span class="pl-s">"./tpl/article.es6.js"</span><span class="pl-kos">;</span> <span class="pl-k">import</span> <span class="pl-s1">tpl_footer</span> <span class="pl-k">from</span> <span class="pl-s">"./tpl/footer.es6.js"</span><span class="pl-kos">;</span> <span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">register</span><span class="pl-kos">(</span><span class="pl-s1">tpl_header</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">register</span><span class="pl-kos">(</span><span class="pl-s1">tpl_article</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">register</span><span class="pl-kos">(</span><span class="pl-s1">tpl_footer</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">When using templates in ES5 compatible format, they are automatically registered by default when loaded.</p> <p dir="auto">Include partial templates in another template <strong>tpl/section.html</strong>:</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<section> <header include="header"></header> <article include="article"></article> <footer include="footer"></footer> </section>"><pre><span class="pl-kos"><</span><span class="pl-ent">section</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">header</span> <span class="pl-c1">include</span>="<span class="pl-s">header</span>"<span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">header</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">article</span> <span class="pl-c1">include</span>="<span class="pl-s">article</span>"<span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">article</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">footer</span> <span class="pl-c1">include</span>="<span class="pl-s">footer</span>"<span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">footer</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">section</span><span class="pl-kos">></span></pre></div> <p dir="auto">The "section" from above could be also included by another one (and so on):</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<html> <body> <main foreach="data.sections" include="section"></main> </body> </html>"><pre><span class="pl-kos"><</span><span class="pl-ent">html</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">body</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">main</span> <span class="pl-c1">foreach</span>="<span class="pl-s">data.sections</span>" <span class="pl-c1">include</span>="<span class="pl-s">section</span>"<span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">main</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">body</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">html</span><span class="pl-kos">></span></pre></div> <p dir="auto"><a name="user-content-loop-partials"></a></p> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Loop Partials</h2><a id="user-content-loop-partials" class="anchor" aria-label="Permalink: Loop Partials" href="#loop-partials"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Assume the template example from above is a tweet (title, article, footer).</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<section> <title>{{ data.title }}</title> <tweets foreach="data.tweets" include="tweet"> <!-- tweet --> <!-- tweet --> <!-- tweet --> </tweets> </section>"><pre><span class="pl-kos"><</span><span class="pl-ent">section</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">title</span><span class="pl-kos">></span>{{ data.title }}<span class="pl-kos"></</span><span class="pl-ent">title</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">tweets</span> <span class="pl-c1">foreach</span>="<span class="pl-s">data.tweets</span>" <span class="pl-c1">include</span>="<span class="pl-s">tweet</span>"<span class="pl-kos">></span> <span class="pl-c"><!-- tweet --></span> <span class="pl-c"><!-- tweet --></span> <span class="pl-c"><!-- tweet --></span> <span class="pl-kos"></</span><span class="pl-ent">tweets</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">section</span><span class="pl-kos">></span></pre></div> <p dir="auto">This expression will render the template "tweet" through an array of data items/tweets. The template "tweet" is getting the array value <strong><em>data.tweets</em></strong> as <strong><em>data</em></strong>.</p> <p dir="auto">The <strong><em>limit</em></strong> and <strong><em>offset</em></strong> attributes could be used optionally to specify a custom portion of the partial loop:</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<tweets foreach="data.tweets" include="tweet" limit="5" offset="5"></tweets>"><pre><span class="pl-kos"><</span><span class="pl-ent">tweets</span> <span class="pl-c1">foreach</span>="<span class="pl-s">data.tweets</span>" <span class="pl-c1">include</span>="<span class="pl-s">tweet</span>" <span class="pl-c1">limit</span>="<span class="pl-s">5</span>" <span class="pl-c1">offset</span>="<span class="pl-s">5</span>"<span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">tweets</span><span class="pl-kos">></span></pre></div> <p dir="auto">The <strong><em>offset</em></strong> attribute could also be negative to reverse the boundary direction, e.g. loop through the last 5 items:</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<tweets foreach="data.tweets" include="tweet" limit="5" offset="-5"></tweets>"><pre><span class="pl-kos"><</span><span class="pl-ent">tweets</span> <span class="pl-c1">foreach</span>="<span class="pl-s">data.tweets</span>" <span class="pl-c1">include</span>="<span class="pl-s">tweet</span>" <span class="pl-c1">limit</span>="<span class="pl-s">5</span>" <span class="pl-c1">offset</span>="<span class="pl-s">-5</span>"<span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">tweets</span><span class="pl-kos">></span></pre></div> <p dir="auto"><a name="user-content-inline-loops"></a></p> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Inline Loops</h3><a id="user-content-inline-loops" class="anchor" aria-label="Permalink: Inline Loops" href="#inline-loops"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">You can also loop through an inline partial. Mikado will extract and referencing this partial to its own instance under the hood.</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<main> <title>{{ data.title }}</title> <tweets foreach="data.tweets"> <section> <header include="header"></header> <article include="article"></article> <footer include="footer"></footer> </section> </tweets> </main>"><pre><span class="pl-kos"><</span><span class="pl-ent">main</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">title</span><span class="pl-kos">></span>{{ data.title }}<span class="pl-kos"></</span><span class="pl-ent">title</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">tweets</span> <span class="pl-c1">foreach</span>="<span class="pl-s">data.tweets</span>"<span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">section</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">header</span> <span class="pl-c1">include</span>="<span class="pl-s">header</span>"<span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">header</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">article</span> <span class="pl-c1">include</span>="<span class="pl-s">article</span>"<span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">article</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">footer</span> <span class="pl-c1">include</span>="<span class="pl-s">footer</span>"<span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">footer</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">section</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">tweets</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">main</span><span class="pl-kos">></span></pre></div> <p dir="auto">You can also nest loops:</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<!-- root view --> <tweets foreach="data.tweets"> <!-- new partial template --> <tweet> <h1>{{ data.title }}</h1> <title>Comments:</title> <div foreach="data.comments"> <!-- new partial template --> <comment> <p>{{ data.content }}</p> <title>Replies:</title> <div foreach="data.replies"> <!-- new partial template --> <p>{{ data.content }}</p> </div> </comment> </div> </tweet> </tweets>"><pre><span class="pl-c"><!-- root view --></span> <span class="pl-kos"><</span><span class="pl-ent">tweets</span> <span class="pl-c1">foreach</span>="<span class="pl-s">data.tweets</span>"<span class="pl-kos">></span> <span class="pl-c"><!-- new partial template --></span> <span class="pl-kos"><</span><span class="pl-ent">tweet</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">h1</span><span class="pl-kos">></span>{{ data.title }}<span class="pl-kos"></</span><span class="pl-ent">h1</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">title</span><span class="pl-kos">></span>Comments:<span class="pl-kos"></</span><span class="pl-ent">title</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">div</span> <span class="pl-c1">foreach</span>="<span class="pl-s">data.comments</span>"<span class="pl-kos">></span> <span class="pl-c"><!-- new partial template --></span> <span class="pl-kos"><</span><span class="pl-ent">comment</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">p</span><span class="pl-kos">></span>{{ data.content }}<span class="pl-kos"></</span><span class="pl-ent">p</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">title</span><span class="pl-kos">></span>Replies:<span class="pl-kos"></</span><span class="pl-ent">title</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">div</span> <span class="pl-c1">foreach</span>="<span class="pl-s">data.replies</span>"<span class="pl-kos">></span> <span class="pl-c"><!-- new partial template --></span> <span class="pl-kos"><</span><span class="pl-ent">p</span><span class="pl-kos">></span>{{ data.content }}<span class="pl-kos"></</span><span class="pl-ent">p</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">div</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">comment</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">div</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">tweet</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">tweets</span><span class="pl-kos">></span></pre></div> <blockquote> <p dir="auto">Every looped partial has to provide <strong>one single element root</strong> as the outer bound.</p> </blockquote> <p dir="auto">In this example every foreach-expression is wrong (you will find the right example above):</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<tweets foreach="data.tweets"> <!-- no outer bound! --> <h1>{{ data.title }}</h1> <title>Comments:</title> <div foreach="data.comments"> <!-- no outer bound! --> <p>{{ data.content }}</p> <title>Replies:</title> <div foreach="data.replies"> <!-- no outer bound! --> {{ data.content }} </div> </div> </tweets>"><pre><span class="pl-kos"><</span><span class="pl-ent">tweets</span> <span class="pl-c1">foreach</span>="<span class="pl-s">data.tweets</span>"<span class="pl-kos">></span> <span class="pl-c"><!-- no outer bound! --></span> <span class="pl-kos"><</span><span class="pl-ent">h1</span><span class="pl-kos">></span>{{ data.title }}<span class="pl-kos"></</span><span class="pl-ent">h1</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">title</span><span class="pl-kos">></span>Comments:<span class="pl-kos"></</span><span class="pl-ent">title</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">div</span> <span class="pl-c1">foreach</span>="<span class="pl-s">data.comments</span>"<span class="pl-kos">></span> <span class="pl-c"><!-- no outer bound! --></span> <span class="pl-kos"><</span><span class="pl-ent">p</span><span class="pl-kos">></span>{{ data.content }}<span class="pl-kos"></</span><span class="pl-ent">p</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">title</span><span class="pl-kos">></span>Replies:<span class="pl-kos"></</span><span class="pl-ent">title</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">div</span> <span class="pl-c1">foreach</span>="<span class="pl-s">data.replies</span>"<span class="pl-kos">></span> <span class="pl-c"><!-- no outer bound! --></span> {{ data.content }} <span class="pl-kos"></</span><span class="pl-ent">div</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">div</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">tweets</span><span class="pl-kos">></span></pre></div> <p dir="auto"><a name="user-content-conditional" id="user-content-conditional"></a></p> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Conditional Template Structures</h2><a id="user-content-conditional-template-structures" class="anchor" aria-label="Permalink: Conditional Template Structures" href="#conditional-template-structures"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<main> <title if="data.tweet.length">Tweets: {{ data.tweet.length }}</title> <title if="!data.tweet.length">No tweets found.</title> </main>"><pre><span class="pl-kos"><</span><span class="pl-ent">main</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">title</span> <span class="pl-c1">if</span>="<span class="pl-s">data.tweet.length</span>"<span class="pl-kos">></span>Tweets: {{ data.tweet.length }}<span class="pl-kos"></</span><span class="pl-ent">title</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">title</span> <span class="pl-c1">if</span>="<span class="pl-s">!data.tweet.length</span>"<span class="pl-kos">></span>No tweets found.<span class="pl-kos"></</span><span class="pl-ent">title</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">main</span><span class="pl-kos">></span></pre></div> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<main> <title>{{ data.title }}</title> <tweets if="data.tweets.length" foreach="data.tweets"> <section>{{ data.content }}</section> </tweets> </main>"><pre><span class="pl-kos"><</span><span class="pl-ent">main</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">title</span><span class="pl-kos">></span>{{ data.title }}<span class="pl-kos"></</span><span class="pl-ent">title</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">tweets</span> <span class="pl-c1">if</span>="<span class="pl-s">data.tweets.length</span>" <span class="pl-c1">foreach</span>="<span class="pl-s">data.tweets</span>"<span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">section</span><span class="pl-kos">></span>{{ data.content }}<span class="pl-kos"></</span><span class="pl-ent">section</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">tweets</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">main</span><span class="pl-kos">></span></pre></div> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<main> <title>{{ data.title }}</title> <tweets foreach="data.tweets"> <section if="data.content">{{ data.content }}</section> </tweets> </main>"><pre><span class="pl-kos"><</span><span class="pl-ent">main</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">title</span><span class="pl-kos">></span>{{ data.title }}<span class="pl-kos"></</span><span class="pl-ent">title</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">tweets</span> <span class="pl-c1">foreach</span>="<span class="pl-s">data.tweets</span>"<span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">section</span> <span class="pl-c1">if</span>="<span class="pl-s">data.content</span>"<span class="pl-kos">></span>{{ data.content }}<span class="pl-kos"></</span><span class="pl-ent">section</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">tweets</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">main</span><span class="pl-kos">></span></pre></div> <p dir="auto">Think in real code branches, instead of doing this:</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<main> {{@ var result = (function(){ return "some big computation"; }()) }} <section if="data.content">{{ result }}</section> </main>"><pre><span class="pl-kos"><</span><span class="pl-ent">main</span><span class="pl-kos">></span> {{@ var result = (function(){ return "some big computation"; }()) }} <span class="pl-kos"><</span><span class="pl-ent">section</span> <span class="pl-c1">if</span>="<span class="pl-s">data.content</span>"<span class="pl-kos">></span>{{ result }}<span class="pl-kos"></</span><span class="pl-ent">section</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">main</span><span class="pl-kos">></span></pre></div> <p dir="auto">Doing this:</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<main> <section if="data.content"> {{ (function(){ return "some big computation"; }()) }} </section> </main>"><pre><span class="pl-kos"><</span><span class="pl-ent">main</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">section</span> <span class="pl-c1">if</span>="<span class="pl-s">data.content</span>"<span class="pl-kos">></span> {{ (function(){ return "some big computation"; }()) }} <span class="pl-kos"></</span><span class="pl-ent">section</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">main</span><span class="pl-kos">></span></pre></div> <blockquote> <p dir="auto">Conditional branches will skip their expressions inside when not taken.</p> </blockquote> <p dir="auto">Also, try to assign computations outside a loop by using the state to delegate values to the scope of the partial loop:</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<main> {{@ state.result = (function(){ return "some big computation"; }()) }} <tweets foreach="data.tweets"> <section>{{ state.result }}</section> </tweets> </main>"><pre><span class="pl-kos"><</span><span class="pl-ent">main</span><span class="pl-kos">></span> {{@ state.result = (function(){ return "some big computation"; }()) }} <span class="pl-kos"><</span><span class="pl-ent">tweets</span> <span class="pl-c1">foreach</span>="<span class="pl-s">data.tweets</span>"<span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">section</span><span class="pl-kos">></span>{{ state.result }}<span class="pl-kos"></</span><span class="pl-ent">section</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">tweets</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">main</span><span class="pl-kos">></span></pre></div> <p dir="auto"><a name="user-content-proxy" id="user-content-proxy"></a></p> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Reactive Properties (Proxy)</h2><a id="user-content-reactive-properties-proxy" class="anchor" aria-label="Permalink: Reactive Properties (Proxy)" href="#reactive-properties-proxy"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Mikado provides you a reactive approach to listen for changes to the data and apply them accordingly to the DOM. It is based on native Proxy feature which has great performance, a small memory footprint and fully falls back to a legacy observer when Proxy is not available. Using a reactive strategy can additionally boost performance beyond a factor of 100 when updating specific data instead of leverage a full render task. It depends on your application or current view, this feature has an advantage when updating data <strong>partially</strong> has to process more often than full data updates.</p> <p dir="auto"><strong>Template markup</strong>:</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<table> <tr> <td>Name:</td> <td>{{= data.name }}</td> </tr> <tr> <td>Email:</td> <td>{{= data.email }}</td> </tr> </table>"><pre><span class="pl-kos"><</span><span class="pl-ent">table</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">tr</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">td</span><span class="pl-kos">></span>Name:<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">td</span><span class="pl-kos">></span>{{= data.name }}<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">tr</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">tr</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">td</span><span class="pl-kos">></span>Email:<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">td</span><span class="pl-kos">></span>{{= data.email }}<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">tr</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">table</span><span class="pl-kos">></span></pre></div> <blockquote> <p dir="auto">The expression for an observable property uses this syntax: <code>{{=</code>. You can combine with other expressions, but should be defined at least, e.g. <code>{{#=</code> or <code>{{!=</code> or <code>{{?=</code>.</p> </blockquote> <blockquote> <p dir="auto">You can't use any Javascript code inside reactive expressions, just the full data scope of the value is allowed to specify within those expressions.</p> </blockquote> <p dir="auto">When using reactive properties you'll need to manage a store (could be a simple Array) which gets proxified under the hood.</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// store must be an array of elements: const store = [/* Array of objects */]; // create, mount and initial render the store by using // a template which has reactive properties included Mikado(template).mount(root).render(store); // the store now has proxified item properties! // do not throw it away, instead apply updates on it store[0].name = "John Doe"; store[0].email = "john@doe.com"; // when data changes, the corresponding DOM elements // will automatically change also"><pre><span class="pl-c">// store must be an array of elements:</span> <span class="pl-k">const</span> <span class="pl-s1">store</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span><span class="pl-c">/* Array of objects */</span><span class="pl-kos">]</span><span class="pl-kos">;</span> <span class="pl-c">// create, mount and initial render the store by using</span> <span class="pl-c">// a template which has reactive properties included</span> <span class="pl-v">Mikado</span><span class="pl-kos">(</span><span class="pl-s1">template</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">mount</span><span class="pl-kos">(</span><span class="pl-s1">root</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-s1">store</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// the store now has proxified item properties!</span> <span class="pl-c">// do not throw it away, instead apply updates on it</span> <span class="pl-s1">store</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-c1">name</span> <span class="pl-c1">=</span> <span class="pl-s">"John Doe"</span><span class="pl-kos">;</span> <span class="pl-s1">store</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-c1">email</span> <span class="pl-c1">=</span> <span class="pl-s">"john@doe.com"</span><span class="pl-kos">;</span> <span class="pl-c">// when data changes, the corresponding DOM elements</span> <span class="pl-c">// will automatically change also</span></pre></div> <blockquote> <p dir="auto">The data store must be an Array of elements, also when just having one item. Because the array index reference gets proxified, that's why you can't pass a single object.</p> </blockquote> <p dir="auto">If you just have a single data item, and you don't like the array index access you can also define a reference, but you need to do this after initially calling <code>render</code>:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const store = [{ class: "active", value: "foo" }]; // the store isn't proxified const test = store[0]; // initial render view.render(store); // the store array now was proxified! const item = store[0]; // these objects aren't the same anymore console.log(test === item); // false // nothing will change on screen: test.value = "bar"; // this works properly item.value = "bar";"><pre><span class="pl-k">const</span> <span class="pl-s1">store</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span><span class="pl-kos">{</span> <span class="pl-c1">class</span>: <span class="pl-s">"active"</span><span class="pl-kos">,</span> <span class="pl-c1">value</span>: <span class="pl-s">"foo"</span> <span class="pl-kos">}</span><span class="pl-kos">]</span><span class="pl-kos">;</span> <span class="pl-c">// the store isn't proxified</span> <span class="pl-k">const</span> <span class="pl-s1">test</span> <span class="pl-c1">=</span> <span class="pl-s1">store</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span><span class="pl-kos">;</span> <span class="pl-c">// initial render</span> <span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-s1">store</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// the store array now was proxified!</span> <span class="pl-k">const</span> <span class="pl-s1">item</span> <span class="pl-c1">=</span> <span class="pl-s1">store</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span><span class="pl-kos">;</span> <span class="pl-c">// these objects aren't the same anymore</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">test</span> <span class="pl-c1">===</span> <span class="pl-s1">item</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// false</span> <span class="pl-c">// nothing will change on screen:</span> <span class="pl-s1">test</span><span class="pl-kos">.</span><span class="pl-c1">value</span> <span class="pl-c1">=</span> <span class="pl-s">"bar"</span><span class="pl-kos">;</span> <span class="pl-c">// this works properly</span> <span class="pl-s1">item</span><span class="pl-kos">.</span><span class="pl-c1">value</span> <span class="pl-c1">=</span> <span class="pl-s">"bar"</span><span class="pl-kos">;</span></pre></div> <p dir="auto">On the upper example nothing on the DOM will change when you set the values <code>test.value = "bar"</code>, because this reference holds the un-proxified original version. Set <code>item.value = "bar"</code> will work properly.</p> <p dir="auto"><a name="user-content-limitations"></a></p> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Limitations</h3><a id="user-content-limitations" class="anchor" aria-label="Permalink: Limitations" href="#limitations"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Actually there are some limitations on template expressions.</p> <p dir="auto">1. Fields from deeply nested data objects are not reactive:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var data = { id: "foobar", // <-- observable content: { // <-- observable title: "title", // <-- NOT body: "body", // <-- NOT footer: "footer" // <-- NOT } };"><pre><span class="pl-k">var</span> <span class="pl-s1">data</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span> <span class="pl-c1">id</span>: <span class="pl-s">"foobar"</span><span class="pl-kos">,</span> <span class="pl-c">// <-- observable</span> <span class="pl-c1">content</span>: <span class="pl-kos">{</span> <span class="pl-c">// <-- observable</span> <span class="pl-c1">title</span>: <span class="pl-s">"title"</span><span class="pl-kos">,</span> <span class="pl-c">// <-- NOT</span> <span class="pl-c1">body</span>: <span class="pl-s">"body"</span><span class="pl-kos">,</span> <span class="pl-c">// <-- NOT</span> <span class="pl-c1">footer</span>: <span class="pl-s">"footer"</span> <span class="pl-c">// <-- NOT</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div> <p dir="auto">2. Template expressions including any kind of Javascript syntax are not supported:</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<table> <tr> <td>Name:</td> <!-- Supported: --> <td>{{= data.name }}</td> </tr> <tr> <td>Tweets:</td> <!-- Not Supported: --> <td>{{= data.tweets ? data.tweets.length : 0 }}</td> </tr> </table>"><pre><span class="pl-kos"><</span><span class="pl-ent">table</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">tr</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">td</span><span class="pl-kos">></span>Name:<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-c"><!-- Supported: --></span> <span class="pl-kos"><</span><span class="pl-ent">td</span><span class="pl-kos">></span>{{= data.name }}<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">tr</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">tr</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">td</span><span class="pl-kos">></span>Tweets:<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-c"><!-- Not Supported: --></span> <span class="pl-kos"><</span><span class="pl-ent">td</span><span class="pl-kos">></span>{{= data.tweets ? data.tweets.length : 0 }}<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">tr</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">table</span><span class="pl-kos">></span></pre></div> <p dir="auto">Just use plain property notation within the curly brackets.</p> <p dir="auto"><a name="user-content-strict-proxy"></a></p> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Strict-Proxy Mode</h3><a id="user-content-strict-proxy-mode" class="anchor" aria-label="Permalink: Strict-Proxy Mode" href="#strict-proxy-mode"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Whenever <strong>all</strong> your template expressions are just using proxy notation it enables a special "strict-proxy" mode under the hood, which further boosts performance from every update to a maximum. This mode has no advantage when every render loop has to apply almost new items.</p> <p dir="auto">This enables "strict-proxy" mode:</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<item> <caption> Name: </caption> <p>{{= data.name }}</p> <caption> Email: </caption> <p>{{= data.mail }}</p> </item>"><pre><span class="pl-kos"><</span><span class="pl-ent">item</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">caption</span><span class="pl-kos">></span> Name: <span class="pl-kos"></</span><span class="pl-ent">caption</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">p</span><span class="pl-kos">></span>{{= data.name }}<span class="pl-kos"></</span><span class="pl-ent">p</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">caption</span><span class="pl-kos">></span> Email: <span class="pl-kos"></</span><span class="pl-ent">caption</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">p</span><span class="pl-kos">></span>{{= data.mail }}<span class="pl-kos"></</span><span class="pl-ent">p</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">item</span><span class="pl-kos">></span></pre></div> <p dir="auto">This won't enable it:</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<item> <caption> Name: </caption> <p>{{= data.name }}</p> <caption> Email: </caption> <p>{{ data.mail }}</p> </item>"><pre><span class="pl-kos"><</span><span class="pl-ent">item</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">caption</span><span class="pl-kos">></span> Name: <span class="pl-kos"></</span><span class="pl-ent">caption</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">p</span><span class="pl-kos">></span>{{= data.name }}<span class="pl-kos"></</span><span class="pl-ent">p</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">caption</span><span class="pl-kos">></span> Email: <span class="pl-kos"></</span><span class="pl-ent">caption</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">p</span><span class="pl-kos">></span>{{ data.mail }}<span class="pl-kos"></</span><span class="pl-ent">p</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">item</span><span class="pl-kos">></span></pre></div> <p dir="auto">Also using conditionals, includes, loops and inline Javascript will prevent switching to the "strict-proxy" mode. You can't switch this mode by yourself. It just activates when conditions are met.</p> <p dir="auto"><a name="user-content-observable"></a></p> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Observable Array (Virtual NodeList)</h3><a id="user-content-observable-array-virtual-nodelist" class="anchor" aria-label="Permalink: Observable Array (Virtual NodeList)" href="#observable-array-virtual-nodelist"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">In addition to react on changes of property values you can additionally also listen to changes made to the Array index of the store. Mikado provides you an observable Array that acts like a native Array and apply all changes to a synchronized NodeList under the hood. It also uses native Proxy which fully falls back to a legacy observer, when not available.</p> <blockquote> <p dir="auto">Semantically the observable array you will get from <code>Mikado.Array()</code> is equal to an array-like Javascript Array.</p> </blockquote> <p dir="auto"><a name="user-content-mikado.array"></a></p> <p dir="auto">Create an observable array:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var store = new Mikado.Array();"><pre><span class="pl-k">var</span> <span class="pl-s1">store</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-c1">Array</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Create an observable array with initial data:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var items = [ ... ]; var store = new Mikado.Array(items);"><pre><span class="pl-k">var</span> <span class="pl-s1">items</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span> ... <span class="pl-kos">]</span><span class="pl-kos">;</span> <span class="pl-k">var</span> <span class="pl-s1">store</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-c1">Array</span><span class="pl-kos">(</span><span class="pl-s1">items</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Every observable array requires binding to a <strong>mounted</strong> Mikado instance, because it needs to apply render tasks somewhere:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var view = Mikado(template, { observe: store, mount: root });"><pre><span class="pl-k">var</span> <span class="pl-s1">view</span> <span class="pl-c1">=</span> <span class="pl-v">Mikado</span><span class="pl-kos">(</span><span class="pl-s1">template</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">observe</span>: <span class="pl-s1">store</span><span class="pl-kos">,</span> <span class="pl-c1">mount</span>: <span class="pl-s1">root</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-array.mount"></a></p> <p dir="auto">You can also mount an observable array to a Mikado instance (and also switch mounting):</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const store = new Mikado.Array(); const view = Mikado(template, { mount: root }); store.mount(view);"><pre><span class="pl-k">const</span> <span class="pl-s1">store</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-c1">Array</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-k">const</span> <span class="pl-s1">view</span> <span class="pl-c1">=</span> <span class="pl-v">Mikado</span><span class="pl-kos">(</span><span class="pl-s1">template</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">mount</span>: <span class="pl-s1">root</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-s1">store</span><span class="pl-kos">.</span><span class="pl-en">mount</span><span class="pl-kos">(</span><span class="pl-s1">view</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Now the observable array is linked with your instance. Whenever you change the array all changes will apply automatically to the corresponding DOM components.</p> <p dir="auto">You can use all common array built-ins, e.g.:</p> <p dir="auto"><a name="user-content-array.push"></a></p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="store.push({ ... });"><pre><span class="pl-s1">store</span><span class="pl-kos">.</span><span class="pl-en">push</span><span class="pl-kos">(</span><span class="pl-kos">{</span> ... <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-array.pop"></a></p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var last = store.pop();"><pre><span class="pl-k">var</span> <span class="pl-s1">last</span> <span class="pl-c1">=</span> <span class="pl-s1">store</span><span class="pl-kos">.</span><span class="pl-en">pop</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-array.unshift"></a></p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="store.unshift({ ... });"><pre><span class="pl-s1">store</span><span class="pl-kos">.</span><span class="pl-en">unshift</span><span class="pl-kos">(</span><span class="pl-kos">{</span> ... <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-array.shift"></a></p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var first = store.shift();"><pre><span class="pl-k">var</span> <span class="pl-s1">first</span> <span class="pl-c1">=</span> <span class="pl-s1">store</span><span class="pl-kos">.</span><span class="pl-en">shift</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-array.slice"></a></p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="store.slice(3, 1);"><pre><span class="pl-s1">store</span><span class="pl-kos">.</span><span class="pl-en">slice</span><span class="pl-kos">(</span><span class="pl-c1">3</span><span class="pl-kos">,</span> <span class="pl-c1">1</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-array.splice"></a></p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="store.splice(0, 1, { ... });"><pre><span class="pl-s1">store</span><span class="pl-kos">.</span><span class="pl-en">splice</span><span class="pl-kos">(</span><span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-c1">1</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> ... <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">You can <strong>get and set via array index access</strong>. This feature also has a non-proxy fallback included.</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="store[0] = { ... };"><pre><span class="pl-s1">store</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span> ... <span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="store[store.length] = { ... };"><pre><span class="pl-s1">store</span><span class="pl-kos">[</span><span class="pl-s1">store</span><span class="pl-kos">.</span><span class="pl-c1">length</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span> ... <span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var first = store[0];"><pre><span class="pl-k">var</span> <span class="pl-s1">first</span> <span class="pl-c1">=</span> <span class="pl-s1">store</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-array.set"></a></p> <p dir="auto">You can replace the array contents by:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var items = [ ... ]; store.set(items);"><pre><span class="pl-k">var</span> <span class="pl-s1">items</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span> ... <span class="pl-kos">]</span><span class="pl-kos">;</span> <span class="pl-s1">store</span><span class="pl-kos">.</span><span class="pl-en">set</span><span class="pl-kos">(</span><span class="pl-s1">items</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">This is recommended instead of pushing each item one by one, <code>store.set</code> will also handle keyed reconciliation.</p> <p dir="auto"><a name="user-content-array.concat"></a> <a name="user-content-array.indexof"></a> <a name="user-content-array.lastindexof"></a> <a name="user-content-array.includes"></a> <a name="user-content-array.filter"></a> <a name="user-content-array.map"></a> <a name="user-content-array.reverse"></a> <a name="user-content-array.sort"></a> <a name="user-content-array.swap"></a> <a name="user-content-array.foreach"></a></p> <p dir="auto">A list of all supported array prototypes:</p> <ul dir="auto"> <li>length</li> <li>push(obj)</li> <li>pop()</li> <li>shift(obj)</li> <li>unshift(obj)</li> <li>slice(index, count)</li> <li>splice(index, count, insert)</li> <li>concat(arr)</li> <li>indexOf(obj)</li> <li>lastIndexOf(obj)</li> <li>includes(obj)</li> <li>filter(fn)</li> <li>map(fn)</li> <li>reverse()</li> <li>sort(fn)</li> <li>swap(a, b)</li> <li>forEach(fn)</li> <li>set(arr) (used to replace the array contents)</li> </ul> <p dir="auto">These methods are implemented without some extensions like parameter chaining, e.g. <code>array.push(a, b, c)</code> is not available, instead, you have to call push for each item one by one.</p> <p dir="auto">There are some methods which slightly differs from the original implementation of native Arrays. The following methods will apply changes <strong><em>in place</em></strong> and returning the original reference instead of making a copy:</p> <ul dir="auto"> <li>concat</li> <li>filter</li> <li>map</li> </ul> <p dir="auto">Whenever you need the original native Array behavior including all extensions and variants you can simply do that by:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const new_array = [ ... ]; const copy = Array.prototype.concat.call(store, new_array);"><pre><span class="pl-k">const</span> <span class="pl-s1">new_array</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span> ... <span class="pl-kos">]</span><span class="pl-kos">;</span> <span class="pl-k">const</span> <span class="pl-s1">copy</span> <span class="pl-c1">=</span> <span class="pl-v">Array</span><span class="pl-kos">.</span><span class="pl-c1">prototype</span><span class="pl-kos">.</span><span class="pl-c1">concat</span><span class="pl-kos">.</span><span class="pl-en">call</span><span class="pl-kos">(</span><span class="pl-s1">store</span><span class="pl-kos">,</span> <span class="pl-s1">new_array</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const copy = Array.prototype.map.call(store, obj => obj);"><pre><span class="pl-k">const</span> <span class="pl-s1">copy</span> <span class="pl-c1">=</span> <span class="pl-v">Array</span><span class="pl-kos">.</span><span class="pl-c1">prototype</span><span class="pl-kos">.</span><span class="pl-c1">map</span><span class="pl-kos">.</span><span class="pl-en">call</span><span class="pl-kos">(</span><span class="pl-s1">store</span><span class="pl-kos">,</span> <span class="pl-s1">obj</span> <span class="pl-c1">=></span> <span class="pl-s1">obj</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">In a situation when falling back to the non-proxy polyfill because of missing support for native Proxy, there is a limitation. You cannot fill sparse arrays or access indexes which are greater than the current <code>array.length</code>. There is just one undefined index that could always access (by read/write) that is the last "undefined" index on an array when you call <code>array[array.length]</code>. This index is a special marker that increases the "virtual" array size. Whenever you assign a value to this special index the size of the observable index growth automatically and the next "undefined" index in the queue becomes this marker. This limitation is not existing when the ES6 proxy is available.</p> <p dir="auto">Also, there are some divergent characteristics when using reflection:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var store = Mikado.Array(); console.log(store.constructor === Array); // -> false console.log(store.prototype === Array.prototype); // -> false console.log(store instanceof Array); // -> false console.log(Array.isArray(store)); // -> false console.log(store instanceof Mikado.Array); // -> true"><pre><span class="pl-k">var</span> <span class="pl-s1">store</span> <span class="pl-c1">=</span> <span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">Array</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">store</span><span class="pl-kos">.</span><span class="pl-c1">constructor</span> <span class="pl-c1">===</span> <span class="pl-v">Array</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// -> false</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">store</span><span class="pl-kos">.</span><span class="pl-c1">prototype</span> <span class="pl-c1">===</span> <span class="pl-v">Array</span><span class="pl-kos">.</span><span class="pl-c1">prototype</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// -> false</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">store</span> <span class="pl-k">instanceof</span> <span class="pl-v">Array</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// -> false</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-v">Array</span><span class="pl-kos">.</span><span class="pl-en">isArray</span><span class="pl-kos">(</span><span class="pl-s1">store</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// -> false</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">store</span> <span class="pl-k">instanceof</span> <span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-c1">Array</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// -> true</span></pre></div> <p dir="auto">The proxy feature theoretically allows all those checks but could not be used to keep the polyfill working in addition to sharing most of the same codebase. Alternatively you can use an <code>instanceof</code> check for identification.</p> <p dir="auto"><a name="user-content-array.transaction"></a></p> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Transactions</h3><a id="user-content-transactions" class="anchor" aria-label="Permalink: Transactions" href="#transactions"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Since the array observer apply all changes on the array index instantly to the DOM, reconciliation has no chance to run. For this purpose you can use the <code>store.transaction()</code> feature, which let you apply all changes within a function and commit them by taking reconciling into account.</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="store.transaction(function(){ // collect changes: store[0].title = "John"; store[12].class = "active"; store[10] = store.pop(); store[11] = store.shift(); }); // changes applied"><pre><span class="pl-s1">store</span><span class="pl-kos">.</span><span class="pl-en">transaction</span><span class="pl-kos">(</span><span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">{</span> <span class="pl-c">// collect changes:</span> <span class="pl-s1">store</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-c1">title</span> <span class="pl-c1">=</span> <span class="pl-s">"John"</span><span class="pl-kos">;</span> <span class="pl-s1">store</span><span class="pl-kos">[</span><span class="pl-c1">12</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-c1">class</span> <span class="pl-c1">=</span> <span class="pl-s">"active"</span><span class="pl-kos">;</span> <span class="pl-s1">store</span><span class="pl-kos">[</span><span class="pl-c1">10</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-s1">store</span><span class="pl-kos">.</span><span class="pl-en">pop</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-s1">store</span><span class="pl-kos">[</span><span class="pl-c1">11</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-s1">store</span><span class="pl-kos">.</span><span class="pl-en">shift</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// changes applied</span></pre></div> <p dir="auto">A transaction is used when editing an <strong>existing</strong> state in a bulk. Whenever you want to initialize a new state, e.g. when data was coming from a server, you should use <code>store.set(data)</code> instead.</p> <p dir="auto"><a name="user-content-pools"></a></p> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Component Pools</h2><a id="user-content-component-pools" class="anchor" aria-label="Permalink: Component Pools" href="#component-pools"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Using pools greatly enhance the strategy of keyed and non-keyed recycling. Mikado detects automatically if it needs to use keyed or non-keyed pooling and will apply different strategies optimized for each of them.</p> <blockquote> <p dir="auto">Pools just enables when a keyed or non-keyed recycle strategy was used in combination.</p> </blockquote> <p dir="auto">Enable pool (keyed or non-keyed):</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const view = new Mikado(tpl, { recycle: true, pool: true });"><pre><span class="pl-k">const</span> <span class="pl-s1">view</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">Mikado</span><span class="pl-kos">(</span><span class="pl-s1">tpl</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">recycle</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span> <span class="pl-c1">pool</span>: <span class="pl-c1">true</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Mikado will auto-balance pools automatically.</p> <p dir="auto"><a name="user-content-mikado.flush"></a></p> <div class="markdown-heading" dir="auto"><h4 tabindex="-1" class="heading-element" dir="auto">Flush Pools</h4><a id="user-content-flush-pools" class="anchor" aria-label="Permalink: Flush Pools" href="#flush-pools"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">You can delete pool contents at any time by:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="view.flush();"><pre><span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">flush</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto"><a name="user-content-hydration"></a></p> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Hydration</h2><a id="user-content-hydration" class="anchor" aria-label="Permalink: Hydration" href="#hydration"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Hydration is a concept where the server is sending some basic HTML structure (or the whole App/Page) and the client consumes those contents into its own rendering system. This will improve several performance aspects of page loading (e.g. the Lighthouse test) but also it enables you to have server-side-rendered content by also providing a full PWA (aka "Single-Page-Application") experience at the same time.</p> <p dir="auto">Mikado uses hydration strategy, where components are hydrated progressively right before a render task will be performed.</p> <p dir="auto">Assume the server was sending this HTML structure as initial:</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<html> <body> <main> <section> <title>Title</title> <tweets> <tweet><!-- ... --></tweet> <tweet><!-- ... --></tweet> <tweet><!-- ... --></tweet> </tweets> </section> </main> </body> </html>"><pre><span class="pl-kos"><</span><span class="pl-ent">html</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">body</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">main</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">section</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">title</span><span class="pl-kos">></span>Title<span class="pl-kos"></</span><span class="pl-ent">title</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">tweets</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">tweet</span><span class="pl-kos">></span><span class="pl-c"><!-- ... --></span><span class="pl-kos"></</span><span class="pl-ent">tweet</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">tweet</span><span class="pl-kos">></span><span class="pl-c"><!-- ... --></span><span class="pl-kos"></</span><span class="pl-ent">tweet</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">tweet</span><span class="pl-kos">></span><span class="pl-c"><!-- ... --></span><span class="pl-kos"></</span><span class="pl-ent">tweet</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">tweets</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">section</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">main</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">body</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">html</span><span class="pl-kos">></span></pre></div> <p dir="auto">Your template looks like:</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<section> <title>{{ data.title }}</title> <tweets foreach="data.tweets"> <tweet> <h1>{{ data.title }}</h1> <title>Comments:</title> <div foreach="data.comments"> <comment><!-- ... --></comment> </div> </tweet> </tweets> </section>"><pre><span class="pl-kos"><</span><span class="pl-ent">section</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">title</span><span class="pl-kos">></span>{{ data.title }}<span class="pl-kos"></</span><span class="pl-ent">title</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">tweets</span> <span class="pl-c1">foreach</span>="<span class="pl-s">data.tweets</span>"<span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">tweet</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">h1</span><span class="pl-kos">></span>{{ data.title }}<span class="pl-kos"></</span><span class="pl-ent">h1</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">title</span><span class="pl-kos">></span>Comments:<span class="pl-kos"></</span><span class="pl-ent">title</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">div</span> <span class="pl-c1">foreach</span>="<span class="pl-s">data.comments</span>"<span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">comment</span><span class="pl-kos">></span><span class="pl-c"><!-- ... --></span><span class="pl-kos"></</span><span class="pl-ent">comment</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">div</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">tweet</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">tweets</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">section</span><span class="pl-kos">></span></pre></div> <blockquote> <p dir="auto">When a mounted template matches the same DOM structure like the component which should be hydrated, the initialization of the template will boot up faster because the factory is derived instead of created. You can use Mikados SSR feature to provide client-compatible structures on the server-side.</p> </blockquote> <blockquote> <p dir="auto">When <code>DEBUG</code> is enabled (or by using one of the debug builds) you'll get a message in the console when hydration falls back into factory construction because of an incompatible DOM structure.</p> </blockquote> <p dir="auto">You can hydrate the existing structure when creating instance (prefetch):</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const root = document.querySelector("main"); const view = new Mikado(tpl, { mount: root, hydrate: true });"><pre><span class="pl-k">const</span> <span class="pl-s1">root</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">querySelector</span><span class="pl-kos">(</span><span class="pl-s">"main"</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-k">const</span> <span class="pl-s1">view</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">Mikado</span><span class="pl-kos">(</span><span class="pl-s1">tpl</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">mount</span>: <span class="pl-s1">root</span><span class="pl-kos">,</span> <span class="pl-c1">hydrate</span>: <span class="pl-c1">true</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">You can also do this just right before mounting by passing the 2nd parameter:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const view = new Mikado(tpl); // ... somewhat later in the runtime view.mount(document.querySelector("main"), /* hydrate? */ true);"><pre><span class="pl-k">const</span> <span class="pl-s1">view</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">Mikado</span><span class="pl-kos">(</span><span class="pl-s1">tpl</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// ... somewhat later in the runtime</span> <span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">mount</span><span class="pl-kos">(</span><span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">querySelector</span><span class="pl-kos">(</span><span class="pl-s">"main"</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-c">/* hydrate? */</span> <span class="pl-c1">true</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <blockquote> <p dir="auto">When a hydration breaks because it isn't compatible for some reason, it fully skips this process silently (logs a message when DEBUG was enabled) and falls back to a construction of a factory instead.</p> </blockquote> <p dir="auto"><a name="user-content-shadow"></a></p> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Web Components (Shadow DOM)</h2><a id="user-content-web-components-shadow-dom" class="anchor" aria-label="Permalink: Web Components (Shadow DOM)" href="#web-components-shadow-dom"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">When using shadow DOM to build web components the compiler needs to apply a different strategy. Therefore, you will need 2 additional template tags:</p> <ol dir="auto"> <li><code><component/></code> as the outer root will enable rendering on a shadow root</li> <li><code><template/></code> will identify your template from the rest of markup</li> </ol> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<component> <!-- optional styles/scripts/etc. --> <link href="css/component.css" rel="stylesheet"> <script src="js/component.js"></script> <style>#user-list{ width: 100%; }</style> <script>window.username = "John";</script> <!-- you can include anything here ... --> <!-- components requires the template tag --> <template> <!-- templates has single outer root element: --> <table id="user-list"> <tr> <td>User:</td> <td>{{ window.username }}</td> </tr> <tr> <td>Tweets:</td> <td>{{ data.tweets.length }}</td> </tr> </table> </template> </component>"><pre><span class="pl-kos"><</span><span class="pl-ent">component</span><span class="pl-kos">></span> <span class="pl-c"><!-- optional styles/scripts/etc. --></span> <span class="pl-kos"><</span><span class="pl-ent">link</span> <span class="pl-c1">href</span>="<span class="pl-s">css/component.css</span>" <span class="pl-c1">rel</span>="<span class="pl-s">stylesheet</span>"<span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">script</span> <span class="pl-c1">src</span>="<span class="pl-s">js/component.js</span>"<span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">script</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">style</span><span class="pl-kos">></span><span class="pl-kos">#</span><span class="pl-c1">user-list</span>{ <span class="pl-c1">width</span><span class="pl-kos">:</span> <span class="pl-c1">100<span class="pl-smi">%</span></span>; }<span class="pl-kos"></</span><span class="pl-ent">style</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">script</span><span class="pl-kos">></span><span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">username</span> <span class="pl-c1">=</span> <span class="pl-s">"John"</span><span class="pl-kos">;</span><span class="pl-kos"></</span><span class="pl-ent">script</span><span class="pl-kos">></span> <span class="pl-c"><!-- you can include anything here ... --></span> <span class="pl-c"><!-- components requires the template tag --></span> <span class="pl-kos"><</span><span class="pl-ent">template</span><span class="pl-kos">></span> <span class="pl-c"><!-- templates has single outer root element: --></span> <span class="pl-kos"><</span><span class="pl-ent">table</span> <span class="pl-c1">id</span>="<span class="pl-s">user-list</span>"<span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">tr</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">td</span><span class="pl-kos">></span>User:<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">td</span><span class="pl-kos">></span>{{ window.username }}<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">tr</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">tr</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">td</span><span class="pl-kos">></span>Tweets:<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">td</span><span class="pl-kos">></span>{{ data.tweets.length }}<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">tr</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">table</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">template</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">component</span><span class="pl-kos">></span></pre></div> <blockquote> <p dir="auto">You can't use any template expressions outside <code><template/></code>.</p> </blockquote> <p dir="auto">You can also render any normal template (non-components) to a plain dedicated shadow root by using the <code>shadow: true</code> option (also supported by the light bundle):</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const view = new Mikado(tpl, { shadow: true });"><pre><span class="pl-k">const</span> <span class="pl-s1">view</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">Mikado</span><span class="pl-kos">(</span><span class="pl-s1">tpl</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">shadow</span>: <span class="pl-c1">true</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Theoretically you can put the <code><link/></code>, <code><style/></code> and <code><script/></code> inside a normal non-component template by also using the <code>shadow: true</code> option. But there is one important difference. Within a normal template those tags could be re-rendered and this might end in re-initializing of all those assets. Within a web component there is a top level scope, which is created once and will stay for all your further template tasks. The template will render on a new "hidden" element <code><root/></code> which is part of the top level scope. That is because the view needs to be mounted to an element, and the top level scope of shadow root couldn't be mounted because of mixed content. Don't rely on the existence of <code><root/></code>, when using static templates or <code>view.once()</code> it might not exist.</p> <p dir="auto">Assume when mounted a web component template to an element <code><main></code>, the DOM structure looks like:</p> <div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="<main> #shadow-root <link/> <style/> <script/> <root> #template #template #template ... </root>"><pre class="notranslate"><code><main> #shadow-root <link/> <style/> <script/> <root> #template #template #template ... </root> </code></pre></div> <p dir="auto"><a name="user-content-full-template"></a></p> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Full Template Example</h2><a id="user-content-full-template-example" class="anchor" aria-label="Permalink: Full Template Example" href="#full-template-example"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Use this almost complete template example to check if you know everything about the template mechanism:</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<main cache="true" id="{{ data.view }}"> <table> <thead> <tr> <th>Index</th> <th>Title</th> <th>Media</th> <th>Category</th> <th>Comment</th> <th>Date</th> <th include="pager"></th> </tr> </thead> <tbody foreach="data.entries"> <script>{{@ const datestr = new Date(data.date).toLocaleString() }}</script> <tr key="data.id" data-id="{{ data.id }}"> <td>{{ index + 1 }}</td> <td>{{= data.title }}</td> <td>{{# data.media }}</td> <td>{{? data.category }}</td> <td>{{! data.comment }}</td> <td>{{ datestr }}</td> <td style="opacity: {{ state.selected === data.id ? '1' : '0.5' }}"> <select change="select-active:root"> <option value="on" selected="{{ data.mode === 'on' }}">Enabled</option> <option value="off" selected="{{ data.mode === 'off' }}">Disabled</option> </select> </td> </tr> </tbody> <tfoot if="!data.entries.length"> <tr> <td colspan="7">No entries found.</td> </tr> </tfoot> </table> </main>"><pre><span class="pl-kos"><</span><span class="pl-ent">main</span> <span class="pl-c1">cache</span>="<span class="pl-s">true</span>" <span class="pl-c1">id</span>="<span class="pl-s">{{ data.view }}</span>"<span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">table</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">thead</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">tr</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">th</span><span class="pl-kos">></span>Index<span class="pl-kos"></</span><span class="pl-ent">th</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">th</span><span class="pl-kos">></span>Title<span class="pl-kos"></</span><span class="pl-ent">th</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">th</span><span class="pl-kos">></span>Media<span class="pl-kos"></</span><span class="pl-ent">th</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">th</span><span class="pl-kos">></span>Category<span class="pl-kos"></</span><span class="pl-ent">th</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">th</span><span class="pl-kos">></span>Comment<span class="pl-kos"></</span><span class="pl-ent">th</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">th</span><span class="pl-kos">></span>Date<span class="pl-kos"></</span><span class="pl-ent">th</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">th</span> <span class="pl-c1">include</span>="<span class="pl-s">pager</span>"<span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">th</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">tr</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">thead</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">tbody</span> <span class="pl-c1">foreach</span>="<span class="pl-s">data.entries</span>"<span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">script</span><span class="pl-kos">></span><span class="pl-kos">{</span><span class="pl-kos">{</span>@ <span class="pl-s1">const</span> <span class="pl-c1">datestr</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">Date</span><span class="pl-kos">(</span><span class="pl-s1">data</span><span class="pl-kos">.</span><span class="pl-c1">date</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">toLocaleString</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">}</span><span class="pl-kos">}</span><span class="pl-kos"></</span><span class="pl-ent">script</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">tr</span> <span class="pl-c1">key</span>="<span class="pl-s">data.id</span>" <span class="pl-c1">data-id</span>="<span class="pl-s">{{ data.id }}</span>"<span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">td</span><span class="pl-kos">></span>{{ index + 1 }}<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">td</span><span class="pl-kos">></span>{{= data.title }}<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">td</span><span class="pl-kos">></span>{{# data.media }}<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">td</span><span class="pl-kos">></span>{{? data.category }}<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">td</span><span class="pl-kos">></span>{{! data.comment }}<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">td</span><span class="pl-kos">></span>{{ datestr }}<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">td</span> <span class="pl-c1">style</span>="<span class="pl-s">opacity: {{ state.selected === data.id ? '1' : '0.5' }}</span>"<span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">select</span> <span class="pl-c1">change</span>="<span class="pl-s">select-active:root</span>"<span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">option</span> <span class="pl-c1">value</span>="<span class="pl-s">on</span>" <span class="pl-c1">selected</span>="<span class="pl-s">{{ data.mode === 'on' }}</span>"<span class="pl-kos">></span>Enabled<span class="pl-kos"></</span><span class="pl-ent">option</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">option</span> <span class="pl-c1">value</span>="<span class="pl-s">off</span>" <span class="pl-c1">selected</span>="<span class="pl-s">{{ data.mode === 'off' }}</span>"<span class="pl-kos">></span>Disabled<span class="pl-kos"></</span><span class="pl-ent">option</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">select</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">tr</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">tbody</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">tfoot</span> <span class="pl-c1">if</span>="<span class="pl-s">!data.entries.length</span>"<span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">tr</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">td</span> <span class="pl-c1">colspan</span>="<span class="pl-s">7</span>"<span class="pl-kos">></span>No entries found.<span class="pl-kos"></</span><span class="pl-ent">td</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">tr</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">tfoot</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">table</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">main</span><span class="pl-kos">></span></pre></div> <p dir="auto">A proper definition and call for this template could look like this:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// the named include "pager" needs to be registered before use Mikado.register(tpl_pager); // define route "select-active" view.route("select-active", function(target, event){ const id = Number(target.dataset.id); view.state.selected = id; }); view.render({ view: "video", entries: [{ id: 1, date: "2023-12-01T14:00:00", title: "A simple title 1", media: "<img src='img1.jpg'>", category: null, comment: "Some <script>untrusted</script> content", mode: "off" },{ id: 2, date: "2023-12-02T15:00:00", title: "A simple title 2", media: "<video src='mov2.mp4'>", category: null, comment: "Some <script>untrusted</script> content", mode: "on" },{ id: 3, date: "2023-12-03T16:00:00", title: "A simple title 3", media: "<img src='img3.jpg'>", category: null, comment: "Some <script>untrusted</script> content", mode: "off" }] });"><pre><span class="pl-c">// the named include "pager" needs to be registered before use</span> <span class="pl-v">Mikado</span><span class="pl-kos">.</span><span class="pl-en">register</span><span class="pl-kos">(</span><span class="pl-s1">tpl_pager</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// define route "select-active"</span> <span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">route</span><span class="pl-kos">(</span><span class="pl-s">"select-active"</span><span class="pl-kos">,</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">target</span><span class="pl-kos">,</span> <span class="pl-s1">event</span><span class="pl-kos">)</span><span class="pl-kos">{</span> <span class="pl-k">const</span> <span class="pl-s1">id</span> <span class="pl-c1">=</span> <span class="pl-v">Number</span><span class="pl-kos">(</span><span class="pl-s1">target</span><span class="pl-kos">.</span><span class="pl-c1">dataset</span><span class="pl-kos">.</span><span class="pl-c1">id</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-c1">state</span><span class="pl-kos">.</span><span class="pl-c1">selected</span> <span class="pl-c1">=</span> <span class="pl-s1">id</span><span class="pl-kos">;</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-s1">view</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">view</span>: <span class="pl-s">"video"</span><span class="pl-kos">,</span> <span class="pl-c1">entries</span>: <span class="pl-kos">[</span><span class="pl-kos">{</span> <span class="pl-c1">id</span>: <span class="pl-c1">1</span><span class="pl-kos">,</span> <span class="pl-c1">date</span>: <span class="pl-s">"2023-12-01T14:00:00"</span><span class="pl-kos">,</span> <span class="pl-c1">title</span>: <span class="pl-s">"A simple title 1"</span><span class="pl-kos">,</span> <span class="pl-c1">media</span>: <span class="pl-s">"<img src='img1.jpg'>"</span><span class="pl-kos">,</span> <span class="pl-c1">category</span>: <span class="pl-c1">null</span><span class="pl-kos">,</span> <span class="pl-c1">comment</span>: <span class="pl-s">"Some <script>untrusted</script> content"</span><span class="pl-kos">,</span> <span class="pl-c1">mode</span>: <span class="pl-s">"off"</span> <span class="pl-kos">}</span><span class="pl-kos">,</span><span class="pl-kos">{</span> <span class="pl-c1">id</span>: <span class="pl-c1">2</span><span class="pl-kos">,</span> <span class="pl-c1">date</span>: <span class="pl-s">"2023-12-02T15:00:00"</span><span class="pl-kos">,</span> <span class="pl-c1">title</span>: <span class="pl-s">"A simple title 2"</span><span class="pl-kos">,</span> <span class="pl-c1">media</span>: <span class="pl-s">"<video src='mov2.mp4'>"</span><span class="pl-kos">,</span> <span class="pl-c1">category</span>: <span class="pl-c1">null</span><span class="pl-kos">,</span> <span class="pl-c1">comment</span>: <span class="pl-s">"Some <script>untrusted</script> content"</span><span class="pl-kos">,</span> <span class="pl-c1">mode</span>: <span class="pl-s">"on"</span> <span class="pl-kos">}</span><span class="pl-kos">,</span><span class="pl-kos">{</span> <span class="pl-c1">id</span>: <span class="pl-c1">3</span><span class="pl-kos">,</span> <span class="pl-c1">date</span>: <span class="pl-s">"2023-12-03T16:00:00"</span><span class="pl-kos">,</span> <span class="pl-c1">title</span>: <span class="pl-s">"A simple title 3"</span><span class="pl-kos">,</span> <span class="pl-c1">media</span>: <span class="pl-s">"<img src='img3.jpg'>"</span><span class="pl-kos">,</span> <span class="pl-c1">category</span>: <span class="pl-c1">null</span><span class="pl-kos">,</span> <span class="pl-c1">comment</span>: <span class="pl-s">"Some <script>untrusted</script> content"</span><span class="pl-kos">,</span> <span class="pl-c1">mode</span>: <span class="pl-s">"off"</span> <span class="pl-kos">}</span><span class="pl-kos">]</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Each template part explained:</p> <ul dir="auto"> <li><code>cache="true"</code> let the compiler prebuilt the cache strategy, you can't switch it to off when creating an instance</li> <li><code>id="{{ data.view }}"</code> simple expression for inserting dynamic content</li> <li><code>if="!data.entries.length"</code> the if-directive checks the condition and will render everything nested as a new template (inline definition or extern by using "include"), the nested template needs to have one outer element as the root</li> <li><code>foreach="data.entries"</code> the foreach-directive loops the rendering of array items by everything nested as a new template (inline definition or extern by using "include"), the nested template needs to have one outer element as the root</li> <li><code>{{@ ... }}</code> an expression to include pure javascript syntax (access limited by the scope of the template), wrapped into a <code><script/></code> tag just for runtime compiler support.</li> <li><code>key="data.id"</code> extract the key value from the data, a given key is limiting the recycling of already rendered components by a keyed strategy</li> <li><code>data-id="{{ data.id }}" root</code> exports "data.id" as an attribute, also define "root" as the event target for the listener "select-active", pretty useful when multiple routes on different elements needs the same data attributes</li> <li><code>{{ index + 1 }}</code> uses the builtin keyword "index" which refers to the current index of looped data</li> <li><code>{{= data.title }}</code> uses reactive approach by binding the html node to the data field, so when changing the data <code>data.title ="another title"</code> the node contents will also change accordingly</li> <li><code>{{# data.media }}</code> allows to include html syntax (this is unsafe, don't pass user inputs, you will need to prevent XSS by yourself)</li> <li><code>{{? data.category }}</code> only prints a "truthy" value including 0 (skips undefined, null, NaN, false)</li> <li><code>{{! data.comment }}</code> escape the value before print out (SSR only)</li> <li><code>{{ datestr }}</code> access the variable which was created by inline syntax before</li> <li><code>style="opacity: {{ state.selected === data.id '1' ? '0.5' }}"</code> example of dynamic attribute value</li> <li><code>change="select-active:root"</code> assign the route named "select-active" and forward the event to the element which has the given attribute name assigned to it or in this case "root" points to the components root (so the target inside the root function becomes the forwarded element)</li> <li><code>selected="data.active === 'yes'"</code> when dynamic attribute values results to boolean "false" (not string) it will be removed from the element, because some attributes enables just by their existence (consider an option element having selected="false" will end up also as a truthy selection state)</li> </ul> <p dir="auto"><a name="user-content-concept"></a></p> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Concept of Shared Components</h2><a id="user-content-concept-of-shared-components" class="anchor" aria-label="Permalink: Concept of Shared Components" href="#concept-of-shared-components"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Mikado heavily makes use of runtime optimization. Since it is not possible to predict the recycle state of the next render task, Mikado uses a technique called <code>progressive enhancement</code> on which optimizations will apply iteratively. Recycle enhancements growth as needed.</p> <p dir="auto">The most benchmarks you will find ends at the point where Mikado starts to shine. Rendering a simple table isn't really a complex task. Real applications have bigger structures including partials, includes, conditionals, etc. The concept of shared components was the basic idea of this library. It is the "ultimate" upgrade of the recycle paradigm and when properly used, it is one of the biggest optimization improvement you can unlock.</p> <p dir="auto"><br><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/a1edf52329980ccb019e47ca3c07a86c964b91a211d78cbd74cd17b721074807/68747470733a2f2f63646e2e6a7364656c6976722e6e65742f67682f6e657874617070732d64652f6d696b61646f406d61737465722f646f632f636f6e636570742e737667"><img src="https://camo.githubusercontent.com/a1edf52329980ccb019e47ca3c07a86c964b91a211d78cbd74cd17b721074807/68747470733a2f2f63646e2e6a7364656c6976722e6e65742f67682f6e657874617070732d64652f6d696b61646f406d61737465722f646f632f636f6e636570742e737667" alt="Mikado Shared Components (Concept)" data-canonical-src="https://cdn.jsdelivr.net/gh/nextapps-de/mikado@master/doc/concept.svg" style="max-width: 100%;"></a><br><br></p> <p dir="auto">Mikado will take away every complexity you might expect of such a system. You just need to structure your HTML templates and use <code>.render(data)</code>, that's it!</p> <p dir="auto"><a name="user-content-builds" id="user-content-builds"></a></p> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Custom Builds</h2><a id="user-content-custom-builds" class="anchor" aria-label="Permalink: Custom Builds" href="#custom-builds"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">The <code>src</code> folder of this repository requires some compilation to resolve the build flags. Those are your options:</p> <ul dir="auto"> <li>Closure Compiler (Simple or Advanced, used by this library, <a href="https://github.com/krausest/js-framework-benchmark/blob/master/frameworks/keyed/mikado/task/build.js">example</a>)</li> <li>Babel + Plugin <code>babel-plugin-conditional-compile</code> (used by this library <a href="/nextapps-de/mikado/blob/master/task/babel.min.json">here</a>)</li> </ul> <p dir="auto">As far as I know you can't resolve build flags with:</p> <ul dir="auto"> <li>Webpack</li> <li>esbuild</li> <li>rollup</li> <li>Terser</li> </ul> <p dir="auto">Please let me know when you have some additions. As long as you will see flags like <code>if(DEBUG)</code> (could be minified) in your build you shouldn't use that.</p> <p dir="auto">These are some of the basic builds located in the <code>dist</code> folder:</p> <div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="npm run build:bundle npm run build:light npm run build:module npm run build:es5"><pre>npm run build:bundle npm run build:light npm run build:module npm run build:es5</pre></div> <p dir="auto">Perform a custom build (UMD bundle) by passing build flags:</p> <div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="npm run build:custom SUPPORT_CACHE=true SUPPORT_POOLS=true LANGUAGE_OUT=ECMASCRIPT5 POLYFILL=true"><pre>npm run build:custom SUPPORT_CACHE=true SUPPORT_POOLS=true LANGUAGE_OUT=ECMASCRIPT5 POLYFILL=true</pre></div> <p dir="auto">Perform a custom build in ESM module format:</p> <div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="npm run build:custom RELEASE=custom.module SUPPORT_CACHE=true SUPPORT_POOLS=true "><pre>npm run build:custom RELEASE=custom.module SUPPORT_CACHE=true SUPPORT_POOLS=true </pre></div> <p dir="auto">Perform a debug build:</p> <div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="npm run build:custom DEBUG=true SUPPORT_CACHE=true SUPPORT_POOLS=true "><pre>npm run build:custom DEBUG=true SUPPORT_CACHE=true SUPPORT_POOLS=true </pre></div> <blockquote> <p dir="auto">On custom builds each build flag will be set to <em><strong>false</strong></em> by default when not passed.</p> </blockquote> <p dir="auto">The custom build will be saved to <code>dist/mikado.custom.xxxx.min.js</code> or when format is module to <code>dist/mikado.custom.module.xxxx.min.js</code> (the "xxxx" is a hash based on the used build flags).</p> <p dir="auto"><a name="user-content-build-flags" id="user-content-builds"></a></p> <div class="markdown-heading" dir="auto"><h5 tabindex="-1" class="heading-element" dir="auto">Supported Build Flags</h5><a id="user-content-supported-build-flags" class="anchor" aria-label="Permalink: Supported Build Flags" href="#supported-build-flags"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <markdown-accessiblity-table><table> <tbody><tr></tr> <tr> <td>Flag</td> <td>Values</td> <td>Info</td> </tr> <tr> <td>DEBUG</td> <td>true, <b>false</b></td> <td>Output debug information to the console (default: false)</td> </tr> <tr></tr> <tr> <td>SUPPORT_CACHE</td> <td>true, false</td> <td>DOM State Cache</td> </tr> <tr></tr> <tr> <td>SUPPORT_EVENTS</td> <td>true, false</td> <td>Routing & Event Delegation (template event bindings)</td> </tr> <tr></tr> <tr> <td>SUPPORT_KEYED</td> <td>true, false</td> <td>Support for keyed recycling (reconciliation)</td> </tr> <tr></tr> <tr> <td>SUPPORT_WEB_COMPONENTS</td> <td>true, false</td> <td>Support for web components (Shadow DOM)</td> </tr> <tr></tr> <tr> <td>SUPPORT_DOM_HELPERS</td> <td>true, false</td> <td>DOM Manipulation Helpers</td> </tr> <tr></tr> <tr> <td>SUPPORT_CACHE_HELPERS</td> <td>true, false</td> <td>DOM Cache Helpers</td> </tr> <tr></tr> <tr> <td>SUPPORT_ASYNC</td> <td>true, false</td> <td>Asynchronous Rendering (support Promises)</td> </tr> <tr></tr> <tr> <td>SUPPORT_POOLS</td> <td>true, false</td> <td>Support component pools for keyed and non-keyed recycle strategies</td> </tr> <tr></tr> <tr> <td>SUPPORT_REACTIVE</td> <td>true, false</td> <td>Use reactive data binding</td> </tr> <tr></tr> <tr> <td>REACTIVE_ONLY</td> <td>true, <b>false</b></td> <td>Use a full reactive approach for all views, exclude <code>.render()</code> and dependencies from build (default: false)</td> </tr> <tr></tr> <tr> <td>SUPPORT_CALLBACKS</td> <td>true, false</td> <td>Use callbacks for specific render tasks</td> </tr> <tr></tr> <tr> <td>SUPPORT_COMPACT_TEMPLATE</td> <td>true, false</td> <td>Turn on when templates are compiled with the <code>compact</code> or <code>default</code> strategy</td> </tr> <tr></tr> <tr> <td>SUPPORT_COMPILE</td> <td>true, false</td> <td>Use the runtime compiler</td> </tr> <tr> <td colspan="3"><br><b>Compiler Flags</b></td> </tr> <tr> <td>RELEASE<br><br><br><br><br></td> <td><b>custom</b><br>custom.module<br>bundle<br>bundle.module<br>es5<br>light</td> <td>Output debug information to the console (default: false)</td> </tr> <tr></tr> <tr> <td>POLYFILL</td> <td>true, <b>false</b></td> <td>Include Polyfills (based on LANGUAGE_OUT)</td> </tr> <tr></tr> <tr> <td>PROFILER</td> <td>true, <b>false</b></td> <td>Just used for automatic performance tests</td> </tr> <tr></tr> <tr> <td>LANGUAGE_OUT<br><br><br><br><br><br><br><br><br><br><br></td> <td>ECMASCRIPT3<br>ECMASCRIPT5<br>ECMASCRIPT_2015<br>ECMASCRIPT_2016<br>ECMASCRIPT_2017<br>ECMASCRIPT_2018<br>ECMASCRIPT_2019<br>ECMASCRIPT_2020<br>ECMASCRIPT_2021<br>ECMASCRIPT_2022<br>ECMASCRIPT_NEXT<br>STABLE</td> <td>Target language</td> </tr> </tbody></table></markdown-accessiblity-table> <hr> <p dir="auto">Copyright 2019-2024 Nextapps GmbH<br> Released under the <a href="http://www.apache.org/licenses/LICENSE-2.0.html" rel="nofollow">Apache 2.0 License</a><br></p> </article></div></div></div></div></div> <!-- --> <!-- --> <script type="application/json" id="__PRIMER_DATA_:R0:__">{"resolvedServerColorMode":"day"}</script></div> </react-partial> <input type="hidden" data-csrf="true" value="XzMCL7nMYNsY4SDCcOdt86j/vMVHVcVdT3/fhTlDY0IzLGb6XMH4tKfmiNNRm/CGVf2Fe5b0Cnga5Y/1H/4oNw==" /> </div> <div data-view-component="true" class="Layout-sidebar"> <div class="BorderGrid about-margin" data-pjax> <div class="BorderGrid-row"> <div class="BorderGrid-cell"> <div class="hide-sm hide-md"> <h2 class="mb-3 h4">About</h2> <p class="f4 my-3"> Mikado is the webs fastest template library for building user interfaces. </p> <h3 class="sr-only">Topics</h3> <div class="my-3"> <div class="f6"> <a href="/topics/template" title="Topic: template" data-view-component="true" class="topic-tag topic-tag-link"> template </a> <a href="/topics/virtual-dom" title="Topic: virtual-dom" data-view-component="true" class="topic-tag topic-tag-link"> virtual-dom </a> <a href="/topics/reactive" title="Topic: reactive" data-view-component="true" class="topic-tag topic-tag-link"> reactive </a> <a href="/topics/template-engine" title="Topic: template-engine" data-view-component="true" class="topic-tag topic-tag-link"> template-engine </a> <a href="/topics/high-performance" title="Topic: high-performance" data-view-component="true" class="topic-tag topic-tag-link"> high-performance </a> <a href="/topics/mustache" title="Topic: mustache" data-view-component="true" class="topic-tag topic-tag-link"> mustache </a> <a href="/topics/templates" title="Topic: templates" data-view-component="true" class="topic-tag topic-tag-link"> templates </a> <a href="/topics/templating" title="Topic: templating" data-view-component="true" class="topic-tag topic-tag-link"> templating </a> <a href="/topics/handlebars" title="Topic: handlebars" data-view-component="true" class="topic-tag topic-tag-link"> handlebars </a> <a href="/topics/observable" title="Topic: observable" data-view-component="true" class="topic-tag topic-tag-link"> observable </a> <a href="/topics/express-middleware" title="Topic: express-middleware" data-view-component="true" class="topic-tag topic-tag-link"> express-middleware </a> <a href="/topics/mustache-templates" title="Topic: mustache-templates" data-view-component="true" class="topic-tag topic-tag-link"> mustache-templates </a> <a href="/topics/server-side-rendering" title="Topic: server-side-rendering" data-view-component="true" class="topic-tag topic-tag-link"> server-side-rendering </a> <a href="/topics/handlebars-template" title="Topic: handlebars-template" data-view-component="true" class="topic-tag topic-tag-link"> handlebars-template </a> <a href="/topics/rendering-engine" title="Topic: rendering-engine" data-view-component="true" class="topic-tag topic-tag-link"> rendering-engine </a> <a href="/topics/template-library" title="Topic: template-library" data-view-component="true" class="topic-tag topic-tag-link"> template-library </a> </div> </div> <h3 class="sr-only">Resources</h3> <div class="mt-2"> <a class="Link--muted" data-analytics-event="{"category":"Repository Overview","action":"click","label":"location:sidebar;file:readme"}" href="#readme-ov-file"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-book mr-2"> <path d="M0 1.75A.75.75 0 0 1 .75 1h4.253c1.227 0 2.317.59 3 1.501A3.743 3.743 0 0 1 11.006 1h4.245a.75.75 0 0 1 .75.75v10.5a.75.75 0 0 1-.75.75h-4.507a2.25 2.25 0 0 0-1.591.659l-.622.621a.75.75 0 0 1-1.06 0l-.622-.621A2.25 2.25 0 0 0 5.258 13H.75a.75.75 0 0 1-.75-.75Zm7.251 10.324.004-5.073-.002-2.253A2.25 2.25 0 0 0 5.003 2.5H1.5v9h3.757a3.75 3.75 0 0 1 1.994.574ZM8.755 4.75l-.004 7.322a3.752 3.752 0 0 1 1.992-.572H14.5v-9h-3.495a2.25 2.25 0 0 0-2.25 2.25Z"></path> </svg> Readme </a> </div> <h3 class="sr-only">License</h3> <div class="mt-2"> <a href="#Apache-2.0-1-ov-file" class="Link--muted" data-analytics-event="{"category":"Repository Overview","action":"click","label":"location:sidebar;file:license"}" > <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-law mr-2"> <path d="M8.75.75V2h.985c.304 0 .603.08.867.231l1.29.736c.038.022.08.033.124.033h2.234a.75.75 0 0 1 0 1.5h-.427l2.111 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.006.005-.01.01-.045.04c-.21.176-.441.327-.686.45C14.556 10.78 13.88 11 13 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L12.178 4.5h-.162c-.305 0-.604-.079-.868-.231l-1.29-.736a.245.245 0 0 0-.124-.033H8.75V13h2.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1 0-1.5h2.5V3.5h-.984a.245.245 0 0 0-.124.033l-1.289.737c-.265.15-.564.23-.869.23h-.162l2.112 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.016.015-.045.04c-.21.176-.441.327-.686.45C4.556 10.78 3.88 11 3 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L2.178 4.5H1.75a.75.75 0 0 1 0-1.5h2.234a.249.249 0 0 0 .125-.033l1.288-.737c.265-.15.564-.23.869-.23h.984V.75a.75.75 0 0 1 1.5 0Zm2.945 8.477c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327Zm-10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327Z"></path> </svg> Apache-2.0 license </a> </div> <include-fragment src="/nextapps-de/mikado/hovercards/citation/sidebar_partial?tree_name=master"> </include-fragment> <div class="mt-2"> <a href="/nextapps-de/mikado/activity" data-view-component="true" class="Link Link--muted"><svg text="gray" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-pulse mr-2"> <path d="M6 2c.306 0 .582.187.696.471L10 10.731l1.304-3.26A.751.751 0 0 1 12 7h3.25a.75.75 0 0 1 0 1.5h-2.742l-1.812 4.528a.751.751 0 0 1-1.392 0L6 4.77 4.696 8.03A.75.75 0 0 1 4 8.5H.75a.75.75 0 0 1 0-1.5h2.742l1.812-4.529A.751.751 0 0 1 6 2Z"></path> </svg> <span class="color-fg-muted">Activity</span></a> </div> <div class="mt-2"> <a href="/nextapps-de/mikado/custom-properties" data-view-component="true" class="Link Link--muted"><svg text="gray" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-note mr-2"> <path d="M0 3.75C0 2.784.784 2 1.75 2h12.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25Zm1.75-.25a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-8.5a.25.25 0 0 0-.25-.25ZM3.5 6.25a.75.75 0 0 1 .75-.75h7a.75.75 0 0 1 0 1.5h-7a.75.75 0 0 1-.75-.75Zm.75 2.25h4a.75.75 0 0 1 0 1.5h-4a.75.75 0 0 1 0-1.5Z"></path> </svg> <span class="color-fg-muted">Custom properties</span></a> </div> <h3 class="sr-only">Stars</h3> <div class="mt-2"> <a href="/nextapps-de/mikado/stargazers" data-view-component="true" class="Link Link--muted"><svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-star mr-2"> <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z"></path> </svg> <strong>801</strong> stars</a> </div> <h3 class="sr-only">Watchers</h3> <div class="mt-2"> <a href="/nextapps-de/mikado/watchers" data-view-component="true" class="Link Link--muted"><svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-eye mr-2"> <path d="M8 2c1.981 0 3.671.992 4.933 2.078 1.27 1.091 2.187 2.345 2.637 3.023a1.62 1.62 0 0 1 0 1.798c-.45.678-1.367 1.932-2.637 3.023C11.67 13.008 9.981 14 8 14c-1.981 0-3.671-.992-4.933-2.078C1.797 10.83.88 9.576.43 8.898a1.62 1.62 0 0 1 0-1.798c.45-.677 1.367-1.931 2.637-3.022C4.33 2.992 6.019 2 8 2ZM1.679 7.932a.12.12 0 0 0 0 .136c.411.622 1.241 1.75 2.366 2.717C5.176 11.758 6.527 12.5 8 12.5c1.473 0 2.825-.742 3.955-1.715 1.124-.967 1.954-2.096 2.366-2.717a.12.12 0 0 0 0-.136c-.412-.621-1.242-1.75-2.366-2.717C10.824 4.242 9.473 3.5 8 3.5c-1.473 0-2.825.742-3.955 1.715-1.124.967-1.954 2.096-2.366 2.717ZM8 10a2 2 0 1 1-.001-3.999A2 2 0 0 1 8 10Z"></path> </svg> <strong>22</strong> watching</a> </div> <h3 class="sr-only">Forks</h3> <div class="mt-2"> <a href="/nextapps-de/mikado/forks" data-view-component="true" class="Link Link--muted"><svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-repo-forked mr-2"> <path d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z"></path> </svg> <strong>36</strong> forks</a> </div> <div class="mt-2"> <a class="Link--muted" href="/contact/report-content?content_url=https%3A%2F%2Fgithub.com%2Fnextapps-de%2Fmikado&report=nextapps-de+%28user%29"> Report repository </a> </div> </div> </div> </div> <div class="BorderGrid-row"> <div class="BorderGrid-cell"> <h2 class="h4 mb-3" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame"> <a href="/nextapps-de/mikado/releases" data-view-component="true" class="Link--primary no-underline Link">Releases <span title="19" data-view-component="true" class="Counter">19</span></a></h2> <a class="Link--primary d-flex no-underline" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" href="/nextapps-de/mikado/releases/tag/0.8.4"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-tag flex-shrink-0 mt-1 color-fg-success"> <path d="M1 7.775V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 0 1 0 2.474l-5.026 5.026a1.75 1.75 0 0 1-2.474 0l-6.25-6.25A1.752 1.752 0 0 1 1 7.775Zm1.5 0c0 .066.026.13.073.177l6.25 6.25a.25.25 0 0 0 .354 0l5.025-5.025a.25.25 0 0 0 0-.354l-6.25-6.25a.25.25 0 0 0-.177-.073H2.75a.25.25 0 0 0-.25.25ZM6 5a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"></path> </svg> <div class="ml-2 min-width-0"> <div class="d-flex"> <span class="css-truncate css-truncate-target text-bold mr-2" style="max-width: none;">v0.8.4</span> <span title="Label: Latest" data-view-component="true" class="Label Label--success flex-shrink-0"> Latest </span> </div> <div class="text-small color-fg-muted"><relative-time datetime="2024-08-10T11:01:13Z" class="no-wrap">Aug 10, 2024</relative-time></div> </div> </a> <div data-view-component="true" class="mt-3"> <a text="small" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" href="/nextapps-de/mikado/releases" data-view-component="true" class="Link">+ 18 releases</a></div> </div> </div> <div class="BorderGrid-row"> <div class="BorderGrid-cell"> <h2 class="h4 mb-3">Sponsor this project</h2> <include-fragment src="/nextapps-de/mikado/sponsors_list?block_button=false&current_repository=mikado" aria-busy="true" aria-label="Loading sponsorable links"> <ul class="list-style-none"> <li class="mb-2 d-flex"> <div class="Skeleton avatar avatar-user mr-2" style="width:32px;height:32px;"></div> <div class="Skeleton Skeleton--text flex-1 flex-self-center f4"> </div> </li> </ul> </include-fragment> <ul class="list-style-none"> <li class="mb-2 d-flex"> <span class="mr-2 d-flex flex-items-center flex-justify-center" style="min-width:32px;height:32px;"> <img width="32" height="32" class="octicon rounded-2 d-block" alt="open_collective" src="https://github.githubassets.com/assets/open_collective-0a706523753d.svg" /> </span> <span class="flex-self-center flex-auto min-width-0 css-truncate css-truncate-target width-fit"> <a target="_blank" data-ga-click="Dashboard, click, Nav menu - item:org-profile context:organization" data-hydro-click="{"event_type":"sponsors.repo_funding_links_link_click","payload":{"platform":{"platform_type":"OPEN_COLLECTIVE","platform_url":"https://opencollective.com/mikado"},"platforms":[{"platform_type":"GITHUB","platform_url":"https://github.com/ts-thomas"},{"platform_type":"OPEN_COLLECTIVE","platform_url":"https://opencollective.com/mikado"},{"platform_type":"LIBERAPAY","platform_url":"https://liberapay.com/ts-thomas"},{"platform_type":"PATREON","platform_url":"https://patreon.com/user?u=96245532"},{"platform_type":"CUSTOM","platform_url":"https://www.paypal.com/donate/?hosted_button_id=GEVR88FC9BWRW"},{"platform_type":"CUSTOM","platform_url":"https://salt.bountysource.com/teams/ts-thomas"}],"repo_id":206418939,"owner_id":28928681,"user_id":null,"originating_url":"https://github.com/nextapps-de/mikado"}}" data-hydro-click-hmac="429b87f76e1370fd0be06924f7b8fe41b7cd1524108c9926b0a8bc616f6b1511" href="https://opencollective.com/mikado"><span>opencollective.com/<strong>mikado</strong></span></a> </span> </li> <li class="mb-2 d-flex"> <span class="mr-2 d-flex flex-items-center flex-justify-center" style="min-width:32px;height:32px;"> <img width="32" height="32" class="octicon rounded-2 d-block" alt="liberapay" src="https://github.githubassets.com/assets/liberapay-48108ded7267.svg" /> </span> <span class="flex-self-center flex-auto min-width-0 css-truncate css-truncate-target width-fit"> <a target="_blank" data-ga-click="Dashboard, click, Nav menu - item:org-profile context:organization" data-hydro-click="{"event_type":"sponsors.repo_funding_links_link_click","payload":{"platform":{"platform_type":"LIBERAPAY","platform_url":"https://liberapay.com/ts-thomas"},"platforms":[{"platform_type":"GITHUB","platform_url":"https://github.com/ts-thomas"},{"platform_type":"OPEN_COLLECTIVE","platform_url":"https://opencollective.com/mikado"},{"platform_type":"LIBERAPAY","platform_url":"https://liberapay.com/ts-thomas"},{"platform_type":"PATREON","platform_url":"https://patreon.com/user?u=96245532"},{"platform_type":"CUSTOM","platform_url":"https://www.paypal.com/donate/?hosted_button_id=GEVR88FC9BWRW"},{"platform_type":"CUSTOM","platform_url":"https://salt.bountysource.com/teams/ts-thomas"}],"repo_id":206418939,"owner_id":28928681,"user_id":null,"originating_url":"https://github.com/nextapps-de/mikado"}}" data-hydro-click-hmac="d2c9cfaad26b9b066be0f63d0aa6423c236d6971d3d6edd20ac51a4d522eccab" href="https://liberapay.com/ts-thomas"><span>liberapay.com/<strong>ts-thomas</strong></span></a> </span> </li> <li class="mb-2 d-flex"> <span class="mr-2 d-flex flex-items-center flex-justify-center" style="min-width:32px;height:32px;"> <img width="32" height="32" class="octicon rounded-2 d-block" alt="patreon" src="https://github.githubassets.com/assets/patreon-96b15b9db4b9.svg" /> </span> <span class="flex-self-center flex-auto min-width-0 css-truncate css-truncate-target width-fit"> <a target="_blank" data-ga-click="Dashboard, click, Nav menu - item:org-profile context:organization" data-hydro-click="{"event_type":"sponsors.repo_funding_links_link_click","payload":{"platform":{"platform_type":"PATREON","platform_url":"https://patreon.com/user?u=96245532"},"platforms":[{"platform_type":"GITHUB","platform_url":"https://github.com/ts-thomas"},{"platform_type":"OPEN_COLLECTIVE","platform_url":"https://opencollective.com/mikado"},{"platform_type":"LIBERAPAY","platform_url":"https://liberapay.com/ts-thomas"},{"platform_type":"PATREON","platform_url":"https://patreon.com/user?u=96245532"},{"platform_type":"CUSTOM","platform_url":"https://www.paypal.com/donate/?hosted_button_id=GEVR88FC9BWRW"},{"platform_type":"CUSTOM","platform_url":"https://salt.bountysource.com/teams/ts-thomas"}],"repo_id":206418939,"owner_id":28928681,"user_id":null,"originating_url":"https://github.com/nextapps-de/mikado"}}" data-hydro-click-hmac="9f242993ff83d7fe3672de66ad11d9cf0943de2ef1b3666aacd8c1b5349684c3" href="https://patreon.com/user?u=96245532"><span>patreon.com/<strong>user?u=96245532</strong></span></a> </span> </li> <li class="mb-2 d-flex"> <span class="mr-2 d-flex flex-items-center flex-justify-center" style="min-width:32px;height:32px;"> <svg class="octicon octicon-link color-fg-muted" alt="custom" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </span> <span class="flex-self-center flex-auto min-width-0 css-truncate css-truncate-target width-fit"> <a target="_blank" data-ga-click="Dashboard, click, Nav menu - item:org-profile context:organization" data-hydro-click="{"event_type":"sponsors.repo_funding_links_link_click","payload":{"platform":{"platform_type":"CUSTOM","platform_url":"https://www.paypal.com/donate/?hosted_button_id=GEVR88FC9BWRW"},"platforms":[{"platform_type":"GITHUB","platform_url":"https://github.com/ts-thomas"},{"platform_type":"OPEN_COLLECTIVE","platform_url":"https://opencollective.com/mikado"},{"platform_type":"LIBERAPAY","platform_url":"https://liberapay.com/ts-thomas"},{"platform_type":"PATREON","platform_url":"https://patreon.com/user?u=96245532"},{"platform_type":"CUSTOM","platform_url":"https://www.paypal.com/donate/?hosted_button_id=GEVR88FC9BWRW"},{"platform_type":"CUSTOM","platform_url":"https://salt.bountysource.com/teams/ts-thomas"}],"repo_id":206418939,"owner_id":28928681,"user_id":null,"originating_url":"https://github.com/nextapps-de/mikado"}}" data-hydro-click-hmac="bfd9a033af81fcc5cf277984f54d2ff8e04712a5d644454d2537968eece815ae" rel="noopener noreferrer" href="https://www.paypal.com/donate/?hosted_button_id=GEVR88FC9BWRW">https://www.paypal.com/donate/?hosted_button_id=GEVR88FC9BWRW</a> </span> </li> <li class="mb-2 d-flex"> <span class="mr-2 d-flex flex-items-center flex-justify-center" style="min-width:32px;height:32px;"> <svg class="octicon octicon-link color-fg-muted" alt="custom" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> </span> <span class="flex-self-center flex-auto min-width-0 css-truncate css-truncate-target width-fit"> <a target="_blank" data-ga-click="Dashboard, click, Nav menu - item:org-profile context:organization" data-hydro-click="{"event_type":"sponsors.repo_funding_links_link_click","payload":{"platform":{"platform_type":"CUSTOM","platform_url":"https://salt.bountysource.com/teams/ts-thomas"},"platforms":[{"platform_type":"GITHUB","platform_url":"https://github.com/ts-thomas"},{"platform_type":"OPEN_COLLECTIVE","platform_url":"https://opencollective.com/mikado"},{"platform_type":"LIBERAPAY","platform_url":"https://liberapay.com/ts-thomas"},{"platform_type":"PATREON","platform_url":"https://patreon.com/user?u=96245532"},{"platform_type":"CUSTOM","platform_url":"https://www.paypal.com/donate/?hosted_button_id=GEVR88FC9BWRW"},{"platform_type":"CUSTOM","platform_url":"https://salt.bountysource.com/teams/ts-thomas"}],"repo_id":206418939,"owner_id":28928681,"user_id":null,"originating_url":"https://github.com/nextapps-de/mikado"}}" data-hydro-click-hmac="2462c2178422bbe838fab9c6a4a0336fb0192eb9e41d63c1ac6f9ac63e6a7eac" rel="noopener noreferrer" href="https://salt.bountysource.com/teams/ts-thomas">https://salt.bountysource.com/teams/ts-thomas</a> </span> </li> </ul> <div class="text-small mt-3"> <a href="/sponsors">Learn more about GitHub Sponsors</a> </div> </div> </div> <div class="BorderGrid-row"> <div class="BorderGrid-cell"> <h2 class="h4 mb-3"> <a href="/orgs/nextapps-de/packages?repo_name=mikado" data-view-component="true" class="Link--primary no-underline Link d-flex flex-items-center">Packages <span title="0" hidden="hidden" data-view-component="true" class="Counter ml-1">0</span></a></h2> <div class="text-small color-fg-muted" > No packages published <br> </div> </div> </div> <div class="BorderGrid-row" hidden> <div class="BorderGrid-cell"> <include-fragment src="/nextapps-de/mikado/used_by_list" accept="text/fragment+html"> </include-fragment> </div> </div> <div class="BorderGrid-row"> <div class="BorderGrid-cell"> <h2 class="h4 mb-3"> <a href="/nextapps-de/mikado/graphs/contributors" data-view-component="true" class="Link--primary no-underline Link d-flex flex-items-center">Contributors <span title="9" data-view-component="true" class="Counter ml-1">9</span></a></h2> <ul class="list-style-none d-flex flex-wrap mb-n2"> <li class="mb-2 mr-2" > <a href="https://github.com/ts-thomas" class="" data-hovercard-type="user" data-hovercard-url="/users/ts-thomas/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" > <img src="https://avatars.githubusercontent.com/u/12898005?s=64&v=4" alt="@ts-thomas" size="32" height="32" width="32" data-view-component="true" class="avatar circle" /> </a> </li> <li class="mb-2 mr-2" > <a href="https://github.com/Densyakun" class="" data-hovercard-type="user" data-hovercard-url="/users/Densyakun/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" > <img src="https://avatars.githubusercontent.com/u/6139392?s=64&v=4" alt="@Densyakun" size="32" height="32" width="32" data-view-component="true" class="avatar circle" /> </a> </li> <li class="mb-2 mr-2" > <a href="https://github.com/s0kil" class="" data-hovercard-type="user" data-hovercard-url="/users/s0kil/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" > <img src="https://avatars.githubusercontent.com/u/24403355?s=64&v=4" alt="@s0kil" size="32" height="32" width="32" data-view-component="true" class="avatar circle" /> </a> </li> <li class="mb-2 mr-2" > <a href="https://github.com/apps/dependabot" class="" > <img src="https://avatars.githubusercontent.com/in/29110?s=64&v=4" alt="@dependabot[bot]" size="32" height="32" width="32" data-view-component="true" class="avatar" /> </a> </li> <li class="mb-2 mr-2" > <a href="https://github.com/rottmann" class="" data-hovercard-type="user" data-hovercard-url="/users/rottmann/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" > <img src="https://avatars.githubusercontent.com/u/381201?s=64&v=4" alt="@rottmann" size="32" height="32" width="32" data-view-component="true" class="avatar circle" /> </a> </li> <li class="mb-2 mr-2" > <a href="https://github.com/ryansolid" class="" data-hovercard-type="user" data-hovercard-url="/users/ryansolid/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" > <img src="https://avatars.githubusercontent.com/u/2768267?s=64&v=4" alt="@ryansolid" size="32" height="32" width="32" data-view-component="true" class="avatar circle" /> </a> </li> <li class="mb-2 mr-2" > <a href="https://github.com/ftoh" class="" data-hovercard-type="user" data-hovercard-url="/users/ftoh/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" > <img src="https://avatars.githubusercontent.com/u/5018813?s=64&v=4" alt="@ftoh" size="32" height="32" width="32" data-view-component="true" class="avatar circle" /> </a> </li> <li class="mb-2 mr-2" > <a href="https://github.com/reves" class="" data-hovercard-type="user" data-hovercard-url="/users/reves/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" > <img src="https://avatars.githubusercontent.com/u/8700863?s=64&v=4" alt="@reves" size="32" height="32" width="32" data-view-component="true" class="avatar circle" /> </a> </li> <li class="mb-2 mr-2" > <a href="https://github.com/Lulzx" class="" data-hovercard-type="user" data-hovercard-url="/users/Lulzx/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" > <img src="https://avatars.githubusercontent.com/u/22330483?s=64&v=4" alt="@Lulzx" size="32" height="32" width="32" data-view-component="true" class="avatar circle" /> </a> </li> </ul> </div> </div> <div class="BorderGrid-row"> <div class="BorderGrid-cell"> <h2 class="h4 mb-3">Languages</h2> <div class="mb-2"> <span data-view-component="true" class="Progress"> <span style="background-color:#f1e05a !important;;width: 97.1%;" itemprop="keywords" data-view-component="true" class="Progress-item color-bg-success-emphasis"></span> <span style="background-color:#e34c26 !important;;width: 2.9%;" itemprop="keywords" data-view-component="true" class="Progress-item color-bg-success-emphasis"></span> </span></div> <ul class="list-style-none"> <li class="d-inline"> <a class="d-inline-flex flex-items-center flex-nowrap Link--secondary no-underline text-small mr-3" href="/nextapps-de/mikado/search?l=javascript" data-ga-click="Repository, language stats search click, location:repo overview"> <svg style="color:#f1e05a;" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-dot-fill mr-2"> <path d="M8 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8Z"></path> </svg> <span class="color-fg-default text-bold mr-1">JavaScript</span> <span>97.1%</span> </a> </li> <li class="d-inline"> <a class="d-inline-flex flex-items-center flex-nowrap Link--secondary no-underline text-small mr-3" href="/nextapps-de/mikado/search?l=html" data-ga-click="Repository, language stats search click, location:repo overview"> <svg style="color:#e34c26;" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-dot-fill mr-2"> <path d="M8 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8Z"></path> </svg> <span class="color-fg-default text-bold mr-1">HTML</span> <span>2.9%</span> </a> </li> </ul> </div> </div> </div> </div> </div></div> </div> </div> </turbo-frame> </main> </div> </div> <footer class="footer pt-8 pb-6 f6 color-fg-muted p-responsive" role="contentinfo" > <h2 class='sr-only'>Footer</h2> <div class="d-flex flex-justify-center flex-items-center flex-column-reverse flex-lg-row flex-wrap flex-lg-nowrap"> <div class="d-flex flex-items-center flex-shrink-0 mx-2"> <a aria-label="Homepage" title="GitHub" class="footer-octicon mr-2" href="https://github.com"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-mark-github"> <path d="M12.5.75C6.146.75 1 5.896 1 12.25c0 5.089 3.292 9.387 7.863 10.91.575.101.79-.244.79-.546 0-.273-.014-1.178-.014-2.142-2.889.532-3.636-.704-3.866-1.35-.13-.331-.69-1.352-1.18-1.625-.402-.216-.977-.748-.014-.762.906-.014 1.553.834 1.769 1.179 1.035 1.74 2.688 1.25 3.349.948.1-.747.402-1.25.733-1.538-2.559-.287-5.232-1.279-5.232-5.678 0-1.25.445-2.285 1.178-3.09-.115-.288-.517-1.467.115-3.048 0 0 .963-.302 3.163 1.179.92-.259 1.897-.388 2.875-.388.977 0 1.955.13 2.875.388 2.2-1.495 3.162-1.179 3.162-1.179.633 1.581.23 2.76.115 3.048.733.805 1.179 1.825 1.179 3.09 0 4.413-2.688 5.39-5.247 5.678.417.36.776 1.05.776 2.128 0 1.538-.014 2.774-.014 3.162 0 .302.216.662.79.547C20.709 21.637 24 17.324 24 12.25 24 5.896 18.854.75 12.5.75Z"></path> </svg> </a> <span> © 2025 GitHub, Inc. </span> </div> <nav aria-label="Footer"> <h3 class="sr-only" id="sr-footer-heading">Footer navigation</h3> <ul class="list-style-none d-flex flex-justify-center flex-wrap mb-2 mb-lg-0" aria-labelledby="sr-footer-heading"> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to Terms","label":"text:terms"}" href="https://docs.github.com/site-policy/github-terms/github-terms-of-service" data-view-component="true" class="Link--secondary Link">Terms</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to privacy","label":"text:privacy"}" href="https://docs.github.com/site-policy/privacy-policies/github-privacy-statement" data-view-component="true" class="Link--secondary Link">Privacy</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to security","label":"text:security"}" href="https://github.com/security" data-view-component="true" class="Link--secondary Link">Security</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to status","label":"text:status"}" href="https://www.githubstatus.com/" data-view-component="true" class="Link--secondary Link">Status</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to docs","label":"text:docs"}" href="https://docs.github.com/" data-view-component="true" class="Link--secondary Link">Docs</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to contact","label":"text:contact"}" href="https://support.github.com?tags=dotcom-footer" data-view-component="true" class="Link--secondary Link">Contact</a> </li> <li class="mx-2" > <cookie-consent-link> <button type="button" class="Link--secondary underline-on-hover border-0 p-0 color-bg-transparent" data-action="click:cookie-consent-link#showConsentManagement" data-analytics-event="{"location":"footer","action":"cookies","context":"subfooter","tag":"link","label":"cookies_link_subfooter_footer"}" > Manage cookies </button> </cookie-consent-link> </li> <li class="mx-2"> <cookie-consent-link> <button type="button" class="Link--secondary underline-on-hover border-0 p-0 color-bg-transparent" data-action="click:cookie-consent-link#showConsentManagement" data-analytics-event="{"location":"footer","action":"dont_share_info","context":"subfooter","tag":"link","label":"dont_share_info_link_subfooter_footer"}" > Do not share my personal information </button> </cookie-consent-link> </li> </ul> </nav> </div> </footer> <ghcc-consent id="ghcc" class="position-fixed bottom-0 left-0" style="z-index: 999999" data-initial-cookie-consent-allowed="" data-cookie-consent-required="false"></ghcc-consent> <div id="ajax-error-message" class="ajax-error-message flash flash-error" hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> <button type="button" class="flash-close js-ajax-error-dismiss" aria-label="Dismiss error"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button> You can’t perform that action at this time. </div> <template id="site-details-dialog"> <details class="details-reset details-overlay details-overlay-dark lh-default color-fg-default hx_rsm" open> <summary role="button" aria-label="Close dialog"></summary> <details-dialog class="Box Box--overlay d-flex flex-column anim-fade-in fast hx_rsm-dialog hx_rsm-modal"> <button class="Box-btn-octicon m-0 btn-octicon position-absolute right-0 top-0" type="button" aria-label="Close dialog" data-close-dialog> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button> <div class="octocat-spinner my-6 js-details-dialog-spinner"></div> </details-dialog> </details> </template> <div class="Popover js-hovercard-content position-absolute" style="display: none; outline: none;"> <div class="Popover-message Popover-message--bottom-left Popover-message--large Box color-shadow-large" style="width:360px;"> </div> </div> <template id="snippet-clipboard-copy-button"> <div class="zeroclipboard-container position-absolute right-0 top-0"> <clipboard-copy aria-label="Copy" class="ClipboardButton btn js-clipboard-copy m-2 p-0" data-copy-feedback="Copied!" data-tooltip-direction="w"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copy js-clipboard-copy-icon m-2"> <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path> </svg> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check js-clipboard-check-icon color-fg-success d-none m-2"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </clipboard-copy> </div> </template> <template id="snippet-clipboard-copy-button-unpositioned"> <div class="zeroclipboard-container"> <clipboard-copy aria-label="Copy" class="ClipboardButton btn btn-invisible js-clipboard-copy m-2 p-0 d-flex flex-justify-center flex-items-center" data-copy-feedback="Copied!" data-tooltip-direction="w"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copy js-clipboard-copy-icon"> <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path> </svg> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check js-clipboard-check-icon color-fg-success d-none"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </clipboard-copy> </div> </template> </div> <div id="js-global-screen-reader-notice" class="sr-only mt-n1" aria-live="polite" aria-atomic="true" ></div> <div id="js-global-screen-reader-notice-assertive" class="sr-only mt-n1" aria-live="assertive" aria-atomic="true"></div> </body> </html>