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
:
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:
npm install reshape-component
- Require
reshape-component
inapp.js
and add it to the config:
// ..const htmlStandards = ;const reshapeComponent = ; moduleexports = // ... reshape: ;
Attributes
- The
src
andtype
attributes are used by thereshape-component
plugin and will not be copied - The
class
attribute will be appended to any existingclass
attribute - All other attributes will be destructively copied
type
attribute
The This attribute provides a convenience for specifying component types by a short name, e.g.:
is equivalent to:
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:
<!-- defining a component template: --> ${content} <!-- using a component --> Card One <!-- result --> 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:
${card-title} ${card-body}
Component that uses the template:
Card One My Title My Body Content
Result:
My Title My Body Content
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:
${card-title=Default title} ${card-body}
${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 behidden="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]