A collection of Yeoman generators for Mashery Frontend components.
npm install generator-mfThis 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.
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`
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/
>
>
> 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/
>
> ... 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 ``
>
> 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 ``
>
> 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_
>
> Usage: `yo mf:mixin ``
>
> 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 ``
>
> 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 ``
>
> 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 ``
>
> 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 ``
>
> 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