refactor: js => ts

bench/index.js

@@ -1,5 +1,5 @@
 const { Suite } = require('benchmark')
-const badgen = require('..')
+const { badgen } = require('..')
 const icon = require('../test/assets/icon-data-uri.js')
 
 /* eslint max-len: ["error", { "code": 90 }] */

package-lock.json

@@ -2023,7 +2023,7 @@
     },
     "mkdirp": {
       "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+      "resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
       "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
       "dev": true,
       "requires": {
@@ -4188,6 +4188,12 @@
           "bundled": true,
           "dev": true
         },
+        "typescript": {
+          "version": "3.6.3",
+          "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.6.3.tgz",
+          "integrity": "sha512-N7bceJL1CtRQ2RiG0AQME13ksR7DiuQh/QehubYcghzv20tnh+MQnQIuJddTmsbqYj+dztchykemz0zFzlvdQw==",
+          "dev": true
+        },
         "widest-line": {
           "version": "2.0.1",
           "bundled": true,
@@ -4511,10 +4517,9 @@
       }
     },
     "typescript": {
-      "version": "3.6.3",
+      "version": "3.7.0-beta",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.6.3.tgz",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.7.0-beta.tgz",
-      "integrity": "sha512-N7bceJL1CtRQ2RiG0AQME13ksR7DiuQh/QehubYcghzv20tnh+MQnQIuJddTmsbqYj+dztchykemz0zFzlvdQw==",
+      "integrity": "sha512-4jyCX+IQamrPJxgkABPq9xf+hUN+GWHVxoj+oey1TadCPa4snQl1RKwUba+1dyzYCamwlCxKvZQ3TjyWLhMGBA=="
-      "dev": true
     },
     "uglify-js": {
       "version": "3.6.0",

package.json

@@ -14,7 +14,8 @@
     "snaptests": "TAP_SNAPSHOT=1 npm test",
     "pretest": "npm run lint && npm run build",
     "test": "tap test/*.spec.js --reporter spec --coverage",
-    "build": "ncc -s -m --no-source-map-register build src/index.js && cp src/*.d.ts dist",
+    "prebuild": "rm -rf dist",
+    "build": "ncc -s -m --no-source-map-register build src/index.ts",
     "prepublishOnly": "npm run build"
   },
   "devDependencies": {
@@ -23,5 +24,8 @@
     "serve-marked": "^2.0.2",
     "standard": "^14.3.1",
     "tap": "^14.6.9"
+  },
+  "dependencies": {
+    "typescript": "^3.7.0-beta"
   }
 }

src/bare.js

@@ -1,41 +0,0 @@
-const calcWidth = require('./calc-text-width.js').Verdana110
-const colorPresets = require('./color-presets.js')
-const { sanitize, typeAssert } = require('./utils.js')
-
-module.exports = ({ status, color, style }) => {
-  typeAssert(typeof status === 'string', '<status> must be string')
-  color = colorPresets[color] || color || colorPresets.blue
-
-  const stTextWidth = calcWidth(status)
-  const stRectWidth = stTextWidth + 115
-
-  status = sanitize(status)
-
-  if (style === 'flat') {
-    return `<svg width="${stRectWidth / 10}" height="20" viewBox="0 0 ${stRectWidth} 200" xmlns="http://www.w3.org/2000/svg">
-  <g>
-    <rect fill="#${color}" x="0" width="${stRectWidth}" height="200"/>
-  </g>
-  <g fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="110">
-    <text x="65" y="148" textLength="${stTextWidth}" fill="#000" opacity="0.1">${status}</text>
-    <text x="55" y="138" textLength="${stTextWidth}">${status}</text>
-  </g>
-</svg>`
-  }
-
-  return `<svg width="${stRectWidth / 10}" height="20" viewBox="0 0 ${stRectWidth} 200" xmlns="http://www.w3.org/2000/svg">
-  <linearGradient id="a" x2="0" y2="100%">
-    <stop offset="0" stop-opacity=".1" stop-color="#EEE"/>
-    <stop offset="1" stop-opacity=".1"/>
-  </linearGradient>
-  <mask id="m"><rect width="${stRectWidth}" height="200" rx="30" fill="#FFF"/></mask>
-  <g mask="url(#m)">
-    <rect width="${stRectWidth}" height="200" fill="#${color}" x="0"/>
-    <rect width="${stRectWidth}" height="200" fill="url(#a)"/>
-  </g>
-  <g fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="110">
-    <text x="65" y="148" textLength="${stTextWidth}" fill="#000" opacity="0.25">${status}</text>
-    <text x="55" y="138" textLength="${stTextWidth}">${status}</text>
-  </g>
-</svg>`
-}

src/calc-text-width.ts

@@ -1,3 +1,5 @@
+// import widthsVerdana110 from './widths-verdana-110.json'
+// @ts-ignore
 const widthsVerdana110 = require('./widths-verdana-110.json')
 
 const calcWidth = (charWidthTable) => {
@@ -15,6 +17,4 @@ const calcWidth = (charWidthTable) => {
   }
 }
 
-module.exports = {
+export const Verdana110 = calcWidth(widthsVerdana110)
-  Verdana110: calcWidth(widthsVerdana110)
-}

src/color-presets.ts

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   green: '3C1',
   blue: '08C',
   red: 'E43',

src/index.ts

@@ -1,10 +1,21 @@
-const calcWidth = require('./calc-text-width.js').Verdana110
+import { Verdana110 as calcWidth } from './calc-text-width'
-const colorPresets = require('./color-presets.js')
+import colorPresets from './color-presets'
-const { sanitize, typeAssert } = require('./utils.js')
 
-const bare = require('./bare.js')
+type StyleOption = 'flat' | 'classic'
 
-module.exports = ({
+interface BadgenOptions {
+  status: string;
+  subject?: string;
+  color?: string;
+  label?: string;
+  labelColor?: string
+  style?: StyleOption;
+  icon?: string;
+  iconWidth?: number;
+  scale?: number
+}
+
+export function badgen ({
   label,
   subject,
   status,
@@ -14,7 +25,7 @@ module.exports = ({
   iconWidth = 13,
   labelColor = '555',
   scale = 1
-}) => {
+}: BadgenOptions) {
   typeAssert(typeof status === 'string', '<status> must be string')
 
   label = label === undefined ? subject : label // subject is deprecated
@@ -75,4 +86,58 @@ module.exports = ({
 </svg>`
 }
 
-module.exports.default = module.exports
+function bare ({ status, color, style }) {
+  typeAssert(typeof status === 'string', '<status> must be string')
+  color = colorPresets[color] || color || colorPresets.blue
+
+  const stTextWidth = calcWidth(status)
+  const stRectWidth = stTextWidth + 115
+
+  status = sanitize(status)
+
+  if (style === 'flat') {
+    return `<svg width="${stRectWidth / 10}" height="20" viewBox="0 0 ${stRectWidth} 200" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <rect fill="#${color}" x="0" width="${stRectWidth}" height="200"/>
+  </g>
+  <g fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="110">
+    <text x="65" y="148" textLength="${stTextWidth}" fill="#000" opacity="0.1">${status}</text>
+    <text x="55" y="138" textLength="${stTextWidth}">${status}</text>
+  </g>
+</svg>`
+  }
+
+  return `<svg width="${stRectWidth / 10}" height="20" viewBox="0 0 ${stRectWidth} 200" xmlns="http://www.w3.org/2000/svg">
+  <linearGradient id="a" x2="0" y2="100%">
+    <stop offset="0" stop-opacity=".1" stop-color="#EEE"/>
+    <stop offset="1" stop-opacity=".1"/>
+  </linearGradient>
+  <mask id="m"><rect width="${stRectWidth}" height="200" rx="30" fill="#FFF"/></mask>
+  <g mask="url(#m)">
+    <rect width="${stRectWidth}" height="200" fill="#${color}" x="0"/>
+    <rect width="${stRectWidth}" height="200" fill="url(#a)"/>
+  </g>
+  <g fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="110">
+    <text x="65" y="148" textLength="${stTextWidth}" fill="#000" opacity="0.25">${status}</text>
+    <text x="55" y="138" textLength="${stTextWidth}">${status}</text>
+  </g>
+</svg>`
+}
+
+function sanitize (str: string): string {
+  return str.replace(/\u0026/g, '&amp;').replace(/\u003C/g, '&lt;')
+}
+
+function typeAssert (assertion: boolean, message: string): void {
+  if (!assertion) throw new TypeError(message)
+}
+
+declare global {
+  interface Window {
+    badgen: typeof badgen;
+  }
+}
+
+if (typeof window === 'object') {
+  window.badgen = badgen
+}

src/utils.js

@@ -1,11 +0,0 @@
-
-const sanitize = str => str.replace(/\u0026/g, '&').replace(/\u003C/g, '<')
-
-const typeAssert = (assertion, message) => {
-  if (!assertion) throw new TypeError(message)
-}
-
-module.exports = {
-  sanitize,
-  typeAssert
-}

tsconfig.json

@@ -1,16 +1,20 @@
 {
   "compilerOptions": {
     "target": "es2017",
-    "module": "esnext",
+    "module": "commonjs",
     "lib": ["esnext", "dom"],
 
+    "rootDir": "src",
     "outDir": "dist",
 
+    "declaration": true,
     "sourceMap":true,
     "allowJs":true,
 
     "moduleResolution":"node",
+    "resolveJsonModule": true,
     "experimentalDecorators": true,
     "allowSyntheticDefaultImports": true
-  }
+  },
+  "include": ["src"]
 }