Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Prebuilding strips external-script-attrs from scripts #316

Open
JPritchard9518 opened this issue Nov 4, 2021 · 0 comments
Open

Prebuilding strips external-script-attrs from scripts #316

JPritchard9518 opened this issue Nov 4, 2021 · 0 comments

Comments

@JPritchard9518
Copy link

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant