feat: add module for guess

clarkdo · clarkdo · commit 590b10480f1e · 2018-10-30T14:09:38.000Z
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -0,0 +1,34 @@
+version: 2
+jobs:
+  build:
+    working_directory: /usr/src/app
+    docker:
+      - image: banian/node
+    steps:
+      # Checkout repository
+      - checkout
+
+      # Restore cache
+      - restore_cache:
+          key: yarn-{{ checksum "yarn.lock" }}
+
+      # Install dependencies
+      - run:
+          name: Install Dependencies
+          command: NODE_ENV=dev yarn
+
+      # Keep cache
+      - save_cache:
+          key: yarn-{{ checksum "yarn.lock" }}
+          paths:
+            - "node_modules"
+
+      # Test
+      - run:
+          name: Tests
+          command: yarn test
+
+      # Coverage
+      - run:
+          name: Coverage
+          command: yarn codecov
diff --git a/.eslintrc.yml b/.eslintrc.yml
@@ -0,0 +1,20 @@
+root: true
+parserOptions:
+  parser: babel-eslint
+env:
+  browser: true
+  node: true
+  jest: true
+extends:
+- standard
+- plugin:vue/recommended
+plugins:
+- jest
+- vue
+rules:
+  arrow-parens: 0
+  generator-star-spacing: 0
+  no-console: 2
+globals:
+  jest/globals: true
+  jasmine: true
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,9 @@
+node_modules
+*.iml
+.idea
+*.log*
+.nuxt
+.vscode
+.DS_Store
+coverage
+dist
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Clark Du <clark.duxin@gmail.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,71 @@
+# guess-module
+
+[![David-DM][david-dm-src]][david-dm-href]
+[![Standard JS][standard-js-src]][standard-js-href]
+[![Circle CI][circle-ci-src]][circle-ci-href]
+[![Codecov][codecov-src]][codecov-href]
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+
+> Guess.js module for Nuxt.js
+
+[📖 **Release Notes**](./CHANGELOG.md)
+
+TODO:
+
+* Vue.js support in guess-parser [Tracked Issue](https://github.com/guess-js/guess/issues/43)
+
+## Setup
+
+- Add `guess-module` dependency using yarn or npm to your project
+- Add `guess-module` to `modules` section of `nuxt.config.js`
+- Config 'options' as `options` of [guess-webpack][guess-webpack-href]
+- Note: the default `reportProvider` when there is no `GA` and `reportProvider` specifed is the content of `router.json` under [`rootDir`][nuxt-rootDir-href] or [`srcDir`][nuxt-srcDir-href]
+
+```js
+{
+  modules: [
+    // Simple usage
+    'guess-module',
+
+    // With options
+    ['guess-module', {
+      GA: 'XXXXXX'
+    }],
+ ]
+}
+```
+
+## Development
+
+- Clone this repository
+- Install dependencies using `yarn install` or `npm install`
+- Start development server using `npm run dev`
+
+## Credits
+
+This module is inspired by [guest-nuxt][circle-ci-href] by @daliborgogic.
+
+## License
+
+[MIT License](./LICENSE)
+
+Copyright (c) Clark Du <clark.duxin@gmail.com>
+
+<!-- Badges -->
+[david-dm-src]: https://david-dm.org/https://github.com/nuxt-community/guess-module/status.svg?style=flat-square
+[david-dm-href]: https://david-dm.org/https://github.com/nuxt-community/guess-module
+[standard-js-src]: https://img.shields.io/badge/code_style-standard-brightgreen.svg?style=flat-square
+[standard-js-href]: https://standardjs.com
+[circle-ci-src]: https://img.shields.io/circleci/project/github/https://github.com/nuxt-community/guess-module.svg?style=flat-square
+[circle-ci-href]: https://circleci.com/gh/https://github.com/nuxt-community/guess-module
+[codecov-src]: https://img.shields.io/codecov/c/github/https://github.com/nuxt-community/guess-module.svg?style=flat-square
+[codecov-href]: https://codecov.io/gh/https://github.com/nuxt-community/guess-module
+[npm-version-src]: https://img.shields.io/npm/dt/guess-module.svg?style=flat-square
+[npm-version-href]: https://npmjs.com/package/guess-module
+[npm-downloads-src]: https://img.shields.io/npm/v/guess-module/latest.svg?style=flat-square
+[npm-downloads-href]: https://npmjs.com/package/guess-module
+[guess-nuxt-href]: https://github.com/daliborgogic/guess-nuxt
+[guess-webpack-href]: https://github.com/guess-js/guess/tree/master/packages/guess-webpack/#basic-usage
+[nuxt-rootDir-href]: https://nuxtjs.org/api/configuration-rootdir
+[nuxt-srcDir-href]: https://nuxtjs.org/api/configuration-srcdir
diff --git a/example/nuxt.config.js b/example/nuxt.config.js
@@ -0,0 +1,10 @@
+const { resolve } = require('path')
+
+module.exports = {
+  rootDir: resolve(__dirname, '..'),
+  buildDIr: resolve(__dirname, '.nuxt'),
+  srcDir: __dirname,
+  modules: [
+    '@@'
+  ]
+}
diff --git a/example/pages/about.vue b/example/pages/about.vue
@@ -0,0 +1,7 @@
+<template>
+  <div>
+    <h1>🚀This is about page</h1>
+    <h2><nuxt-link to="/">Home page</nuxt-link></h2>
+    <h2><nuxt-link to="/help">Help page</nuxt-link></h2>
+  </div>
+</template>
diff --git a/example/pages/help.vue b/example/pages/help.vue
@@ -0,0 +1,7 @@
+<template>
+  <div>
+    <h1>💡This is help page</h1>
+    <h2><nuxt-link to="/">Home page</nuxt-link></h2>
+    <h2><nuxt-link to="/about">About page</nuxt-link></h2>
+  </div>
+</template>
diff --git a/example/pages/index.vue b/example/pages/index.vue
@@ -0,0 +1,7 @@
+<template>
+  <div>
+    <h1>🏠This is home page</h1>
+    <h2><nuxt-link to="/help">Help page</nuxt-link></h2>
+    <h2><nuxt-link to="/about">About page</nuxt-link></h2>
+  </div>
+</template>
diff --git a/example/routes.json b/example/routes.json
@@ -0,0 +1,14 @@
+{
+  "/": {
+    "/help": 80,
+    "/about": 20
+  },
+  "/help": {
+    "/": 20,
+    "/about": 80
+  },
+  "/about": {
+    "/": 80,
+    "/help": 20
+  }
+}
diff --git a/lib/module.js b/lib/module.js
@@ -0,0 +1,59 @@
+const { GuessPlugin } = require('guess-webpack')
+const { resolve } = require('path')
+
+function guessModule (moduleOptions) {
+  this.extendBuild((config, { isClient, isServer }) => {
+    if (isClient) {
+      const guessOptions = Object.assign({
+        // Hints Guess to not perform pre-fetching and delegate this logic to its consumer.
+        runtime: {
+          delegate: true,
+          prefetchConfig: {
+            '4g': 0.3,
+            '3g': 0.3,
+            '2g': 0.3,
+            'slow-2g': 0.3
+          }
+        },
+        // Guess does not have to collect the routes and the corresponding bundle entry points.
+        routeProvider: false
+      }, moduleOptions)
+
+      if (!guessOptions.reportProvider) {
+        const { GA } = process.env
+        if (GA) {
+          guessOptions.GA = GA
+        } else {
+          const { rootDir, srcDir } = this.options
+          guessOptions.reportProvider = defaultReportProvider({ rootDir, srcDir })
+        }
+      }
+
+      config.plugins.push(
+        new GuessPlugin(guessOptions)
+      )
+    }
+  })
+
+  this.addPlugin({
+    src: resolve(__dirname, 'plugin.js'),
+    fileName: 'guess.js',
+    ssr: false
+  })
+}
+
+function defaultReportProvider ({ rootDir, srcDir }) {
+  const { readFileSync, existsSync } = require('fs')
+  let reportProvider
+  [srcDir, rootDir].some((dir) => {
+    const routesPath = resolve(dir, 'routes.json')
+    if (existsSync(routesPath)) {
+      reportProvider = () => Promise.resolve(JSON.parse(readFileSync(routesPath)))
+      return true
+    }
+  })
+  return reportProvider
+}
+
+module.exports = guessModule
+module.exports.meta = require('../package.json')
diff --git a/lib/plugin.js b/lib/plugin.js
@@ -0,0 +1,18 @@
+import Vue from 'vue'
+import { guess } from 'guess-webpack/api'
+
+export default ({ app: { router } }) =>  {
+  router.afterEach(to => {
+    // Wait for page to be displayed
+    Vue.nextTick(() => {
+      const predictions = Object.keys(guess()).sort((a, b) => a.probability - b.probability)
+      predictions.forEach(path => {
+        router.getMatchedComponents(path).forEach(Component => {
+          if (typeof Component === 'function') {
+            try { Component() } catch (e) {}
+          }
+        })
+      })
+    })
+  })
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,51 @@
+{
+  "name": "guess-module",
+  "version": "0.0.0",
+  "description": "Guess.js module for Nuxt.js",
+  "license": "MIT",
+  "contributors": [
+    {
+      "name": "Clark Du <clark.duxin@gmail.com>"
+    }
+  ],
+  "main": "lib/module.js",
+  "repository": "https://github.com/https://github.com/nuxt-community/guess-module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "nuxt example",
+    "lint": "eslint lib test",
+    "test": "npm run lint && jest",
+    "release": "standard-version && git push --follow-tags && npm publish"
+  },
+  "eslintIgnore": [
+    "lib/plugin.js"
+  ],
+  "files": [
+    "lib"
+  ],
+  "jest": {
+    "testEnvironment": "node",
+    "collectCoverage": true
+  },
+  "dependencies": {
+    "guess-webpack": "^0.1.6"
+  },
+  "devDependencies": {
+    "babel-eslint": "latest",
+    "codecov": "latest",
+    "eslint": "latest",
+    "eslint-config-standard": "latest",
+    "eslint-plugin-import": "latest",
+    "eslint-plugin-jest": "latest",
+    "eslint-plugin-node": "latest",
+    "eslint-plugin-promise": "latest",
+    "eslint-plugin-standard": "latest",
+    "eslint-plugin-vue": "latest",
+    "jest": "latest",
+    "jsdom": "latest",
+    "nuxt-edge": "latest",
+    "standard-version": "latest"
+  }
+}
diff --git a/test/module.test.js b/test/module.test.js
@@ -0,0 +1,27 @@
+const { Nuxt, Builder } = require('nuxt-edge')
+const request = require('request-promise-native')
+
+const config = require('../example/nuxt.config')
+
+const url = path => `http://localhost:3000${path}`
+const get = path => request(url(path))
+
+describe('basic', () => {
+  let nuxt
+
+  beforeAll(async () => {
+    config.dev = false
+    nuxt = new Nuxt(config)
+    await new Builder(nuxt).build()
+    await nuxt.listen(3000)
+  }, 60000)
+
+  afterAll(async () => {
+    await nuxt.close()
+  })
+
+  test('render', async () => {
+    let html = await get('/')
+    expect(html).toContain('🏠This is home page')
+  })
+})
diff --git a/yarn.lock b/yarn.lock
