nvisionative / nvQuickTheme

nvQuickTheme is more than just a great minimalist DNN (DotNetNuke) theme. It is a powerful theme building framework and developer workflow.
https://nvisionative.github.io/nvQuickTheme/
Other
41 stars 40 forks source link

Implement a custom `rollup` plugin to properly leverage `browsersync` #372

Open david-poindexter opened 5 months ago

david-poindexter commented 5 months ago

Is your feature request related to a problem?

Browsersync does not work perfectly with rollup out of the box.

Describe the solution you'd like

We'll need to implement a custom plugin to handle this capability. We'll leverage the one below from the DNN 10 theme Aperture as inspiration.

import bs from "browser-sync";
import { Plugin } from "rollup";
const browserSync = bs.create("rollup");

type RollupPluginBrowserSync = (options?: bs.Options) => Plugin;

const browsersync: RollupPluginBrowserSync = (browsersyncOptions) => 
{
    return {
        name: "browsersync",
        writeBundle: function(options){
            if (!browserSync.active){
                browserSync.init(browsersyncOptions || {server: "."});
            } else {
                browserSync.reload(options.file || "");
            }
        }
    }
};

export default browsersync;

Describe alternatives you've considered

n/a

Additional context

Thank you to @valadas who wrote the initial version of this custom plugin and that was used as inspiration within the DNN 10 theme Aperture.