Component driven design
See chromatic blog post and storybook pages.
Component-Driven Development (CDD) is a development methodology that anchors the build process around components.
It is a process that builds UIs from the “bottom up” by starting at the level of components and ending at the level of pages or screens.
Component Story Format
The Component Story Format is an open standard for component examples based on JavaScript ES6 modules. This enables interoperation between development, testing, and design tools.
export default { title: 'atoms/Button' };
export const text = () => <Button>Hello</Button>;
export const emoji = () => <Button>😀😎👍💯</Button>;CommonJS and ES modules
Parcel accepts both CommonJS and ES modules as input, and can output one or more of these formats depending on what's declared in your package.json. To add an ES module target, add the module field to your package.json.
package.json:
{
"name": "my-library",
"version": "1.0.0",
"source": "src/index.js",
"main": "dist/main.js",
"module": "dist/module.js",
"devDependencies": {
"parcel": "latest"
}
}Now Parcel will output dist/main.js as a CommonJS module, and dist/module.js as an ES module. Tools that consume your library will choose whichever of these they support.
You can also use the file extension to indicate what type of module to output. The .mjs extension will produce an ES module, and the .cjs extension will produce a CommonJS module. This overrides the default behavior of the main field. The "type": "module" field can also be set in package.json to treat the main field as an ES module as well. See the Node.js docs for more details.
Links
Created on: 28th October, 2022
Last updated: 28th October, 2022
Tagged With: