From da42478af82f30738ee5e54374c904e357d4e146 Mon Sep 17 00:00:00 2001 From: Ivan Lagunovsky Date: Sun, 10 Oct 2021 10:49:39 +0300 Subject: [PATCH 1/2] added the ability to specify the name of the generated component --- packages/babel-plugin-react-svg/package.json | 2 +- packages/babel-plugin-react-svg/src/index.ts | 49 ++++++++++++------- packages/react-svg-core/package.json | 2 +- packages/react-svg-core/src/index.ts | 13 +++-- packages/react-svg-loader-cli/README.md | 1 + packages/react-svg-loader-cli/package.json | 2 +- packages/react-svg-loader-cli/src/cli.ts | 3 +- packages/react-svg-loader/README.md | 3 +- packages/react-svg-loader/package.json | 2 +- packages/react-svg-loader/src/loader.ts | 6 ++- packages/rollup-plugin-react-svg/README.md | 4 ++ packages/rollup-plugin-react-svg/package.json | 2 +- packages/rollup-plugin-react-svg/src/index.ts | 7 ++- tests/loader.ts | 9 ++++ 14 files changed, 74 insertions(+), 31 deletions(-) diff --git a/packages/babel-plugin-react-svg/package.json b/packages/babel-plugin-react-svg/package.json index 440b87b..8c23a53 100644 --- a/packages/babel-plugin-react-svg/package.json +++ b/packages/babel-plugin-react-svg/package.json @@ -1,6 +1,6 @@ { "name": "babel-plugin-react-svg", - "version": "3.0.3", + "version": "3.1.0", "description": "Babel plugin to transform svg to react component", "keywords": [ "babel", diff --git a/packages/babel-plugin-react-svg/src/index.ts b/packages/babel-plugin-react-svg/src/index.ts index 4f6856e..1801f89 100644 --- a/packages/babel-plugin-react-svg/src/index.ts +++ b/packages/babel-plugin-react-svg/src/index.ts @@ -92,26 +92,34 @@ export default function(babel: BabelCore) { } }; + const exportBody = [ + t.objectPattern([ + t.objectProperty( + t.identifier("styles"), + t.assignmentPattern(t.identifier("styles"), t.objectExpression([])), + false, + true + ), + restElement(t.identifier("props")) + ]) + ]; + // returns // export default (props) => ${input_svg_node} const getExport = function(svg) { return t.exportDefaultDeclaration( - t.arrowFunctionExpression( - [ - t.objectPattern([ - t.objectProperty( - t.identifier("styles"), - t.assignmentPattern( - t.identifier("styles"), - t.objectExpression([]) - ), - false, - true - ), - restElement(t.identifier("props")) - ]) - ], - svg + t.arrowFunctionExpression(exportBody, svg) + ); + }; + + // returns + // export default function ${name}(props){ return ${input_svg_node} } + const getNamedExport = function(svg, name) { + return t.exportDefaultDeclaration( + t.functionDeclaration( + t.identifier(name), + exportBody, + t.blockStatement([t.returnStatement(svg)]) ) ); }; @@ -137,11 +145,16 @@ export default function(babel: BabelCore) { // export default props => ; // after passing through other visitors const svgExpressionVisitor = { - ExpressionStatement(path: any) { + ExpressionStatement(path: any, state: any) { if (!path.get("expression").isJSXElement()) return; if (path.get("expression.openingElement.name").node.name !== "svg") return; - path.replaceWith(getExport(path.get("expression").node)); + + path.replaceWith( + state.opts.functionName + ? getNamedExport(path.get("expression").node, state.opts.functionName) + : getExport(path.get("expression").node) + ); } }; diff --git a/packages/react-svg-core/package.json b/packages/react-svg-core/package.json index 558f5a2..734394b 100644 --- a/packages/react-svg-core/package.json +++ b/packages/react-svg-core/package.json @@ -1,6 +1,6 @@ { "name": "react-svg-core", - "version": "3.0.3", + "version": "3.1.0", "description": "Core for react-svg-loader", "keywords": [ "react-svg-loader" diff --git a/packages/react-svg-core/src/index.ts b/packages/react-svg-core/src/index.ts index 30c2e8a..e8b6ac6 100644 --- a/packages/react-svg-core/src/index.ts +++ b/packages/react-svg-core/src/index.ts @@ -12,10 +12,15 @@ export function optimize(opts: any = {}): (content: string) => Promise { return (content: string) => svgo.optimize(content).then(data => data.data); } +type TransformOpts = { jsx?: boolean; functionName?: string }; + // Babel Transform -export function transform({ jsx = false }: { jsx?: boolean } = {}): ( - content: string -) => string { +export function transform( + opts: TransformOpts = {} +): (content: string) => string { + const jsx = opts.jsx || false; + const functionName = opts.functionName || null; + return content => babelTransform(content, { babelrc: false, @@ -23,6 +28,6 @@ export function transform({ jsx = false }: { jsx?: boolean } = {}): ( presets: [jsx ? void 0 : require.resolve("@babel/preset-react")].filter( Boolean ), - plugins: [require.resolve("@babel/plugin-syntax-jsx"), plugin] + plugins: [require.resolve("@babel/plugin-syntax-jsx"), [plugin, {functionName}]] }); } diff --git a/packages/react-svg-loader-cli/README.md b/packages/react-svg-loader-cli/README.md index 78561ea..3ef858c 100644 --- a/packages/react-svg-loader-cli/README.md +++ b/packages/react-svg-loader-cli/README.md @@ -42,6 +42,7 @@ in the **SAME directory** as the files ## CLI Options + `--jsx`: Outputs JSX code instead of compiling it to JavaScript using babel-preset-react ++ `--functionName`: Generating a named function + `--stdout`: Outputs to STDOUT + `--svgo `: Supports SVGO Config YAML / JSON / JS + `--svgo.plugins <...plugins>`: Takes in an array of plugins that need to be enabled diff --git a/packages/react-svg-loader-cli/package.json b/packages/react-svg-loader-cli/package.json index 94cd5a3..a1f6013 100644 --- a/packages/react-svg-loader-cli/package.json +++ b/packages/react-svg-loader-cli/package.json @@ -1,6 +1,6 @@ { "name": "react-svg-loader-cli", - "version": "3.0.3", + "version": "3.1.0", "description": "react-svg-loader cli", "keywords": [ "cli", diff --git a/packages/react-svg-loader-cli/src/cli.ts b/packages/react-svg-loader-cli/src/cli.ts index d296848..abb4921 100644 --- a/packages/react-svg-loader-cli/src/cli.ts +++ b/packages/react-svg-loader-cli/src/cli.ts @@ -94,7 +94,8 @@ function run() { const query = { svgo: svgoOpts, - jsx: argv.jsx + jsx: argv.jsx, + functionName: argv.functionName }; loader.apply(getLoaderContext({ argv, query, file }), [source]); diff --git a/packages/react-svg-loader/README.md b/packages/react-svg-loader/README.md index 877bab4..e2c9b25 100644 --- a/packages/react-svg-loader/README.md +++ b/packages/react-svg-loader/README.md @@ -41,7 +41,8 @@ By default the loader outputs ES2015 code (with JSX compiled to JavaScript using { loader: "react-svg-loader", options: { - jsx: true // true outputs JSX tags + jsx: true, // true outputs JSX tags + functionName: (filePath) => path.parse(filePath).name, // whether to output a named function, null for anonymous functions } } ] diff --git a/packages/react-svg-loader/package.json b/packages/react-svg-loader/package.json index 74ddc9c..55d71b5 100644 --- a/packages/react-svg-loader/package.json +++ b/packages/react-svg-loader/package.json @@ -1,6 +1,6 @@ { "name": "react-svg-loader", - "version": "3.0.3", + "version": "3.1.0", "description": "Optimize svg and load it as a React Component", "keywords": [ "loader", diff --git a/packages/react-svg-loader/src/loader.ts b/packages/react-svg-loader/src/loader.ts index ce19d72..b5318ea 100644 --- a/packages/react-svg-loader/src/loader.ts +++ b/packages/react-svg-loader/src/loader.ts @@ -4,11 +4,15 @@ import { optimize, transform } from "react-svg-core"; export default function(content: string) { const loaderOpts = loaderUtils.getOptions(this) || {}; + const functionName = loaderOpts.functionName + ? loaderOpts.functionName(this.resourcePath) + : null; + const cb = this.async(); Promise.resolve(String(content)) .then(optimize(loaderOpts.svgo)) - .then(transform({ jsx: loaderOpts.jsx })) + .then(transform({ jsx: loaderOpts.jsx, functionName })) .then((result: any) => cb(null, result.code)) .catch(err => cb(err)); } diff --git a/packages/rollup-plugin-react-svg/README.md b/packages/rollup-plugin-react-svg/README.md index 8c6a3d2..22755a0 100644 --- a/packages/rollup-plugin-react-svg/README.md +++ b/packages/rollup-plugin-react-svg/README.md @@ -17,6 +17,7 @@ yarn add rollup-plugin-react-svg --dev ```js // rollup.config.js import reactSvg from "rollup-plugin-react-svg"; +import path from 'path'; export default { ...opts, @@ -33,6 +34,9 @@ export default { // whether to output jsx jsx: false, + // whether to output a named function + functionName: (filePath) => path.parse(filePath).name, + // include: string include: null, diff --git a/packages/rollup-plugin-react-svg/package.json b/packages/rollup-plugin-react-svg/package.json index 07245a8..c4c836c 100644 --- a/packages/rollup-plugin-react-svg/package.json +++ b/packages/rollup-plugin-react-svg/package.json @@ -1,6 +1,6 @@ { "name": "rollup-plugin-react-svg", - "version": "3.0.3", + "version": "3.1.0", "description": "Optimize svg and load it as a React Component", "keywords": [ "loader", diff --git a/packages/rollup-plugin-react-svg/src/index.ts b/packages/rollup-plugin-react-svg/src/index.ts index eea7eeb..d76b649 100644 --- a/packages/rollup-plugin-react-svg/src/index.ts +++ b/packages/rollup-plugin-react-svg/src/index.ts @@ -8,6 +8,7 @@ type PluginOpts = { exclude?: any; svgo?: any; jsx?: boolean; + functionName?: (filePath: string) => string; }; export default function reactSvgLoadPlugin(options: PluginOpts = {}): any { @@ -20,9 +21,13 @@ export default function reactSvgLoadPlugin(options: PluginOpts = {}): any { const contents = fs.readFileSync(id); + const functionName = options.functionName + ? options.functionName(id) + : null; + return Promise.resolve(String(contents)) .then(optimize(options.svgo)) - .then(transform({ jsx: options.jsx })) + .then(transform({ jsx: options.jsx, functionName })) .then((result: any) => result.code); } }; diff --git a/tests/loader.ts b/tests/loader.ts index 4bf476d..fcb4a2d 100644 --- a/tests/loader.ts +++ b/tests/loader.ts @@ -208,3 +208,12 @@ test("style attr of children", function(t) { }) .catch(t.end); }); + +test("creating a named function", function(t) { + loader(``, { functionName: () => "Test" }) + .then(component => { + t.equal((component as Function).name, "Test"); + t.end(); + }) + .catch(t.end); +}); From 03d06cff870eb2c239e187a82ed4bb912a8c5124 Mon Sep 17 00:00:00 2001 From: Ivan Lagunovsky Date: Sat, 16 Oct 2021 10:23:53 +0300 Subject: [PATCH 2/2] rename functionName to componentName, update changelog --- CHANGELOG.md | 20 +++++ packages/babel-plugin-react-svg/src/index.ts | 29 ++++--- packages/react-svg-core/src/index.ts | 13 +-- packages/react-svg-loader-cli/README.md | 2 +- packages/react-svg-loader-cli/src/cli.ts | 16 ++-- packages/react-svg-loader/README.md | 2 +- packages/react-svg-loader/src/loader.ts | 10 +-- packages/rollup-plugin-react-svg/README.md | 2 +- packages/rollup-plugin-react-svg/src/index.ts | 10 +-- tests/loader.ts | 80 +++++++++---------- 10 files changed, 105 insertions(+), 79 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f290ba1..574062b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,25 @@ # Changelog +## 3.1.0 + +You can specify the name of the component. + +```js +{ + test: /\.svg$/, + use: [{ + loader: 'react-svg-loader', + options: { + componentName: (resource: string) => { + return config.environment.production === true + ? null + : upperFirst(camelCase(path.parse(resource).name)) + }, + } + }] +} +``` + ## 3.0.3 - Ignore babel config files during transformation [#264](https://github.com/boopathi/react-svg-loader/pull/264) diff --git a/packages/babel-plugin-react-svg/src/index.ts b/packages/babel-plugin-react-svg/src/index.ts index 1801f89..1a251ed 100644 --- a/packages/babel-plugin-react-svg/src/index.ts +++ b/packages/babel-plugin-react-svg/src/index.ts @@ -2,7 +2,7 @@ import cssToObj from "./css-to-obj"; import { hyphenToCamel, namespaceToCamel } from "./camelize"; import BabelCore from "@babel/core"; -export default function(babel: BabelCore) { +export default function (babel: BabelCore) { const t = babel.types; const restElement = t.restElement ? t.restElement : t.restProperty; @@ -70,7 +70,7 @@ export default function(babel: BabelCore) { // if (name.node.name === "style") { let csso = cssToObj(value.node.value); - let properties = Object.keys(csso).map(prop => + let properties = Object.keys(csso).map((prop) => t.objectProperty( t.identifier(hyphenToCamel(prop)), t.stringLiteral(csso[prop]) @@ -89,7 +89,7 @@ export default function(babel: BabelCore) { name.replaceWith(t.jSXIdentifier(hyphenToCamel(path.node.name.name))); } } - } + }, }; const exportBody = [ @@ -100,13 +100,13 @@ export default function(babel: BabelCore) { false, true ), - restElement(t.identifier("props")) - ]) + restElement(t.identifier("props")), + ]), ]; // returns // export default (props) => ${input_svg_node} - const getExport = function(svg) { + const getExport = function (svg) { return t.exportDefaultDeclaration( t.arrowFunctionExpression(exportBody, svg) ); @@ -114,7 +114,7 @@ export default function(babel: BabelCore) { // returns // export default function ${name}(props){ return ${input_svg_node} } - const getNamedExport = function(svg, name) { + const getNamedExport = function (svg, name) { return t.exportDefaultDeclaration( t.functionDeclaration( t.identifier(name), @@ -135,7 +135,7 @@ export default function(babel: BabelCore) { // add spread props path.node.attributes.push(t.jSXSpreadAttribute(t.identifier("props"))); } - } + }, }; // converts @@ -151,11 +151,14 @@ export default function(babel: BabelCore) { return; path.replaceWith( - state.opts.functionName - ? getNamedExport(path.get("expression").node, state.opts.functionName) + state.opts.componentName + ? getNamedExport( + path.get("expression").node, + state.opts.componentName + ) : getExport(path.get("expression").node) ); - } + }, }; const programVisitor = { @@ -167,7 +170,7 @@ export default function(babel: BabelCore) { t.stringLiteral("react") ) ); - } + }, }; return { @@ -177,6 +180,6 @@ export default function(babel: BabelCore) { svgExpressionVisitor, svgVisitor, attrVisitor - ) + ), }; } diff --git a/packages/react-svg-core/src/index.ts b/packages/react-svg-core/src/index.ts index e8b6ac6..60a4443 100644 --- a/packages/react-svg-core/src/index.ts +++ b/packages/react-svg-core/src/index.ts @@ -9,25 +9,28 @@ export function optimize(opts: any = {}): (content: string) => Promise { opts = validateAndFix(opts); const svgo = new Svgo(opts); - return (content: string) => svgo.optimize(content).then(data => data.data); + return (content: string) => svgo.optimize(content).then((data) => data.data); } -type TransformOpts = { jsx?: boolean; functionName?: string }; +type TransformOpts = { jsx?: boolean; componentName?: string }; // Babel Transform export function transform( opts: TransformOpts = {} ): (content: string) => string { const jsx = opts.jsx || false; - const functionName = opts.functionName || null; + const componentName = opts.componentName || null; - return content => + return (content) => babelTransform(content, { babelrc: false, configFile: false, presets: [jsx ? void 0 : require.resolve("@babel/preset-react")].filter( Boolean ), - plugins: [require.resolve("@babel/plugin-syntax-jsx"), [plugin, {functionName}]] + plugins: [ + require.resolve("@babel/plugin-syntax-jsx"), + [plugin, { componentName }], + ], }); } diff --git a/packages/react-svg-loader-cli/README.md b/packages/react-svg-loader-cli/README.md index 3ef858c..3d11981 100644 --- a/packages/react-svg-loader-cli/README.md +++ b/packages/react-svg-loader-cli/README.md @@ -42,7 +42,7 @@ in the **SAME directory** as the files ## CLI Options + `--jsx`: Outputs JSX code instead of compiling it to JavaScript using babel-preset-react -+ `--functionName`: Generating a named function ++ `--componentName`: Generating a named function + `--stdout`: Outputs to STDOUT + `--svgo `: Supports SVGO Config YAML / JSON / JS + `--svgo.plugins <...plugins>`: Takes in an array of plugins that need to be enabled diff --git a/packages/react-svg-loader-cli/src/cli.ts b/packages/react-svg-loader-cli/src/cli.ts index abb4921..01693ea 100644 --- a/packages/react-svg-loader-cli/src/cli.ts +++ b/packages/react-svg-loader-cli/src/cli.ts @@ -31,16 +31,16 @@ function getArgv() { .option("jsx", { describe: "Output JSX instead of applying babel-preset-react", boolean: true, - default: false + default: false, }) .option("stdout", { describe: "Print output to stdout", boolean: true, - default: false + default: false, }) // svgo options .option("svgo", { - describe: "Path to YAML or JS or JSON config file for SVGO" + describe: "Path to YAML or JS or JSON config file for SVGO", }) .demand(1) .version(require("../package.json").version) @@ -58,7 +58,7 @@ function getSVGOOpts(argv) { svgoOpts = argv.svgo; // convert plugin object to array of objects if (isPlainObject(svgoOpts.plugins)) { - svgoOpts.plugins = Object.keys(svgoOpts.plugins).map(key => { + svgoOpts.plugins = Object.keys(svgoOpts.plugins).map((key) => { return { [key]: svgoOpts.plugins[key] === "false" ? false : true }; }); } else if (typeof svgoOpts.plugins === "string") { @@ -74,14 +74,14 @@ function getLoaderContext({ argv, query, file }) { query, addDependency() {}, async() { - return function(err, result) { + return function (err, result) { /* eslint-disable no-console */ if (err) console.error("REACT-SVG-LOADER ERROR", file, err.stack); else if (argv["stdout"]) console.log(result); else fs.writeFileSync(makeFilename(file), result); /* eslint-enable */ }; - } + }, }; } @@ -89,13 +89,13 @@ function run() { const argv = getArgv(); const svgoOpts = getSVGOOpts(argv); - argv._.map(file => { + argv._.map((file) => { const source = fs.readFileSync(file); const query = { svgo: svgoOpts, jsx: argv.jsx, - functionName: argv.functionName + componentName: argv.componentName, }; loader.apply(getLoaderContext({ argv, query, file }), [source]); diff --git a/packages/react-svg-loader/README.md b/packages/react-svg-loader/README.md index e2c9b25..bbc9bb6 100644 --- a/packages/react-svg-loader/README.md +++ b/packages/react-svg-loader/README.md @@ -42,7 +42,7 @@ By default the loader outputs ES2015 code (with JSX compiled to JavaScript using loader: "react-svg-loader", options: { jsx: true, // true outputs JSX tags - functionName: (filePath) => path.parse(filePath).name, // whether to output a named function, null for anonymous functions + componentName: (filePath) => path.parse(filePath).name, // whether to output a named function, null for anonymous functions } } ] diff --git a/packages/react-svg-loader/src/loader.ts b/packages/react-svg-loader/src/loader.ts index b5318ea..62cd5d4 100644 --- a/packages/react-svg-loader/src/loader.ts +++ b/packages/react-svg-loader/src/loader.ts @@ -1,18 +1,18 @@ import loaderUtils from "loader-utils"; import { optimize, transform } from "react-svg-core"; -export default function(content: string) { +export default function (content: string) { const loaderOpts = loaderUtils.getOptions(this) || {}; - const functionName = loaderOpts.functionName - ? loaderOpts.functionName(this.resourcePath) + const componentName = loaderOpts.componentName + ? loaderOpts.componentName(this.resourcePath) : null; const cb = this.async(); Promise.resolve(String(content)) .then(optimize(loaderOpts.svgo)) - .then(transform({ jsx: loaderOpts.jsx, functionName })) + .then(transform({ jsx: loaderOpts.jsx, componentName })) .then((result: any) => cb(null, result.code)) - .catch(err => cb(err)); + .catch((err) => cb(err)); } diff --git a/packages/rollup-plugin-react-svg/README.md b/packages/rollup-plugin-react-svg/README.md index 22755a0..6137ae0 100644 --- a/packages/rollup-plugin-react-svg/README.md +++ b/packages/rollup-plugin-react-svg/README.md @@ -35,7 +35,7 @@ export default { jsx: false, // whether to output a named function - functionName: (filePath) => path.parse(filePath).name, + componentName: (filePath) => path.parse(filePath).name, // include: string include: null, diff --git a/packages/rollup-plugin-react-svg/src/index.ts b/packages/rollup-plugin-react-svg/src/index.ts index d76b649..4b97fe0 100644 --- a/packages/rollup-plugin-react-svg/src/index.ts +++ b/packages/rollup-plugin-react-svg/src/index.ts @@ -8,7 +8,7 @@ type PluginOpts = { exclude?: any; svgo?: any; jsx?: boolean; - functionName?: (filePath: string) => string; + componentName?: (filePath: string) => string; }; export default function reactSvgLoadPlugin(options: PluginOpts = {}): any { @@ -21,14 +21,14 @@ export default function reactSvgLoadPlugin(options: PluginOpts = {}): any { const contents = fs.readFileSync(id); - const functionName = options.functionName - ? options.functionName(id) + const componentName = options.componentName + ? options.componentName(id) : null; return Promise.resolve(String(contents)) .then(optimize(options.svgo)) - .then(transform({ jsx: options.jsx, functionName })) + .then(transform({ jsx: options.jsx, componentName })) .then((result: any) => result.code); - } + }, }; } diff --git a/tests/loader.ts b/tests/loader.ts index fcb4a2d..7664008 100644 --- a/tests/loader.ts +++ b/tests/loader.ts @@ -6,13 +6,13 @@ import vm from "vm"; import { transform } from "@babel/core"; function loader(content: string, query?: any) { - return new Promise(function(resolve, reject) { + return new Promise(function (resolve, reject) { let context = { query, cacheable() {}, addDependency() {}, async() { - return function(err, result) { + return function (err, result) { if (err) return reject(err); let exports = {}; @@ -25,17 +25,17 @@ function loader(content: string, query?: any) { [ "@babel/preset-env", { - targets: { ie: 11 } - } + targets: { ie: 11 }, + }, ], - "@babel/preset-react" - ] + "@babel/preset-react", + ], }).code, sandbox ); resolve(sandbox.exports.default); }; - } + }, }; reactSVGLoader.apply(context, [content]); }); @@ -47,23 +47,23 @@ function render(element) { return r.getRenderOutput(); } -test("empty svg tag", function(t) { +test("empty svg tag", function (t) { t.plan(1); loader(``) - .then(component => render(React.createElement(component))) - .then(r => { + .then((component) => render(React.createElement(component))) + .then((r) => { t.equal(r.type, "svg"); }) .catch(t.end); }); -test("svg tag with some props", function(t) { +test("svg tag with some props", function (t) { t.plan(4); loader(``) - .then(component => render(React.createElement(component))) - .then(r => { + .then((component) => render(React.createElement(component))) + .then((r) => { t.equal(r.type, "svg", "tag check"); t.assert(Object.keys(r.props).length > 1, "assert props exists"); t.equal(r.props.width, "50", "width prop check"); @@ -72,16 +72,16 @@ test("svg tag with some props", function(t) { .catch(t.end); }); -test("passing props to empty svg tag", function(t) { +test("passing props to empty svg tag", function (t) { t.plan(4); loader(``) // pass in number - comes out as number, // pass in string - comes out as string - .then(component => + .then((component) => render(React.createElement(component, { width: 100, height: "100" })) ) - .then(r => { + .then((r) => { t.equal(r.type, "svg", "tag check"); t.assert(Object.keys(r.props).length > 1, "assert props exists"); t.equal(r.props.width, 100, "width prop check"); @@ -90,14 +90,14 @@ test("passing props to empty svg tag", function(t) { .catch(t.end); }); -test("overriding props of an svg", function(t) { +test("overriding props of an svg", function (t) { t.plan(4); loader(``) - .then(component => + .then((component) => render(React.createElement(component, { width: 100, height: "100" })) ) - .then(r => { + .then((r) => { t.equal(r.type, "svg", "tag check"); t.assert(Object.keys(r.props).length > 1, "assert props exists"); t.equal(r.props.width, 100, "width prop check"); @@ -106,27 +106,27 @@ test("overriding props of an svg", function(t) { .catch(t.end); }); -test("compression: namespace attr", function(t) { +test("compression: namespace attr", function (t) { t.plan(1); loader(``) - .then(component => render(React.createElement(component))) - .then(r => { + .then((component) => render(React.createElement(component))) + .then((r) => { t.equal(Object.keys(r.props).length, 0, "namespace props are stripped"); }) .catch(t.end); }); -test("should not convert data-* and aria-* props", function(t) { +test("should not convert data-* and aria-* props", function (t) { t.plan(2); loader(``, { svgo: { - plugins: [{ removeUnknownsAndDefaults: false }] - } + plugins: [{ removeUnknownsAndDefaults: false }], + }, }) - .then(component => render(React.createElement(component))) - .then(r => { + .then((component) => render(React.createElement(component))) + .then((r) => { t.notEqual( Object.keys(r.props).indexOf("data-foo"), -1, @@ -147,9 +147,9 @@ const circle = ` `; -test("converts attr from hyphen to camel", function(t) { +test("converts attr from hyphen to camel", function (t) { loader(circle) - .then(c => { + .then((c) => { let r = render(React.createElement(c)); t.ok(r.props.pointerEvents, "contains pointerEvents"); t.notOk(r.props["pointer-events"], "does not contain pointer-events"); @@ -158,9 +158,9 @@ test("converts attr from hyphen to camel", function(t) { .catch(t.end); }); -test("style attr of root svg", function(t) { +test("style attr of root svg", function (t) { loader(circle) - .then(c => { + .then((c) => { let r = render(React.createElement(c)); t.ok(r.props.style, "contains style attr"); t.equal(typeof r.props.style, "object", "style attr is an object"); @@ -172,9 +172,9 @@ test("style attr of root svg", function(t) { .catch(t.end); }); -test("converts class to className", function(t) { +test("converts class to className", function (t) { loader(circle) - .then(c => { + .then((c) => { let r = render(React.createElement(c)); t.ok(r.props.className, "contains className"); t.notOk(r.props.class, "does not contain class"); @@ -183,9 +183,9 @@ test("converts class to className", function(t) { .catch(t.end); }); -test("converts attr of children from hyphen to camel", function(t) { +test("converts attr of children from hyphen to camel", function (t) { loader(circle) - .then(c => { + .then((c) => { let r = render(React.createElement(c)); let props = r.props.children.props; t.ok(props.strokeWidth, "contains strokeWidth"); @@ -195,9 +195,9 @@ test("converts attr of children from hyphen to camel", function(t) { .catch(t.end); }); -test("style attr of children", function(t) { +test("style attr of children", function (t) { loader(circle) - .then(c => { + .then((c) => { let r = render(React.createElement(c)); let props = r.props.children.props; t.ok(props.style, "contais style attr"); @@ -209,9 +209,9 @@ test("style attr of children", function(t) { .catch(t.end); }); -test("creating a named function", function(t) { - loader(``, { functionName: () => "Test" }) - .then(component => { +test("creating a named function", function (t) { + loader(``, { componentName: () => "Test" }) + .then((component) => { t.equal((component as Function).name, "Test"); t.end(); })