From b52bdf6c0ecc40a265e2b59112c20dd919271020 Mon Sep 17 00:00:00 2001 From: Mark Hughes Date: Mon, 30 Sep 2024 21:22:22 +1000 Subject: [PATCH] feat(convert-to-module): convert svgstore, upgrade jest, migrate tests --- jest.config.base.js | 23 - jest.config.base.mjs | 12 + jest.config.js | 6 - jest.config.mjs | 7 + package.json | 4 +- packages/svgstore/babel.config.cjs | 1 + packages/svgstore/babel.config.js | 1 - packages/svgstore/jest.config.js | 7 - packages/svgstore/jest.config.mjs | 9 + packages/svgstore/lib/svgstore.js | 21 +- .../svgstore/lib/utils/copy-attributes.js | 4 +- packages/svgstore/lib/utils/load-xml.js | 8 +- .../svgstore/lib/utils/remove-attributes.js | 4 +- packages/svgstore/lib/utils/set-attributes.js | 4 +- packages/svgstore/lib/utils/svg-to-symbol.js | 4 +- packages/svgstore/package.json | 7 +- .../{svgstore.test.js => svgstore.test.mjs} | 95 +- packages/svgstore/yarn.lock | 3457 +++++++---------- yarn.lock | 1734 +++------ 19 files changed, 2173 insertions(+), 3235 deletions(-) delete mode 100644 jest.config.base.js create mode 100644 jest.config.base.mjs delete mode 100644 jest.config.js create mode 100644 jest.config.mjs create mode 100644 packages/svgstore/babel.config.cjs delete mode 100644 packages/svgstore/babel.config.js delete mode 100644 packages/svgstore/jest.config.js create mode 100644 packages/svgstore/jest.config.mjs rename packages/svgstore/tests/{svgstore.test.js => svgstore.test.mjs} (77%) diff --git a/jest.config.base.js b/jest.config.base.js deleted file mode 100644 index 7efb4e89..00000000 --- a/jest.config.base.js +++ /dev/null @@ -1,23 +0,0 @@ -module.exports = { - roots: [ - "/lib", - "/tests" - ], - transform: { - "^.+\\.(js|jsx)$": "babel-jest", - }, - testRegex: "(/tests/.*.(test|spec)).(jsx?|tsx?)$", - moduleFileExtensions: [ - "ts", - "tsx", - "js", - "jsx", - "json", - "node" - ], - collectCoverage: true, - coveragePathIgnorePatterns: [ - "(tests/.*.mock).(jsx?|tsx?)$" - ], - verbose: true -}; diff --git a/jest.config.base.mjs b/jest.config.base.mjs new file mode 100644 index 00000000..c312cbe8 --- /dev/null +++ b/jest.config.base.mjs @@ -0,0 +1,12 @@ +/** @type {import('jest').Config} */ +const config = { + roots: ["/lib", "/tests"], + transform: { + "^.+\\.(js|jsx|mjs)$": "babel-jest", + }, + testRegex: "(/tests/.*.(test|spec)).(mjs|jsx?|tsx?)$", + moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node", "mjs"], + coveragePathIgnorePatterns: ["(tests/.*.mock).(jsx?|tsx?)$"], +}; + +export default config; diff --git a/jest.config.js b/jest.config.js deleted file mode 100644 index 35061552..00000000 --- a/jest.config.js +++ /dev/null @@ -1,6 +0,0 @@ -module.exports = { - projects: [ - "/packages/*/jest.config.js" - ], - coverageDirectory: "/coverage/" -}; diff --git a/jest.config.mjs b/jest.config.mjs new file mode 100644 index 00000000..12f76756 --- /dev/null +++ b/jest.config.mjs @@ -0,0 +1,7 @@ +/** @type {import('jest').Config} */ +const config = { + projects: ["/packages/*/jest.config.mjs"], + coverageDirectory: "/coverage/", +}; + +export default config; diff --git a/package.json b/package.json index 351a3c2f..1e9205d9 100644 --- a/package.json +++ b/package.json @@ -60,14 +60,14 @@ "@babel/plugin-syntax-import-assertions": "^7.25.6", "@eslint/eslintrc": "^3.1.0", "@eslint/js": "^9.11.1", - "babel-jest": "^27.1.1", + "babel-jest": "^29.7.0", "clean-css": "5.1.5", "eslint": "9.11.1", "eslint-config-standard": "^17.1.0", "globals": "^15.9.0", "html-minifier": "4.0.0", "husky": "^7.0.2", - "jest": "^27.1.1", + "jest": "^29.7.0", "lerna": "^6.6.2", "lint-staged": "^11.1.2", "nx": "^16.2.2", diff --git a/packages/svgstore/babel.config.cjs b/packages/svgstore/babel.config.cjs new file mode 100644 index 00000000..721e8b82 --- /dev/null +++ b/packages/svgstore/babel.config.cjs @@ -0,0 +1 @@ +module.exports = { presets: ["@babel/preset-env"] }; diff --git a/packages/svgstore/babel.config.js b/packages/svgstore/babel.config.js deleted file mode 100644 index 03fa34aa..00000000 --- a/packages/svgstore/babel.config.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = {presets: ["@babel/preset-env"]}; diff --git a/packages/svgstore/jest.config.js b/packages/svgstore/jest.config.js deleted file mode 100644 index fa77b716..00000000 --- a/packages/svgstore/jest.config.js +++ /dev/null @@ -1,7 +0,0 @@ -const base = require("../../jest.config.base.js"); - -module.exports = { - ...base, - name: "@droppyjs/svgstore", - displayName: "@droppyjs/svgstore", -}; diff --git a/packages/svgstore/jest.config.mjs b/packages/svgstore/jest.config.mjs new file mode 100644 index 00000000..b4dec041 --- /dev/null +++ b/packages/svgstore/jest.config.mjs @@ -0,0 +1,9 @@ +import base from "../../jest.config.base.mjs"; + +/** @type {import('jest').Config} */ +const config = { + ...base, + displayName: "@droppyjs/svgstore", +}; + +export default config; diff --git a/packages/svgstore/lib/svgstore.js b/packages/svgstore/lib/svgstore.js index 02c21126..fa57850d 100644 --- a/packages/svgstore/lib/svgstore.js +++ b/packages/svgstore/lib/svgstore.js @@ -1,16 +1,17 @@ "use strict"; -const copyAttributes = require("./utils/copy-attributes"); -const loadXml = require("./utils/load-xml"); -const removeAttributes = require("./utils/remove-attributes"); -const setAttributes = require("./utils/set-attributes"); -const svgToSymbol = require("./utils/svg-to-symbol"); +import copyAttributes from "./utils/copy-attributes.js"; +import loadXml from "./utils/load-xml.js"; +import removeAttributes from "./utils/remove-attributes.js"; +import setAttributes from "./utils/set-attributes.js"; +import svgToSymbol from "./utils/svg-to-symbol.js"; const SELECTOR_SVG = "svg"; const SELECTOR_DEFS = "defs"; const TEMPLATE_SVG = ""; -const TEMPLATE_DOCTYPE = '' + +const TEMPLATE_DOCTYPE = + '' + ''; @@ -21,10 +22,10 @@ const DEFAULT_OPTIONS = { svgAttrs: false, symbolAttrs: false, copyAttrs: false, - renameDefs: false + renameDefs: false, }; -function svgstore(options) { +export default function svgstore(options) { const svgstoreOptions = Object.assign({}, DEFAULT_OPTIONS, options); // @@ -119,8 +120,6 @@ function svgstore(options) { }); return TEMPLATE_DOCTYPE + clone.xml(); - } + }, }; } - -module.exports = svgstore; diff --git a/packages/svgstore/lib/utils/copy-attributes.js b/packages/svgstore/lib/utils/copy-attributes.js index 3b3437d4..ef37a308 100644 --- a/packages/svgstore/lib/utils/copy-attributes.js +++ b/packages/svgstore/lib/utils/copy-attributes.js @@ -6,7 +6,7 @@ const ALWAYS_COPY_ATTRS = ["viewBox", "aria-labelledby", "role"]; -function copyAttributes(a, b, attrs) { +export default function copyAttributes(a, b, attrs) { const attrsToCopy = ALWAYS_COPY_ATTRS.concat(attrs || []); const copiedAttrs = Object.create(null); @@ -26,5 +26,3 @@ function copyAttributes(a, b, attrs) { return a; } - -module.exports = copyAttributes; diff --git a/packages/svgstore/lib/utils/load-xml.js b/packages/svgstore/lib/utils/load-xml.js index 46e82aec..79dca0b4 100644 --- a/packages/svgstore/lib/utils/load-xml.js +++ b/packages/svgstore/lib/utils/load-xml.js @@ -5,12 +5,10 @@ "use strict"; -const cheerio = require("cheerio"); +import { load } from "cheerio"; -function loadXml(text) { - return cheerio.load(text, { +export default function loadXml(text) { + return load(text, { xmlMode: true, }); } - -module.exports = loadXml; diff --git a/packages/svgstore/lib/utils/remove-attributes.js b/packages/svgstore/lib/utils/remove-attributes.js index 28c5196c..ce809eb1 100644 --- a/packages/svgstore/lib/utils/remove-attributes.js +++ b/packages/svgstore/lib/utils/remove-attributes.js @@ -5,7 +5,7 @@ "use strict"; -function removeAttributes(el, attrs) { +export default function removeAttributes(el, attrs) { let localAttrs = attrs; if (localAttrs === true) { @@ -26,5 +26,3 @@ function removeAttributes(el, attrs) { return el; } - -module.exports = removeAttributes; diff --git a/packages/svgstore/lib/utils/set-attributes.js b/packages/svgstore/lib/utils/set-attributes.js index 34d244d2..dbe78959 100644 --- a/packages/svgstore/lib/utils/set-attributes.js +++ b/packages/svgstore/lib/utils/set-attributes.js @@ -5,7 +5,7 @@ "use strict"; -function setAttributes(el, attrs) { +export default function setAttributes(el, attrs) { if (!attrs || typeof attrs !== "object") { return el; } @@ -24,5 +24,3 @@ function setAttributes(el, attrs) { return el; } - -module.exports = setAttributes; diff --git a/packages/svgstore/lib/utils/svg-to-symbol.js b/packages/svgstore/lib/utils/svg-to-symbol.js index 419640d7..962ecd5c 100644 --- a/packages/svgstore/lib/utils/svg-to-symbol.js +++ b/packages/svgstore/lib/utils/svg-to-symbol.js @@ -16,7 +16,7 @@ const ATTRIBUTE_ID = "id"; * @return {object} symbol The final cheerio-aware object created by cloning the SVG contents * @see The Cheerio Project */ -function svgToSymbol(id, child, _options) { +export default function svgToSymbol(id, child, _options) { if (_options === void 0) { _options = {}; } @@ -31,5 +31,3 @@ function svgToSymbol(id, child, _options) { return symbol; } - -module.exports = svgToSymbol; diff --git a/packages/svgstore/package.json b/packages/svgstore/package.json index e107c6d4..1d2d8870 100644 --- a/packages/svgstore/package.json +++ b/packages/svgstore/package.json @@ -6,6 +6,7 @@ "homepage": "https://github.com/droppyjs/droppy#readme", "license": "MIT", "main": "lib/svgstore.js", + "type": "module", "scripts": { "test": "jest --coverage", "watch": "chokidar '{lib,test}/**/*.js' -d 1000 -c 'yarn test'" @@ -32,10 +33,10 @@ "cheerio": "1.0.0-rc.12" }, "devDependencies": { - "@babel/preset-env": "^7.21.5", - "babel-jest": "^27.1.1", + "@babel/preset-env": "^7.25.4", + "babel-jest": "^29.7.0", "chokidar-cli": "^3.0.0", - "jest": "^27.1.1" + "jest": "^29.7.0" }, "repository": { "type": "git", diff --git a/packages/svgstore/tests/svgstore.test.js b/packages/svgstore/tests/svgstore.test.mjs similarity index 77% rename from packages/svgstore/tests/svgstore.test.js rename to packages/svgstore/tests/svgstore.test.mjs index ad314a8c..856bc5f3 100644 --- a/packages/svgstore/tests/svgstore.test.js +++ b/packages/svgstore/tests/svgstore.test.mjs @@ -1,10 +1,12 @@ -const svgstore = require("../lib/svgstore"); +import svgstore from "../lib/svgstore"; -const doctype = '' + +const doctype = + '' + ''; -const svgNs = ''; const FIXTURE_SVGS = { @@ -13,10 +15,13 @@ const FIXTURE_SVGS = { baz: '', qux: '', quux: 'A boxy shape', - corge: '' + + corge: + '' + 'A boxy shape', - defsWithId: '', - roleNoValue: 'Another boxy shape', + defsWithId: + '', + roleNoValue: + 'Another boxy shape', }; test("should create an svg document", () => { @@ -28,7 +33,7 @@ test("should create an svg document", () => { test("should create an svg element", () => { const store = svgstore(); - const svg = store.toString({inline: true}); + const svg = store.toString({ inline: true }); expect(svg.slice(0, 4)).toBe(" { .add("foo", doctype + FIXTURE_SVGS.foo) .add("bar", doctype + FIXTURE_SVGS.bar); - const expected = `${doctype + - svgNs - }` + + const expected = + `${doctype + svgNs}` + `` + `` + `` + @@ -53,19 +57,18 @@ test("should combine svgs", () => { }); test("should clean defs", () => { - const store = svgstore({cleanDefs: true}) + const store = svgstore({ cleanDefs: true }) .add("foo", doctype + FIXTURE_SVGS.foo) .add("bar", doctype + FIXTURE_SVGS.bar) .add("baz", doctype + FIXTURE_SVGS.baz, { - cleanDefs: [] + cleanDefs: [], }) .add("qux", doctype + FIXTURE_SVGS.qux, { - cleanDefs: ["fill"] + cleanDefs: ["fill"], }); - const expected = `${doctype + - svgNs - }` + + const expected = + `${doctype + svgNs}` + `` + `` + `` + @@ -81,19 +84,18 @@ test("should clean defs", () => { }); test("should clean symbols", () => { - const store = svgstore({cleanSymbols: true}) + const store = svgstore({ cleanSymbols: true }) .add("foo", doctype + FIXTURE_SVGS.foo) .add("bar", doctype + FIXTURE_SVGS.bar) .add("baz", doctype + FIXTURE_SVGS.baz, { - cleanSymbols: [] + cleanSymbols: [], }) .add("qux", doctype + FIXTURE_SVGS.qux, { - cleanSymbols: ["fill"] + cleanSymbols: ["fill"], }); - const expected = `${doctype + - svgNs - }` + + const expected = + `${doctype + svgNs}` + `` + `` + `` + @@ -110,12 +112,10 @@ test("should clean symbols", () => { }); test("should attempt to preserve the `viewBox`, `aria-labelledby`, and `role` attributes of the root SVG by default", () => { - const store = svgstore() - .add("quux", FIXTURE_SVGS.quux); + const store = svgstore().add("quux", FIXTURE_SVGS.quux); - const expected = `${doctype + - svgNs - }` + + const expected = + `${doctype + svgNs}` + `` + `A boxy shape` + `` + @@ -126,12 +126,10 @@ test("should attempt to preserve the `viewBox`, `aria-labelledby`, and `role` at test("should support custom attribute preservation, on top of the defaults", () => { const copyAttrs = ["preserveAspectRatio", "take-me-too", "role"]; - const store = svgstore({copyAttrs}) - .add("corge", FIXTURE_SVGS.corge); + const store = svgstore({ copyAttrs }).add("corge", FIXTURE_SVGS.corge); - const expected = `${doctype + - svgNs - }` + + const expected = + `${doctype + svgNs}` + `` + `A boxy shape` + `` + @@ -147,15 +145,16 @@ test("should set symbol attributes", () => { viewBox: null, id(id) { return `icon-${id}`; - } - } + }, + }, }; const store = svgstore(options) .add("foo", doctype + FIXTURE_SVGS.foo) .add("bar", doctype + FIXTURE_SVGS.bar); - const expected = "" + + const expected = + "" + "" + '' + '' + @@ -172,15 +171,16 @@ test("should set svg attributes", () => { inline: true, svgAttrs: { id: "spritesheet", - style: "display: none" - } + style: "display: none", + }, }; const store = svgstore(options) .add("foo", doctype + FIXTURE_SVGS.foo) .add("bar", doctype + FIXTURE_SVGS.bar); - const expected = '