feat: allow script and template to load from external files (#111)

closes #105

Author: elevatebart

src/parse.ts

@@ -78,6 +78,17 @@ export function parseSource(documentation: Documentation, source: string, opt: P
 
   // get slots and props from template
   if (parts && parts.template) {
+    const extTemplSrc: string =
+      parts && parts.template && parts.template.attrs ? parts.template.attrs.src : ''
+    const extTemplSource =
+      extTemplSrc && extTemplSrc.length
+        ? fs.readFileSync(path.resolve(path.dirname(opt.filePath), extTemplSrc), {
+            encoding: 'utf-8',
+          })
+        : ''
+    if (extTemplSource.length) {
+      parts.template.content = extTemplSource
+    }
     const addTemplateHandlers: TemplateHandler[] = opt.addTemplateHandlers || []
     parseTemplate(
       parts.template,
@@ -87,15 +98,33 @@ export function parseSource(documentation: Documentation, source: string, opt: P
     )
   }
 
-  const scriptSource = parts ? (parts.script ? parts.script.content : undefined) : source
+  const extSrc: string = parts && parts.script && parts.script.attrs ? parts.script.attrs.src : ''
+  const extSource =
+    extSrc && extSrc.length
+      ? fs.readFileSync(path.resolve(path.dirname(opt.filePath), extSrc), {
+          encoding: 'utf-8',
+        })
+      : ''
+
+  const scriptSource = extSource.length
+    ? extSource
+    : parts
+    ? parts.script
+      ? parts.script.content
+      : undefined
+    : source
   if (scriptSource) {
     opt.lang =
       (parts && parts.script && parts.script.attrs && parts.script.attrs.lang === 'ts') ||
-      /\.tsx?$/i.test(path.extname(opt.filePath))
+      /\.tsx?$/i.test(path.extname(opt.filePath)) ||
+      /\.tsx?$/i.test(extSrc)
         ? 'ts'
         : 'js'
+
     const addScriptHandlers: ScriptHandler[] = opt.addScriptHandlers || []
-    parseScript(scriptSource, documentation, [...scriptHandlers, ...addScriptHandlers], opt)
+    if (scriptSource) {
+      parseScript(scriptSource, documentation, [...scriptHandlers, ...addScriptHandlers], opt)
+    }
   }
 
   if (!documentation.get('displayName')) {

tests/components/button-external/Button.vue

@@ -0,0 +1,2 @@
+<template src="./template.html"/>
+<script src='./script.ts'/>

tests/components/button-external/__snapshots__/button-ext.test.ts.snap

@@ -0,0 +1,98 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`tests button should match the snapshot 1`] = `
+Object {
+  "description": "This is an example of creating a reusable button component and using it with external data.",
+  "displayName": "MyComponent",
+  "events": Object {
+    "success": Object {
+      "description": "Success event when we click",
+      "properties": undefined,
+      "type": Object {
+        "names": Array [
+          "undefined",
+        ],
+      },
+    },
+  },
+  "methods": Array [
+    Object {
+      "description": "method testing",
+      "modifiers": Array [],
+      "name": "onClick",
+      "params": Array [
+        Object {
+          "name": "a",
+          "type": Object {
+            "name": "string",
+          },
+        },
+      ],
+      "tags": Object {
+        "access": Array [
+          Object {
+            "description": "public",
+            "title": "access",
+          },
+        ],
+      },
+    },
+  ],
+  "props": Object {
+    "propA": Object {
+      "description": "An example of a property typed through the annotation",
+      "tags": Object {},
+      "type": Object {
+        "name": "number",
+      },
+    },
+    "propB": Object {
+      "defaultValue": Object {
+        "func": false,
+        "value": "'default value'",
+      },
+      "description": "A prop with a default value",
+      "required": "",
+      "tags": Object {},
+      "type": Object {
+        "name": "string",
+      },
+    },
+    "propC": Object {
+      "description": "A prop with a hybrid type",
+      "tags": Object {},
+      "type": Object {
+        "name": "TSUnionType",
+      },
+    },
+    "propNoType": Object {
+      "description": "An example of a property typed through the decorators arguments",
+      "required": "",
+      "tags": Object {},
+      "type": Object {
+        "name": "string",
+      },
+    },
+  },
+  "slots": Object {
+    "default": Object {
+      "bindings": Object {},
+      "description": "Use this slot default",
+    },
+  },
+  "tags": Object {
+    "author": Array [
+      Object {
+        "description": "[Rafael](https://github.com/rafaesc92)",
+        "title": "author",
+      },
+    ],
+    "version": Array [
+      Object {
+        "description": "1.0.5",
+        "title": "version",
+      },
+    ],
+  },
+}
+`;

tests/components/button-external/button-ext.test.ts

@@ -0,0 +1,42 @@
+import * as path from 'path'
+import { ComponentDoc, PropDescriptor } from '../../../src/Documentation'
+import { parse } from '../../../src/main'
+
+const button = path.join(__dirname, './Button.vue')
+let docButton: ComponentDoc
+describe('tests button', () => {
+  beforeAll(done => {
+    docButton = parse(button)
+    done()
+  })
+
+  it('should return an object', () => {
+    expect(typeof docButton).toEqual('object')
+  })
+
+  it('should return propB type as string', () => {
+    expect(docButton.methods).toMatchObject([{ name: 'onClick' }])
+  })
+
+  describe('props', () => {
+    let props: { [propName: string]: PropDescriptor }
+    beforeEach(() => {
+      props = docButton.props || {}
+    })
+    it('should return propNoType type as string', () => {
+      expect(props.propNoType.type).toMatchObject({ name: 'string' })
+    })
+
+    it('should return propA type as number', () => {
+      expect(props.propA.type).toMatchObject({ name: 'number' })
+    })
+
+    it('should return propB type as string', () => {
+      expect(props.propB.type).toMatchObject({ name: 'string' })
+    })
+  })
+
+  it('should match the snapshot', () => {
+    expect(docButton).toMatchSnapshot()
+  })
+})

tests/components/button-external/script.ts

@@ -0,0 +1,46 @@
+import { Component, Prop, Vue } from 'vue-property-decorator'
+
+/**
+ * This is an example of creating a reusable button component and using it with external data.
+ * @author [Rafael](https://github.com/rafaesc92)
+ * @version 1.0.5
+ */
+@Component
+export default class MyComponent extends Vue {
+  public aHiddenData: string
+
+  /**
+   * An example of a property typed through the decorators arguments
+   */
+  @Prop({ type: String })
+  public propNoType
+
+  /**
+   * An example of a property typed through the annotation
+   */
+  @Prop
+  public propA: number
+
+  /**
+   * A prop with a default value
+   */
+  @Prop({ default: 'default value' })
+  public propB: string
+
+  /**
+   * A prop with a hybrid type
+   */
+  @Prop
+  public propC: string | boolean
+
+  /**
+   * method testing
+   * @public
+   */
+  public onClick(a: string) {
+    /**
+     * Success event when we click
+     */
+    this.$emit('success', a)
+  }
+}

tests/components/button-external/template.html

@@ -0,0 +1,4 @@
+<button class="buttonComponent" @click.prevent="onClick">
+  <!-- @slot Use this slot default -->
+  <slot></slot>
+</button>