👩🎓 Level: Expert
Demo files provide the necessary entry points for patternplate to
identify your components correctly.
A component demo is a JavaScript file, that provides
module.exports.defaultpackage.json or pattern.json fileDemo files are assumend to be executable JavaScript according to your
browser targets, as patternplate does not perform additional transpilation
on them.
The smallest valid noop demo file is:
module.exports.default = () => {};
In practice you'll provide a function that creates components according
to your framework of choice. E.g. with React:
module.exports.default = () => React.createElement("h1", {children: ["Hello world"]});
Alternatively you can provide HTML and CSS via exports directly.
By convention patternplate will use html and css exports before considering
any output produced by default.
module.exports = {
default: () => {},
html: () => `<h1 class="hello-world">Hello World</h1>`,
css: () => `.hello-world { font-family: sans-serif; color: cornflowerblue; }`
}
You can also place HTML and CSS in demo.html and demo.css, so
the following is equivalent to the single file demo above:
❯ tree lib
lib
└── hello-world
├── demo.css # .hello-world { font-family: sans-serif; color: cornflowerblue; }
├── demo.html # <h1 class="hello-world">Hello World</h1>
├── demo.js # module.exports = {default: () => {}};
└── pattern.json # {name: "hello-world", version: "1.0.0"}
Meta data about your component can be provided in JSON format.
package.json and pattern.json files are read according to the
following rules:
package.json with patternplate object, in absence:pattern.json, in absencesourcemaps, repeat from 1, in absence:package.json
stringstringstring?string[]?string?{
"name": "button",
"version": "1.0.0",
"tags": ["Interaction", "Atom"],
"patternplate": {
"displayName": "Button"
}
}
pattern.json
stringstringstring?string[]?string?{
"name": "button",
"displayName": "Button",
"version": "1.0.0",
"tags": ["Interaction", "Atom"]
}