Today, I discovered that reducing JavaScript in the js.liquid file can be quite challenging.
I'm using gulp and typescript for my project:
This is a function call from my main TypeScript file that includes inline liquid code:
ajaxLoader("{{ 'logo_black.svg' | asset_url }}")
Below is the module for ajaxLoader:
export function ajaxLoader ( URI : string | URL ) : XMLHttpRequest {
let ajax = new XMLHttpRequest();
ajax.open( "GET", URI, true );
ajax.send();
ajax.onload = (e : any) => {
let parser = new DOMParser();
let doc = parser.parseFromString( ajax.responseText, "image/svg+xml" );
document.getElementsByTagName("body")[0].appendChild(doc.getElementsByTagName("svg")[0]);
};
return ajax;
}
One of my tasks involves the following function:
function typescript ( done ) {
let $browserify = browserify({
entries : paths.entry
})
.plugin(tsify, _typescriptConfig)
.on("error", log)
.bundle()
.on("error", log)
.pipe(source("theme.js"))
.on("error", log)
.pipe(buffer())
.on("error", log)
.pipe($.uglify())
.on("error", log)
.pipe($.rename((path) => {
path.extname = ".js.liquid";
}))
.pipe(gulp.dest(paths.build))
;
done();
}
The code runs without errors and successfully creates the minified file. However, when attempting to sync asset folders using Shopify CLI, an error occurs due to a {{ symbol in the minified file:
XX:XX:XX ERROR » update assets/theme.js.liquid:
Liquid syntax error (line 1): Variable '{{var t=r,i=l,n=e,s=a.slice(1);const o=i[n]||{}' was not properly terminated with regexp: /\}\}/
Is there a workaround for this issue during local development that still allows me to minify the file, or should I place all liquid calls inside inline script tags on the required page?
Alternatively, would using Hydrogen be a better option?
I found this article unhelpful