# j-Importer

> j-Import is a great component for importing HTML templates, scripts or styles according to the path and condition. The component can help with SPA applications because you can easily import templates,

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: en
Content-SHA256: 8d223fa57188534132d8b3e14c65cff52b97ea7a47068955c24dc932146edbd3
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

__j-Import__ is a great component for importing HTML templates, scripts or styles according to the path and condition. The component can help with SPA applications because you can easily import templates, scripts or styles dynamically.


__Configuration__:

- `if {String}` needs to contain a value
- `url {String}` relative/absolute URL to a subpage or subpart
- `reload {String}` a link to method in the global scope, it's executed if the __condition__ is valid
- `cleaner {Number}` (optional) idle time (in minutes) for running of cleaning (default: `0`)
- `clean {String}` (optional) a link to function, it's executed before the importer is cleaned
- `id {String}` a custom identifier for replacing `~ID~` phrases in the imported HTML (default: empty)
- __NEW__: `singleton {Boolean}` it handles only the one instance of importer according to the `path + if + url` (default: `false`)
- __NEW__: `parent {String}` it moves itself as a direct child of the `parent` selector
- __NEW__: `adapt {Boolean}` if `true` it calls the `reload:?/soemthing` method for the nested plugin instead of the current plugin (default: `false`)

__New update__:

j-Importer can contain `<script type="text/html">` with a content which will be evaluated as HTML if the condition will be valid.

__Good to know 1__:

- all `CLASS` and `~PATH~` phrases will be replaced by `config.path` or `config.if` automatically
- all `~ID~` phrases will be replaced by `config.id` automatically
- importer automatically replaces `<SCR>` elements to `<script>` elements only within `<script type="text/html">` template

__Good to know 2__:

If the part component isn't within scope then the value from the `config.if` will replace `?` characters in all config keys.

Use it with `<ui-component name="importer">`. When the component is not loaded yet, jComponent downloads it on first use from the address in `DEF.fallback` (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

```html example.html
<div>CURRENT VALUE: <ui-bind path="myvalue" config="html:value"></ui-bind></div>
<ui-component name="importer" path="myvalue" config="if:d3;url:https://d3js.org/d3.v4.min.js"></ui-component>

<script>

	var myvalue = '';

	setTimeout(function() {
		SET('myvalue', 'd3');
	}, 3000);

	setTimeout(function() {
		SET('myvalue', null);
	}, 5000);

	setTimeout(function() {
		// The component contains prevention for double import, so D3 won't be imported again.
		SET('myvalue', 'd3');
	}, 8000);

</script>
```