Configuring Syncify with Dawn (or Legacy Javascript)

Syncify doesn't support legacy javascript very well as it expects you to covert your scripts to modern practices. This however presents a problem when using Shopify's Dawn theme, as Shopify's javascript techniques do not play nicely with Syncify. During Syncify's build process, these scripts are transformed using esbuild and by the end of the build, the javascript output is a jumbled mess (not esbuild's fault). As such, the theme will now spit out errors in the browser for almost every script.

The recomendation from Syncify is that we whip these javascript files into shape, but who's got time for that.

Syncify offers ways to intercept the esbuild config, and this somewhat works. When in the dev environment, we can hot reload the script and provided this script doesn't call functions from other (broken) scripts, everything works as expected. However, once you build a production version of the theme, well esbuild is going to optimize the files and break everything again.

See the problem with the minify: true or --minify parameter, it actually does 3 actions.

This option does three separate things in combination: it removes whitespace, it rewrites your syntax to be more compact, and it renames local variables to be shorter. Usually you want to do all of these things, but these options can also be enabled individually if necessary esbuild documentation

These 3 functions are fine in normal circumstances, but in our case. When removing the identifiers, we're breaking the cross-script functions that Shopify uses for the Dawn theme.

The Solution

Given we know the problem now, the solution is simple, ensure minifyIdentifiers: false or --minifyIdentifiers: false is set for our build process. We still want to enable the other options, but this particular option is what is messing with our code. So let's fix that.

Installation

1. Add esbuild as a dependency

   pnpm add esbuild -D

2. Create a new file in your base directory called esbuild.mjs

   // ./esbuild.mjs
   
   import * as esbuild from 'esbuild'
   
   await esbuild.build({
     entryPoints: [
       "./source/assets/*.js"
      ],
      outdir: './theme/assets',
      bundle: false,
      format: 'esm',
      treeShaking: false,
      minify: false,
      minifyWhitespace: true,
      minifySyntax: true,
      minifyIdentifiers: false,
      sourcemap: false
   })

3. Change the pnpm build script in our package.json.

   "build": "syncify --build --prod --clean; node esbuild.mjs"

That's it

What does this do?

We're essentially running another build process after the Syncify build operation. We do almost all the same things as the Syncify build except we manually control the minify'ing behavior. By setting minifyIdentifiers: false, we're telling esbuild to not change the variable and function names in the dawn scripts.

This process is running esbuild twice and technically speaking, is not an optimized workflow. However, compared to another solution utilizing Webpack and Syncify, this is much faster and seamless. And honestly, if it works, it works.