feat: add types (#323)

Co-Authored-By: pooya parsa <pyapar@gmail.com>

 #   feat(types): add boolean options for pwa options interface

 #   feat(types): add typescript declaration

 #   chore: add types field and include types dir on publish

 #   chore: add nuxt types and workbox sw types

package.json

@@ -6,8 +6,10 @@
   "license": "MIT",
   "main": "lib/module.js",
   "files": [
-    "lib"
+    "lib",
+    "types"
   ],
+  "types": "./types/index.d.ts",
   "scripts": {
     "dev": "nuxt test/fixture",
     "lint": "eslint --ext .js,.vue .",
@@ -23,8 +25,10 @@
     "workbox-cdn": "^5.1.3"
   },
   "devDependencies": {
+    "@nuxt/types": "^2.14.1",
     "@nuxtjs/eslint-config": "latest",
     "@nuxtjs/module-test-utils": "latest",
+    "@types/workbox-sw": "^4.3.1",
     "axios": "latest",
     "babel-eslint": "latest",
     "codecov": "latest",

types/icon.d.ts

@@ -0,0 +1,66 @@
+
+export type iOSType = 'ipad' | 'ipadpro9' | 'ipadpro9' | 'ipadpro10' | 'ipadpro12' | 'iphonese' | 'iphone6' | 'iphoneplus' | 'iphonex' | 'iphonexr' | 'iphonexsmax'
+export type iOSSize = [number, number, iOSType]
+
+export interface IconOptions {
+  /**
+   * Default: `[srcDir]/[staticDir]/icon.png`
+   */
+  source: string,
+  /**
+   * Default: `icon.png`
+   */
+  fileName: string,
+  /**
+   * Array of sizes to be generated (Square).
+   * Default: `[64, 120, 144, 152, 192, 384, 512]`
+   */
+  sizes: number[],
+
+  /**
+   * Default:
+   * ```javascript
+   * [
+   *   [1536, 2048, 'ipad'], // Ipad
+   *   [1536, 2048, 'ipadpro9'], // Ipad Pro 9.7"
+   *   [1668, 2224, 'ipadpro10'], // Ipad Pro 10.5"
+   *   [2048, 2732, 'ipadpro12'], // Ipad Pro 12.9"
+   *   [640, 1136, 'iphonese'], // Iphone SE
+   *   [50, 1334, 'iphone6'], // Iphone 6
+   *   [1080, 1920, 'iphoneplus'], // Iphone Plus
+   *   [1125, 2436, 'iphonex'], // Iphone X
+   *   [828, 1792, 'iphonexr'], // Iphone XR
+   *   [1242, 2688, 'iphonexsmax'] // Iphone XS Max
+   * ]
+   * ```
+   */
+  iosSizes: iOSSize[],
+  /**
+   * Default: `icons`
+   */
+  targetDir: string,
+  /**
+   * Make icons accessible through `ctx` or Vue instances.
+   *
+   * Default: `true`
+   */
+  plugin: boolean,
+  /**
+   * Name of property for accessible icons.
+   *
+   * Default: `$icon`
+   */
+  pluginName: string,
+  /**
+   * Array or string of icon purpose.
+   *
+   * Default: `['any', 'maskable']`
+   */
+  purpose: string[] | string,
+  /**
+   * Cache dir for generated icons
+   *
+   * Default: `{rootDir}/node_modules/.cache/icon`
+   */
+  cacheDir: string
+}

types/index.d.ts

@@ -0,0 +1,21 @@
+
+import { IconOptions } from './icon'
+import { MetaOptions } from './meta'
+import { ManifestOptions } from './manifest'
+import { WorkboxOptions } from './workbox'
+
+
+declare module '@nuxt/types/config/index' {
+  interface NuxtOptions {
+    pwa: {
+      icon: IconOptions | boolean,
+      meta: MetaOptions | boolean,
+      manifest: ManifestOptions | boolean,
+      workbox: WorkboxOptions | boolean
+    }
+    icon: IconOptions | boolean
+    meta: MetaOptions | boolean
+    manifest: ManifestOptions | boolean
+    workbox: WorkboxOptions | boolean
+  }
+}

types/manifest.d.ts

@@ -0,0 +1,50 @@
+export interface ManifestOptions {
+  /**
+   * Default: _npm_package_name_
+   */
+  name: string,
+  /**
+   * Default: _npm_package_name_
+   */
+  short_name: string,
+  /**
+   * Default: _npm_package_description_
+   */
+  description: string,
+  /**
+   *
+   */
+  icons: Record<string, any>[],
+  /**
+   * Default: `routerBase + '?standalone=true'`
+   */
+  start_url: string,
+  /**
+   * Default: `standalone`
+   */
+  display: string,
+  /**
+   * Default: `#ffffff`
+   */
+  background_color: string,
+  /**
+   * Default: `this.options.loading.color`
+   */
+  theme_color: string,
+  /**
+   * Default: `ltr`
+   */
+  dir: 'ltr' | 'rtl',
+  /**
+   * Default: `en`
+   */
+  lang: string,
+  /**
+   * Default: `false`
+   */
+  useWebmanifestExtension: boolean,
+  /**
+   * Default: A combination of `routerBase` and `options.build.publicPath`
+   */
+  publicPath: string
+}

types/meta.d.ts

@@ -0,0 +1,135 @@
+export type OgImageObject = {
+  path: string,
+  width: number,
+  height: number,
+  type: string
+}
+
+export interface MetaOptions {
+  /**
+   * Default: `utf-8`
+   */
+  charset: string,
+  /**
+   * Default: `width=device-width, initial-scale=1`
+   *
+   * Meta: `viewport`
+   */
+  viewport: string,
+  /**
+   * Default: `true`
+   *
+   * Meta: `mobile-web-app-capable`
+   */
+  mobileApp: boolean,
+  /**
+   * Default: `false`
+   *
+   * Meta: `apple-mobile-web-app-capable`
+   */
+  mobileAppIOS: boolean,
+  /**
+   * Default: `default`
+   */
+  appleStatusBarStyle: string,
+  /**
+   * Default: `true` (to use options.icons)
+   *
+   * Meta: `shortcut icon` + `apple-touch-icon`
+   */
+  favicon: boolean,
+  /**
+   * Default: _npm_package_name_
+   *
+   * Meta: `title`
+   */
+  name: string,
+  /**
+   * Default: _npm_package_author_name_
+   *
+   * Meta: `author`
+   */
+  author: string,
+  /**
+   * Default: _npm_package_description_
+   *
+   * Meta: `description`
+   */
+  description: string,
+  /**
+   * Default: `options.loading.color`
+   *
+   * Meta: `description`
+   */
+  theme_color: string,
+  /**
+   * Default: `en`
+   *
+   * Meta: `lang`
+   */
+  lang: string,
+  /**
+   * Default: `website`
+   *
+   * Meta: `og:type`
+   */
+  ogType: string,
+  /**
+   * Default: _npm_package_name_
+   *
+   * Meta: `og:site_name`
+   */
+  ogSiteName: string,
+  /**
+   * Default: _npm_package_name_
+   *
+   * Meta: `og:title`
+   */
+  ogTitle: string,
+  /**
+   * Default: _npm_package_description_
+   *
+   * Meta: `og:description`
+   */
+  ogDescription: string,
+  /**
+   * Default: `undefined`
+   *
+   * Meta: `N/A`
+   */
+  ogHost: string | undefined,
+  /**
+   * Default: `true`
+   *
+   * Meta: `og:image` and sub-tags
+   */
+  ogImage: boolean | string | OgImageObject,
+  /**
+   * Default: ogHost (if defined)
+   *
+   * Meta: `og:url`
+   */
+  ogUrl: string | undefined,
+  /**
+   * Default: `undefined`
+   *
+   * Meta: `twitter:card`
+   */
+  twitterCard: string | undefined,
+  /**
+   * Default: `undefined`
+   *
+   * Meta: `twitter:site`
+   */
+  twitterSite: string | undefined,
+  /**
+   * Default: `undefined`
+   *
+   * Meta: `twitter:creator`
+   */
+  twitterCreator: string | undefined,
+  /**
+   * Default: `false`
+   */
+  nativeUI: boolean
+}