server.js

import { red, green, cyan, bold } from 'colorette';
const loadConfigFile = require('rollup/dist/loadConfigFile');
const path = require('path');
const fs = require('fs');
const http = require('http');
const handler = require('serve-handler');
const rollup = require('rollup');
const metablock = require('rollup-plugin-userscript-metablock');

const pkg = require('./package.json');
const meta = require('./meta.json');

console.log('👀 watch & serve 🤲\n###################\n');

const port = pkg.config.port;
const destDir = 'dist/';
const devScriptInFile = 'dev.user.js';

const hyperlink = (url, title) =>
  `\u001B]8;;${url}\u0007${title || url}\u001B]8;;\u0007`;

fs.mkdir('dist/', { recursive: true }, () => null);

// Start web server
const server = http.createServer((request, response) => {
  return handler(request, response, {
    public: destDir,
  });
});
server.listen(port, () => {
  console.log(`Running webserver at ${hyperlink(`http://localhost:${port}`)}`);
});

// Create the userscript for development 'dist/dev.user.js'
const devScriptOutFile = path.join(destDir, devScriptInFile);
console.log(
  cyan(
    `generate development userscript ${bold('package.json')}, ${bold(
      'meta.json'
    )}, ${bold(devScriptInFile)} → ${bold(devScriptOutFile)}...`
  )
);
const devScriptContent = fs
  .readFileSync(devScriptInFile, 'utf8')
  .replace(/%PORT%/gm, port.toString());
const grants = 'grant' in meta ? meta.grant : [];
if (grants.indexOf('GM.xmlHttpRequest') === -1) {
  grants.push('GM.xmlHttpRequest');
}
if (grants.indexOf('GM.setValue') === -1) {
  grants.push('GM.setValue');
}
if (grants.indexOf('GM.getValue') === -1) {
  grants.push('GM.getValue');
}
const devMetablock = metablock({
  file: './meta.json',
  override: {
    name: pkg.name + ' [dev]',
    version: pkg.version,
    description: pkg.description,
    homepage: pkg.homepage,
    author: pkg.author,
    license: pkg.license,
    grant: grants,
  },
});

const result = devMetablock.renderChunk(devScriptContent, null, {
  sourcemap: false,
});
const outContent = typeof result === 'string' ? result : result.code;
fs.writeFileSync(devScriptOutFile, outContent);
console.log(
  green(`created ${bold(devScriptOutFile)}. Please install in Tampermonkey: `) +
    hyperlink(`http://localhost:${port}/${devScriptInFile}`)
);

loadConfigFile(path.resolve(__dirname, 'rollup.config.js')).then(
  async ({ options, warnings }) => {
    // Start rollup watch
    const watcher = rollup.watch(options);

    watcher.on('event', (event) => {
      if (event.code === 'BUNDLE_START') {
        console.log(
          cyan(
            `bundles ${bold(event.input)} → ${bold(
              event.output
                .map((fullPath) =>
                  path.relative(path.resolve(__dirname), fullPath)
                )
                .join(', ')
            )}...`
          )
        );
      } else if (event.code === 'BUNDLE_END') {
        console.log(
          green(
            `created ${bold(
              event.output
                .map((fullPath) =>
                  path.relative(path.resolve(__dirname), fullPath)
                )
                .join(', ')
            )} in ${event.duration}ms`
          )
        );
      } else if (event.code === 'ERROR') {
        console.log(bold(red('⚠ Error')));
        console.log(event.error);
      }
      if ('result' in event && event.result) {
        event.result.close();
      }
    });

    // stop watching
    watcher.close();
  }
);