Mithril.js

Mithril.js is a lightweight (approx. 8.93 KB gzipped), fast, client-side JavaScript framework designed for building Single Page Applications (SPAs). It includes built-in utilities for:

• Routing: Managing application state via URL changes.
• XHR: Handling asynchronous network requests.
• Virtual DOM: Efficiently rendering UI updates.

It supports modern browsers including the last two versions of Firefox, Edge, Safari, and Chrome, and does not require polyfills.

When attempting performance-related improvements, focus on reducing DOM operations or reducing algorithmic complexity in hot spots. Avoid micro-optimizations like caching array lengths or inlining functions, as modern engines handle these.

Key performance patterns to follow:

• Consistent Object Shapes: Ensure data objects always have the same properties in the same order to allow engines to use JIT'ed structs instead of hashmaps.
• Null Checks: Place null checks first in compound type checking expressions to assist engine optimization.
• Loops: Prefer for loops over Array methods and attempt to pull conditionals out of loops where possible.

Mithril.js uses an eslint configuration. While the project is not strictly focused on formatting, contributions should pass the linting check:

npm run lint

Inconsistencies in spacing or formatting may be cleaned up by maintainers after a PR is accepted.

Suggesting Features

To suggest new ideas or features, create an issue thread on GitHub to allow for community discussion. If the idea is accepted, submitting a pull request is the fastest way to get it implemented.

Reporting Bugs

When reporting bugs, provide a minimal, reproducible code snippet (using tools like jsfiddle, jsbin, or a GitHub Gist). The most helpful bug reports include a pull request with a fix and accompanying tests.

After running npm install once, you can execute the test suite using npm run test.

To speed up debugging, you can run a single specific test by modifying the test definition to use o.only(description, test) instead of o(description, test). Ensure you remove the .only suffix before submitting your PR.

For quick prototyping or simple projects, you can include Mithril.js directly in your HTML using a CDN. Use the .js version for development to include helpful debugging information, and the .min.js version for production to minimize file size.

<!-- Development -->
<script src="https://unpkg.com/mithril/mithril.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mithril/mithril.js"></script>

<!-- Production -->
<script src="https://unpkg.com/mithril/mithril.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mithril/mithril.min.js"></script>

To use Mithril.js in a modern JavaScript build pipeline, install it via npm. This will add mithril to your node_modules and update your package.json dependencies.

npm install mithril --save

If you are using TypeScript, you can install the community-maintained type definitions from DefinitelyTyped as a development dependency.

$ npm install @types/mithril --save-dev

Depending on your goal, use the following commands:

• Running examples: You do not need to build the project; simply open the HTML files in a browser.
• Testing (bundled file): Run npm run dev to generate the bundled file.
• Production (minified file): Run npm run build to generate the minified file.

Follow these steps to contribute code to Mithril.js:

1. Fork the repository on GitHub.
2. Clone your fork to your local machine.
3. Switch to the main branch: git checkout main.
4. Create a feature branch: git checkout -b <the-feature-branch-name>.
5. Make your changes.
6. Run the tests: npm test.
7. Push your changes to your fork.
8. Submit a pull request via the GitHub interface, selecting your feature branch.

git checkout main
git checkout -b the-feature-branch-name
npm test

The bundler.js tool is a simplistic CommonJS module bundler that assumes a static dependency tree. To ensure your modules are compatible with this bundler, you must follow these rules:

1. Top-level Declarations: All require and module.exports statements must be declared at the top-level scope before any other code.
2. No Dynamic Imports/Exports: The bundler does not support dynamic require or conditional exports.
3. Export Pattern: Currently, the bundler only supports direct assignments to module.exports. Patterns like module.exports.foo = bar are not supported.
4. Use the Factory Pattern: For modules that contain internal state or multiple statements, export a factory function. This allows for easier dependency injection and makes modules more testable.
5. Strict Mode Inheritance: Strict mode is infectious. If your entry file uses `

The primary entrypoint for Mithril is the m function. It acts as a hyperscript engine for creating virtual DOM nodes (vnodes) and serves as the namespace for all other library APIs including routing, networking, and rendering. When called without specific arguments, it behaves like hyperscript to create DOM elements.

var m = require("mithril");

// Using m as hyperscript to create a vnode
var vnode = m("div", { id: "app" }, "Hello Mithril");