You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
If you would like to try out mithril without setting up a local environment, you can easily use an online playground at [flems.io/mithril](https://flems.io/mithril).
19
+
If you would like to try out Mithril.js without setting up a local environment, you can easily use an online playground at [flems.io/mithril](https://flems.io/mithril).
20
20
21
21
---
22
22
23
23
### npm
24
24
25
25
```bash
26
-
$ npm install mithril --save
26
+
$ npm install mithril
27
27
```
28
28
29
29
TypeScript type definitions are available from DefinitelyTyped. They can be installed with:
Optionally, you can include Mithril.js as a global variable using Webpack's provide plugin, to avoid including `import m from "mithril"` across a large number of files:
90
-
```js
91
-
plugins: [
92
-
newwebpack.ProvidePlugin({m:"mithril"}),
93
-
// ...
94
-
]
95
-
```
96
-
Then, you could remove the import line from step 4 (don't forget to restart Webpack if you ran it with `--watch`), and it will work just the same.
97
-
98
-
#### Step by step
99
-
100
-
For production-level projects, the recommended way of installing Mithril.js is to use npm.
57
+
# Navigate to newly scaffolded project
58
+
cd ./hello-world/
101
59
102
-
npm is the default package manager that is bundled with Node.js. It is widely used as the package manager for both client-side and server-side libraries in the JavaScript ecosystem. Download and install [Node](https://nodejs.org); npm is bundled with that and installed alongside it.
60
+
# Install dependencies
61
+
npm install
103
62
104
-
To use Mithril.js via npm, go to your project folder, and run `npm init --yes` from the command line. This will create a file called `package.json`.
105
-
106
-
```bash
107
-
npm init --yes
108
-
# creates a file called package.json
63
+
# Build the app and watch for changes
64
+
npm run dev
109
65
```
110
66
111
-
Then, to install Mithril.js, run:
67
+
### Quick start with [esbuild](https://esbuild.github.io/)
112
68
69
+
1. Initialize the directory as an npm package.
113
70
```bash
114
-
npm install mithril --save
115
-
```
116
-
117
-
This will create a folder called `node_modules`, and a `mithril` folder inside of it. It will also add an entry under `dependencies` in the `package.json` file
118
-
119
-
You are now ready to start using Mithril. The recommended way to structure code is to modularize it via CommonJS modules:
120
-
121
-
```javascript
122
-
// index.js
123
-
var m =require("mithril")
124
-
125
-
m.render(document.body, "hello world")
71
+
$ npm init --yes
126
72
```
127
73
128
-
Modularization is the practice of separating the code into files. Doing so makes it easier to find code, understand what code relies on what code, and test.
129
-
130
-
CommonJS is a de-facto standard for modularizing JavaScript code, and it's used by Node.js, as well as tools like [Browserify](https://browserify.org/) and [Webpack](https://webpack.js.org/). It's a robust, battle-tested precursor to ES6 modules. Although the syntax for ES6 modules is specified in Ecmascript 6, the actual module loading mechanism is not. If you wish to use ES6 modules despite the non-standardized status of module loading, you can use tools like [Rollup](https://rollupjs.org/) or [Babel](https://babeljs.io/).
131
-
132
-
Most browser today do not natively support modularization systems (CommonJS or ES6), so modularized code must be bundled into a single JavaScript file before running in a client-side application.
133
-
134
-
A popular way for creating a bundle is to setup an npm script for [Webpack](https://webpack.js.org/). To install Webpack, run this from the command line:
135
-
74
+
2. Install required tools.
136
75
```bash
137
-
npm install webpack webpack-cli --save-dev
76
+
$ npm install mithril
77
+
$ npm install esbuild --save-dev
138
78
```
139
79
140
-
Open the `package.json` that you created earlier, and add an entry to the `scripts` section:
Remember this is a JSON file, so object key names such as `"scripts"` and `"start"` must be inside of double quotes.
152
-
153
-
The `-d` flag tells webpack to use development mode, which produces source maps for a better debugging experience.
88
+
```
154
89
155
-
The `--watch` flag tells webpack to watch the file system and automatically recreate `app.js` if file changes are detected.
90
+
Optionally, if you'd like to use JSX, you can use the `--jsx-factory` and `--jsx-fragment` flags with esbuild.
156
91
157
-
Now you can run the script via `npm start` in your command line window. This looks up the `webpack` command in the npm path, reads `index.js` and creates a file called `app.js` which includes both Mithril.js and the `hello world` code above. If you want to run the `webpack` command directly from the command line, you need to either add `node_modules/.bin` to your PATH, or install webpack globally via `npm install webpack -g`. It's, however, recommended that you always install webpack locally and use npm scripts, to ensure builds are reproducible in different computers.
158
-
159
-
```
160
-
npm start
161
-
```
162
-
163
-
Now that you have created a bundle, you can then reference the `bin/app.js` file from an HTML file:
164
-
165
-
```html
166
-
<html>
167
-
<head>
168
-
<title>Hello world</title>
169
-
</head>
170
-
<body>
171
-
<scriptsrc="bin/app.js"></script>
172
-
</body>
173
-
</html>
174
-
```
175
-
176
-
As you've seen above, importing a module in CommonJS is done via the `require` function. You can reference npm modules by their library names (e.g. `require("mithril")` or `require("jquery")`), and you can reference your own modules via relative paths minus the file extension (e.g. if you have a file called `mycomponent.js` in the same folder as the file you're importing to, you can import it by calling `require("./mycomponent")`).
177
-
178
-
To export a module, assign what you want to export to the special `module.exports` object:
179
-
180
-
```javascript
181
-
// mycomponent.js
182
-
module.exports= {
183
-
view:function() {return"hello from a module"}
184
-
}
185
-
```
186
-
187
-
In the `index.js`, you would then write this code to import that module:
Note that in this example, we're using `m.mount`, which wires up the component to Mithril.js' autoredraw system. In most applications, you will want to use `m.mount` (or `m.route` if your application has multiple screens) instead of `m.render` to take advantage of the autoredraw system, rather than re-rendering manually every time a change occurs.
199
-
200
-
#### Production build
201
-
202
-
If you open bin/app.js, you'll notice that the Webpack bundle is not minified, so this file is not ideal for a live application. To generate a minified file, open `package.json` and add a new npm script:
You can use hooks in your production environment to run the production build script automatically. Here's an example for [Heroku](https://www.heroku.com/):
215
-
216
-
```json
217
-
{
218
-
"name": "my-project",
219
-
"scripts": {
220
-
"start": "webpack -d --watch",
221
-
"build": "webpack -p",
222
-
"heroku-postbuild": "webpack -p"
223
-
}
224
-
}
107
+
5. Create `index.html` file.
108
+
```html
109
+
<!DOCTYPE html>
110
+
<body>
111
+
<divid="app"></div>
112
+
<scriptsrc="bin/main.js"></script>
113
+
</body>
225
114
```
226
115
227
-
---
228
-
229
-
### Alternate ways to use Mithril.js
230
-
231
-
#### Live reload development environment
232
-
233
-
Live reload is a feature where code changes automatically trigger the page to reload. [Budo](https://github.com/mattdesl/budo) is one tool that enables live reloading.
234
-
116
+
6. Run your bundler script.
235
117
```bash
236
-
# 1) install
237
-
npm install mithril --save
238
-
npm install budo -g
239
-
240
-
# 2) add this line into the scripts section in package.json
241
-
# "scripts": {
242
-
# "start": "budo --live --open index.js"
243
-
# }
244
-
245
-
# 3) create an `index.js` file
246
-
247
-
# 4) run budo
248
-
npm start
118
+
$ npm run start
249
119
```
250
120
251
-
The source file `index.js` will be compiled (bundled) and a browser window opens showing the result. Any changes in the source files will instantly get recompiled and the browser will refresh reflecting the changes.
252
-
253
-
#### Vanilla
254
-
255
-
If you don't have the ability to run a bundler script due to company security policies, there's an options to not use a module system at all:
0 commit comments