From d02d6d90b00451be36d6349c037564382658f40b Mon Sep 17 00:00:00 2001 From: web-padawan Date: Fri, 6 Jun 2025 15:08:22 +0300 Subject: [PATCH 01/10] chore: update icons gulpfile.js to use ESM --- eslint.config.js | 2 +- packages/icons/gulpfile.cjs | 54 ------------------------------ packages/icons/gulpfile.js | 51 +++++++++++++++++++++++++++++ packages/icons/package.json | 6 ++-- yarn.lock | 65 +++++++++++++++++++++++-------------- 5 files changed, 96 insertions(+), 82 deletions(-) delete mode 100644 packages/icons/gulpfile.cjs create mode 100644 packages/icons/gulpfile.js diff --git a/eslint.config.js b/eslint.config.js index d9937872732..f3b2f917fb9 100644 --- a/eslint.config.js +++ b/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, diff --git a/packages/icons/gulpfile.cjs b/packages/icons/gulpfile.cjs deleted file mode 100644 index f16eed68dca..00000000000 --- a/packages/icons/gulpfile.cjs +++ /dev/null @@ -1,54 +0,0 @@ -'use strict'; - -const gulp = require('gulp'); -const modify = require('gulp-modify'); -const cheerio = require('cheerio'); -const concat = require('gulp-concat'); - -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 iconFileModifier(prefix) { - return function (file, contents) { - const id = file.path.replace(/.*\/(.*).svg/u, '$1'); - const svg = cheerio.load(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, '">'); - // Output the "meat" of the SVG as group element. - return `${content}`; - }; -} - -gulp.task('icons', () => { - return gulp - .src(['assets/svg/*.svg'], { base: '.' }) - .pipe( - modify({ - fileModifier: iconFileModifier('vaadin:'), - }), - ) - .pipe(concat('vaadin-iconset.js')) - .pipe( - modify({ - fileModifier(_file, contents) { - // Enclose all icons in a vaadin-iconset - return `${createCopyright()} -import { Iconset } from '@vaadin/icon/vaadin-iconset.js'; - -const template = document.createElement('template'); - -template.innerHTML = \`\n${contents}\n\`; - -Iconset.register('vaadin', 16, template);\n`; - }, - }), - ) - .pipe(gulp.dest('.')); -}); diff --git a/packages/icons/gulpfile.js b/packages/icons/gulpfile.js new file mode 100644 index 00000000000..63f65782e91 --- /dev/null +++ b/packages/icons/gulpfile.js @@ -0,0 +1,51 @@ +import * as cheerio from 'cheerio'; +import { dest, src, task } from 'gulp'; +import concat from 'gulp-concat'; +import { gulpPlugin } from 'gulp-plugin-extras'; + +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 = file.path.replace(/.*\/(.*).svg/u, '$1'); + 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, '">'); + console.warn(id, content); + // Output the "meat" of the SVG as group element. + file.contents = Buffer.from(`${content}`); + 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 = \`\n${file.contents}\n\`; + +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('.')); +}); diff --git a/packages/icons/package.json b/packages/icons/package.json index b7565be9021..36b249393b0 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -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", + "cheerio": "^1.0.0", "gulp": "^5.0.0", "gulp-cli": "^3.0.0", "gulp-concat": "^2.6.1", - "gulp-modify": "^0.1.1" + "gulp-plugin-extras": "^1.0.0" } } diff --git a/yarn.lock b/yarn.lock index b8b067bc515..8e758cb6e50 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1676,6 +1676,11 @@ resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4" integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw== +"@types/expect@^1.20.4": + version "1.20.4" + resolved "https://registry.yarnpkg.com/@types/expect/-/expect-1.20.4.tgz#8288e51737bf7e3ab5d7c77bfa695883745264e5" + integrity sha512-Q5Vn3yjTDyCMV50TB6VRIbQNxSE4OmZR86VSbGaNpfUolm0iePBB4KdEEHmxoY5sT2+2DIvXW0rvMDP2nHZ4Mg== + "@types/express-serve-static-core@^4.17.18": version "4.17.31" resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.17.31.tgz#a1139efeab4e7323834bb0226e62ac019f474b2f" @@ -1872,6 +1877,14 @@ resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.7.tgz#baccb07a970b91707df3a3e8ba6896c57ead2d11" integrity sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw== +"@types/vinyl@^2.0.12": + version "2.0.12" + resolved "https://registry.yarnpkg.com/@types/vinyl/-/vinyl-2.0.12.tgz#17642ca9a8ae10f3db018e9f885da4188db4c6e6" + integrity sha512-Sr2fYMBUVGYq8kj3UthXFAu5UN6ZW+rYr4NACjZQJvHvj+c8lYv0CahmZ2P/r7iUkN44gGUBwqxZkrKXYPb7cw== + dependencies: + "@types/expect" "^1.20.4" + "@types/node" "*" + "@types/which@^2.0.1": version "2.0.2" resolved "https://registry.yarnpkg.com/@types/which/-/which-2.0.2.tgz#54541d02d6b1daee5ec01ac0d1b37cecf37db1ae" @@ -3371,6 +3384,11 @@ chalk@^5.1.2, chalk@~5.3.0: resolved "https://registry.yarnpkg.com/chalk/-/chalk-5.3.0.tgz#67c20a7ebef70e7f3970a01f90fa210cb6860385" integrity sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w== +chalk@^5.3.0: + version "5.4.1" + resolved "https://registry.yarnpkg.com/chalk/-/chalk-5.4.1.tgz#1b48bf0963ec158dce2aacf69c093ae2dd2092d8" + integrity sha512-zgVZuo2WcZgfUEmsn6eO3kINexW8RAE4maiQ8QNs8CtpPCSyMiYsULR3HQYkm3w8FIA3SberyMJMSldGsW+U3w== + change-case@^4.1.2: version "4.1.2" resolved "https://registry.yarnpkg.com/change-case/-/change-case-4.1.2.tgz#fedfc5f136045e2398c0410ee441f95704641e12" @@ -3411,7 +3429,7 @@ cheerio-select@^2.1.0: domhandler "^5.0.3" domutils "^3.0.1" -cheerio@^1.0.0-rc.10, cheerio@^1.0.0-rc.12: +cheerio@^1.0.0, cheerio@^1.0.0-rc.12: version "1.0.0" resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-1.0.0.tgz#1ede4895a82f26e8af71009f961a9b8cb60d6a81" integrity sha512-quS9HgjQpdaXOvsZz82Oz7uxtXiy6UIsIQcpBj7HRw2M63Skasm9qlDocAM7jNuaxdhpPU7c4kJN+gA5MCu4ww== @@ -4463,6 +4481,11 @@ eastasianwidth@^0.2.0: resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb" integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA== +easy-transform-stream@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/easy-transform-stream/-/easy-transform-stream-1.0.1.tgz#faffdd1839a03d14d76e694bd2e6315551a6a215" + integrity sha512-ktkaa6XR7COAR3oj02CF3IOgz2m1hCaY3SfzvKT4Svt2MhHw9XCt+ncJNWfe2TGz31iqzNGZ8spdKQflj+Rlog== + edge-paths@^3.0.5: version "3.0.5" resolved "https://registry.yarnpkg.com/edge-paths/-/edge-paths-3.0.5.tgz#9a35361d701d9b5dc07f641cebe8da01ede80937" @@ -6070,13 +6093,14 @@ gulp-iconfont@^11.0.0: multipipe "^4.0.0" streamfilter "^3.0.0" -gulp-modify@^0.1.1: - version "0.1.1" - resolved "https://registry.yarnpkg.com/gulp-modify/-/gulp-modify-0.1.1.tgz#4a99a0bb8b7769921c7b09618762ccc179da3675" - integrity sha512-2sMrF2uYfjRh6A+rbOzbkxHiJoqE55dbqVhJ9IBtmAuDTpzH70yDeO248AFLZH+kv9MqePhJXU7E2UWUknheWQ== +gulp-plugin-extras@^1.0.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/gulp-plugin-extras/-/gulp-plugin-extras-1.1.0.tgz#47bb1022bed0ea0216ac6c6a61a35c4fe014318e" + integrity sha512-T0AXOEVoKYzLIBlwEZ7LtAx2w4ExIozIoxVeYEVLFbdxI7i0sWvFDq0F8mm47djixDF3vAqDPoyGwh3Sg/PWtQ== dependencies: - gulp-util "*" - through2 "*" + "@types/vinyl" "^2.0.12" + chalk "^5.3.0" + easy-transform-stream "^1.0.1" gulp-sort@^2.0.0: version "2.0.0" @@ -6156,7 +6180,7 @@ gulp-ttf2woff@^1.1.0: readable-stream "^2.0.1" ttf2woff "^2.0.1" -gulp-util@*, gulp-util@^3.0.6, gulp-util@^3.0.7: +gulp-util@^3.0.6, gulp-util@^3.0.7: version "3.0.8" resolved "https://registry.yarnpkg.com/gulp-util/-/gulp-util-3.0.8.tgz#0054e1e744502e27c04c187c3ecc505dd54bbb4f" integrity sha512-q5oWPc12lwSFS9h/4VIjG+1NuNDlJ48ywV2JKItY4Ycc/n1fXJeYPVQsfu5ZrhQi7FGSDBalwUCLar/GyHXKGw== @@ -9856,15 +9880,6 @@ read@^3.0.1: dependencies: mute-stream "^1.0.0" -readable-stream@3, readable-stream@^3.0.0, readable-stream@^3.0.2, readable-stream@^3.0.6, readable-stream@^3.1.1, readable-stream@^3.4.0, readable-stream@^3.6.0: - version "3.6.2" - resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967" - integrity sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA== - dependencies: - inherits "^2.0.3" - string_decoder "^1.1.1" - util-deprecate "^1.0.1" - readable-stream@^1.0.33, readable-stream@~1.1.9: version "1.1.14" resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.14.tgz#7cf4c54ef648e3813084c636dd2079e166c081d9" @@ -9888,6 +9903,15 @@ readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.4, readable string_decoder "~1.1.1" util-deprecate "~1.0.1" +readable-stream@^3.0.0, readable-stream@^3.0.2, readable-stream@^3.0.6, readable-stream@^3.1.1, readable-stream@^3.4.0, readable-stream@^3.6.0: + version "3.6.2" + resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967" + integrity sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA== + dependencies: + inherits "^2.0.3" + string_decoder "^1.1.1" + util-deprecate "^1.0.1" + readable-stream@^4.0.0: version "4.7.0" resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-4.7.0.tgz#cedbd8a1146c13dfff8dab14068028d58c15ac91" @@ -11268,13 +11292,6 @@ text-extensions@^1.0.0: resolved "https://registry.yarnpkg.com/text-extensions/-/text-extensions-1.9.0.tgz#1853e45fee39c945ce6f6c36b2d659b5aabc2a26" integrity sha512-wiBrwC1EhBelW12Zy26JeOUkQ5mRu+5o8rpsJk5+2t+Y5vE7e842qtZDQ2g1NpX/29HdyFeJ4nSIhI47ENSxlQ== -through2@*: - version "4.0.2" - resolved "https://registry.yarnpkg.com/through2/-/through2-4.0.2.tgz#a7ce3ac2a7a8b0b966c80e7c49f0484c3b239764" - integrity sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw== - dependencies: - readable-stream "3" - through2@^2.0.0, through2@^2.0.1: version "2.0.5" resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd" From 1552ae1df864085eec01c204e46754800821e38f Mon Sep 17 00:00:00 2001 From: web-padawan Date: Fri, 6 Jun 2025 15:28:06 +0300 Subject: [PATCH 02/10] chore: update rich-text-editor gulpfile.js to use ESM --- package.json | 1 + .../{gulpfile.cjs => gulpfile.js} | 36 +- packages/rich-text-editor/package.json | 4 +- .../src/vaadin-rich-text-editor-icons.js | 2 +- yarn.lock | 640 ++++++++++-------- 5 files changed, 393 insertions(+), 290 deletions(-) rename packages/rich-text-editor/{gulpfile.cjs => gulpfile.js} (82%) diff --git a/package.json b/package.json index 6a2a2db71cb..a1d969d5402 100644 --- a/package.json +++ b/package.json @@ -76,6 +76,7 @@ "typescript": "^5.8.3" }, "resolutions": { + "ttf2woff2": "^7.0.0", "playwright": "^1.52.0" }, "lint-staged": { diff --git a/packages/rich-text-editor/gulpfile.cjs b/packages/rich-text-editor/gulpfile.js similarity index 82% rename from packages/rich-text-editor/gulpfile.cjs rename to packages/rich-text-editor/gulpfile.js index 80b9c6afd95..7aa39142dbc 100644 --- a/packages/rich-text-editor/gulpfile.cjs +++ b/packages/rich-text-editor/gulpfile.js @@ -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'); diff --git a/packages/rich-text-editor/package.json b/packages/rich-text-editor/package.json index 456898a620c..6b100e836ee 100644 --- a/packages/rich-text-editor/package.json +++ b/packages/rich-text-editor/package.json @@ -20,7 +20,7 @@ "module": "vaadin-rich-text-editor.js", "type": "module", "scripts": { - "icons": "gulp icons --gulpfile gulpfile.cjs" + "icons": "gulp icons" }, "files": [ "src", @@ -56,7 +56,7 @@ "@vaadin/testing-helpers": "^2.0.0", "gulp": "^5.0.0", "gulp-cli": "^3.0.0", - "gulp-iconfont": "^11.0.0", + "gulp-iconfont": "^12.0.0", "sinon": "^18.0.0" }, "cvdlName": "vaadin-rich-text-editor", diff --git a/packages/rich-text-editor/src/vaadin-rich-text-editor-icons.js b/packages/rich-text-editor/src/vaadin-rich-text-editor-icons.js index 4649e216e18..b4ceb059a5f 100644 --- a/packages/rich-text-editor/src/vaadin-rich-text-editor-icons.js +++ b/packages/rich-text-editor/src/vaadin-rich-text-editor-icons.js @@ -16,7 +16,7 @@ template.innerHTML = `