reshape-component v1.0.6

Reshape Component

[See also: reshape-components for a more Web Component style API]

This plugin is based on reshape-include and supports the same functionality. In addition it provides more component-like paramaterized includes by copying attributes and content from the component tag to the template.

For example, in the following use of component:

<component src="components/Card/Card.html" id="card1" class="active"></component>

The id and class attributes will be copied to the first top-level node in the components/Card/Card.html file.

Usage

While this plugin does everything reshape-include does and more, it is recommended for clarity's sake to use reshape-include for simple includes. In case both plugins are in use, this plugin should be loaded after reshape-include.

Using with Spike

Spike uses reshape-standard to configure Reshape. Configuration options for Reshape are passed from app.js, so to add reshape-component to a Spike project:

1. npm install reshape-component
2. Require reshape-component in app.js and add it to the config:

// ..
const htmlStandards = require('reshape-standard');
const reshapeComponent = require('reshape-component');

module.exports = {
    // ...
    reshape: htmlStandards({
    // ...
        appendPlugins: [
            reshapeComponent()
        ]
    })
};

Attributes

• The src and type attributes are used by the reshape-component plugin and will not be copied
• The class attribute will be appended to any existing class attribute
• All other attributes will be destructively copied

The type attribute

This attribute provides a convenience for specifying component types by a short name, e.g.:

<component type="Card" id="card1" class="active"></component>

is equivalent to:

<component src="components/Card/Card.html" id="card1" class="active"></component>

The path is configurable in the options passed to the plugin via the componentPath property.

Options

preserveType example

// configuring reshape-component:
reshapeComponent({ preserveType: 'data-component-type' })

<!-- defining a component template: -->
<div>
	<p>${content}</p>
</div>

<!-- using a component -->
<component type="Card">
	<content>Card One</content>
</component>

<!-- result -->
<div data-component-type="Card">
	<p>Card One</p>
</div>

Token substitution

Tokens can be used as placeholders in a template and will be substituted with content from the component. Tokens can be used for both plain text values and node trees as well.

Card template:

<div class="card" title="${card-name}">
	<h1>${card-title}</h1>
	<div>${card-body}</div>
</div>

Component that uses the template:

<component type="Card" class="active">
	<card-name>Card One</card-name>
	<card-title><span class="title">My Title</span></card-title>
	<card-body>My Body Content</card-body>
</component>

Result:

<div class="card active" title="Card One">
	<h1><span class="title">My Title</span></h1>
	<div>My Body Content</div>
</div>

Default values

Tokens can specify default values with the = character. It works a little differently depending on if the token is in the content of a node or if it is an attribute.

Card template:

<div class="card" title="${card-name}" ${hidden}="true">
	<h1>${card-title=Default title}</h1>
	<div>${card-body}</div>
</div>

• ${hidden}: since this is an attribute the = character must appear after the token. If <hidden> is not defined in the component then the result will be hidden="true"
• ${card-title}: the = character must appear inside the token. If <card-title> is not defined in the component then the result will be <h1>Default title</h1>

Notes

• The default parser converts tag names to lower case, so it is recommended to use token names that are all lower case
• If node content (as opposed to text content) is specified for a token that is used in an attribute, the result will simply be the string value, e.g. [Object object]