npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

msx-x

v0.1.0

Published

JSX for Mithril and supports camelNamed events

Downloads

3

Readme

MSX Build Status

MSX is based on version 0.13.2 of React's JSX Transformer

MSX tweaks React's JSX Transformer to output contents compatible with Mithril's m.render() function, allowing you to use HTML-like syntax in your Mithril view code, like this:

var todos = ctrl.list.map(function(task, index) {
  return <li className={task.completed() && 'completed'}>
    <div className="view">
      <input
        className="toggle"
        type="checkbox"
        onclick={m.withAttr('checked', task.completed)}
        checked={task.completed()}
      />
      <label>{task.title()}</label>
      <button className="destroy" onclick={ctrl.remove.bind(ctrl, index)}/>
    </div>
    <input className="edit"/>
  </li>
})

HTML tags and custom elements

For tag names which look like HTML elements or custom elements (lowercase, optionally containing hyphens), raw virtual DOM objects - matching the VirtualElement signature accepted by m.render() - will be generated by default.

Input:

<div id="example">
  <h1>Test</h1>
  <my-element name="test"/>
</div>

Output:

{tag: "div", attrs: {id:"example"}, children: [
  {tag: "h1", attrs: {}, children: ["Test"]},
  {tag: "my-element", attrs: {name:"test"}}
]}

This effectively precompiles your view code for a slight performance tweak.

Mithril components

Otherwise, it's assumed a tag name is a reference to an in-scope variable which is a Mithril component.

Passing attributes or children to a component will generate a call to Mithril's m.component() function, with children always being passed as an Array:

Input:

<form>
  {/* Bare component */}
  <Uploader/>
  {/* Component with attributes */}
  <Uploader onchange={ctrl.files}/>
  {/* Component with attributes and children */}
  <Uploader onchange={ctrl.files}>
    {ctrl.files().map(file => <File {...file}/>)}
  </Uploader>
  <button type="button" onclick={ctrl.save}>Upload</button>
</form>

Output:

{tag: "form", attrs: {}, children: [
  /* Bare component */
  Uploader,
  /* Component with attributes */
  m.component(Uploader, {onchange:ctrl.files}),
  /* Component with attributes and children */
  m.component(Uploader, {onchange:ctrl.files}, [
    ctrl.files().map(function(file)  {return m.component(File, Object.assign({},  file));})
  ]),
  {tag: "button", attrs: {type:"button", onclick:ctrl.save}, children: ["Upload"]}
]}

MSX assumes your component's (optional) controller() and (required) view() functions have the following signatures, where attributes is an Object and children is an Array:

controller([attributes[, children]])
view(ctrl[, attributes[, children]])

As such, if a component has children but no attributes, an empty attributes object will still be passed:

Input:

<Field>
  <input onchange={m.withAttr('value', ctrl.description)} value={ctrl.description()}/>
</Field>

Output:

m.component(Field, {}, [
  {tag: "input", attrs: {onchange:m.withAttr('value', ctrl.description), value:ctrl.description()}}
])

JSX spread attributes and Object.assign()

If you make use of JSX Spread Attributes, the resulting code will make use of Object.assign() to merge attributes - if your code needs to run in environments which don't implement Object.assign() natively, you're responsible for ensuring it's available via a shim, or otherwise.

Other than that, the rest of React's JSX documentation should still apply:

In-browser JSX Transform

For development and quick prototyping, an in-browser MSX transform is available.

Download or use it directly from cdn.rawgit.com:

  • https://cdn.rawgit.com/insin/msx/master/dist/MSXTransformer.js

Include a <script type="text/msx"> tag to engage the MSX transformer.

To enable ES6 transforms, use <script type="text/msx;harmony=true">. Check out the source of the live example of using in-browser JSX + ES6 transforms.

Here's a handy template you can use:

<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mithril/0.2.0/mithril.js"></script>
<script src="https://cdn.rawgit.com/insin/msx/master/dist/MSXTransformer.js"></script>
<div id="app"></div>
<script type="text/msx;harmony=true">void function() { 'use strict';

var Hello = {
  controller() {
    this.who = m.prop('World')
  },

  view(ctrl) {
    return <h1>Hello {ctrl.who()}!</h1>
  }
}

m.mount(document.getElementById('app'), Hello)

}()</script>

Command Line Usage

npm install -g msx
msx --watch src/ build/

To disable precompilation from the command line, pass a --no-precompile flag.

Run msx --help for more information.

Module Usage

npm install msx
var msx = require('msx')

Module API

msx.transform(source: String[, options: Object])

Transforms XML-like syntax in the given source into object literals compatible with Mithril's m.render() function, or to function calls using Mithril's m() function, returning the transformed source.

To enable ES6 transforms supported by JSX Transformer, pass a harmony option:

msx.transform(source, {harmony: true})

To disable default precompilation and always output m() calls, pass a precompile option:

msx.transform(source, {precompile: false})

Examples

Example inputs (using some ES6 features) and outputs are in test/jsx and test/js, respectively.

An example gulpfile.js is provided, which implements an msxTransform() step using msx.transform().

Related Modules

MIT Licensed