WindmillJS
The overcomplicated way to make something easy! The goal is to have reusable components for windmill projects. And since we want to #savetheweb a static page generator plugin for webpack has been created.
staticPageGenerator
The plugin will create a new *.html
file for each *.markup.js
and *.jsx
located in the src/page
directory of your project.
If a *.js
or *.global.js
exist that matches the name of *.markup.js
it will be included in the generated *.html
.
Template
It is possible to change the html template that the generator uses. Just pass a path to the new template as template
in the plugin options object. To populate the template with dynamic variables from webpack add a {{ foo }}
in the template and add a templateVariables
object in the webpack setup. The template will be used to generate all html pages.
Components
import <Component> from '@profriday/windmilljs/dist/components/<Component>';
Reusable React components. Uses Bootstrap 4 classes so make sure you import that in your project.
// In webpack.config.js
plugins: [
new WindmillHtmlExtractor({
template: 'path/to/template.html',
templateVariables: {
foo: 'bar'
}
})
]
Dev
Link local npm package for development
src
.. /components
.. .. /Card
// The component
.. .. .. Card.jsx
// Simple include for the component
.. .. .. index.js
// Storybook tests for development and documentation on how to use the component
.. .. .. stories.js
.. /plugin
.. .. /staticPageGenerator
.. .. .. helpers.js
.. .. .. index.js
.. .. .. template.html
Creating components
Add a new folder with the same structure as the Card component above. Storybook is used for viewing all components. To start storybook run command below.
npm run storybook
Build
npm run build
Distribute to npm
Commit everything to git and update the npm package version. <update_type>
is major
,minor
or patch
.
npm version <update_type>
npm publish
Inspiration and useful links
Inspired by Rinse
How to npm package
Check size of npm package