@teleporthq/teleport-plugin-react-styled-components - npm Package Compare versions

Comparing version 0.10.0-alpha.5 to 0.10.0-alpha.6

dist/cjs/index.d.ts

@@ -6,2 +6,3 @@ import { ComponentPluginFactory, ComponentPlugin } from '@teleporthq/teleport-types';
     componentLibrary?: 'react' | 'reactnative';
+    illegalComponentNames?: string[];
 }
@@ -8,0 +9,0 @@ export declare const createReactStyledComponentsPlugin: ComponentPluginFactory<StyledComponentsConfig>;

dist/cjs/index.js

@@ -44,3 +44,3 @@ "use strict";
 exports.createReactStyledComponentsPlugin = function (config) {
-    var _a = config || {}, _b = _a.componentChunkName, componentChunkName = _b === void 0 ? 'jsx-component' : _b, _c = _a.importChunkName, importChunkName = _c === void 0 ? 'import-local' : _c, _d = _a.componentLibrary, componentLibrary = _d === void 0 ? 'react' : _d;
+    var _a = config || {}, _b = _a.componentChunkName, componentChunkName = _b === void 0 ? 'jsx-component' : _b, _c = _a.importChunkName, importChunkName = _c === void 0 ? 'import-local' : _c, _d = _a.componentLibrary, componentLibrary = _d === void 0 ? 'react' : _d, _e = _a.illegalComponentNames, illegalComponentNames = _e === void 0 ? [] : _e;
     var reactStyledComponentsPlugin = function (structure) { return __awaiter(_this, void 0, void 0, function () {
@@ -64,2 +64,6 @@ var uidl, chunks, dependencies, node, componentChunk, jsxNodesLookup, propsPrefix, jssStyleMap;
                     var className = "" + teleport_shared_1.StringUtils.dashCaseToUpperCamelCase(key);
+                    // Styled components might create an element that clashes with native element (Text, View, Image, etc.)
+                    if (illegalComponentNames.includes(className)) {
+                        className = "Styled" + className;
+                    }
                     var timesReferred_1 = utils_1.countPropReferences(style, 0);
@@ -66,0 +70,0 @@ if (componentLibrary === 'reactnative') {

dist/esm/index.d.ts

@@ -6,2 +6,3 @@ import { ComponentPluginFactory, ComponentPlugin } from '@teleporthq/teleport-types';
     componentLibrary?: 'react' | 'reactnative';
+    illegalComponentNames?: string[];
 }
@@ -8,0 +9,0 @@ export declare const createReactStyledComponentsPlugin: ComponentPluginFactory<StyledComponentsConfig>;

dist/esm/index.js

@@ -6,3 +6,3 @@ import { ChunkType, FileType, } from '@teleporthq/teleport-types';
 export const createReactStyledComponentsPlugin = (config) => {
-    const { componentChunkName = 'jsx-component', importChunkName = 'import-local', componentLibrary = 'react', } = config || {};
+    const { componentChunkName = 'jsx-component', importChunkName = 'import-local', componentLibrary = 'react', illegalComponentNames = [], } = config || {};
     const reactStyledComponentsPlugin = async (structure) => {
@@ -23,3 +23,7 @@ const { uidl, chunks, dependencies } = structure;
                 const root = jsxNodesLookup[key];
-                const className = `${StringUtils.dashCaseToUpperCamelCase(key)}`;
+                let className = `${StringUtils.dashCaseToUpperCamelCase(key)}`;
+                // Styled components might create an element that clashes with native element (Text, View, Image, etc.)
+                if (illegalComponentNames.includes(className)) {
+                    className = `Styled${className}`;
+                }
                 const timesReferred = countPropReferences(style, 0);
@@ -26,0 +30,0 @@ if (componentLibrary === 'reactnative') {

package.json

 {
   "name": "@teleporthq/teleport-plugin-react-styled-components",
-  "version": "0.10.0-alpha.5",
+  "version": "0.10.0-alpha.6",
   "description": "A plugin for injecting the styles through styled-components inside React components",
@@ -30,7 +30,7 @@ "author": "teleportHQ",
     "@babel/types": "^7.5.5",
-    "@teleporthq/teleport-plugin-common": "^0.10.0-alpha.5",
-    "@teleporthq/teleport-shared": "^0.10.0-alpha.5",
-    "@teleporthq/teleport-types": "^0.10.0-alpha.5"
+    "@teleporthq/teleport-plugin-common": "^0.10.0-alpha.6",
+    "@teleporthq/teleport-shared": "^0.10.0-alpha.6",
+    "@teleporthq/teleport-types": "^0.10.0-alpha.6"
   },
-  "gitHead": "86b1764602ada3cc80aeb800fd5d0261673a00c5"
+  "gitHead": "4eb554f8b449726e44681876564f51b1e9b71fdb"
 }

src/index.ts

@@ -16,2 +16,3 @@ import * as types from '@babel/types'
   componentLibrary?: 'react' | 'reactnative'
+  illegalComponentNames?: string[]
 }
@@ -26,2 +27,3 @@
     componentLibrary = 'react',
+    illegalComponentNames = [],
   } = config || {}
@@ -46,3 +48,8 @@
         const root = jsxNodesLookup[key]
-        const className = `${StringUtils.dashCaseToUpperCamelCase(key)}`
+        let className = `${StringUtils.dashCaseToUpperCamelCase(key)}`
+        // Styled components might create an element that clashes with native element (Text, View, Image, etc.)
+        if (illegalComponentNames.includes(className)) {
+          className = `Styled${className}`
+        }
+
         const timesReferred = countPropReferences(style, 0)
@@ -49,0 +56,0 @@

No alert changes

Improved metrics

Total package byte prevSize

317422

increased by0.4%

Lines of code

629

increased by2.78%

Dependency changes

• Updated@teleporthq/teleport-plugin-common@^0.10.0-alpha.6

• Updated@teleporthq/teleport-shared@^0.10.0-alpha.6

• Updated@teleporthq/teleport-types@^0.10.0-alpha.6