generator-donejs

A Yeoman generator for your DoneJS application. Available generators are:

app to create a new DoneJS application
plugin to create a new DoneJS plugin
generator to create a new DoneJS generator project
component to create a CanJS component
supermodel to create a can-connect connection
module to generate a general purpose modlet

Using generators

Important: While this repository is a Yeoman generator it should only be used directly with the DoneJS cli instead of the yo command line.

With the CLI installed via

npm install donejs -g

The following commands are available. To initialize a new DoneJS related project:

donejs add app [projectname] create a new DoneJS application
donejs add plugin [projectname] create a new DoneJS plugin
donejs add generator [projectname] create a new generator project

Within a DoneJS application or plugin:

donejs add component to create a CanJS component
donejs add supermodel to create a can-connect connection
donejs add module to generate a general purpose modlet

donejs add app

Creates a new DoneJS application. Running this command will install dependencies and initial configuration.

donejs add app <folder>

Configuration

Most questions are to fill in values into the package.json and the defaults can be accepted. The following questions have special meaning:

Project main folder

This specifies the folder where your application's source code is contained. By default the value is src creating a file structure like:

- my-awesome-app/
  |
  ├ src/
    ├ index.stache

Generated folder

Using donejs add app will generate a folder that contains several files used for development. The following files are noteworthy:

development.html

An HTML file used to view the application in development mode without requiring server-side rendering. You can use this file instead of done-serve if your application doesn't require server-side rendering.

development.html uses hash based routing so that it can be used with any HTTP server.

production.html

An HTML file that will load the application in production mode. This is useful to test the application's build without server-side rendering, or in cases where you do not need server-side rendering, to serve the application to the end users.

Note: Opening this page before running donejs build will result in errors. Running that command should clear up the errors.

build.js

This is the build script for generating bundles for deploying the application to production. It uses steal-tools to create optimized bundles with progressive loading included by default.

Note: This file is modified by some generators such as donejs-cordova but can be edited by you as well.

src/index.stache

This is the root template for your application. Here you can:

Add <link>, <meta> and <title> elements in the head.
Use <can-import/> to import styles, define the Application ViewModel, import components, etc.

src/app.js

This module defines and exports the Application ViewModel. The Application ViewModel is the root ViewModel for the application, containing any state that is global. Since apps created using donejs add app are automatically bound to can-route, all properties on the Application ViewModel are bound to the URL by default.

This module is also where you will define your routes like so:

import route from "can-route";

// Other stuff here...

route("{page}", { page: "home" });

donejs add component

Generators a new can-component that can be used as a custom element in your application.

There are two forms to using this command:

donejs add component <name>.component will generate src/name.component. This is a single-file component using done-component.
donejs add component <name> will generator a folder src/name/ with the files:
- name.js: The JavaScript module.
- name.less: A less file for the component's styles.
- name.stache: A stache template.
- name.html: A demo page, used for developing this component in isolation.
- name-test.js: A JavaScript module that contains unit tests (by default using QUnit).
- test.html: A page which runs the tests in name-test.js.
- name.md: A markdown file, used to document the component.

donejs add supermodel

Generates a can-connect model. This model is an observable type, used to connect to a service layer.

donejs add module

Creates a generic modlet. This modlet can be used for any purpose and contains:

foo.js: The JavaScript module.
foo-test.js: A JavaScript module for writing unit tests.
test.html: A test page for running the tests in foo-test.js.
foo.md: A markdown file, for documenting the modlet.

donejs add plugin

Generates a new plugin project. This is useful for creating DoneJS plugins or any open-source project that uses StealJS and the modlet pattern.

Like donejs add app, the plugin generator scaffolds a project and puts the source code in a src/ folder (you can specify a different folder when running the generator).