-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
bc2c79f
commit c3713c5
Showing
27 changed files
with
49 additions
and
49 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,7 @@ | ||
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Tutorial - HTML Templating System - Before Semicolon</title><link rel="stylesheet" href="../stylesheets/hybrid.hightlighter.css"><link rel="stylesheet" href="../stylesheets/documentation.css"></head><body><header class="wrapper"><h1><a href="../"><strong style="text-transform: uppercase">Markup</strong></a></h1><nav><a href="https://www.npmjs.com/package/@beforesemicolon/markup">v<em>0.2.5-beta</em></a></nav></header><main><div class="wrapper docs"><div class="doc-nav" id="menu"><a class="mobile-menu-open" href="#menu"><span>menu</span></a><ul class="doc-nav-list" id="doc-nav-list" tabindex="0"><li><span>Introduction</span><ul><li><a href="../documentation">What is Markup?</a></li><li><a href="../documentation/installation.html">Installation</a></li><li><a href="../documentation/essential-training.html">Essential Training</a></li><li><a href="../documentation/tutorial.html">Tutorial</a></li><li><a href="../documentation/examples.html">Examples</a></li></ul></li><li><span>Templating</span><ul><li><a href="../documentation/creating-and-rendering.html">Creating & Rendering</a></li><li><a href="../documentation/template-values.html">Template values</a></li><li><a href="../documentation/replacing-content.html">Replacing content</a></li><li><a href="../documentation/dom-references.html">DOM references</a></li><li><a href="../documentation/conditional-attributes.html">Conditional attributes</a></li><li class="active"><a href="../documentation/event-handling.html">Event handling</a></li><li><a href="../documentation/dynamic-values-and-update.html">Dynamic values & Update</a></li><li><a href="../documentation/state-values.html">State values</a></li></ul></li><li><span>Helpers</span><ul><li><a href="../documentation/what-is-a-helper.html">What is a Helper?</a></li><li><a href="../documentation/effect-helper.html">Effect helper</a></li><li><a href="../documentation/conditional-rendering.html">Conditional Rendering</a></li><li><a href="../documentation/repetition-and-lists.html">Repetition & Lists</a></li><li><a href="../documentation/is-isnot-helpers.html">Is & IsNot helpers</a></li><li><a href="../documentation/or-and-oneof-helpers.html">Or, And, & OneOf helpers</a></li><li><a href="../documentation/pick-helper.html">Pick helper</a></li><li><a href="../documentation/suspense-helper.html">Suspense helper</a></li><li><a href="../documentation/custom-helper.html">Custom helper</a></li></ul></li><li><span>Capabilities</span><ul><li><a href="../documentation/function-components.html">Function Components</a></li><li><a href="../documentation/web-components.html">Web Components</a></li><li><a href="../documentation/server-side-rendering.html">Server Side Rendering</a></li><li><a href="../documentation/state-store.html">State Store</a></li></ul></li></ul><a href="../documentation/event-handling.html" class="mobile-menu-close"></a></div><article><h2 id="event-handling" class="heading"><a href="#event-handling">Event handling</a></h2><p>Event handling remains close to the native way but enhanced withactive listeners instead. Think about it more like an inline<a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener</a>more than anything.</p><div class="code-snippet"><pre><code class="language-typescript theme-hybrid hljs" data-highlighted="yes"><span class="hljs-keyword">const</span> <span class="hljs-title function_">handleClick</span> = (<span class="hljs-params">evt: Event</span>) => {evt.<span class="hljs-title function_">preventDefault</span>();evt.<span class="hljs-title function_">stopPropagation</span>(); | ||
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Tutorial - HTML Templating System - Before Semicolon</title><link rel="stylesheet" href="../stylesheets/hybrid.hightlighter.css"><link rel="stylesheet" href="../stylesheets/documentation.css"></head><body><header class="wrapper"><h1><a href="../"><strong style="text-transform: uppercase">Markup</strong></a></h1><nav><a href="https://www.npmjs.com/package/@beforesemicolon/markup">v<em>0.2.5-beta</em></a></nav></header><main><div class="wrapper docs"><div class="doc-nav" id="menu"><a class="mobile-menu-open" href="#menu"><span>menu</span></a><ul class="doc-nav-list" id="doc-nav-list" tabindex="0"><li><span>Introduction</span><ul><li><a href="../documentation">What is Markup?</a></li><li><a href="../documentation/installation">Installation</a></li><li><a href="../documentation/essential-training">Essential Training</a></li><li><a href="../documentation/tutorial">Tutorial</a></li><li><a href="../documentation/examples">Examples</a></li></ul></li><li><span>Templating</span><ul><li><a href="../documentation/creating-and-rendering">Creating & Rendering</a></li><li><a href="../documentation/template-values">Template values</a></li><li><a href="../documentation/replacing-content">Replacing content</a></li><li><a href="../documentation/dom-references">DOM references</a></li><li><a href="../documentation/conditional-attributes">Conditional attributes</a></li><li class="active"><a href="../documentation/event-handling">Event handling</a></li><li><a href="../documentation/dynamic-values-and-update">Dynamic values & Update</a></li><li><a href="../documentation/state-values">State values</a></li></ul></li><li><span>Helpers</span><ul><li><a href="../documentation/what-is-a-helper">What is a Helper?</a></li><li><a href="../documentation/effect-helper">Effect helper</a></li><li><a href="../documentation/conditional-rendering">Conditional Rendering</a></li><li><a href="../documentation/repetition-and-lists">Repetition & Lists</a></li><li><a href="../documentation/is-isnot-helpers">Is & IsNot helpers</a></li><li><a href="../documentation/or-and-oneof-helpers">Or, And, & OneOf helpers</a></li><li><a href="../documentation/pick-helper">Pick helper</a></li><li><a href="../documentation/suspense-helper">Suspense helper</a></li><li><a href="../documentation/custom-helper">Custom helper</a></li></ul></li><li><span>Capabilities</span><ul><li><a href="../documentation/function-components">Function Components</a></li><li><a href="../documentation/web-components">Web Components</a></li><li><a href="../documentation/server-side-rendering">Server Side Rendering</a></li><li><a href="../documentation/state-store">State Store</a></li></ul></li></ul><a href="../documentation/event-handling" class="mobile-menu-close"></a></div><article><h2 id="event-handling" class="heading"><a href="#event-handling">Event handling</a></h2><p>Event handling remains close to the native way but enhanced withactive listeners instead. Think about it more like an inline<a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener</a>more than anything.</p><div class="code-snippet"><pre><code class="language-typescript theme-hybrid hljs" data-highlighted="yes"><span class="hljs-keyword">const</span> <span class="hljs-title function_">handleClick</span> = (<span class="hljs-params">evt: Event</span>) => {evt.<span class="hljs-title function_">preventDefault</span>();evt.<span class="hljs-title function_">stopPropagation</span>(); | ||
}html`<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"</span></span></span><span class="hljs-subst">${handleClick}</span><span class="language-xml"><span class="hljs-tag"><span class="hljs-string">"</span>></span>click me<span class="hljs-tag"></<span class="hljs-name">button</span>></span>`</span> | ||
<span class="hljs-comment">// renders: <button>click me</button>`</span></code></pre></div><p>The inline event attributes are removed during parsing before theDOM element is created and will never show on the page.</p><p>All event attributes must start with <code>on</code> keywordfollowed by the name of the event. This is nothing specific to thislibrary but something native to HTML.</p><p>The value of this attribute must be a function of any type.</p><h3 id="custom-events" class="heading"><a href="#custom-events">Custom events</a></h3><p>You may also listen to custom events just like you would with nativeones. The pattern remains the same and you get a<code>CustomEvent</code> instead of an <code>Event</code> instance.</p><div class="code-snippet"><pre><code class="language-typescript theme-hybrid hljs" data-highlighted="yes"><span class="hljs-keyword">const</span> <span class="hljs-title function_">handleClick</span> = (<span class="hljs-params">evt: CustomEvent</span>) => {<span class="hljs-comment">// handle here</span> | ||
}html`<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">my-button</span> <span class="hljs-attr">onclicked</span>=<span class="hljs-string">"</span></span></span><span class="hljs-subst">${handleClick}</span><span class="language-xml"><span class="hljs-tag"><span class="hljs-string">"</span>></span>click me<span class="hljs-tag"></<span class="hljs-name">my-button</span>></span>`</span> | ||
<span class="hljs-comment">// renders: <button>click me</button>`</span></code></pre></div><h3 id="event-options" class="heading"><a href="#event-options">Event options</a></h3><p>One thing that you cannot do natively in HTML, but you can with thislibrary is providing<a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#options">event listener options</a>.</p><div class="code-snippet"><pre><code class="language-typescript theme-hybrid hljs" data-highlighted="yes"><span class="hljs-keyword">const</span> <span class="hljs-title function_">handleClick</span> = (<span class="hljs-params">evt</span>) => {<span class="hljs-comment">// will only get called once</span> | ||
}html`<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"</span></span></span><span class="hljs-subst">${handleClick}</span><span class="language-xml"><span class="hljs-tag"><span class="hljs-string">, </span></span></span><span class="hljs-subst">${{once: <span class="hljs-literal">true</span>}}</span><span class="language-xml"><span class="hljs-tag"><span class="hljs-string">"</span>></span>click me<span class="hljs-tag"></<span class="hljs-name">button</span>></span>`</span> | ||
<span class="hljs-comment">// renders: <button>click me</button></span></code></pre></div><p>All you need to do is add a comma followed by the option you want toprovide to the listener.</p></article></div></main><footer class="wrapper"><ul class="learning-resources"><h5>Learning Resources</h5><li><a href="../documentation">Documentation</a></li><li><a href="../documentation/essential-training.html">Essential Training</a></li><li><a href="../documentation/tutorial.html">Tutorial</a></li><li><a href="../documentation/examples.html">Examples</a></li></ul><ul class="about-bfs"><h5>About <em>Before Semicolon</em></h5><li><a href="https://github.com/beforesemicolon" rel="noopener" target="_blank">Open Source</a></li><li><a href="https://beforesemicolon.com/" rel="noopener" target="_blank">Website</a></li><li><a href="https://medium.com/before-semicolon" rel="noopener" target="_blank">Blog</a></li><li><a href="https://www.youtube.com/channel/UCrU33aw1k9BqTIq2yKXrmBw" rel="noopener" target="_blank">YouTube Channel</a></li><li><address aria-label="social-media"><a href="https://medium.com/before-semicolon" rel="noopener" target="_blank"><img src="../assets/medium2.svg" alt="Medium blog" width="20"></a><a href="https://www.facebook.com/beforesemicolon/" rel="noopener" target="_blank"><img src="../assets/facebook.svg" alt="Facebook" width="20"></a><a href="https://www.instagram.com/before_semicolon_/" rel="noopener" target="_blank"><img src="../assets/instagram.svg" alt="Instagram" width="20"></a><a href="https://www.reddit.com/r/beforesemicolon/" rel="noopener" target="_blank"><img src="../assets/reddit.svg" alt="Reddit" width="20"></a><a href="https://twitter.com/BeforeSemicolon" rel="noopener" target="_blank"><img src="../assets/twitter.svg" alt="Twitter" width="20"></a><a href="https://www.youtube.com/channel/UCrU33aw1k9BqTIq2yKXrmBw" rel="noopener" target="_blank"><img src="../assets/youtube.svg" alt="YouTube" width="20"></a></address></li></ul><div class="copyright"><img src="../assets/before-semicolon-logo.png" alt="Before Semicolon logo"><p><small>Copyright © 2023 BeforeSemicolon. All rights reserved.</small></p></div></footer></body></html> | ||
<span class="hljs-comment">// renders: <button>click me</button></span></code></pre></div><p>All you need to do is add a comma followed by the option you want toprovide to the listener.</p></article></div></main><footer class="wrapper"><ul class="learning-resources"><h5>Learning Resources</h5><li><a href="../documentation">Documentation</a></li><li><a href="../documentation/essential-training">Essential Training</a></li><li><a href="../documentation/tutorial">Tutorial</a></li><li><a href="../documentation/examples">Examples</a></li></ul><ul class="about-bfs"><h5>About <em>Before Semicolon</em></h5><li><a href="https://github.com/beforesemicolon" rel="noopener" target="_blank">Open Source</a></li><li><a href="https://beforesemicolon.com/" rel="noopener" target="_blank">Website</a></li><li><a href="https://medium.com/before-semicolon" rel="noopener" target="_blank">Blog</a></li><li><a href="https://www.youtube.com/channel/UCrU33aw1k9BqTIq2yKXrmBw" rel="noopener" target="_blank">YouTube Channel</a></li><li><address aria-label="social-media"><a href="https://medium.com/before-semicolon" rel="noopener" target="_blank"><img src="../assets/medium2.svg" alt="Medium blog" width="20"></a><a href="https://www.facebook.com/beforesemicolon/" rel="noopener" target="_blank"><img src="../assets/facebook.svg" alt="Facebook" width="20"></a><a href="https://www.instagram.com/before_semicolon_/" rel="noopener" target="_blank"><img src="../assets/instagram.svg" alt="Instagram" width="20"></a><a href="https://www.reddit.com/r/beforesemicolon/" rel="noopener" target="_blank"><img src="../assets/reddit.svg" alt="Reddit" width="20"></a><a href="https://twitter.com/BeforeSemicolon" rel="noopener" target="_blank"><img src="../assets/twitter.svg" alt="Twitter" width="20"></a><a href="https://www.youtube.com/channel/UCrU33aw1k9BqTIq2yKXrmBw" rel="noopener" target="_blank"><img src="../assets/youtube.svg" alt="YouTube" width="20"></a></address></li></ul><div class="copyright"><img src="../assets/before-semicolon-logo.png" alt="Before Semicolon logo"><p><small>Copyright © 2023 BeforeSemicolon. All rights reserved.</small></p></div></footer></body></html> |
Oops, something went wrong.