Custom templates & data pass through

README.md

@@ -28,6 +28,8 @@ If necessary, Zeplin CLI Angular Plugin can generate more detailed snippets and
 |----------------------|------------------------------------------------------------------------------|
 | `useFullSnippet`     | Generates a distinct snippet for all combinations of the component selectors |
 | `useFullDescription` | Generates descriptions with implemented interface names                      |
+| `snippetPath`        | Uses a custom pub snippet template                                           |
+| `descriptionPath`    | Uses a custom pub description template                                       |
 
 Here's a sample configuration file (`.zeplin/components.json`):
 
@@ -39,6 +41,8 @@ Here's a sample configuration file (`.zeplin/components.json`):
         "config": {
             "useFullSnippet": true,
             "useFullDescription": true,
+            "snippetPath": "src/zeplin/template/snippet-custom.pug",
+            "descriptionPath": "src/zeplin/template/description-custom.pug"
         }
     }],
     ...
@@ -47,6 +51,27 @@ Here's a sample configuration file (`.zeplin/components.json`):
 
 ☝️ _Note that after adding the plugin to the configuration file, you don't need to pass it as the `-p` argument to the `connect` command—running `zeplin connect` should be enough._
 
+#### Pass Data
+
+Pass data to your custom Templates.
+
+```json
+{
+    ...
+    "components": [{
+        "name": "Button",
+        "path": "src/app/button/button.component.ts",
+        "zeplinNames": [
+            "/button/enabled"
+        ],
+        "data": {
+            "customSelectors": "enabled='true'"
+        }
+    }]
+    ...
+}
+```
+
 ## About Connected Components
 
 [Connected Components](https://blog.zeplin.io/introducing-connected-components-components-in-design-and-code-in-harmony-aa894ed5bd95) in Zeplin lets you access components in your codebase directly on designs in Zeplin, with links to Storybook, GitHub and any other source of documentation based on your workflow. 🧩

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@zeplin/cli-connect-angular-plugin",
+  "name": "@zeplin/cgm_de_cli-connect-angular-plugin",
   "version": "0.1.4",
   "description": "Zeplin CLI Connected Components - Angular Plugin",
   "main": "./dist/index",

src/index.ts

@@ -28,19 +28,27 @@ interface Input {
 }
 
 export default class implements ConnectPlugin {
+    snippetPath = "";
+    descriptionPath = "";
     generateSnippet: pug.compileTemplate = pug.compileFile(path.join(__dirname, "template/snippet-summary.pug"));
     generateDescription: pug.compileTemplate = pug.compileFile(path.join(__dirname, "template/description-summary.pug"));
 
     init(context: PluginContext): Promise<void> {
         if (context.config) {
-            const { useFullDescription, useFullSnippet } = context.config;
+            const { useFullDescription, useFullSnippet, snippetPath, descriptionPath } = context.config;
 
             if (useFullSnippet) {
                 this.generateSnippet = pug.compileFile(path.join(__dirname, "template/snippet-full.pug"));
             }
             if (useFullDescription) {
                 this.generateDescription = pug.compileFile(path.join(__dirname, "template/description-full.pug"));
             }
+            if (snippetPath && snippetPath !== "") {
+                this.snippetPath = snippetPath as string;
+            }
+            if (descriptionPath && descriptionPath !== "") {
+                this.descriptionPath = descriptionPath as string;
+            }
         }
 
         return Promise.resolve();
@@ -56,8 +64,21 @@ export default class implements ConnectPlugin {
 
         const components = await Promise.all(this.processComponents(rawComponents));
 
-        const snippet = this.generateSnippet({ components });
-        const description = this.generateDescription({ components });
+        const templateData = { components, data: context.data };
+
+        let snippet: string;
+        if (this.snippetPath !== "") {
+            snippet = pug.compileFile(path.resolve(this.snippetPath))(templateData);
+        } else {
+            snippet = this.generateSnippet(templateData);
+        }
+
+        let description: string;
+        if (this.descriptionPath !== "") {
+            description = pug.compileFile(path.resolve(this.descriptionPath))(templateData);
+        } else {
+            description = this.generateDescription(templateData);
+        }
 
         const lang = PrismLang.Markup;
 

test/index.test.ts

@@ -59,7 +59,7 @@ describe("Connected Components Angular Plugin", () => {
 
     test("componentWithMultiSelectors.ts snippet creation", async () => {
         const processor = new Plugin();
-        processor.init({ config: { useFullSnippet: true, useFullDescription: true } });
+        processor.init({ config: { useFullSnippet: true, useFullDescription: true, snippetPath: "", descriptionPath: "" } });
 
         const componentCode = await processor.process(
             {