From 013656cd290d1fb19ca7e77ca41794c192bf1985 Mon Sep 17 00:00:00 2001 From: Alexey Plutalov Date: Mon, 25 Dec 2023 16:25:15 +0300 Subject: [PATCH 1/6] feat!: enables `memo` by default for SVGR transformations (#54) * build: update dependencies * feat!: enable `memo` by default for SVGR transformations * chore: add changesets --- .changeset/red-days-scream.md | 5 + .changeset/wet-students-sing.md | 4 + package.json | 2 +- pnpm-lock.yaml | 10 +- src/plugins/svgPlugin/svgPlugin.ts | 6 +- tests/__snapshots__/browser.test.ts.snap | 166 +++++++++++++++--- tests/browser.test.ts | 14 ++ .../fixtures/browser-svgr-config-memo/.svgrrc | 3 + .../browser-svgr-config-memo/package.json | 17 ++ .../src/Button.module.css | 7 + .../browser-svgr-config-memo/src/Button.tsx | 21 +++ .../src/assets/css.svg | 9 + .../src/assets/js.svg | 9 + .../src/assets/shared.svg | 9 + .../browser-svgr-config-memo/src/index.ts | 1 + .../tsconfig.forge.json | 5 + tests/fixtures/browser-svgr-config/.svgrrc | 1 - 17 files changed, 252 insertions(+), 37 deletions(-) create mode 100644 .changeset/red-days-scream.md create mode 100644 .changeset/wet-students-sing.md create mode 100644 tests/fixtures/browser-svgr-config-memo/.svgrrc create mode 100644 tests/fixtures/browser-svgr-config-memo/package.json create mode 100644 tests/fixtures/browser-svgr-config-memo/src/Button.module.css create mode 100644 tests/fixtures/browser-svgr-config-memo/src/Button.tsx create mode 100644 tests/fixtures/browser-svgr-config-memo/src/assets/css.svg create mode 100644 tests/fixtures/browser-svgr-config-memo/src/assets/js.svg create mode 100644 tests/fixtures/browser-svgr-config-memo/src/assets/shared.svg create mode 100644 tests/fixtures/browser-svgr-config-memo/src/index.ts create mode 100644 tests/fixtures/browser-svgr-config-memo/tsconfig.forge.json diff --git a/.changeset/red-days-scream.md b/.changeset/red-days-scream.md new file mode 100644 index 0000000..18af596 --- /dev/null +++ b/.changeset/red-days-scream.md @@ -0,0 +1,5 @@ +--- +'@tabula/forge': major +--- + +enable `memo` by default for SVGR transformations diff --git a/.changeset/wet-students-sing.md b/.changeset/wet-students-sing.md new file mode 100644 index 0000000..c38eb9d --- /dev/null +++ b/.changeset/wet-students-sing.md @@ -0,0 +1,4 @@ +--- +--- + +update development dependencies diff --git a/package.json b/package.json index 67fbf05..119fbdd 100644 --- a/package.json +++ b/package.json @@ -52,7 +52,7 @@ "@commitlint/config-conventional": "^18.4.3", "@tabula/eslint-config": "^0.1.1", "@tabula/prettier-config": "^0.1.4", - "@tabula/typescript-config": "^0.2.0", + "@tabula/typescript-config": "^0.2.1", "@tabula/vitest-config": "^0.2.0", "@types/convert-source-map": "^2.0.3", "@types/node": "^20.10.5", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9e31a92..54ad601 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -98,8 +98,8 @@ devDependencies: specifier: ^0.1.4 version: 0.1.4(prettier@3.1.1) '@tabula/typescript-config': - specifier: ^0.2.0 - version: 0.2.0(typescript@5.3.3) + specifier: ^0.2.1 + version: 0.2.1(typescript@5.3.3) '@tabula/vitest-config': specifier: ^0.2.0 version: 0.2.0(react-dom@18.2.0)(react@18.2.0)(vitest@1.1.0) @@ -1739,10 +1739,10 @@ packages: - supports-color dev: true - /@tabula/typescript-config@0.2.0(typescript@5.3.3): - resolution: {integrity: sha512-cZXCvI0Mwch71TAyJDvQsaWB2Vp/Z6vKaPsy8Gj0hvYEUhqh9BgRWnZ7X0Cq1u+DavHmON9Ins3iub9a6BABuA==} + /@tabula/typescript-config@0.2.1(typescript@5.3.3): + resolution: {integrity: sha512-PQL9B+BtGPb6kf/zrqvH6NBt/k+I/oM723u57qqL0SjtCyQCMI5ximwvW15j06hlJKFNxYVN4ytqKt97lhqSEg==} peerDependencies: - typescript: ^5.3.2 + typescript: ^5.3.3 dependencies: typescript: 5.3.3 optionalDependencies: diff --git a/src/plugins/svgPlugin/svgPlugin.ts b/src/plugins/svgPlugin/svgPlugin.ts index 5b4d7b8..61db5a4 100644 --- a/src/plugins/svgPlugin/svgPlugin.ts +++ b/src/plugins/svgPlugin/svgPlugin.ts @@ -23,10 +23,10 @@ export function svgPlugin(): Plugin { const minify = Boolean(initialOptions.minify); // NOTE: The `svgr` uses runtime config over CLI config. We avoid this behaviour. - const userConfig = await cosmiconfig('svgr').search(); + const userConfig: { config: Config } | null = await cosmiconfig('svgr').search(); const config: Config = { - ...(userConfig?.config as Config | null), + ...userConfig?.config, exportType: 'named', namedExport: 'ReactComponent', @@ -35,6 +35,8 @@ export function svgPlugin(): Plugin { svgo: minify, }; + config.memo = userConfig?.config.memo ?? true; + onResolve( { filter: /^ni:svgr;/, diff --git a/tests/__snapshots__/browser.test.ts.snap b/tests/__snapshots__/browser.test.ts.snap index bc6d769..9fcdd10 100644 --- a/tests/__snapshots__/browser.test.ts.snap +++ b/tests/__snapshots__/browser.test.ts.snap @@ -270,28 +270,32 @@ var js_default = "./assets/js.svg"; // src/assets/js.svg?svgr import * as React from "react"; +import { memo } from "react"; import { jsx, jsxs } from "react/jsx-runtime"; var js_default2 = js_default; var SvgJs = (props) => /* @__PURE__ */ jsxs("svg", { id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", width: "120px", height: "120px", viewBox: "0 0 120 120", enableBackground: "new 0 0 120 120", xmlSpace: "preserve", ...props, children: [ /* @__PURE__ */ jsx("circle", { cx: 60, cy: 60.583, r: 14.409 }), /* @__PURE__ */ jsx("text", { children: "\\n JS\\n " }) ] }); +var Memo = memo(SvgJs); // src/assets/shared.svg?svgr import * as React2 from "react"; +import { memo as memo2 } from "react"; import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime"; var SvgShared = (props) => /* @__PURE__ */ jsxs2("svg", { id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", width: "120px", height: "120px", viewBox: "0 0 120 120", enableBackground: "new 0 0 120 120", xmlSpace: "preserve", ...props, children: [ /* @__PURE__ */ jsx2("circle", { cx: 60, cy: 60.583, r: 14.409 }), /* @__PURE__ */ jsx2("text", { children: "\\n Shared\\n " }) ] }); +var Memo2 = memo2(SvgShared); // src/Button.tsx import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime"; var Button = ({ children, onClick }) => /* @__PURE__ */ jsxs3("button", { className: Button_default.root, onClick, type: "button", children: [ /* @__PURE__ */ jsx3("img", { src: js_default2 }), - /* @__PURE__ */ jsx3(SvgJs, {}), + /* @__PURE__ */ jsx3(Memo, {}), /* @__PURE__ */ jsxs3("span", { className: Button_default.label, children: [ - /* @__PURE__ */ jsx3(SvgShared, {}), + /* @__PURE__ */ jsx3(Memo2, {}), children ] }) ] }); @@ -490,6 +494,96 @@ export { " `; +exports[`browser > SVG support > .svgrrc > use \`memo\` option from config if provided 1`] = ` +"import "./index.css"; + +// src/Button.module.css +var Button_default = { + "root": "browser_svgr_config_memo__src-Button-module__root", + "label": "browser_svgr_config_memo__src-Button-module__label" +}; + +// src/assets/js.svg +var js_default = "./assets/js.svg"; + +// src/assets/js.svg?svgr +import * as React from "react"; +import { jsxDEV } from "react/jsx-dev-runtime"; +var js_default2 = js_default; +var SvgJs = (props) => /* @__PURE__ */ jsxDEV("svg", { id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", width: "120px", height: "120px", viewBox: "0 0 120 120", enableBackground: "new 0 0 120 120", xmlSpace: "preserve", ...props, children: [ + /* @__PURE__ */ jsxDEV("circle", { cx: 60, cy: 60.583, r: 14.409 }, void 0, false, { + fileName: "src/assets/js.svg?svgr", + lineNumber: 4, + columnNumber: 252 + }), + /* @__PURE__ */ jsxDEV("text", { children: "\\n JS\\n " }, void 0, false, { + fileName: "src/assets/js.svg?svgr", + lineNumber: 4, + columnNumber: 293 + }) +] }, void 0, true, { + fileName: "src/assets/js.svg?svgr", + lineNumber: 4, + columnNumber: 24 +}); + +// src/assets/shared.svg?svgr +import * as React2 from "react"; +import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime"; +var SvgShared = (props) => /* @__PURE__ */ jsxDEV2("svg", { id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", width: "120px", height: "120px", viewBox: "0 0 120 120", enableBackground: "new 0 0 120 120", xmlSpace: "preserve", ...props, children: [ + /* @__PURE__ */ jsxDEV2("circle", { cx: 60, cy: 60.583, r: 14.409 }, void 0, false, { + fileName: "src/assets/shared.svg?svgr", + lineNumber: 4, + columnNumber: 256 + }), + /* @__PURE__ */ jsxDEV2("text", { children: "\\n Shared\\n " }, void 0, false, { + fileName: "src/assets/shared.svg?svgr", + lineNumber: 4, + columnNumber: 297 + }) +] }, void 0, true, { + fileName: "src/assets/shared.svg?svgr", + lineNumber: 4, + columnNumber: 28 +}); + +// src/Button.tsx +import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime"; +var Button = ({ children, onClick }) => /* @__PURE__ */ jsxDEV3("button", { className: Button_default.root, onClick, type: "button", children: [ + /* @__PURE__ */ jsxDEV3("img", { src: js_default2 }, void 0, false, { + fileName: "src/Button.tsx", + lineNumber: 14, + columnNumber: 5 + }), + /* @__PURE__ */ jsxDEV3(SvgJs, {}, void 0, false, { + fileName: "src/Button.tsx", + lineNumber: 15, + columnNumber: 5 + }), + /* @__PURE__ */ jsxDEV3("span", { className: Button_default.label, children: [ + /* @__PURE__ */ jsxDEV3(SvgShared, {}, void 0, false, { + fileName: "src/Button.tsx", + lineNumber: 17, + columnNumber: 7 + }), + children + ] }, void 0, true, { + fileName: "src/Button.tsx", + lineNumber: 16, + columnNumber: 5 + }) +] }, void 0, true, { + fileName: "src/Button.tsx", + lineNumber: 13, + columnNumber: 3 +}); +export { + Button +}; +//# sourceMappingURL=index.js.map +" +`; + exports[`browser > SVG support > minify SVG when production mode is on 1`] = ` " @@ -543,28 +637,32 @@ var js_default = "./assets/js.svg"; // src/assets/js.svg?svgr import * as React from "react"; +import { memo } from "react"; import { jsx, jsxs } from "react/jsx-runtime"; var js_default2 = js_default; var SvgJs = (props) => /* @__PURE__ */ jsxs("svg", { id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", width: "120px", height: "120px", viewBox: "0 0 120 120", enableBackground: "new 0 0 120 120", xmlSpace: "preserve", ...props, children: [ /* @__PURE__ */ jsx("circle", { cx: 60, cy: 60.583, r: 14.409 }), /* @__PURE__ */ jsx("text", { children: "\\n JS\\n " }) ] }); +var Memo = memo(SvgJs); // src/assets/shared.svg?svgr import * as React2 from "react"; +import { memo as memo2 } from "react"; import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime"; var SvgShared = (props) => /* @__PURE__ */ jsxs2("svg", { id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", width: "120px", height: "120px", viewBox: "0 0 120 120", enableBackground: "new 0 0 120 120", xmlSpace: "preserve", ...props, children: [ /* @__PURE__ */ jsx2("circle", { cx: 60, cy: 60.583, r: 14.409 }), /* @__PURE__ */ jsx2("text", { children: "\\n Shared\\n " }) ] }); +var Memo2 = memo2(SvgShared); // src/Button.tsx import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime"; var Button = ({ children, onClick }) => /* @__PURE__ */ jsxs3("button", { className: Button_default.root, onClick, type: "button", children: [ /* @__PURE__ */ jsx3("img", { src: js_default2 }), - /* @__PURE__ */ jsx3(SvgJs, {}), + /* @__PURE__ */ jsx3(Memo, {}), /* @__PURE__ */ jsxs3("span", { className: Button_default.label, children: [ - /* @__PURE__ */ jsx3(SvgShared, {}), + /* @__PURE__ */ jsx3(Memo2, {}), children ] }) ] }); @@ -639,44 +737,48 @@ var js_default = "./assets/js.svg"; // src/assets/js.svg?svgr import * as React from "react"; +import { memo } from "react"; import { jsxDEV } from "react/jsx-dev-runtime"; var js_default2 = js_default; var SvgJs = (props) => /* @__PURE__ */ jsxDEV("svg", { id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", width: "120px", height: "120px", viewBox: "0 0 120 120", enableBackground: "new 0 0 120 120", xmlSpace: "preserve", ...props, children: [ /* @__PURE__ */ jsxDEV("circle", { cx: 60, cy: 60.583, r: 14.409 }, void 0, false, { fileName: "src/assets/js.svg?svgr", - lineNumber: 4, + lineNumber: 5, columnNumber: 252 }), /* @__PURE__ */ jsxDEV("text", { children: "\\n JS\\n " }, void 0, false, { fileName: "src/assets/js.svg?svgr", - lineNumber: 4, + lineNumber: 5, columnNumber: 293 }) ] }, void 0, true, { fileName: "src/assets/js.svg?svgr", - lineNumber: 4, + lineNumber: 5, columnNumber: 24 }); +var Memo = memo(SvgJs); // src/assets/shared.svg?svgr import * as React2 from "react"; +import { memo as memo2 } from "react"; import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime"; var SvgShared = (props) => /* @__PURE__ */ jsxDEV2("svg", { id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", width: "120px", height: "120px", viewBox: "0 0 120 120", enableBackground: "new 0 0 120 120", xmlSpace: "preserve", ...props, children: [ /* @__PURE__ */ jsxDEV2("circle", { cx: 60, cy: 60.583, r: 14.409 }, void 0, false, { fileName: "src/assets/shared.svg?svgr", - lineNumber: 4, + lineNumber: 5, columnNumber: 256 }), /* @__PURE__ */ jsxDEV2("text", { children: "\\n Shared\\n " }, void 0, false, { fileName: "src/assets/shared.svg?svgr", - lineNumber: 4, + lineNumber: 5, columnNumber: 297 }) ] }, void 0, true, { fileName: "src/assets/shared.svg?svgr", - lineNumber: 4, + lineNumber: 5, columnNumber: 28 }); +var Memo2 = memo2(SvgShared); // src/Button.tsx import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime"; @@ -686,13 +788,13 @@ var Button = ({ children, onClick }) => /* @__PURE__ */ jsxDEV3("button", { clas lineNumber: 14, columnNumber: 5 }), - /* @__PURE__ */ jsxDEV3(SvgJs, {}, void 0, false, { + /* @__PURE__ */ jsxDEV3(Memo, {}, void 0, false, { fileName: "src/Button.tsx", lineNumber: 15, columnNumber: 5 }), /* @__PURE__ */ jsxDEV3("span", { className: Button_default.label, children: [ - /* @__PURE__ */ jsxDEV3(SvgShared, {}, void 0, false, { + /* @__PURE__ */ jsxDEV3(Memo2, {}, void 0, false, { fileName: "src/Button.tsx", lineNumber: 17, columnNumber: 7 @@ -742,44 +844,48 @@ var js_default = "./assets/js.svg"; // src/assets/js.svg?svgr import * as React from "react"; +import { memo } from "react"; import { jsxDEV } from "react/jsx-dev-runtime"; var js_default2 = js_default; var SvgJs = (props) => /* @__PURE__ */ jsxDEV("svg", { id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", width: "120px", height: "120px", viewBox: "0 0 120 120", enableBackground: "new 0 0 120 120", xmlSpace: "preserve", ...props, children: [ /* @__PURE__ */ jsxDEV("circle", { cx: 60, cy: 60.583, r: 14.409 }, void 0, false, { fileName: "src/assets/js.svg?svgr", - lineNumber: 4, + lineNumber: 5, columnNumber: 252 }), /* @__PURE__ */ jsxDEV("text", { children: "\\n JS\\n " }, void 0, false, { fileName: "src/assets/js.svg?svgr", - lineNumber: 4, + lineNumber: 5, columnNumber: 293 }) ] }, void 0, true, { fileName: "src/assets/js.svg?svgr", - lineNumber: 4, + lineNumber: 5, columnNumber: 24 }); +var Memo = memo(SvgJs); // src/assets/shared.svg?svgr import * as React2 from "react"; +import { memo as memo2 } from "react"; import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime"; var SvgShared = (props) => /* @__PURE__ */ jsxDEV2("svg", { id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", width: "120px", height: "120px", viewBox: "0 0 120 120", enableBackground: "new 0 0 120 120", xmlSpace: "preserve", ...props, children: [ /* @__PURE__ */ jsxDEV2("circle", { cx: 60, cy: 60.583, r: 14.409 }, void 0, false, { fileName: "src/assets/shared.svg?svgr", - lineNumber: 4, + lineNumber: 5, columnNumber: 256 }), /* @__PURE__ */ jsxDEV2("text", { children: "\\n Shared\\n " }, void 0, false, { fileName: "src/assets/shared.svg?svgr", - lineNumber: 4, + lineNumber: 5, columnNumber: 297 }) ] }, void 0, true, { fileName: "src/assets/shared.svg?svgr", - lineNumber: 4, + lineNumber: 5, columnNumber: 28 }); +var Memo2 = memo2(SvgShared); // src/Button.tsx import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime"; @@ -789,13 +895,13 @@ var Button = ({ children, onClick }) => /* @__PURE__ */ jsxDEV3("button", { clas lineNumber: 14, columnNumber: 5 }), - /* @__PURE__ */ jsxDEV3(SvgJs, {}, void 0, false, { + /* @__PURE__ */ jsxDEV3(Memo, {}, void 0, false, { fileName: "src/Button.tsx", lineNumber: 15, columnNumber: 5 }), /* @__PURE__ */ jsxDEV3("span", { className: Button_default.label, children: [ - /* @__PURE__ */ jsxDEV3(SvgShared, {}, void 0, false, { + /* @__PURE__ */ jsxDEV3(Memo2, {}, void 0, false, { fileName: "src/Button.tsx", lineNumber: 17, columnNumber: 7 @@ -845,44 +951,48 @@ var js_default = "./assets/js.svg"; // src/assets/js.svg?svgr import * as React from "react"; +import { memo } from "react"; import { jsxDEV } from "react/jsx-dev-runtime"; var js_default2 = js_default; var SvgJs = (props) => /* @__PURE__ */ jsxDEV("svg", { id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", width: "120px", height: "120px", viewBox: "0 0 120 120", enableBackground: "new 0 0 120 120", xmlSpace: "preserve", ...props, children: [ /* @__PURE__ */ jsxDEV("circle", { cx: 60, cy: 60.583, r: 14.409 }, void 0, false, { fileName: "src/assets/js.svg?svgr", - lineNumber: 4, + lineNumber: 5, columnNumber: 252 }), /* @__PURE__ */ jsxDEV("text", { children: "\\n JS\\n " }, void 0, false, { fileName: "src/assets/js.svg?svgr", - lineNumber: 4, + lineNumber: 5, columnNumber: 293 }) ] }, void 0, true, { fileName: "src/assets/js.svg?svgr", - lineNumber: 4, + lineNumber: 5, columnNumber: 24 }); +var Memo = memo(SvgJs); // src/assets/shared.svg?svgr import * as React2 from "react"; +import { memo as memo2 } from "react"; import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime"; var SvgShared = (props) => /* @__PURE__ */ jsxDEV2("svg", { id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", width: "120px", height: "120px", viewBox: "0 0 120 120", enableBackground: "new 0 0 120 120", xmlSpace: "preserve", ...props, children: [ /* @__PURE__ */ jsxDEV2("circle", { cx: 60, cy: 60.583, r: 14.409 }, void 0, false, { fileName: "src/assets/shared.svg?svgr", - lineNumber: 4, + lineNumber: 5, columnNumber: 256 }), /* @__PURE__ */ jsxDEV2("text", { children: "\\n Shared\\n " }, void 0, false, { fileName: "src/assets/shared.svg?svgr", - lineNumber: 4, + lineNumber: 5, columnNumber: 297 }) ] }, void 0, true, { fileName: "src/assets/shared.svg?svgr", - lineNumber: 4, + lineNumber: 5, columnNumber: 28 }); +var Memo2 = memo2(SvgShared); // src/Button.tsx import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime"; @@ -892,13 +1002,13 @@ var Button = ({ children, onClick }) => /* @__PURE__ */ jsxDEV3("button", { clas lineNumber: 14, columnNumber: 5 }), - /* @__PURE__ */ jsxDEV3(SvgJs, {}, void 0, false, { + /* @__PURE__ */ jsxDEV3(Memo, {}, void 0, false, { fileName: "src/Button.tsx", lineNumber: 15, columnNumber: 5 }), /* @__PURE__ */ jsxDEV3("span", { className: Button_default.label, children: [ - /* @__PURE__ */ jsxDEV3(SvgShared, {}, void 0, false, { + /* @__PURE__ */ jsxDEV3(Memo2, {}, void 0, false, { fileName: "src/Button.tsx", lineNumber: 17, columnNumber: 7 diff --git a/tests/browser.test.ts b/tests/browser.test.ts index 9aab389..84b4c52 100644 --- a/tests/browser.test.ts +++ b/tests/browser.test.ts @@ -760,6 +760,20 @@ describe('browser', () => { expect(await c.read('lib/index.js')).toMatchSnapshot(); }, ); + + it( + 'use `memo` option from config if provided', + { + command: 'build', + dependencies: ['@types/react'], + name: 'browser-svgr-config-memo', + target: 'browser', + production: false, + }, + async (c) => { + expect(await c.read('lib/index.js')).toMatchSnapshot(); + }, + ); }); }); diff --git a/tests/fixtures/browser-svgr-config-memo/.svgrrc b/tests/fixtures/browser-svgr-config-memo/.svgrrc new file mode 100644 index 0000000..53eaaba --- /dev/null +++ b/tests/fixtures/browser-svgr-config-memo/.svgrrc @@ -0,0 +1,3 @@ +{ + "memo": false +} diff --git a/tests/fixtures/browser-svgr-config-memo/package.json b/tests/fixtures/browser-svgr-config-memo/package.json new file mode 100644 index 0000000..0aee7c6 --- /dev/null +++ b/tests/fixtures/browser-svgr-config-memo/package.json @@ -0,0 +1,17 @@ +{ + "name": "browser-svgr-config-memo", + "version": "1.0.0", + "type": "module", + "module": "lib/index.js", + "exports": { + ".": { + "import": "./lib/index.js" + } + }, + "files": [ + "lib" + ], + "peerDependencies": { + "react": "^18.2.0" + } +} diff --git a/tests/fixtures/browser-svgr-config-memo/src/Button.module.css b/tests/fixtures/browser-svgr-config-memo/src/Button.module.css new file mode 100644 index 0000000..809f488 --- /dev/null +++ b/tests/fixtures/browser-svgr-config-memo/src/Button.module.css @@ -0,0 +1,7 @@ +.root { + background-image: url(./assets/css.svg); +} + +.label { + background-image: url(./assets/shared.svg); +} diff --git a/tests/fixtures/browser-svgr-config-memo/src/Button.tsx b/tests/fixtures/browser-svgr-config-memo/src/Button.tsx new file mode 100644 index 0000000..af738dd --- /dev/null +++ b/tests/fixtures/browser-svgr-config-memo/src/Button.tsx @@ -0,0 +1,21 @@ +import { FC, MouseEventHandler, PropsWithChildren } from 'react'; + +import styles from './Button.module.css'; + +import imageUrl, { ReactComponent as Image } from './assets/js.svg'; +import { ReactComponent as Shared } from './assets/shared.svg'; + +type Props = PropsWithChildren<{ + onClick: MouseEventHandler; +}>; + +export const Button: FC = ({ children, onClick }: Props) => ( + +); diff --git a/tests/fixtures/browser-svgr-config-memo/src/assets/css.svg b/tests/fixtures/browser-svgr-config-memo/src/assets/css.svg new file mode 100644 index 0000000..9e09913 --- /dev/null +++ b/tests/fixtures/browser-svgr-config-memo/src/assets/css.svg @@ -0,0 +1,9 @@ + + + + + + + CSS + + diff --git a/tests/fixtures/browser-svgr-config-memo/src/assets/js.svg b/tests/fixtures/browser-svgr-config-memo/src/assets/js.svg new file mode 100644 index 0000000..e0c8939 --- /dev/null +++ b/tests/fixtures/browser-svgr-config-memo/src/assets/js.svg @@ -0,0 +1,9 @@ + + + + + + + JS + + diff --git a/tests/fixtures/browser-svgr-config-memo/src/assets/shared.svg b/tests/fixtures/browser-svgr-config-memo/src/assets/shared.svg new file mode 100644 index 0000000..7177954 --- /dev/null +++ b/tests/fixtures/browser-svgr-config-memo/src/assets/shared.svg @@ -0,0 +1,9 @@ + + + + + + + Shared + + diff --git a/tests/fixtures/browser-svgr-config-memo/src/index.ts b/tests/fixtures/browser-svgr-config-memo/src/index.ts new file mode 100644 index 0000000..fe9c53c --- /dev/null +++ b/tests/fixtures/browser-svgr-config-memo/src/index.ts @@ -0,0 +1 @@ +export { Button } from './Button'; diff --git a/tests/fixtures/browser-svgr-config-memo/tsconfig.forge.json b/tests/fixtures/browser-svgr-config-memo/tsconfig.forge.json new file mode 100644 index 0000000..820c793 --- /dev/null +++ b/tests/fixtures/browser-svgr-config-memo/tsconfig.forge.json @@ -0,0 +1,5 @@ +{ + "extends": "@tabula/typescript-config/tsconfig.browser.json", + + "include": ["src"] +} diff --git a/tests/fixtures/browser-svgr-config/.svgrrc b/tests/fixtures/browser-svgr-config/.svgrrc index 7321ff2..eebae67 100644 --- a/tests/fixtures/browser-svgr-config/.svgrrc +++ b/tests/fixtures/browser-svgr-config/.svgrrc @@ -1,6 +1,5 @@ { "exportType": "default", - "memo": true, "namedExport": "SVGComponent", "svgo": true } From c223e92969e07b2c7a058c49f4a6d2e76acae0fc Mon Sep 17 00:00:00 2001 From: Alexey Plutalov Date: Mon, 25 Dec 2023 17:37:38 +0300 Subject: [PATCH 2/6] feat: allow to transform SVG component name (#55) * build: add `@svgr/babel-plugin-transform-svg-component` dependency * feat!: provide SVG component name transformer to SVG plugin * test: add tests for SVG component name transformations * docs: update `README.md` * chore: add changesets --- .changeset/long-cows-give.md | 39 ++++ README.md | 38 ++++ package.json | 1 + pnpm-lock.yaml | 24 +-- src/bundle/bundle.ts | 3 + src/bundle/createBuildOptions.ts | 15 +- src/config/initConfig.ts | 1 + src/config/loadConfig.ts | 4 + src/config/schema.ts | 7 + src/plugins/svgPlugin/applyComponentName.ts | 64 ++++++ src/plugins/svgPlugin/svgPlugin.ts | 28 ++- tests/__snapshots__/browser.test.ts.snap | 184 ++++++++++++++++++ tests/browser.test.ts | 30 +++ .../.forgerc.js | 7 + .../package.json | 17 ++ .../src/Button.module.css | 7 + .../src/Button.tsx | 21 ++ .../src/assets/css.svg | 9 + .../src/assets/js.svg | 9 + .../src/assets/shared.svg | 9 + .../src/index.ts | 1 + .../tsconfig.forge.json | 5 + .../.forgerc.js | 7 + .../.svgrrc | 3 + .../package.json | 17 ++ .../src/Button.module.css | 7 + .../src/Button.tsx | 21 ++ .../src/assets/css.svg | 9 + .../src/assets/js.svg | 9 + .../src/assets/shared.svg | 9 + .../src/index.ts | 1 + .../tsconfig.forge.json | 5 + tests/helpers/fixtures.ts | 9 +- 33 files changed, 592 insertions(+), 28 deletions(-) create mode 100644 .changeset/long-cows-give.md create mode 100644 src/plugins/svgPlugin/applyComponentName.ts create mode 100644 tests/fixtures/browser-svgr-component-name-memo/.forgerc.js create mode 100644 tests/fixtures/browser-svgr-component-name-memo/package.json create mode 100644 tests/fixtures/browser-svgr-component-name-memo/src/Button.module.css create mode 100644 tests/fixtures/browser-svgr-component-name-memo/src/Button.tsx create mode 100644 tests/fixtures/browser-svgr-component-name-memo/src/assets/css.svg create mode 100644 tests/fixtures/browser-svgr-component-name-memo/src/assets/js.svg create mode 100644 tests/fixtures/browser-svgr-component-name-memo/src/assets/shared.svg create mode 100644 tests/fixtures/browser-svgr-component-name-memo/src/index.ts create mode 100644 tests/fixtures/browser-svgr-component-name-memo/tsconfig.forge.json create mode 100644 tests/fixtures/browser-svgr-component-name-no-memo/.forgerc.js create mode 100644 tests/fixtures/browser-svgr-component-name-no-memo/.svgrrc create mode 100644 tests/fixtures/browser-svgr-component-name-no-memo/package.json create mode 100644 tests/fixtures/browser-svgr-component-name-no-memo/src/Button.module.css create mode 100644 tests/fixtures/browser-svgr-component-name-no-memo/src/Button.tsx create mode 100644 tests/fixtures/browser-svgr-component-name-no-memo/src/assets/css.svg create mode 100644 tests/fixtures/browser-svgr-component-name-no-memo/src/assets/js.svg create mode 100644 tests/fixtures/browser-svgr-component-name-no-memo/src/assets/shared.svg create mode 100644 tests/fixtures/browser-svgr-component-name-no-memo/src/index.ts create mode 100644 tests/fixtures/browser-svgr-component-name-no-memo/tsconfig.forge.json diff --git a/.changeset/long-cows-give.md b/.changeset/long-cows-give.md new file mode 100644 index 0000000..3621e6c --- /dev/null +++ b/.changeset/long-cows-give.md @@ -0,0 +1,39 @@ +--- +'@tabula/forge': minor +--- + +added support of transformation of SVG component name with `svgrComponentName` option. + +By default, SVGR uses `Svg` name for components. You can override this behaviour through +`svgrComponentName` options, which should be function of format `(svgrName: string) => string`. + +Example: + +```js +export default { + // ... + svgrComponentName(name) { + return `Ui${name.slice(3)}Icon`; + }, + // ... +}; +``` + +If you have a file `column.svg` then component name is `SvgColumn` by default. But with config from about the name +will be `UiColumnIcon`. + +If you use memoization it looks like: + +```js +import { memo } from 'react'; + +const UiColumnIcon = (props) => { + // ... +}; + +const Memo = memo(UiColumnIcon); + +export { Memo as ReactComponent }; +``` + +This option doesn't affect named exports. diff --git a/README.md b/README.md index df96264..9162742 100644 --- a/README.md +++ b/README.md @@ -188,6 +188,8 @@ We resolve option in following order: You can look at the [JSON Schema](https://github.com/ReTable/forge/blob/main/schemas/forgerc.json) for configuration file. +Not all options are available through static files. For example, `svgrComponentName` is available only in JS/TS files. + ## Entries By default, the `forge` looking for `/src/index.tsx` or `` name for components. You can override this behaviour through +`svgrComponentName` options, which should be function of format `(svgrName: string) => string`. + +Example: + +```js +export default { + // ... + svgrComponentName(name) { + return `Ui${name.slice(3)}Icon`; + }, + // ... +}; +``` + +If you have a file `column.svg` then component name is `SvgColumn` by default. But with config from about the name +will be `UiColumnIcon`. + +If you use memoization it looks like: + +```js +import { memo } from 'react'; + +const UiColumnIcon = (props) => { + // ... +}; + +const Memo = memo(UiColumnIcon); + +export { Memo as ReactComponent }; +``` + +This option doesn't affect named exports. + ### React We use automatic runtime only for React. diff --git a/package.json b/package.json index 119fbdd..a1deb5e 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,7 @@ "@changesets/cli": "^2.27.1", "@commitlint/cli": "^18.4.3", "@commitlint/config-conventional": "^18.4.3", + "@svgr/babel-plugin-transform-svg-component": "^8.0.0", "@tabula/eslint-config": "^0.1.1", "@tabula/prettier-config": "^0.1.4", "@tabula/typescript-config": "^0.2.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 54ad601..228ea4b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -91,6 +91,9 @@ devDependencies: '@commitlint/config-conventional': specifier: ^18.4.3 version: 18.4.3 + '@svgr/babel-plugin-transform-svg-component': + specifier: ^8.0.0 + version: 8.0.0(@babel/core@7.23.6) '@tabula/eslint-config': specifier: ^0.1.1 version: 0.1.1(eslint@8.56.0)(typescript@5.3.3) @@ -152,7 +155,6 @@ packages: dependencies: '@jridgewell/gen-mapping': 0.3.3 '@jridgewell/trace-mapping': 0.3.20 - dev: false /@babel/code-frame@7.23.5: resolution: {integrity: sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==} @@ -164,7 +166,6 @@ packages: /@babel/compat-data@7.23.5: resolution: {integrity: sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw==} engines: {node: '>=6.9.0'} - dev: false /@babel/core@7.23.6: resolution: {integrity: sha512-FxpRyGjrMJXh7X3wGLGhNDCRiwpWEF74sKjTLDJSG5Kyvow3QZaG0Adbqzi9ZrVjTWpsX+2cxWXD71NMg93kdw==} @@ -187,7 +188,6 @@ packages: semver: 6.3.1 transitivePeerDependencies: - supports-color - dev: false /@babel/generator@7.17.7: resolution: {integrity: sha512-oLcVCTeIFadUoArDTwpluncplrYBmTCCZZgXCbgNGvOBBiSDDK3eWO4b/+eOTli5tKv1lg+a5/NAXg+nTcei1w==} @@ -216,7 +216,6 @@ packages: browserslist: 4.22.2 lru-cache: 5.1.1 semver: 6.3.1 - dev: false /@babel/helper-environment-visitor@7.22.20: resolution: {integrity: sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==} @@ -240,7 +239,6 @@ packages: engines: {node: '>=6.9.0'} dependencies: '@babel/types': 7.23.6 - dev: false /@babel/helper-module-transforms@7.23.3(@babel/core@7.23.6): resolution: {integrity: sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==} @@ -254,7 +252,6 @@ packages: '@babel/helper-simple-access': 7.22.5 '@babel/helper-split-export-declaration': 7.22.6 '@babel/helper-validator-identifier': 7.22.20 - dev: false /@babel/helper-plugin-utils@7.22.5: resolution: {integrity: sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==} @@ -266,7 +263,6 @@ packages: engines: {node: '>=6.9.0'} dependencies: '@babel/types': 7.23.6 - dev: false /@babel/helper-split-export-declaration@7.22.6: resolution: {integrity: sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==} @@ -285,7 +281,6 @@ packages: /@babel/helper-validator-option@7.23.5: resolution: {integrity: sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==} engines: {node: '>=6.9.0'} - dev: false /@babel/helpers@7.23.6: resolution: {integrity: sha512-wCfsbN4nBidDRhpDhvcKlzHWCTlgJYUUdSJfzXb2NuBssDSIjc3xcb+znA7l+zYsFljAcGM0aFkN40cR3lXiGA==} @@ -296,7 +291,6 @@ packages: '@babel/types': 7.23.6 transitivePeerDependencies: - supports-color - dev: false /@babel/highlight@7.23.4: resolution: {integrity: sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==} @@ -371,7 +365,6 @@ packages: globals: 11.12.0 transitivePeerDependencies: - supports-color - dev: false /@babel/types@7.17.0: resolution: {integrity: sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==} @@ -1647,7 +1640,6 @@ packages: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.23.6 - dev: false /@svgr/babel-preset@8.1.0(@babel/core@7.23.6): resolution: {integrity: sha512-7EYDbHE7MxHpv4sxvnVPngw5fuR6pw79SkcrILHJ/iMpuKySNCl5W1qcwPEpU+LgyRXOaAFgH0KhwD18wwg6ug==} @@ -2547,7 +2539,6 @@ packages: electron-to-chromium: 1.4.615 node-releases: 2.0.14 update-browserslist-db: 1.0.13(browserslist@4.22.2) - dev: false /buffer-from@1.1.2: resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==} @@ -2595,7 +2586,6 @@ packages: /caniuse-lite@1.0.30001570: resolution: {integrity: sha512-+3e0ASu4sw1SWaoCtvPeyXp+5PsjigkSt8OXZbF9StH5pQWbxEjLAZE3n8Aup5udop1uRiKA7a4utUk/uoSpUw==} - dev: false /chai@4.3.10: resolution: {integrity: sha512-0UXG04VuVbruMUYbJ6JctvH0YnC/4q3/AkT18q4NaITo91CUm0liMS9VqzT9vZhVQ/1eqPanMWjBM+Juhfb/9g==} @@ -2769,7 +2759,6 @@ packages: /convert-source-map@2.0.0: resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==} - dev: false /cosmiconfig-typescript-loader@5.0.0(@types/node@18.19.3)(cosmiconfig@8.3.6)(typescript@5.3.3): resolution: {integrity: sha512-+8cK7jRAReYkMwMiG+bxhcNKiHJDM6bR9FD/nGBXOWdMLuYawjF5cGrtLilJ+LGd3ZjCXnJjR5DkfWPoIVlqJA==} @@ -3118,7 +3107,6 @@ packages: /electron-to-chromium@1.4.615: resolution: {integrity: sha512-/bKPPcgZVUziECqDc+0HkT87+0zhaWSZHNXqF8FLd2lQcptpmUFwoCSWjCdOng9Gdq+afKArPdEg/0ZW461Eng==} - dev: false /emoji-regex@8.0.0: resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==} @@ -3892,7 +3880,6 @@ packages: /gensync@1.0.0-beta.2: resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==} engines: {node: '>=6.9.0'} - dev: false /get-caller-file@2.0.5: resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==} @@ -4505,7 +4492,6 @@ packages: resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==} engines: {node: '>=6'} hasBin: true - dev: false /jsonc-parser@3.2.0: resolution: {integrity: sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==} @@ -4781,7 +4767,6 @@ packages: resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==} dependencies: yallist: 3.1.1 - dev: false /lru-cache@6.0.0: resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==} @@ -4967,7 +4952,6 @@ packages: /node-releases@2.0.14: resolution: {integrity: sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==} - dev: false /normalize-package-data@2.5.0: resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==} @@ -6399,7 +6383,6 @@ packages: browserslist: 4.22.2 escalade: 3.1.1 picocolors: 1.0.0 - dev: false /uri-js@4.4.1: resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==} @@ -6749,7 +6732,6 @@ packages: /yallist@3.1.1: resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==} - dev: false /yallist@4.0.0: resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==} diff --git a/src/bundle/bundle.ts b/src/bundle/bundle.ts index 89fa113..538d0fa 100644 --- a/src/bundle/bundle.ts +++ b/src/bundle/bundle.ts @@ -16,6 +16,7 @@ type Options = { production: boolean; storybook: boolean; cssClassPrefix: boolean | string; + svgrComponentName?: (componentName: string) => string; target: Target; typings: boolean; watch: boolean; @@ -28,6 +29,7 @@ export async function bundle({ postBuild, production, storybook, + svgrComponentName, target, typings, watch, @@ -64,6 +66,7 @@ export async function bundle({ production, repositoryRoot, storybook, + svgrComponentName, target, typings, }); diff --git a/src/bundle/createBuildOptions.ts b/src/bundle/createBuildOptions.ts index 66976b3..8f83160 100644 --- a/src/bundle/createBuildOptions.ts +++ b/src/bundle/createBuildOptions.ts @@ -21,6 +21,7 @@ type BrowserOptions = { production: boolean; repositoryRoot: string; storybook: boolean; + svgrComponentName?: (componentName: string) => string; }; const extensions = [ @@ -86,7 +87,14 @@ function getPrefixFrom(cssClassPrefix: boolean | string, packageName: string) { async function applyBrowserOptions( buildOptions: BuildOptions, - { cssClassPrefix, name, production, repositoryRoot, storybook }: BrowserOptions, + { + cssClassPrefix, + name, + production, + repositoryRoot, + storybook, + svgrComponentName, + }: BrowserOptions, ) { const prefix = getPrefixFrom(cssClassPrefix, name); @@ -116,7 +124,7 @@ async function applyBrowserOptions( buildOptions.plugins = [ cssAutoImportPlugin(), stylesPlugin({ processCss }), - svgPlugin(), + svgPlugin({ svgrComponentName }), vanillaExtractPlugin({ isProduction: production, prefix }), ]; @@ -140,6 +148,7 @@ type Options = { production: boolean; repositoryRoot: string; storybook: boolean; + svgrComponentName?: (componentName: string) => string; target: Target; typings: boolean; }; @@ -154,6 +163,7 @@ export async function createBuildOptions({ production, repositoryRoot, storybook, + svgrComponentName, target, typings, }: Options): Promise { @@ -186,6 +196,7 @@ export async function createBuildOptions({ production, repositoryRoot, storybook, + svgrComponentName, }); break; diff --git a/src/config/initConfig.ts b/src/config/initConfig.ts index e58a7f0..76d589c 100644 --- a/src/config/initConfig.ts +++ b/src/config/initConfig.ts @@ -31,6 +31,7 @@ export async function initConfig(target: Target): Promise { if (target === 'node') { delete config.storybook; delete config.cssClassPrefix; + delete config.svgrComponentName; delete config.build?.storybook; delete config.watch?.storybook; } diff --git a/src/config/loadConfig.ts b/src/config/loadConfig.ts index a5bbcc3..3fe902a 100644 --- a/src/config/loadConfig.ts +++ b/src/config/loadConfig.ts @@ -112,6 +112,7 @@ type Result = { typings: boolean; storybook: boolean; cssClassPrefix: boolean | string; + svgrComponentName?: (componentName: string) => string; postBuild: Hook[]; @@ -160,6 +161,8 @@ export async function loadConfig(options: Options): Promise { const cssClassPrefix = options.cssClassPrefix ?? userConfig?.cssClassPrefix ?? defaults.cssClassPrefix; + const svgrComponentName = userConfig?.svgrComponentName; + let postBuild: Hook | Hook[] = []; if (options.postBuild != null) { @@ -180,6 +183,7 @@ export async function loadConfig(options: Options): Promise { typings: check && typings, storybook: target === 'browser' && storybook, cssClassPrefix, + svgrComponentName, postBuild, diff --git a/src/config/schema.ts b/src/config/schema.ts index 68a49f6..84e611a 100644 --- a/src/config/schema.ts +++ b/src/config/schema.ts @@ -21,6 +21,12 @@ const storybook = z.boolean({ 'Enables emitting additional documentation for components to use it in the Storybook', }); +const svgrComponentName = z + .function() + .args(z.string()) + .returns(z.string()) + .describe('Transforms SVG component name'); + const cssClassPrefix = z.union([z.boolean(), z.string()], { description: 'Prefix which used for CSS classes which generated by CSS Modules and `vanilla-extract` in production mode', @@ -77,6 +83,7 @@ const baseConfiguration = perCommandConfiguration.extend({ target, cssClassPrefix: cssClassPrefix.optional(), + svgrComponentName: svgrComponentName.optional(), build: perCommandConfiguration.optional(), watch: perCommandConfiguration.optional(), diff --git a/src/plugins/svgPlugin/applyComponentName.ts b/src/plugins/svgPlugin/applyComponentName.ts new file mode 100644 index 0000000..e56ad59 --- /dev/null +++ b/src/plugins/svgPlugin/applyComponentName.ts @@ -0,0 +1,64 @@ +import { Template } from '@svgr/babel-plugin-transform-svg-component'; + +type Variables = Template extends (variables: infer V, ...args: never[]) => unknown ? V : never; + +type Options = { + memo: boolean; + transformName?: (name: string) => string; +}; + +function applyComponentNameNotMemoized(variables: Variables, name: string) { + variables.componentName = name; + + const [exports] = variables.exports; + + if (exports.type !== 'ExportNamedDeclaration') { + return; + } + + const [specifier] = exports.specifiers; + + if (specifier.type !== 'ExportSpecifier') { + return; + } + + specifier.local.name = name; +} + +function applyComponentNameToMemoized(variables: Variables, name: string) { + variables.componentName = name; + + const [exports] = variables.exports; + + if (exports.type !== 'VariableDeclaration') { + return; + } + + const { init } = exports.declarations[0]; + + if (init == null || init.type !== 'CallExpression') { + return; + } + + const [argument] = init.arguments; + + if (argument.type !== 'Identifier') { + return; + } + + argument.name = name; +} + +export function applyComponentName(variables: Variables, { memo, transformName }: Options): void { + if (transformName == null) { + return; + } + + const name = transformName(variables.componentName); + + if (memo) { + applyComponentNameToMemoized(variables, name); + } else { + applyComponentNameNotMemoized(variables, name); + } +} diff --git a/src/plugins/svgPlugin/svgPlugin.ts b/src/plugins/svgPlugin/svgPlugin.ts index 61db5a4..67cafce 100644 --- a/src/plugins/svgPlugin/svgPlugin.ts +++ b/src/plugins/svgPlugin/svgPlugin.ts @@ -9,13 +9,19 @@ import { optimize } from 'svgo'; import { getOriginalPath, isVanillaCss } from '../vanillaExtractPlugin'; +import { applyComponentName } from './applyComponentName'; + type PluginData = { path: string; }; const svgrSuffix = '?svgr'; -export function svgPlugin(): Plugin { +type Options = { + svgrComponentName?: (componentName: string) => string; +}; + +export function svgPlugin({ svgrComponentName }: Options): Plugin { return { name: 'svg-plugin', @@ -25,18 +31,34 @@ export function svgPlugin(): Plugin { // NOTE: The `svgr` uses runtime config over CLI config. We avoid this behaviour. const userConfig: { config: Config } | null = await cosmiconfig('svgr').search(); + const memo = userConfig?.config.memo ?? true; + const config: Config = { ...userConfig?.config, exportType: 'named', + memo, namedExport: 'ReactComponent', plugins: ['@svgr/plugin-jsx'], runtimeConfig: false, + template(variables, { tpl }) { + applyComponentName(variables, { memo, transformName: svgrComponentName }); + + return tpl` + ${variables.imports}; + + ${variables.interfaces}; + + const ${variables.componentName} = (${variables.props}) => ( + ${variables.jsx} + ); + + ${variables.exports}; + `; + }, svgo: minify, }; - config.memo = userConfig?.config.memo ?? true; - onResolve( { filter: /^ni:svgr;/, diff --git a/tests/__snapshots__/browser.test.ts.snap b/tests/__snapshots__/browser.test.ts.snap index 9fcdd10..d80c789 100644 --- a/tests/__snapshots__/browser.test.ts.snap +++ b/tests/__snapshots__/browser.test.ts.snap @@ -1043,6 +1043,190 @@ exports[`browser > SVG support > supports sharing the same SVG between CSS and J " `; +exports[`browser > SVG support > svgrComponentName > allows to transform component name with memoization 1`] = ` +"import "./index.css"; + +// src/Button.module.css +var Button_default = { + "root": "browser_svgr_component_name_memo__src-Button-module__root", + "label": "browser_svgr_component_name_memo__src-Button-module__label" +}; + +// src/assets/js.svg +var js_default = "./assets/js.svg"; + +// src/assets/js.svg?svgr +import * as React from "react"; +import { memo } from "react"; +import { jsxDEV } from "react/jsx-dev-runtime"; +var js_default2 = js_default; +var UiJsIcon = (props) => /* @__PURE__ */ jsxDEV("svg", { id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", width: "120px", height: "120px", viewBox: "0 0 120 120", enableBackground: "new 0 0 120 120", xmlSpace: "preserve", ...props, children: [ + /* @__PURE__ */ jsxDEV("circle", { cx: 60, cy: 60.583, r: 14.409 }, void 0, false, { + fileName: "src/assets/js.svg?svgr", + lineNumber: 5, + columnNumber: 255 + }), + /* @__PURE__ */ jsxDEV("text", { children: "\\n JS\\n " }, void 0, false, { + fileName: "src/assets/js.svg?svgr", + lineNumber: 5, + columnNumber: 296 + }) +] }, void 0, true, { + fileName: "src/assets/js.svg?svgr", + lineNumber: 5, + columnNumber: 27 +}); +var Memo = memo(UiJsIcon); + +// src/assets/shared.svg?svgr +import * as React2 from "react"; +import { memo as memo2 } from "react"; +import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime"; +var UiSharedIcon = (props) => /* @__PURE__ */ jsxDEV2("svg", { id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", width: "120px", height: "120px", viewBox: "0 0 120 120", enableBackground: "new 0 0 120 120", xmlSpace: "preserve", ...props, children: [ + /* @__PURE__ */ jsxDEV2("circle", { cx: 60, cy: 60.583, r: 14.409 }, void 0, false, { + fileName: "src/assets/shared.svg?svgr", + lineNumber: 5, + columnNumber: 259 + }), + /* @__PURE__ */ jsxDEV2("text", { children: "\\n Shared\\n " }, void 0, false, { + fileName: "src/assets/shared.svg?svgr", + lineNumber: 5, + columnNumber: 300 + }) +] }, void 0, true, { + fileName: "src/assets/shared.svg?svgr", + lineNumber: 5, + columnNumber: 31 +}); +var Memo2 = memo2(UiSharedIcon); + +// src/Button.tsx +import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime"; +var Button = ({ children, onClick }) => /* @__PURE__ */ jsxDEV3("button", { className: Button_default.root, onClick, type: "button", children: [ + /* @__PURE__ */ jsxDEV3("img", { src: js_default2 }, void 0, false, { + fileName: "src/Button.tsx", + lineNumber: 14, + columnNumber: 5 + }), + /* @__PURE__ */ jsxDEV3(Memo, {}, void 0, false, { + fileName: "src/Button.tsx", + lineNumber: 15, + columnNumber: 5 + }), + /* @__PURE__ */ jsxDEV3("span", { className: Button_default.label, children: [ + /* @__PURE__ */ jsxDEV3(Memo2, {}, void 0, false, { + fileName: "src/Button.tsx", + lineNumber: 17, + columnNumber: 7 + }), + children + ] }, void 0, true, { + fileName: "src/Button.tsx", + lineNumber: 16, + columnNumber: 5 + }) +] }, void 0, true, { + fileName: "src/Button.tsx", + lineNumber: 13, + columnNumber: 3 +}); +export { + Button +}; +//# sourceMappingURL=index.js.map +" +`; + +exports[`browser > SVG support > svgrComponentName > allows to transform component name without memoization 1`] = ` +"import "./index.css"; + +// src/Button.module.css +var Button_default = { + "root": "browser_svgr_component_name_no_memo__src-Button-module__root", + "label": "browser_svgr_component_name_no_memo__src-Button-module__label" +}; + +// src/assets/js.svg +var js_default = "./assets/js.svg"; + +// src/assets/js.svg?svgr +import * as React from "react"; +import { jsxDEV } from "react/jsx-dev-runtime"; +var js_default2 = js_default; +var UiJsIcon = (props) => /* @__PURE__ */ jsxDEV("svg", { id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", width: "120px", height: "120px", viewBox: "0 0 120 120", enableBackground: "new 0 0 120 120", xmlSpace: "preserve", ...props, children: [ + /* @__PURE__ */ jsxDEV("circle", { cx: 60, cy: 60.583, r: 14.409 }, void 0, false, { + fileName: "src/assets/js.svg?svgr", + lineNumber: 4, + columnNumber: 255 + }), + /* @__PURE__ */ jsxDEV("text", { children: "\\n JS\\n " }, void 0, false, { + fileName: "src/assets/js.svg?svgr", + lineNumber: 4, + columnNumber: 296 + }) +] }, void 0, true, { + fileName: "src/assets/js.svg?svgr", + lineNumber: 4, + columnNumber: 27 +}); + +// src/assets/shared.svg?svgr +import * as React2 from "react"; +import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime"; +var UiSharedIcon = (props) => /* @__PURE__ */ jsxDEV2("svg", { id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", width: "120px", height: "120px", viewBox: "0 0 120 120", enableBackground: "new 0 0 120 120", xmlSpace: "preserve", ...props, children: [ + /* @__PURE__ */ jsxDEV2("circle", { cx: 60, cy: 60.583, r: 14.409 }, void 0, false, { + fileName: "src/assets/shared.svg?svgr", + lineNumber: 4, + columnNumber: 259 + }), + /* @__PURE__ */ jsxDEV2("text", { children: "\\n Shared\\n " }, void 0, false, { + fileName: "src/assets/shared.svg?svgr", + lineNumber: 4, + columnNumber: 300 + }) +] }, void 0, true, { + fileName: "src/assets/shared.svg?svgr", + lineNumber: 4, + columnNumber: 31 +}); + +// src/Button.tsx +import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime"; +var Button = ({ children, onClick }) => /* @__PURE__ */ jsxDEV3("button", { className: Button_default.root, onClick, type: "button", children: [ + /* @__PURE__ */ jsxDEV3("img", { src: js_default2 }, void 0, false, { + fileName: "src/Button.tsx", + lineNumber: 14, + columnNumber: 5 + }), + /* @__PURE__ */ jsxDEV3(UiJsIcon, {}, void 0, false, { + fileName: "src/Button.tsx", + lineNumber: 15, + columnNumber: 5 + }), + /* @__PURE__ */ jsxDEV3("span", { className: Button_default.label, children: [ + /* @__PURE__ */ jsxDEV3(UiSharedIcon, {}, void 0, false, { + fileName: "src/Button.tsx", + lineNumber: 17, + columnNumber: 7 + }), + children + ] }, void 0, true, { + fileName: "src/Button.tsx", + lineNumber: 16, + columnNumber: 5 + }) +] }, void 0, true, { + fileName: "src/Button.tsx", + lineNumber: 13, + columnNumber: 3 +}); +export { + Button +}; +//# sourceMappingURL=index.js.map +" +`; + exports[`browser > cssClassPrefix > when package name have no scope > doesn't use prefix at all when given option is disabled 1`] = ` "import "./index.css"; diff --git a/tests/browser.test.ts b/tests/browser.test.ts index 84b4c52..ab3720c 100644 --- a/tests/browser.test.ts +++ b/tests/browser.test.ts @@ -690,6 +690,36 @@ describe('browser', () => { }, ); + describe('svgrComponentName', () => { + it( + 'allows to transform component name without memoization', + { + command: 'build', + dependencies: ['@types/react'], + name: 'browser-svgr-component-name-no-memo', + target: 'browser', + production: false, + }, + async (c) => { + expect(await c.read('lib/index.js')).toMatchSnapshot(); + }, + ); + + it( + 'allows to transform component name with memoization', + { + command: 'build', + dependencies: ['@types/react'], + name: 'browser-svgr-component-name-memo', + target: 'browser', + production: false, + }, + async (c) => { + expect(await c.read('lib/index.js')).toMatchSnapshot(); + }, + ); + }); + describe('.svgrrc', () => { it( 'supports configuration files', diff --git a/tests/fixtures/browser-svgr-component-name-memo/.forgerc.js b/tests/fixtures/browser-svgr-component-name-memo/.forgerc.js new file mode 100644 index 0000000..c240f3b --- /dev/null +++ b/tests/fixtures/browser-svgr-component-name-memo/.forgerc.js @@ -0,0 +1,7 @@ +export default { + target: 'browser', + + svgrComponentName(name) { + return `Ui${name.slice(3)}Icon`; + }, +}; diff --git a/tests/fixtures/browser-svgr-component-name-memo/package.json b/tests/fixtures/browser-svgr-component-name-memo/package.json new file mode 100644 index 0000000..e5ed766 --- /dev/null +++ b/tests/fixtures/browser-svgr-component-name-memo/package.json @@ -0,0 +1,17 @@ +{ + "name": "browser-svgr-component-name-memo", + "version": "1.0.0", + "type": "module", + "module": "lib/index.js", + "exports": { + ".": { + "import": "./lib/index.js" + } + }, + "files": [ + "lib" + ], + "peerDependencies": { + "react": "^18.2.0" + } +} diff --git a/tests/fixtures/browser-svgr-component-name-memo/src/Button.module.css b/tests/fixtures/browser-svgr-component-name-memo/src/Button.module.css new file mode 100644 index 0000000..809f488 --- /dev/null +++ b/tests/fixtures/browser-svgr-component-name-memo/src/Button.module.css @@ -0,0 +1,7 @@ +.root { + background-image: url(./assets/css.svg); +} + +.label { + background-image: url(./assets/shared.svg); +} diff --git a/tests/fixtures/browser-svgr-component-name-memo/src/Button.tsx b/tests/fixtures/browser-svgr-component-name-memo/src/Button.tsx new file mode 100644 index 0000000..af738dd --- /dev/null +++ b/tests/fixtures/browser-svgr-component-name-memo/src/Button.tsx @@ -0,0 +1,21 @@ +import { FC, MouseEventHandler, PropsWithChildren } from 'react'; + +import styles from './Button.module.css'; + +import imageUrl, { ReactComponent as Image } from './assets/js.svg'; +import { ReactComponent as Shared } from './assets/shared.svg'; + +type Props = PropsWithChildren<{ + onClick: MouseEventHandler; +}>; + +export const Button: FC = ({ children, onClick }: Props) => ( + +); diff --git a/tests/fixtures/browser-svgr-component-name-memo/src/assets/css.svg b/tests/fixtures/browser-svgr-component-name-memo/src/assets/css.svg new file mode 100644 index 0000000..9e09913 --- /dev/null +++ b/tests/fixtures/browser-svgr-component-name-memo/src/assets/css.svg @@ -0,0 +1,9 @@ + + + + + + + CSS + + diff --git a/tests/fixtures/browser-svgr-component-name-memo/src/assets/js.svg b/tests/fixtures/browser-svgr-component-name-memo/src/assets/js.svg new file mode 100644 index 0000000..e0c8939 --- /dev/null +++ b/tests/fixtures/browser-svgr-component-name-memo/src/assets/js.svg @@ -0,0 +1,9 @@ + + + + + + + JS + + diff --git a/tests/fixtures/browser-svgr-component-name-memo/src/assets/shared.svg b/tests/fixtures/browser-svgr-component-name-memo/src/assets/shared.svg new file mode 100644 index 0000000..7177954 --- /dev/null +++ b/tests/fixtures/browser-svgr-component-name-memo/src/assets/shared.svg @@ -0,0 +1,9 @@ + + + + + + + Shared + + diff --git a/tests/fixtures/browser-svgr-component-name-memo/src/index.ts b/tests/fixtures/browser-svgr-component-name-memo/src/index.ts new file mode 100644 index 0000000..fe9c53c --- /dev/null +++ b/tests/fixtures/browser-svgr-component-name-memo/src/index.ts @@ -0,0 +1 @@ +export { Button } from './Button'; diff --git a/tests/fixtures/browser-svgr-component-name-memo/tsconfig.forge.json b/tests/fixtures/browser-svgr-component-name-memo/tsconfig.forge.json new file mode 100644 index 0000000..820c793 --- /dev/null +++ b/tests/fixtures/browser-svgr-component-name-memo/tsconfig.forge.json @@ -0,0 +1,5 @@ +{ + "extends": "@tabula/typescript-config/tsconfig.browser.json", + + "include": ["src"] +} diff --git a/tests/fixtures/browser-svgr-component-name-no-memo/.forgerc.js b/tests/fixtures/browser-svgr-component-name-no-memo/.forgerc.js new file mode 100644 index 0000000..c240f3b --- /dev/null +++ b/tests/fixtures/browser-svgr-component-name-no-memo/.forgerc.js @@ -0,0 +1,7 @@ +export default { + target: 'browser', + + svgrComponentName(name) { + return `Ui${name.slice(3)}Icon`; + }, +}; diff --git a/tests/fixtures/browser-svgr-component-name-no-memo/.svgrrc b/tests/fixtures/browser-svgr-component-name-no-memo/.svgrrc new file mode 100644 index 0000000..53eaaba --- /dev/null +++ b/tests/fixtures/browser-svgr-component-name-no-memo/.svgrrc @@ -0,0 +1,3 @@ +{ + "memo": false +} diff --git a/tests/fixtures/browser-svgr-component-name-no-memo/package.json b/tests/fixtures/browser-svgr-component-name-no-memo/package.json new file mode 100644 index 0000000..bd4aa1f --- /dev/null +++ b/tests/fixtures/browser-svgr-component-name-no-memo/package.json @@ -0,0 +1,17 @@ +{ + "name": "browser-svgr-component-name-no-memo", + "version": "1.0.0", + "type": "module", + "module": "lib/index.js", + "exports": { + ".": { + "import": "./lib/index.js" + } + }, + "files": [ + "lib" + ], + "peerDependencies": { + "react": "^18.2.0" + } +} diff --git a/tests/fixtures/browser-svgr-component-name-no-memo/src/Button.module.css b/tests/fixtures/browser-svgr-component-name-no-memo/src/Button.module.css new file mode 100644 index 0000000..809f488 --- /dev/null +++ b/tests/fixtures/browser-svgr-component-name-no-memo/src/Button.module.css @@ -0,0 +1,7 @@ +.root { + background-image: url(./assets/css.svg); +} + +.label { + background-image: url(./assets/shared.svg); +} diff --git a/tests/fixtures/browser-svgr-component-name-no-memo/src/Button.tsx b/tests/fixtures/browser-svgr-component-name-no-memo/src/Button.tsx new file mode 100644 index 0000000..af738dd --- /dev/null +++ b/tests/fixtures/browser-svgr-component-name-no-memo/src/Button.tsx @@ -0,0 +1,21 @@ +import { FC, MouseEventHandler, PropsWithChildren } from 'react'; + +import styles from './Button.module.css'; + +import imageUrl, { ReactComponent as Image } from './assets/js.svg'; +import { ReactComponent as Shared } from './assets/shared.svg'; + +type Props = PropsWithChildren<{ + onClick: MouseEventHandler; +}>; + +export const Button: FC = ({ children, onClick }: Props) => ( + +); diff --git a/tests/fixtures/browser-svgr-component-name-no-memo/src/assets/css.svg b/tests/fixtures/browser-svgr-component-name-no-memo/src/assets/css.svg new file mode 100644 index 0000000..9e09913 --- /dev/null +++ b/tests/fixtures/browser-svgr-component-name-no-memo/src/assets/css.svg @@ -0,0 +1,9 @@ + + + + + + + CSS + + diff --git a/tests/fixtures/browser-svgr-component-name-no-memo/src/assets/js.svg b/tests/fixtures/browser-svgr-component-name-no-memo/src/assets/js.svg new file mode 100644 index 0000000..e0c8939 --- /dev/null +++ b/tests/fixtures/browser-svgr-component-name-no-memo/src/assets/js.svg @@ -0,0 +1,9 @@ + + + + + + + JS + + diff --git a/tests/fixtures/browser-svgr-component-name-no-memo/src/assets/shared.svg b/tests/fixtures/browser-svgr-component-name-no-memo/src/assets/shared.svg new file mode 100644 index 0000000..7177954 --- /dev/null +++ b/tests/fixtures/browser-svgr-component-name-no-memo/src/assets/shared.svg @@ -0,0 +1,9 @@ + + + + + + + Shared + + diff --git a/tests/fixtures/browser-svgr-component-name-no-memo/src/index.ts b/tests/fixtures/browser-svgr-component-name-no-memo/src/index.ts new file mode 100644 index 0000000..fe9c53c --- /dev/null +++ b/tests/fixtures/browser-svgr-component-name-no-memo/src/index.ts @@ -0,0 +1 @@ +export { Button } from './Button'; diff --git a/tests/fixtures/browser-svgr-component-name-no-memo/tsconfig.forge.json b/tests/fixtures/browser-svgr-component-name-no-memo/tsconfig.forge.json new file mode 100644 index 0000000..820c793 --- /dev/null +++ b/tests/fixtures/browser-svgr-component-name-no-memo/tsconfig.forge.json @@ -0,0 +1,5 @@ +{ + "extends": "@tabula/typescript-config/tsconfig.browser.json", + + "include": ["src"] +} diff --git a/tests/helpers/fixtures.ts b/tests/helpers/fixtures.ts index f70c3d2..cbe2c66 100644 --- a/tests/helpers/fixtures.ts +++ b/tests/helpers/fixtures.ts @@ -1,5 +1,5 @@ import { createHash } from 'node:crypto'; -import { cp, mkdir, readdir, rename, rm, writeFile } from 'node:fs/promises'; +import { cp, mkdir, readdir, rename, rm, stat, writeFile } from 'node:fs/promises'; import { join } from 'node:path'; import { binPath, fixturesDir, tmpDir } from './paths'; @@ -53,7 +53,12 @@ async function prepareForBuild( await prepareMockedModules(workingDir); - await writeFile(join(workingDir, '.forgerc'), JSON.stringify({ target }), 'utf8'); + // NOTE: Workaround for fixtures which already has `.forgerc.hs` config file. + try { + await stat(join(workingDir, '.forgerc.js')); + } catch { + await writeFile(join(workingDir, '.forgerc'), JSON.stringify({ target }), 'utf8'); + } const args = []; From a8849fafd99880418f59037b216ddb50d0aa931c Mon Sep 17 00:00:00 2001 From: Alexey Plutalov Date: Mon, 25 Dec 2023 19:22:12 +0300 Subject: [PATCH 3/6] feat: allow to append `displayName` to SVGR components (#56) * build: add `@babel/types` dependency * feat: add `svgrDisplayName` option * feat: append `displayName` assignment based on the config * fix: fix forwarding of `svgrDisplayName` option * test: add tests for `displayName` appending * chore: add changesets --- .changeset/tasty-socks-join.md | 5 + .changeset/twenty-items-rescue.md | 39 + README.md | 38 +- package.json | 1 + pnpm-lock.yaml | 5 +- src/bundle/bundle.ts | 7 +- src/bundle/createBuildOptions.ts | 13 +- src/config/initConfig.ts | 1 + src/config/loadConfig.ts | 8 +- src/config/schema.ts | 17 +- src/plugins/svgPlugin/applyComponentName.ts | 4 +- src/plugins/svgPlugin/buildDisplayName.ts | 46 + src/plugins/svgPlugin/svgPlugin.ts | 15 +- src/types.ts | 6 + tests/__snapshots__/browser.test.ts.snap | 1144 +++++++++++++++++ tests/browser.test.ts | 182 +++ .../.forgerc.js | 10 + .../.svgrrc.js | 3 + .../package.json | 17 + .../src/Button.module.css | 7 + .../src/Button.tsx | 21 + .../src/assets/css.svg | 9 + .../src/assets/js.svg | 9 + .../src/assets/shared.svg | 9 + .../src/index.ts | 1 + .../tsconfig.forge.json | 5 + .../.forgerc.js | 10 + .../.svgrrc.js | 3 + .../package.json | 17 + .../src/Button.module.css | 7 + .../src/Button.tsx | 21 + .../src/assets/css.svg | 9 + .../src/assets/js.svg | 9 + .../src/assets/shared.svg | 9 + .../src/index.ts | 1 + .../tsconfig.forge.json | 5 + .../.forgerc.js | 10 + .../package.json | 17 + .../src/Button.module.css | 7 + .../src/Button.tsx | 21 + .../src/assets/css.svg | 9 + .../src/assets/js.svg | 9 + .../src/assets/shared.svg | 9 + .../src/index.ts | 1 + .../tsconfig.forge.json | 5 + .../.forgerc.js | 10 + .../package.json | 17 + .../src/Button.module.css | 7 + .../src/Button.tsx | 21 + .../src/assets/css.svg | 9 + .../src/assets/js.svg | 9 + .../src/assets/shared.svg | 9 + .../src/index.ts | 1 + .../tsconfig.forge.json | 5 + .../.forgerc.js | 7 + .../package.json | 17 + .../src/Button.module.css | 7 + .../src/Button.tsx | 21 + .../src/assets/css.svg | 9 + .../src/assets/js.svg | 9 + .../src/assets/shared.svg | 9 + .../src/index.ts | 1 + .../tsconfig.forge.json | 5 + .../.forgerc.js | 14 + .../package.json | 17 + .../src/Button.module.css | 7 + .../src/Button.tsx | 21 + .../src/assets/css.svg | 9 + .../src/assets/js.svg | 9 + .../src/assets/shared.svg | 9 + .../src/index.ts | 1 + .../tsconfig.forge.json | 5 + .../.forgerc.js | 14 + .../package.json | 17 + .../src/Button.module.css | 7 + .../src/Button.tsx | 21 + .../src/assets/css.svg | 9 + .../src/assets/js.svg | 9 + .../src/assets/shared.svg | 9 + .../src/index.ts | 1 + .../tsconfig.forge.json | 5 + .../.forgerc.js | 11 + .../package.json | 17 + .../src/Button.module.css | 7 + .../src/Button.tsx | 21 + .../src/assets/css.svg | 9 + .../src/assets/js.svg | 9 + .../src/assets/shared.svg | 9 + .../src/index.ts | 1 + .../tsconfig.forge.json | 5 + .../.forgerc.js | 7 + .../.svgrrc.js | 3 + .../package.json | 17 + .../src/Button.module.css | 7 + .../src/Button.tsx | 21 + .../src/assets/css.svg | 9 + .../src/assets/js.svg | 9 + .../src/assets/shared.svg | 9 + .../src/index.ts | 1 + .../tsconfig.forge.json | 5 + .../.forgerc.js | 14 + .../.svgrrc.js | 3 + .../package.json | 17 + .../src/Button.module.css | 7 + .../src/Button.tsx | 21 + .../src/assets/css.svg | 9 + .../src/assets/js.svg | 9 + .../src/assets/shared.svg | 9 + .../src/index.ts | 1 + .../tsconfig.forge.json | 5 + .../.forgerc.js | 14 + .../.svgrrc.js | 3 + .../package.json | 17 + .../src/Button.module.css | 7 + .../src/Button.tsx | 21 + .../src/assets/css.svg | 9 + .../src/assets/js.svg | 9 + .../src/assets/shared.svg | 9 + .../src/index.ts | 1 + .../tsconfig.forge.json | 5 + .../.forgerc.js | 11 + .../.svgrrc.js | 3 + .../package.json | 17 + .../src/Button.module.css | 7 + .../src/Button.tsx | 21 + .../src/assets/css.svg | 9 + .../src/assets/js.svg | 9 + .../src/assets/shared.svg | 9 + .../src/index.ts | 1 + .../tsconfig.forge.json | 5 + 130 files changed, 2603 insertions(+), 14 deletions(-) create mode 100644 .changeset/tasty-socks-join.md create mode 100644 .changeset/twenty-items-rescue.md create mode 100644 src/plugins/svgPlugin/buildDisplayName.ts create mode 100644 tests/fixtures/browser-svgr-display-name-debug-false/.forgerc.js create mode 100644 tests/fixtures/browser-svgr-display-name-debug-false/.svgrrc.js create mode 100644 tests/fixtures/browser-svgr-display-name-debug-false/package.json create mode 100644 tests/fixtures/browser-svgr-display-name-debug-false/src/Button.module.css create mode 100644 tests/fixtures/browser-svgr-display-name-debug-false/src/Button.tsx create mode 100644 tests/fixtures/browser-svgr-display-name-debug-false/src/assets/css.svg create mode 100644 tests/fixtures/browser-svgr-display-name-debug-false/src/assets/js.svg create mode 100644 tests/fixtures/browser-svgr-display-name-debug-false/src/assets/shared.svg create mode 100644 tests/fixtures/browser-svgr-display-name-debug-false/src/index.ts create mode 100644 tests/fixtures/browser-svgr-display-name-debug-false/tsconfig.forge.json create mode 100644 tests/fixtures/browser-svgr-display-name-debug-true/.forgerc.js create mode 100644 tests/fixtures/browser-svgr-display-name-debug-true/.svgrrc.js create mode 100644 tests/fixtures/browser-svgr-display-name-debug-true/package.json create mode 100644 tests/fixtures/browser-svgr-display-name-debug-true/src/Button.module.css create mode 100644 tests/fixtures/browser-svgr-display-name-debug-true/src/Button.tsx create mode 100644 tests/fixtures/browser-svgr-display-name-debug-true/src/assets/css.svg create mode 100644 tests/fixtures/browser-svgr-display-name-debug-true/src/assets/js.svg create mode 100644 tests/fixtures/browser-svgr-display-name-debug-true/src/assets/shared.svg create mode 100644 tests/fixtures/browser-svgr-display-name-debug-true/src/index.ts create mode 100644 tests/fixtures/browser-svgr-display-name-debug-true/tsconfig.forge.json create mode 100644 tests/fixtures/browser-svgr-display-name-memo-debug-false/.forgerc.js create mode 100644 tests/fixtures/browser-svgr-display-name-memo-debug-false/package.json create mode 100644 tests/fixtures/browser-svgr-display-name-memo-debug-false/src/Button.module.css create mode 100644 tests/fixtures/browser-svgr-display-name-memo-debug-false/src/Button.tsx create mode 100644 tests/fixtures/browser-svgr-display-name-memo-debug-false/src/assets/css.svg create mode 100644 tests/fixtures/browser-svgr-display-name-memo-debug-false/src/assets/js.svg create mode 100644 tests/fixtures/browser-svgr-display-name-memo-debug-false/src/assets/shared.svg create mode 100644 tests/fixtures/browser-svgr-display-name-memo-debug-false/src/index.ts create mode 100644 tests/fixtures/browser-svgr-display-name-memo-debug-false/tsconfig.forge.json create mode 100644 tests/fixtures/browser-svgr-display-name-memo-debug-true/.forgerc.js create mode 100644 tests/fixtures/browser-svgr-display-name-memo-debug-true/package.json create mode 100644 tests/fixtures/browser-svgr-display-name-memo-debug-true/src/Button.module.css create mode 100644 tests/fixtures/browser-svgr-display-name-memo-debug-true/src/Button.tsx create mode 100644 tests/fixtures/browser-svgr-display-name-memo-debug-true/src/assets/css.svg create mode 100644 tests/fixtures/browser-svgr-display-name-memo-debug-true/src/assets/js.svg create mode 100644 tests/fixtures/browser-svgr-display-name-memo-debug-true/src/assets/shared.svg create mode 100644 tests/fixtures/browser-svgr-display-name-memo-debug-true/src/index.ts create mode 100644 tests/fixtures/browser-svgr-display-name-memo-debug-true/tsconfig.forge.json create mode 100644 tests/fixtures/browser-svgr-display-name-memo-string/.forgerc.js create mode 100644 tests/fixtures/browser-svgr-display-name-memo-string/package.json create mode 100644 tests/fixtures/browser-svgr-display-name-memo-string/src/Button.module.css create mode 100644 tests/fixtures/browser-svgr-display-name-memo-string/src/Button.tsx create mode 100644 tests/fixtures/browser-svgr-display-name-memo-string/src/assets/css.svg create mode 100644 tests/fixtures/browser-svgr-display-name-memo-string/src/assets/js.svg create mode 100644 tests/fixtures/browser-svgr-display-name-memo-string/src/assets/shared.svg create mode 100644 tests/fixtures/browser-svgr-display-name-memo-string/src/index.ts create mode 100644 tests/fixtures/browser-svgr-display-name-memo-string/tsconfig.forge.json create mode 100644 tests/fixtures/browser-svgr-display-name-memo-user-name-debug-false/.forgerc.js create mode 100644 tests/fixtures/browser-svgr-display-name-memo-user-name-debug-false/package.json create mode 100644 tests/fixtures/browser-svgr-display-name-memo-user-name-debug-false/src/Button.module.css create mode 100644 tests/fixtures/browser-svgr-display-name-memo-user-name-debug-false/src/Button.tsx create mode 100644 tests/fixtures/browser-svgr-display-name-memo-user-name-debug-false/src/assets/css.svg create mode 100644 tests/fixtures/browser-svgr-display-name-memo-user-name-debug-false/src/assets/js.svg create mode 100644 tests/fixtures/browser-svgr-display-name-memo-user-name-debug-false/src/assets/shared.svg create mode 100644 tests/fixtures/browser-svgr-display-name-memo-user-name-debug-false/src/index.ts create mode 100644 tests/fixtures/browser-svgr-display-name-memo-user-name-debug-false/tsconfig.forge.json create mode 100644 tests/fixtures/browser-svgr-display-name-memo-user-name-debug-true/.forgerc.js create mode 100644 tests/fixtures/browser-svgr-display-name-memo-user-name-debug-true/package.json create mode 100644 tests/fixtures/browser-svgr-display-name-memo-user-name-debug-true/src/Button.module.css create mode 100644 tests/fixtures/browser-svgr-display-name-memo-user-name-debug-true/src/Button.tsx create mode 100644 tests/fixtures/browser-svgr-display-name-memo-user-name-debug-true/src/assets/css.svg create mode 100644 tests/fixtures/browser-svgr-display-name-memo-user-name-debug-true/src/assets/js.svg create mode 100644 tests/fixtures/browser-svgr-display-name-memo-user-name-debug-true/src/assets/shared.svg create mode 100644 tests/fixtures/browser-svgr-display-name-memo-user-name-debug-true/src/index.ts create mode 100644 tests/fixtures/browser-svgr-display-name-memo-user-name-debug-true/tsconfig.forge.json create mode 100644 tests/fixtures/browser-svgr-display-name-memo-user-name-string/.forgerc.js create mode 100644 tests/fixtures/browser-svgr-display-name-memo-user-name-string/package.json create mode 100644 tests/fixtures/browser-svgr-display-name-memo-user-name-string/src/Button.module.css create mode 100644 tests/fixtures/browser-svgr-display-name-memo-user-name-string/src/Button.tsx create mode 100644 tests/fixtures/browser-svgr-display-name-memo-user-name-string/src/assets/css.svg create mode 100644 tests/fixtures/browser-svgr-display-name-memo-user-name-string/src/assets/js.svg create mode 100644 tests/fixtures/browser-svgr-display-name-memo-user-name-string/src/assets/shared.svg create mode 100644 tests/fixtures/browser-svgr-display-name-memo-user-name-string/src/index.ts create mode 100644 tests/fixtures/browser-svgr-display-name-memo-user-name-string/tsconfig.forge.json create mode 100644 tests/fixtures/browser-svgr-display-name-string/.forgerc.js create mode 100644 tests/fixtures/browser-svgr-display-name-string/.svgrrc.js create mode 100644 tests/fixtures/browser-svgr-display-name-string/package.json create mode 100644 tests/fixtures/browser-svgr-display-name-string/src/Button.module.css create mode 100644 tests/fixtures/browser-svgr-display-name-string/src/Button.tsx create mode 100644 tests/fixtures/browser-svgr-display-name-string/src/assets/css.svg create mode 100644 tests/fixtures/browser-svgr-display-name-string/src/assets/js.svg create mode 100644 tests/fixtures/browser-svgr-display-name-string/src/assets/shared.svg create mode 100644 tests/fixtures/browser-svgr-display-name-string/src/index.ts create mode 100644 tests/fixtures/browser-svgr-display-name-string/tsconfig.forge.json create mode 100644 tests/fixtures/browser-svgr-display-name-user-name-debug-false/.forgerc.js create mode 100644 tests/fixtures/browser-svgr-display-name-user-name-debug-false/.svgrrc.js create mode 100644 tests/fixtures/browser-svgr-display-name-user-name-debug-false/package.json create mode 100644 tests/fixtures/browser-svgr-display-name-user-name-debug-false/src/Button.module.css create mode 100644 tests/fixtures/browser-svgr-display-name-user-name-debug-false/src/Button.tsx create mode 100644 tests/fixtures/browser-svgr-display-name-user-name-debug-false/src/assets/css.svg create mode 100644 tests/fixtures/browser-svgr-display-name-user-name-debug-false/src/assets/js.svg create mode 100644 tests/fixtures/browser-svgr-display-name-user-name-debug-false/src/assets/shared.svg create mode 100644 tests/fixtures/browser-svgr-display-name-user-name-debug-false/src/index.ts create mode 100644 tests/fixtures/browser-svgr-display-name-user-name-debug-false/tsconfig.forge.json create mode 100644 tests/fixtures/browser-svgr-display-name-user-name-debug-true/.forgerc.js create mode 100644 tests/fixtures/browser-svgr-display-name-user-name-debug-true/.svgrrc.js create mode 100644 tests/fixtures/browser-svgr-display-name-user-name-debug-true/package.json create mode 100644 tests/fixtures/browser-svgr-display-name-user-name-debug-true/src/Button.module.css create mode 100644 tests/fixtures/browser-svgr-display-name-user-name-debug-true/src/Button.tsx create mode 100644 tests/fixtures/browser-svgr-display-name-user-name-debug-true/src/assets/css.svg create mode 100644 tests/fixtures/browser-svgr-display-name-user-name-debug-true/src/assets/js.svg create mode 100644 tests/fixtures/browser-svgr-display-name-user-name-debug-true/src/assets/shared.svg create mode 100644 tests/fixtures/browser-svgr-display-name-user-name-debug-true/src/index.ts create mode 100644 tests/fixtures/browser-svgr-display-name-user-name-debug-true/tsconfig.forge.json create mode 100644 tests/fixtures/browser-svgr-display-name-user-name-string/.forgerc.js create mode 100644 tests/fixtures/browser-svgr-display-name-user-name-string/.svgrrc.js create mode 100644 tests/fixtures/browser-svgr-display-name-user-name-string/package.json create mode 100644 tests/fixtures/browser-svgr-display-name-user-name-string/src/Button.module.css create mode 100644 tests/fixtures/browser-svgr-display-name-user-name-string/src/Button.tsx create mode 100644 tests/fixtures/browser-svgr-display-name-user-name-string/src/assets/css.svg create mode 100644 tests/fixtures/browser-svgr-display-name-user-name-string/src/assets/js.svg create mode 100644 tests/fixtures/browser-svgr-display-name-user-name-string/src/assets/shared.svg create mode 100644 tests/fixtures/browser-svgr-display-name-user-name-string/src/index.ts create mode 100644 tests/fixtures/browser-svgr-display-name-user-name-string/tsconfig.forge.json diff --git a/.changeset/tasty-socks-join.md b/.changeset/tasty-socks-join.md new file mode 100644 index 0000000..66375f0 --- /dev/null +++ b/.changeset/tasty-socks-join.md @@ -0,0 +1,5 @@ +--- +'@tabula/forge': patch +--- + +add `@babel/types` dependency diff --git a/.changeset/twenty-items-rescue.md b/.changeset/twenty-items-rescue.md new file mode 100644 index 0000000..49e8459 --- /dev/null +++ b/.changeset/twenty-items-rescue.md @@ -0,0 +1,39 @@ +--- +'@tabula/forge': minor +--- + +allow to append `displayName` for SVGR components. + +By default, SVGR doesn't append `displayName` for exported components. You can add this behaviour through `svgrDisplayName` +option, which should be function of format `(componentName: string) => string | { displayName: string; isDebugOnly?: boolean }`. + +When function is returns string, then `isDebugOnly` equals to `false`. + +The `componentName` is name of component itself (before memoization if enabled). If you provide `svgrComponentName` option, +then result of applying this function is `componentName`. + +The `isDebugOnly` enables wrapping the assignment in Vite compatible condition. + +```js +// `isDebugOnly` = false + +Component.displayName = 'scope(ComponentDisplayName)'; + +// `isDebugOnly` = true + +if (import.meta.env.DEV) { + Component.displayName = `scope(ComponentDisplayName)`; +} +``` + +If memoization is enabled, then the `displayName` will be assigned to the memoized component: + +```js +const Component = (props) => { + // ... +}; + +const Memo = memo(Component); + +Memo.displayName = `scope(ComponentDisplayName)`; +``` diff --git a/README.md b/README.md index 9162742..5dce8c7 100644 --- a/README.md +++ b/README.md @@ -366,7 +366,7 @@ An SVG file already exports React component as `ReactComponent`. #### SVGR Component Name By default, SVGR uses `Svg` name for components. You can override this behaviour through -`svgrComponentName` options, which should be function of format `(svgrName: string) => string`. +`svgrComponentName` option, which should be function of format `(svgrName: string) => string`. Example: @@ -399,6 +399,42 @@ export { Memo as ReactComponent }; This option doesn't affect named exports. +#### SVGR Display Name + +By default, SVGR doesn't append `displayName` for exported components. You can add this behaviour through `svgrDisplayName` +option, which should be function of format `(componentName: string) => string | { displayName: string; isDebugOnly?: boolean }`. + +When function is returns string, then `isDebugOnly` equals to `false`. + +The `componentName` is name of component itself (before memoization if enabled). If you provide `svgrComponentName` option, +then result of applying this function is `componentName`. + +The `isDebugOnly` enables wrapping the assignment in Vite compatible condition. + +```js +// `isDebugOnly` = false + +Component.displayName = 'scope(ComponentDisplayName)'; + +// `isDebugOnly` = true + +if (import.meta.env.DEV) { + Component.displayName = `scope(ComponentDisplayName)`; +} +``` + +If memoization is enabled, then the `displayName` will be assigned to the memoized component: + +```js +const Component = (props) => { + // ... +}; + +const Memo = memo(Component); + +Memo.displayName = `scope(ComponentDisplayName)`; +``` + ### React We use automatic runtime only for React. diff --git a/package.json b/package.json index a1deb5e..8466244 100644 --- a/package.json +++ b/package.json @@ -68,6 +68,7 @@ }, "dependencies": { "@babel/core": "^7.23.6", + "@babel/types": "^7.23.6", "@svgr/core": "^8.1.0", "@svgr/plugin-jsx": "^8.1.0", "@vanilla-extract/esbuild-plugin": "^2.3.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 228ea4b..05d5600 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,9 @@ dependencies: '@babel/core': specifier: ^7.23.6 version: 7.23.6 + '@babel/types': + specifier: ^7.23.6 + version: 7.23.6 '@svgr/core': specifier: ^8.1.0 version: 8.1.0(typescript@5.3.3) @@ -193,7 +196,7 @@ packages: resolution: {integrity: sha512-oLcVCTeIFadUoArDTwpluncplrYBmTCCZZgXCbgNGvOBBiSDDK3eWO4b/+eOTli5tKv1lg+a5/NAXg+nTcei1w==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.17.0 + '@babel/types': 7.23.6 jsesc: 2.5.2 source-map: 0.5.7 dev: true diff --git a/src/bundle/bundle.ts b/src/bundle/bundle.ts index 538d0fa..32e1409 100644 --- a/src/bundle/bundle.ts +++ b/src/bundle/bundle.ts @@ -5,7 +5,7 @@ import { build, context } from 'esbuild'; import { findUp } from 'find-up'; import { readPackageUp } from 'read-package-up'; -import { Entry, Hook, Target } from '../types'; +import { Entry, Hook, SVGRComponentNameFn, SVGRDisplayNameFn, Target } from '../types'; import { createBuildOptions } from './createBuildOptions'; @@ -16,7 +16,8 @@ type Options = { production: boolean; storybook: boolean; cssClassPrefix: boolean | string; - svgrComponentName?: (componentName: string) => string; + svgrComponentName?: SVGRComponentNameFn; + svgrDisplayName?: SVGRDisplayNameFn; target: Target; typings: boolean; watch: boolean; @@ -30,6 +31,7 @@ export async function bundle({ production, storybook, svgrComponentName, + svgrDisplayName, target, typings, watch, @@ -67,6 +69,7 @@ export async function bundle({ repositoryRoot, storybook, svgrComponentName, + svgrDisplayName, target, typings, }); diff --git a/src/bundle/createBuildOptions.ts b/src/bundle/createBuildOptions.ts index 8f83160..7d1b24c 100644 --- a/src/bundle/createBuildOptions.ts +++ b/src/bundle/createBuildOptions.ts @@ -13,7 +13,7 @@ import { vanillaExtractPlugin, } from '../plugins'; import { createCssProcessor } from '../postcss'; -import { Entry, Hook, Target } from '../types'; +import { Entry, Hook, SVGRComponentNameFn, SVGRDisplayNameFn, Target } from '../types'; type BrowserOptions = { cssClassPrefix: boolean | string; @@ -21,7 +21,8 @@ type BrowserOptions = { production: boolean; repositoryRoot: string; storybook: boolean; - svgrComponentName?: (componentName: string) => string; + svgrComponentName?: SVGRComponentNameFn; + svgrDisplayName?: SVGRDisplayNameFn; }; const extensions = [ @@ -94,6 +95,7 @@ async function applyBrowserOptions( repositoryRoot, storybook, svgrComponentName, + svgrDisplayName, }: BrowserOptions, ) { const prefix = getPrefixFrom(cssClassPrefix, name); @@ -124,7 +126,7 @@ async function applyBrowserOptions( buildOptions.plugins = [ cssAutoImportPlugin(), stylesPlugin({ processCss }), - svgPlugin({ svgrComponentName }), + svgPlugin({ svgrComponentName, svgrDisplayName }), vanillaExtractPlugin({ isProduction: production, prefix }), ]; @@ -148,7 +150,8 @@ type Options = { production: boolean; repositoryRoot: string; storybook: boolean; - svgrComponentName?: (componentName: string) => string; + svgrComponentName?: SVGRComponentNameFn; + svgrDisplayName?: SVGRDisplayNameFn; target: Target; typings: boolean; }; @@ -164,6 +167,7 @@ export async function createBuildOptions({ repositoryRoot, storybook, svgrComponentName, + svgrDisplayName, target, typings, }: Options): Promise { @@ -197,6 +201,7 @@ export async function createBuildOptions({ repositoryRoot, storybook, svgrComponentName, + svgrDisplayName, }); break; diff --git a/src/config/initConfig.ts b/src/config/initConfig.ts index 76d589c..b70acb6 100644 --- a/src/config/initConfig.ts +++ b/src/config/initConfig.ts @@ -32,6 +32,7 @@ export async function initConfig(target: Target): Promise { delete config.storybook; delete config.cssClassPrefix; delete config.svgrComponentName; + delete config.svgrDisplayName; delete config.build?.storybook; delete config.watch?.storybook; } diff --git a/src/config/loadConfig.ts b/src/config/loadConfig.ts index 3fe902a..c72dcaa 100644 --- a/src/config/loadConfig.ts +++ b/src/config/loadConfig.ts @@ -1,6 +1,6 @@ import { cosmiconfig } from 'cosmiconfig'; -import { Entry, Hook, Target } from '../types'; +import { Entry, Hook, SVGRComponentNameFn, SVGRDisplayNameFn, Target } from '../types'; import { defaultBuildConfig, defaultWatchConfig } from './initialConfig'; import { schema } from './schema'; @@ -112,7 +112,8 @@ type Result = { typings: boolean; storybook: boolean; cssClassPrefix: boolean | string; - svgrComponentName?: (componentName: string) => string; + svgrComponentName?: SVGRComponentNameFn; + svgrDisplayName?: SVGRDisplayNameFn; postBuild: Hook[]; @@ -163,6 +164,8 @@ export async function loadConfig(options: Options): Promise { const svgrComponentName = userConfig?.svgrComponentName; + const svgrDisplayName = userConfig?.svgrDisplayName; + let postBuild: Hook | Hook[] = []; if (options.postBuild != null) { @@ -184,6 +187,7 @@ export async function loadConfig(options: Options): Promise { storybook: target === 'browser' && storybook, cssClassPrefix, svgrComponentName, + svgrDisplayName, postBuild, diff --git a/src/config/schema.ts b/src/config/schema.ts index 84e611a..eb59e59 100644 --- a/src/config/schema.ts +++ b/src/config/schema.ts @@ -25,7 +25,21 @@ const svgrComponentName = z .function() .args(z.string()) .returns(z.string()) - .describe('Transforms SVG component name'); + .describe('Transforms SVGR component name'); + +const svgrDisplayName = z + .function() + .args(z.string()) + .returns( + z.union([ + z.object({ + isDebugOnly: z.boolean().optional(), + displayName: z.string(), + }), + z.string(), + ]), + ) + .describe('Append the `displayName` property to exported SVGR component'); const cssClassPrefix = z.union([z.boolean(), z.string()], { description: @@ -84,6 +98,7 @@ const baseConfiguration = perCommandConfiguration.extend({ target, cssClassPrefix: cssClassPrefix.optional(), svgrComponentName: svgrComponentName.optional(), + svgrDisplayName: svgrDisplayName.optional(), build: perCommandConfiguration.optional(), watch: perCommandConfiguration.optional(), diff --git a/src/plugins/svgPlugin/applyComponentName.ts b/src/plugins/svgPlugin/applyComponentName.ts index e56ad59..03c9213 100644 --- a/src/plugins/svgPlugin/applyComponentName.ts +++ b/src/plugins/svgPlugin/applyComponentName.ts @@ -1,10 +1,12 @@ import { Template } from '@svgr/babel-plugin-transform-svg-component'; +import { SVGRComponentNameFn } from '../../types'; + type Variables = Template extends (variables: infer V, ...args: never[]) => unknown ? V : never; type Options = { memo: boolean; - transformName?: (name: string) => string; + transformName?: SVGRComponentNameFn; }; function applyComponentNameNotMemoized(variables: Variables, name: string) { diff --git a/src/plugins/svgPlugin/buildDisplayName.ts b/src/plugins/svgPlugin/buildDisplayName.ts new file mode 100644 index 0000000..bb88201 --- /dev/null +++ b/src/plugins/svgPlugin/buildDisplayName.ts @@ -0,0 +1,46 @@ +import * as t from '@babel/types'; + +import { SVGRDisplayNameFn } from '../../types'; + +type Options = { + memo: boolean; + transformDisplayName?: SVGRDisplayNameFn; +}; + +export function buildDisplayName( + name: string, + { memo, transformDisplayName }: Options, +): t.ExpressionStatement | t.IfStatement | null { + if (transformDisplayName == null) { + return null; + } + + const displayNameConfig = transformDisplayName(name); + + const [displayName, isDebugOnly] = + typeof displayNameConfig === 'string' + ? [displayNameConfig, false] + : [displayNameConfig.displayName, displayNameConfig.isDebugOnly ?? false]; + + const assignment = t.expressionStatement( + t.assignmentExpression( + '=', + t.memberExpression(t.identifier(memo ? 'Memo' : name), t.identifier('displayName')), + t.stringLiteral(displayName), + ), + ); + + if (!isDebugOnly) { + return assignment; + } + + const flag = t.memberExpression( + t.memberExpression( + t.metaProperty(t.identifier('import'), t.identifier('meta')), + t.identifier('env'), + ), + t.identifier('DEV'), + ); + + return t.ifStatement(flag, t.blockStatement([assignment])); +} diff --git a/src/plugins/svgPlugin/svgPlugin.ts b/src/plugins/svgPlugin/svgPlugin.ts index 67cafce..23fa664 100644 --- a/src/plugins/svgPlugin/svgPlugin.ts +++ b/src/plugins/svgPlugin/svgPlugin.ts @@ -7,9 +7,12 @@ import { cosmiconfig } from 'cosmiconfig'; import { Plugin } from 'esbuild'; import { optimize } from 'svgo'; +import { SVGRComponentNameFn, SVGRDisplayNameFn } from '../../types'; + import { getOriginalPath, isVanillaCss } from '../vanillaExtractPlugin'; import { applyComponentName } from './applyComponentName'; +import { buildDisplayName } from './buildDisplayName'; type PluginData = { path: string; @@ -18,10 +21,11 @@ type PluginData = { const svgrSuffix = '?svgr'; type Options = { - svgrComponentName?: (componentName: string) => string; + svgrComponentName?: SVGRComponentNameFn; + svgrDisplayName?: SVGRDisplayNameFn; }; -export function svgPlugin({ svgrComponentName }: Options): Plugin { +export function svgPlugin({ svgrComponentName, svgrDisplayName }: Options): Plugin { return { name: 'svg-plugin', @@ -44,6 +48,11 @@ export function svgPlugin({ svgrComponentName }: Options): Plugin { template(variables, { tpl }) { applyComponentName(variables, { memo, transformName: svgrComponentName }); + const displayName = buildDisplayName(variables.componentName, { + memo, + transformDisplayName: svgrDisplayName, + }); + return tpl` ${variables.imports}; @@ -54,6 +63,8 @@ export function svgPlugin({ svgrComponentName }: Options): Plugin { ); ${variables.exports}; + + ${displayName} `; }, svgo: minify, diff --git a/src/types.ts b/src/types.ts index 2761373..355559a 100644 --- a/src/types.ts +++ b/src/types.ts @@ -13,3 +13,9 @@ export type Hook = command: string; cwd?: string; }; + +export type SVGRComponentNameFn = (componentName: string) => string; + +export type SVGRDisplayNameFn = ( + componentName: string, +) => { isDebugOnly?: boolean; displayName: string } | string; diff --git a/tests/__snapshots__/browser.test.ts.snap b/tests/__snapshots__/browser.test.ts.snap index d80c789..2ce7304 100644 --- a/tests/__snapshots__/browser.test.ts.snap +++ b/tests/__snapshots__/browser.test.ts.snap @@ -584,6 +584,1150 @@ export { " `; +exports[`browser > SVG support > displayName > when memoization is disabled > when SVGR defined component name is used > append display name with condition when \`isDebugOnly\` flag is true 1`] = ` +"import "./index.css"; + +// src/Button.module.css +var Button_default = { + "root": "browser_svgr_display_name_debug_true__src-Button-module__root", + "label": "browser_svgr_display_name_debug_true__src-Button-module__label" +}; + +// src/assets/js.svg +var js_default = "./assets/js.svg"; + +// src/assets/js.svg?svgr +import * as React from "react"; +import { jsxDEV } from "react/jsx-dev-runtime"; +var js_default2 = js_default; +var SvgJs = (props) => /* @__PURE__ */ jsxDEV("svg", { id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", width: "120px", height: "120px", viewBox: "0 0 120 120", enableBackground: "new 0 0 120 120", xmlSpace: "preserve", ...props, children: [ + /* @__PURE__ */ jsxDEV("circle", { cx: 60, cy: 60.583, r: 14.409 }, void 0, false, { + fileName: "src/assets/js.svg?svgr", + lineNumber: 4, + columnNumber: 252 + }), + /* @__PURE__ */ jsxDEV("text", { children: "\\n JS\\n " }, void 0, false, { + fileName: "src/assets/js.svg?svgr", + lineNumber: 4, + columnNumber: 293 + }) +] }, void 0, true, { + fileName: "src/assets/js.svg?svgr", + lineNumber: 4, + columnNumber: 24 +}); +if (import.meta.env.DEV) { + SvgJs.displayName = "forge(SvgJsDisplayName)"; +} + +// src/assets/shared.svg?svgr +import * as React2 from "react"; +import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime"; +var SvgShared = (props) => /* @__PURE__ */ jsxDEV2("svg", { id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", width: "120px", height: "120px", viewBox: "0 0 120 120", enableBackground: "new 0 0 120 120", xmlSpace: "preserve", ...props, children: [ + /* @__PURE__ */ jsxDEV2("circle", { cx: 60, cy: 60.583, r: 14.409 }, void 0, false, { + fileName: "src/assets/shared.svg?svgr", + lineNumber: 4, + columnNumber: 256 + }), + /* @__PURE__ */ jsxDEV2("text", { children: "\\n Shared\\n " }, void 0, false, { + fileName: "src/assets/shared.svg?svgr", + lineNumber: 4, + columnNumber: 297 + }) +] }, void 0, true, { + fileName: "src/assets/shared.svg?svgr", + lineNumber: 4, + columnNumber: 28 +}); +if (import.meta.env.DEV) { + SvgShared.displayName = "forge(SvgSharedDisplayName)"; +} + +// src/Button.tsx +import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime"; +var Button = ({ children, onClick }) => /* @__PURE__ */ jsxDEV3("button", { className: Button_default.root, onClick, type: "button", children: [ + /* @__PURE__ */ jsxDEV3("img", { src: js_default2 }, void 0, false, { + fileName: "src/Button.tsx", + lineNumber: 14, + columnNumber: 5 + }), + /* @__PURE__ */ jsxDEV3(SvgJs, {}, void 0, false, { + fileName: "src/Button.tsx", + lineNumber: 15, + columnNumber: 5 + }), + /* @__PURE__ */ jsxDEV3("span", { className: Button_default.label, children: [ + /* @__PURE__ */ jsxDEV3(SvgShared, {}, void 0, false, { + fileName: "src/Button.tsx", + lineNumber: 17, + columnNumber: 7 + }), + children + ] }, void 0, true, { + fileName: "src/Button.tsx", + lineNumber: 16, + columnNumber: 5 + }) +] }, void 0, true, { + fileName: "src/Button.tsx", + lineNumber: 13, + columnNumber: 3 +}); +export { + Button +}; +//# sourceMappingURL=index.js.map +" +`; + +exports[`browser > SVG support > displayName > when memoization is disabled > when SVGR defined component name is used > append display name without condition when \`isDebugOnly\` flag is false 1`] = ` +"import "./index.css"; + +// src/Button.module.css +var Button_default = { + "root": "browser_svgr_display_name_debug_false__src-Button-module__root", + "label": "browser_svgr_display_name_debug_false__src-Button-module__label" +}; + +// src/assets/js.svg +var js_default = "./assets/js.svg"; + +// src/assets/js.svg?svgr +import * as React from "react"; +import { jsxDEV } from "react/jsx-dev-runtime"; +var js_default2 = js_default; +var SvgJs = (props) => /* @__PURE__ */ jsxDEV("svg", { id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", width: "120px", height: "120px", viewBox: "0 0 120 120", enableBackground: "new 0 0 120 120", xmlSpace: "preserve", ...props, children: [ + /* @__PURE__ */ jsxDEV("circle", { cx: 60, cy: 60.583, r: 14.409 }, void 0, false, { + fileName: "src/assets/js.svg?svgr", + lineNumber: 4, + columnNumber: 252 + }), + /* @__PURE__ */ jsxDEV("text", { children: "\\n JS\\n " }, void 0, false, { + fileName: "src/assets/js.svg?svgr", + lineNumber: 4, + columnNumber: 293 + }) +] }, void 0, true, { + fileName: "src/assets/js.svg?svgr", + lineNumber: 4, + columnNumber: 24 +}); +SvgJs.displayName = "forge(SvgJsDisplayName)"; + +// src/assets/shared.svg?svgr +import * as React2 from "react"; +import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime"; +var SvgShared = (props) => /* @__PURE__ */ jsxDEV2("svg", { id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", width: "120px", height: "120px", viewBox: "0 0 120 120", enableBackground: "new 0 0 120 120", xmlSpace: "preserve", ...props, children: [ + /* @__PURE__ */ jsxDEV2("circle", { cx: 60, cy: 60.583, r: 14.409 }, void 0, false, { + fileName: "src/assets/shared.svg?svgr", + lineNumber: 4, + columnNumber: 256 + }), + /* @__PURE__ */ jsxDEV2("text", { children: "\\n Shared\\n " }, void 0, false, { + fileName: "src/assets/shared.svg?svgr", + lineNumber: 4, + columnNumber: 297 + }) +] }, void 0, true, { + fileName: "src/assets/shared.svg?svgr", + lineNumber: 4, + columnNumber: 28 +}); +SvgShared.displayName = "forge(SvgSharedDisplayName)"; + +// src/Button.tsx +import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime"; +var Button = ({ children, onClick }) => /* @__PURE__ */ jsxDEV3("button", { className: Button_default.root, onClick, type: "button", children: [ + /* @__PURE__ */ jsxDEV3("img", { src: js_default2 }, void 0, false, { + fileName: "src/Button.tsx", + lineNumber: 14, + columnNumber: 5 + }), + /* @__PURE__ */ jsxDEV3(SvgJs, {}, void 0, false, { + fileName: "src/Button.tsx", + lineNumber: 15, + columnNumber: 5 + }), + /* @__PURE__ */ jsxDEV3("span", { className: Button_default.label, children: [ + /* @__PURE__ */ jsxDEV3(SvgShared, {}, void 0, false, { + fileName: "src/Button.tsx", + lineNumber: 17, + columnNumber: 7 + }), + children + ] }, void 0, true, { + fileName: "src/Button.tsx", + lineNumber: 16, + columnNumber: 5 + }) +] }, void 0, true, { + fileName: "src/Button.tsx", + lineNumber: 13, + columnNumber: 3 +}); +export { + Button +}; +//# sourceMappingURL=index.js.map +" +`; + +exports[`browser > SVG support > displayName > when memoization is disabled > when SVGR defined component name is used > append display name without condition when plain string is returned 1`] = ` +"import "./index.css"; + +// src/Button.module.css +var Button_default = { + "root": "browser_svgr_display_name_string__src-Button-module__root", + "label": "browser_svgr_display_name_string__src-Button-module__label" +}; + +// src/assets/js.svg +var js_default = "./assets/js.svg"; + +// src/assets/js.svg?svgr +import * as React from "react"; +import { jsxDEV } from "react/jsx-dev-runtime"; +var js_default2 = js_default; +var SvgJs = (props) => /* @__PURE__ */ jsxDEV("svg", { id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", width: "120px", height: "120px", viewBox: "0 0 120 120", enableBackground: "new 0 0 120 120", xmlSpace: "preserve", ...props, children: [ + /* @__PURE__ */ jsxDEV("circle", { cx: 60, cy: 60.583, r: 14.409 }, void 0, false, { + fileName: "src/assets/js.svg?svgr", + lineNumber: 4, + columnNumber: 252 + }), + /* @__PURE__ */ jsxDEV("text", { children: "\\n JS\\n " }, void 0, false, { + fileName: "src/assets/js.svg?svgr", + lineNumber: 4, + columnNumber: 293 + }) +] }, void 0, true, { + fileName: "src/assets/js.svg?svgr", + lineNumber: 4, + columnNumber: 24 +}); +SvgJs.displayName = "forge(SvgJsDisplayName)"; + +// src/assets/shared.svg?svgr +import * as React2 from "react"; +import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime"; +var SvgShared = (props) => /* @__PURE__ */ jsxDEV2("svg", { id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", width: "120px", height: "120px", viewBox: "0 0 120 120", enableBackground: "new 0 0 120 120", xmlSpace: "preserve", ...props, children: [ + /* @__PURE__ */ jsxDEV2("circle", { cx: 60, cy: 60.583, r: 14.409 }, void 0, false, { + fileName: "src/assets/shared.svg?svgr", + lineNumber: 4, + columnNumber: 256 + }), + /* @__PURE__ */ jsxDEV2("text", { children: "\\n Shared\\n " }, void 0, false, { + fileName: "src/assets/shared.svg?svgr", + lineNumber: 4, + columnNumber: 297 + }) +] }, void 0, true, { + fileName: "src/assets/shared.svg?svgr", + lineNumber: 4, + columnNumber: 28 +}); +SvgShared.displayName = "forge(SvgSharedDisplayName)"; + +// src/Button.tsx +import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime"; +var Button = ({ children, onClick }) => /* @__PURE__ */ jsxDEV3("button", { className: Button_default.root, onClick, type: "button", children: [ + /* @__PURE__ */ jsxDEV3("img", { src: js_default2 }, void 0, false, { + fileName: "src/Button.tsx", + lineNumber: 14, + columnNumber: 5 + }), + /* @__PURE__ */ jsxDEV3(SvgJs, {}, void 0, false, { + fileName: "src/Button.tsx", + lineNumber: 15, + columnNumber: 5 + }), + /* @__PURE__ */ jsxDEV3("span", { className: Button_default.label, children: [ + /* @__PURE__ */ jsxDEV3(SvgShared, {}, void 0, false, { + fileName: "src/Button.tsx", + lineNumber: 17, + columnNumber: 7 + }), + children + ] }, void 0, true, { + fileName: "src/Button.tsx", + lineNumber: 16, + columnNumber: 5 + }) +] }, void 0, true, { + fileName: "src/Button.tsx", + lineNumber: 13, + columnNumber: 3 +}); +export { + Button +}; +//# sourceMappingURL=index.js.map +" +`; + +exports[`browser > SVG support > displayName > when memoization is disabled > when user defined component name is used > append display name with condition when \`isDebugOnly\` flag is true 1`] = ` +"import "./index.css"; + +// src/Button.module.css +var Button_default = { + "root": "browser_svgr_display_name_user_name_debug_true__src-Button-module__root", + "label": "browser_svgr_display_name_user_name_debug_true__src-Button-module__label" +}; + +// src/assets/js.svg +var js_default = "./assets/js.svg"; + +// src/assets/js.svg?svgr +import * as React from "react"; +import { jsxDEV } from "react/jsx-dev-runtime"; +var js_default2 = js_default; +var UiJsIcon = (props) => /* @__PURE__ */ jsxDEV("svg", { id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", width: "120px", height: "120px", viewBox: "0 0 120 120", enableBackground: "new 0 0 120 120", xmlSpace: "preserve", ...props, children: [ + /* @__PURE__ */ jsxDEV("circle", { cx: 60, cy: 60.583, r: 14.409 }, void 0, false, { + fileName: "src/assets/js.svg?svgr", + lineNumber: 4, + columnNumber: 255 + }), + /* @__PURE__ */ jsxDEV("text", { children: "\\n JS\\n " }, void 0, false, { + fileName: "src/assets/js.svg?svgr", + lineNumber: 4, + columnNumber: 296 + }) +] }, void 0, true, { + fileName: "src/assets/js.svg?svgr", + lineNumber: 4, + columnNumber: 27 +}); +if (import.meta.env.DEV) { + UiJsIcon.displayName = "forge(UiJsIconDisplayName)"; +} + +// src/assets/shared.svg?svgr +import * as React2 from "react"; +import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime"; +var UiSharedIcon = (props) => /* @__PURE__ */ jsxDEV2("svg", { id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", width: "120px", height: "120px", viewBox: "0 0 120 120", enableBackground: "new 0 0 120 120", xmlSpace: "preserve", ...props, children: [ + /* @__PURE__ */ jsxDEV2("circle", { cx: 60, cy: 60.583, r: 14.409 }, void 0, false, { + fileName: "src/assets/shared.svg?svgr", + lineNumber: 4, + columnNumber: 259 + }), + /* @__PURE__ */ jsxDEV2("text", { children: "\\n Shared\\n " }, void 0, false, { + fileName: "src/assets/shared.svg?svgr", + lineNumber: 4, + columnNumber: 300 + }) +] }, void 0, true, { + fileName: "src/assets/shared.svg?svgr", + lineNumber: 4, + columnNumber: 31 +}); +if (import.meta.env.DEV) { + UiSharedIcon.displayName = "forge(UiSharedIconDisplayName)"; +} + +// src/Button.tsx +import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime"; +var Button = ({ children, onClick }) => /* @__PURE__ */ jsxDEV3("button", { className: Button_default.root, onClick, type: "button", children: [ + /* @__PURE__ */ jsxDEV3("img", { src: js_default2 }, void 0, false, { + fileName: "src/Button.tsx", + lineNumber: 14, + columnNumber: 5 + }), + /* @__PURE__ */ jsxDEV3(UiJsIcon, {}, void 0, false, { + fileName: "src/Button.tsx", + lineNumber: 15, + columnNumber: 5 + }), + /* @__PURE__ */ jsxDEV3("span", { className: Button_default.label, children: [ + /* @__PURE__ */ jsxDEV3(UiSharedIcon, {}, void 0, false, { + fileName: "src/Button.tsx", + lineNumber: 17, + columnNumber: 7 + }), + children + ] }, void 0, true, { + fileName: "src/Button.tsx", + lineNumber: 16, + columnNumber: 5 + }) +] }, void 0, true, { + fileName: "src/Button.tsx", + lineNumber: 13, + columnNumber: 3 +}); +export { + Button +}; +//# sourceMappingURL=index.js.map +" +`; + +exports[`browser > SVG support > displayName > when memoization is disabled > when user defined component name is used > append display name without condition when \`isDebugOnly\` flag is false 1`] = ` +"import "./index.css"; + +// src/Button.module.css +var Button_default = { + "root": "browser_svgr_display_name_user_name_debug_false__src-Button-module__root", + "label": "browser_svgr_display_name_user_name_debug_false__src-Button-module__label" +}; + +// src/assets/js.svg +var js_default = "./assets/js.svg"; + +// src/assets/js.svg?svgr +import * as React from "react"; +import { jsxDEV } from "react/jsx-dev-runtime"; +var js_default2 = js_default; +var UiJsIcon = (props) => /* @__PURE__ */ jsxDEV("svg", { id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", width: "120px", height: "120px", viewBox: "0 0 120 120", enableBackground: "new 0 0 120 120", xmlSpace: "preserve", ...props, children: [ + /* @__PURE__ */ jsxDEV("circle", { cx: 60, cy: 60.583, r: 14.409 }, void 0, false, { + fileName: "src/assets/js.svg?svgr", + lineNumber: 4, + columnNumber: 255 + }), + /* @__PURE__ */ jsxDEV("text", { children: "\\n JS\\n " }, void 0, false, { + fileName: "src/assets/js.svg?svgr", + lineNumber: 4, + columnNumber: 296 + }) +] }, void 0, true, { + fileName: "src/assets/js.svg?svgr", + lineNumber: 4, + columnNumber: 27 +}); +UiJsIcon.displayName = "forge(UiJsIconDisplayName)"; + +// src/assets/shared.svg?svgr +import * as React2 from "react"; +import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime"; +var UiSharedIcon = (props) => /* @__PURE__ */ jsxDEV2("svg", { id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", width: "120px", height: "120px", viewBox: "0 0 120 120", enableBackground: "new 0 0 120 120", xmlSpace: "preserve", ...props, children: [ + /* @__PURE__ */ jsxDEV2("circle", { cx: 60, cy: 60.583, r: 14.409 }, void 0, false, { + fileName: "src/assets/shared.svg?svgr", + lineNumber: 4, + columnNumber: 259 + }), + /* @__PURE__ */ jsxDEV2("text", { children: "\\n Shared\\n " }, void 0, false, { + fileName: "src/assets/shared.svg?svgr", + lineNumber: 4, + columnNumber: 300 + }) +] }, void 0, true, { + fileName: "src/assets/shared.svg?svgr", + lineNumber: 4, + columnNumber: 31 +}); +UiSharedIcon.displayName = "forge(UiSharedIconDisplayName)"; + +// src/Button.tsx +import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime"; +var Button = ({ children, onClick }) => /* @__PURE__ */ jsxDEV3("button", { className: Button_default.root, onClick, type: "button", children: [ + /* @__PURE__ */ jsxDEV3("img", { src: js_default2 }, void 0, false, { + fileName: "src/Button.tsx", + lineNumber: 14, + columnNumber: 5 + }), + /* @__PURE__ */ jsxDEV3(UiJsIcon, {}, void 0, false, { + fileName: "src/Button.tsx", + lineNumber: 15, + columnNumber: 5 + }), + /* @__PURE__ */ jsxDEV3("span", { className: Button_default.label, children: [ + /* @__PURE__ */ jsxDEV3(UiSharedIcon, {}, void 0, false, { + fileName: "src/Button.tsx", + lineNumber: 17, + columnNumber: 7 + }), + children + ] }, void 0, true, { + fileName: "src/Button.tsx", + lineNumber: 16, + columnNumber: 5 + }) +] }, void 0, true, { + fileName: "src/Button.tsx", + lineNumber: 13, + columnNumber: 3 +}); +export { + Button +}; +//# sourceMappingURL=index.js.map +" +`; + +exports[`browser > SVG support > displayName > when memoization is disabled > when user defined component name is used > append display name without condition when plain string is returned 1`] = ` +"import "./index.css"; + +// src/Button.module.css +var Button_default = { + "root": "browser_svgr_display_name_user_name_string__src-Button-module__root", + "label": "browser_svgr_display_name_user_name_string__src-Button-module__label" +}; + +// src/assets/js.svg +var js_default = "./assets/js.svg"; + +// src/assets/js.svg?svgr +import * as React from "react"; +import { jsxDEV } from "react/jsx-dev-runtime"; +var js_default2 = js_default; +var UiJsIcon = (props) => /* @__PURE__ */ jsxDEV("svg", { id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", width: "120px", height: "120px", viewBox: "0 0 120 120", enableBackground: "new 0 0 120 120", xmlSpace: "preserve", ...props, children: [ + /* @__PURE__ */ jsxDEV("circle", { cx: 60, cy: 60.583, r: 14.409 }, void 0, false, { + fileName: "src/assets/js.svg?svgr", + lineNumber: 4, + columnNumber: 255 + }), + /* @__PURE__ */ jsxDEV("text", { children: "\\n JS\\n " }, void 0, false, { + fileName: "src/assets/js.svg?svgr", + lineNumber: 4, + columnNumber: 296 + }) +] }, void 0, true, { + fileName: "src/assets/js.svg?svgr", + lineNumber: 4, + columnNumber: 27 +}); +UiJsIcon.displayName = "forge(UiJsIconDisplayName)"; + +// src/assets/shared.svg?svgr +import * as React2 from "react"; +import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime"; +var UiSharedIcon = (props) => /* @__PURE__ */ jsxDEV2("svg", { id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", width: "120px", height: "120px", viewBox: "0 0 120 120", enableBackground: "new 0 0 120 120", xmlSpace: "preserve", ...props, children: [ + /* @__PURE__ */ jsxDEV2("circle", { cx: 60, cy: 60.583, r: 14.409 }, void 0, false, { + fileName: "src/assets/shared.svg?svgr", + lineNumber: 4, + columnNumber: 259 + }), + /* @__PURE__ */ jsxDEV2("text", { children: "\\n Shared\\n " }, void 0, false, { + fileName: "src/assets/shared.svg?svgr", + lineNumber: 4, + columnNumber: 300 + }) +] }, void 0, true, { + fileName: "src/assets/shared.svg?svgr", + lineNumber: 4, + columnNumber: 31 +}); +UiSharedIcon.displayName = "forge(UiSharedIconDisplayName)"; + +// src/Button.tsx +import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime"; +var Button = ({ children, onClick }) => /* @__PURE__ */ jsxDEV3("button", { className: Button_default.root, onClick, type: "button", children: [ + /* @__PURE__ */ jsxDEV3("img", { src: js_default2 }, void 0, false, { + fileName: "src/Button.tsx", + lineNumber: 14, + columnNumber: 5 + }), + /* @__PURE__ */ jsxDEV3(UiJsIcon, {}, void 0, false, { + fileName: "src/Button.tsx", + lineNumber: 15, + columnNumber: 5 + }), + /* @__PURE__ */ jsxDEV3("span", { className: Button_default.label, children: [ + /* @__PURE__ */ jsxDEV3(UiSharedIcon, {}, void 0, false, { + fileName: "src/Button.tsx", + lineNumber: 17, + columnNumber: 7 + }), + children + ] }, void 0, true, { + fileName: "src/Button.tsx", + lineNumber: 16, + columnNumber: 5 + }) +] }, void 0, true, { + fileName: "src/Button.tsx", + lineNumber: 13, + columnNumber: 3 +}); +export { + Button +}; +//# sourceMappingURL=index.js.map +" +`; + +exports[`browser > SVG support > displayName > when memoization is enabled > when SVGR defined component name is used > append display name with condition when \`isDebugOnly\` flag is true 1`] = ` +"import "./index.css"; + +// src/Button.module.css +var Button_default = { + "root": "browser_svgr_display_name_memo_debug_true__src-Button-module__root", + "label": "browser_svgr_display_name_memo_debug_true__src-Button-module__label" +}; + +// src/assets/js.svg +var js_default = "./assets/js.svg"; + +// src/assets/js.svg?svgr +import * as React from "react"; +import { memo } from "react"; +import { jsxDEV } from "react/jsx-dev-runtime"; +var js_default2 = js_default; +var SvgJs = (props) => /* @__PURE__ */ jsxDEV("svg", { id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", width: "120px", height: "120px", viewBox: "0 0 120 120", enableBackground: "new 0 0 120 120", xmlSpace: "preserve", ...props, children: [ + /* @__PURE__ */ jsxDEV("circle", { cx: 60, cy: 60.583, r: 14.409 }, void 0, false, { + fileName: "src/assets/js.svg?svgr", + lineNumber: 5, + columnNumber: 252 + }), + /* @__PURE__ */ jsxDEV("text", { children: "\\n JS\\n " }, void 0, false, { + fileName: "src/assets/js.svg?svgr", + lineNumber: 5, + columnNumber: 293 + }) +] }, void 0, true, { + fileName: "src/assets/js.svg?svgr", + lineNumber: 5, + columnNumber: 24 +}); +var Memo = memo(SvgJs); +if (import.meta.env.DEV) { + Memo.displayName = "forge(SvgJsDisplayName)"; +} + +// src/assets/shared.svg?svgr +import * as React2 from "react"; +import { memo as memo2 } from "react"; +import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime"; +var SvgShared = (props) => /* @__PURE__ */ jsxDEV2("svg", { id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", width: "120px", height: "120px", viewBox: "0 0 120 120", enableBackground: "new 0 0 120 120", xmlSpace: "preserve", ...props, children: [ + /* @__PURE__ */ jsxDEV2("circle", { cx: 60, cy: 60.583, r: 14.409 }, void 0, false, { + fileName: "src/assets/shared.svg?svgr", + lineNumber: 5, + columnNumber: 256 + }), + /* @__PURE__ */ jsxDEV2("text", { children: "\\n Shared\\n " }, void 0, false, { + fileName: "src/assets/shared.svg?svgr", + lineNumber: 5, + columnNumber: 297 + }) +] }, void 0, true, { + fileName: "src/assets/shared.svg?svgr", + lineNumber: 5, + columnNumber: 28 +}); +var Memo2 = memo2(SvgShared); +if (import.meta.env.DEV) { + Memo2.displayName = "forge(SvgSharedDisplayName)"; +} + +// src/Button.tsx +import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime"; +var Button = ({ children, onClick }) => /* @__PURE__ */ jsxDEV3("button", { className: Button_default.root, onClick, type: "button", children: [ + /* @__PURE__ */ jsxDEV3("img", { src: js_default2 }, void 0, false, { + fileName: "src/Button.tsx", + lineNumber: 14, + columnNumber: 5 + }), + /* @__PURE__ */ jsxDEV3(Memo, {}, void 0, false, { + fileName: "src/Button.tsx", + lineNumber: 15, + columnNumber: 5 + }), + /* @__PURE__ */ jsxDEV3("span", { className: Button_default.label, children: [ + /* @__PURE__ */ jsxDEV3(Memo2, {}, void 0, false, { + fileName: "src/Button.tsx", + lineNumber: 17, + columnNumber: 7 + }), + children + ] }, void 0, true, { + fileName: "src/Button.tsx", + lineNumber: 16, + columnNumber: 5 + }) +] }, void 0, true, { + fileName: "src/Button.tsx", + lineNumber: 13, + columnNumber: 3 +}); +export { + Button +}; +//# sourceMappingURL=index.js.map +" +`; + +exports[`browser > SVG support > displayName > when memoization is enabled > when SVGR defined component name is used > append display name without condition when \`isDebugOnly\` flag is false 1`] = ` +"import "./index.css"; + +// src/Button.module.css +var Button_default = { + "root": "browser_svgr_display_name_memo_debug_false__src-Button-module__root", + "label": "browser_svgr_display_name_memo_debug_false__src-Button-module__label" +}; + +// src/assets/js.svg +var js_default = "./assets/js.svg"; + +// src/assets/js.svg?svgr +import * as React from "react"; +import { memo } from "react"; +import { jsxDEV } from "react/jsx-dev-runtime"; +var js_default2 = js_default; +var SvgJs = (props) => /* @__PURE__ */ jsxDEV("svg", { id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", width: "120px", height: "120px", viewBox: "0 0 120 120", enableBackground: "new 0 0 120 120", xmlSpace: "preserve", ...props, children: [ + /* @__PURE__ */ jsxDEV("circle", { cx: 60, cy: 60.583, r: 14.409 }, void 0, false, { + fileName: "src/assets/js.svg?svgr", + lineNumber: 5, + columnNumber: 252 + }), + /* @__PURE__ */ jsxDEV("text", { children: "\\n JS\\n " }, void 0, false, { + fileName: "src/assets/js.svg?svgr", + lineNumber: 5, + columnNumber: 293 + }) +] }, void 0, true, { + fileName: "src/assets/js.svg?svgr", + lineNumber: 5, + columnNumber: 24 +}); +var Memo = memo(SvgJs); +Memo.displayName = "forge(SvgJsDisplayName)"; + +// src/assets/shared.svg?svgr +import * as React2 from "react"; +import { memo as memo2 } from "react"; +import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime"; +var SvgShared = (props) => /* @__PURE__ */ jsxDEV2("svg", { id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", width: "120px", height: "120px", viewBox: "0 0 120 120", enableBackground: "new 0 0 120 120", xmlSpace: "preserve", ...props, children: [ + /* @__PURE__ */ jsxDEV2("circle", { cx: 60, cy: 60.583, r: 14.409 }, void 0, false, { + fileName: "src/assets/shared.svg?svgr", + lineNumber: 5, + columnNumber: 256 + }), + /* @__PURE__ */ jsxDEV2("text", { children: "\\n Shared\\n " }, void 0, false, { + fileName: "src/assets/shared.svg?svgr", + lineNumber: 5, + columnNumber: 297 + }) +] }, void 0, true, { + fileName: "src/assets/shared.svg?svgr", + lineNumber: 5, + columnNumber: 28 +}); +var Memo2 = memo2(SvgShared); +Memo2.displayName = "forge(SvgSharedDisplayName)"; + +// src/Button.tsx +import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime"; +var Button = ({ children, onClick }) => /* @__PURE__ */ jsxDEV3("button", { className: Button_default.root, onClick, type: "button", children: [ + /* @__PURE__ */ jsxDEV3("img", { src: js_default2 }, void 0, false, { + fileName: "src/Button.tsx", + lineNumber: 14, + columnNumber: 5 + }), + /* @__PURE__ */ jsxDEV3(Memo, {}, void 0, false, { + fileName: "src/Button.tsx", + lineNumber: 15, + columnNumber: 5 + }), + /* @__PURE__ */ jsxDEV3("span", { className: Button_default.label, children: [ + /* @__PURE__ */ jsxDEV3(Memo2, {}, void 0, false, { + fileName: "src/Button.tsx", + lineNumber: 17, + columnNumber: 7 + }), + children + ] }, void 0, true, { + fileName: "src/Button.tsx", + lineNumber: 16, + columnNumber: 5 + }) +] }, void 0, true, { + fileName: "src/Button.tsx", + lineNumber: 13, + columnNumber: 3 +}); +export { + Button +}; +//# sourceMappingURL=index.js.map +" +`; + +exports[`browser > SVG support > displayName > when memoization is enabled > when SVGR defined component name is used > append display name without condition when plain string is returned 1`] = ` +"import "./index.css"; + +// src/Button.module.css +var Button_default = { + "root": "browser_svgr_display_name_memo_string__src-Button-module__root", + "label": "browser_svgr_display_name_memo_string__src-Button-module__label" +}; + +// src/assets/js.svg +var js_default = "./assets/js.svg"; + +// src/assets/js.svg?svgr +import * as React from "react"; +import { memo } from "react"; +import { jsxDEV } from "react/jsx-dev-runtime"; +var js_default2 = js_default; +var SvgJs = (props) => /* @__PURE__ */ jsxDEV("svg", { id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", width: "120px", height: "120px", viewBox: "0 0 120 120", enableBackground: "new 0 0 120 120", xmlSpace: "preserve", ...props, children: [ + /* @__PURE__ */ jsxDEV("circle", { cx: 60, cy: 60.583, r: 14.409 }, void 0, false, { + fileName: "src/assets/js.svg?svgr", + lineNumber: 5, + columnNumber: 252 + }), + /* @__PURE__ */ jsxDEV("text", { children: "\\n JS\\n " }, void 0, false, { + fileName: "src/assets/js.svg?svgr", + lineNumber: 5, + columnNumber: 293 + }) +] }, void 0, true, { + fileName: "src/assets/js.svg?svgr", + lineNumber: 5, + columnNumber: 24 +}); +var Memo = memo(SvgJs); +Memo.displayName = "forge(SvgJsDisplayName)"; + +// src/assets/shared.svg?svgr +import * as React2 from "react"; +import { memo as memo2 } from "react"; +import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime"; +var SvgShared = (props) => /* @__PURE__ */ jsxDEV2("svg", { id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", width: "120px", height: "120px", viewBox: "0 0 120 120", enableBackground: "new 0 0 120 120", xmlSpace: "preserve", ...props, children: [ + /* @__PURE__ */ jsxDEV2("circle", { cx: 60, cy: 60.583, r: 14.409 }, void 0, false, { + fileName: "src/assets/shared.svg?svgr", + lineNumber: 5, + columnNumber: 256 + }), + /* @__PURE__ */ jsxDEV2("text", { children: "\\n Shared\\n " }, void 0, false, { + fileName: "src/assets/shared.svg?svgr", + lineNumber: 5, + columnNumber: 297 + }) +] }, void 0, true, { + fileName: "src/assets/shared.svg?svgr", + lineNumber: 5, + columnNumber: 28 +}); +var Memo2 = memo2(SvgShared); +Memo2.displayName = "forge(SvgSharedDisplayName)"; + +// src/Button.tsx +import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime"; +var Button = ({ children, onClick }) => /* @__PURE__ */ jsxDEV3("button", { className: Button_default.root, onClick, type: "button", children: [ + /* @__PURE__ */ jsxDEV3("img", { src: js_default2 }, void 0, false, { + fileName: "src/Button.tsx", + lineNumber: 14, + columnNumber: 5 + }), + /* @__PURE__ */ jsxDEV3(Memo, {}, void 0, false, { + fileName: "src/Button.tsx", + lineNumber: 15, + columnNumber: 5 + }), + /* @__PURE__ */ jsxDEV3("span", { className: Button_default.label, children: [ + /* @__PURE__ */ jsxDEV3(Memo2, {}, void 0, false, { + fileName: "src/Button.tsx", + lineNumber: 17, + columnNumber: 7 + }), + children + ] }, void 0, true, { + fileName: "src/Button.tsx", + lineNumber: 16, + columnNumber: 5 + }) +] }, void 0, true, { + fileName: "src/Button.tsx", + lineNumber: 13, + columnNumber: 3 +}); +export { + Button +}; +//# sourceMappingURL=index.js.map +" +`; + +exports[`browser > SVG support > displayName > when memoization is enabled > when user defined component name is used > append display name with condition when \`isDebugOnly\` flag is true 1`] = ` +"import "./index.css"; + +// src/Button.module.css +var Button_default = { + "root": "browser_svgr_display_name_memo_user_name_debug_true__src-Button-module__root", + "label": "browser_svgr_display_name_memo_user_name_debug_true__src-Button-module__label" +}; + +// src/assets/js.svg +var js_default = "./assets/js.svg"; + +// src/assets/js.svg?svgr +import * as React from "react"; +import { memo } from "react"; +import { jsxDEV } from "react/jsx-dev-runtime"; +var js_default2 = js_default; +var UiJsIcon = (props) => /* @__PURE__ */ jsxDEV("svg", { id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", width: "120px", height: "120px", viewBox: "0 0 120 120", enableBackground: "new 0 0 120 120", xmlSpace: "preserve", ...props, children: [ + /* @__PURE__ */ jsxDEV("circle", { cx: 60, cy: 60.583, r: 14.409 }, void 0, false, { + fileName: "src/assets/js.svg?svgr", + lineNumber: 5, + columnNumber: 255 + }), + /* @__PURE__ */ jsxDEV("text", { children: "\\n JS\\n " }, void 0, false, { + fileName: "src/assets/js.svg?svgr", + lineNumber: 5, + columnNumber: 296 + }) +] }, void 0, true, { + fileName: "src/assets/js.svg?svgr", + lineNumber: 5, + columnNumber: 27 +}); +var Memo = memo(UiJsIcon); +if (import.meta.env.DEV) { + Memo.displayName = "forge(UiJsIconDisplayName)"; +} + +// src/assets/shared.svg?svgr +import * as React2 from "react"; +import { memo as memo2 } from "react"; +import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime"; +var UiSharedIcon = (props) => /* @__PURE__ */ jsxDEV2("svg", { id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", width: "120px", height: "120px", viewBox: "0 0 120 120", enableBackground: "new 0 0 120 120", xmlSpace: "preserve", ...props, children: [ + /* @__PURE__ */ jsxDEV2("circle", { cx: 60, cy: 60.583, r: 14.409 }, void 0, false, { + fileName: "src/assets/shared.svg?svgr", + lineNumber: 5, + columnNumber: 259 + }), + /* @__PURE__ */ jsxDEV2("text", { children: "\\n Shared\\n " }, void 0, false, { + fileName: "src/assets/shared.svg?svgr", + lineNumber: 5, + columnNumber: 300 + }) +] }, void 0, true, { + fileName: "src/assets/shared.svg?svgr", + lineNumber: 5, + columnNumber: 31 +}); +var Memo2 = memo2(UiSharedIcon); +if (import.meta.env.DEV) { + Memo2.displayName = "forge(UiSharedIconDisplayName)"; +} + +// src/Button.tsx +import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime"; +var Button = ({ children, onClick }) => /* @__PURE__ */ jsxDEV3("button", { className: Button_default.root, onClick, type: "button", children: [ + /* @__PURE__ */ jsxDEV3("img", { src: js_default2 }, void 0, false, { + fileName: "src/Button.tsx", + lineNumber: 14, + columnNumber: 5 + }), + /* @__PURE__ */ jsxDEV3(Memo, {}, void 0, false, { + fileName: "src/Button.tsx", + lineNumber: 15, + columnNumber: 5 + }), + /* @__PURE__ */ jsxDEV3("span", { className: Button_default.label, children: [ + /* @__PURE__ */ jsxDEV3(Memo2, {}, void 0, false, { + fileName: "src/Button.tsx", + lineNumber: 17, + columnNumber: 7 + }), + children + ] }, void 0, true, { + fileName: "src/Button.tsx", + lineNumber: 16, + columnNumber: 5 + }) +] }, void 0, true, { + fileName: "src/Button.tsx", + lineNumber: 13, + columnNumber: 3 +}); +export { + Button +}; +//# sourceMappingURL=index.js.map +" +`; + +exports[`browser > SVG support > displayName > when memoization is enabled > when user defined component name is used > append display name without condition when \`isDebugOnly\` flag is false 1`] = ` +"import "./index.css"; + +// src/Button.module.css +var Button_default = { + "root": "browser_svgr_display_name_memo_user_name_debug_false__src-Button-module__root", + "label": "browser_svgr_display_name_memo_user_name_debug_false__src-Button-module__label" +}; + +// src/assets/js.svg +var js_default = "./assets/js.svg"; + +// src/assets/js.svg?svgr +import * as React from "react"; +import { memo } from "react"; +import { jsxDEV } from "react/jsx-dev-runtime"; +var js_default2 = js_default; +var UiJsIcon = (props) => /* @__PURE__ */ jsxDEV("svg", { id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", width: "120px", height: "120px", viewBox: "0 0 120 120", enableBackground: "new 0 0 120 120", xmlSpace: "preserve", ...props, children: [ + /* @__PURE__ */ jsxDEV("circle", { cx: 60, cy: 60.583, r: 14.409 }, void 0, false, { + fileName: "src/assets/js.svg?svgr", + lineNumber: 5, + columnNumber: 255 + }), + /* @__PURE__ */ jsxDEV("text", { children: "\\n JS\\n " }, void 0, false, { + fileName: "src/assets/js.svg?svgr", + lineNumber: 5, + columnNumber: 296 + }) +] }, void 0, true, { + fileName: "src/assets/js.svg?svgr", + lineNumber: 5, + columnNumber: 27 +}); +var Memo = memo(UiJsIcon); +Memo.displayName = "forge(UiJsIconDisplayName)"; + +// src/assets/shared.svg?svgr +import * as React2 from "react"; +import { memo as memo2 } from "react"; +import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime"; +var UiSharedIcon = (props) => /* @__PURE__ */ jsxDEV2("svg", { id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", width: "120px", height: "120px", viewBox: "0 0 120 120", enableBackground: "new 0 0 120 120", xmlSpace: "preserve", ...props, children: [ + /* @__PURE__ */ jsxDEV2("circle", { cx: 60, cy: 60.583, r: 14.409 }, void 0, false, { + fileName: "src/assets/shared.svg?svgr", + lineNumber: 5, + columnNumber: 259 + }), + /* @__PURE__ */ jsxDEV2("text", { children: "\\n Shared\\n " }, void 0, false, { + fileName: "src/assets/shared.svg?svgr", + lineNumber: 5, + columnNumber: 300 + }) +] }, void 0, true, { + fileName: "src/assets/shared.svg?svgr", + lineNumber: 5, + columnNumber: 31 +}); +var Memo2 = memo2(UiSharedIcon); +Memo2.displayName = "forge(UiSharedIconDisplayName)"; + +// src/Button.tsx +import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime"; +var Button = ({ children, onClick }) => /* @__PURE__ */ jsxDEV3("button", { className: Button_default.root, onClick, type: "button", children: [ + /* @__PURE__ */ jsxDEV3("img", { src: js_default2 }, void 0, false, { + fileName: "src/Button.tsx", + lineNumber: 14, + columnNumber: 5 + }), + /* @__PURE__ */ jsxDEV3(Memo, {}, void 0, false, { + fileName: "src/Button.tsx", + lineNumber: 15, + columnNumber: 5 + }), + /* @__PURE__ */ jsxDEV3("span", { className: Button_default.label, children: [ + /* @__PURE__ */ jsxDEV3(Memo2, {}, void 0, false, { + fileName: "src/Button.tsx", + lineNumber: 17, + columnNumber: 7 + }), + children + ] }, void 0, true, { + fileName: "src/Button.tsx", + lineNumber: 16, + columnNumber: 5 + }) +] }, void 0, true, { + fileName: "src/Button.tsx", + lineNumber: 13, + columnNumber: 3 +}); +export { + Button +}; +//# sourceMappingURL=index.js.map +" +`; + +exports[`browser > SVG support > displayName > when memoization is enabled > when user defined component name is used > append display name without condition when plain string is returned 1`] = ` +"import "./index.css"; + +// src/Button.module.css +var Button_default = { + "root": "browser_svgr_display_name_memo_user_name_string__src-Button-module__root", + "label": "browser_svgr_display_name_memo_user_name_string__src-Button-module__label" +}; + +// src/assets/js.svg +var js_default = "./assets/js.svg"; + +// src/assets/js.svg?svgr +import * as React from "react"; +import { memo } from "react"; +import { jsxDEV } from "react/jsx-dev-runtime"; +var js_default2 = js_default; +var UiJsIcon = (props) => /* @__PURE__ */ jsxDEV("svg", { id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", width: "120px", height: "120px", viewBox: "0 0 120 120", enableBackground: "new 0 0 120 120", xmlSpace: "preserve", ...props, children: [ + /* @__PURE__ */ jsxDEV("circle", { cx: 60, cy: 60.583, r: 14.409 }, void 0, false, { + fileName: "src/assets/js.svg?svgr", + lineNumber: 5, + columnNumber: 255 + }), + /* @__PURE__ */ jsxDEV("text", { children: "\\n JS\\n " }, void 0, false, { + fileName: "src/assets/js.svg?svgr", + lineNumber: 5, + columnNumber: 296 + }) +] }, void 0, true, { + fileName: "src/assets/js.svg?svgr", + lineNumber: 5, + columnNumber: 27 +}); +var Memo = memo(UiJsIcon); +Memo.displayName = "forge(UiJsIconDisplayName)"; + +// src/assets/shared.svg?svgr +import * as React2 from "react"; +import { memo as memo2 } from "react"; +import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime"; +var UiSharedIcon = (props) => /* @__PURE__ */ jsxDEV2("svg", { id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", width: "120px", height: "120px", viewBox: "0 0 120 120", enableBackground: "new 0 0 120 120", xmlSpace: "preserve", ...props, children: [ + /* @__PURE__ */ jsxDEV2("circle", { cx: 60, cy: 60.583, r: 14.409 }, void 0, false, { + fileName: "src/assets/shared.svg?svgr", + lineNumber: 5, + columnNumber: 259 + }), + /* @__PURE__ */ jsxDEV2("text", { children: "\\n Shared\\n " }, void 0, false, { + fileName: "src/assets/shared.svg?svgr", + lineNumber: 5, + columnNumber: 300 + }) +] }, void 0, true, { + fileName: "src/assets/shared.svg?svgr", + lineNumber: 5, + columnNumber: 31 +}); +var Memo2 = memo2(UiSharedIcon); +Memo2.displayName = "forge(UiSharedIconDisplayName)"; + +// src/Button.tsx +import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime"; +var Button = ({ children, onClick }) => /* @__PURE__ */ jsxDEV3("button", { className: Button_default.root, onClick, type: "button", children: [ + /* @__PURE__ */ jsxDEV3("img", { src: js_default2 }, void 0, false, { + fileName: "src/Button.tsx", + lineNumber: 14, + columnNumber: 5 + }), + /* @__PURE__ */ jsxDEV3(Memo, {}, void 0, false, { + fileName: "src/Button.tsx", + lineNumber: 15, + columnNumber: 5 + }), + /* @__PURE__ */ jsxDEV3("span", { className: Button_default.label, children: [ + /* @__PURE__ */ jsxDEV3(Memo2, {}, void 0, false, { + fileName: "src/Button.tsx", + lineNumber: 17, + columnNumber: 7 + }), + children + ] }, void 0, true, { + fileName: "src/Button.tsx", + lineNumber: 16, + columnNumber: 5 + }) +] }, void 0, true, { + fileName: "src/Button.tsx", + lineNumber: 13, + columnNumber: 3 +}); +export { + Button +}; +//# sourceMappingURL=index.js.map +" +`; + exports[`browser > SVG support > minify SVG when production mode is on 1`] = ` " diff --git a/tests/browser.test.ts b/tests/browser.test.ts index ab3720c..643d142 100644 --- a/tests/browser.test.ts +++ b/tests/browser.test.ts @@ -720,6 +720,188 @@ describe('browser', () => { ); }); + describe('displayName', () => { + describe('when memoization is enabled', () => { + describe('when SVGR defined component name is used', () => { + it( + 'append display name without condition when `isDebugOnly` flag is false', + { + command: 'build', + dependencies: ['@types/react'], + name: 'browser-svgr-display-name-memo-debug-false', + target: 'browser', + production: false, + }, + async (c) => { + expect(await c.read('lib/index.js')).toMatchSnapshot(); + }, + ); + + it( + 'append display name with condition when `isDebugOnly` flag is true', + { + command: 'build', + dependencies: ['@types/react'], + name: 'browser-svgr-display-name-memo-debug-true', + target: 'browser', + production: false, + }, + async (c) => { + expect(await c.read('lib/index.js')).toMatchSnapshot(); + }, + ); + + it( + 'append display name without condition when plain string is returned', + { + command: 'build', + dependencies: ['@types/react'], + name: 'browser-svgr-display-name-memo-string', + target: 'browser', + production: false, + }, + async (c) => { + expect(await c.read('lib/index.js')).toMatchSnapshot(); + }, + ); + }); + + describe('when user defined component name is used', () => { + it( + 'append display name without condition when `isDebugOnly` flag is false', + { + command: 'build', + dependencies: ['@types/react'], + name: 'browser-svgr-display-name-memo-user-name-debug-false', + target: 'browser', + production: false, + }, + async (c) => { + expect(await c.read('lib/index.js')).toMatchSnapshot(); + }, + ); + + it( + 'append display name with condition when `isDebugOnly` flag is true', + { + command: 'build', + dependencies: ['@types/react'], + name: 'browser-svgr-display-name-memo-user-name-debug-true', + target: 'browser', + production: false, + }, + async (c) => { + expect(await c.read('lib/index.js')).toMatchSnapshot(); + }, + ); + + it( + 'append display name without condition when plain string is returned', + { + command: 'build', + dependencies: ['@types/react'], + name: 'browser-svgr-display-name-memo-user-name-string', + target: 'browser', + production: false, + }, + async (c) => { + expect(await c.read('lib/index.js')).toMatchSnapshot(); + }, + ); + }); + }); + + describe('when memoization is disabled', () => { + describe('when SVGR defined component name is used', () => { + it( + 'append display name without condition when `isDebugOnly` flag is false', + { + command: 'build', + dependencies: ['@types/react'], + name: 'browser-svgr-display-name-debug-false', + target: 'browser', + production: false, + }, + async (c) => { + expect(await c.read('lib/index.js')).toMatchSnapshot(); + }, + ); + + it( + 'append display name with condition when `isDebugOnly` flag is true', + { + command: 'build', + dependencies: ['@types/react'], + name: 'browser-svgr-display-name-debug-true', + target: 'browser', + production: false, + }, + async (c) => { + expect(await c.read('lib/index.js')).toMatchSnapshot(); + }, + ); + + it( + 'append display name without condition when plain string is returned', + { + command: 'build', + dependencies: ['@types/react'], + name: 'browser-svgr-display-name-string', + target: 'browser', + production: false, + }, + async (c) => { + expect(await c.read('lib/index.js')).toMatchSnapshot(); + }, + ); + }); + + describe('when user defined component name is used', () => { + it( + 'append display name without condition when `isDebugOnly` flag is false', + { + command: 'build', + dependencies: ['@types/react'], + name: 'browser-svgr-display-name-user-name-debug-false', + target: 'browser', + production: false, + }, + async (c) => { + expect(await c.read('lib/index.js')).toMatchSnapshot(); + }, + ); + + it( + 'append display name with condition when `isDebugOnly` flag is true', + { + command: 'build', + dependencies: ['@types/react'], + name: 'browser-svgr-display-name-user-name-debug-true', + target: 'browser', + production: false, + }, + async (c) => { + expect(await c.read('lib/index.js')).toMatchSnapshot(); + }, + ); + + it( + 'append display name without condition when plain string is returned', + { + command: 'build', + dependencies: ['@types/react'], + name: 'browser-svgr-display-name-user-name-string', + target: 'browser', + production: false, + }, + async (c) => { + expect(await c.read('lib/index.js')).toMatchSnapshot(); + }, + ); + }); + }); + }); + describe('.svgrrc', () => { it( 'supports configuration files', diff --git a/tests/fixtures/browser-svgr-display-name-debug-false/.forgerc.js b/tests/fixtures/browser-svgr-display-name-debug-false/.forgerc.js new file mode 100644 index 0000000..8de9599 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-debug-false/.forgerc.js @@ -0,0 +1,10 @@ +export default { + target: 'browser', + + svgrDisplayName(name) { + return { + displayName: `forge(${name}DisplayName)`, + isDebugOnly: false, + }; + }, +}; diff --git a/tests/fixtures/browser-svgr-display-name-debug-false/.svgrrc.js b/tests/fixtures/browser-svgr-display-name-debug-false/.svgrrc.js new file mode 100644 index 0000000..b44c173 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-debug-false/.svgrrc.js @@ -0,0 +1,3 @@ +export default { + memo: false, +}; diff --git a/tests/fixtures/browser-svgr-display-name-debug-false/package.json b/tests/fixtures/browser-svgr-display-name-debug-false/package.json new file mode 100644 index 0000000..e526bbd --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-debug-false/package.json @@ -0,0 +1,17 @@ +{ + "name": "browser-svgr-display-name-debug-false", + "version": "1.0.0", + "type": "module", + "module": "lib/index.js", + "exports": { + ".": { + "import": "./lib/index.js" + } + }, + "files": [ + "lib" + ], + "peerDependencies": { + "react": "^18.2.0" + } +} diff --git a/tests/fixtures/browser-svgr-display-name-debug-false/src/Button.module.css b/tests/fixtures/browser-svgr-display-name-debug-false/src/Button.module.css new file mode 100644 index 0000000..809f488 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-debug-false/src/Button.module.css @@ -0,0 +1,7 @@ +.root { + background-image: url(./assets/css.svg); +} + +.label { + background-image: url(./assets/shared.svg); +} diff --git a/tests/fixtures/browser-svgr-display-name-debug-false/src/Button.tsx b/tests/fixtures/browser-svgr-display-name-debug-false/src/Button.tsx new file mode 100644 index 0000000..af738dd --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-debug-false/src/Button.tsx @@ -0,0 +1,21 @@ +import { FC, MouseEventHandler, PropsWithChildren } from 'react'; + +import styles from './Button.module.css'; + +import imageUrl, { ReactComponent as Image } from './assets/js.svg'; +import { ReactComponent as Shared } from './assets/shared.svg'; + +type Props = PropsWithChildren<{ + onClick: MouseEventHandler; +}>; + +export const Button: FC = ({ children, onClick }: Props) => ( + +); diff --git a/tests/fixtures/browser-svgr-display-name-debug-false/src/assets/css.svg b/tests/fixtures/browser-svgr-display-name-debug-false/src/assets/css.svg new file mode 100644 index 0000000..9e09913 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-debug-false/src/assets/css.svg @@ -0,0 +1,9 @@ + + + + + + + CSS + + diff --git a/tests/fixtures/browser-svgr-display-name-debug-false/src/assets/js.svg b/tests/fixtures/browser-svgr-display-name-debug-false/src/assets/js.svg new file mode 100644 index 0000000..e0c8939 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-debug-false/src/assets/js.svg @@ -0,0 +1,9 @@ + + + + + + + JS + + diff --git a/tests/fixtures/browser-svgr-display-name-debug-false/src/assets/shared.svg b/tests/fixtures/browser-svgr-display-name-debug-false/src/assets/shared.svg new file mode 100644 index 0000000..7177954 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-debug-false/src/assets/shared.svg @@ -0,0 +1,9 @@ + + + + + + + Shared + + diff --git a/tests/fixtures/browser-svgr-display-name-debug-false/src/index.ts b/tests/fixtures/browser-svgr-display-name-debug-false/src/index.ts new file mode 100644 index 0000000..fe9c53c --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-debug-false/src/index.ts @@ -0,0 +1 @@ +export { Button } from './Button'; diff --git a/tests/fixtures/browser-svgr-display-name-debug-false/tsconfig.forge.json b/tests/fixtures/browser-svgr-display-name-debug-false/tsconfig.forge.json new file mode 100644 index 0000000..820c793 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-debug-false/tsconfig.forge.json @@ -0,0 +1,5 @@ +{ + "extends": "@tabula/typescript-config/tsconfig.browser.json", + + "include": ["src"] +} diff --git a/tests/fixtures/browser-svgr-display-name-debug-true/.forgerc.js b/tests/fixtures/browser-svgr-display-name-debug-true/.forgerc.js new file mode 100644 index 0000000..3c06cbd --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-debug-true/.forgerc.js @@ -0,0 +1,10 @@ +export default { + target: 'browser', + + svgrDisplayName(name) { + return { + displayName: `forge(${name}DisplayName)`, + isDebugOnly: true, + }; + }, +}; diff --git a/tests/fixtures/browser-svgr-display-name-debug-true/.svgrrc.js b/tests/fixtures/browser-svgr-display-name-debug-true/.svgrrc.js new file mode 100644 index 0000000..b44c173 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-debug-true/.svgrrc.js @@ -0,0 +1,3 @@ +export default { + memo: false, +}; diff --git a/tests/fixtures/browser-svgr-display-name-debug-true/package.json b/tests/fixtures/browser-svgr-display-name-debug-true/package.json new file mode 100644 index 0000000..5f1a79b --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-debug-true/package.json @@ -0,0 +1,17 @@ +{ + "name": "browser-svgr-display-name-debug-true", + "version": "1.0.0", + "type": "module", + "module": "lib/index.js", + "exports": { + ".": { + "import": "./lib/index.js" + } + }, + "files": [ + "lib" + ], + "peerDependencies": { + "react": "^18.2.0" + } +} diff --git a/tests/fixtures/browser-svgr-display-name-debug-true/src/Button.module.css b/tests/fixtures/browser-svgr-display-name-debug-true/src/Button.module.css new file mode 100644 index 0000000..809f488 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-debug-true/src/Button.module.css @@ -0,0 +1,7 @@ +.root { + background-image: url(./assets/css.svg); +} + +.label { + background-image: url(./assets/shared.svg); +} diff --git a/tests/fixtures/browser-svgr-display-name-debug-true/src/Button.tsx b/tests/fixtures/browser-svgr-display-name-debug-true/src/Button.tsx new file mode 100644 index 0000000..af738dd --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-debug-true/src/Button.tsx @@ -0,0 +1,21 @@ +import { FC, MouseEventHandler, PropsWithChildren } from 'react'; + +import styles from './Button.module.css'; + +import imageUrl, { ReactComponent as Image } from './assets/js.svg'; +import { ReactComponent as Shared } from './assets/shared.svg'; + +type Props = PropsWithChildren<{ + onClick: MouseEventHandler; +}>; + +export const Button: FC = ({ children, onClick }: Props) => ( + +); diff --git a/tests/fixtures/browser-svgr-display-name-debug-true/src/assets/css.svg b/tests/fixtures/browser-svgr-display-name-debug-true/src/assets/css.svg new file mode 100644 index 0000000..9e09913 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-debug-true/src/assets/css.svg @@ -0,0 +1,9 @@ + + + + + + + CSS + + diff --git a/tests/fixtures/browser-svgr-display-name-debug-true/src/assets/js.svg b/tests/fixtures/browser-svgr-display-name-debug-true/src/assets/js.svg new file mode 100644 index 0000000..e0c8939 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-debug-true/src/assets/js.svg @@ -0,0 +1,9 @@ + + + + + + + JS + + diff --git a/tests/fixtures/browser-svgr-display-name-debug-true/src/assets/shared.svg b/tests/fixtures/browser-svgr-display-name-debug-true/src/assets/shared.svg new file mode 100644 index 0000000..7177954 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-debug-true/src/assets/shared.svg @@ -0,0 +1,9 @@ + + + + + + + Shared + + diff --git a/tests/fixtures/browser-svgr-display-name-debug-true/src/index.ts b/tests/fixtures/browser-svgr-display-name-debug-true/src/index.ts new file mode 100644 index 0000000..fe9c53c --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-debug-true/src/index.ts @@ -0,0 +1 @@ +export { Button } from './Button'; diff --git a/tests/fixtures/browser-svgr-display-name-debug-true/tsconfig.forge.json b/tests/fixtures/browser-svgr-display-name-debug-true/tsconfig.forge.json new file mode 100644 index 0000000..820c793 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-debug-true/tsconfig.forge.json @@ -0,0 +1,5 @@ +{ + "extends": "@tabula/typescript-config/tsconfig.browser.json", + + "include": ["src"] +} diff --git a/tests/fixtures/browser-svgr-display-name-memo-debug-false/.forgerc.js b/tests/fixtures/browser-svgr-display-name-memo-debug-false/.forgerc.js new file mode 100644 index 0000000..8de9599 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-debug-false/.forgerc.js @@ -0,0 +1,10 @@ +export default { + target: 'browser', + + svgrDisplayName(name) { + return { + displayName: `forge(${name}DisplayName)`, + isDebugOnly: false, + }; + }, +}; diff --git a/tests/fixtures/browser-svgr-display-name-memo-debug-false/package.json b/tests/fixtures/browser-svgr-display-name-memo-debug-false/package.json new file mode 100644 index 0000000..960487b --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-debug-false/package.json @@ -0,0 +1,17 @@ +{ + "name": "browser-svgr-display-name-memo-debug-false", + "version": "1.0.0", + "type": "module", + "module": "lib/index.js", + "exports": { + ".": { + "import": "./lib/index.js" + } + }, + "files": [ + "lib" + ], + "peerDependencies": { + "react": "^18.2.0" + } +} diff --git a/tests/fixtures/browser-svgr-display-name-memo-debug-false/src/Button.module.css b/tests/fixtures/browser-svgr-display-name-memo-debug-false/src/Button.module.css new file mode 100644 index 0000000..809f488 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-debug-false/src/Button.module.css @@ -0,0 +1,7 @@ +.root { + background-image: url(./assets/css.svg); +} + +.label { + background-image: url(./assets/shared.svg); +} diff --git a/tests/fixtures/browser-svgr-display-name-memo-debug-false/src/Button.tsx b/tests/fixtures/browser-svgr-display-name-memo-debug-false/src/Button.tsx new file mode 100644 index 0000000..af738dd --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-debug-false/src/Button.tsx @@ -0,0 +1,21 @@ +import { FC, MouseEventHandler, PropsWithChildren } from 'react'; + +import styles from './Button.module.css'; + +import imageUrl, { ReactComponent as Image } from './assets/js.svg'; +import { ReactComponent as Shared } from './assets/shared.svg'; + +type Props = PropsWithChildren<{ + onClick: MouseEventHandler; +}>; + +export const Button: FC = ({ children, onClick }: Props) => ( + +); diff --git a/tests/fixtures/browser-svgr-display-name-memo-debug-false/src/assets/css.svg b/tests/fixtures/browser-svgr-display-name-memo-debug-false/src/assets/css.svg new file mode 100644 index 0000000..9e09913 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-debug-false/src/assets/css.svg @@ -0,0 +1,9 @@ + + + + + + + CSS + + diff --git a/tests/fixtures/browser-svgr-display-name-memo-debug-false/src/assets/js.svg b/tests/fixtures/browser-svgr-display-name-memo-debug-false/src/assets/js.svg new file mode 100644 index 0000000..e0c8939 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-debug-false/src/assets/js.svg @@ -0,0 +1,9 @@ + + + + + + + JS + + diff --git a/tests/fixtures/browser-svgr-display-name-memo-debug-false/src/assets/shared.svg b/tests/fixtures/browser-svgr-display-name-memo-debug-false/src/assets/shared.svg new file mode 100644 index 0000000..7177954 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-debug-false/src/assets/shared.svg @@ -0,0 +1,9 @@ + + + + + + + Shared + + diff --git a/tests/fixtures/browser-svgr-display-name-memo-debug-false/src/index.ts b/tests/fixtures/browser-svgr-display-name-memo-debug-false/src/index.ts new file mode 100644 index 0000000..fe9c53c --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-debug-false/src/index.ts @@ -0,0 +1 @@ +export { Button } from './Button'; diff --git a/tests/fixtures/browser-svgr-display-name-memo-debug-false/tsconfig.forge.json b/tests/fixtures/browser-svgr-display-name-memo-debug-false/tsconfig.forge.json new file mode 100644 index 0000000..820c793 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-debug-false/tsconfig.forge.json @@ -0,0 +1,5 @@ +{ + "extends": "@tabula/typescript-config/tsconfig.browser.json", + + "include": ["src"] +} diff --git a/tests/fixtures/browser-svgr-display-name-memo-debug-true/.forgerc.js b/tests/fixtures/browser-svgr-display-name-memo-debug-true/.forgerc.js new file mode 100644 index 0000000..3c06cbd --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-debug-true/.forgerc.js @@ -0,0 +1,10 @@ +export default { + target: 'browser', + + svgrDisplayName(name) { + return { + displayName: `forge(${name}DisplayName)`, + isDebugOnly: true, + }; + }, +}; diff --git a/tests/fixtures/browser-svgr-display-name-memo-debug-true/package.json b/tests/fixtures/browser-svgr-display-name-memo-debug-true/package.json new file mode 100644 index 0000000..8eec0e8 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-debug-true/package.json @@ -0,0 +1,17 @@ +{ + "name": "browser-svgr-display-name-memo-debug-true", + "version": "1.0.0", + "type": "module", + "module": "lib/index.js", + "exports": { + ".": { + "import": "./lib/index.js" + } + }, + "files": [ + "lib" + ], + "peerDependencies": { + "react": "^18.2.0" + } +} diff --git a/tests/fixtures/browser-svgr-display-name-memo-debug-true/src/Button.module.css b/tests/fixtures/browser-svgr-display-name-memo-debug-true/src/Button.module.css new file mode 100644 index 0000000..809f488 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-debug-true/src/Button.module.css @@ -0,0 +1,7 @@ +.root { + background-image: url(./assets/css.svg); +} + +.label { + background-image: url(./assets/shared.svg); +} diff --git a/tests/fixtures/browser-svgr-display-name-memo-debug-true/src/Button.tsx b/tests/fixtures/browser-svgr-display-name-memo-debug-true/src/Button.tsx new file mode 100644 index 0000000..af738dd --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-debug-true/src/Button.tsx @@ -0,0 +1,21 @@ +import { FC, MouseEventHandler, PropsWithChildren } from 'react'; + +import styles from './Button.module.css'; + +import imageUrl, { ReactComponent as Image } from './assets/js.svg'; +import { ReactComponent as Shared } from './assets/shared.svg'; + +type Props = PropsWithChildren<{ + onClick: MouseEventHandler; +}>; + +export const Button: FC = ({ children, onClick }: Props) => ( + +); diff --git a/tests/fixtures/browser-svgr-display-name-memo-debug-true/src/assets/css.svg b/tests/fixtures/browser-svgr-display-name-memo-debug-true/src/assets/css.svg new file mode 100644 index 0000000..9e09913 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-debug-true/src/assets/css.svg @@ -0,0 +1,9 @@ + + + + + + + CSS + + diff --git a/tests/fixtures/browser-svgr-display-name-memo-debug-true/src/assets/js.svg b/tests/fixtures/browser-svgr-display-name-memo-debug-true/src/assets/js.svg new file mode 100644 index 0000000..e0c8939 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-debug-true/src/assets/js.svg @@ -0,0 +1,9 @@ + + + + + + + JS + + diff --git a/tests/fixtures/browser-svgr-display-name-memo-debug-true/src/assets/shared.svg b/tests/fixtures/browser-svgr-display-name-memo-debug-true/src/assets/shared.svg new file mode 100644 index 0000000..7177954 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-debug-true/src/assets/shared.svg @@ -0,0 +1,9 @@ + + + + + + + Shared + + diff --git a/tests/fixtures/browser-svgr-display-name-memo-debug-true/src/index.ts b/tests/fixtures/browser-svgr-display-name-memo-debug-true/src/index.ts new file mode 100644 index 0000000..fe9c53c --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-debug-true/src/index.ts @@ -0,0 +1 @@ +export { Button } from './Button'; diff --git a/tests/fixtures/browser-svgr-display-name-memo-debug-true/tsconfig.forge.json b/tests/fixtures/browser-svgr-display-name-memo-debug-true/tsconfig.forge.json new file mode 100644 index 0000000..820c793 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-debug-true/tsconfig.forge.json @@ -0,0 +1,5 @@ +{ + "extends": "@tabula/typescript-config/tsconfig.browser.json", + + "include": ["src"] +} diff --git a/tests/fixtures/browser-svgr-display-name-memo-string/.forgerc.js b/tests/fixtures/browser-svgr-display-name-memo-string/.forgerc.js new file mode 100644 index 0000000..6f36eb8 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-string/.forgerc.js @@ -0,0 +1,7 @@ +export default { + target: 'browser', + + svgrDisplayName(name) { + return `forge(${name}DisplayName)`; + }, +}; diff --git a/tests/fixtures/browser-svgr-display-name-memo-string/package.json b/tests/fixtures/browser-svgr-display-name-memo-string/package.json new file mode 100644 index 0000000..0f7cfeb --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-string/package.json @@ -0,0 +1,17 @@ +{ + "name": "browser-svgr-display-name-memo-string", + "version": "1.0.0", + "type": "module", + "module": "lib/index.js", + "exports": { + ".": { + "import": "./lib/index.js" + } + }, + "files": [ + "lib" + ], + "peerDependencies": { + "react": "^18.2.0" + } +} diff --git a/tests/fixtures/browser-svgr-display-name-memo-string/src/Button.module.css b/tests/fixtures/browser-svgr-display-name-memo-string/src/Button.module.css new file mode 100644 index 0000000..809f488 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-string/src/Button.module.css @@ -0,0 +1,7 @@ +.root { + background-image: url(./assets/css.svg); +} + +.label { + background-image: url(./assets/shared.svg); +} diff --git a/tests/fixtures/browser-svgr-display-name-memo-string/src/Button.tsx b/tests/fixtures/browser-svgr-display-name-memo-string/src/Button.tsx new file mode 100644 index 0000000..af738dd --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-string/src/Button.tsx @@ -0,0 +1,21 @@ +import { FC, MouseEventHandler, PropsWithChildren } from 'react'; + +import styles from './Button.module.css'; + +import imageUrl, { ReactComponent as Image } from './assets/js.svg'; +import { ReactComponent as Shared } from './assets/shared.svg'; + +type Props = PropsWithChildren<{ + onClick: MouseEventHandler; +}>; + +export const Button: FC = ({ children, onClick }: Props) => ( + +); diff --git a/tests/fixtures/browser-svgr-display-name-memo-string/src/assets/css.svg b/tests/fixtures/browser-svgr-display-name-memo-string/src/assets/css.svg new file mode 100644 index 0000000..9e09913 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-string/src/assets/css.svg @@ -0,0 +1,9 @@ + + + + + + + CSS + + diff --git a/tests/fixtures/browser-svgr-display-name-memo-string/src/assets/js.svg b/tests/fixtures/browser-svgr-display-name-memo-string/src/assets/js.svg new file mode 100644 index 0000000..e0c8939 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-string/src/assets/js.svg @@ -0,0 +1,9 @@ + + + + + + + JS + + diff --git a/tests/fixtures/browser-svgr-display-name-memo-string/src/assets/shared.svg b/tests/fixtures/browser-svgr-display-name-memo-string/src/assets/shared.svg new file mode 100644 index 0000000..7177954 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-string/src/assets/shared.svg @@ -0,0 +1,9 @@ + + + + + + + Shared + + diff --git a/tests/fixtures/browser-svgr-display-name-memo-string/src/index.ts b/tests/fixtures/browser-svgr-display-name-memo-string/src/index.ts new file mode 100644 index 0000000..fe9c53c --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-string/src/index.ts @@ -0,0 +1 @@ +export { Button } from './Button'; diff --git a/tests/fixtures/browser-svgr-display-name-memo-string/tsconfig.forge.json b/tests/fixtures/browser-svgr-display-name-memo-string/tsconfig.forge.json new file mode 100644 index 0000000..820c793 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-string/tsconfig.forge.json @@ -0,0 +1,5 @@ +{ + "extends": "@tabula/typescript-config/tsconfig.browser.json", + + "include": ["src"] +} diff --git a/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-false/.forgerc.js b/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-false/.forgerc.js new file mode 100644 index 0000000..74b536f --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-false/.forgerc.js @@ -0,0 +1,14 @@ +export default { + target: 'browser', + + svgrComponentName(name) { + return `Ui${name.slice(3)}Icon`; + }, + + svgrDisplayName(name) { + return { + displayName: `forge(${name}DisplayName)`, + isDebugOnly: false, + }; + }, +}; diff --git a/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-false/package.json b/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-false/package.json new file mode 100644 index 0000000..f4e6655 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-false/package.json @@ -0,0 +1,17 @@ +{ + "name": "browser-svgr-display-name-memo-user-name-debug-false", + "version": "1.0.0", + "type": "module", + "module": "lib/index.js", + "exports": { + ".": { + "import": "./lib/index.js" + } + }, + "files": [ + "lib" + ], + "peerDependencies": { + "react": "^18.2.0" + } +} diff --git a/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-false/src/Button.module.css b/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-false/src/Button.module.css new file mode 100644 index 0000000..809f488 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-false/src/Button.module.css @@ -0,0 +1,7 @@ +.root { + background-image: url(./assets/css.svg); +} + +.label { + background-image: url(./assets/shared.svg); +} diff --git a/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-false/src/Button.tsx b/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-false/src/Button.tsx new file mode 100644 index 0000000..af738dd --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-false/src/Button.tsx @@ -0,0 +1,21 @@ +import { FC, MouseEventHandler, PropsWithChildren } from 'react'; + +import styles from './Button.module.css'; + +import imageUrl, { ReactComponent as Image } from './assets/js.svg'; +import { ReactComponent as Shared } from './assets/shared.svg'; + +type Props = PropsWithChildren<{ + onClick: MouseEventHandler; +}>; + +export const Button: FC = ({ children, onClick }: Props) => ( + +); diff --git a/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-false/src/assets/css.svg b/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-false/src/assets/css.svg new file mode 100644 index 0000000..9e09913 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-false/src/assets/css.svg @@ -0,0 +1,9 @@ + + + + + + + CSS + + diff --git a/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-false/src/assets/js.svg b/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-false/src/assets/js.svg new file mode 100644 index 0000000..e0c8939 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-false/src/assets/js.svg @@ -0,0 +1,9 @@ + + + + + + + JS + + diff --git a/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-false/src/assets/shared.svg b/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-false/src/assets/shared.svg new file mode 100644 index 0000000..7177954 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-false/src/assets/shared.svg @@ -0,0 +1,9 @@ + + + + + + + Shared + + diff --git a/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-false/src/index.ts b/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-false/src/index.ts new file mode 100644 index 0000000..fe9c53c --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-false/src/index.ts @@ -0,0 +1 @@ +export { Button } from './Button'; diff --git a/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-false/tsconfig.forge.json b/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-false/tsconfig.forge.json new file mode 100644 index 0000000..820c793 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-false/tsconfig.forge.json @@ -0,0 +1,5 @@ +{ + "extends": "@tabula/typescript-config/tsconfig.browser.json", + + "include": ["src"] +} diff --git a/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-true/.forgerc.js b/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-true/.forgerc.js new file mode 100644 index 0000000..91087c7 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-true/.forgerc.js @@ -0,0 +1,14 @@ +export default { + target: 'browser', + + svgrComponentName(name) { + return `Ui${name.slice(3)}Icon`; + }, + + svgrDisplayName(name) { + return { + displayName: `forge(${name}DisplayName)`, + isDebugOnly: true, + }; + }, +}; diff --git a/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-true/package.json b/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-true/package.json new file mode 100644 index 0000000..aa544f2 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-true/package.json @@ -0,0 +1,17 @@ +{ + "name": "browser-svgr-display-name-memo-user-name-debug-true", + "version": "1.0.0", + "type": "module", + "module": "lib/index.js", + "exports": { + ".": { + "import": "./lib/index.js" + } + }, + "files": [ + "lib" + ], + "peerDependencies": { + "react": "^18.2.0" + } +} diff --git a/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-true/src/Button.module.css b/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-true/src/Button.module.css new file mode 100644 index 0000000..809f488 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-true/src/Button.module.css @@ -0,0 +1,7 @@ +.root { + background-image: url(./assets/css.svg); +} + +.label { + background-image: url(./assets/shared.svg); +} diff --git a/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-true/src/Button.tsx b/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-true/src/Button.tsx new file mode 100644 index 0000000..af738dd --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-true/src/Button.tsx @@ -0,0 +1,21 @@ +import { FC, MouseEventHandler, PropsWithChildren } from 'react'; + +import styles from './Button.module.css'; + +import imageUrl, { ReactComponent as Image } from './assets/js.svg'; +import { ReactComponent as Shared } from './assets/shared.svg'; + +type Props = PropsWithChildren<{ + onClick: MouseEventHandler; +}>; + +export const Button: FC = ({ children, onClick }: Props) => ( + +); diff --git a/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-true/src/assets/css.svg b/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-true/src/assets/css.svg new file mode 100644 index 0000000..9e09913 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-true/src/assets/css.svg @@ -0,0 +1,9 @@ + + + + + + + CSS + + diff --git a/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-true/src/assets/js.svg b/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-true/src/assets/js.svg new file mode 100644 index 0000000..e0c8939 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-true/src/assets/js.svg @@ -0,0 +1,9 @@ + + + + + + + JS + + diff --git a/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-true/src/assets/shared.svg b/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-true/src/assets/shared.svg new file mode 100644 index 0000000..7177954 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-true/src/assets/shared.svg @@ -0,0 +1,9 @@ + + + + + + + Shared + + diff --git a/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-true/src/index.ts b/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-true/src/index.ts new file mode 100644 index 0000000..fe9c53c --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-true/src/index.ts @@ -0,0 +1 @@ +export { Button } from './Button'; diff --git a/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-true/tsconfig.forge.json b/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-true/tsconfig.forge.json new file mode 100644 index 0000000..820c793 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-user-name-debug-true/tsconfig.forge.json @@ -0,0 +1,5 @@ +{ + "extends": "@tabula/typescript-config/tsconfig.browser.json", + + "include": ["src"] +} diff --git a/tests/fixtures/browser-svgr-display-name-memo-user-name-string/.forgerc.js b/tests/fixtures/browser-svgr-display-name-memo-user-name-string/.forgerc.js new file mode 100644 index 0000000..51367b4 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-user-name-string/.forgerc.js @@ -0,0 +1,11 @@ +export default { + target: 'browser', + + svgrComponentName(name) { + return `Ui${name.slice(3)}Icon`; + }, + + svgrDisplayName(name) { + return `forge(${name}DisplayName)`; + }, +}; diff --git a/tests/fixtures/browser-svgr-display-name-memo-user-name-string/package.json b/tests/fixtures/browser-svgr-display-name-memo-user-name-string/package.json new file mode 100644 index 0000000..ce1a277 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-user-name-string/package.json @@ -0,0 +1,17 @@ +{ + "name": "browser-svgr-display-name-memo-user-name-string", + "version": "1.0.0", + "type": "module", + "module": "lib/index.js", + "exports": { + ".": { + "import": "./lib/index.js" + } + }, + "files": [ + "lib" + ], + "peerDependencies": { + "react": "^18.2.0" + } +} diff --git a/tests/fixtures/browser-svgr-display-name-memo-user-name-string/src/Button.module.css b/tests/fixtures/browser-svgr-display-name-memo-user-name-string/src/Button.module.css new file mode 100644 index 0000000..809f488 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-user-name-string/src/Button.module.css @@ -0,0 +1,7 @@ +.root { + background-image: url(./assets/css.svg); +} + +.label { + background-image: url(./assets/shared.svg); +} diff --git a/tests/fixtures/browser-svgr-display-name-memo-user-name-string/src/Button.tsx b/tests/fixtures/browser-svgr-display-name-memo-user-name-string/src/Button.tsx new file mode 100644 index 0000000..af738dd --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-user-name-string/src/Button.tsx @@ -0,0 +1,21 @@ +import { FC, MouseEventHandler, PropsWithChildren } from 'react'; + +import styles from './Button.module.css'; + +import imageUrl, { ReactComponent as Image } from './assets/js.svg'; +import { ReactComponent as Shared } from './assets/shared.svg'; + +type Props = PropsWithChildren<{ + onClick: MouseEventHandler; +}>; + +export const Button: FC = ({ children, onClick }: Props) => ( + +); diff --git a/tests/fixtures/browser-svgr-display-name-memo-user-name-string/src/assets/css.svg b/tests/fixtures/browser-svgr-display-name-memo-user-name-string/src/assets/css.svg new file mode 100644 index 0000000..9e09913 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-user-name-string/src/assets/css.svg @@ -0,0 +1,9 @@ + + + + + + + CSS + + diff --git a/tests/fixtures/browser-svgr-display-name-memo-user-name-string/src/assets/js.svg b/tests/fixtures/browser-svgr-display-name-memo-user-name-string/src/assets/js.svg new file mode 100644 index 0000000..e0c8939 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-user-name-string/src/assets/js.svg @@ -0,0 +1,9 @@ + + + + + + + JS + + diff --git a/tests/fixtures/browser-svgr-display-name-memo-user-name-string/src/assets/shared.svg b/tests/fixtures/browser-svgr-display-name-memo-user-name-string/src/assets/shared.svg new file mode 100644 index 0000000..7177954 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-user-name-string/src/assets/shared.svg @@ -0,0 +1,9 @@ + + + + + + + Shared + + diff --git a/tests/fixtures/browser-svgr-display-name-memo-user-name-string/src/index.ts b/tests/fixtures/browser-svgr-display-name-memo-user-name-string/src/index.ts new file mode 100644 index 0000000..fe9c53c --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-user-name-string/src/index.ts @@ -0,0 +1 @@ +export { Button } from './Button'; diff --git a/tests/fixtures/browser-svgr-display-name-memo-user-name-string/tsconfig.forge.json b/tests/fixtures/browser-svgr-display-name-memo-user-name-string/tsconfig.forge.json new file mode 100644 index 0000000..820c793 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-memo-user-name-string/tsconfig.forge.json @@ -0,0 +1,5 @@ +{ + "extends": "@tabula/typescript-config/tsconfig.browser.json", + + "include": ["src"] +} diff --git a/tests/fixtures/browser-svgr-display-name-string/.forgerc.js b/tests/fixtures/browser-svgr-display-name-string/.forgerc.js new file mode 100644 index 0000000..6f36eb8 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-string/.forgerc.js @@ -0,0 +1,7 @@ +export default { + target: 'browser', + + svgrDisplayName(name) { + return `forge(${name}DisplayName)`; + }, +}; diff --git a/tests/fixtures/browser-svgr-display-name-string/.svgrrc.js b/tests/fixtures/browser-svgr-display-name-string/.svgrrc.js new file mode 100644 index 0000000..b44c173 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-string/.svgrrc.js @@ -0,0 +1,3 @@ +export default { + memo: false, +}; diff --git a/tests/fixtures/browser-svgr-display-name-string/package.json b/tests/fixtures/browser-svgr-display-name-string/package.json new file mode 100644 index 0000000..d4d6996 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-string/package.json @@ -0,0 +1,17 @@ +{ + "name": "browser-svgr-display-name-string", + "version": "1.0.0", + "type": "module", + "module": "lib/index.js", + "exports": { + ".": { + "import": "./lib/index.js" + } + }, + "files": [ + "lib" + ], + "peerDependencies": { + "react": "^18.2.0" + } +} diff --git a/tests/fixtures/browser-svgr-display-name-string/src/Button.module.css b/tests/fixtures/browser-svgr-display-name-string/src/Button.module.css new file mode 100644 index 0000000..809f488 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-string/src/Button.module.css @@ -0,0 +1,7 @@ +.root { + background-image: url(./assets/css.svg); +} + +.label { + background-image: url(./assets/shared.svg); +} diff --git a/tests/fixtures/browser-svgr-display-name-string/src/Button.tsx b/tests/fixtures/browser-svgr-display-name-string/src/Button.tsx new file mode 100644 index 0000000..af738dd --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-string/src/Button.tsx @@ -0,0 +1,21 @@ +import { FC, MouseEventHandler, PropsWithChildren } from 'react'; + +import styles from './Button.module.css'; + +import imageUrl, { ReactComponent as Image } from './assets/js.svg'; +import { ReactComponent as Shared } from './assets/shared.svg'; + +type Props = PropsWithChildren<{ + onClick: MouseEventHandler; +}>; + +export const Button: FC = ({ children, onClick }: Props) => ( + +); diff --git a/tests/fixtures/browser-svgr-display-name-string/src/assets/css.svg b/tests/fixtures/browser-svgr-display-name-string/src/assets/css.svg new file mode 100644 index 0000000..9e09913 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-string/src/assets/css.svg @@ -0,0 +1,9 @@ + + + + + + + CSS + + diff --git a/tests/fixtures/browser-svgr-display-name-string/src/assets/js.svg b/tests/fixtures/browser-svgr-display-name-string/src/assets/js.svg new file mode 100644 index 0000000..e0c8939 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-string/src/assets/js.svg @@ -0,0 +1,9 @@ + + + + + + + JS + + diff --git a/tests/fixtures/browser-svgr-display-name-string/src/assets/shared.svg b/tests/fixtures/browser-svgr-display-name-string/src/assets/shared.svg new file mode 100644 index 0000000..7177954 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-string/src/assets/shared.svg @@ -0,0 +1,9 @@ + + + + + + + Shared + + diff --git a/tests/fixtures/browser-svgr-display-name-string/src/index.ts b/tests/fixtures/browser-svgr-display-name-string/src/index.ts new file mode 100644 index 0000000..fe9c53c --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-string/src/index.ts @@ -0,0 +1 @@ +export { Button } from './Button'; diff --git a/tests/fixtures/browser-svgr-display-name-string/tsconfig.forge.json b/tests/fixtures/browser-svgr-display-name-string/tsconfig.forge.json new file mode 100644 index 0000000..820c793 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-string/tsconfig.forge.json @@ -0,0 +1,5 @@ +{ + "extends": "@tabula/typescript-config/tsconfig.browser.json", + + "include": ["src"] +} diff --git a/tests/fixtures/browser-svgr-display-name-user-name-debug-false/.forgerc.js b/tests/fixtures/browser-svgr-display-name-user-name-debug-false/.forgerc.js new file mode 100644 index 0000000..74b536f --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-user-name-debug-false/.forgerc.js @@ -0,0 +1,14 @@ +export default { + target: 'browser', + + svgrComponentName(name) { + return `Ui${name.slice(3)}Icon`; + }, + + svgrDisplayName(name) { + return { + displayName: `forge(${name}DisplayName)`, + isDebugOnly: false, + }; + }, +}; diff --git a/tests/fixtures/browser-svgr-display-name-user-name-debug-false/.svgrrc.js b/tests/fixtures/browser-svgr-display-name-user-name-debug-false/.svgrrc.js new file mode 100644 index 0000000..b44c173 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-user-name-debug-false/.svgrrc.js @@ -0,0 +1,3 @@ +export default { + memo: false, +}; diff --git a/tests/fixtures/browser-svgr-display-name-user-name-debug-false/package.json b/tests/fixtures/browser-svgr-display-name-user-name-debug-false/package.json new file mode 100644 index 0000000..2bab9fb --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-user-name-debug-false/package.json @@ -0,0 +1,17 @@ +{ + "name": "browser-svgr-display-name-user-name-debug-false", + "version": "1.0.0", + "type": "module", + "module": "lib/index.js", + "exports": { + ".": { + "import": "./lib/index.js" + } + }, + "files": [ + "lib" + ], + "peerDependencies": { + "react": "^18.2.0" + } +} diff --git a/tests/fixtures/browser-svgr-display-name-user-name-debug-false/src/Button.module.css b/tests/fixtures/browser-svgr-display-name-user-name-debug-false/src/Button.module.css new file mode 100644 index 0000000..809f488 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-user-name-debug-false/src/Button.module.css @@ -0,0 +1,7 @@ +.root { + background-image: url(./assets/css.svg); +} + +.label { + background-image: url(./assets/shared.svg); +} diff --git a/tests/fixtures/browser-svgr-display-name-user-name-debug-false/src/Button.tsx b/tests/fixtures/browser-svgr-display-name-user-name-debug-false/src/Button.tsx new file mode 100644 index 0000000..af738dd --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-user-name-debug-false/src/Button.tsx @@ -0,0 +1,21 @@ +import { FC, MouseEventHandler, PropsWithChildren } from 'react'; + +import styles from './Button.module.css'; + +import imageUrl, { ReactComponent as Image } from './assets/js.svg'; +import { ReactComponent as Shared } from './assets/shared.svg'; + +type Props = PropsWithChildren<{ + onClick: MouseEventHandler; +}>; + +export const Button: FC = ({ children, onClick }: Props) => ( + +); diff --git a/tests/fixtures/browser-svgr-display-name-user-name-debug-false/src/assets/css.svg b/tests/fixtures/browser-svgr-display-name-user-name-debug-false/src/assets/css.svg new file mode 100644 index 0000000..9e09913 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-user-name-debug-false/src/assets/css.svg @@ -0,0 +1,9 @@ + + + + + + + CSS + + diff --git a/tests/fixtures/browser-svgr-display-name-user-name-debug-false/src/assets/js.svg b/tests/fixtures/browser-svgr-display-name-user-name-debug-false/src/assets/js.svg new file mode 100644 index 0000000..e0c8939 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-user-name-debug-false/src/assets/js.svg @@ -0,0 +1,9 @@ + + + + + + + JS + + diff --git a/tests/fixtures/browser-svgr-display-name-user-name-debug-false/src/assets/shared.svg b/tests/fixtures/browser-svgr-display-name-user-name-debug-false/src/assets/shared.svg new file mode 100644 index 0000000..7177954 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-user-name-debug-false/src/assets/shared.svg @@ -0,0 +1,9 @@ + + + + + + + Shared + + diff --git a/tests/fixtures/browser-svgr-display-name-user-name-debug-false/src/index.ts b/tests/fixtures/browser-svgr-display-name-user-name-debug-false/src/index.ts new file mode 100644 index 0000000..fe9c53c --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-user-name-debug-false/src/index.ts @@ -0,0 +1 @@ +export { Button } from './Button'; diff --git a/tests/fixtures/browser-svgr-display-name-user-name-debug-false/tsconfig.forge.json b/tests/fixtures/browser-svgr-display-name-user-name-debug-false/tsconfig.forge.json new file mode 100644 index 0000000..820c793 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-user-name-debug-false/tsconfig.forge.json @@ -0,0 +1,5 @@ +{ + "extends": "@tabula/typescript-config/tsconfig.browser.json", + + "include": ["src"] +} diff --git a/tests/fixtures/browser-svgr-display-name-user-name-debug-true/.forgerc.js b/tests/fixtures/browser-svgr-display-name-user-name-debug-true/.forgerc.js new file mode 100644 index 0000000..91087c7 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-user-name-debug-true/.forgerc.js @@ -0,0 +1,14 @@ +export default { + target: 'browser', + + svgrComponentName(name) { + return `Ui${name.slice(3)}Icon`; + }, + + svgrDisplayName(name) { + return { + displayName: `forge(${name}DisplayName)`, + isDebugOnly: true, + }; + }, +}; diff --git a/tests/fixtures/browser-svgr-display-name-user-name-debug-true/.svgrrc.js b/tests/fixtures/browser-svgr-display-name-user-name-debug-true/.svgrrc.js new file mode 100644 index 0000000..b44c173 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-user-name-debug-true/.svgrrc.js @@ -0,0 +1,3 @@ +export default { + memo: false, +}; diff --git a/tests/fixtures/browser-svgr-display-name-user-name-debug-true/package.json b/tests/fixtures/browser-svgr-display-name-user-name-debug-true/package.json new file mode 100644 index 0000000..c848eac --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-user-name-debug-true/package.json @@ -0,0 +1,17 @@ +{ + "name": "browser-svgr-display-name-user-name-debug-true", + "version": "1.0.0", + "type": "module", + "module": "lib/index.js", + "exports": { + ".": { + "import": "./lib/index.js" + } + }, + "files": [ + "lib" + ], + "peerDependencies": { + "react": "^18.2.0" + } +} diff --git a/tests/fixtures/browser-svgr-display-name-user-name-debug-true/src/Button.module.css b/tests/fixtures/browser-svgr-display-name-user-name-debug-true/src/Button.module.css new file mode 100644 index 0000000..809f488 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-user-name-debug-true/src/Button.module.css @@ -0,0 +1,7 @@ +.root { + background-image: url(./assets/css.svg); +} + +.label { + background-image: url(./assets/shared.svg); +} diff --git a/tests/fixtures/browser-svgr-display-name-user-name-debug-true/src/Button.tsx b/tests/fixtures/browser-svgr-display-name-user-name-debug-true/src/Button.tsx new file mode 100644 index 0000000..af738dd --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-user-name-debug-true/src/Button.tsx @@ -0,0 +1,21 @@ +import { FC, MouseEventHandler, PropsWithChildren } from 'react'; + +import styles from './Button.module.css'; + +import imageUrl, { ReactComponent as Image } from './assets/js.svg'; +import { ReactComponent as Shared } from './assets/shared.svg'; + +type Props = PropsWithChildren<{ + onClick: MouseEventHandler; +}>; + +export const Button: FC = ({ children, onClick }: Props) => ( + +); diff --git a/tests/fixtures/browser-svgr-display-name-user-name-debug-true/src/assets/css.svg b/tests/fixtures/browser-svgr-display-name-user-name-debug-true/src/assets/css.svg new file mode 100644 index 0000000..9e09913 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-user-name-debug-true/src/assets/css.svg @@ -0,0 +1,9 @@ + + + + + + + CSS + + diff --git a/tests/fixtures/browser-svgr-display-name-user-name-debug-true/src/assets/js.svg b/tests/fixtures/browser-svgr-display-name-user-name-debug-true/src/assets/js.svg new file mode 100644 index 0000000..e0c8939 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-user-name-debug-true/src/assets/js.svg @@ -0,0 +1,9 @@ + + + + + + + JS + + diff --git a/tests/fixtures/browser-svgr-display-name-user-name-debug-true/src/assets/shared.svg b/tests/fixtures/browser-svgr-display-name-user-name-debug-true/src/assets/shared.svg new file mode 100644 index 0000000..7177954 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-user-name-debug-true/src/assets/shared.svg @@ -0,0 +1,9 @@ + + + + + + + Shared + + diff --git a/tests/fixtures/browser-svgr-display-name-user-name-debug-true/src/index.ts b/tests/fixtures/browser-svgr-display-name-user-name-debug-true/src/index.ts new file mode 100644 index 0000000..fe9c53c --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-user-name-debug-true/src/index.ts @@ -0,0 +1 @@ +export { Button } from './Button'; diff --git a/tests/fixtures/browser-svgr-display-name-user-name-debug-true/tsconfig.forge.json b/tests/fixtures/browser-svgr-display-name-user-name-debug-true/tsconfig.forge.json new file mode 100644 index 0000000..820c793 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-user-name-debug-true/tsconfig.forge.json @@ -0,0 +1,5 @@ +{ + "extends": "@tabula/typescript-config/tsconfig.browser.json", + + "include": ["src"] +} diff --git a/tests/fixtures/browser-svgr-display-name-user-name-string/.forgerc.js b/tests/fixtures/browser-svgr-display-name-user-name-string/.forgerc.js new file mode 100644 index 0000000..51367b4 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-user-name-string/.forgerc.js @@ -0,0 +1,11 @@ +export default { + target: 'browser', + + svgrComponentName(name) { + return `Ui${name.slice(3)}Icon`; + }, + + svgrDisplayName(name) { + return `forge(${name}DisplayName)`; + }, +}; diff --git a/tests/fixtures/browser-svgr-display-name-user-name-string/.svgrrc.js b/tests/fixtures/browser-svgr-display-name-user-name-string/.svgrrc.js new file mode 100644 index 0000000..b44c173 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-user-name-string/.svgrrc.js @@ -0,0 +1,3 @@ +export default { + memo: false, +}; diff --git a/tests/fixtures/browser-svgr-display-name-user-name-string/package.json b/tests/fixtures/browser-svgr-display-name-user-name-string/package.json new file mode 100644 index 0000000..4c1e3ae --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-user-name-string/package.json @@ -0,0 +1,17 @@ +{ + "name": "browser-svgr-display-name-user-name-string", + "version": "1.0.0", + "type": "module", + "module": "lib/index.js", + "exports": { + ".": { + "import": "./lib/index.js" + } + }, + "files": [ + "lib" + ], + "peerDependencies": { + "react": "^18.2.0" + } +} diff --git a/tests/fixtures/browser-svgr-display-name-user-name-string/src/Button.module.css b/tests/fixtures/browser-svgr-display-name-user-name-string/src/Button.module.css new file mode 100644 index 0000000..809f488 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-user-name-string/src/Button.module.css @@ -0,0 +1,7 @@ +.root { + background-image: url(./assets/css.svg); +} + +.label { + background-image: url(./assets/shared.svg); +} diff --git a/tests/fixtures/browser-svgr-display-name-user-name-string/src/Button.tsx b/tests/fixtures/browser-svgr-display-name-user-name-string/src/Button.tsx new file mode 100644 index 0000000..af738dd --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-user-name-string/src/Button.tsx @@ -0,0 +1,21 @@ +import { FC, MouseEventHandler, PropsWithChildren } from 'react'; + +import styles from './Button.module.css'; + +import imageUrl, { ReactComponent as Image } from './assets/js.svg'; +import { ReactComponent as Shared } from './assets/shared.svg'; + +type Props = PropsWithChildren<{ + onClick: MouseEventHandler; +}>; + +export const Button: FC = ({ children, onClick }: Props) => ( + +); diff --git a/tests/fixtures/browser-svgr-display-name-user-name-string/src/assets/css.svg b/tests/fixtures/browser-svgr-display-name-user-name-string/src/assets/css.svg new file mode 100644 index 0000000..9e09913 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-user-name-string/src/assets/css.svg @@ -0,0 +1,9 @@ + + + + + + + CSS + + diff --git a/tests/fixtures/browser-svgr-display-name-user-name-string/src/assets/js.svg b/tests/fixtures/browser-svgr-display-name-user-name-string/src/assets/js.svg new file mode 100644 index 0000000..e0c8939 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-user-name-string/src/assets/js.svg @@ -0,0 +1,9 @@ + + + + + + + JS + + diff --git a/tests/fixtures/browser-svgr-display-name-user-name-string/src/assets/shared.svg b/tests/fixtures/browser-svgr-display-name-user-name-string/src/assets/shared.svg new file mode 100644 index 0000000..7177954 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-user-name-string/src/assets/shared.svg @@ -0,0 +1,9 @@ + + + + + + + Shared + + diff --git a/tests/fixtures/browser-svgr-display-name-user-name-string/src/index.ts b/tests/fixtures/browser-svgr-display-name-user-name-string/src/index.ts new file mode 100644 index 0000000..fe9c53c --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-user-name-string/src/index.ts @@ -0,0 +1 @@ +export { Button } from './Button'; diff --git a/tests/fixtures/browser-svgr-display-name-user-name-string/tsconfig.forge.json b/tests/fixtures/browser-svgr-display-name-user-name-string/tsconfig.forge.json new file mode 100644 index 0000000..820c793 --- /dev/null +++ b/tests/fixtures/browser-svgr-display-name-user-name-string/tsconfig.forge.json @@ -0,0 +1,5 @@ +{ + "extends": "@tabula/typescript-config/tsconfig.browser.json", + + "include": ["src"] +} From 3052d4e2153fe747c8d5cae4be777c9262491902 Mon Sep 17 00:00:00 2001 From: Alexey Plutalov Date: Mon, 25 Dec 2023 19:25:44 +0300 Subject: [PATCH 4/6] feat: add typings and exports config type --- .forgerc | 2 +- package.json | 7 +++++++ src/config/index.ts | 2 ++ src/index.ts | 2 ++ 4 files changed, 12 insertions(+), 1 deletion(-) diff --git a/.forgerc b/.forgerc index 2c1a1ec..6a2eb3d 100644 --- a/.forgerc +++ b/.forgerc @@ -2,7 +2,7 @@ "$schema": "https://github.com/ReTable/forge/blob/main/schemas/forgerc.json", "target": "node", "check": true, - "typings": false, + "typings": true, "build": { "production": true }, diff --git a/package.json b/package.json index 8466244..7d20519 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,13 @@ "bin": { "forge": "lib/index.js" }, + "typings": "./typings/index.d.ts", + "exports": { + ".": { + "types": "./typings/index.d.ts" + }, + "./package.json": "./package.json" + }, "keywords": [ "tabula.io", "tomat.ai", diff --git a/src/config/index.ts b/src/config/index.ts index ab8eb91..989ad73 100644 --- a/src/config/index.ts +++ b/src/config/index.ts @@ -1 +1,3 @@ export { initConfig } from './initConfig'; + +export type { Config } from './schema'; diff --git a/src/index.ts b/src/index.ts index f9e6657..acbecbe 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,3 +1,5 @@ import { run } from './cli'; await run(); + +export type { Config } from './config'; From 9624b5879db77885f28c15555fe90f8577380959 Mon Sep 17 00:00:00 2001 From: Alexey Plutalov Date: Mon, 25 Dec 2023 19:26:06 +0300 Subject: [PATCH 5/6] chore: add changesets --- .changeset/purple-terms-know.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/purple-terms-know.md diff --git a/.changeset/purple-terms-know.md b/.changeset/purple-terms-know.md new file mode 100644 index 0000000..1f2e5ad --- /dev/null +++ b/.changeset/purple-terms-know.md @@ -0,0 +1,5 @@ +--- +'@tabula/forge': patch +--- + +add typings and exports config type From d70339587998a4cf8f51fbcc9fdc33f1db86c54e Mon Sep 17 00:00:00 2001 From: Alexey Plutalov Date: Mon, 25 Dec 2023 19:27:45 +0300 Subject: [PATCH 6/6] build: enter prerelease mode and version packages --- .changeset/pre.json | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 .changeset/pre.json diff --git a/.changeset/pre.json b/.changeset/pre.json new file mode 100644 index 0000000..61a4b37 --- /dev/null +++ b/.changeset/pre.json @@ -0,0 +1,8 @@ +{ + "mode": "pre", + "tag": "next", + "initialVersions": { + "@tabula/forge": "1.3.5" + }, + "changesets": [] +}