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-skatejsThe commands for running, testing and building your project are included in the generated README.
To generate a new project:
mkdir my-cool-component
cd my-cool-component
yo skatejsThis will walk you through any required configuration.
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-componentThis 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.
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-USwhere 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 (
<p>
{ t('key') }
</p>
);
}
}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:
header:
title: My Site
about: About meYou could access those values like so:
const t = createTranslationHelper(locale);
t('header.title'); // `My Site`
t('header.about'); // `About me`MIT © Alex LaFroscia
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent