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:

``html

`

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.

$3

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
1. Require reshape-component in app.js and add it to the config:

`javascript
// ..
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.:

`html

`

is equivalent to:

`html

`

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.

$3

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

`html





Card One


Card template:
`html


Component that uses the template:
`html

Card One
My Title
My Body Content

`

Result:
`html


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:
`html


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

Default title

* 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]`