feat: initial commit to convert everything to typescript

.eslintrc.js

@@ -1,15 +1,19 @@
 module.exports = {
-  parser: "babel-eslint",
+  parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+  root: true,
+  extends: [
+    "plugin:@typescript-eslint/recommended", // Uses the recommended rules from @typescript-eslint/eslint-plugin
+    "prettier/@typescript-eslint", // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
+    "plugin:prettier/recommended", // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
+  ],
+  plugins: [],
   parserOptions: {
-    sourceType: "module"
+    ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
+    sourceType: "module", // Allows for the use of imports
+    ecmaFeatures: {},
   },
   env: {
     es6: true,
-    node: true
+    node: true,
   },
-  extends: ["eslint:recommended", "prettier"],
-  plugins: ["prettier"],
-  rules: {
-    "prettier/prettier": "error"
-  }
 };

package.json

@@ -13,26 +13,32 @@
     "format": "git ls-files --directory . | egrep '\\.js$'| xargs prettier --write --print-width 80 --tab-width 2 --trailing-comma all --single-quote"
   },
   "bin": {
-    "utility": "src/cli.js"
+    "utility": "src/cli.ts"
   },
   "dependencies": {
-    "commander": "4.1.0",
-    "cssstats": "^3.4.0",
+    "commander": "6.2.0",
+    "cssstats": "^3.4.1",
     "deepmerge": "^4.2.2",
-    "lodash": "^4.17.15",
-    "opn": "^6.0.0",
+    "lodash": "^4.17.20",
     "postcss": "7.0.26"
   },
   "devDependencies": {
-    "babel-eslint": "^10.0.3",
-    "chalk": "^3.0.0",
-    "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.9.0",
-    "eslint-plugin-prettier": "^3.1.2",
-    "husky": "^4.0.0",
-    "lint-staged": "^9.5.0",
-    "postcss-cli": "^6.1.3",
-    "prettier": "^1.19.1"
+    "@types/lodash": "^4.14.164",
+    "@typescript-eslint/eslint-plugin": "^4.6.0",
+    "@typescript-eslint/parser": "^4.6.0",
+    "babel-eslint": "^10.1.0",
+    "chalk": "^4.1.0",
+    "eslint": "^7.12.1",
+    "eslint-config-prettier": "^6.15.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-prettier": "^3.1.4",
+    "husky": "^4.3.0",
+    "lint-staged": "^10.5.1",
+    "open": "^7.3.0",
+    "postcss-cli": "^8.2.0",
+    "prettier": "^2.1.2",
+    "ts-node": "^9.0.0",
+    "typescript": "^4.0.5"
   },
   "husky": {
     "hooks": {

src/cli.js → src/cli.ts

@@ -1,13 +1,12 @@
-#!/usr/bin/env node
-const program = require("commander");
-const postcss = require("postcss");
-const chalk = require("chalk");
-const path = require("path");
-const fs = require("fs");
-const utility = require("..");
-const { builder } = utility;
+#!/usr/bin/env ts-node
+import program from "commander";
+import postcss from "postcss";
+import chalk from "chalk";
+import path from "path";
+import fs from "fs";
+import { builder } from "../";
 
-const packageJson = require(path.resolve(__dirname, "../package.json"));
+import packageJson from "../package.json";
 
 program.version(packageJson.version).usage("<command> [<args>]");
 
@@ -49,8 +48,8 @@ program
       : fs.readFileSync(path.resolve(__dirname, "../bootstrap.css"), "utf-8");
 
     const write = options.output
-      ? data => fs.writeFileSync(options.output, data)
-      : data => process.stdout.write(data);
+      ? (data) => fs.writeFileSync(options.output, data)
+      : (data) => process.stdout.write(data);
 
     let config;
     const localConfig = path.resolve("utility.config.js");
@@ -67,13 +66,13 @@ program
     console.log(chalk.blue("Building CSS bundle..."));
     postcss([builder(config)])
       .process(input)
-      .then(result => {
+      .then((result) => {
         write(result.css);
         // eslint-disable-next-line no-console
-        console.log(console.green("Success!"));
+        console.log(chalk.green("Success!"));
       })
       // eslint-disable-next-line no-console
-      .catch(e => console.err(chalk.red(e)));
+      .catch((e) => console.error(chalk.red(e)));
   });
 
 program.command("*", null, { noHelp: true }).action(() => {

src/helpers/build-css.ts

@@ -0,0 +1,31 @@
+import path from "path";
+import { promises as fsAsync } from "fs";
+import _ from "lodash";
+
+interface BuildCSS {
+  packageName: string;
+  atomCss: string;
+}
+
+export default async function ({
+  packageName,
+  atomCss,
+}: BuildCSS): Promise<string> {
+  const cssFile = await fsAsync.readFile(
+    path.join(__dirname, "templates", "theme.css"),
+    "utf-8"
+  );
+  const headTemplate = _.template(
+    await fsAsync.readFile(
+      path.join(__dirname, "templates", "head.html"),
+      "utf-8"
+    )
+  );
+  const headHtml = headTemplate({
+    packageName,
+    cssFile,
+    atomCss,
+  });
+
+  return headHtml;
+}

src/helpers/build-doc-partials.ts

@@ -0,0 +1,52 @@
+import buildCss from "./build-css";
+import buildNav from "./build-nav";
+import buildSidebar from "./build-sidebar";
+import buildSections from "./build-sections";
+import buildStats from "./build-stats";
+
+/* Function which build all parts of the document */
+export default async function buildDocPartials({
+  packageName,
+  modules,
+  atomCss,
+}: {
+  packageName: string;
+  modules: any;
+  atomCss: string;
+}): Promise<{
+  headHtml: string;
+  navHtml: string;
+  sidebarHtml: string;
+  sectionsHtml: string[];
+  statsHtml: string;
+}> {
+  // Build the <head>
+  const headHtml = await buildCss({
+    packageName,
+    atomCss,
+  });
+  // Build the <TopNav>
+  const navHtml = await buildNav({
+    packageName,
+  });
+  // Build the <Sidebar>
+  const sidebarHtml = await buildSidebar({
+    modules,
+  });
+  // Build the <Sections>
+  const sectionsHtml = await buildSections({
+    modules,
+  });
+  // Build the <>
+  const statsHtml = await buildStats({
+    atomCss,
+  });
+
+  return {
+    headHtml,
+    navHtml,
+    sidebarHtml,
+    sectionsHtml,
+    statsHtml,
+  };
+}

src/helpers/build-index.ts

@@ -0,0 +1,38 @@
+import path from "path";
+import _ from "lodash";
+import { promises as fsAsync } from "fs";
+
+interface BuildIndex {
+  headHtml: string;
+  navHtml: string;
+  sidebarHtml: string;
+  sectionsHtml: string[];
+  statsHtml: string;
+  packageName: string;
+}
+
+export default async function ({
+  headHtml,
+  navHtml,
+  sidebarHtml,
+  sectionsHtml,
+  statsHtml,
+  packageName,
+}: BuildIndex): Promise<string> {
+  const indexTemplate = _.template(
+    await fsAsync.readFile(
+      path.join(__dirname, "templates", "index.html"),
+      "utf-8"
+    )
+  );
+  const indexHtml = indexTemplate({
+    packageName,
+    head: headHtml,
+    nav: navHtml,
+    sidebar: sidebarHtml,
+    sections: sectionsHtml,
+    stats: statsHtml,
+  });
+
+  return indexHtml;
+}

src/helpers/build-nav.ts

@@ -0,0 +1,21 @@
+import path from "path";
+import { promises as fsAsync } from "fs";
+import _ from "lodash";
+
+export default async function buildNav({
+  packageName,
+}: {
+  packageName: string;
+}): Promise<string> {
+  const navTemplate = _.template(
+    await fsAsync.readFile(
+      path.join(__dirname, "templates", "nav.html"),
+      "utf8"
+    )
+  );
+  const navHtml = navTemplate({
+    packageName,
+  });
+
+  return navHtml;
+}