https://github.com/jaforbes/mithril-live-edit

A demonstration of a live editing using mithril + electron
https://github.com/jaforbes/mithril-live-edit

Last synced: about 1 month ago
JSON representation

A demonstration of a live editing using mithril + electron

• Host: GitHub
• URL: https://github.com/jaforbes/mithril-live-edit
• Owner: JAForbes
• Created: 2015-08-13T05:22:44.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2015-08-25T00:39:00.000Z (about 9 years ago)
• Last Synced: 2024-04-16T09:06:37.154Z (7 months ago)
• Language: JavaScript
• Size: 129 KB
• Stars: 7
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
Mithril Live Editing with Electron

==================================

`Electron + Mithril = Live Editing`

Getting Started

---------------

1. `npm install`

2. `npm start`.

3. Edit the `src/components/example.js` view function.

4. Edit the `src/styles/example.js` view function.

4. Your app will re-render live.  And it will not lose form state.

Electron is in the dev dependencies, it will download the prebuilt binaries for your system (50mb).

If you want to just use the electron that is on your path use

```

npm install --production

```

How does it work?

-----------------

patch.js just watches the directory it lives in.  When a file changes

it evals the latest version of the script in (sort of... not really) a sandbox.

It then moves the properties/functions attached to the exports object over to the existing

in memory module.

This is all possible because node keeps a reference to the modules via

require.cache.

patch.js also happens to call `m.redraw()` but it could call a callback or something

more flexible if you wanted something more customizable.

There are lots of assumptions.  It assumes all files in the directory are javascript files.

It assumes the module.exports is a container, and not a function itself.

It assumes you use mithril and electron!  This is a hack!

Caveats

-------

This is a hack.  It works quite well for a specific use case.  But it is still a hack.

- `module.exports` must be a container of functions/proerties, not a function/property itself.

- Instances, like controllers and models, won't be recreated.  This is sort of a good thing?

- Your first execution of the app must not have errors for live editing to kick off.

Thoughts

--------

The idea behind the `patch.js` is not exactly dependent on electron.  And it is

not tied to mithril.  That is just my use case, and so I don't claim it will work in

other situations.

You could use this with React, or canvas or whatever else.

And if you wanted to use this outside of electron, you'd need a server.  But then

you are probably better off checking out an _actual_ solution like Amok.

I recommend developing your web site in electron and using webpack or browserify to distribute it.

You won't need to deal with source maps/build steps etc while editing.