lasso-js / lasso

Advanced JavaScript module bundler, asset pipeline and optimizer
582 stars 75 forks source link

Prebuilding strips external-script-attrs from scripts #316

Open JPritchard9518 opened 3 years ago

JPritchard9518 commented 3 years ago

I am using Marko and Lasso with Lasso's prebuild feature. Prebuilding has been working great for me, but I am now wanting to add async or defer to my script tags inserted by lasso-body. When running my application without loading from prebuild, it correctly adds the async or defer attributes. When loading from prebuild, they are not present. Maybe I don't understand how prebuild works? Or maybe it's a bug?


My Lasso config:

const path = require('path');
module.exports = {
  plugins: [
    'lasso-marko',
    'lasso-sass',
    'lasso-autoprefixer'
  ],
  outputDir: path.join(__dirname, './static'),
  bundlingEnabled: true, 
  minify: true,
  fingerprintsEnabled: true,
  loadPrebuild: true
}

My prebuild file that I run with npm run prebuild:

const globby = require('globby')
const config = require("./lasso-config")
const path = require("path");
const lasso = require("lasso");
async function prebuild() {
    console.log("Beginning Lasso Prebuild")
    run({
        config: config,
        flags: [],
        pages: await globby('marko/pages/*/*.marko')
    }).then(lassoPrebuildResult => {
        const builds = lassoPrebuildResult._buildsByPath
        for (const key in builds) {
            console.log(`Prebuilt ${key}`)
        }
        console.log("Finished Lasso Prebuild.")
    })
}
prebuild().catch(err => {
    console.error(err)
    throw err;
}) 
function run (options = {}) {
    let {
        pages,
        config,
        flags
    } = options;
    if (typeof config === "string") {
        config = require(require.resolve(path.resolve(process.cwd(), config)));
    }
    const theLasso = lasso.create(config);
    const pageConfigs = pages.map(page => {
        return {
            flags,
            dependencies: [`marko-hydrate:${page}`],
            pageDir: path.resolve(process.cwd(), path.dirname(page)),
            pageName: page
        };
    });
    return theLasso.prebuildPage(pageConfigs);
};

My lasso-body tag:

lasso-body external-script-attrs={async: true, defer: true}


With loadPrebuild set to false in my lasso config, my script appears as follows in the chrome inspector:

<script src="/static/main-layout-309aa286.js" async defer></script>

With loadPrebuild set to true, the script does not have async or defer:

<script src="/static/main-layout-cb35b27f.js"></script>

Is there a way to have the attributes when using prebuild?