Support for generating SVG components without .defaultProps
#129
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
|
|
@@ -25,30 +25,46 @@ export default declare(({ | |||||
| SVG_NAME, | ||||||
| SVG_CODE, | ||||||
| SVG_DEFAULT_PROPS_CODE, | ||||||
| EMIT_DEPRECATED_DEFAULT_PROPS, | ||||||
| }) => { | ||||||
| const defaultProps = SVG_DEFAULT_PROPS_CODE | ||||||
| ? 'var props = objectAssign({}, SVG_DEFAULT_PROPS_CODE, overrides);' | ||||||
| : ''; | ||||||
| const PROPS_NAME = SVG_DEFAULT_PROPS_CODE ? 'overrides' : 'props'; | ||||||
|
There was a problem hiding this comment. where does "overrides" come from? is that a react thing? There was a problem hiding this comment. Nop, thats just renamed props, I didn't want to change the body ( var SVG_NAME = function SVG_NAME(overrides) {
var props = objectAssign({}, SVG_DEFAULT_PROPS_CODE, overrides);
return SVG_CODE // which will probably ref `props`, which I didn't want to mess with so overrides is just a rename
} |
||||||
|
|
||||||
| const namedTemplate = ` | ||||||
| ${SVG_DEFAULT_PROPS_CODE ? '' : ''} | ||||||
Grohden marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||||||
| var SVG_NAME = function SVG_NAME(PROPS_NAME) { ${defaultProps} return SVG_CODE; }; | ||||||
| ${SVG_DEFAULT_PROPS_CODE && EMIT_DEPRECATED_DEFAULT_PROPS ? 'SVG_NAME.defaultProps = SVG_DEFAULT_PROPS_CODE;' : ''} | ||||||
| ${IS_EXPORT ? 'export { SVG_NAME };' : ''} | ||||||
| `; | ||||||
| const anonymousTemplate = ` | ||||||
| var Component = function (PROPS_NAME) { ${defaultProps}; return SVG_CODE; }; | ||||||
|
There was a problem hiding this comment.
Suggested change
|
||||||
| ${SVG_DEFAULT_PROPS_CODE && EMIT_DEPRECATED_DEFAULT_PROPS ? 'Component.defaultProps = SVG_DEFAULT_PROPS_CODE;' : ''} | ||||||
| Component.displayName = 'EXPORT_FILENAME'; | ||||||
| export default Component; | ||||||
| `; | ||||||
|
|
||||||
| if (SVG_NAME !== 'default') { | ||||||
| return template(namedTemplate)({ | ||||||
| SVG_NAME, SVG_CODE, SVG_DEFAULT_PROPS_CODE, PROPS_NAME, | ||||||
| }); | ||||||
| } | ||||||
| return template(anonymousTemplate)({ | ||||||
| SVG_CODE, SVG_DEFAULT_PROPS_CODE, EXPORT_FILENAME, PROPS_NAME, | ||||||
| }); | ||||||
ljharb marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
| }; | ||||||
|
|
||||||
| function applyPlugin(importIdentifier, importPath, path, state, isExport, exportFilename) { | ||||||
| if (typeof importPath !== 'string') { | ||||||
| throw new TypeError('`applyPlugin` `importPath` must be a string'); | ||||||
| } | ||||||
| const { | ||||||
| ignorePattern, | ||||||
| caseSensitive, | ||||||
| filename: providedFilename, | ||||||
| emitDeprecatedDefaultProps = false, | ||||||
|
There was a problem hiding this comment. @ljharb I mentioned in the PR description, but JIC, this is a breaking change if this is default I think that since react went with the warnings this is a good thing (no warnings out of the box experience), but as a lib consumer I also don't love breaking changes 😞 though IMO, just reading the change log should do it 🤷 |
||||||
| } = state.opts; | ||||||
| const { file, filename } = state; | ||||||
| let newPath; | ||||||
| if (ignorePattern) { | ||||||
|
|
@@ -93,6 +109,8 @@ export default declare(({ | |||||
| SVG_CODE: svgCode, | ||||||
| IS_EXPORT: isExport, | ||||||
| EXPORT_FILENAME: exportFilename, | ||||||
| // https://github.com/facebook/react/pull/16210 | ||||||
| EMIT_DEPRECATED_DEFAULT_PROPS: emitDeprecatedDefaultProps, | ||||||
| }; | ||||||
|
|
||||||
| // Move props off of element and into defaultProps | ||||||
|
|
@@ -124,6 +142,8 @@ export default declare(({ | |||||
|
|
||||||
| file.get('ensureReact')(); | ||||||
| file.set('ensureReact', () => {}); | ||||||
| file.get('ensureObjectAssign')(); | ||||||
| file.set('ensureObjectAssign', () => {}); | ||||||
| } | ||||||
| return newPath; | ||||||
| } | ||||||
|
|
@@ -138,6 +158,20 @@ export default declare(({ | |||||
| if (typeof filename === 'undefined' && typeof opts.filename !== 'string') { | ||||||
| throw new TypeError('the "filename" option is required when transforming code'); | ||||||
| } | ||||||
|
|
||||||
| if (!path.scope.hasBinding('object.assign/implementation')) { | ||||||
|
||||||
| const assignDeclaration = t.importDeclaration([ | ||||||
| t.importDefaultSpecifier(t.identifier('objectAssign')), | ||||||
| ], t.stringLiteral('object.assign/implementation')); | ||||||
|
|
||||||
| file.set('ensureObjectAssign', () => { | ||||||
| const [newPath] = path.unshiftContainer('body', assignDeclaration); | ||||||
| newPath.get('specifiers').forEach((specifier) => { path.scope.registerBinding('module', specifier); }); | ||||||
| }); | ||||||
| } else { | ||||||
| file.set('ensureObjectAssign', () => {}); | ||||||
| } | ||||||
|
||||||
|
|
||||||
| if (!path.scope.hasBinding('React')) { | ||||||
| const reactImportDeclaration = t.importDeclaration([ | ||||||
| t.importDefaultSpecifier(t.identifier('React')), | ||||||
|
|
||||||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| import SVG from './close.svg'; | ||
|
|
||
| export function MyFunctionIcon() { | ||
| return <SVG />; | ||
| } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
btw, one implication of assign here is that just
propswill never be a stable ref, but I don't think anything in theSVG_CODEwill ref justpropsalone so it should be ok...