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