badges/badgen
1
0
Fork 0
mirror of https://github.com/badgen/badgen.git synced 2025-04-19 05:42:16 +03:00
Code

refactor: js => ts

Browse Source
This commit is contained in:
amio 2019-10-03 12:08:16 +08:00
parent 3ef0141295
commit 0a2dd9d00e
9 changed files with 98 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
bench/index.js
View File

@ -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 }] */

15
package-lock.json generated
View File

@ -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",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-3.6.3.tgz",
"integrity": "sha512-N7bceJL1CtRQ2RiG0AQME13ksR7DiuQh/QehubYcghzv20tnh+MQnQIuJddTmsbqYj+dztchykemz0zFzlvdQw==",
"dev": true
"version": "3.7.0-beta",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-3.7.0-beta.tgz",
"integrity": "sha512-4jyCX+IQamrPJxgkABPq9xf+hUN+GWHVxoj+oey1TadCPa4snQl1RKwUba+1dyzYCamwlCxKvZQ3TjyWLhMGBA=="
},
"uglify-js": {
"version": "3.6.0",

6
package.json
View File

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

41
src/bare.js
View File

@ -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>`
}

6
src/calc-text-width.js → src/calc-text-width.ts
View File

@ -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)

2
src/color-presets.js → src/color-presets.ts
View File

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

79
src/index.js → src/index.ts
View File

@ -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
}

11
src/utils.js
View File

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

8
tsconfig.json
View File

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