kristianmandrup / generator-aurelia-ts Goto Github PK

View Code? Open in Web Editor NEW

31.0 6.0 4.0 677 KB

Turbo Start generator for Aurelia apps

JavaScript 84.93% HTML 5.01% CSS 6.85% TypeScript 3.21%

generator-aurelia-ts's Introduction

Aurelia Turbo Start generator

Generate an Aurelia Quick Start project with:

Aurelia CLI
TypeScript definitions
SASS or Stylus
UI frameworks of your choice (Bootstrap, Foundation, F7, Semantic IO)
Aurelia Plugins installed and ready for use

Generators

aurelia-ts (new app)
aurelia-ts:decorate (decorate app)
aurelia-ts:plugins (add plugins)
aurelia-ts:cli (add CLI)
aurelia-ts:styles (add CSS preprocessors: SCSS/SASS/Stylus )
aurelia-ts:layout (add ui/layout framework:)
aurelia-ts:javascript (javascript app)
aurelia-ts:typescript (typescript app)
aurelia-ts:state (add state or stores)
aurelia-ts:amp - (add Ampersand models/collections)

Now includes IE9 support ;)

Compatibility

The genrator has been tested successfully on Node.js 0.12.7

We recommend that you use nvm to manage your system installed Node versions.

Install NVM

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.25.4/install.sh | bash

We highly recommend using IOjs or the latest Node.js (>0.12)

To install IOjs via NVM:

nvm ls-remote - list of Node and IOjs versions available
nvm install iojs - install latest IOjs
nvm alias default iojs - make iojs your default (optional)
node -v

Layout Frameworks

Run: yo aurelia-ts:layout

The layout generator currently supports:

Font frameworks

Font Awesome

CSS frameworks

Make a pull request to make the generator support your favorite alternative UI/Layout framework (see Contributing below).

TypeScript

We currently use Aurelia Typings as of August 17th, 2015.

We would like to soon integrate use of the aurelia-amd-bundler

Ideas on how to best achieve TypeScript support are most welcome!

Install

To install generator-aurelia-ts via npm, run:

npm install -g generator-aurelia-ts

Run

Create a folder for your app:

mkdir my-app
cd my-app

Initiate the app generator (default):

yo aurelia-ts

Note: If for some reason it tries to install in a parent folder, check out Issue #4

Answer the prompts in order to generate your Aurelia project to suit your preferences.

Generator arguments & options

You can pass the application name as the first argument

yo aurelia-ts my-app

Run with TypeScript --ts and Plugins --plugins generators auto enabled.

yo aurelia-ts --ts --plugins

CSS language extension options

The generator also supports SCSS, SASS (indented syntax) and Stylus via --scss, --sass and --stylus options

yo aurelia-ts --stylus

All of them could be passed in to the generator, then it is up to the user deal with the various preprocessors in one project.

Stylus plugins

We highly recommend watching these Stylus tutorial videos to get a feel and understanding of the power of using Stylus with plugins and get over the temptation to use Bootstrap or kin for all your styling needs. Break your bad habits ;)

UI framework option

You can also pass the UI framework as a --ui option

yo aurelia-ts --stylus --ui sem

The ui can take any of these shorthands: - bs Bootstrap - zurb Zurb Foundation - sem Semantic-UI - f7 Framework7

Prompts

You will be prompted for the following:

application name?
application title?
github account?
Author email?
Author name?
Install Aurelia CLI?
Install TypeScript?
Visual Studio?

TypeScript

After setting up the basic project structure, the main generator will ask if you want TypeScript. You can always add TypeScript to your project at any time by calling the typescript sub-generator.

yo aurelia-ts:typescript

Note: The typescript generator will clear your javascript files and rewrite the skeleton files as .ts files. Be sure you have committed your code before running any generator!

Plugins

Experimental support for installing around a dozen Aurelia plugins:

yo aurelia-ts:plugins

See jspm registry for predefined entries setup to be installed by name, such as: jspm install semantic-ui

Frameworks

Semantic-UI

For Semantic-UI you should reference /semantic/dist in app.js

// import '../semantic/dist'; // your themes and customizations

You can then customize your layout from within the /semantic folder using: - Build tools - Theming - Recipes

Contributing

As you add features, add yeoman tests

npm test

Use npm link to install it locally to test it as you develop ;)

Create a symbolic link to your local generator:

npm link generator-aurelia-ts

Now use the linked package and test it

yo aurelia-ts

Profit!

Adding your Favorite Framework to the generator

Example F7:

For the layout generator:

Add a new entry to the repoKeyMap at the top, such as:

var repoKeyMap = {
  ...,
  'Framework7': 'github:nolimits4web/Framework7@master'
}

Add the JSPM imports to templates/src/app.js. JSPM can load css via the JSPM CSS loader

See the framework7 distribution folder and use it to guide your ES2015 module imports.

Also check out the package.json for the project.

We can see, it has a main entry pointing to dist/js/framework7.js so we can safely import the js via import 'framework7';

The css imports needs to reference the dist folder structure directly.

We add the following to src/_ui.js template. The same template will be used for TS.

<% if (framework7) { %>
import 'framework7';
import 'framework7/css/framework7.ios.css!';
import 'framework7/css/framework7.ios.colors.css!';
<% } %>

Finally test that it all works by adding a unit test, such as:

test/test-layout-framework7.js

Then run npm test. If all tests pass, you can make a PR :)

Troubleshooting

If while developing the generator you get an error such as:

Uncaught SyntaxError: Unexpected token return

Most likely due to an EJS template error (typically a missing } in an if clause).

Contributors

TODO

Ideas for improvement are welcome :)

Update TypeScript generator according to aurelia-typescript-skeleton
Force npm install -g jspm@beta
Support for Aurelia's built in .d.ts files Issue #7
More UI frameworks ...??
Support for more editors/IDEs: Visual Studio, WebStorm etc.

License

MIT

generator-aurelia-ts's People

Contributors

Stargazers

Watchers

Forkers

telekosmos delebash leighghunt marveluck

generator-aurelia-ts's Issues

It keeps asking to install at the parent folder

Hi, even running the yo command from within a sub-folder, it always tries to install in the parent folder (from where I installed the generator globally) - http://screencast.com/t/GR3vFHgDx
Am I doing something wrong?

SyntaxError: Unexpected strict mode reserved word

I get the following whilst running yo:

/Users/lhunt/.npm-packages/lib/node_modules/generator-aurelia-ts/generators/styles/index.js:24
let log = info;
^^^
SyntaxError: Unexpected strict mode reserved word
    at exports.runInThisContext (vm.js:73:16)
    at Module._compile (module.js:443:25)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.defineProperty.get [as aurelia-ts:styles] (/Users/lhunt/.npm-packages/lib/node_modules/yo/node_modules/yeoman-environment/lib/store.js:40:23)
    at Store.get (/Users/lhunt/.npm-packages/lib/node_modules/yo/node_modules/yeoman-environment/lib/store.js:64:35)
    at Environment.get (/Users/lhunt/.npm-packages/lib/node_modules/yo/node_modules/yeoman-environment/lib/environment.js:227:21)

On Windows, the yeoman process then bails. On Mac, it carries on and finished building the scaffolding code.

The line in question seems to have been introduced in af6ad16#diff-1bf8f3a86bd849b9903ec499bf556b12R21 and removed in ca56d03#diff-1bf8f3a86bd849b9903ec499bf556b12L24.

Can I ignore the error message?

yo output:

dev % yo
? 'Allo Leigh! What would you like to do? Aurelia Ts

Make sure you are in the directory you want to scaffold into.
This generator can also be run with: yo aurelia-ts

? application (module) name: test
? application title: test
? github account: leighghunt
? Your email: ###########
? Your name: Leigh Hunt
? Install Styles: Yes
? Install Aurelia CLI: Yes
? Support IE9: Yes
? Visual Studio: No
? Install Aurelia Plugins: No
? Install TypeScript: No
? Install UI Frameworks: Yes
   create styles
    force test
   create /Users/lhunt/dev/test/e2e/dist/demo.spec.js
   create /Users/lhunt/dev/test/e2e/dist/skeleton.po.js
   create /Users/lhunt/dev/test/e2e/dist/welcome.po.js
   create /Users/lhunt/dev/test/e2e/src/demo.spec.js
   create /Users/lhunt/dev/test/e2e/src/skeleton.po.js
   create /Users/lhunt/dev/test/e2e/src/welcome.po.js
   create /Users/lhunt/dev/test/unit/app.spec.js
   create doc
   create /Users/lhunt/dev/doc/api.json
   create /Users/lhunt/dev/doc/CHANGELOG.md
   create src
   create build
   create /Users/lhunt/dev/build/args.js
   create /Users/lhunt/dev/build/babel-options.js
   create /Users/lhunt/dev/build/paths.js
   create /Users/lhunt/dev/build/tasks/build.js
   create /Users/lhunt/dev/build/tasks/clean.js
   create /Users/lhunt/dev/build/tasks/dev.js
   create /Users/lhunt/dev/build/tasks/doc.js
   create /Users/lhunt/dev/build/tasks/e2e.js
   create /Users/lhunt/dev/build/tasks/lint.js
   create /Users/lhunt/dev/build/tasks/prepare-release.js
   create /Users/lhunt/dev/build/tasks/serve.js
   create /Users/lhunt/dev/build/tasks/test.js
   create /Users/lhunt/dev/build/tasks/watch.js
   create package.json
   create index.html
   create aureliafile.js
   create src/app.js
   create .gitignore
   create README.md
    force .editorconfig
   create .jshintrc
    force .npmignore
   create aurelia.protractor.js
   create gulpfile.js
   create favicon.ico
   create config.js
   create jsconfig.json
   create karma.conf.js
   create protractor.conf.js
   create LICENSE

     _-----_
    |       |    .----------------------.
    |--(o)--|    |     Bye from us!     |
   `---------´   |      Chat soon.      |
    ( _´U`_ )    |                      |
    /___A___\    |      Yeoman team     |
     |  ~  |     |   http://yeoman.io   |
   __'.___.'__   '----------------------'
 ´   `  |° ´ Y ` 

/Users/lhunt/.npm-packages/lib/node_modules/generator-aurelia-ts/generators/styles/index.js:24
let log = info;
^^^
SyntaxError: Unexpected strict mode reserved word
    at exports.runInThisContext (vm.js:73:16)
    at Module._compile (module.js:443:25)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.defineProperty.get [as aurelia-ts:styles] (/Users/lhunt/.npm-packages/lib/node_modules/yo/node_modules/yeoman-environment/lib/store.js:40:23)
    at Store.get (/Users/lhunt/.npm-packages/lib/node_modules/yo/node_modules/yeoman-environment/lib/store.js:64:35)
    at Environment.get (/Users/lhunt/.npm-packages/lib/node_modules/yo/node_modules/yeoman-environment/lib/environment.js:227:21)
dev % 
warn Running jspm globally, it is advisable to locally install jspm via npm install jspm --save-dev.
     Looking up github:polymer/mutationobservers
     Updating registry cache...
ok   Installed polymer/mutationobservers as github:polymer/mutationobservers@^0.4.2 (0.4.2)
ok   Install tree has no forks.
     Looking up loader files...
       system.src.js
       system.js.map
       system.js
       system-polyfills.js
       system-csp-production.src.js
       system-polyfills.src.js
       system-csp-production.js
       system-polyfills.js.map
       system-csp-production.js.map

     Using loader versions:
       [email protected]
     Looking up npm:babel-core
     Looking up npm:babel-runtime
     Looking up npm:core-js

warn Using local override for npm:[email protected]
ok   Installed babel as npm:babel-core@^5.1.13 (5.8.22)
     Looking up github:jspm/nodelibs-process
     Looking up github:systemjs/plugin-json
     Looking up github:jspm/nodelibs-fs
ok   Installed github:jspm/nodelibs-process@^0.1.0 (0.1.1)
     Looking up npm:process
ok   Installed github:systemjs/plugin-json@^0.1.0 (0.1.0)
ok   Installed github:jspm/nodelibs-fs@^0.1.0 (0.1.2)
ok   Installed npm:process@^0.10.0 (0.10.1)
ok   Installed babel-runtime as npm:babel-runtime@^5.1.13 (5.8.20)
ok   Installed core-js as npm:core-js@^0.9.4 (0.9.18)
ok   Loader files downloaded successfully

ok   Install complete.

When i tried to create entity in project folder , getting the following error)

E:\iloads-old>yo jhipster:entity truckowner

events.js:163
throw er; // Unhandled 'error' event
^

TypeError: Cannot read property 'endsWith' of undefined
at constructor.getAngularAppName (C:\Users\Wdsi\AppData\Roaming\npm\node_modules\generator-jhipster\generators\generator-base.js:1520:65)
at constructor.getConfig (C:\Users\Wdsi\AppData\Roaming\npm\node_modules\generator-jhipster\generators\entity\index.js:142:40)
at Object. (C:\Users\Wdsi\AppData\Roaming\npm\node_modules\generator-jhipster\node_modules\yeoman-generator\lib\index.js:417:23)
at C:\Users\Wdsi\AppData\Roaming\npm\node_modules\generator-jhipster\node_modules\yeoman-generator\node_modules\run-async\index.js:25:25
at C:\Users\Wdsi\AppData\Roaming\npm\node_modules\generator-jhipster\node_modules\yeoman-generator\node_modules\run-async\index.js:24:19
at C:\Users\Wdsi\AppData\Roaming\npm\node_modules\generator-jhipster\node_modules\yeoman-generator\lib\index.js:418:9
at runCallback (timers.js:672:20)
at tryOnImmediate (timers.js:645:5)

port to aurelia beta1?

is that planned?

Error> events.js:141throw er; // Unhandled 'error' event on "yo aurelia-ts"

Hi, after upgrading to iojs-v3.0.0 I receive the below error when running yo aurelia-ts.
any ideas how to solve this?
Gerald

events.js:141
throw er; // Unhandled 'error' event
^

Error: spawn jspm ENOENT
at exports._errnoException (util.js:812:11)
at Process.ChildProcess._handle.onexit (internal/child_process.js:178:32)
at onErrorNT (internal/child_process.js:344:16)
at doNTCallback2 (node.js:429:9)
at process._tickCallback (node.js:343:17)

Aurelia now includes generated d.ts files

Just letting you know that as of recent Aurelia now provides d.ts files with the framework. There is a blog post on Aurelia's site describing this new feature of generating the d.ts files, although it is still a work in progress and may have some bugs.

Nice job, thanks!

Omitting or choosing SASS CSS Preprocessor causes "TypeError: Cannot read property 'plugins' of undefined" error

I just noticed using the latest version. If I accept all the defaults, _but omit selecting a processor, or select SASS_ when asked to choose one, the following error occurs. Choosing Stylus results in the generator completing successfully.

test-aurelia-ts4 % yo
? 'Allo Leigh! What would you like to do? Aurelia Ts

Make sure you are in the directory you want to scaffold into.
This generator can also be run with: yo aurelia-ts

? application (package) name: test
? title: test
? description: test
? github account: leighghunt
? Your name: Leigh Hunt
? Your email: ###############
? Support IE9: Yes
? Decorate the app? Yes
Writing app files...
copying /build -> /build
copying /doc -> /docs
copying /test -> /test
   create package.json
   create README.md
   create .gitignore
   create index.html
   create aureliafile.js
   create .editorconfig
   create .jshintrc
   create npmignore
   create aurelia.protractor.js
   create gulpfile.js
   create favicon.ico
   create config.js
   create jsconfig.json
   create karma.conf.js
   create protractor.conf.js
   create LICENSE
? Install Styles: (Y/n) 
warn Running jspm globally, it is advisable to locally install jspm via npm install jspm --save-dev.
? Install Styles: Yes
? Install Aurelia CLI: Yes
? Install Aurelia Plugins: (y/N)      Looking up github:polymer/mutationobservers
     Updating registry cache...
ok   Installed polymer/mutationobservers as github:polymer/mutationobservers@^0.4.2 (0.4.2)
ok   Install tree has no forks.
     Looking up loader files...
       system.js
       system.src.js
       system-polyfills.js
       system-csp-production.js.map
       system-polyfills.js.map
       system-csp-production.js
       system-polyfills.src.js
       system.js.map
       system-csp-production.src.js

     Using loader versions:
       [email protected]
     Looking up npm:babel-core
     Looking up npm:babel-runtime
     Looking up npm:core-js

warn Using local override for npm:[email protected]
ok   Installed babel as npm:babel-core@^5.8.20 (5.8.22)
     Looking up github:jspm/nodelibs-process
     Looking up github:jspm/nodelibs-fs
     Looking up github:systemjs/plugin-json
ok   Installed github:jspm/nodelibs-process@^0.1.0 (0.1.1)
     Looking up npm:process
ok   Installed github:jspm/nodelibs-fs@^0.1.0 (0.1.2)
ok   Installed github:systemjs/plugin-json@^0.1.0 (0.1.0)
ok   Installed npm:process@^0.10.0 (0.10.1)
ok   Installed babel-runtime as npm:babel-runtime@^5.8.20 (5.8.20)
ok   Installed core-js as npm:core-js@^0.9.4 (0.9.18)
ok   Loader files downloaded successfully

ok   Install complete.
? Install Aurelia Plugins: No
? Install TypeScript: No
? Visual Studio: No
? Install UI Frameworks: Yes
? CSS Preprocessors:                              // <=== either leave blank or choose SASS
? Remove old styles? No
? Use Jade Templates? No
? Font Awesome: Yes
? Layout frameworks: Bootstrap
? Primary layout framework: Bootstrap
? Install CLI in global registry: No
? Ampersand models and collections: Yes
copying /src -> /src
copying /styles/sass -> /styles/sass
copying /styles/stylus -> /styles/stylus
copying /styles/css -> /styles/css

     _-----_
    |       |    .----------------------.
    |--(o)--|    |     Bye from us!     |
   `---------´   |      Chat soon.      |
    ( _´U`_ )    |                      |
    /___A___\    |      Yeoman team     |
     |  ~  |     |   http://yeoman.io   |
   __'.___.'__   '----------------------'
 ´   `  |° ´ Y ` 

events.js:85
      throw er; // Unhandled 'error' event
            ^
TypeError: Cannot read property 'plugins' of undefined
    at styles (/Users/lhunt/.npm-packages/lib/node_modules/generator-aurelia-ts/generators/styles/write.js:25:86)
    at /Users/lhunt/.npm-packages/lib/node_modules/generator-aurelia-ts/lib/writer.js:12:28
    at Object.writeAll (/Users/lhunt/.npm-packages/lib/node_modules/generator-aurelia-ts/lib/writer.js:19:24)
    at module.exports.yeoman.generators.Base.extend.writing (/Users/lhunt/.npm-packages/lib/node_modules/generator-aurelia-ts/generators/styles/index.js:83:17)
    at /Users/lhunt/.npm-packages/lib/node_modules/generator-aurelia-ts/node_modules/yeoman-generator/lib/base.js:421:16
    at processImmediate [as _immediateCallback] (timers.js:367:17)
test-aurelia-ts4 %

getting unhandled error in events.js

When I run yo aurelia-ts, it creates an error:

? Ampersand models and collections: Yes
copying /src -> /src
copying /typings -> /typings
copying /styles/sass -> /styles/sass
copying /styles/stylus -> /styles/stylus
events.js:141
throw er; // Unhandled 'error' event
^
TypeError: Cannot read property 'plugins' of undefined
at styles (/Users/geraldf/.nvm/versions/io.js/v2.3.4/lib/node_modules/generator-aurelia-ts/generators/styles/write.js:25:86)
at /Users/geraldf/.nvm/versions/io.js/v2.3.4/lib/node_modules/generator-aurelia-ts/lib/writer.js:12:28
at Object.writeAll (/Users/geraldf/.nvm/versions/io.js/v2.3.4/lib/node_modules/generator-aurelia-ts/lib/writer.js:19:24)
at module.exports.yeoman.generators.Base.extend.writing (/Users/geraldf/.nvm/versions/io.js/v2.3.4/lib/node_modules/generator-aurelia-ts/generators/styles/index.js:83:17)
at /Users/geraldf/.nvm/versions/io.js/v2.3.4/lib/node_modules/generator-aurelia-ts/node_modules/yeoman-generator/lib/base.js:421:16
at processImmediate as _immediateCallback

SyntaxError: Use of const in strict mode / Unexpected token ILLEGAL (ES6 javascript not executing on node 12.2)

I think this error is occuring when I select 'Yes' to Plugins

Output:

ok Install complete.
? Install Styles Yes
? Install Aurelia CLI Yes
? Install Aurelia Plugins Yes
? Install TypeScript Yes
? Visual Studio No
? Install UI Frameworks Yes
C:\Users\benla\AppData\Roaming\npm\node_modules\generator-aurelia-ts\generators\plugins\index.js:13
const maps = require('./maps');
^^^^^
SyntaxError: Use of const in strict mode.
at exports.runInThisContext (vm.js:73:16)
at Module._compile (module.js:443:25)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object.defineProperty.get as aurelia-ts:plugins
at Store.get (C:\Users\benla\AppData\Roaming\npm\node_modules\yo\node_modules\yeoman-environment\lib\store.js:64:35)
at Environment.get (C:\Users\benla\AppData\Roaming\npm\node_modules\yo\node_modules\yeoman-environment\lib\environment.js:242:21)

I changed line 13 from const to var and it worked..

But the I get another error:

C:\Users\benla\AppData\Roaming\npm\node_modules\generator-aurelia-ts\generators\plugins\util.js:17
return - [${entry.label}](${entry.repo});
^
SyntaxError: Unexpected token ILLEGAL
at exports.runInThisContext (vm.js:73:16)
at Module._compile (module.js:443:25)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object. (C:\Users\benla\AppData\Roaming\npm\node_modules\generator-aurelia-ts\generators\plugins\index.js:14:12)
at Module._compile (module.js:460:26)
at Object.Module._extensions..js (module.js:478:10)

It looks like this javascript is ES6, but my version of node (v0.12.2) doesn't like it..

PR for this

Hi
This generator as it is is not working AFAIT (as far as I tried ;-P). So I've come up with another one to support Typescript and Foundation (in addition to the originals ES6/Bootstrap), strongly based in this one (structure is the same).

Let me know if you wanna merge from https://github.com/telekosmos/generator-aurelia-ts/tree/feat-typescript-foundation

SASS (indented syntax)

Hi
In the end, got time 😌. Just SASS support for indented syntax (along with SCSS, Stylus as before) was added, plus some bugs fixed when installing some Stylus plugins via npm and copying/gulp-building issues. Tests augmented and passed.

PR? I've updated README.md but not CHANGELOG.md, you should update it (can provide a list of main things fixed/added) and bump version.

kristianmandrup / generator-aurelia-ts Goto Github PK

generator-aurelia-ts's Introduction

Aurelia Turbo Start generator

Generators

Compatibility

Layout Frameworks

Font frameworks

CSS frameworks

TypeScript

Install

Run

Generator arguments & options

CSS language extension options

Stylus plugins

UI framework option

Prompts

TypeScript

Plugins

Frameworks

Semantic-UI

Contributing

Adding your Favorite Framework to the generator

Contributors

TODO

License

generator-aurelia-ts's People

Contributors

Stargazers

Watchers

Forkers

generator-aurelia-ts's Issues

Recommend Projects

Recommend Topics

Recommend Org