chore: port to typescript

Author: metonym

.prettierignore

@@ -9,7 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 **Fixes**
 
-- only add heading to TOC if text is defined
+- Add heading to TOC if text is defined
 
 ## [1.3.0](https://github.com/metonym/svelte-readme/releases/tag/v1.3.0) - 2020-12-21
 

CHANGELOG.md

@@ -38,14 +38,15 @@ import svelte from "rollup-plugin-svelte";
 import svelteReadme from "svelte-readme";
 import pkg from "./package.json";
 
-const DEV = process.env.ROLLUP_WATCH;
-const BUNDLE = process.env.BUNDLE === "true";
-
 export default () => {
-  if (!BUNDLE) {
+  if (process.env.BUNDLE !== "true") {
     return svelteReadme({
-      minify: !DEV,
-      prefixUrl: "https://github.com/metonym/svelte-readme/tree/master/",
+      minify: !process.env.ROLLUP_WATCH,
+      svelte: {
+        compilerOptions: {
+          immutable: true,
+        },
+      },
     });
   }
 

README.md

@@ -5,41 +5,49 @@
   "description": "Use your README.md file for Svelte component documentation",
   "author": "Eric Liu (https://github.com/metonym)",
   "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "scripts": {
-    "dev": "node scripts/preprocessStyles && rollup -cw",
-    "prepack": "rollup -c"
-  },
-  "peerDependencies": {
-    "svelte": "^3.20.x"
+    "preprocess": "node scripts/preprocessStyles",
+    "dev": "yarn preprocess && tsc -w",
+    "prepack": "yarn preprocess && tsc"
   },
   "dependencies": {
-    "@rollup/plugin-node-resolve": "^10.0.0",
+    "@rollup/plugin-node-resolve": "^11.0.1",
     "@rollup/plugin-virtual": "^2.0.3",
     "fs-extra": "^9.0.1",
     "html-minifier": "^4.0.0",
     "is-relative-url": "^3.0.0",
-    "markdown-it": "^12.0.2",
+    "markdown-it": "^12.0.4",
     "markdown-it-anchor": "^6.0.1",
     "prettier": "^2.2.1",
-    "prettier-plugin-svelte": "^1.4.1",
+    "prettier-plugin-svelte": "^1.4.2",
     "prism-svelte": "^0.4.7",
     "prismjs": "^1.22.0",
-    "rollup": "^2.33.3",
-    "rollup-plugin-svelte": "^6.1.1",
+    "rollup": "^2.35.1",
+    "rollup-plugin-svelte": "^7.0.0",
     "rollup-plugin-terser": "^7.0.2"
   },
   "devDependencies": {
+    "@types/fs-extra": "^9.0.6",
+    "@types/html-minifier": "^4.0.0",
+    "@types/markdown-it": "^12.0.0",
+    "@types/markdown-it-anchor": "^4.0.4",
+    "@types/prettier": "^2.1.6",
+    "@types/prismjs": "^1.16.2",
+    "@types/rollup__plugin-virtual": "^2.0.1",
     "github-markdown-css": "4.0.0",
-    "postcss": "^8.1.10",
-    "svelte": "^3.30.0"
+    "postcss": "^8.2.2",
+    "svelte": "^3.31.0",
+    "ts-node-dev": "^1.1.1",
+    "typescript": "^4.1.3"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/metonym/svelte-readme"
   },
   "homepage": "https://github.com/metonym/svelte-readme",
   "bugs": "https://github.com/metonym/svelte-readme/issues",
-  "keywords": [],
+  "keywords": ["svelte", "svelte-component", "documentation"],
   "files": [
     "dist"
   ],

package.json

@@ -25,5 +25,5 @@ const plugin = postcss.plugin("postcss-plugin", () => {
 postcss(plugin)
   .process(github_css, { from: undefined })
   .then((result) => {
-    fs.writeFileSync("src/style.js", `export const css = \`${result.css}\`;`);
+    fs.writeFileSync("src/style.ts", `export const css = \`${result.css}\`;`);
   });

rollup.config.js

@@ -1,5 +1,5 @@
 import resolve from "@rollup/plugin-node-resolve";
-import rollupPluginSvelte from "rollup-plugin-svelte";
+import rollupPluginSvelte, { Options as RollupPluginSvelteOptions } from "rollup-plugin-svelte";
 import virtual from "@rollup/plugin-virtual";
 import { terser } from "rollup-plugin-terser";
 import { preprocessReadme } from "./preprocessReadme";
@@ -8,6 +8,7 @@ import path from "path";
 import { createHash } from "crypto";
 import htmlminifier from "html-minifier";
 import { css } from "./style";
+import { Plugin, OutputOptions, InputOptions } from "rollup";
 
 function hashREADME() {
   try {
@@ -24,6 +25,7 @@ function getPackageJSON() {
   try {
     const path_pkg = path.join(process.cwd(), "package.json");
     const pkg = JSON.parse(fs.readFileSync(path_pkg, "utf-8"));
+
     if (!pkg.name) throw Error(`Package name is required as "name".`);
     if (!pkg.svelte) throw Error(`Svelte code entry is required as "svelte".`);
 
@@ -75,19 +77,57 @@ const custom_css = `
   }
 `;
 
-/**
- * createConfig
- * @param {Object} opts
- * @param {boolean} opts.minify - set to `true` to minify the HTML/JS
- * @param {string} opts.outDir - set the folder to emit the files
- * @param {string} opts.style - custom CSS appended to the <style> block
- * @param {boolean} opts.disableDefaultCSS - set to `true` to omit the default GitHub styles
- * @param {string} opts.prefixUrl - Value to prepend to relative URLs (i.e. GitHub repo URL)
- * @param {object} opts.svelte - `rollup-plugin-svelte` options
- * @param {Array} opts.plugins - Rollup plugins
- * @param {object} opts.output - Rollup output options
- */
-export default function createConfig(opts) {
+interface CreateConfigOptions {
+  /**
+   * set to `true` to minify the HTML/JS
+   * @default false
+   */
+  minify: boolean;
+
+  /**
+   * set the folder to emit the files
+   * @default "dist"
+   */
+  outDir: string;
+
+  /**
+   * custom CSS appended to the <style> block
+   * @default ""
+   */
+  style: string;
+
+  /**
+   * set to `true` to omit the default GitHub styles
+   * @default false
+   */
+  disableDefaultCSS: boolean;
+
+  /**
+   * value to prepend to relative URLs (i.e. GitHub repo URL)
+   * @default undefined
+   */
+  prefixUrl: string;
+
+  /**
+   * `rollup-plugin-svelte` options
+   * @default {}
+   */
+  svelte: RollupPluginSvelteOptions;
+
+  /**
+   * Rollup plugins
+   * @default {[]}
+   */
+  plugins: Plugin[];
+
+  /**
+   * Rollup output options
+   * @default {{}}
+   */
+  output: OutputOptions;
+}
+
+export default function createConfig(opts: Partial<CreateConfigOptions>): InputOptions {
   const minify = opts.minify === true;
   const pkg = getPackageJSON();
   const hash = minify ? hashREADME() : "";
@@ -131,6 +171,7 @@ export default function createConfig(opts) {
   return {
     watch: { clearScreen: false },
     input: "entry",
+    // @ts-ignore
     output: {
       format: "iife",
       name: "app",
@@ -151,6 +192,6 @@ export default function createConfig(opts) {
       resolve(),
       ...(opts.plugins || []),
       minify && terser(),
-    ].filter(Boolean),
+    ].filter(Boolean) as Plugin[],
   };
 }

scripts/preprocessStyles.js

@@ -0,0 +1,3 @@
+declare module "prismjs/components/*";
+
+declare module "prism-svelte";

src/createConfig.js renamed to src/createConfig.ts

@@ -6,15 +6,24 @@ import Prism from "prismjs";
 import "prismjs/components/prism-bash";
 import "prism-svelte";
 import isRelativeUrl from "is-relative-url";
+import { PreprocessorGroup } from "svelte/types/compiler/preprocess";
+import { Node } from "estree-walker";
 
-const aliases = {
+const aliases: Record<string, string> = {
   sh: "bash",
   js: "javascript",
 };
 
-let md;
+let md: Markdown;
 
-export function preprocessReadme(opts) {
+interface PreprocessReadmeOptions {
+  name: string;
+  svelte: string;
+  prefixUrl: string;
+  homepage: string;
+}
+
+export function preprocessReadme(opts: Partial<PreprocessReadmeOptions>): Pick<PreprocessorGroup, "markup"> {
   const prefixUrl = opts.prefixUrl || `${opts.homepage}/tree/master/`;
 
   if (!md) {
@@ -53,6 +62,7 @@ export function preprocessReadme(opts) {
   }
 
   return {
+    // @ts-ignore
     markup: ({ content, filename }) => {
       if (/node_modules/.test(filename) || !filename.endsWith(".md")) return null;
 
@@ -68,10 +78,10 @@ export function preprocessReadme(opts) {
       let result = md.render(content);
       let cursor = 0;
 
-      const ast = parse(result);
+      const ast = (parse(result) as unknown) as Node;
 
       let headings = [];
-      let prev;
+      let prev: undefined | "h2" | "h3" = undefined;
 
       walk(ast, {
         enter(node, parent) {
@@ -93,6 +103,7 @@ export function preprocessReadme(opts) {
           }
 
           if (node.type === "Element" && node.name === "h2") {
+            // @ts-ignore
             const id = node.attributes.find((attr) => attr.name === "id").value[0].raw;
 
             if (id === "table-of-contents") return;
@@ -111,6 +122,7 @@ export function preprocessReadme(opts) {
           }
 
           if (node.type === "Element" && node.name === "h3") {
+            // @ts-ignore
             const id = node.attributes.find((attr) => attr.name === "id").value[0].raw;
             const text = node.children[0].raw;
 
@@ -128,10 +140,10 @@ export function preprocessReadme(opts) {
           if (node.type === "Attribute" && node.name === "data-svelte") {
             const raw_value = node.value[0].raw;
             const value = decodeURI(raw_value);
-            const value_ast = parse(value);
+            const value_ast = (parse(value) as unknown) as Node;
             const markup =
               `<div class="code-fence">` + value.slice(value_ast.html.start, value_ast.html.end) + "</div>";
-            const replace = result.slice(parent.start + cursor, parent.end + cursor);
+            const replace = result.slice(parent!.start + cursor, parent!.end + cursor);
             result = result.replace(replace, markup + replace.replace(raw_value, ""));
             cursor += markup.length - raw_value.length;
 
@@ -156,10 +168,9 @@ export function preprocessReadme(opts) {
       );
 
       return {
-        code: `
-            <script>${script_content}</script>
-            <style>${style_content}</style>
-            <main class="markdown-body">${result}</main>`,
+        code: `<script>${script_content}</script>
+              <style>${style_content}</style>
+              <main class="markdown-body">${result}</main>`,
       };
     },
   };