const Bundler = require("parcel-bundler");

//entry files
const entries = ["./js/main.js", "./js/editor.js"];

const baseOptions = {
  outDir: "./build",
  minify: true,
  sourceMaps: true,
  watch: process.argv.includes("--watch"),
  publicUrl: "./",
  logLevel: 4,
  contentHash: false,
};

(async () => {
  const bundler = new Bundler(entries, { ...baseOptions });
  return await bundler.bundle();
})();

// rollup.config.js
import resolve from "rollup-plugin-node-resolve";
import commonJS from "rollup-plugin-commonjs";
import scss from "rollup-plugin-scss";
import { babel } from "@rollup/plugin-babel";
import { terser } from "rollup-plugin-terser";
import livereload from "rollup-plugin-livereload";
import fg from "fast-glob";

//custom watching plugin to get rollup to rebuild when other files get changed
const watcher = {
  name: "watch-external",
  async buildStart() {
    const files = await fg(["assets/js/**/*.js", "assets/css/**/*.scss", "**/*.php"]);
    for (let file of await files) {
      this.addWatchFile(file);
    }
  },
};

//setup the plugins for both builds
const plugins = [
  watcher, //my custom file watcher
  resolve(), //related to resolving node_module references, I think.
  commonJS({ //this allowed things like: import jquery from 'jquery' to work
    include: "node_modules/**",
  }),
  babel({ babelHelpers: "bundled" }), //transpile!
  scss({ outputStyle: "compressed" }), //minified scss
  terser(), //for minifcation
  livereload(), //for livereload
];

//notice, two entry points here, handled like a champ!
export default [
  {
    input: "js/main.js", //the style.scss is imported in this file
    output: {
      file: "build/main.min.js",
      format: "iife", //immediately invoked function expression - browser solution
      inlineDynamicImports: true,
    },
    plugins: plugins,
  },
  {
    input: "js/editor.js", //the editor scss is imported in this file, also
    output: {
      file: "build/editor.min.js",
      format: "iife",
      inlineDynamicImports: true,
    },
    plugins: plugins,
  },
];

//esbuilder.js
const esbuild = require("esbuild");
const sassPlugin = require("esbuild-plugin-sass");
const chokidar = require("chokidar");
const browserSync = require("browser-sync").create();

const build = async () => {
  console.log("Building...");
  const service = await esbuild.startService();
  try {

    const timerStart = Date.now();

    // Build code
    await service.build({
      entryPoints: ["js/main.js", "js/editor.js"],
      format: "iife",
      bundle: true,
      minify: true,
      outdir: "build/",
      plugins: [sassPlugin()],
      sourcemap: true,
      //this stops esbuild from trying to resolve these things in css, may need to add more types
      external: ["*.svg", "*.woff", "*.css", "*.jpg", "*.png"],
    });

    const timerEnd = Date.now();
    console.log(`Done! Built in ${timerEnd - timerStart}ms.`);

  } catch (error) {
    console.log(error);
  } finally {
    service.stop();
  }
};

//watch it?
if (process.argv.includes("--watch")) {
  //chokidar will watch theme files for changes to trigger rebuild
  const watcher = chokidar.watch(["js/**/*.js", "css/**/*.scss", "**/*.php"]);
  console.log("Watching files... \n");

  //first build
  build();
  //build on changes
  watcher.on("change", () => {
    build();
  });

  //browserSync will trigger livereload when build files are updated
  browserSync.init({
    //TODO: make these values passed in by `npm run dev`
    port: 3334,
    proxy: "localhost:3333",
    files: ["assets/build/*"],
  });
} else {
  //no watch flag, just build it and be done
  build();
}