metal / metal.js

Build UI components in a solid, flexible way

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

1. Look through the documentation.
2. 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

1. Install NodeJS >= v0.12.0, if you don't have it yet.

2. Install lerna global dependency:

[sudo] npm install -g [email protected]

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

npm run lerna

4. 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.

metal.js's Issues

Adds support for updating component without surfaces

Adds array utilities namespace

Functional components in metal.js

React has functional components which don't have lifecycle methods. It is not a critical feature but it does help make the code more readable and react is planning to do interesting things in the future with this feature. It might make sense for metal to also have an equivalent.

Allows listening to multiple events on same addEventListener call

Soy Component render mutates dom nodes

It looks like soy components mutate dom nodes on first render. This might cause weird side-effects like lost event listeners. Take the following code:

var button = $('#buttonId');

button.on('click', function(event) { ... });

new Dropdown({
    element: '#buttonId'
}).render();

console.log(button[0] === $('#buttonId')[0]); // false -> click listener is lost

An obvious workaround is of course to make sure the code adding the listeners runs after the soy rendering, but this is not always possible, and looks like a serious limitation to integrate metal-based components...

Adds auto source formatting on test files

Adds WebSocketTransport

Adds tests to lfr.js functions

Adds support for building modules to UMD syntax

Adds UMD output for modules on https://github.com/liferay/metal-tasks project.

Is .ATTRS really necessary?

I know we're based in YUI's attribute model but I wonder if having this static variable really adds any value.

Adds Db timeout support for performed actions

Stop using `class` for ‘singletons’

Using

class dom {
  static addClasses() { /*…*/ }
}

instead of

const dom = {
  addClasses() { /*…*/ }
};

does not bring all that value…

Make components render by default

I'm proposing we do away with requiring the render call manually, unless someone passes render: false as part of the config.

With YUI, in 90% of the cases, when we instantiated the component was also when we wanted to render it.
So my proposal would end up looking like:

let myCmp1 = new MyComponent({}); //renders component

let myCmp2 = new MyComponent({ render: false });
// do some work ...
myCmp.render();

What do you guys think?

Add toogleClasses method

Adds optional event facade on EventEmitter

Add tests to DB implementation

Updating a template from within itself can break things

I've pasted an example of the Soy file and the js here: https://gist.github.com/natecavanaugh/c9d98fceb794757abe73

The gist of it is though that inside of the body template, on input I call updateBD, which will update the bodyContent property of the template with the value (but I believe this could be any variable passed to the template).
If you build that component, you can see that it is completely unusable.
Where I can see something like this being important is in something like the CharCount module, where we need to say how many characters we have left.

Let me know if there are any questions about reproducing it.

Add test for lfr.rbind method

Fixes wildcard ordering problem on EventEmitter

Write a step-by-step tutorial on creating a Component

Metal Lifecycle Method equivalent of componentWillReceiveProps()

We have a case where we want to be listening for a change when a config has been updated to a new value.

In React, the way this was done was through listening for any changes to props and then identifying if the prop being changed is different to the old.

componentWillReceiveProps(nextProps) {
    if (JSON.stringify(this.props.foo) !== JSON.stringify(nextProps.foo)) {
        this.changeAction();
    }
}

I am not convinced that this is the best way of doing this so any alternatives to including a lifecycle method would also be fine.

Thank you!
Angelo Youn

Create logo

Pretty soon we'll need a website to display our documentation, attract users and potential contributors. In order to do so, we should start with a visual identity and logo.

@vitorfernandes could you help us with that?

Adds Liferay services API

Adds a higher level API to handle Liferay service calls for dynamic storage / restful urls.

Adds EventHandler

Add instructions on using components from npm/bower

Describe why is this better than an existing solution

On About, we should be able to briefly describe why this framework is better than something out there. For example, why do we have a better API than Angular? Why is our solution faster than React's Virtual DOM? Basically why should people care about this?

Creates boilerplate

Creates boilerplate how to use Metal.js.

Creates yeoman generator

Document the relationship with AUI (if any)

People will come here with questions about the future of Liferay FE development.

Could be a good idea to explicit what this project means for Alloy and Liferay.

Support for accessors properties in mergeSuperClassesProperty

let counter = 0;

class Test1 {
  static get FOO() { return counter++; }
}
class Test2 extends Test1 {
  static get FOO() { return counter++; }
}

core.mergeSuperClassesProperty(Test2, 'FOO');

assert.deepEqual(Test2.FOO_MERGED, [ 0, 1 ]);
assert.deepEqual(Test2.FOO_MERGED, [ 2, 3 ]);
assert.deepEqual(Test2.FOO_MERGED, [ 4, 5 ]);

</uselessly-pedantic>

Organizes build tasks

Adds database implementation

Solidify proper project name

Is it Metal, MetalJS, Metal JS, Metal.js?

"Metal", on it's own, will not Google well.

I assume it's Metal.js. We should refer to it consistently as Metal.js, not Metal.

Also, since this is early in it's life, should the project url (liferay/metal) in Github be updated to liferay/metal.js or liferay/metaljs?

Adds Storage utility

Converts tests to use Mocha instead of nodeunit

Adds temporaty promise polyfill

We need a promise, therefore it require time to implement a good one. For now we borrowed from Closure Library and eventually we will replace with our own implementation.

Adds Liferay database mechanism

Add section about Tooling

Used to describe useful gulp tasks.

Documentation

• Core
• Attributes
• Events
• Component
• SoyComponent

Fixes tests on all browsers

Adds tests to Transport

Adds Disposable abstract class

https://github.com/google/closure-library/tree/master/closure/goog/disposable

Evaluates the complexity and maintainability of code

Source code complexity evaluation is now part of test task. If it's too complex tests are going to fail. And they are failing now, specially because Trie and EventEmitter.
Let's go through each of our modules reducing the complexity of them.
/cc @mairatma @ipeychev

Adds support for namespaces/wildcards on EventEmitter

Use higher-level classes

export default function MetaDisposable(parent) {
  return class Disposable extends parent {
    // …
  }
}

Travis does not connect to SauceLabs

Adds tests for database mechanism

Adds tests to array.js functions

Add/Remove classes methods expect array instead string

Currently add/remove classes methods expect array instead string with multiple classes, separated with space. We have to fix that and provide only classes in the format of string, separated with space.

Add performance comparison with Angular