generator-mf

Yeoman Mashery Frontend (mf) Generators

This repository will hold the various yeoman generators to be used for Mashery Frontend.

The Mashery Frontend application architecture will allow for plugin based items that can be used with the application. The core of the application is built upon the FlightJS framework. We have created a base structure for each of these FlightJS parts that are to be used within Mashery Frontend. The goal is to have each part of Mashery Frontend extensible by any developer. When adding a new Mashery Frontend item, these generators will prove helpful to create the various stubs for these items.

Requirements

You should ensure the following is installed prior to using these generators.

• Node and NPM
  • Navigate to http://nodejs.org and proceed with the download and install of node.js
• Yeoman
  • npm install -g yo

  If you have problems with permissions try: sudo npm install -g yo

Generators

To install the generators we can install the base generator which will include all possible items that can be generated.

Clone this repo, change to the clone directory and run the following command:

npm install -g

> If you have problems with permissions try: ```sudo npm install -g```

Basic usage will prompt you in a wizard like style if invoking the Mashery Frontend generator.

• Base

  Usage:: yo mf

  This will provide you with a prompt on what to generate (ie. page, plugin, theme, data, component or mixin) and additionally ask the name of what you want to generate.

• Page

  Will generate a stub Mashery Frontend web page application.

  The generated base structure of a component will reside as follows: / app/ build/ .json .config.js replace.css.html replace.js.html require_config.json require_wrap_end.js require_wrap_start.js ... other files excluded from this document for brevity components/ ... view components go here data/ ... data components go here lib/ component.js component_data.js cpt.js debug.js mixins/ with_data.js with_fetch.js with_log.js with_plugin_view.js with_resource.js with_style.js with_tabs.js with_view.js ... other files excluded from this document for brevity resources/ en_us.js styles/ style.scss utilities/ plugins/ view.js view_lite.js ... other plugin types go here (current they have to be manually created) log.js file.js observable.js plugins.js settings.js themes.js utilities.js ... other files excluded from this document for brevity views/ view.mustache ... other files excluded from this document for brevity app.js app.test.js index.html bin/ npm_postinstall.sh npm_preinstall.sh dev/ .json.default ... other files excluded from this document for brevity doc/ README.md grunt/ tasks/ ... store custom grunt tasks here aliases.js ... other files excluded from this document for brevity plugins/ ... plugins go here themes/ ... themes go here .bowerrc .gitignore .jshintrc bower.json Gruntfile.js index.html karma.conf.js package.json README.md test-main.js

• Component

  Will generate a stub Flight component and related files with a provided name which contains the necessary base files as well as the directory structure for Mashery Frontend to read from. An empty Style, Template, Locale and Unit Testing file is included with the stub generation.

  The generated base structure of a component will reside as follows: app/ components/ / main.js main.test.js resources/ en_us.json styles/ style.scss views/ view.mustache

  Usage: yo mf:component <SOME COMPONENT NAME>

  Example: yo mf:component foo OR yo mf:component 'my super component' OR yo mf:component some_custom_component

• Data

  Will generate a stub Flight component and Unit Testing file is included with the stub generation.

  The generated base structure of a data component will reside as follows: app/ data/ / main.js main.test.js

  Usage: yo mf:data <SOME DATA COMPONENT NAME>

  Example: yo mf:data foo OR yo mf:data 'my super data component' OR yo mf:data some_custom_data_component

• Mixin

  Will generate a stub mixin with a provided name. An empty base mixin and Unit Testing file is included with the stub generation.

  The generated base structure of a component will reside as follows: app/ mixins/ with_.js

  Usage: yo mf:mixin <SOME MIXIN NAME>

  Example: yo mf:mixin foo OR yo mf:mixin 'my super mixin' OR yo mf:mixin some_custom_mixin

• Theme

  Will generate a theme folder with a provided name, a manifest file and stub Flight component for each app component which contains the necessary base files as well as the directory structure for Mashery Frontend to read from.

  The generated base structure of a theme will reside as follows: themes/ / main.js main.test.js components/ ... component directories for existing app component containing their respective parts (see above Component structure) resources/ en_us.json styles/ _mixins.scss style.scss views/ style.mustache

  Usage: yo mf:theme <SOME THEME NAME>

  Example: yo mf:theme foo OR yo mf:theme 'my super theme' OR yo mf:theme some_custom_theme

• Plugin

  Will generate a stub plugin and related files with a provided type and name.

  The generated base structure of a baic plugin will reside as follows: plugins/ / main.js

  Usage: yo mf:plugin <SOME PLUGIN NAME> <SOME PLUGIN TYPE>

  Example: yo mf:plugin foo sometype OR yo mf:plugin 'my super plugin' sometype OR yo mf:plugin some_custom_plugin sometype

  The generated base structure of a view_lite plugin will reside as follows: plugins/ / main.js

  Usage: yo mf:plugin <SOME PLUGIN NAME> view_lite

  Example: yo mf:plugin foo view_lite OR yo mf:plugin 'my super plugin' view_lite OR yo mf:plugin some_custom_plugin view_lite

  The generated base structure of a full view plugin will reside as follows: plugins/ / main.js resources/ en_us.json styles/ style.scss views/ view.mustache

  Usage: yo mf:plugin <SOME PLUGIN NAME> view

  Example: yo mf:plugin foo view OR yo mf:plugin 'my super plugin' view OR yo mf:plugin some_custom_plugin view

You should now be able to start building with Mashery Frontend.

Enjoy!

• David