lightview

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="//codepen.io/CodePenTemplates/pen/GNoNGy.css" /> <link rel="stylesheet" href="//codepen.io/CodePenTemplates/pen/XNXpgM.css" /> </head> <body> <section class="markdown-body"> <meta name="viewport" content="width=device-width, initial-scale=1"> <base target="_tab"> <style> .markdown-body { margin:opx; padding: 0px; max-width: 100%; } </style> <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/styles/default.min.css"> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://kit.fontawesome.com/aee33b06ff.js" crossorigin="anonymous"></script> <div style="position:fixed;min-width:100%;opacity:1;background:white;margin-top:0px;height:1.50em;z-index:10;"><a href="https://lightview.dev">lightview.dev</a> v1.8.1b (BETA)</div> <div id="TOC" style="position:fixed;top:3em;max-height:97%;height:97%;opacity:1;max-width:275px;"> <div id="header" "font-size:125%;font-weight:bold;">  << </div> <div class="toc" style="border:1px solid grey;margin-right:5px;border-radius:5px;overflow-x:hidden;overflow-y:auto;background:whitesmoke"> </div> </div> <div id="content" style="float:right;padding-top:0px;padding-right:10px;max-height:100vh;overflow:auto;opacity:1;position:relative;left:10px;top:3px"> <h3 id="introduction-to-lightview">Introduction to Lightview</h3> Small, simple, powerful web UI and micro front end creation ... Great ideas from Svelte, React, Vue and Riot plus more combined into one small tool: 7.5K (minified/gzipped) A ToDo demo does not get much simpler than this: <a href="https://codepen.io/anywhichway/details/ExQPYZL">lightview-todo</a> <pre height="100"><code src="./examples/todo.html"></code></pre> <h4 id="what-you-get">What You Get</h4> <ol> <li>Single file and <a href="#local-templates" target=_self>template</a> components. </li> <li><a href="#sandboxed-components">Sandboxed remote components</a> and micro front ends</a>. </li> <li><a href="#unit-testing">Unit testable</a> components and a <a href="#debugging">debug mode</a> for using standard JavaScript debuggers</a>. </li> <li>No pre-deployment transpilation/compilation required. </li> <li>Svelte like variable usage, i.e. write your state modifying code like normal code. </li> <li>Extended variable type declarations including <code>min</code>, <code>max</code> and <code>step</code> on <code>number</code> or limits on <code>string</code> and <code>array</code> lengths. </li> <li><a href="#variables">TypeScript like</a> runtime type checking of variables in components. </li> <li>Automatic server retrieval and update of variables declared as <code>remote</code>. </li> <li>Automatic import, export, cross-component sync, or reactive response to attributes/props/variables. See <a href="#super-variable">superVariable</a>. </li> <li><a href="#auto-binding-inputs-and-forms">Automatic input field variable creation and binding</a>. </li> <li><a href="#attribute-directives">Attribute directives</a> like <code>l-if</code>, and a single powerful <code>l-for</code> that handles array and object keys, values, and entries. </li> <li>Reactive string template literals for content and attribute value replacement. </li> <li>No virtual DOM. The Lightview dependency tracker laser targets just those nodes that need updates. </li> <li>SPA, and MPA friendly ... somewhat SEO friendly and short steps away from fully SEO friendly. </li> <li>A <a href="components">component library</a> including charts and gauges that work in Markdown files. </li> <li>Lots of live <a href="#examples">editable examples</a>. If you like what you get on the front-end with <code>Lightview</code>, check out our back-end reactive framework <code>Watchlight</code> at <a href="https://watchlight.dev">https://watchlight.dev</a>. </li> </ol> <h4 id="usage">Usage</h4> Install it from <a href="https://www.npmjs.com/package/lightview">NPMJS</a>. Or, visit the repository on <a href="https://www.github.com/anywhichway/lightview">GitHub</a>. Note, we will actively iterate on CodePen and the NPM or GitHub versions may not be the most recent. If you want the bleeding edge <a href="https://000686818.codepen.website/lightview.js">download it from CodePen</a> and include it in your build pipeline. It should be evident from the todo example above, Lightview components are just HTML files similar to Riot or Vue's SFCs. And, for the most part, the code you write looks like regular JavaScript ... we modeled this on Svelte. The script blocks in these files are set to type <code>lightview/module</code> and inside them the variable <code>self</code> is bound to the component. The HTML in the files is rendered in a shadow DOM node and the style blocks and scripts are isolated to that shadow DOM. You use the components in other files by inserting the Lightview script in the head of the file where you want ot use the component and load the components using <code>link</code> tags, e.g. <pre><code><head> <link href="../components/gantt/gantt.html" rel="module"> <script src="./lightview.js"></script> </head> <body> <l-gantt id="myChart" style="height:500px;" title="Research Project" hidden l-unhide> { options: { }, rows: [ ['Research', 'Find sources',"2015-01-01", "2015-01-05", null, 100, null], ['Write', 'Write paper',null,"2015-01-09", "3d", 25, 'Research,Outline'], ['Cite', 'Create bibliography',null, "2015-01-07","1d" , 20, 'Research'], ['Complete', 'Hand in paper', null, "2015-01-10", "1d" , 0, 'Cite,Write'], ['Outline', 'Outline paper', null, "2015-01-06", "1d" , 100, 'Research'] ] } </l-gantt> </body> </code></pre> You can do the same in a Markdown file, just leave out the <code>head</code> and <code>body</code> tags. You can see the <a href="examples/markdown.md">source of a Markdown file</a>, or <a href="examples/markdown.html">see it rendered</a>. <h3 id="api">API</h3> <a id="variables"></a> <h4 id="variables">Variables</h4> Much of the power of Lightview comes from its expressive variable declarations. You can use the normal declarations <code>var</code>, <code>let</code>, and <code>const</code> for data that only needs to be present within a script block. For other data, you need to declare variables using <code>self.variables(options)</code>. <pre><code class="language-javascript">Object self.variables( {[name:string]:dataType:string, [ ...]}, [{[functionalType]:boolean|string|object, ...}] ); </code></pre> The available <code>dataTypes</code> are <code>"any"</code>, <code>"array"</code>, <code>"boolean"</code>, <code>"number"</code>, <code>"object"</code>, <code>"string"</code>. You can also provide any object constructor like, <code>Array</code>. <code>FunctionalTypes</code> apply behaviors to variables. The available <code>functionalTypes</code> are <code>shared</code>, <code>reactive</code>, <code>imported</code>, <code>exported</code>, <code>observed</code>, <code>remote</code>, <code>set</code>, <code>constant</code>. These are reserved words and, with the exception of <code>set</code> and <code>constant</code>, are themselves functions that configure variable behavior. If a varibable is <code>required</code>, <code>set</code> or <code>constant</code> DO NOT need to be present. The <code>required</code> is enforced when attempts are made to set the variable. <code>set</code> can take any value that is consistent with the <code>dataType</code> of the variable(s) it is used with. <code>constant</code> can take any value that is consistent with the <code>dataType</code> of the variable(s) it is used with. <code>set</code> and <code>constant</code> can't be used together. See <a href="#more-on-remote-variables">More On Remote Variables</a> for details on the <code>string</code> and <code>object</code> value configuration options for <code>remote</code>. As a result of the use of the variable definition approach, Lightview variable declarations look very much like <code>TypeScript</code>. <a id="super-variable"></a> You would probably never make a variable this powerful, but the below illustrates the use of most of the types of variables. <pre><code class="language-javascript">self.variables({superVariable:"number"}, { set:1, imported, exported, shared, reactive, observed, remote:remote("./superVariable")}); observe(() => { console.log("superVariable changed to:",superVariable); }); </script> </code></pre> Note: <code>lightview/module</code> code is sensitive to the use/lack of of semi-colons. When in doubt, terminate your statements with semi-colons. Also, since since Lightview compiles your code into an asynchronous function, top level <code>await</code> is supported. Runtime type checking will be applied to ensure <code>superVariable</code> is always a number or can be coerced to a number. There is an example for <a href="#type-checking">type checking</a>. It will initially be set to 1 and then an attempt to import a value from the attributes of the component will be made. If no attribute by the name of the variable exists, the value will remain 1. Any time it changes, its value will be <code>exported</code> back up to the attributes. The value will also be <code>shared</code> with all instances of the same component and <code>reactive</code> HTML will be re-rendered. Also see the example <a href="#sharing-state">Sharing State</a>. Reactive HTML is any HTML, including attribute values (with the exception of the <code>name</code> attribute on input elements), that contains a reference or references to a variable inside a template literal. Because <code>superVariable</code> is <code>observed</code> you can also call <code>addEventListener(callback)</code> to register a listener that will be called any time the attribute <code>superVariable</code> changes. Attributes that are <code>observed</code> are automatically <code>imported</code>. If your needs are simple, you can just rely on <code>reactive</code> rather than define a callback using <code>addEventListener</code>. Because you declared <code>superVariable</code> as <code>reactive</code> and wrapped a function referencing it in <code>observe</code>, the function will be called every time <code>superVariable</code> changes. And, because you declared <code>superVariable</code> as <code>remote</code> at the relative URL <code>./superVariable</code>, its value will be retrieved from the server. Also, since you made it <code>reactive</code>, changes will be sent to the server as <code>PATCH</code> requests. <h5 id="extended-type-definitions">Extended Type Definitions</h5> There are extended type definitions that use the symbolic names of all the basic types, e.g. <code>string</code> vs <code>"string"</code>. These extended types can be used like their string named counterparts except they do not automatically coerce, or they can be used as functions for more sophisticated type checking, e.g. the basic types always attempt coercion, with extended types this is turned off by default, although you can turn in on. The declaration of <code>superVariable</code> above, might look like this: <pre><code class="language-javascript">const {number} = await import("./types.js"); self.variables( {superVariable:number}, // note, number is not quoted {imported:true, exported:true, shared:true, reactive:true, observed:true, remote:"./superVariable"} ); await superVariable; </code></pre> Or, if you want to coerce and constrain the value to a range, like this: <pre><code class="language-javascript">const {number} = await import("./types.js"); self.variables( {superVariable:number({coerce:true,min:0,max:1000})}, // note, how number is used as a function {imported:true, exported:true, shared:true, reactive:true, observed:true, remote:remote("./superVariable")} ); await superVariable; </code></pre> An example showing errors should help: <pre><code>const {string,number} = await import("./types.js"); self.variables({name:string({minlength:2,maxlength:20,required:true,default:"anonymous"}),age:number}); console.log(name); // will log "anonymous" try { name = "J"; // will throw an error since the value is too short } catch(e) { } try { name = null; // will throw an error since a value is required } catch(e) { } try { age = "10"; // will throw an error since the value is not a number } catch(e) { } name = "joe"; // will succeed age = 10; // will succeed </code></pre> The extended types include: <code>any({required?:boolean,whenInvalid?:function,default?:any})</code> <code>array({coerce?:boolean,required?:boolean,whenInvalid?:function,minlength?:number,maxlength?:number,default?:Array})</code> <ul> <li><code>minlength</code> defaults to <code>0</code></li> <li><code>maxlength</code> defaults to <code>Infinity</code></li> </ul> <code>boolean({coerce?:boolean,required?:boolean,whenInvalid?:function,default?:boolean})</code> <code>number({coerce?:boolean,required?:boolean,whenInvalid?:function,min?:number,max?:number,step?:number,allowNaN?:boolean,default?:number})</code> <ul> <li><code>min</code> defaults to <code>-Infinity</code></li> <li><code>max</code> defaults to <code>Infinity</code></li> <li><code>step</code> defaults to <code>1</code></li> <li><code>allowNaN</code> defaults to <code>true</code></li> </ul> <code>object({coerce?:boolean,required?:boolean,whenInvalid?:function,default?:object})</code> <code>remote(string|object)</code> Remote must be imported from <code>types.js</code> and SHOULD be called with a configuration. See <a href="#more-on-remote-variables">More On Remote Variables</a>. <code>string({coerce?:boolean,required?:boolean,whenInvalid?:function,minlength?:number,maxlength?:number,pattern?:RegExp,default?:string})</code> <ul> <li><code>minlength</code> defaults to <code>0</code></li> <li><code>maxlength</code> defaults to <code>Infinity</code></li> <li><code>pattern</code> ensures the value matches the RegExp prior to assignment</li> </ul> <code>symbol({coerce?:boolean,required?:boolean,whenInvalid?:function,default?:symbol})</code> All extended types have a default <code>whenInvalid</code> parameter which throws an error when an attempt to set the varibale to an invalid value is made. A custom function can be passed in that swallows the error and returns the existing value for the variable, or <code>undefined</code>, or some other value, for example: <pre><code class="language-javascript">const whenInvalid = (variable) => { return variable.value; } </code></pre> you could even go ahead and make the assignment but log a warning: <pre><code class="language-javascript">const whenInvalid = (variable,invalidValue) => { console.warn(`Assigning ${variable.name}:${variable.type.name||variable.type} invalid value ${invalidValue}); return newValue; } </code></pre> <h5 id="more-on-remote-variables">More On Remote Variables</h5> Below is an example of how simple it can be to set up remote sensor monitoring using remote variables. This example is talking to a simulator running on a Cloudflare Worker. The guages themselves are available in the Lightview <a href="components">component library</a>. <pre height="140"><code src="./examples/sensors/index.html" contentonly></code></pre> <iframe width="100%" height="225px" src="examples/sensors/index.html"></iframe> The easiest way to configure remote variables is to provide the absolute or relative unique URL to access the variable value, e.g. <pre><code class="language-javascript">const {remote} = await import("./types.js"); self.variables( {sensor1:object}, {remote:remote("./sensors/sensor1")} ); await sensor1; </code></pre> Note: You MAY need to await the remote variable after it is declared. Future use, e.g. in template literals, will NEVER need to be awaited. If you do not call <code>remote</code> during your variable declaration, the assumed path to the variable will be the current file path plus the variable name, e.g. <pre><code>const {remote} = await import("./types.js"); self.variables({sensor1:object}, {remote}); </code></pre> is the same as <pre><code>const {remote} = await import("./types.js"); self.variables({sensor1:object}, {remote:remote("./sensor1")}); </code></pre> If you call <code>remote</code> with a path that is terminates by a slash, then the variable name is appended to the path. <pre><code>const {remote} = await import("./types.js"); self.variables({sensor1:object}, {remote:remote("https://mysite.com/sensors/")}); </code></pre> is the same as: <pre><code>const {remote} = await import("./types.js"); self.variables({sensor1:object}, {remote:remote("https://mysite.com/sensors/sensor1")}); </code></pre> In some cases you may have an existing application that does not provide an easily addressable unique URL for each variable, in this case you can provide a configuration object providing a <code>get</code> method (as well as <code>patch</code> and <code>put</code> if the variable is reactive and sending updates to the server), along with an optional <code>path</code> and <code>ttl</code>. The <code>get</code> method should have the signature <code>get(path,variable)</code>. You can use the <code>path</code>, the variable definition contained in <code>variable</code>, and any variables within the closure of your method to create a URL and do your own <code>fetch</code>. Your <code>patch</code> method must parse the <code>fetch</code> response and return a Promise for JSON. The <code>patch</code> method should have the signature <code>patch({target,property,value,oldValue},path,variable)</code>. (Currently, remotely patched variables must be objects, in the future <code>{value,oldValue}</code> will also be legal for primitive variables). You can use data from the <code>target</code> object along with the <code>path</code>, the variable definition contained in <code>variable</code>, and any variables within the closure of your method to create a URL and do your own <code>fetch</code>. Your <code>patch</code> method must parse the <code>fetch</code> response and return a Promise for JSON. The <code>put</code> method should have the signature <code>put(target,path,variable)</code>. You can use data from the <code>target</code> object along with the <code>path</code>, the variable definition contained in <code>variable</code>, and any variables within the closure of your method to create a URL and do your own <code>fetch</code>. Your <code>put</code> method must parse the <code>fetch</code> response and return a Promise for JSON which is the current state of the variable on the server. The <code>ttl</code> is the number of milliseconds between server polls to refresh data. If you do not wish to poll the server, you could also implement <code>get</code> so that it establishes a websocket connection and update your variables in realtime. Here is an example of a custom remote variable configuration for polling sensor data: <pre><code class="language-javacript">const {remote} = await import("./types.js"); self.variables( { sensor1:object, sensor2:object }, { remote: remote({ path: "./sensors/", ttl: 10000, // get new data every 10 seconds get(path,variable) { // create a normalized full path to the sensor data const href = new URL(path + object.id,window.location.href).href; return fetch(href) .then((response) => { if(response.status===200) return response.json(); }) } }) } ); await sensor1; await sensor2; </code></pre> Here is partial example of a custom remote variable configuration for streaming data over a websocket: <pre><code class="language-javacript">const {remote} = await import("./types.js"); // use these in the UI so that it automatically updates self.variables({sensor1:object,sensor2:object},{reactive}); // use a variable to hold the websocket self.variables( { ws: object }, { remote: remote({ path: "./sensors", ttl: 10000, // get new data every 10 seconds async get(path,variable) { // only create one socket if(!ws) { // create a normalized full path to the sensor data const href = new URL(path,window.location.href).href.replace("https://","wss://"); ws = new WebSocket(href); // do websocketty stuff, ideally in a more robust way than this! ws.onmessage = (event) => { const {sensorName,value} = event.data; // assumes sensor1 and sensor2 are the names self.setVariableValue(sensorName,value); } // end websockety stuff return Promise.resolve(ws); // you must return a Promise for the socket } }) } ); await ws; </code></pre> Since using remote variables requires running a custom server, it is not possible to demonstrate on this CodePen hosted site. Below is the source code for a very basic custom NodeJS server that will respond appropriately to remote variable requests and updates for data stored in JSON files. The full demo can be found in the <a href="https://github.com/anywhichway/lightview">GitHub repository</a>. <pre height="100"><code src="./examples/remote-server.js" contentonly></code></pre> <h4 id="functions">Functions</h4> We already introduced <code>observe</code> above. There are several more functions available with Lightview and components created using Lightview. <h5 id="lightview">Lightview</h5> <code>Class Lightview.createComponent(name:string, node:HTMLElement [, {framed:boolean, observer:MutationObsever}])</code> <ul> <li>Creates a component, i.e. <code>customElement</code>, using the <code>node</code> contents as a template.</li> <li>See the example <a href="#local-templates">Local Templates</a>.</li> </ul> <code>HTMLCustomElement Lightview.bodyAsComponent([{as = "x-body", unhide:boolean, framed:boolean}])</code> <ul> <li>This function treats the body of an HTML document as a component and is typically called in a <code>DOMContentLoaded</code> event handler.</li> <li>A shorthand way of using this is to just passs the query string ``?as=x-body` to the Lightview loading script in the head of your document.</li> <li>Note, once a body is turned into a componet, its contents are in a <code>shadoDOM</code>, so using <code>document.getElementById</code> will not work. Instead, use <code>document.body.getElementById</code>. All components implement <code>getElementById</code>.</li> <li>The use of this method or the query string approach is ignored when a component is loaded as a subcomponet. Hence, you can use it to support the creation of unit testable components.</li> <li>See the example <a href="reactive-variables-and-encapsultated-style">Reactive Variables and Encapsultated Style</a>.</li> </ul> <code>void Lightview.whenFramed(callback:function [, {isolated:boolean}])</code> <ul> <li>Invokes <code>callback</code> when a component file detects it is being loaded in an <code>iframe</code>. </li> <li>If <code>isolated</code> is set to true, then there will be no communication with the parent window. Otherwise, message handling is automatically implemented.</li> <li>See the example <a href="#sandboxed-components">Sandboxed Components and Micro Front Ends</a>.</li> </ul> <h5 id="lifecycle-event-handlers">Lifecycle Event Handlers</h5> <code>self.addEventListener(eventName:string,callback:function)</code> <ul> <li>Adds the <code>callback</code> to be invoked when the <code>eventName</code> occurs. </li> <li>This is actually just the standard <code>HTMLElement.addEventLister</code>, as such, it is availabled as a method on the element when created with <code>document.create</code>. </li> <li>Valid <code>eventNames</code> include: <ul> <li><code>adopted</code> which will be invoked when a component is adopted by a document with the callback as <code>callback({type:"adopted",target:component})</code>.</li> <li><code>connected</code> which will be invoked when a component is added to a document DOM with the callback as <code>callback({type:"connected",target:component})</code>.</li> </ul> <blockquote> In order to prevent blocking, a number of Lightview component initialization functions are asynchronous. As a result, when a component is connected by the DOM, there may still be initialization work in flight. Once the Lightview <code>connected</code> event has fired, you can be sure all initialization work is complete. </blockquote> <blockquote> If you encouter errors that say custom methods on your components are not available to other components or external scripts, then try wrapping the code that accesses these methods in a <code>connected</code> event listener. </blockquote> <ul> <li><code>disconnected</code> which will be invoked when a component is removed from a DOM with the callback as <code>callback({type:"disconnected",target:component})</code>.</li> </ul> </li> </ul> <code>addEventListener(eventName:string,callback:function)</code> <ul> <li>Available in the context of <code>lightview/script</code>. Adds the <code>callback</code> to be invoked when the <code>eventName</code> occurs. </li> <li>This is a special <code>addEventListener</code> that deals with data and events internal to the component. </li> <li>Not preceded by <code>self.</code>. Just call directly. This is the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker/message_event">same way it works for web workers</a>. </li> <li>Valid <code>eventNames</code> include: <ul> <li><code>change</code> which will be invoked when variable values change with the callback as <code>callback({type:"change",target:component,variableName:string,value:any,oldValue:any})</code>.</li> </ul> </li> <li>See the example <a href="#sharing-xor-state">Sharing Exclusive Or State</a>. </li> </ul> <h5 id="component-variable-access">Component Variable Access</h5> You should be careful not to overload and shadow these functions by redefining them on your component. <code>Array self.getVariable()</code> <ul> <li>Returns an a copy of the internal structure of a variable or <code>undefined</code>. See <code>self.variables</code> below.</li> </ul> <code>Array self.getVariableNames()</code> <ul> <li>Returns an array of names of the currently defined variables for a component.</li> </ul> <code>any self.getVariableValue(variableName:string)</code> <ul> <li>Gets the current value of <code>variableName</code>. Returns <code>undefined</code> if the variable does not exist.</li> </ul> <code>boolean self.setVariableValue(variableName:string, value:any[, {coerceTo:string|function}])</code> <ul> <li>Sets a value for a <code>variableName</code>. Returns <code>true</code> if the variable already existed and <code>false</code> if not.</li> <li>If the variable already existed, the existing type is used and <code>coerceTo</code> is ignored.</li> <li>If the variable is created, the type is infered from the value or set to <code>coerceTo</code> (in case you want to use <code>any</code>).</li> </ul> <code>object self.variables({[variableName]:variableType,...}[,...]})</code> <ul> <li>Used to declare variables as described in the <a href="#variables">Variables</a> section above.</li> <li>Returns an <code>object</code>, the keys of which are variable names with the values being copies of the internal structure of the variable, e.g.</li> </ul> <pre><code class="language-javascript">self.variables({v1:"string"},{imported,shared}); /* returns { v1: {name: "v1", type: "string", imported:true, shared:true} } */ self.variables({v2:"number"},{exported,reactive}); /* returns { v2: {name: "v2", value:2, type: "number", exported:true, reactive:true} } */ </code></pre> <h5 id="other-component-methods">Other Component Methods</h5> Components are DOM nodes with a <code>shadowRoot</code> and have the standard DOM node capability, e.g. <code>getQuerySelector</code>. They also implement <code>getElementById</code> (which is normally only on a <code>document</code>). <a id="examples"></a> <h3 id="examples-of-use">Examples of Use</h3> All of the code examples on this site with a Reset button and LIVE label can be edited directly on the site. Or, you can open them in CodePen using the link above the example toward the right margin. Some examples are not implemented as Pens and can't be edited. <h4 id="reactive-variables-and-encapsultated-style">Reactive Variables and Encapsultated Style</h4> A basic example of Lightview to show how simple reactive UI development can be. If you declare variables as reactive, with the exception of the <code>name</code> attribute for input elements, any HTML referencing the variables will be automatically re-rendered. If you inspect the content of the rendered view, you will also see that this particular page has turned the body into a self rendering component called 'x-body'. The <code>name</code> attribute is excluded because making dynamic substitutions for <code>name</code> can result in VERY obscure code. <button onclick="resetPen('QWaOyXQ')">Reset</button> <a href="https://codepen.io/anywhichway/details/QWaOyXQ">lightview-counter</a> <ul> <li>Try modifying to put the count outside the button and change the button color.</li> <li>Try adding a reactive variable <code>color</code>, setting it to "red", and putting <code>background: ${color}</code> in the style.</li> </ul> <p class="codepen" data-height="390" data-theme-id="40735" data-default-tab="html,result" data-slug-hash="QWaOyXQ" data-editable="true" data-user="anywhichway" style="height: 390px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"> See the Pen <a href="https://codepen.io/anywhichway/pen/QWaOyXQ"> hcx-counter</a> by Simon Y. Blackwell (<a href="https://codepen.io/anywhichway">@anywhichway</a>) on <a href="https://codepen.io">CodePen</a>. <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script> <h4 id="auto-binding-inputs-and-forms">Auto Binding Inputs And Forms</h4> Lightview can automatically create variables based on form input field names and types. Any time you use a string literal in the <code>value</code> attribute of form inputs, Lightview checks to see if the entirety of the literal is a declared or undeclared variable. If it is undeclared, a reactive variable is automatically created. The variables are then bound to the form input. For radio buttons, it just checks to see if the <code>name</code> attribute matches a variable. (This is one of the reasons the <code>name</code> attribute on inputs can't also be a dynamically bound variable.) Note how the only variable declared in the Pen below is <code>color</code>, because it is used outside the context of an input value in the style attribute. <button onclick="resetPen('ExobKwx')">Reset</button> <a href="https://codepen.io/anywhichway/details/ExobKwx">lightview-form</a> <p class="codepen" data-height="1070" data-theme-id="40735" data-default-tab="html,result" data-slug-hash="ExobKwx" data-editable="true" data-user="anywhichway" style="height: 1070px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"> See the Pen <a href="https://codepen.io/anywhichway/pen/ExobKwx"> hcx-form</a> by Simon Y. Blackwell (<a href="https://codepen.io/anywhichway">@anywhichway</a>) on <a href="https://codepen.io">CodePen</a>. <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script> You can bind or autobind an object to the <code>value</code> attribute of a form and then bind the inputs to properties on the object using dot notation paths. Also note in this example the use of <code>observe</code> in the demo instrumentation rather than a <code>change</code> event listener. <p class="codepen" data-height="604.7999267578125" data-theme-id="40735" data-default-tab="html,result" data-slug-hash="XWZmpwX" data-editable="true" data-user="anywhichway" style="height: 604.7999267578125px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"> See the Pen <a href="https://codepen.io/anywhichway/pen/XWZmpwX"> lightview-form</a> by Simon Y. Blackwell (<a href="https://codepen.io/anywhichway">@anywhichway</a>) on <a href="https://codepen.io">CodePen</a>. <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script> <h4 id="attribute-directives">Attribute Directives</h4> Lightview supports <code>l-if</code>, <code>l-for</code>, and <code>:</code> (to handle custom boolean attributes). <button onclick="resetPen('WNdXgrw')">Reset</button> <a href="https://codepen.io/anywhichway/details/WNdXgrw">lightview-directives</a> <p class="codepen" data-height="1375" data-theme-id="40735" data-default-tab="html,result" data-slug-hash="WNdXgrw" data-editable="true" data-user="anywhichway" style="height: 1375px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"> See the Pen <a href="https://codepen.io/anywhichway/pen/WNdXgrw"> lightview--directives</a> by Simon Y. Blackwell (<a href="https://codepen.io/anywhichway">@anywhichway</a>) on <a href="https://codepen.io">CodePen</a>. <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script> <h4 id="targeted-anchorhref-imports">Targeted Anchor/HREF Imports</h4> Anchor elements that include an element <code>id</code> as a target can be used to import components and place them at the target. For security, the current implementation requires the components be hosted on the same server as the requesting file or you must set the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin">CORS attribute</a> <code>crossorigin</code> on your <code><a></code> element. (This is not a typical location for the <code>crossorigin</code> attribute). You MUST ABSOLUTELY TRUST the server from which you are loading anchor imported components. Components can navigate up out of the <code>shadowDom</code> and modify other areas of a page. For more on components that are loaded across origins, see <a href="#link-imports-and-nested-components">Link imports and Nested Components</a> and <a href="#sandboxed-components">Sandboxed Components</a>. <h5 id="same-origin-import">Same Origin Import</h5> Since importing through a Pen requires cross origin activity, there is no Pen, just this included example. <pre height="140"><code src="./examples/anchors.html"></code></pre> <h5 id="cross-origin-import">Cross Origin Import</h5> Pens are hosted on a separate server, so the <code>crossorigin</code> attribute is used below. <button onclick="resetPen('BaJYXRE')">Reset</button> <a href="https://codepen.io/anywhichway/details/BaJYXRE">lightview-anchor-crossdomain</a> <p cla