metal / generator-metal Goto Github PK

View Code? Open in Web Editor NEW

4.0 6.0 6.0 154 KB

Yeoman Generator for Metal.js components

JavaScript 87.12% HTML 12.70% CSS 0.18%

metal yeoman-generator soy

generator-metal's Introduction

Metal.js

Join #metal on our Slack Channel

Metal.js is a JavaScript library for building UI components in a solid, flexible way.

Official website

Support and Project status

Metal.js is widely used and well maintained internally at Liferay but does not currently have staffing to support the open source release. As such this project is mostly internal and support is minimal. For certain issues, like build integration we are in an especially bad position to offer support.

To get assistance you can use any of the following forums

Look through the documentation.
File an issue on GitHub

We will try our best, but keep in mind that given our support staffing, we may not be able to help.

Setup

Install NodeJS >= v0.12.0, if you don't have it yet.
Install lerna global dependency:

[sudo] npm install -g [email protected]

Run the bootstrap script to install local dependencies and link packages together:

npm run lerna

Run tests:

npm test

Developer Tools for Metal.js

Chrome Extension

Big Thanks

Cross-browser Testing Platform and Open Source <3 Provided by Sauce Labs

License

BSD License © Liferay, Inc.

generator-metal's People

Contributors

Stargazers

Watchers

Forkers

jonmak08 fernandosouza ethib137 robframpton vbence86 diegonvs

generator-metal's Issues

Add script for compiling code to "lib" for all modules

This is currently only done when the user chooses to create a module that runs on node, but we want all modules to compile to lib by default, since that helps build performance when they're used as dependencies.

Generator should normalize problem characters in class names

Generator should normalize problem characters in class names.

Note, any problem characters should be normalized, not just the two cases highlighted here.

Case 1 (spaces)

$ yo metal
? How do you want to name your class? (Modal)
Enter: invalid name
Follow prompts.

Expected Result:
Class name to be normalized to one of:

invalidname
invalidName
invalid_name

Actual Result:
Generator throws error:

npm ERR! install Couldn't read dependencies
npm ERR! Error: Invalid name: "metal-invalid name"
npm ERR!     at ensureValidName (D:\Apps\nodist\bin\node_modules\npm\node_modules\read-package-json\node_modules\no
rmalize-package-data\lib\fixer.js:302:15)
npm ERR!     at Object.module.exports.fixNameField (D:\Apps\nodist\bin\node_modules\npm\node_modules\read-package-j
son\node_modules\normalize-package-data\lib\fixer.js:206:5)
npm ERR!     at D:\Apps\nodist\bin\node_modules\npm\node_modules\read-package-json\node_modules\normalize-package-d
ata\lib\normalize.js:29:38
npm ERR!     at Array.forEach (native)
npm ERR!     at normalize (D:\Apps\nodist\bin\node_modules\npm\node_modules\read-package-json\node_modules\normaliz
e-package-data\lib\normalize.js:28:15)
npm ERR!     at final (D:\Apps\nodist\bin\node_modules\npm\node_modules\read-package-json\read-json.js:342:33)
npm ERR!     at then (D:\Apps\nodist\bin\node_modules\npm\node_modules\read-package-json\read-json.js:126:33)
npm ERR!     at D:\Apps\nodist\bin\node_modules\npm\node_modules\read-package-json\read-json.js:266:40
npm ERR!     at tryToString (fs.js:415:3)
npm ERR!     at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:402:12)
npm ERR! If you need help, you may report this *entire* log,
npm ERR! including the npm and node versions, at:
npm ERR!     <http://github.com/npm/npm/issues>

npm ERR! System Windows_NT 6.1.7601
npm ERR! command "D:\\Apps\\nodist\\v\\nodev5.2.0\\node.exe" "D:\\Apps\\nodist\\bin\\node_modules\\npm\\bin\\npm-cl
i.js" "install"
npm ERR! cwd D:\liferay\metaljs
npm ERR! node -v v5.2.0
npm ERR! npm -v 1.4.6
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR!     D:\liferay\metaljs\npm-debug.log
npm ERR! not ok code 0

Case 2 (hyphens/minus)

$ yo metal
? How do you want to name your class? (Modal)
Enter: invalid-name
Follow prompts.

Expected Result:
Class name to be normalized to one of:

invalidname
invalidName
invalid_name

Actual Result:
Generates files like malformed syntax.

demos\index.html:

<script type="text/javascript">
    new metal.Invalid-name();
</script>

src\Invalid-name.js:

class Invalid-name extends Component {
}
Soy.register(Invalid-name, templates);

export default Invalid-name;

src\Invalid-name.soy:

{namespace Invalid-name}

test\Invalid-name.js:

import Invalid-name from '../src/Invalid-name';

Adds Webpack

Generated templates should print Hello World on the screen

Let's have the generated components print something on the screen, since that will help show new developers how to start using it.

Add npm scripts by default so global gulp is not needed for most important tasks

There should be scripts for at least: build, watch and test.

Generator should create files under a new directory

Generator should create class files under a new directory of the same name.

$ yo metal
? How do you want to name your class? (Modal)
Enter: awesome
Follow prompts.

Expected Result:
All files generated under a new directory named metal-awesome.

Actual Result:
All files generated under current path.

Component.ELEMENT_CLASSES is not autogenerated

Currently, we have _boilerplate.scss mapping to

.<%= lowercaseName %> {
}

However, this is not being added in _Boilerplate.js as part of the component definition

Karma dependency is missing in latest release 4.0.0

Hi,

Steps to reproduce

yo metal

? How do you want to name your class? SelectInput
? What do you want your class to extend from? Component
? Which template language do you want to use? Soy
? Which build format will this component use? amd
? Which test enviroment do you want to use? Karma
? Is this component supposed to run on node environment? (that is, should other modules be able to "require" and use it?) Yes
? What's the GitHub username? my-user
? How would you describe this project? My awesome Metal.js project
   create demos\index.html
   create src\select-input.scss
   create src\SelectInput.soy
   create src\SelectInput.js
   create __tests__\SelectInput.js
   create __tests__\.jshintrc
   create karma.conf.js
   create karma-coverage.conf.js
   create env\test\node.js
   create package.json
   create README.md
   create CONTRIBUTING.md
   create LICENSE.md
   create .editorconfig
   create .gitignore
   create .jshintrc
   create webpack.config.js
   create .eslintrc
npm WARN deprecated [email protected]: �  Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!
npm WARN deprecated [email protected]: to-iso-string has been deprecated, use @segment/to-iso-string instead.
npm WARN deprecated [email protected]: Jade has been renamed to pug, please install the latest version of pug instead of jade
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN prefer global [email protected] should be installed with -g

npm install

npm run test
Command "karma" is not found

Workaround:

npm install --save-dev karma
npm run test
Tests are executed ;-)

Ask for LICENSE.md inclussion

Currently, we always include the LICENSE.md file when generating a new component... this is fine for Liferay, but probably not so nice if anyone else uses it and doesn't realize :)

Move to Liferay guidelines

We are setting new frontend guidelines using [prettier-eslint-cli](https://github.com/prettier/prettier-eslint-cli) and [eslint-config-liferay](https://github.com/eduardolundgren/eslint-config-liferay)

We should update this project as well, both in the source code and the generated components