∺ HingeJS - CLI Project Generator

Command line interface and Simple Single Page Application and code generator

Most of the features have been implemented. This is a work in progress until a 1.0.0 release.

What is this for?

This project generator creates a process to build web applications using web components. It can be in a single page application or traditional page links. The packaged services and custom elements are used to help make development easier. You can use any services or other custom element libraries.

Is this just another framework?

Technically it is not. The libraries used in development have little to no dependencies. Custom Elements allow you to build custom HTML tags using plain JavaScript only. Long gone are the days of having to copy HTML/CSS/JS and manually insert them for one piece of functionality. This is now done in one file and used as a custom HTML tag, native to the browser.

This generator sets you up so you have the following features available to you faster.

• Build/Bundle process
• Routing
• Services
• Web component suite
• CSS/JS linting
• Unit testing
• Web dev server
• HTML cached templates
• i18n translation process
• Templates generated for rapid development

Why use this

As lightweight as you can get! The build process has dev-dependencies but the core SPA JS bundled dist files are just a couple of helper services and some baseline elements all with zero(0) dependencies. What you end up with is a purely native, low overhead application with the latest and greatest JS has to offer. That means speed and a very small file size for a full production application.

To maintain the application the developer just needs to know JavaScript. There is no extra process, custom or made-up design, just ES6+ JavaScript.

Wiki

For more information, tips and guides visit:

• https://github.com/hingejs/generator/wiki

Related packages

• https://www.npmjs.com/package/@hingejs/services
• https://www.npmjs.com/package/@hingejs/webcomponents

Installation

Install this package globally

$ npm install @hingejs/generator -g

Quick use guide

Step 1 Generate a project in a folder called test

$ hingejs new test

Replace test with any folder name of your choosing

Step 2 Wait for the files to be copied and npm install to be completed

Step 3 Enter the new project folder

$ cd test

Step 4 Run the command to start development

$ npm start

Generate Project

New project

$ hingejs new <projectFolderName>

Folder name must be lowercase and allows for alpha-numeric, slashes(/), dashes(-) and underscores(_) characters.

Alias n

$ hingejs n <projectFolderName>

example with project folder name

$ hingejs new test

Options

| Command | ShortCut | Description | |:---------:|:---------:|:---------:| | --i18n | -i | Internationalize the new project | | --port | -p | Integer argument ( Default: 9000) |

Internationalization Info: https://developer.mozilla.org/en-US/docs/Glossary/I18N

Please note: You can always Internationalize your application later but it is recommended to do this from the beginning rather than updating during development. This CLI will not be able to do that for you so choose carefully from the start.

Examples:

$ hingejs new test --i18n

$ hingejs new test --port 7500

$ hingejs new test --i18n --port 7500

Once generated you can run the following command to start the project

$ cd <projectFolderName>
$ npm start

You can refer to the README.md file

Generate Files

New template file

$ hingejs generate <type> <name>

Alias g

$ hingejs g <type> <name>

Examples:

$ hingejs generate component <name>
$ hingejs generate element <name>
$ hingejs generate feature <name>
$ hingejs generate service <name>

$ hingejs g c <name>
$ hingejs g e <name>
$ hingejs g f <name>
$ hingejs g s <name>

Types

| Command | ShortCut | Description | |:---------:|:---------:|:---------:| | component | c | Components are project specific and have element/service dependencies | | element | e | Custom elements should be built dependency free to be used for any project | | feature | f | New route page for the application | | service | s | Singleton/Observable based services to manage business logic |

Options

| Command | ShortCut | Description | |:---------:|:---------:|:---------:| | --shadow | -s | Shadow dom for element |

example of option

$ hingejs generate element tool-tip --shadow

the shortcut command route

$ hingejs g e tool-tip -s

Generate Name Rules

Component and Elements

Follows rules for w3c custom elements. Must begin with an alpha character. Can be alpha-numeric, but must contain one hyphen(-).

$ hingejs generate component tool-tip

or

$ hingejs generate element tool-tip

tool-tip to be used as <tool-tip></tool-tip>

Services

Must be lowercase with hyphen's(-) to separate words.

$ hingejs generate service to-do

todo will become TodoService

to-do will become ToDoService

Using a service in the application you can do the following. Webpack is configured to resolve 'services' as an alias to the correct path of ./src/services/index.js.

import { TodoService } from 'services'

Features

Must be lowercase with directory separators(/). This structure will be generated in the features folder.

$ hingejs generate feature todo/home

todo will become todo/todo.js

todo/home will become todo/home.js