| 1 | "use strict";
|
|---|
| 2 |
|
|---|
| 3 | exports.__esModule = true;
|
|---|
| 4 | exports.default = void 0;
|
|---|
| 5 | const elementToComponent = {
|
|---|
| 6 | svg: 'Svg',
|
|---|
| 7 | circle: 'Circle',
|
|---|
| 8 | clipPath: 'ClipPath',
|
|---|
| 9 | ellipse: 'Ellipse',
|
|---|
| 10 | g: 'G',
|
|---|
| 11 | linearGradient: 'LinearGradient',
|
|---|
| 12 | radialGradient: 'RadialGradient',
|
|---|
| 13 | line: 'Line',
|
|---|
| 14 | path: 'Path',
|
|---|
| 15 | pattern: 'Pattern',
|
|---|
| 16 | polygon: 'Polygon',
|
|---|
| 17 | polyline: 'Polyline',
|
|---|
| 18 | rect: 'Rect',
|
|---|
| 19 | symbol: 'Symbol',
|
|---|
| 20 | text: 'Text',
|
|---|
| 21 | textPath: 'TextPath',
|
|---|
| 22 | tspan: 'TSpan',
|
|---|
| 23 | use: 'Use',
|
|---|
| 24 | defs: 'Defs',
|
|---|
| 25 | stop: 'Stop',
|
|---|
| 26 | mask: 'Mask',
|
|---|
| 27 | image: 'Image',
|
|---|
| 28 | foreignObject: 'ForeignObject'
|
|---|
| 29 | };
|
|---|
| 30 |
|
|---|
| 31 | const expoPrefix = (component, expo) => {
|
|---|
| 32 | // Prefix with 'Svg.' in the case we're transforming for Expo
|
|---|
| 33 | if (!expo) {
|
|---|
| 34 | return component;
|
|---|
| 35 | }
|
|---|
| 36 |
|
|---|
| 37 | return (component !== 'Svg' ? 'Svg.' : '') + component;
|
|---|
| 38 | };
|
|---|
| 39 |
|
|---|
| 40 | const plugin = ({
|
|---|
| 41 | types: t
|
|---|
| 42 | }, {
|
|---|
| 43 | expo
|
|---|
| 44 | }) => {
|
|---|
| 45 | function replaceElement(path, state) {
|
|---|
| 46 | const {
|
|---|
| 47 | name
|
|---|
| 48 | } = path.node.openingElement.name; // Replace element by react-native-svg components
|
|---|
| 49 |
|
|---|
| 50 | const component = elementToComponent[name];
|
|---|
| 51 |
|
|---|
| 52 | if (component) {
|
|---|
| 53 | const prefixedComponent = expoPrefix(component, expo);
|
|---|
| 54 | const openingElementName = path.get('openingElement.name');
|
|---|
| 55 | openingElementName.replaceWith(t.jsxIdentifier(prefixedComponent));
|
|---|
| 56 |
|
|---|
| 57 | if (path.has('closingElement')) {
|
|---|
| 58 | const closingElementName = path.get('closingElement.name');
|
|---|
| 59 | closingElementName.replaceWith(t.jsxIdentifier(prefixedComponent));
|
|---|
| 60 | }
|
|---|
| 61 |
|
|---|
| 62 | state.replacedComponents.add(prefixedComponent);
|
|---|
| 63 | return;
|
|---|
| 64 | } // Remove element if not supported
|
|---|
| 65 |
|
|---|
| 66 |
|
|---|
| 67 | state.unsupportedComponents.add(name);
|
|---|
| 68 | path.remove();
|
|---|
| 69 | }
|
|---|
| 70 |
|
|---|
| 71 | const svgElementVisitor = {
|
|---|
| 72 | JSXElement(path, state) {
|
|---|
| 73 | if (!path.get('openingElement.name').isJSXIdentifier({
|
|---|
| 74 | name: 'svg'
|
|---|
| 75 | })) {
|
|---|
| 76 | return;
|
|---|
| 77 | }
|
|---|
| 78 |
|
|---|
| 79 | replaceElement(path, state);
|
|---|
| 80 | path.traverse(jsxElementVisitor, state);
|
|---|
| 81 | }
|
|---|
| 82 |
|
|---|
| 83 | };
|
|---|
| 84 | const jsxElementVisitor = {
|
|---|
| 85 | JSXElement(path, state) {
|
|---|
| 86 | replaceElement(path, state);
|
|---|
| 87 | }
|
|---|
| 88 |
|
|---|
| 89 | };
|
|---|
| 90 | const importDeclarationVisitor = {
|
|---|
| 91 | ImportDeclaration(path, state) {
|
|---|
| 92 | if (path.get('source').isStringLiteral({
|
|---|
| 93 | value: 'react-native-svg'
|
|---|
| 94 | })) {
|
|---|
| 95 | state.replacedComponents.forEach(component => {
|
|---|
| 96 | if (path.get('specifiers').some(specifier => specifier.get('local').isIdentifier({
|
|---|
| 97 | name: component
|
|---|
| 98 | }))) {
|
|---|
| 99 | return;
|
|---|
| 100 | }
|
|---|
| 101 |
|
|---|
| 102 | path.pushContainer('specifiers', t.importSpecifier(t.identifier(component), t.identifier(component)));
|
|---|
| 103 | });
|
|---|
| 104 | } else if (path.get('source').isStringLiteral({
|
|---|
| 105 | value: 'expo'
|
|---|
| 106 | })) {
|
|---|
| 107 | path.pushContainer('specifiers', t.importSpecifier(t.identifier('Svg'), t.identifier('Svg')));
|
|---|
| 108 | } else {
|
|---|
| 109 | return;
|
|---|
| 110 | }
|
|---|
| 111 |
|
|---|
| 112 | if (state.unsupportedComponents.size && !path.has('trailingComments')) {
|
|---|
| 113 | const componentList = [...state.unsupportedComponents].join(', ');
|
|---|
| 114 | path.addComment('trailing', ` SVGR has dropped some elements not supported by react-native-svg: ${componentList} `);
|
|---|
| 115 | }
|
|---|
| 116 | }
|
|---|
| 117 |
|
|---|
| 118 | };
|
|---|
| 119 | return {
|
|---|
| 120 | visitor: {
|
|---|
| 121 | Program(path, state) {
|
|---|
| 122 | state.replacedComponents = new Set();
|
|---|
| 123 | state.unsupportedComponents = new Set();
|
|---|
| 124 | path.traverse(svgElementVisitor, state);
|
|---|
| 125 | path.traverse(importDeclarationVisitor, state);
|
|---|
| 126 | }
|
|---|
| 127 |
|
|---|
| 128 | }
|
|---|
| 129 | };
|
|---|
| 130 | };
|
|---|
| 131 |
|
|---|
| 132 | var _default = plugin;
|
|---|
| 133 | exports.default = _default; |
|---|