Update dependencies and types (#30)

wongnai · Oct 13, 2021 · 15a6190 · 15a6190
1 parent 9ade3e0
commit 15a6190
Show file tree

Hide file tree

Showing 15 changed files with 1,876 additions and 2,507 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -23,7 +23,7 @@ module.exports = {
 	globals: {
 		__DEV__: true,
 	},
-	extends: 'airbnb/base',
+	extends: ['airbnb-base'],
 	overrides: [typescriptConfig],
 	rules: {
 		// Disable Eslint rules that conflict to Prettier

diff --git a/.eslintrc.typescript.js b/.eslintrc.typescript.js
@@ -21,7 +21,7 @@ module.exports = {
 	env: {
 		jest: true,
 	},
-	extends: ['airbnb/base', 'plugin:@typescript-eslint/recommended-requiring-type-checking'],
+	extends: ['airbnb-base', 'plugin:@typescript-eslint/recommended-requiring-type-checking'],
 	rules: {
 		// Disable Eslint rules that conflict to Prettier
 		semi: 'off',

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "tonkatsu-amp",
-	"version": "0.0.2",
+	"version": "0.0.3",
 	"description": "Tonkatsu can help you to transform HTML tag to ⚡AMP tag",
 	"main": "src/index.ts",
 	"deploy": "./dist",
@@ -28,56 +28,56 @@
 	},
 	"homepage": "https://github.com/wongnai/tonkatsu-amp#readme",
 	"devDependencies": {
-		"@rollup/plugin-commonjs": "16.0.0",
+		"@rollup/plugin-commonjs": "21.0.0",
 		"@rollup/plugin-json": "4.1.0",
-		"@rollup/plugin-node-resolve": "10.0.0",
-		"@rollup/plugin-typescript": "6.1.0",
-		"@types/cache-manager": "2.10.3",
+		"@rollup/plugin-node-resolve": "13.0.5",
+		"@rollup/plugin-typescript": "8.2.5",
+		"@types/cache-manager": "3.4.2",
 		"@types/image-size": "0.8.0",
-		"@types/ioredis": "4.17.8",
-		"@types/jest": "26.0.15",
-		"@types/lodash": "4.14.165",
-		"@types/parse5": "5.0.3",
-		"@typescript-eslint/eslint-plugin": "4.8.2",
-		"@typescript-eslint/eslint-plugin-tslint": "4.8.2",
-		"@typescript-eslint/parser": "4.8.2",
+		"@types/ioredis": "4.27.5",
+		"@types/jest": "27.0.2",
+		"@types/lodash": "4.14.175",
+		"@types/parse5": "6.0.1",
+		"@typescript-eslint/eslint-plugin": "4.32.0",
+		"@typescript-eslint/eslint-plugin-tslint": "4.32.0",
+		"@typescript-eslint/parser": "4.32.0",
 		"app-root-path": "3.0.0",
 		"babel-eslint": "10.1.0",
-		"eslint": "7.14.0",
+		"eslint": "7.32.0",
 		"eslint-config-airbnb-base": "14.2.1",
-		"eslint-config-airbnb-typescript": "12.0.0",
-		"eslint-config-prettier": "6.15.0",
-		"eslint-import-resolver-typescript": "2.3.0",
-		"eslint-plugin-import": "2.22.1",
-		"eslint-plugin-jest": "24.1.3",
-		"eslint-plugin-prettier": "3.1.4",
-		"eslint-plugin-unused-imports": "1.0.1",
-		"husky": "4.3.0",
-		"jest": "26.6.3",
-		"lint-staged": "10.5.2",
+		"eslint-config-airbnb-typescript": "14.0.0",
+		"eslint-config-prettier": "8.3.0",
+		"eslint-import-resolver-typescript": "2.5.0",
+		"eslint-plugin-import": "2.24.2",
+		"eslint-plugin-jest": "24.5.0",
+		"eslint-plugin-prettier": "4.0.0",
+		"eslint-plugin-unused-imports": "1.1.5",
+		"husky": "7.0.2",
+		"jest": "27.2.4",
+		"lint-staged": "11.1.2",
 		"npm-run-all": "4.1.5",
-		"prettier": "2.2.0",
-		"rollup": "2.33.3",
+		"prettier": "2.4.1",
+		"rollup": "2.58.0",
 		"rollup-plugin-cleaner": "1.0.0",
 		"rollup-plugin-includepaths": "0.2.4",
 		"rollup-plugin-node-builtins": "2.1.2",
 		"rollup-plugin-node-globals": "1.4.0",
 		"rollup-plugin-node-polyfills": "0.2.1",
 		"rollup-plugin-terser": "7.0.2",
-		"rollup-plugin-visualizer": "4.2.0",
-		"standard-version": "9.0.0",
-		"ts-jest": "26.4.4",
+		"rollup-plugin-visualizer": "5.5.2",
+		"standard-version": "9.3.1",
+		"ts-jest": "27.0.5",
 		"tslint": "6.1.3",
 		"tslint-config-airbnb": "5.11.2",
 		"tslint-config-prettier": "1.18.0",
-		"tslint-etc": "1.13.7",
-		"typescript": "4.1.2"
+		"tslint-etc": "1.13.10",
+		"typescript": "4.4.3"
 	},
 	"dependencies": {
-		"cache-manager": "3.4.0",
+		"cache-manager": "3.4.4",
 		"cache-manager-ioredis": "2.1.0",
-		"image-size": "0.9.3",
-		"lodash": "4.17.20",
+		"image-size": "1.0.0",
+		"lodash": "4.17.21",
 		"parse5": "6.0.1"
 	},
 	"version-pong": {

diff --git a/src/htmlToAmp.ts b/src/htmlToAmp.ts
@@ -10,18 +10,18 @@ import transformYoutube from 'modules/transforms/youtube'
 import { getAttribute } from 'modules/utils/dom'
 import parse5 from 'parse5'
 
-const filterOut = (node: parse5.DefaultTreeElement) => {
+const filterOut = (node: parse5.Element) => {
 	node.nodeName = 'div'
 	node.tagName = 'div'
 	node.attrs.length = 0
 	node.childNodes.length = 0
 }
 
 export default async function htmlToAmp(htmlString: string, cache: cacheManager.Cache) {
-	const ast = parse5.parse(htmlString.trim()) as parse5.DefaultTreeDocument
+	const ast = parse5.parse(htmlString.trim())
 
 	await walk(ast, async node => {
-		const treeNode = node as parse5.DefaultTreeElement
+		const treeNode = node as parse5.Element
 		switch (treeNode.nodeName) {
 			case 'img':
 				await transformImg(treeNode, cache)
@@ -61,5 +61,5 @@ export default async function htmlToAmp(htmlString: string, cache: cacheManager.
 				break
 		}
 	})
-	return parse5.serialize((ast.childNodes[0] as parse5.DefaultTreeDocument).childNodes[1])
+	return parse5.serialize((ast.childNodes[0] as parse5.Element).childNodes[1])
 }
diff --git a/src/modules/lib/walk.ts b/src/modules/lib/walk.ts
@@ -1,18 +1,18 @@
 /* eslint-disable no-await-in-loop */
-import { DefaultTreeParentNode, Node, ParentNode } from 'parse5'
+import { Element, ParentNode } from 'parse5'
 
 export async function walk(
-	node: ParentNode,
-	callback: (node: ParentNode | Node) => void | boolean | Promise<void>,
+	node: ParentNode | Element,
+	callback: (node: ParentNode | Element) => void | boolean | Promise<void>,
 ): Promise<void | boolean> {
 	const res = await callback(node)
 	if (res === false) {
 		return false
 	} else {
-		const parentNode = node as DefaultTreeParentNode
+		const parentNode = node
 		if (parentNode.childNodes) {
 			for (const child of parentNode.childNodes) {
-				if ((await walk(child, callback)) === false) {
+				if ((await walk(child as ParentNode, callback)) === false) {
 					return false
 				}
 			}

diff --git a/src/modules/transforms/facebook.ts b/src/modules/transforms/facebook.ts
@@ -1,12 +1,8 @@
-import parse5 from 'parse5'
+import { DEFAULT_HEIGHT, DEFAULT_WIDTH, responsive } from 'modules/constants/image'
 import { getAttribute, setAttribute, wrap } from 'modules/utils/dom'
-import {
-	DEFAULT_WIDTH,
-	DEFAULT_HEIGHT,
-	responsive,
-} from 'modules/constants/image'
+import { Element, parseFragment } from 'parse5'
 
-export default function transformFacebook(node: parse5.DefaultTreeElement) {
+export default function transformFacebook(node: Element) {
 	const postWidth = getAttribute(node, 'width') ?? DEFAULT_WIDTH
 	const postHeight = getAttribute(node, 'height') ?? DEFAULT_HEIGHT
 	const src = decodeURIComponent(getAttribute(node, 'src') ?? '')
@@ -26,10 +22,7 @@ export default function transformFacebook(node: parse5.DefaultTreeElement) {
 		{ name: 'data-href', value: matches[2] },
 	]
 
-	const wrapper = (parse5.parseFragment(
-		'<div />',
-	) as parse5.DefaultTreeDocumentFragment)
-		.childNodes[0] as parse5.DefaultTreeElement
+	const wrapper = parseFragment('<div />').childNodes[0] as Element
 	setAttribute(wrapper, 'style', `max-width: ${postWidth}px; margin: auto;`)
 	wrap(node, wrapper)
 }
diff --git a/src/modules/transforms/fonts.ts b/src/modules/transforms/fonts.ts
@@ -1,7 +1,7 @@
 import { getAttribute } from 'modules/utils/dom'
-import parse5 from 'parse5'
+import { Element } from 'parse5'
 
-export default function transformFont(node: parse5.DefaultTreeElement) {
+export default function transformFont(node: Element) {
 	node.nodeName = 'span'
 	node.tagName = 'span'
 	node.attrs = [

diff --git a/src/modules/transforms/iframe.ts b/src/modules/transforms/iframe.ts
@@ -1,8 +1,8 @@
-import parse5 from 'parse5'
+import { DEFAULT_HEIGHT, DEFAULT_WIDTH, responsive } from 'modules/constants/image'
 import { getAttribute, setAttribute, wrap } from 'modules/utils/dom'
-import { DEFAULT_WIDTH, DEFAULT_HEIGHT, responsive } from 'modules/constants/image'
+import { Element, parseFragment } from 'parse5'
 
-export default function transformIframe(node: parse5.DefaultTreeElement) {
+export default function transformIframe(node: Element) {
 	const frameWidth = getAttribute(node, 'width') ?? DEFAULT_WIDTH
 	const frameHeight = getAttribute(node, 'height') ?? DEFAULT_HEIGHT
 	let src = getAttribute(node, 'src') ?? ''
@@ -44,7 +44,7 @@ export default function transformIframe(node: parse5.DefaultTreeElement) {
 		namespaceURI: 'http://www.w3.org/1999/xhtml',
 		parentNode: node,
 		childNodes: [],
-	} as parse5.DefaultTreeElement
+	} as Element
 	node.childNodes.push(placeholder)
 	node.attrs = [
 		responsive,
@@ -54,8 +54,7 @@ export default function transformIframe(node: parse5.DefaultTreeElement) {
 		{ name: 'sandbox', value: 'allow-scripts allow-same-origin' },
 	]
 
-	const wrapper = (parse5.parseFragment('<div />') as parse5.DefaultTreeDocumentFragment)
-		.childNodes[0] as parse5.DefaultTreeElement
+	const wrapper = parseFragment('<div />').childNodes[0] as Element
 	setAttribute(wrapper, 'style', 'width: 100%; margin: auto;')
 	wrap(node, wrapper)
 }
diff --git a/src/modules/transforms/image.ts b/src/modules/transforms/image.ts
@@ -3,12 +3,9 @@ import filter from 'lodash/filter'
 import { DEFAULT_HEIGHT, DEFAULT_WIDTH, responsive } from 'modules/constants/image'
 import { getAttribute, setAttribute, wrap } from 'modules/utils/dom'
 import { getCachedImageSize } from 'modules/utils/imageSize'
-import parse5 from 'parse5'
+import { Element, parseFragment } from 'parse5'
 
-export default async function transformImg(
-	node: parse5.DefaultTreeElement,
-	cache: cacheManager.Cache,
-) {
+export default async function transformImg(node: Element, cache: cacheManager.Cache) {
 	let imageSize
 	const imageSrc = getAttribute(node, 'src') ?? ''
 	try {
@@ -29,8 +26,7 @@ export default async function transformImg(
 		{ name: 'height', value: imageSize.height?.toString() ?? DEFAULT_HEIGHT },
 	]
 
-	const wrapper = (parse5.parseFragment('<div />') as parse5.DefaultTreeDocumentFragment)
-		.childNodes[0] as parse5.DefaultTreeElement
+	const wrapper = parseFragment('<div />').childNodes[0] as Element
 	setAttribute(wrapper, 'style', 'width: 100vw; margin: 0 calc(50% - 50vw);')
 	wrap(node, wrapper)
 }
diff --git a/src/modules/transforms/instagram.ts b/src/modules/transforms/instagram.ts
@@ -1,13 +1,13 @@
 import { height, responsive, width } from 'modules/constants/image'
 import { walk } from 'modules/lib/walk'
 import { getAttribute } from 'modules/utils/dom'
-import parse5 from 'parse5'
+import { Element } from 'parse5'
 
-export default function transformInstagram(node: parse5.DefaultTreeElement) {
+export default function transformInstagram(node: Element) {
 	const regex = /https:\/\/www.instagram\.com\/p\/([A-Za-z0-9]+)\//
 
 	return walk(node, subNode => {
-		const treeNode = subNode as parse5.DefaultTreeElement
+		const treeNode = subNode as Element
 		switch (treeNode.nodeName) {
 			case 'a':
 				if (getAttribute(treeNode, 'href')?.search('https://www.instagram.com/') === 0) {

diff --git a/src/modules/transforms/twitter.ts b/src/modules/transforms/twitter.ts
@@ -1,12 +1,12 @@
 import { height, responsive, width } from 'modules/constants/image'
 import { walk } from 'modules/lib/walk'
 import { getAttribute } from 'modules/utils/dom'
-import parse5 from 'parse5'
+import { Element } from 'parse5'
 
-export default function transformTwitter(node: parse5.DefaultTreeElement) {
+export default function transformTwitter(node: Element) {
 	const regex = /https:\/\/twitter\.com\/.+\/status[es]*\/([0-9]+).*/
 	return walk(node, subNode => {
-		const treeNode = subNode as parse5.DefaultTreeElement
+		const treeNode = subNode as Element
 		switch (treeNode.nodeName) {
 			case 'a':
 				if (getAttribute(treeNode, 'href')?.search('https://twitter.com/') === 0) {

diff --git a/src/modules/transforms/youtube.ts b/src/modules/transforms/youtube.ts
@@ -1,12 +1,8 @@
-import parse5 from 'parse5'
+import { DEFAULT_HEIGHT, DEFAULT_WIDTH, responsive } from 'modules/constants/image'
 import { getAttribute, setAttribute, wrap } from 'modules/utils/dom'
-import {
-	DEFAULT_WIDTH,
-	DEFAULT_HEIGHT,
-	responsive,
-} from 'modules/constants/image'
+import { Element, parseFragment } from 'parse5'
 
-export default function transformYoutube(node: parse5.DefaultTreeElement) {
+export default function transformYoutube(node: Element) {
 	const youtubeSrc = getAttribute(node, 'src') ?? ''
 	const videoWidth = getAttribute(node, 'width') ?? DEFAULT_WIDTH
 	const videoHeight = getAttribute(node, 'height') ?? DEFAULT_HEIGHT
@@ -26,10 +22,7 @@ export default function transformYoutube(node: parse5.DefaultTreeElement) {
 		{ name: 'style', value: 'margin-top: 16px; margin-bottom: 16px;' },
 	]
 
-	const wrapper = (parse5.parseFragment(
-		'<div />',
-	) as parse5.DefaultTreeDocumentFragment)
-		.childNodes[0] as parse5.DefaultTreeElement
+	const wrapper = parseFragment('<div />').childNodes[0] as Element
 	setAttribute(wrapper, 'style', 'width: 100vw; margin: 0 calc(50% - 50vw);')
 	wrap(node, wrapper)
 }
diff --git a/src/modules/utils/dom.ts b/src/modules/utils/dom.ts
@@ -1,14 +1,14 @@
 import get from 'lodash/get'
-import parse5 from 'parse5'
+import { Element } from 'parse5'
 
-export function getAttribute(node: parse5.DefaultTreeElement, nameToFind: string) {
+export function getAttribute(node: Element, nameToFind: string) {
 	return get(
 		node.attrs.find(e => e.name === nameToFind),
 		'value',
 	)
 }
 
-export function setAttribute(node: parse5.DefaultTreeElement, name: string, value: string) {
+export function setAttribute(node: Element, name: string, value: string) {
 	for (const item of node.attrs) {
 		if (item.name === name) {
 			item.value = value
@@ -22,7 +22,7 @@ export function setAttribute(node: parse5.DefaultTreeElement, name: string, valu
 	})
 }
 
-export function wrap(node: parse5.DefaultTreeElement, wrapped: parse5.DefaultTreeElement) {
+export function wrap(node: Element, wrapped: Element) {
 	// replace node in parent by wrapped
 	for (let i = 0; i < node.parentNode.childNodes.length; i++) {
 		if (node.parentNode.childNodes[i] === node) {

diff --git a/src/modules/utils/imageSize.ts b/src/modules/utils/imageSize.ts
@@ -47,7 +47,7 @@ export function getImageSize(url: string): Promise<ISizeCalculationResult> {
 						resolve(size)
 					}
 				} catch (e) {
-					lastError = e
+					lastError = e as Error
 				}
 			})