Include components in reshape templates
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 thecomponent 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.
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 bereshape-include
loaded _after_ .
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-componentreshape-component
1. Require 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()
]
})
};
`
* The src and type attributes are used by the reshape-component plugin and will not be copiedclass
* The attribute will be appended to any existing class attribute
* All other attributes will be destructively copied
attributeThis 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.
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.
`javascript`
// configuring reshape-component:
reshapeComponent({ preserveType: 'data-component-type' })
` ${content}html
Card One
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:
`html
${card-title}
${card-body}
`Component that uses the template:
`html
Card One
My Title
My Body Content
`Result:
`html
My Title
My Body Content
`$3
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
${card-title=Default title}
${card-body}
`*
${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 $3
* 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]`