Update Api generation to use type definitions

packages/api-generator/helpers/generate.js

@@ -1,12 +1,13 @@
 /* eslint-disable no-console */
-const { writeFile } = require('fs');
+const { writeFile, existsSync } = require('fs');
 const { basename } = require('path');
 const globby = require('globby');
 const sveltedoc = require('sveltedoc-parser');
 const fmt = require('json-format');
 const rollup = require('rollup');
 const json = require('@rollup/plugin-json');
 const { terser } = require('rollup-plugin-terser');
+const extractTypeDoc = require('./type-doc-extractor');
 
 const defaults = { defaultVersion: 3 };
 
@@ -15,9 +16,25 @@ const format = {
   size: 2,
 };
 
+function addTypeDocToSvelteDoc(componentName, svelteDoc) {
+  const typeFile = `../svelte-materialify/@types/${componentName}.d.ts`;
+  if (existsSync(typeFile)) {
+    const typeDoc = extractTypeDoc(typeFile);
+    if (typeDoc.length === 1) {
+      typeDoc[0].members.forEach((member) => {
+        const propDoc = svelteDoc.data.find((prop) => prop.name === member.name);
+        if (member.description) {
+          propDoc.description = member.description;
+        }
+      });
+    }
+  }
+}
+
 async function generateJSON(filename) {
   const doc = await sveltedoc.parse({ filename, ...defaults });
   const name = basename(filename, '.svelte');
+  addTypeDocToSvelteDoc(name, doc);
   await writeFile(`./src/${name}.json`, fmt(doc, format), (err) => {
     if (err) throw err;
     console.log(`${name}.json has been saved`);

packages/api-generator/helpers/type-doc-extractor.js

@@ -0,0 +1,51 @@
+const ts = require('typescript');
+
+let checker;
+let output;
+
+function serializeSymbol(symbol) {
+  return {
+    name: symbol.getName(),
+    description: ts.displayPartsToString(symbol.getDocumentationComment(checker)),
+    type: checker.typeToString(
+      checker.getTypeOfSymbolAtLocation(symbol, !symbol.valueDeclaration),
+    ),
+  };
+}
+
+function serializeInterface(symbol) {
+  const details = serializeSymbol(symbol);
+
+  details.members = [];
+  symbol.members.forEach((value) => {
+    details.members.push(serializeSymbol(value));
+  });
+  return details;
+}
+
+function visit(node) {
+  if (ts.isInterfaceDeclaration(node) && node.name) {
+    const symbol = checker.getSymbolAtLocation(node.name);
+    if (symbol) {
+      output.push(serializeInterface(symbol));
+    }
+  }
+}
+
+function extractTypeDoc(fileName) {
+  const program = ts.createProgram([fileName], {
+    target: ts.ScriptTarget.ES5,
+  });
+
+  checker = program.getTypeChecker();
+  output = [];
+
+  const sourceFile = program.getSourceFile(fileName);
+  if (sourceFile.isDeclarationFile) {
+    ts.forEachChild(sourceFile, visit);
+  }
+
+  return output;
+}
+
+module.exports = extractTypeDoc;

packages/api-generator/package.json

@@ -14,6 +14,7 @@
     "json-format": "1.0.1",
     "rollup": "^2.29.0",
     "rollup-plugin-terser": "^7.0.2",
-    "sveltedoc-parser": "^3.0.4"
+    "sveltedoc-parser": "^3.0.4",
+    "typescript": "^4.0.3"
   }
 }

packages/api-generator/src/Alert.json

@@ -4,7 +4,7 @@
   "data": [
     {
       "visibility": "public",
-      "description": "Classes to add to alert.",
+      "description": "classes added to the alert",
       "keywords": [],
       "name": "class",
       "kind": "const",
@@ -18,9 +18,9 @@
       "localName": "klass"
     },
     {
-      "keywords": [],
       "visibility": "public",
-      "description": "Is the alert active/dismissed.",
+      "description": "is the alert active/dismissed.",
+      "keywords": [],
       "name": "visible",
       "kind": "let",
       "static": false,
@@ -33,9 +33,9 @@
       "defaultValue": true
     },
     {
-      "keywords": [],
       "visibility": "public",
-      "description": "Alert transition function.",
+      "description": "the transition for the alert",
+      "keywords": [],
       "name": "transition",
       "kind": "let",
       "static": false,
@@ -47,9 +47,9 @@
       }
     },
     {
-      "keywords": [],
       "visibility": "public",
-      "description": "Alert transition function options.",
+      "description": "transition options",
+      "keywords": [],
       "name": "transitionOpts",
       "kind": "let",
       "static": false,
@@ -61,9 +61,9 @@
       }
     },
     {
-      "keywords": [],
       "visibility": "public",
-      "description": "Makes alert dense.",
+      "description": "makes the alert dense",
+      "keywords": [],
       "name": "dense",
       "kind": "let",
       "static": false,
@@ -76,9 +76,9 @@
       "defaultValue": false
     },
     {
-      "keywords": [],
       "visibility": "public",
-      "description": "Adds a thin border to alert.",
+      "description": "adds a thin outline",
+      "keywords": [],
       "name": "outlined",
       "kind": "let",
       "static": false,
@@ -91,9 +91,9 @@
       "defaultValue": false
     },
     {
-      "keywords": [],
       "visibility": "public",
-      "description": "Applies the defined color to text and a low opacity background of the same.",
+      "description": "applies the defined color to text and a low opacity background of the same",
+      "keywords": [],
       "name": "text",
       "kind": "let",
       "static": false,
@@ -106,9 +106,9 @@
       "defaultValue": false
     },
     {
-      "keywords": [],
       "visibility": "public",
-      "description": "Removes the component's border-radius.",
+      "description": "removes the border radius",
+      "keywords": [],
       "name": "tile",
       "kind": "let",
       "static": false,
@@ -121,9 +121,9 @@
       "defaultValue": false
     },
     {
-      "keywords": [],
       "visibility": "public",
-      "description": "Adds a close icon that can hide the alert.",
+      "description": "adds a close icon that can hide the alert",
+      "keywords": [],
       "name": "dismissible",
       "kind": "let",
       "static": false,
@@ -136,55 +136,24 @@
       "defaultValue": false
     },
     {
-      "keywords": [
-        {
-          "name": "type",
-          "description": "{left|right|top|bottom|false}"
-        }
-      ],
       "visibility": "public",
-      "description": "The location of the border",
+      "description": "location of the border",
+      "keywords": [],
       "name": "border",
       "kind": "let",
       "static": false,
       "readonly": false,
       "type": {
-        "kind": "union",
-        "text": "left|right|top|bottom|false",
-        "type": [
-          {
-            "kind": "type",
-            "text": "left",
-            "type": "left"
-          },
-          {
-            "kind": "type",
-            "text": "right",
-            "type": "right"
-          },
-          {
-            "kind": "type",
-            "text": "top",
-            "type": "top"
-          },
-          {
-            "kind": "type",
-            "text": "bottom",
-            "type": "bottom"
-          },
-          {
-            "kind": "type",
-            "text": "false",
-            "type": "false"
-          }
-        ]
+        "kind": "type",
+        "text": "boolean",
+        "type": "boolean"
       },
       "defaultValue": false
     },
     {
-      "keywords": [],
       "visibility": "public",
-      "description": "Applies the defined color to the alert's border.",
+      "description": "applies the defined color to the alert's border",
+      "keywords": [],
       "name": "coloredBorder",
       "kind": "let",
       "static": false,

packages/api-generator/src/AppBar.json

@@ -4,7 +4,7 @@
   "data": [
     {
       "visibility": "public",
-      "description": null,
+      "description": "classes added to the appbar",
       "keywords": [],
       "name": "class",
       "kind": "const",
@@ -19,7 +19,7 @@
     },
     {
       "visibility": "public",
-      "description": null,
+      "description": "height of the appbar",
       "keywords": [],
       "name": "height",
       "kind": "let",
@@ -34,7 +34,7 @@
     },
     {
       "visibility": "public",
-      "description": null,
+      "description": "removes the border radius",
       "keywords": [],
       "name": "tile",
       "kind": "let",
@@ -49,7 +49,7 @@
     },
     {
       "visibility": "public",
-      "description": null,
+      "description": "removes the box shadow",
       "keywords": [],
       "name": "flat",
       "kind": "let",
@@ -64,7 +64,7 @@
     },
     {
       "visibility": "public",
-      "description": null,
+      "description": "reduces the height",
       "keywords": [],
       "name": "dense",
       "kind": "let",
@@ -79,7 +79,7 @@
     },
     {
       "visibility": "public",
-      "description": null,
+      "description": "increases the height",
       "keywords": [],
       "name": "prominent",
       "kind": "let",
@@ -94,7 +94,7 @@
     },
     {
       "visibility": "public",
-      "description": null,
+      "description": "makes the positon of the appbar fixed",
       "keywords": [],
       "name": "fixed",
       "kind": "let",
@@ -109,7 +109,7 @@
     },
     {
       "visibility": "public",
-      "description": null,
+      "description": "makes the positon of the appbar absolute",
       "keywords": [],
       "name": "absolute",
       "kind": "let",
@@ -124,7 +124,7 @@
     },
     {
       "visibility": "public",
-      "description": null,
+      "description": "collapses the appbar reducing its maximum width",
       "keywords": [],
       "name": "collapsed",
       "kind": "let",
@@ -139,7 +139,7 @@
     },
     {
       "visibility": "public",
-      "description": null,
+      "description": "styles added to the appbar",
       "keywords": [],
       "name": "style",
       "kind": "let",