browser-extension/gulpfile.js

// SPDX-FileCopyrightText: © 2023 Olivier Meunier <olivier@neokraft.net>
//
// SPDX-License-Identifier: GPL-3.0-only
"use strict"

const fs = require("fs")
const path = require("path")

const gulp = require("gulp")
const gulpEsbuild = require("gulp-esbuild")
const gulpPostcss = require("gulp-postcss")
const gulpRename = require("gulp-rename")

const sveltePlugin = require("esbuild-svelte")
const DEST = path.resolve("./addon")

// REUSE-IgnoreStart
const LICENSE_HEADER = [
  "SPDX-FileCopyrightText: © 2023 Olivier Meunier <olivier@neokraft.net>",
  "",
  "SPDX-License-Identifier: GPL-3.0-only",
]
// REUSE-IgnoreEnd

const distInfoPlugin = {
  name: "dist-info",
  setup(build) {
    build.onResolve({filter: /^dist-info$/}, () => {
      let filename
      switch (process.env.TARGET_BROWSER) {
        case "chrome":
          filename = "chrome.json"
          break
        case "safari":
          filename = "safari.json"
          break
        default:
          filename = "firefox.json"
          break
      }

      return {path: path.resolve(`src/resources/${filename}`)}
    })
  },
}

function js_bundle(done) {
  const files = [
    //
    "src/main.js",
    "src/settings.js",
    "src/background.js",
    "src/content-script/content-script.js",
    "src/oauth-callback.js",
  ]

  files.map((x) => {
    return gulp
      .src(x)
      .pipe(
        gulpEsbuild({
          sourcemap: "linked",
          outfile: path.basename(x),
          bundle: true,
          format: "iife",
          platform: "browser",
          logLevel: "warning",
          metafile: false,
          minify: true,
          banner: {
            js: "//" + LICENSE_HEADER.join("\n//"),
          },
          loader: {
            ".svg": "text",
          },
          plugins: [sveltePlugin(), distInfoPlugin],
        }),
      )
      .pipe(gulp.dest(path.join(DEST, "dist")))
  })

  done()
}

function css_bundle() {
  const processors = [
    //
    require("./src/ui/palettes.js"),
    require("postcss-import"),
    require("tailwindcss"),
  ]
  if (process.env.NODE_ENV == "production") {
    processors.push(require("cssnano"))
  }

  return gulp
    .src(["src/ui/index.css"])
    .pipe(gulpRename("bundle.css"))
    .pipe(gulpPostcss(processors))
    .pipe(gulp.dest(path.join(DEST, "dist")))
}

function write_manifest(done) {
  delete require.cache[require.resolve("./webext-manifest.js")]
  let manifest = require("./webext-manifest.js")(process.env.TARGET_BROWSER)

  let dest = path.join(DEST, "manifest.json")
  fs.writeFile(dest, JSON.stringify(manifest, null, "  ") + "\n", done)
}

function watch_js() {
  gulp.watch(
    [
      //
      "addon/action/*",
      "webext-manifest.js",
      "src/**/*",
    ],
    gulp.series(js_bundle, write_manifest),
  )
}

function watch_css() {
  gulp.watch(
    [
      //
      "addon/action/*",
      "src/**/*",
    ],
    gulp.series(css_bundle),
  )
}

const full_build = gulp.series(
  gulp.parallel(js_bundle, css_bundle),
  write_manifest,
)

exports.js = js_bundle
exports.css = css_bundle
exports.manifest = write_manifest
exports.watch = gulp.series(full_build, gulp.parallel(watch_js, watch_css))

exports.default = full_build