refactor: rewrite with typescript

Author: pi0

.eslintignore

@@ -5,8 +5,7 @@ dist
 coverage
 
 # Plugin
-lib/**/plugin.js
-lib/**/templates
+templates
 
 # Fixtures
 test/fixture/**/static

.eslintrc

@@ -0,0 +1,5 @@
+{
+  "extends": [
+    "@nuxtjs/eslint-config-typescript"
+  ]
+}

.eslintrc.js

@@ -1,5 +1,3 @@
 module.exports = {
-  collectCoverage: true,
-  collectCoverageFrom: ['lib/**/*.js', '!lib/**/plugin.js', '!lib/**/templates/*.js'],
-  testEnvironment: 'node'
+  preset: '@nuxt/test-utils'
 }

jest.config.js

@@ -1,4 +1,4 @@
-module.exports = function mergeMeta (to, from) {
+export function mergeMeta (to, from) {
   if (typeof to === 'function') {
     // eslint-disable-next-line no-console
     console.warn('Cannot merge meta. Avoid using head as a function!')

lib/meta/meta.merge.js renamed to lib/meta.utils.js

@@ -1,9 +1,8 @@
 const path = require('path')
-const Jimp = require('jimp-compact')
-const { normalizeSize, sizeName } = require('../utils')
+const jimp = require('jimp-compact')
 
 async function resize ({ input, distDir, sizes }) {
-  const inputFile = await Jimp.read(input)
+  const inputFile = await jimp.read(input)
 
   // Icons
   await Promise.all(sizes.map(normalizeSize).map((size) => {
@@ -21,3 +20,23 @@ resize(JSON.parse(process.argv[2])).then(() => {
   console.error(error) // eslint-disable-line no-console
   process.exit(1)
 })
+
+// TODO: Dedup
+function sizeName (size) {
+  size = normalizeSize(size)
+  const prefix = size[2] ? (size[2] + '_') : ''
+  return prefix + size[0] + 'x' + size[1]
+}
+
+// TODO: Dedup
+function normalizeSize (size) {
+  if (!Array.isArray(size)) {
+    size = [size, size]
+  }
+  if (size.length === 1) {
+    size = [size, size]
+  } else if (size.length === 0) {
+    size = 64
+  }
+  return size
+}

lib/meta/module.runtime.js

@@ -4,15 +4,18 @@
   "description": "Zero config PWA solution for Nuxt.js",
   "repository": "nuxt-community/pwa-module",
   "license": "MIT",
-  "main": "lib/module.js",
+  "main": "dist/pwa.js",
+  "types": "./types/index.d.ts",
   "files": [
     "lib",
+    "dist",
+    "templates",
     "types"
   ],
-  "types": "./types/index.d.ts",
   "scripts": {
-    "dev": "nuxt test/fixture",
-    "lint": "eslint --ext .js,.vue .",
+    "build": "siroc build",
+    "dev": "nuxt-ts test/fixture",
+    "lint": "eslint --ext .js,.vue,.ts .",
     "release": "yarn test && standard-version && git push --follow-tags && npm publish",
     "test": "yarn lint && jest"
   },
@@ -23,30 +26,28 @@
     "hasha": "^5.2.2",
     "jimp-compact": "^0.16.1",
     "lodash.template": "^4.5.0",
+    "serve-static": "^1.14.1",
     "workbox-cdn": "^5.1.4"
   },
   "devDependencies": {
+    "@babel/preset-typescript": "^7.12.7",
+    "@nuxt/test-utils": "^0.0.1",
     "@nuxt/types": "^2.14.7",
+    "@nuxt/typescript-build": "^2.0.3",
+    "@nuxt/typescript-runtime": "^2.0.0",
     "@nuxtjs/eslint-config": "latest",
+    "@nuxtjs/eslint-config-typescript": "^5.0.0",
     "@nuxtjs/module-test-utils": "latest",
     "@types/workbox-sw": "^4.3.1",
-    "axios": "latest",
     "babel-eslint": "latest",
     "codecov": "latest",
     "eslint": "latest",
-    "eslint-config-standard": "latest",
-    "eslint-plugin-html": "latest",
-    "eslint-plugin-import": "latest",
-    "eslint-plugin-jest": "latest",
-    "eslint-plugin-node": "latest",
-    "eslint-plugin-promise": "latest",
-    "eslint-plugin-standard": "latest",
     "jest": "latest",
-    "jsdom": "latest",
     "klaw-sync": "latest",
-    "lerna": "latest",
     "node-fetch": "latest",
     "nuxt-edge": "latest",
-    "standard-version": "latest"
+    "siroc": "^0.4.3",
+    "standard-version": "latest",
+    "typescript": "^4.1.2"
   }
 }

lib/icon/resize.js renamed to lib/resize.js

@@ -1,16 +1,15 @@
-const path = require('path')
-const { fork } = require('child_process')
-const { join } = require('path')
-const fs = require('fs-extra')
-const hasha = require('hasha')
-const { joinUrl, getRouteParams, sizeName, emitAsset } = require('../utils')
-const { version } = require('../../package.json')
-
-module.exports = async function (nuxt, pwa, moduleContainer) {
+import { join, resolve } from 'path'
+import { fork } from 'child_process'
+import fs from 'fs-extra'
+import hasha from 'hasha'
+import type { IconOptions } from '../types/icon'
+import { joinUrl, getRouteParams, sizeName, emitAsset, PKG, PKG_DIR } from './utils'
+
+export async function icon (nuxt, pwa, moduleContainer) {
   const { publicPath } = getRouteParams(nuxt.options)
 
   // Defaults
-  const defaults = {
+  const defaults: IconOptions = {
     sizes: [64, 120, 144, 152, 192, 384, 512],
 
     iosSizes: [
@@ -38,14 +37,15 @@ module.exports = async function (nuxt, pwa, moduleContainer) {
 
     publicPath,
 
+    // @ts-ignore
     _iconHash: null,
     _assets: null,
     _manifestIcons: null,
     _iosSplash: null
   }
 
   // Merge options
-  const options = {
+  const options: IconOptions = {
     ...defaults,
     ...pwa.icon
   }
@@ -56,7 +56,7 @@ module.exports = async function (nuxt, pwa, moduleContainer) {
   // Disable module if no icon specified
   if (!options.source) {
     // eslint-disable-next-line no-console
-    console.warn('[pwa] [icon] Icon not found in ' + path.resolve(nuxt.options.srcDir, nuxt.options.dir.static, options.fileName))
+    console.warn('[pwa] [icon] Icon not found in ' + resolve(nuxt.options.srcDir, nuxt.options.dir.static, options.fileName))
     return
   }
 
@@ -90,8 +90,8 @@ module.exports = async function (nuxt, pwa, moduleContainer) {
 function findIcon (nuxt, options) {
   const iconSearchPath = [
     options.source,
-    path.resolve(nuxt.options.srcDir, nuxt.options.dir.static, options.fileName),
-    path.resolve(nuxt.options.srcDir, nuxt.options.dir.assets, options.fileName)
+    resolve(nuxt.options.srcDir, nuxt.options.dir.static, options.fileName),
+    resolve(nuxt.options.srcDir, nuxt.options.dir.assets, options.fileName)
   ].filter(p => p)
 
   for (const source of iconSearchPath) {
@@ -109,8 +109,8 @@ function addPlugin (_nuxt, options, moduleContainer) {
 
   if (options.plugin) {
     moduleContainer.addPlugin({
-      src: path.resolve(__dirname, './plugin.js'),
-      fileName: 'pwa/icons.js',
+      src: resolve(PKG_DIR, 'templates/icon.plugin.js'),
+      fileName: 'pwa/icon.plugin.js',
       options: {
         pluginName: options.pluginName,
         icons
@@ -173,14 +173,14 @@ function emitAssets (nuxt, options) {
   const resizePromise = resizeIcons(nuxt, options)
 
   for (const { name, target } of options._assets) {
-    const srcFileName = path.join(options.cacheDir, `${name}.png`)
+    const srcFileName = join(options.cacheDir, `${name}.png`)
     emitAsset(nuxt, target, resizePromise.then(() => fs.readFile(srcFileName)))
   }
 }
 
 async function resizeIcons (_nuxt, options) {
   const resizeOpts = JSON.stringify({
-    version,
+    version: PKG.version,
     input: options.source,
     distDir: options.cacheDir,
     sizes: [
@@ -189,18 +189,19 @@ async function resizeIcons (_nuxt, options) {
     ]
   })
 
-  const integrityFile = path.join(options.cacheDir, '.' + hasha(resizeOpts).substr(0, 8))
+  const integrityFile = join(options.cacheDir, '.' + hasha(resizeOpts).substr(0, 8))
 
   if (fs.existsSync(integrityFile)) {
     return
   }
   await fs.remove(options.cacheDir)
   await fs.mkdirp(options.cacheDir)
 
-  await new Promise((resolve, reject) => {
-    const child = fork(require.resolve('./resize'), [resizeOpts], { execArgv: [] })
+  // eslint-disable-next-line promise/param-names
+  await new Promise((_resolve, _reject) => {
+    const child = fork(resolve(PKG_DIR, 'lib/resize.js'), [resizeOpts], { execArgv: [] })
     child.on('exit', (code) => {
-      return code ? reject(code) : resolve()
+      return code ? _reject(code) : _resolve()
     })
   })