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

Name	Default	Description
componentPath	'components/$type/$type.html'	Specifies the path to use to include components specified by the type attribute. Any occurrences of $type in the path will be replaced with the value of the type attribute.
preserveType	false	If true the type attribute will be copied from the component tag to the first top-level node in the template. If a string value is provided it will be used as the name of the target attribute. This can be useful for JavaScript that wants to query the DOM for component nodes.

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]