Olov Lassus

JSShaper grows up but stays fit and fun

22 May 2012

I created JSShaper a year and a half ago because I needed a way to do source-preserving JS-to-JS transformations so that I could implement restricter, the Restrict mode for JavaScript checker. There was nothing else out there so I ended up creating Shaper. Some of the defining (and often unique) features of Shaper at the time was its simplicity of AST traversals (one function, not dozens of visitors), its precise weaved token and node representation that facilitates repeated tranformations on the node level at O(1) complexity, its declarative matching based on templates and wildcards that lets you describe the template as JavaScript code but still matches on the node level, its corresponding declarative replace function that lets you rewrite fragments of a tree without knowing the details of its inner property-structure, the smart and mostly closure compiler compatible binding of comments to nodes, the notion of pluggable Shape(r) pipelines, and more. Those are still defining features, and still often unique. While I created Shaper mostly for restricter, I decided to write a bunch of other plugins as well to show as examples if nothing else. One of the simplest of these ended up being one of the most useful, namely asserter. Check out C-style assertions in JavaScript via JSShaper for more information about it.

I wanted to share with you some recent good stuff happening in Shaper land.

C. Scott Ananian has created the most advanced Shaper plugin yet, yielder, which transforms yield generators (JavaScript 1.8) into plain ES5. Impressive work. I hope to be able to merge it into Shaper master soon, but for now use cscott’s repo.

cscott also contributed a number of fixes to Shaper, imported a newer version of Narcissus and rebased all my modifications on top of it. If you find any valid JS that Shaper fails parsing or round-tripping (node run-shaper.js yourfile.js --source) then please open an issue and we’ll fix it.

Finally, cscott performed AMD-fication surgery on the Shaper code base. I initially supported running Shaper through any shell you could think of, using the technique described in JavaScript modules in shells, browsers, everywhere. While cute, it was cumbersome and we decided to drop support for anything but node.js and the browser. AMD was a nice match; it works great in node and great in the browser, and the r.js tool is more convenient then concatenating files together. I also want to mention that Jez Ng participated in pushing node-compatibility forward, although that patch never landed. Another one of his patches did though.

Noah Sloan independently created jmvc-3.2-upgrade-assistant, a Shaper based script for helping upgrade from JavaScriptMVC 3.1 to JavaScriptMVC 3.2. Looks awesome!

I was at webshaped.fi last week presenting JavaScript: the subsets we use (including Restrict mode for JavaScript and a little bit of Shaper) and met a guy who who told me that his company uses Shaper similar to Noah, for automatically migrating code between different framework versions. Whoever you are I’m terrible at names so please ping me on Twitter and let’s keep in touch!

I gave the same talk at Front-Trends the month before, which was my international conference speaking debut. Both talks were recorded so I’ll post the links once available. If you want me to come talk somewhere about coding with a focus on “easier to reason about”, restrict mode, Shaper or something related just contact me! I can easily do an hour presentation about Shaper and the concepts behind it, for example.

Creating Shaper plugins is very fun, and not that hard. Try it! To get started I recommend checking out the sources for asserter and stringconverter (simple transformational plugins) or bitwiser (simple static analysis plugin). You’ll find these in the plugins/ directory. Then check out everything in the examples/ directory as well.

Thank you for trying out, contributing to, writing about or filing issues on JSShaper.


Show comments (reddit)

Follow me on Twitter

« Call for testing: Pygments Dart highlighter    ↑ Home     »