Parcel bundler: Testing Parcel’s asset support

Last week I recorded my first impressions with Parcel, the zero-configuration web application bundler. The initial experience was great, and evocative of time travel. Parcel transported me back to my first days with JavaScript, when all you needed was an editor and a browser and you were good to go.

However, I admittedly did not push Parcel very hard or test out many of the cool features available. This week we’ll start to explore some of Parcel’s additional capabilities. I made a grotesque “kitchen sink” of an application in order to see if I could load a bunch of different asset types as expected. 

Starting off the same way as last time, I created an empty directory with a simple index.html with a script tag pointed to an empty index.js file. Then I ran parcel index.html and attempted to write code and let Parcel do all the work.

Parcel claims to support zero-configuration usage for a long list of asset types, which are just file types that may require some special handling. Last week, we only used ES6 flavors of JavaScript, which typically require a Webpack and Babel configuration. This week we’ll test assets that are just data formats (JSON and YAML), assets for styling (CSS and LESS), and application libraries that use different syntax and languages (React and Elm).

Parcel transforms JSON and YAML

After putting together trivial JSON and YAML files, I simply imported them into my index.js and logged them out, which immediately verified to me that they were imported properly.

import jsonConfig from '../config/test.json';
import yamlConfig from '../config/test2.yaml';
console.log(jsonConfig, yamlConfig)

Parcel transforms CSS and LESS

For styling, Parcel supports CSS, LESS, Sass, and Stylus, and I would expect to be able to import any of these files in my JavaScript and see the styles rendered on the page. I already had the parcel index.html command running, so I opened up a few editor tabs, created a basic.css, and defined a rule to color the background of the page a light blue. Saving that file and adding an import './basic.css' line in my index.js file should have done the trick. However, I didn’t see the background update automatically, or after a manual browser refresh. I ended up needing to stop Parcel and rerun the command before seeing the style show up. After that, however, live style updates happened as expected.

I had about the same experience with LESS, where I could create the new file and import it, but needed to restart the Parcel CLI in order for the style to render properly.

It appears that Parcel adds additional CSS definitions after the existing definitions whenever changes are made. This works fine for additions or modifications of existing declarations because the subsequently added stylesheets will override the previous styles. However, when it comes to removing declarations, the styles won’t update as expected because the old declarations are still around. If you get into an active styling workflow, you’ll want to be extra careful. Stay vigilant and refresh periodically so that any declaration removals occur as expected.

Parcel transforms Elm

I don’t write any Elm, but since Parcel supports it I figured I should see how it works. I followed a basic example to render a single element on the screen by creating a Main.elm file and initializing it in my JavaScript file. I added a div with the id of elm-app in my index.html file so I could mount the Elm app onto a DOM node.

import Browser
import Html exposing (div)
import Html.Attributes exposing (id)
main =
  div [ id "app"] []

import { Elm } from '../elm/Main.elm';
Elm.Main.init({
  node: document.getElementById('elm-app')
});

This was another case where I had to stop the running CLI and restart it, but as soon as I did I started receiving the friendliest error messages I’ve ever seen helping me fix bugs in my code, as well as live updating of the app in the browser.

Parcel transforms React

I usually use create-react-app for new React projects, but I figured I’d test JSX support here to be thorough. I added the imports and a new component to my index.js at the same time, mounting the React component onto the div created by the Elm app:

import React from 'react';
import ReactDom from 'react-dom';
/* existing imports and elm code */
const App = () => (
  <div className="outer-container">
    {jsonConfig.sections.map((name, idx) => (
      <section key={idx}>
        {name} - {yamlConfig.sectionContent[idx]}
      </section>
    ))}
  </div>
);
ReactDom.render(<App />, document.getElementById('app'));

I got a syntax error about the < character that led me to believe JSX wasn’t being handled properly. I commented out the usage of React while keeping the imports there and Parcel downloaded the dependencies. After the dependencies were downloaded, I uncommented the JSX and the app loaded as expected. Mounting the React app within an Elm app broke hot reloading, but I confirmed that hot reloading worked as expected when the React app existed on its own.

Go Parcel, go

So far Parcel has been a pretty powerful and enjoyable tool to work with, despite some odd quirks and hiccups. I got carried away with testing assets this week, so next week I’ll discuss some suggestions for working with Parcel and building web applications with Parcel for deployment.

Got any praises or problems with Parcel to share? Continue the conversation on Twitter @freethejazz.