Updated as per feedback

Igorbek · Jun 2, 2021 · ee751a6 · ee751a6
1 parent 28d0a7f
commit ee751a6
Show file tree

Hide file tree

Showing 11 changed files with 28 additions and 35 deletions.
diff --git a/README.md b/README.md
@@ -225,7 +225,7 @@ interface Options {
     ssr: boolean;
     displayName: boolean;
     minify: boolean;
-    namespace: string;
+    componentIdPrefix: string;
 }
 ```
 
@@ -276,9 +276,9 @@ The minification is not exactly the same and may produce slightly different resu
 
 Default value is `false` which means the minification is not being performed.
 
-### `namespace`
+### `componentIdPrefix`
 
-To avoid colisions when running more than one insance of typescript-plugin-styled-components at a time, you can add a namespace by providing an arbitrary string to this option.
+To avoid colisions when running more than one insance of typescript-plugin-styled-components at a time, you can add a componentIdPrefix by providing an arbitrary string to this option.
 
 Default value is `''` which means that no namespacing will happen.
 

diff --git a/..._/baselines/namespace/issue33.ts.baseline → ...nes/componentIdPrefix/issue33.ts.baseline b/..._/baselines/namespace/issue33.ts.baseline → ...nes/componentIdPrefix/issue33.ts.baseline
diff --git a/...amespace/multiple-components.tsx.baseline → ...IdPrefix/multiple-components.tsx.baseline b/...amespace/multiple-components.tsx.baseline → ...IdPrefix/multiple-components.tsx.baseline
@@ -41,13 +41,13 @@ TypeScript after transform:
 
   import styled from 'styled-components';
   export function createButtons() {
-      const A = styled.button.withConfig({ displayName: "A", componentId: "test-hana72" }) \` color: red; \`;
-      const B = styled(A).withConfig({ displayName: "B", componentId: "test-ke4nds" }) \` color: blue; \`;
+      const A = styled.button.withConfig({ displayName: "test-A", componentId: "test-hana72" }) \` color: red; \`;
+      const B = styled(A).withConfig({ displayName: "test-B", componentId: "test-ke4nds" }) \` color: blue; \`;
       return { A, B };
   }
   export function createDivs() {
-      const A = styled.div.withConfig({ displayName: "A", componentId: "test-1q7vmnt" }) \` color: green; \`;
-      const B = styled(A).withConfig({ displayName: "B", componentId: "test-7q8oop" }) \` color: yellow; \`;
+      const A = styled.div.withConfig({ displayName: "test-A", componentId: "test-1q7vmnt" }) \` color: green; \`;
+      const B = styled(A).withConfig({ displayName: "test-B", componentId: "test-7q8oop" }) \` color: yellow; \`;
       return { A, B };
   }
 

diff --git a/..._/baselines/namespace/sample1.ts.baseline → ...nes/componentIdPrefix/sample1.ts.baseline b/..._/baselines/namespace/sample1.ts.baseline → ...nes/componentIdPrefix/sample1.ts.baseline
@@ -68,14 +68,14 @@ TypeScript before transform:
 TypeScript after transform:
 
   import styled from 'styled-components';
-  const Button = styled.button.withConfig({ displayName: "Button", componentId: "test-1okqsxw" }) \`
+  const Button = styled.button.withConfig({ displayName: "test-Button", componentId: "test-1okqsxw" }) \`
     color: red;
   \`;
   declare const nonStyled: any;
   const NonButton = nonStyled.button \`
     yo
   \`;
-  const OtherButton = styled(Button).withConfig({ displayName: "OtherButton", componentId: "test-ce0fkl" }) \`
+  const OtherButton = styled(Button).withConfig({ displayName: "test-OtherButton", componentId: "test-ce0fkl" }) \`
     color: blue;
   \`;
   const SuperButton = Button.extend \`
@@ -87,7 +87,7 @@ TypeScript after transform:
   export const SmallButton = Button.extend \`
     font-size: .7em;
   \`;
-  const MiniButton = styled(SmallButton).attrs({ size: "mini" }).withConfig({ displayName: "MiniButton", componentId: "test-ndnumj" }) \`
+  const MiniButton = styled(SmallButton).attrs({ size: "mini" }).withConfig({ displayName: "test-MiniButton", componentId: "test-ndnumj" }) \`
     font-size: .1em;
   \`;
 

diff --git a/..._/baselines/namespace/sample2.ts.baseline → ...nes/componentIdPrefix/sample2.ts.baseline b/..._/baselines/namespace/sample2.ts.baseline → ...nes/componentIdPrefix/sample2.ts.baseline
@@ -28,7 +28,7 @@ TypeScript after transform:
   const styled2 = styled;
   const NonButton = styled.button;
   const NonStyled = styled \`  color: red; \`;
-  const Link = styled(NonStyled).withConfig({ displayName: "Link", componentId: "test-1xlc242" }) \` color: red; \`;
+  const Link = styled(NonStyled).withConfig({ displayName: "test-Link", componentId: "test-1xlc242" }) \` color: red; \`;
 
 
 

diff --git a/.../baselines/namespace/sample3.tsx.baseline → ...es/componentIdPrefix/sample3.tsx.baseline b/.../baselines/namespace/sample3.tsx.baseline → ...es/componentIdPrefix/sample3.tsx.baseline
@@ -45,7 +45,7 @@ TypeScript after transform:
   interface LabelProps {
       size: number;
   }
-  const CustomLabel = styled.label.withConfig({ displayName: "CustomLabel", componentId: "test-1ydgk9x" }) \`
+  const CustomLabel = styled.label.withConfig({ displayName: "test-CustomLabel", componentId: "test-1ydgk9x" }) \`
       font-size: \${(props: LabelProps) => props.size + 'px'}
   \`;
   const LabeledLink = () => <SmallButton />;

diff --git a/...lines/namespace/style-objects.ts.baseline → ...mponentIdPrefix/style-objects.ts.baseline b/...lines/namespace/style-objects.ts.baseline → ...mponentIdPrefix/style-objects.ts.baseline
@@ -68,14 +68,14 @@ TypeScript before transform:
 TypeScript after transform:
 
   declare const styled: any;
-  const Button = styled.button.withConfig({ displayName: "Button", componentId: "test-7b7p9e" })({
+  const Button = styled.button.withConfig({ displayName: "test-Button", componentId: "test-7b7p9e" })({
       color: 'red'
   });
   declare const nonStyled: any;
   const NonButton = nonStyled.button({
       color: 'red'
   });
-  const OtherButton = styled(Button).withConfig({ displayName: "OtherButton", componentId: "test-14ah7t" })({
+  const OtherButton = styled(Button).withConfig({ displayName: "test-OtherButton", componentId: "test-14ah7t" })({
       color: 'blue'
   });
   const SuperButton = Button.extend({
@@ -87,7 +87,7 @@ TypeScript after transform:
   export const SmallButton = Button.extend({
       fontSize: '.7em'
   });
-  const MiniButton = styled(SmallButton).attrs({ size: "mini" }).withConfig({ displayName: "MiniButton", componentId: "test-ad4g7l" })({
+  const MiniButton = styled(SmallButton).attrs({ size: "mini" }).withConfig({ displayName: "test-MiniButton", componentId: "test-ad4g7l" })({
       fontSize: '.1em'
   });
 

diff --git a/src/__tests__/namespace-baselines.test.ts → ...sts__/componentIdPrefix-baselines.test.ts b/src/__tests__/namespace-baselines.test.ts → ...sts__/componentIdPrefix-baselines.test.ts
@@ -2,8 +2,8 @@ import createTransformer from '..';
 import { expectBaselineTransforms } from './expectTransform';
 
 const transformer = createTransformer({
-    namespace: 'test'
+    componentIdPrefix: 'test'
 });
 
-expectBaselineTransforms(transformer, __dirname + '/fixtures/base', 'baselines/namespace');
-expectBaselineTransforms(transformer, __dirname + '/fixtures/namespace', 'baselines/namespace');
+expectBaselineTransforms(transformer, __dirname + '/fixtures/base', 'baselines/componentIdPrefix');
+expectBaselineTransforms(transformer, __dirname + '/fixtures/componentIdPrefix', 'baselines/componentIdPrefix');
diff --git a/...ixtures/namespace/multiple-components.tsx → ...componentIdPrefix/multiple-components.tsx b/...ixtures/namespace/multiple-components.tsx → ...componentIdPrefix/multiple-components.tsx
diff --git a/src/createTransformer.ts b/src/createTransformer.ts
@@ -123,7 +123,7 @@ export function createTransformer({
     ssr = true,
     displayName = true,
     minify = false,
-    namespace = '',
+    componentIdPrefix = '',
 } : Partial<Options> = {}) {
 
     /**
@@ -133,9 +133,9 @@ export function createTransformer({
      * (const|var|let) ComponentName = styled...
      * export default styled...
     */
-    function getDisplayNameFromNode(node: ts.Node): string | undefined {
+    function getDisplayNameFromNode(node: ts.Node, componentIdPrefix?: string): string | undefined {
         if (isVariableDeclaration(node) && isIdentifier(node.name)) {
-            return getDisplayName(node.getSourceFile().fileName, node.name.text);
+            return (!!componentIdPrefix ? `${componentIdPrefix}-` : '') + getDisplayName(node.getSourceFile().fileName, node.name.text);
         }
 
         if (isExportAssignment(node)) {
@@ -145,11 +145,11 @@ export function createTransformer({
         return undefined;
     }
 
-    function getIdFromNode(node: ts.Node, sourceRoot: string | undefined, position: number, namespace?: string): string | undefined {
+    function getIdFromNode(node: ts.Node, sourceRoot: string | undefined, position: number, componentIdPrefix?: string): string | undefined {
         if ((isVariableDeclaration(node) && isIdentifier(node.name)) || isExportAssignment(node)) {
             const fileName = node.getSourceFile().fileName;
             const filePath = sourceRoot ? path.relative(sourceRoot, fileName).replace(path.sep, path.posix.sep) : fileName;
-            return `${namespace ? namespace : 'sc'}-` + hash(`${getDisplayNameFromNode(node)}${filePath}${position}`);
+            return `${!!componentIdPrefix ? componentIdPrefix : 'sc'}-` + hash(`${getDisplayNameFromNode(node)}${filePath}${position}`);
         }
         return undefined;
     }
@@ -188,26 +188,19 @@ export function createTransformer({
                     const styledConfig = [];
 
                     if (displayName) {
-                        const displayNameValue = getDisplayNameFromNode(node.parent.parent);
+                        const displayNameValue = getDisplayNameFromNode(node.parent.parent, componentIdPrefix);
                         if (displayNameValue) {
                             styledConfig.push(ts.createPropertyAssignment('displayName', ts.createLiteral(displayNameValue)));
                         }
                     }
 
-                    if (namespace) {
-                        const componentId = getIdFromNode(node.parent.parent, sourceRoot, ++lastComponentPosition, namespace);
-                        if (componentId) {
-                            styledConfig.push(ts.createPropertyAssignment('componentId', ts.createLiteral(componentId)));
-                        }
-                    } else if (ssr) {
-                        const componentId = getIdFromNode(node.parent.parent, sourceRoot, ++lastComponentPosition);
+                    if (ssr) {
+                        const componentId = getIdFromNode(node.parent.parent, sourceRoot, ++lastComponentPosition, componentIdPrefix);
                         if (componentId) {
                             styledConfig.push(ts.createPropertyAssignment('componentId', ts.createLiteral(componentId)));
                         }
                     }
 
-
-
                     if (styledConfig.length > 0) {
                         return ts.createCall(
                             ts.createPropertyAccess(node as ts.Expression, 'withConfig'),

diff --git a/src/models/Options.ts b/src/models/Options.ts
@@ -41,12 +41,12 @@ export interface Options {
     minify: boolean;
 
     /**
-     * By adding a namespace, running multiple instances of typescript-plugin-styled-components
+     * By adding a componentIdPrefix, running multiple instances of typescript-plugin-styled-components
      * will not result in clashes caused by the class generation hash.
      *
      * @defaultValue `''`
      */
-    namespace: string;
+     componentIdPrefix: string;
 }
 
 export interface CustomStyledIdentifiers {