feat(typescript): add working typescript example

update all dependencies
make markdown rendering faster

Author: ph1p

README.md

@@ -135,6 +135,18 @@ Use `headline` to add a custom `h1` title.
 
 [More information](https://vuepress.vuejs.org/guide/markdown.html#front-matter)
 
+## Typescript
+
+To use typescript, you have to install these dev-dependencies:
+
+```bash
+yarn add -D typescript jsdoc-babel @babel/cli @babel/core @babel/preset-env @babel/preset-typescript jsdoc-to-markdown
+```
+
+Next, you have to add a `jsdoc.json` to your project with some settings and add it with the `-c` parameter.
+You can find a full working example with all settings inside the `./example` folder.
+The example shows also how to use babel-`plugins`.
+
 ## Example
 
 The `./example` folder includes a full working vuepress-jsdoc example.

cmds/index.js

@@ -109,7 +109,7 @@ async function generate(argv) {
               try {
                 // render file
                 mdFileData = await jsdoc2md.render({
-                  source: fileData,
+                  files: [`${folder}/${file}`],
                   configure: configPath,
                   partial: [
                     path.resolve(__filename, '../../template/header.hbs'),

example/documentation/code/Icon.md

@@ -0,0 +1,39 @@
+---
+title: Icon
+---
+
+# Icon
+
+## Constants
+
+<dl>
+<dt><a href="#ButtonTextWrapper">ButtonTextWrapper</a></dt>
+<dd><p>This is the ButtonTextWrapper</p>
+</dd>
+</dl>
+
+## Functions
+
+<dl>
+<dt><a href="#Button">Button(props)</a></dt>
+<dd><p>Test</p>
+</dd>
+</dl>
+
+<a name="ButtonTextWrapper"></a>
+
+## ButtonTextWrapper
+This is the ButtonTextWrapper
+
+**Kind**: global constant  
+<a name="Button"></a>
+
+## Button(props)
+Test
+
+**Kind**: global function  
+
+| Param |
+| --- |
+| props | 
+

example/documentation/code/config.js

@@ -1,4 +1,5 @@
 exports.fileTree = [
+  { name: 'Icon', path: '/Icon', fullPath: './documentation/code/Icon' },
   { name: 'class-constructor', path: '/class-constructor', fullPath: './documentation/code/class-constructor' },
   { name: 'class', path: '/class', fullPath: './documentation/code/class' },
   {
@@ -28,7 +29,7 @@ exports.sidebarTree = (title = 'Mainpage') => ({
     {
       title: 'API',
       collapsable: false,
-      children: [['', '' + title + ''], 'class-constructor', 'class', 'methods', 'objects', 'test']
+      children: [['', '' + title + ''], 'Icon', 'class-constructor', 'class', 'methods', 'objects', 'test']
     },
     { title: 'lib', collapsable: false, children: ['lib/dmd-options', 'lib/jsdoc-to-markdown'] },
     { title: 'subfolder', collapsable: false, children: ['subfolder/subfolder.1/variables', 'subfolder/variables'] }

example/documentation/code/methods.md

@@ -1,5 +1,5 @@
 ---
-title: A normal ES6 Methodf jdhsfkj dsfhdskjf dksjfhdks j
+title: A normal ES6 Method
 headline: Custom Title!
 ---
 

example/jsdoc.json

@@ -1,17 +1,27 @@
 {
-  "plugins": [],
-  "recurseDepth": 10,
-  "source": {
-    "includePattern": ".+\\.j(doc|x)?$",
-    "excludePattern": "(^|\\/|\\\\)_"
-  },
-  "sourceType": "module",
-  "tags": {
-    "allowUnknownTags": true,
-    "dictionaries": ["jsdoc", "closure"]
+  "plugins": ["node_modules/jsdoc-babel"],
+  "babel": {
+    "extensions": ["ts", "tsx"],
+    "ignore": ["**/*.(test|spec).ts"],
+    "babelrc": false,
+    "presets": [
+      [
+        "@babel/preset-env",
+        {
+          "targets": { "node": true }
+        }
+      ],
+      "@babel/preset-typescript"
+    ],
+    "plugins": ["@babel/plugin-proposal-class-properties", "@babel/proposal-object-rest-spread"]
   },
   "templates": {
     "cleverLinks": false,
     "monospaceLinks": false
+  },
+  "recurseDepth": 10,
+  "source": {
+    "includePattern": ".+\\.(js|ts)(doc|x)?$",
+    "excludePattern": ".+\\.(test|spec).ts"
   }
 }

example/package.json

@@ -4,14 +4,24 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "docs": "../bin/vuepress-jsdoc.js --source=./src --dist=./documentation --title=API --exclude=*.test.js --partials=./partials/*.hbs",
+    "docs": "../bin/vuepress-jsdoc.js -c ./jsdoc.json --source=./src --dist=./documentation --title=API --exclude=*.test.js --partials=./partials/*.hbs",
     "dev": "vuepress dev documentation",
     "build": "vuepress build documentation"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "vuepress": "^1.3.0"
+    "vuepress": "^1.4.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.8.4",
+    "@babel/core": "^7.9.0",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/preset-env": "^7.9.5",
+    "@babel/preset-typescript": "^7.9.0",
+    "jsdoc-babel": "^0.5.0",
+    "jsdoc-to-markdown": "^5.0.3",
+    "typescript": "^3.8.3"
   }
 }

example/src/Icon.tsx

@@ -0,0 +1,27 @@
+import React, { FunctionComponent } from 'react';
+import styled from 'styled-components/native';
+
+/**
+ * This is the ButtonTextWrapper
+ */
+const ButtonTextWrapper = styled.View`
+  height: 40px;
+  width: 300px;
+`;
+
+/**
+ * Props interface
+ */
+interface Props {
+  text: string;
+}
+
+/**
+ * Test
+ * @param props
+ */
+const Button: FunctionComponent<Props> = props => {
+  return <ButtonTextWrapper>{props.text}</ButtonTextWrapper>;
+};
+
+export default Icon;

example/src/methods.js

@@ -1,7 +1,7 @@
 /*
  * @vuepress
  * ---
- * title: A normal ES6 Methodf jdhsfkj dsfhdskjf dksjfhdks j
+ * title: A normal ES6 Method
  * headline: Custom Title!
  * ---
  */