My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more

Early stage live coding ClojureScript with Webpack

Jon's photo
Jon
·May 19, 2017

This post will be a quick note since it's too tedious to go into the details. For the inpatient, you may clone the repo below and start exploring:

github.com/minimal-xyz/minimal-shadow-cljs-..

Here's how it worked. Normally for a compiled-to-js language, it compiled to JavaScript files first. In order that Webpack can bundle it, these JavaScript files should follow CommonJS, which is the npm way of resolving modules and files.

The problem with ClojureScript was it did not emit CommonJS code using Google Closure Compiler. Instead, it uses namespaces to organize modules, which is incompatible with Webpack. Then we saw shadow-cljs.

Shadow-cljs

Not into details either, you may find docs at: github.com/thheller/shadow-cljs/wiki/Clojur... For short, it emits CommonJS code by compiling from ClojureScript. thheller may have more to say about it since shadow-cljs itself has many features even making it self a Webpack alternative for ClojureScript.

Before starting the compiler, we need a config file called shadow-cljs.edn , where :target :npm-module says we are compiling to npm compatible code:

{:source-paths ["src"]
 :dependencies [[mvc-works/hsl "0.1.2"]]
 :builds {:app {:target :npm-module
                :output-dir "compiled/"}}}

By calling shadow-cljs compile app we can generate ClojureScript into JavaScript in compiled/ . That file may look like:

var CLJS_ENV = require("./cljs_env");
var COMPILED = false;
require("./cljs.core.js");
var cljs=CLJS_ENV.cljs;
var goog=CLJS_ENV.goog;
var client=CLJS_ENV.client || (CLJS_ENV.client = {});
goog.provide('client.lib');
goog.require('cljs.core');
goog.require('cljs.core');
console.log("Loading lib.cljs");
client.lib.lib_data = "Edit lib.cljs to change 2!";

module.exports = client.lib;

It's ugly but already JavaScript. Now it's familiar.

Webpack HMR

You may refer to the docs webpack.js.org/guides/hmr-react for details. But I made a repo trying to make it clear github.com/minimal-xyz/minimal-webpack-hmr . Also for short, it's just Webpack's way to hot patch single JavaScript files in the runtime.

It's notable that JavaScript contains more side-effects compared to ClojureScript, which leads to a rougher solution in Webpack to replace code. I guess ClojureScript compiler is smarter to tell which files need to be updated. Anyway, for now, it works.

Conclusion

Many of us JavaScript developers are already familiar with Webpack, while it's always tough to pick up Leiningen or Boot in order to build apps. We want to reuse our existing knowledges even for new languages like ClojureScript. I consider shadow-cljs a big chance we make it better.

One thing to remember is that people chose Closure Compiler for a reason, dead code elimination! With CommonJS and Webpack, it's some not that possible. So be careful if size matters is you case.

4