Examples for the Meiosis library.

This repository contains the following examples:

• Simple Counter
• Rocket Launcher¹
• Labeled Sliders
• Todo List With Server
• TodoMVC²

¹ Rocket Launcher example idea credit: Jean-Jacques Dubray

² Todo MVC example idea credit: todomvc.com

The examples use the following view libraries (not all examples are demonstrated with all view libraries):

• Inferno
• React
• Snabbdom
• Mithril
• VanillaJS

You can obtain the examples by cloning the git repository:

git clone https://github.com/foxdonut/meiosis-examples

You can run some of the examples without Node. From the root of the meiosis-examples directory, start an HTTP server. For example, this can be done with Python 2:

python -m SimpleHTTPServer

Or Python 3:

python3 -m http.server

Then, open http://localhost:8000 in your browser. You can use a different port number by specifying it at the end of the Python command.

Of course, you can use another tool of your choice to start an HTTP server.

You will see two tables of all the examples. The first table is organized by view library, while the second is organized by example.

Without Node, you can run all the examples except for those under the node modules environment.

From the root of the meiosis-examples directory, execute this command:

npm start

Be patient, this will take some time on the first run, while all the npm modules are installed. The command will take much less time on subsequent runs.

Once the server is running, open http://localhost:3000 in your browser.

You will see two tables of all the examples. The first table is organized by view library, while the second is organized by example.

For the examples under the node modules environment, you will need to regenerate the application to see your changes. Go to the directory of the example and use npm start to regenerate. For example:

cd examples/todomvc
npm start

This will regenerate the bundles for all view libraries. To automatically regenerate the bundle for a specific view library and avoid having to run a command every time you make a change, use this command (except for Windows, see further below):

VARIANT=react npm run watch

On Windows, use this command:

cmd /V /C "set "VARIANT=react" && npm run watch"

This will work for the react view library. Replace with inferno, mithril, snabbdom, or vanillajs depending on the view library and the example. Not all view libraries are in every example. Please make sure to have run npm start from the meiosis-examples directory before running the command above to regenerate a specific bundle.

Finally, note that the labeled-sliders example only uses Snabbdom, so you can simply use npm run watch under the examples/labeled-sliders directory to watch for changes and automatically regenerate the application.

In the example index, you will also find some examples under the codepen environment. You can run these examples directly in your browser without installing anything locally.