``` **Component config** You can specify a `$config` property on the object used to initialize a component. This enables you to specify per-component configurations. ```html

``` > Available configurations are: > - `reativeState` specifies the reactivity state of a component. One of `default`, `optimized`, or `unoptimized`. > - `name` specifies the name of the component. > - `locals` specifies data that should be treated as local to the root element and its offspring. > - `init` specifies a function to execute after the component has been initialized. > - `uninit` specifies a function to execute when the root element is removed from the DOM. > - `post` specifies a function to execute after all directives have been processed, including offspring's directives. **Nested scope** You can create nested scopes by using the `hx-data` directive on an offspring of a component: ```html

``` > `hx-data` exposes the following local properties, available to the component root and its offspring: > - `$name` If accessed from a nested scope, it retrieves the name of the current scope. Otherwise, it returns the name of the current component. > - `$componentName` retrieves the name of the current component. > - `$parent` retrieves the data associated with the parent of the current scope. Returns `undefined` if not accessed from a nested scope. --- ### `hx-component` **Example:** `

` **Structure:** `

` `hx-component` assigns a name to a component. **`evaluate` argument** **Example:** `

` Use the `evaluate` argument to instruct the directive to evaluate the specified expression. --- ### `hx-ref` **Example:** `

` **Structure:** `

` `hx-ref` stores a reference to the DOM element in the component using the specified key. The key is added to the `$refs` global magic property. --- ### `hx-locals` **Example:** `

...

` **Structure:** `

...

` `hx-locals` associates a local storage with the element. This storage is not reactive. --- ### `hx-post` **Example:** `

` **Structure:** `

` `hx-post` runs an expression after all directives on element, and offspring directives, have been executed. --- ### `hx-uninit` **Example:** `

` **Structure:** `

` `hx-uninit` runs an expression when an element is removed from the DOM. --- ### `hx-static` **Example:** `

` **Structure:** `

` `hx-static` runs an expression without keeping track of changes. --- ### `hx-effect` **Example:** `

` **Structure:** `

` `hx-effect` runs an expression and keeps track of changes. When changes occur elsewhere, the expression is re-run. --- ### `hx-bind` > Note: You are free to use the shorter ":" syntax: `:type="..."` **Example:** `` **Structure:** `` `hx-bind` sets the value of an attribute to the result of a JavaScript expression. The expression has access to all the keys of the component's data object, and will update every-time its data is updated. > Note: attribute bindings ONLY update when their dependencies update. The framework is smart enough to observe data changes and detect which bindings care about them. **`hx-bind` for boolean attributes** `hx-bind` supports boolean attributes in the same way as value attributes, using a variable as the condition or any JavaScript expression that resolves to `true` or `false`. For example: ```html ``` This will add or remove the `disabled` attribute when `myVar` is true or false respectively. Boolean attributes are supported as per the [HTML specification](https://html.spec.whatwg.org/multipage/indices.html#attributes-3:boolean-attribute), for example `disabled`, `readonly`, `required`, `checked`, `hidden`, `selected`, `open`, etc. > Note: If you need a false state to show for your attribute, such as `aria-*`, chain `.toString()` to the value while binding to the attribute. For example: `:aria-expanded="isOpen.toString()"` would persist whether `isOpen` was `true` or `false`. --- ### `hx-style` **Example:** ```html ``` **Structure:** ```html ``` `hx-style` sets the value of a style property on an element to the evaluated expression. --- ### `hx-class` > Note: You are free to use the shorter "." syntax: `.block="..."` **Example:** ```html ``` **Structure:** ```html ``` `hx-class` sets or removes a class name on an element based on the truthiness of the evaluated expression. --- ### `hx-text` **Example:** `` **Structure:** ` A promise, or promise-like object, may be returned and `hx-text` will wait for it to be resolved and the resulting value used. --- ### `hx-html` **Example:** `` **Structure:** ` A promise, or promise-like object, may be returned and `hx-html` will wait for it to be resolved and the resulting value used. > :warning: **Only use on trusted content and never on user-provided content.** :warning: > > Dynamically rendering HTML from third parties can easily lead to [XSS](https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting) vulnerabilities. > :loudspeaker: This directive supports `transitions` and `animations`. --- ### `hx-on` > Note: You are free to use the shorter "@" syntax: `@click="..."` **Example:** `` **Structure:** `` `hx-on` attaches an event listener to the element it's declared on. When that event is emitted, the JavaScript expression set as its value is executed. If any data is modified in the expression, other element attributes "bound" to this data, will be updated. > Note: You can also specify a JavaScript function name > - This directive exposes a `$event` context variable, representing the generated native event, accessible during the evaluation of the specified expression. > - When a function is specified, it is passed the generated event as the first argument. **Example:** `` This is equivalent to: `` **`keydown` modifiers** **Example:** `` You can specify specific keys to listen for using `keydown` modifiers appended to the `hx-on:keydown` directive. Note that the modifiers are kebab-cased versions of `Event.key` values. Examples: `enter`, `escape`, `arrow-up`, `arrow-down` > Note: You can also listen for system-modifier key combinations like: `hx-on:keydown.ctrl.enter="foo"` > Multiple keys can be combined for alternatives e.g. `hx-on:keydown.enter.space` > Character ranges can be specified e.g. `hx-on:keydown.a-z` `hx-on:keydown.0-9` > Character groups can be specified e.g. `hx-on:keydown.alpha` `hx-on:keydown.digit` **`.outside` modifier** **Example:** `

` When the `.outside` modifier is present, the event handler will only be executed when the event originates from a source other than itself, or its offspring. This is useful for hiding dropdowns and modals when a user clicks away from them. **`.prevent` modifier** **Example:** `` Adding `.prevent` to an event listener will call `preventDefault` on the triggered event. In the above example, this means the checkbox wouldn't actually get checked when a user clicks on it. **`.stop` modifier** **Example:** `

` Adding `.stop` to an event listener will call `stopPropagation` on the triggered event. In the above example, this means the "click" event won't bubble from the button to the outer `

`. Or in other words, when a user clicks the button, `foo` won't be set to `'bar'`. **`.self` modifier** **Example:** `

` Adding `.self` to an event listener will only trigger the handler if the `$event.target` is the element itself. In the above example, this means the "click" event that bubbles from the button to the outer `

` will **not** run the handler. **`.window` modifier** **Example:** `

` Adding `.window` to an event listener will install the listener on the global window object instead of the DOM node on which it is declared. This is useful for when you want to modify component state when something changes with the window, like the resize event. In this example, when the window grows larger than 768 pixels wide, we will close the modal/dropdown, otherwise maintain the same state. >Note: You can also use the `.document` modifier to attach listeners to `document` instead of `window` **`.once` modifier** **Example:** `` Adding the `.once` modifier to an event listener will ensure that the listener will only be called once. This is useful for things you only want to do once, like fetching HTML partials and such. **`.passive` modifier** **Example:** `` Adding the `.passive` modifier to an event listener will make the listener a passive one, which means `preventDefault()` will not work on any events being processed, this can help, for example with scroll performance on touch devices. **`.debounce` modifier** **Example:** `` The `.debounce` modifier allows you to "debounce" an event handler. In other words, the event handler will NOT run until a certain amount of time has elapsed since the last event that fired. When the handler is ready to be called, the last handler call will execute. The default debounce "wait" time is 250 milliseconds. If you wish to customize this, you can specify a custom wait time like so: ```html ``` --- ### `hx-model` **Example:** `` **Structure:** `` `hx-model` adds "two-way data binding" to an element. In other words, the value of the input element will be kept in sync with the value of the data item of the component. > Note: `hx-model` is smart enough to detect changes on text inputs, checkboxes, radio buttons, textareas, selects, and multiple selects. **`.number` modifier** **Example:** `` The `number` modifier will convert the input's value to a number. If the value cannot be parsed as a valid number, the original value is returned. **`.debounce` modifier** **Example:** `` The `debounce` modifier allows you to add a "debounce" to a value update. In other words, the event handler will NOT run until a certain amount of time has elapsed since the last event that fired. When the handler is ready to be called, the last handler call will execute. The default debounce "wait" time is 250 milliseconds. If you wish to customize this, you can specify a custom wait time like so: ```html ``` --- ### `hx-if` **Example:** `` **Structure:** `` For cases where `hx-show` isn't sufficient (`hx-show` sets an element to `display: none` if it's false), `hx-if` can be used to actually remove an element completely from the DOM. >**Note**: > - A `template` element is required for this directive. > - The template element must have a single direct child. > :loudspeaker: This directive supports `transitions` and `animations`. --- ### `hx-else` **Example:** ```html ``` **Structure:** `` The `hx-else` directive enables an `if-then-else` paradigm. A `hx-if` or `hx-else` directive is required to precede it. >**Note**: > - A `template` element is required for this directive. > - The template element must have a single direct child. > :loudspeaker: This directive supports `transitions` and `animations`. --- ### `hx-each` **Example:** ```html ``` **Structure:** ```html ``` `hx-each` is available for cases when you want to create new DOM nodes for each item in an array. >**Note**: > - A `template` element is required for this directive. > - The template element must have a single direct child. It exposes a `$each` local property with the following fields: - `count:` Retrieves the total count of the loop - `index:` Retrieves the current index - `value:` Retrieves the current value - `collection:` Retrieves the collection that is being iterated - `parent:` Retrieves the parent loop property, if any It can iterate over arrays, key-value associative objects, and integer ranges. A name can be specified for `$each.value` using the following syntax: ```html ``` A name can be specified for `$each.index` using the following syntax: ```html ``` #### Nesting `hx-each`s You can nest `hx-each` loops. For example: ```html ``` #### Iterating over an integer range Iteration over integers are supported. Example: ```html ``` > By default, the iteration range is from `0` to `value - 1`. Negative values can be specified. Example: ```html ``` > By default, the iteration range is from to `value + 1` to `0`. > :loudspeaker: This directive supports `transitions` and `animations`. --- ### `hx-show` **Example:** `

` **Structure:** `

` `hx-show` toggles the `display: none;` style on the element depending if the expression resolves to `true` or `false`. > :loudspeaker: This directive supports `transitions` and `animations`. --- ### `hx-cloak` **Example:** `

` `hx-cloak` attributes are removed from elements when InlineJS initializes. This is useful for hiding pre-initialized DOM. It's typical to add the following global style for this to work: ```html ``` ## Security If you find a security vulnerability, please send an email to [benplaeska@gmail.com]() `InlineJS` relies on a custom implementation using the `Function` object to evaluate its directives. Despite being more secure then `eval()`, its use is prohibited in some environments, such as Google Chrome App, using restrictive Content Security Policy (CSP). If you use `InlineJS` in a website dealing with sensitive data and requiring [CSP](https://csp.withgoogle.com/docs/strict-csp.html), you need to include `unsafe-eval` in your policy. A robust policy correctly configured will help protecting your users when using personal or financial data. Since a policy applies to all scripts in your page, it's important that other external libraries included in the website are carefully reviewed to ensure that they are trustworthy and they won't introduce any Cross Site Scripting vulnerability either using the `eval()` function or manipulating the DOM to inject malicious code in your page. ## License Licensed under the MIT license, see [LICENSE.md](LICENSE.md) for details.