feat(deps): update to Rollup v3 (#913)

* refactor(generate-examples-index): remove deprecated use Ths way of using the default export of Cheerio is deprecated and stopped working after updates. * feat(deps): update to Rollup v3
visjs · Mar 4, 2023 · 27164f9 · 27164f9
1 parent ecf6c02
commit 27164f9
Show file tree

Hide file tree

Showing 9 changed files with 494 additions and 314 deletions.
diff --git a/@types/index.d.ts b/@types/index.d.ts
@@ -13,31 +13,11 @@ declare module "*.txt" {
   export default value;
 }
 
-declare module "chai-fs" {
-  const value: any;
-  export default value;
-}
-
 declare module "postcss-assets" {
   const value: any;
   export default value;
 }
 
-declare module "rollup-plugin-analyzer" {
-  const value: any;
-  export default value;
-}
-
-declare module "rollup-plugin-babel" {
-  const value: any;
-  export default value;
-}
-
-declare module "rollup-plugin-postcss" {
-  const value: any;
-  export default value;
-}
-
 declare module "rollup-plugin-string" {
   export const string: any;
   export default string;

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,7 +20,7 @@
     "build": "run-s build:internal build:production build:declarations",
     "build:declarations": "npx tsc --project tsconfig.declarations.json",
     "build:internal": "tsc --project tsconfig.internal.json",
-    "build:production": "rollup --config ./rollup.config.js",
+    "build:production": "rollup --bundleConfigAsCjs --config ./rollup.config.js",
     "clean": "rimraf \"./{.nyc_output,.rpt2_cache}\" \"./{bin,coverage,declarations,dist,e2e,gen,lib}/*\"",
     "style": "prettier --check .",
     "style-fix": "prettier --write .",
@@ -32,7 +32,7 @@
     "test:interop": "node interop.js",
     "test:interop:debug": "npm run test:interop -- --fail-command \"$SHELL\"",
     "test:unit": "mocha --exit",
-    "watch": "rollup --watch --config rollup.config.js"
+    "watch": "rollup --bundleConfigAsCjs --watch --config rollup.config.js"
   },
   "lint-staged": {
     "**/*.{css,html,js,json,json,md,ts,yml}": [
@@ -68,16 +68,18 @@
     "lib"
   ],
   "peerDependencies": {
-    "@babel/core": "7.18.13",
+    "@babel/core": "7.20.12",
     "@babel/plugin-proposal-class-properties": "7.18.6",
-    "@babel/plugin-transform-runtime": "7.18.10",
-    "@babel/preset-env": "7.18.10",
+    "@babel/plugin-transform-runtime": "7.19.6",
+    "@babel/preset-env": "7.20.2",
     "@babel/preset-typescript": "7.18.6",
     "@babel/register": "7.18.9",
-    "@babel/runtime-corejs3": "7.18.9",
-    "@rollup/plugin-commonjs": "22.0.2",
-    "@rollup/plugin-json": "4.1.0",
-    "@rollup/plugin-node-resolve": "13.3.0",
+    "@babel/runtime-corejs3": "7.20.13",
+    "@rollup/plugin-babel": "6.0.3",
+    "@rollup/plugin-commonjs": "24.0.1",
+    "@rollup/plugin-json": "6.0.0",
+    "@rollup/plugin-node-resolve": "15.0.1",
+    "@rollup/plugin-terser": "0.4.0",
     "@typescript-eslint/eslint-plugin": "5.30.0",
     "@typescript-eslint/parser": "5.30.0",
     "babel-plugin-css-modules-transform": "1.6.2",
@@ -96,21 +98,20 @@
     "postcss-assets": "6.0.0",
     "prettier": "2.7.1",
     "puppeteer": "14.4.1",
-    "rollup": "2.75.7",
+    "rollup": "3.17.1",
     "rollup-plugin-analyzer": "4.0.0",
-    "rollup-plugin-babel": "4.4.0",
     "rollup-plugin-copy": "3.4.0",
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-string": "3.0.0",
     "rollup-plugin-strip-code": "0.2.7",
-    "rollup-plugin-terser": "7.0.2",
-    "rollup-plugin-typescript2": "0.32.1",
+    "rollup-plugin-typescript2": "0.34.1",
     "tmp": "0.2.1",
     "tmp-promise": "3.0.2",
     "typescript": "4.7.4",
     "yargs": "17.5.1"
   },
   "devDependencies": {
+    "@types/babel__core": "^7.20.0",
     "@types/chai": "4.3.4",
     "@types/chai-fs": "2.0.2",
     "@types/cheerio": "0.22.31",

diff --git a/rollup.config.js b/rollup.config.js
@@ -1,6 +1,6 @@
 import packageJSON from "./package.json";
 import analyzer from "rollup-plugin-analyzer";
-import babel from "rollup-plugin-babel";
+import babel from "@rollup/plugin-babel";
 import commonjs from "@rollup/plugin-commonjs";
 import copy from "rollup-plugin-copy";
 import externals from "rollup-plugin-node-externals";
@@ -42,9 +42,10 @@ const getPlugins = () => [
   }),
   commonjs(),
   babel({
+    babelHelpers: "runtime",
     babelrc: false,
     extensions: [".js", ".ts"],
-    runtimeHelpers: true,
+    include: ["src/**"],
   }),
 ];
 

diff --git a/src/generate-examples-index/content-builder/html/index.ts b/src/generate-examples-index/content-builder/html/index.ts
@@ -10,7 +10,7 @@ import { formatHTML } from "../format";
  * @param example
  */
 function generateJSFiddle(example: Example): cheerio.Cheerio {
-  return $("<a>")
+  return $.load([])("<a>")
     .addClass("icon jsfiddle")
     .attr("href", example.paths.jsfiddle.web)
     .attr("title", "JSFiddle");
@@ -20,7 +20,7 @@ function generateJSFiddle(example: Example): cheerio.Cheerio {
  * @param example
  */
 function generateCodePen(example: Example): cheerio.Cheerio {
-  return $("<a>")
+  return $.load([])("<a>")
     .addClass("icon codepen")
     .attr("href", example.paths.codepen.web)
     .attr("title", "CodePen");
@@ -38,34 +38,38 @@ function processGroup(
   level: number,
   collator: Intl.Collator
 ): cheerio.Cheerio {
-  const heading = $(`<h${Math.max(1, Math.min(6, level))}>`);
+  const heading = $.load([])(`<h${Math.max(1, Math.min(6, level))}>`);
   heading.text(title);
 
-  const list = $("<div>");
+  const list = $.load([])("<div>");
 
-  const section = $("<div>");
+  const section = $.load([])("<div>");
   section.append(heading, list);
 
   for (const key of Object.keys(examples).sort(collator.compare)) {
     const example = examples[key];
 
     if (isExample(example)) {
-      const header = $("<div>").addClass("example-header").append(
+      const header = $.load([])("<div>").addClass("example-header").append(
         // Playgrounds
         generateJSFiddle(example),
         generateCodePen(example),
         // Title
-        $("<a>").attr("href", example.paths.page.web).text(key)
+        $.load([])("<a>").attr("href", example.paths.page.web).text(key)
       );
 
-      const image = $("<a>")
+      const image = $.load([])("<a>")
         .addClass("example-image")
         .attr("href", example.paths.page.web)
         .append(
-          $("<img>").attr("src", example.paths.screenshot.web).attr("alt", key)
+          $.load([])("<img>")
+            .attr("src", example.paths.screenshot.web)
+            .attr("alt", key)
         );
 
-      const item = $("<span>").addClass("example-link").append(header, image);
+      const item = $.load([])("<span>")
+        .addClass("example-link")
+        .append(header, image);
 
       list.append(item);
     } else {
@@ -85,7 +89,7 @@ export const htmlRenderer: Renderer = {
   ): ContentPart[] {
     const filename = "index.html";
 
-    const root = $("<div>");
+    const root = $.load([])("<div>");
     root.addClass("examples-root");
 
     for (const key of Object.keys(examples).sort(collator.compare)) {

diff --git a/src/generate-examples-index/content-builder/playground/data.ts b/src/generate-examples-index/content-builder/playground/data.ts
@@ -62,12 +62,14 @@ export function generatePlaygroundData(
 
   const resources = {
     js: example$("script")
-      .map((_i, elem): undefined | string => $(elem).attr("src"))
+      .map((_i, elem): undefined | string => $.load(elem)("script").attr("src"))
       .get()
       .filter((src): src is string => typeof src === "string")
       .map(fixPath),
     css: example$("link[rel='stylesheet']")
-      .map((_i, elem): undefined | string => $(elem).attr("href"))
+      .map((_i, elem): undefined | string =>
+        $.load(elem)("script").attr("href")
+      )
       .get()
       .filter((href): href is string => typeof href === "string")
       .map(fixPath),

diff --git a/src/generate-examples-index/content-builder/screenshots/index.ts b/src/generate-examples-index/content-builder/screenshots/index.ts
@@ -76,14 +76,16 @@ export async function generateScreenshot(
     );
     const screenshotPage = $.load(example.html);
     screenshotPage("head").prepend(
-      $("<script>")
+      $.load([])("<script>")
         .attr("type", "text/javascript")
         .text(`window.DEBUG = ${true};`),
-      $("<script>")
+      $.load([])("<script>")
         .attr("type", "text/javascript")
         .text(commonScreenshotScript),
-      $("<script>").attr("type", "text/javascript").text(screenshotScript),
-      $("<style>")
+      $.load([])("<script>")
+        .attr("type", "text/javascript")
+        .text(screenshotScript),
+      $.load([])("<style>")
         .attr("type", "text/css")
         .text(
           [

diff --git a/src/generate-examples-index/index.ts b/src/generate-examples-index/index.ts
@@ -95,7 +95,7 @@ function lintExample(path: string, page: cheerio.Root): boolean {
 
   const headTitle = page("head > title").text().trim();
   const bodyTitle = page("#title > *")
-    .map((_i, elem): string => $(elem).text())
+    .map((_i, elem): string => $.load([])(elem).text())
     .get()
     .join(" | ")
     .trim();

diff --git a/src/module/generate-rollup-configuration/index.ts b/src/module/generate-rollup-configuration/index.ts
@@ -1,6 +1,6 @@
 import { type RollupOptions, type Plugin } from "rollup";
 import analyzerPlugin from "rollup-plugin-analyzer";
-import babelPlugin from "rollup-plugin-babel";
+import babelPlugin from "@rollup/plugin-babel";
 import chaiFs from "chai-fs";
 import commonjsPlugin from "@rollup/plugin-commonjs";
 import copyPlugin, { Target as CopyTarget } from "rollup-plugin-copy";
@@ -9,19 +9,20 @@ import nodeResolvePlugin from "@rollup/plugin-node-resolve";
 import postcssAssetsPlugin from "postcss-assets";
 import postcssPlugin from "rollup-plugin-postcss";
 import stripCodePlugin from "rollup-plugin-strip-code";
+import terserPlugin from "@rollup/plugin-terser";
 import typescriptPlugin from "rollup-plugin-typescript2";
 import { generateHeader } from "../header";
 import { join, resolve, sep } from "path";
 import { string as stringPlugin } from "rollup-plugin-string";
-import { terser as terserPlugin } from "rollup-plugin-terser";
 import {
   config as chaiConfig,
   expect as validateExpect,
   use as chaiUse,
 } from "chai";
 
-import { OptionalOptions } from "../util";
-import { HeaderOptions } from "../header";
+import { BABEL_IGNORE_RE } from "../constants";
+import { type HeaderOptions } from "../header";
+import { type OptionalOptions } from "../util";
 
 const rawGlobby = import("globby");
 
@@ -372,8 +373,12 @@ const generateRollupPluginArray = (
     ...(transpile
       ? [
           babelPlugin({
+            babelHelpers: "runtime",
+            babelrc: false,
+            configFile: false,
+            exclude: BABEL_IGNORE_RE,
             extensions: [".js", ".ts"],
-            runtimeHelpers: true,
+            presets: [["vis-dev-utils/babel-preset", { ts: true }]],
           }),
         ]
       : []),
@@ -404,15 +409,15 @@ const generateRollupPluginArray = (
  * stripped.
  *
  * Plugins:
+ * - `\@rollup/plugin-babel` (skipped in ESNext)
  * - `\@rollup/plugin-commonjs`
  * - `\@rollup/plugin-json`
  * - `\@rollup/plugin-node-resolve`
  * - `\@rollup/plugin-strip` (skipped with VIS_DEBUG=true env var)
+ * - `\@rollup/plugin-terser` (only in minified)
  * - `postcss-assets`
- * - `rollup-plugin-babel` (skipped in ESNext)
  * - `rollup-plugin-copy`
  * - `rollup-plugin-postcss`
- * - `rollup-plugin-terser` (only in minified)
  * - `rollup-plugin-typescript2` (skipped if the entry is .js)
  * @param options - See {@link GRCOptions}.
  * @param mode - Whether the code should be processed for production,