Project Design

Here's a bit of info on some of the design decisions that were made for this generator and my reasoning behind them.

Including Skate as a Global Variable

Skate.js and its dependencies could easily be pulled into the application through Webpack, so that you would do something like this:

import { Component, h } from 'skatejs';

instead of this:

const { Component, h } = skatejs;

However, my use case with Skate.js is such that we will likely include multiple different bundles from multiple projects that all use this generator within a page. If every bundle were to include their own version of skate, it would be a little easier to set up...

<script src="/assets/header-with-all-deps.bundle.min.js"></script>
<script src="/assets/footer-with-all-deps.bundle.min.js"></script>

...but at the expense of including those dependencies twice even though that isn't necessary. Instead, I would rather do a tiny bit more setup:

<script src="/assets/skate-and-deps.min.js"></script>
<script src="/assets/header-only.bundle.min.js"></script>
<script src="/assets/footer-only.bundle.min.js"></script>

but avoid forcing my users to pay the price of downloading the library multiple times, no matter how small it is.

Escape Hatch: Use Webpack

If you find yourself in a situation where you would rather bundle everything into a single file, it's easy to do!

1. Remove the links unpkg.com from demo/index.html
2. Install Skate and the other dependencies

   yarn add skatejs skatejs-web-components

3. Import skatejs-web-components in src/index.js
4. Replace usage of Skate.js as a global with an import instead

An example src/index.js might look like this:

import 'skatejs-web-components';
import { define } from 'skatejs';

import MyComponent from './components/my-component/component.js';

define(MyComponent);

You'll need to replace the reference to skate as a global in each of your component.js files, plus src/index.js and src/util/style.js (and anywhere else you might have used it).