Nuptial Predicament Mediation


    1.1.1 • Public • Published

    generator-skatejs NPM version Build Status Coverage Status

    Create Skate.js components with Webpack

    This generator sets up a project scaffold that helps with a number of things:

    • Creating an easy-to-use development environment through Storybook
    • Styling components through Sass
    • Localizing text
    • Testing component logic through Karma
    • Bundling a preparing a production package with Webpack 2


    Before you can install yeoman and this generator, make sure you have Node.js 6.7.0 or better installed, as well as the yarn package manager.

    With this complete, you can install the command line utilities that you need:

    yarn global add yo generator-skatejs

    The commands for running, testing and building your project are included in the generated README.

    Generating a new project

    To generate a new project:

    mkdir my-cool-component
    cd my-cool-component
    yo skatejs

    This will walk you through any required configuration.

    Adding more components to an existing project

    Since the practice of composing multiple components together is so common, this generator also allows you to add new components to an existing project.

    yo skatejs:component my-second-component

    This will create a new component and test file with the same structure as the first one.

    NOTE: The newly created component will be automatically imported for you through a codemod that modifies the src/index.js file. The way that it inserts newlines is not something that I can control; you might want to verify that the file looks okay after generating a new component.

    Adding translation files

    Depending on your site's needs, you might need to localize your UI so that it can be translated into multiple languages. This project includes a sub-generator for creating YAML files to store your translation keys, and helper functions to render those strings.

    You can create a new translation locale using:

    yo skatejs:translation en-US

    where en-US could be any locale identifier. This identifier is used to match against the value passed into the createTranslationHelper function, which would presumably be the current locale.

    The helper that is generated can then be imported and used like so, assuming your component has a locale prop:

    import createTranslationHelper from '../../util/translation.js';
    const { Component, h } = skate;
    export default class extends Component {
      renderCallback({ locale }) {
        const t = createTranslationHelper(locale);
        return (
            { t('key') }

    You can also use objects to namespace translation strings to keep things better organized. If you had a YAML file structure like this, for example:

      title: My Site
      about: About me

    You could access those values like so:

    const t = createTranslationHelper(locale);
    t('header.title'); // `My Site`
    t('header.about'); // `About me`


    MIT © Alex LaFroscia


    npm i generator-skatejs

    DownloadsWeekly Downloads






    Last publish


    • alexlafroscia