Demos: Add Rollup example with a mix of import, input, and output

Ref qunitjs#1551.

.eslintrc.json

@@ -14,6 +14,7 @@
     "coverage/**",
     "demos/*/qunit/**",
     "demos/*/coverage/**",
+    "demos/*/dist/**",
     "demos/*/package-lock.json",
     "docs/.jekyll-cache/**",
     "docs/_site/**",
@@ -190,7 +191,7 @@
       }
     },
     {
-      "files": ["demos/**/*.js"],
+      "files": ["demos/**/*.js", "demos/**/*.mjs"],
       "env": {
         "browser": true,
         "es2017": true,

.gitignore

@@ -3,6 +3,7 @@
 /coverage/
 /demos/*/package-lock.json
 /demos/*/node_modules/
+/demos/*/dist/
 /docs/.jekyll-cache/
 /docs/_site/
 /docs/Gemfile.lock

demos/rollup.js

@@ -0,0 +1,59 @@
+const cp = require('child_process');
+const path = require('path');
+const DIR = path.join(__dirname, 'rollup');
+
+function normalize (str) {
+  return str
+    .replace(/^localhost:\d+/g, 'localhost:8000')
+    .replace(/\b\d+ms\b/g, '42ms');
+}
+
+QUnit.module('rollup', {
+  before: () => {
+    cp.execSync('npm install --prefer-offline --no-audit --update-notifier=false', { cwd: DIR, encoding: 'utf8' });
+    cp.execSync('npx npm run build', { cwd: DIR, encoding: 'utf8' });
+  }
+});
+
+QUnit.test('test', assert => {
+  const expected = `Running "connect:all" (connect) task
+Started connect web server on http://localhost:8000
+
+Running "qunit:all" (qunit) task
+Testing http://localhost:8000/test-import-default-from-cjs.es.html .OK
+>> passed test "import default from qunit.cjs > example"
+Testing http://localhost:8000/test-import-default-from-cjs.iife.html .OK
+>> passed test "import default from qunit.cjs > example"
+Testing http://localhost:8000/test-import-default-from-cjs.umd.html .OK
+>> passed test "import default from qunit.cjs > example"
+Testing http://localhost:8000/test-import-from-cjs.es.html .OK
+>> passed test "import { module,test } from qunit.cjs > example"
+Testing http://localhost:8000/test-import-from-cjs.iife.html .OK
+>> passed test "import { module,test } from qunit.cjs > example"
+Testing http://localhost:8000/test-import-from-cjs.umd.html .OK
+>> passed test "import { module,test } from qunit.cjs > example"
+Testing http://localhost:8000/test-mixed.es.html ...OK
+>> passed test "import default from qunit.cjs > example"
+>> passed test "import { module,test } from qunit.cjs > example"
+>> passed test "require from qunit.cjs > example"
+Testing http://localhost:8000/test-mixed.iife.html ...OK
+>> passed test "import default from qunit.cjs > example"
+>> passed test "import { module,test } from qunit.cjs > example"
+>> passed test "require from qunit.cjs > example"
+Testing http://localhost:8000/test-mixed.umd.html ...OK
+>> passed test "import default from qunit.cjs > example"
+>> passed test "import { module,test } from qunit.cjs > example"
+>> passed test "require from qunit.cjs > example"
+Testing http://localhost:8000/test-require-from-cjs.es.html .OK
+>> passed test "require from qunit.cjs > example"
+Testing http://localhost:8000/test-require-from-cjs.iife.html .OK
+>> passed test "require from qunit.cjs > example"
+Testing http://localhost:8000/test-require-from-cjs.umd.html .OK
+>> passed test "require from qunit.cjs > example"
+>> 18 tests completed in 42ms, with 0 failed, 0 skipped, and 0 todo.
+
+Done.`;
+
+  const actual = cp.execSync('npx npm -s test', { cwd: DIR, env: { PATH: process.env.PATH }, encoding: 'utf8' });
+  assert.equal(normalize(actual).trim(), expected);
+});

demos/rollup/Gruntfile.js

@@ -0,0 +1,39 @@
+/* eslint-env node */
+module.exports = function (grunt) {
+  grunt.loadNpmTasks('grunt-contrib-connect');
+  grunt.loadNpmTasks('grunt-contrib-qunit');
+
+  grunt.initConfig({
+    connect: {
+      all: {
+        options: {
+          useAvailablePort: true,
+          base: '.'
+        }
+      }
+    },
+    qunit: {
+      options: {
+      },
+      all: ['test-*.html']
+    }
+  });
+
+  grunt.event.once('connect.all.listening', function (_host, port) {
+    grunt.config('qunit.options.httpBase', `http://localhost:${port}`);
+    // console.log(grunt.config()); // DEBUG
+  });
+
+  let results = [];
+  grunt.event.on('qunit.on.testEnd', function (test) {
+    results.push(
+      `>> ${test.status} test "${test.fullName.join(' > ')}"`
+    );
+  });
+  grunt.event.on('qunit.on.runEnd', function () {
+    grunt.log.writeln(results.join('\n'));
+    results = [];
+  });
+
+  grunt.registerTask('test', ['connect', 'qunit']);
+};

demos/rollup/build.mjs

@@ -0,0 +1,97 @@
+import fs from 'node:fs';
+
+import { rollup } from 'rollup';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+
+const plugins = [commonjs(), resolve()];
+
+const inputs = [
+  {
+    input: 'test/test-import-default-from-cjs.js',
+    plugins
+  },
+  {
+    input: 'test/test-import-from-cjs.js',
+    plugins
+  },
+  {
+    input: 'test/test-mixed.js',
+    plugins
+  },
+  {
+    input: 'test/test-require-from-cjs.js',
+    plugins,
+    // Ignore "output.name" warning for test-require-from-cjs.iife.js
+    onwarn: () => {}
+  }
+];
+const outputs = [
+  {
+    dir: 'dist/',
+    entryFileNames: '[name].[format].js',
+    format: 'es'
+  },
+  {
+    dir: 'dist/',
+    entryFileNames: '[name].[format].js',
+    format: 'cjs'
+  },
+  {
+    dir: 'dist/',
+    entryFileNames: '[name].[format].js',
+    format: 'iife'
+  },
+  {
+    dir: 'dist/',
+    entryFileNames: '[name].[format].js',
+    format: 'umd',
+    name: 'UNUSED'
+  }
+];
+const htmlTemplate = `
+<!DOCTYPE html>
+<html>
+<head>
+<title>{{title}}</title>
+<link rel="stylesheet" href="node_modules/qunit/qunit/qunit.css">
+{{scriptTag}}
+</head>
+<body>
+<div id="qunit"></div>
+</body>
+</html>
+`;
+
+(async function main () {
+  const entries = fs.readdirSync('.');
+  for (const entry of entries) {
+    if (entry.match(/^test-.*\.html$/)) {
+      fs.rmSync(entry);
+    }
+  }
+  for (const input of inputs) {
+    const bundle = await rollup(input);
+
+    for (const outputOptions of outputs) {
+      const { output } = await bundle.write(outputOptions);
+      const fileName = output[0].fileName;
+      console.log('... built ' + fileName);
+
+      if (outputOptions.format !== 'cjs') {
+        const html = htmlTemplate
+          .replace('{{title}}', fileName)
+          .replace('{{scriptTag}}', (
+            fileName.endsWith('.es.js')
+              ? `<script src="dist/${fileName}" type="module"></script>`
+              : `<script src="dist/${fileName}"></script>`
+          ));
+
+        fs.writeFileSync(
+          fileName.replace('.js', '') + '.html',
+          html
+        );
+      }
+    }
+  }
+}());

demos/rollup/package.json

@@ -0,0 +1,16 @@
+{
+  "private": true,
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^26.0.1",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "grunt": "1.6.1",
+    "grunt-contrib-connect": "^5.0.0",
+    "grunt-contrib-qunit": "10.1.1",
+    "qunit": "file:../..",
+    "rollup": "^4.18.0"
+  },
+  "scripts": {
+    "build": "node build.mjs",
+    "test": "grunt test"
+  }
+}

demos/rollup/test-import-default-from-cjs.es.html

@@ -0,0 +1,12 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+<title>test-import-default-from-cjs.es.js</title>
+<link rel="stylesheet" href="node_modules/qunit/qunit/qunit.css">
+<script src="dist/test-import-default-from-cjs.es.js" type="module"></script>
+</head>
+<body>
+<div id="qunit"></div>
+</body>
+</html>

demos/rollup/test-import-default-from-cjs.iife.html

@@ -0,0 +1,12 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+<title>test-import-default-from-cjs.iife.js</title>
+<link rel="stylesheet" href="node_modules/qunit/qunit/qunit.css">
+<script src="dist/test-import-default-from-cjs.iife.js"></script>
+</head>
+<body>
+<div id="qunit"></div>
+</body>
+</html>

demos/rollup/test-import-default-from-cjs.umd.html

@@ -0,0 +1,12 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+<title>test-import-default-from-cjs.umd.js</title>
+<link rel="stylesheet" href="node_modules/qunit/qunit/qunit.css">
+<script src="dist/test-import-default-from-cjs.umd.js"></script>
+</head>
+<body>
+<div id="qunit"></div>
+</body>
+</html>

demos/rollup/test-import-from-cjs.es.html

@@ -0,0 +1,12 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+<title>test-import-from-cjs.es.js</title>
+<link rel="stylesheet" href="node_modules/qunit/qunit/qunit.css">
+<script src="dist/test-import-from-cjs.es.js" type="module"></script>
+</head>
+<body>
+<div id="qunit"></div>
+</body>
+</html>

demos/rollup/test-import-from-cjs.iife.html

@@ -0,0 +1,12 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+<title>test-import-from-cjs.iife.js</title>
+<link rel="stylesheet" href="node_modules/qunit/qunit/qunit.css">
+<script src="dist/test-import-from-cjs.iife.js"></script>
+</head>
+<body>
+<div id="qunit"></div>
+</body>
+</html>

demos/rollup/test-import-from-cjs.umd.html

@@ -0,0 +1,12 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+<title>test-import-from-cjs.umd.js</title>
+<link rel="stylesheet" href="node_modules/qunit/qunit/qunit.css">
+<script src="dist/test-import-from-cjs.umd.js"></script>
+</head>
+<body>
+<div id="qunit"></div>
+</body>
+</html>

demos/rollup/test-mixed.es.html

@@ -0,0 +1,12 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+<title>test-mixed.es.js</title>
+<link rel="stylesheet" href="node_modules/qunit/qunit/qunit.css">
+<script src="dist/test-mixed.es.js" type="module"></script>
+</head>
+<body>
+<div id="qunit"></div>
+</body>
+</html>

demos/rollup/test-mixed.iife.html

@@ -0,0 +1,12 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+<title>test-mixed.iife.js</title>
+<link rel="stylesheet" href="node_modules/qunit/qunit/qunit.css">
+<script src="dist/test-mixed.iife.js"></script>
+</head>
+<body>
+<div id="qunit"></div>
+</body>
+</html>

demos/rollup/test-mixed.umd.html

@@ -0,0 +1,12 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+<title>test-mixed.umd.js</title>
+<link rel="stylesheet" href="node_modules/qunit/qunit/qunit.css">
+<script src="dist/test-mixed.umd.js"></script>
+</head>
+<body>
+<div id="qunit"></div>
+</body>
+</html>

demos/rollup/test-require-from-cjs.es.html

@@ -0,0 +1,12 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+<title>test-require-from-cjs.es.js</title>
+<link rel="stylesheet" href="node_modules/qunit/qunit/qunit.css">
+<script src="dist/test-require-from-cjs.es.js" type="module"></script>
+</head>
+<body>
+<div id="qunit"></div>
+</body>
+</html>

demos/rollup/test-require-from-cjs.iife.html

@@ -0,0 +1,12 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+<title>test-require-from-cjs.iife.js</title>
+<link rel="stylesheet" href="node_modules/qunit/qunit/qunit.css">
+<script src="dist/test-require-from-cjs.iife.js"></script>
+</head>
+<body>
+<div id="qunit"></div>
+</body>
+</html>

demos/rollup/test-require-from-cjs.umd.html

@@ -0,0 +1,12 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+<title>test-require-from-cjs.umd.js</title>
+<link rel="stylesheet" href="node_modules/qunit/qunit/qunit.css">
+<script src="dist/test-require-from-cjs.umd.js"></script>
+</head>
+<body>
+<div id="qunit"></div>
+</body>
+</html>