Added namespace option to allow for namespacing, when running multiple instances of typescript-plugin-styled-components #395
Conversation
…e instances of typescript-plugin-styled-components
|
@Igorbek Anything I can do to help get this merged into master? |
|
@TomGrundy sorry for very late response, didn't see the PR until you mentioned me directly. |
There was a problem hiding this comment.
So having said that, I think the following changes needed:
- rename
namespacetocomponentIdPrefixand have it default as'sc-'which is currently the effective value - do not generate component id if only
componentIdPrefixpresent, use it withssronly
Let me know if you think there's scenarios where you need component id with ssr.
src/createTransformer.ts
Outdated
| 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 'sc-' + hash(`${getDisplayNameFromNode(node)}${filePath}${position}`); | ||
| return `${namespace ? namespace : 'sc'}-` + hash(`${getDisplayNameFromNode(node)}${filePath}${position}`); |
There was a problem hiding this comment.
So the namespace is effectively the prefix to use in the component id?
There was a problem hiding this comment.
Yeah, it's a user defined prefix, to avoid two instances of typescript-plugin-styled-components from generating the same display name and then clashing, e.g. a span with sc-LqBRf, so instead instance one would be say instance-one-LqBRf, and the second instance-two-LqBRf.
src/createTransformer.ts
Outdated
| } | ||
|
|
||
| if (ssr) { | ||
| if (namespace) { |
There was a problem hiding this comment.
it is unclear why specified namespace itself would make component ids generated, that is only for ssr mode. I think the condition should remain the same.
There was a problem hiding this comment.
It's simply doing the same work as ssr, but then ensuring you can make them unique if more than one instance of the library is run. babel-plugin-styled-components does basically the same thing, taking it's ssr and a namespace value and throwing them together: styled-components/babel-plugin-styled-components#101
src/createTransformer.ts
Outdated
| 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 'sc-' + hash(`${getDisplayNameFromNode(node)}${filePath}${position}`); | ||
| return `${namespace ? namespace : 'sc'}-` + hash(`${getDisplayNameFromNode(node)}${filePath}${position}`); |
There was a problem hiding this comment.
Yeah, it's a user defined prefix, to avoid two instances of typescript-plugin-styled-components from generating the same display name and then clashing, e.g. a span with sc-LqBRf, so instead instance one would be say instance-one-LqBRf, and the second instance-two-LqBRf.
src/createTransformer.ts
Outdated
| } | ||
|
|
||
| if (ssr) { | ||
| if (namespace) { |
There was a problem hiding this comment.
It's simply doing the same work as ssr, but then ensuring you can make them unique if more than one instance of the library is run. babel-plugin-styled-components does basically the same thing, taking it's ssr and a namespace value and throwing them together: styled-components/babel-plugin-styled-components#101
|
@Igorbek Sorry for the confusing questions above, hopefully I've properly addressed the issues, let me know if something is still wrong. Thank you so much! |
|
@Igorbek Anything else I need to do? |
|
If you don't mind, please add an entry to the changelog.md file - and I'll be releasing it shortly after merging another pr in the queue. |
Added namespace option to allow for namespacing, when running multiple instances of typescript-plugin-styled-components