Fix special characters on TS literal types

zeplin · Jan 22, 2021 · be3afc2 · be3afc2
1 parent 01e31ae
commit be3afc2
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 24 deletions.
diff --git a/package.json b/package.json
@@ -37,7 +37,7 @@
     "@types/update-notifier": "^5.0.0",
     "@typescript-eslint/eslint-plugin": "^2.31.0",
     "@typescript-eslint/parser": "^2.31.0",
-    "@zeplin/cli": "^1.0.4",
+    "@zeplin/cli": "^1.1.2",
     "@zeplin/eslint-config": "^2.2.0",
     "copyfiles": "^2.2.0",
     "eslint": "^7.0.0",

diff --git a/src/index.ts b/src/index.ts
@@ -1,5 +1,5 @@
 import {
-    ConnectPlugin, ComponentConfig, ComponentData, PrismLang, PluginContext
+    ConnectPlugin, ComponentConfig, ComponentData, PrismLang, PluginContext, Logger
 } from "@zeplin/cli";
 import path from "path";
 import pug from "pug";
@@ -10,8 +10,8 @@ import updateNotifier from "update-notifier";
 import { name as packageName, version as packageVersion } from "../package.json";
 
 interface ReactPluginConfig {
-    tsDocgen?: "react-docgen" | "react-docgen-typescript";
-    tsConfigPath?: string;
+    tsDocgen: "react-docgen" | "react-docgen-typescript";
+    tsConfigPath: string;
 }
 
 updateNotifier({
@@ -26,13 +26,18 @@ updateNotifier({
 export default class implements ConnectPlugin {
     supportedFileExtensions = [".js", ".jsx", ".ts", ".tsx"];
     tsExtensions = [".ts", ".tsx"];
-    config: ReactPluginConfig = {};
+    logger?: Logger;
+    config: ReactPluginConfig = {
+        tsDocgen: "react-docgen",
+        tsConfigPath: "./tsconfig.json"
+    };
 
     template = pug.compileFile(path.join(__dirname, "template/snippet.pug"));
 
     // eslint-disable-next-line require-await
     async init(pluginContext: PluginContext): Promise<void> {
-        this.config = pluginContext.config as unknown as ReactPluginConfig;
+        Object.assign(this.config, pluginContext.config);
+        this.logger = pluginContext.logger;
     }
 
     async process(context: ComponentConfig): Promise<ComponentData> {
@@ -44,8 +49,10 @@ export default class implements ConnectPlugin {
         let propsFilter: (props: docgen.Props | Props, name: string) => boolean;
 
         if (this.config.tsDocgen === "react-docgen-typescript" && this.tsExtensions.includes(path.extname(filePath))) {
+            this.logger?.debug(`Using react-docgen-typescript for ${filePath}`);
             ({ rawReactDocs, propsFilter } = await this.parseUsingReactDocgenTypescript(filePath));
         } else {
+            this.logger?.debug(`Using react-docgen for ${filePath}`);
             ({ rawReactDocs, propsFilter } = this.parseUsingReactDocgen(file, filePath));
         }
 
@@ -54,7 +61,15 @@ export default class implements ConnectPlugin {
         const props = Object.keys(rawProps)
             .filter(name => name !== "children")
             .filter(name => propsFilter(rawProps, name))
-            .map(name => ({ name, value: rawProps[name] }));
+            .map(name => {
+                const prop = rawProps[name];
+                if (prop.type) {
+                    // Required to remove \" from typescript literal types
+                    prop.type.name = prop.type.name.replace(/"/g, "'");
+                }
+
+                return { name, value: prop };
+            });
 
         const hasChildren = !!rawProps.children;
 
@@ -87,7 +102,7 @@ export default class implements ConnectPlugin {
     private parseUsingReactDocgen(file: Buffer, filePath: string): {
         rawReactDocs: ComponentDoc;
         propsFilter: (props: docgen.Props | Props, name: string) => boolean;
-        } {
+    } {
         const rawReactDocs = parse(file, null, null, {
             filename: filePath,
             babelrc: false
@@ -102,11 +117,11 @@ export default class implements ConnectPlugin {
         };
     }
 
-    private async parseUsingReactDocgenTypescript(filePath: string): Promise <{
+    private async parseUsingReactDocgenTypescript(filePath: string): Promise<{
         rawReactDocs: docgen.ComponentDoc;
         propsFilter: (props: docgen.Props | Props, name: string) => boolean;
-        }> {
-        const tsConfigPath = path.resolve(this.config.tsConfigPath || "./tsconfig.json");
+    }> {
+        const tsConfigPath = path.resolve(this.config.tsConfigPath);
 
         const parserOpts: docgen.ParserOptions = {
             shouldExtractLiteralValuesFromEnum: true,

diff --git a/src/template/base.pug b/src/template/base.pug
@@ -1,31 +1,31 @@
 mixin propertyValue(type)
     if type.name === "arrayOf" || type.name === "objectOf"
-        | #{type.name}[!{type.value.name}]
+        | !{type.name}[!{type.value.name}]
     else if type.name === "instanceOf"
         | instanceOf(!{type.value})
     else if type.raw
         | !{type.raw}
     else
-        | #{type.name}
+        | !{type.name}
 
 mixin propertyValues(values)
     - var list = values.length ? values : [values]
     each value, index in list
         +propertyValue(value)
-        | #{(index < list.length - 1) ? '|' : ''}
+        | !{(index < list.length - 1) ? '|' : ''}
 
 mixin propType(name, propType)
     if propType.name === "union"
-        |   #{name}={union[
+        |   !{name}={union[
         +propertyValues(propType.value)
         | ]}
     else
-        |   #{name}={
+        |   !{name}={
         +propertyValue(propType)
         | }
 
 mixin tsOrFlowType(name, type)
-        |   #{name}={
+        |   !{name}={
         +propertyValue(type)
         | }
 

diff --git a/src/template/snippet.pug b/src/template/snippet.pug
@@ -1,7 +1,7 @@
 extends base
 
 block snippet
-    | <#{componentName}
+    | <!{componentName}
     if props.length > 0
         |
         |
@@ -13,6 +13,6 @@ block snippet
     if hasChildren
         | >
         |   {children}
-        | </#{componentName}>
+        | </!{componentName}>
     else
         |  />
diff --git a/test/__snapshots__/typescript.test.ts.snap b/test/__snapshots__/typescript.test.ts.snap
@@ -116,9 +116,9 @@ Object {
   obj3={{ id: string; title: string; }}
   objArr={{ id: string; title: string; }[]}
   onSomething={Function}
-  onClick={(event: MouseEvent&lt;HTMLButtonElement, MouseEvent&gt;) =&gt; void}
-  hele={(event: MouseEvent&lt;HTMLButtonElement, MouseEvent&gt;) =&gt; void}
-  onChange={(id: number) =&gt; void}
+  onClick={(event: MouseEvent<HTMLButtonElement, MouseEvent>) => void}
+  hele={(event: MouseEvent<HTMLButtonElement, MouseEvent>) => void}
+  onChange={(id: number) => void}
   optional={OptionalType} />",
 }
 `;
@@ -148,8 +148,8 @@ Object {
   obj3={{ id: string; title: string; }}
   objArr={{ id: string; title: string; }[]}
   onSomething={Function}
-  onClick={(event: MouseEvent&lt;HTMLButtonElement, MouseEvent&gt;) =&gt; void}
-  onChange={(id: number) =&gt; void}
+  onClick={(event: MouseEvent<HTMLButtonElement, MouseEvent>) => void}
+  onChange={(id: number) => void}
   optional={OptionalType} />",
 }
 `;