browsersync injected both in the page and in the iframe

[vlrprbttst]

do you know how to prevent this double injection? this is annoying because every time i save a file, browsersync fires but goes back to the top of the page and i have to scroll all the way down to the pattern i modified (when i'm the in ALL view).

i tried with browsersync snipperOptions but had no luck. I've been asking this on the browsersync repo as well as here but had no chance as well.

do you have a solution for injecting the reload script only in the iframe and not in patternlab overall body?

thanks! :)

[bmuenzenmeyer]

Hi @vlrprbttst

I agree this is annoying, and as a workaround will navigate to the pattern I am working on specifically if it happens to be "below the fold."

I'd love to fix this, and have devoted some nights to it in the past, but with no results. I will look at those two links you mention - but for now am going to close this as a duplicate of #159

If you figure it out, let me know!

[vlrprbttst]

of course!! only browserSync's and Patternlab creators could help at this point. because i've asked everywhere already :) i have a stack overflow question up as well: http://stackoverflow.com/questions/35293486/grunt-browser-sync-double-injection-of-the-reload-script

[bmuenzenmeyer]

Neat - FYI on that question you state that it's Pattern Lab PHP you are using, not Pattern Lab Node.

[vlrprbttst]

yeah, i first downloaded your project and noticed the issue, as an exercise I've rebuilt it with node and grunt myself as i needed some extra stuff to suit my workflow. it's pretty similar to yours anyway, and we share the same exact problem so i guess this suits us both :)

[geoffp]

I was just playing with this issue late last night. So late I can't
remember if I fixed it or not, but I did get CSS injection working
properly. I'll look at this in a few hours, hopefully.
On Thu, Feb 18, 2016 at 7:51 AM Valerio notifications@github.com wrote:

yeah, i first downloaded your project and noticed the issue, as an
exercise I've rebuilt it with node and grunt. it's pretty similar to yours
and we share the same exact problem so i guess this suits us both :)

—
Reply to this email directly or view it on GitHub
#252 (comment)
.

[vlrprbttst]

@geoffp that would be awesome, thanks!

[geoffp]

Anyone who's interested, please check out #260 and let me know if it works for you.

[vlrprbttst]

@geoffp @bmuenzenmeyer what are the static paths of these?

path.resolve(paths().public.root
and
path.resolve(paths().public.styleguide

[geoffp]

Those are (or should be) set in your patternlab config file. The relevant block looks like this:

"paths" : {
    "source" : {
      "root": "./source/",
      "patterns" : "./source/_patterns/",
      "data" : "./source/_data/",
      "styleguide" : "./core/styleguide/",
      "patternlabFiles" : "./source/_patternlab-files/",
      "js" : "./source/js",
      "images" : "./source/images",
      "fonts" : "./source/fonts",
      "css" : "./source/css/"
    },
    "public" : {
      "root" : "./public/",
      "patterns" : "./public/patterns/",
      "data" : "./public/data/",
      "styleguide" : "./public/styleguide/",
      "js" : "./public/js",
      "images" : "./public/images",
      "fonts" : "./public/fonts",
      "css" : "./public/css"
    }
  }

[vlrprbttst]

this doesn't work in my case :/ what am i missing? bs-html-injector is it a dependency i have to install?

        browserSync: {
            dev: {
                bsFiles: {
                    src: ['public/css/**/*.css', 'public/patterns/**/*.html', 'public/js/**/*.js']
                },
                options: {
                    server: {
                        baseDir: "public/"
                    },
                    open: false,
                    ghostMode: false,
                    watchTask: true,
                    reloadOnRestart: true
                },
                snippetOptions: {
                    // Ignore all HTML files within the templates folder
                    blacklist: ['/index.html', '/']
                },
                plugins: [{
                    module: 'bs-html-injector',
                    options: {
                        files: ['public/index.html', 'public/styleguide/styleguide.html']
                    }
                }],
                notify: {
                    styles: [
                        'display: none',
                        'padding: 15px',
                        'font-family: sans-serif',
                        'position: fixed',
                        'font-size: 1em',
                        'z-index: 9999',
                        'bottom: 0px',
                        'right: 0px',
                        'border-top-left-radius: 5px',
                        'background-color: #1B2032',
                        'opacity: 0.4',
                        'margin: 0',
                        'color: white',
                        'text-align: center'
                    ]
                }
            }
        },

[geoffp]

I can't be certain -- all I can think of is that the server.baseDir in your case is relative -- the version in the default gruntfile uses path.resolve, which always returns an absolute path. Maybe browsersync (or one of its dependencies) might be finicky about that.

I'd also make sure you've got the latest browsersync installed, and try ripping out any options that don't match the default config.

If you have the time, would you check out a fresh copy of the better-browsersync branch on your machine, and verify that that works as expected if you bang on it? If it works, you can test the differential between it and your project.