Feature request: Disable Browsersync code injection with simple config option

[alesandroortiz]

Issue details

Feature request: Have a simple configuration option to disable all code injection when Browsersync's web server is used.

I use eleventy --serve often under the following scenarios, which uses Browsersync to serve rendered files:

• Scenario 1: For some types of work, I need to compare outputs of local builds vs. production builds. Usually I need this to debug issues or ensure rendered output remains the same after refactoring. Browsersync-injected code makes automatic and even manual diffing quite difficult.
• Scenario 2: For some projects, I disable all Browsersync functionality since I intentionally need different tabs with the same page open for development or debugging purposes. Browsersync-injected code is merely a minor nuisance when inspecting source, but would be nice to not have it at all.

The current way to disable all code injection is via snippetOptions, per https://twitter.com/eleven_ty/status/1402360471634731009:

eleventyConfig.setBrowserSyncConfig({
  snippetOptions: {
    rule: {
      fn: function(snippet, match) {
        return match;
      }
    }
  }
});

Another way which still injects code but otherwise disables Browsersync functionality is via codeSync and other options (this is what I currently use for the second scenario):

eleventyConfig.setBrowserSyncConfig({
  injectChanges: false, // force reload instead of live-inject
  ghostMode: false, // do not mirror clicks, etc.
  codeSync: false // turn off any reload or live-inject
});

It would be nice to have a simpler way to disable code injection, like a Boolean config option as suggested in the Tweet below.

I think we can/should make this a simple Boolean, to prevent you needing this ‘hack’ :)
— https://twitter.com/Browsersync/status/1402375036229586944

Twitter thread for further context: https://twitter.com/AlesandroOrtizR/status/1402361877271875590

Steps to reproduce/test case

1. Create 11ty site:

npm install -g @11ty/eleventy
echo '# Page header' > README.md

2. Create .eleventy.js config file:

module.exports = function(eleventyConfig) {
  eleventyConfig.setBrowserSyncConfig({
    injectChanges: false, // force reload instead of live-inject
    ghostMode: false, // do not mirror clicks, etc.
    codeSync: false // turn off any reload or live-inject
  });
}

3. Call eleventy --serve
4. Navigate browser to local web server

Expected: No Browsersync code injection since all functionality is disabled.
Observed: Browsersync still injects code.

Ideally there's an even simpler and more self-documenting config like injectSnippet: false or something similar which could be passed to Browsersync via Eleventy.

Please specify which version of Browsersync, node and npm you're running

• Browsersync [2.26.13]
• Node [15.11.0]
• Npm [7.16.0]

Affected platforms

Presumably affects all platforms, but I'm using Windows.

• linux
• windows
• OS X
• freebsd
• solaris
• other (please specify which)

Browsersync use-case

• API
• Gulp
• Grunt
• CLI

for all other use-cases, (gulp, grunt etc), please show us exactly how you're using Browsersync

Used via eleventy --serve which calls this logic:
https://github.com/11ty/eleventy/blob/e94b8be9116c5228261c910b9b07361338096722/src/EleventyServe.js#L139

Relevant Eleventy docs: https://www.11ty.dev/docs/usage/#re-run-eleventy-when-you-save

[shakyShane]

@alesandroortiz this will end up being:

browser-sync . --no-snippet

or in your case, you'll be able to do this

eleventyConfig.setBrowserSyncConfig({
  snippet: false,
});

[shakyShane]

@alesandroortiz please try browser-sync@2.27.1 :)

[alesandroortiz]

@shakyShane 🎉 Thanks for the quick implementation! Really appreciate it. You have no idea how great this is for some of my projects. 😄