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.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/calc-text-width.js → 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 = {
-  Verdana110: calcWidth(widthsVerdana110)
-}
+export const Verdana110 = calcWidth(widthsVerdana110)

src/color-presets.js → src/color-presets.ts

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

src/index.js → src/index.ts

@@ -1,10 +1,21 @@
-const calcWidth = require('./calc-text-width.js').Verdana110
-const colorPresets = require('./color-presets.js')
-const { sanitize, typeAssert } = require('./utils.js')
+import { Verdana110 as calcWidth } from './calc-text-width'
+import colorPresets from './color-presets'
 
-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
+}

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"]
 }