Before starting make sure to clone the metal/metal.js repo and follow its setup instructions.
This repository contains multiple packages, which are considered the core modules. They're published separately in npm, as developers are not required to use all of them on their projects. There's a lot of communication between them though, and new features or even improvements often require changes on more than one of these modules, which is hard to do and test when code is split into separate repos.
That's why we've decided to use LernaJS to manage the repo. It's perfect for this use case and it's been used by projects like Babel and React.
The main repo currently has eight packages:
- metal - Utility functions.
- metal-events - Custom event handling.
- metal-dom - DOM related utilities.
- metal-state - Data configuration and tracking.
- metal-component - Basic component structure.
- metal-incremental-dom - Integration with incremental dom.
- metal-soy - Integration with soy templates.
- metal-jsx - Integration with JSX templates.
The diagram below represents the relations between them. You can see for example that metal is the most low level package, while metal-jsx and metal-soy are both built on top of the incremental dom integration:
Each package has its own package.json and is set up so that it provides two types of entry points: one for commonjs usage (main) and another for ES6 modules (jsnext:main). Check out metal-dom's package.json file as an example.
For detailed information about the workflow used to develop for Metal.js (like building and testing), as well as contribution requirements, check out the guidelines document.
Let's start actually looking at the code now. We'll begin with the simplest package: metal.