chore: update gulpfile.js scripts to use ESM, bump plugin versions (#9420)

Author: web-padawan

eslint.config.js

@@ -173,7 +173,7 @@ export default [
     },
   },
   {
-    files: ['scripts/**/*.js', '*.config.js', 'wtr-utils.js', 'custom-rules/**/*.js'],
+    files: ['scripts/**/*.js', '*.config.js', 'wtr-utils.js', 'custom-rules/**/*.js', 'packages/**/gulpfile.js'],
     languageOptions: {
       globals: {
         ...globals.node,
@@ -183,17 +183,6 @@ export default [
       'no-console': 'off',
     },
   },
-  {
-    files: ['packages/**/gulpfile.cjs'],
-    languageOptions: {
-      globals: {
-        ...globals.node,
-      },
-    },
-    rules: {
-      '@typescript-eslint/no-require-imports': 'off',
-    },
-  },
   {
     files: ['packages/**/test/**', 'test/integration/**'],
     languageOptions: {

package.json

@@ -76,6 +76,7 @@
     "typescript": "^5.8.3"
   },
   "resolutions": {
+    "svg2ttf": "6.0.3",
     "playwright": "^1.52.0"
   },
   "lint-staged": {

packages/icons/gulpfile.cjs

@@ -0,0 +1,52 @@
+import * as cheerio from 'cheerio';
+import { dest, src, task } from 'gulp';
+import concat from 'gulp-concat';
+import { gulpPlugin } from 'gulp-plugin-extras';
+import { basename } from 'path';
+
+function createCopyright() {
+  return `/**
+ * @license
+ * Copyright (c) 2015 - ${new Date().getFullYear()} Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */`;
+}
+
+function transformIcon() {
+  return gulpPlugin('gulp-transform-icon', (file) => {
+    const id = basename(file.path, '.svg');
+    const svg = cheerio.load(file.contents, { xmlMode: true })('svg');
+    // Remove fill attributes.
+    svg.children('[fill]').removeAttr('fill');
+    // Add closing tags instead of self-closing.
+    const content = svg.children().toString().replace(/"\/>/gu, '"></path>');
+    console.warn(id, content);
+    // Output the "meat" of the SVG as group element.
+    file.contents = Buffer.from(`<g id="vaadin:${id}">${content}</g>`);
+    return file;
+  });
+}
+
+function createIconset() {
+  return gulpPlugin('gulp-create-iconset', (file) => {
+    // Enclose all icons in a vaadin-iconset
+    const contents = `${createCopyright()}
+import { Iconset } from '@vaadin/icon/vaadin-iconset.js';
+
+const template = document.createElement('template');
+
+template.innerHTML = \`<svg><defs>\n${file.contents}\n</defs></svg>\`;
+
+Iconset.register('vaadin', 16, template);\n`;
+    file.contents = Buffer.from(contents);
+    return file;
+  });
+}
+
+task('icons', () => {
+  return src(['assets/svg/*.svg'], { base: '.' })
+    .pipe(transformIcon())
+    .pipe(concat('vaadin-iconset.js'))
+    .pipe(createIconset())
+    .pipe(dest('.'));
+});

packages/icons/gulpfile.js

@@ -20,7 +20,7 @@
   "module": "vaadin-iconset.js",
   "type": "module",
   "scripts": {
-    "icons": "gulp icons --gulpfile gulpfile.cjs"
+    "icons": "gulp icons"
   },
   "files": [
     "assets/**/*",
@@ -37,10 +37,10 @@
     "@vaadin/icon": "25.0.0-alpha3"
   },
   "devDependencies": {
-    "cheerio": "^1.0.0-rc.10",
-    "gulp": "^5.0.0",
-    "gulp-cli": "^3.0.0",
+    "cheerio": "^1.0.0",
+    "gulp": "^5.0.1",
+    "gulp-cli": "^3.1.0",
     "gulp-concat": "^2.6.1",
-    "gulp-modify": "^0.1.1"
+    "gulp-plugin-extras": "^1.0.0"
   }
 }

packages/icons/package.json

@@ -1,33 +1,27 @@
-'use strict';
+import fs from 'fs';
+import { dest, task } from 'gulp';
+import iconfont from 'gulp-iconfont';
 
-const gulp = require('gulp');
-const iconfont = require('gulp-iconfont');
-const fs = require('fs');
-
-gulp.task('icons', (done) => {
+task('icons', (done) => {
   let glyphs;
   const fontName = 'vaadin-rte-icons';
   const fileName = 'vaadin-rich-text-editor-icons';
 
-  gulp
-    .src('icons/*.svg')
-    .pipe(
-      iconfont({
-        fontName: fileName,
-        formats: ['woff'],
-        fontHeight: 1000,
-        ascent: 850,
-        descent: 150,
-        fixedWidth: true,
-        normalize: true,
-        timestamp: 1, // Truthy!
-      }),
-    )
+  iconfont('icons/*.svg', {
+    fontName: fileName,
+    formats: ['woff'],
+    fontHeight: 1000,
+    ascent: 850,
+    descent: 150,
+    fixedWidth: true,
+    normalize: true,
+    timestamp: 1, // Truthy!
+  })
     .on('glyphs', (glyphData) => {
       // Store for later use
       glyphs = glyphData;
     })
-    .pipe(gulp.dest('.', { encoding: false }))
+    .pipe(dest('.', { encoding: false }))
     .on('finish', () => {
       // Generate base64 version of the font
       const iconsWoff = fs.readFileSync('vaadin-rich-text-editor-icons.woff');

packages/rich-text-editor/gulpfile.cjs renamed to packages/rich-text-editor/gulpfile.js

@@ -20,7 +20,7 @@
   "module": "vaadin-rich-text-editor.js",
   "type": "module",
   "scripts": {
-    "icons": "gulp icons --gulpfile gulpfile.cjs"
+    "icons": "gulp icons"
   },
   "files": [
     "src",
@@ -54,9 +54,9 @@
     "@vaadin/chai-plugins": "25.0.0-alpha3",
     "@vaadin/test-runner-commands": "25.0.0-alpha3",
     "@vaadin/testing-helpers": "^2.0.0",
-    "gulp": "^5.0.0",
-    "gulp-cli": "^3.0.0",
-    "gulp-iconfont": "^11.0.0",
+    "gulp": "^5.0.1",
+    "gulp-cli": "^3.1.0",
+    "gulp-iconfont": "^12.0.0",
     "sinon": "^18.0.0"
   },
   "cvdlName": "vaadin-rich-text-editor",

packages/rich-text-editor/package.json

@@ -16,7 +16,7 @@ template.innerHTML = `
   <style>
     @font-face {
       font-family: 'vaadin-rte-icons';
-      src: url(data:application/font-woff;charset=utf-8;base64,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) format('woff');
+      src: url(data:application/font-woff;charset=utf-8;base64,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) format('woff');
       font-weight: normal;
       font-style: normal;
     }