refactor: split vue-apollo into @vue/apollo-option & @vue/apollo-components

packages/docs/src/guide-components/setup.md

@@ -2,25 +2,27 @@
 
 Make sure you have [installed Apollo Client](../guide/installation.md).
 
-## 1. Install vue-apollo
+## 1. Install @vue/apollo-components
 
 ```
-npm install --save vue-apollo
+npm install --save @vue/apollo-option @vue/apollo-components
 ```
 
 Or:
 
 ```
-yarn add vue-apollo
+yarn add @vue/apollo-option @vue/apollo-components
 ```
 
 ## 2. Install the plugin into Vue
 
 ```js
 import Vue from 'vue'
-import VueApollo from 'vue-apollo'
+import VueApollo from '@vue/apollo-option'
+import VueApolloComponents from '@vue/apollo-components'
 
 Vue.use(VueApollo)
+Vue.use(VueApolloComponents)
 ```
 
 ## 3. Inject the Apollo provider

packages/docs/src/guide-option/setup.md

@@ -2,23 +2,23 @@
 
 Make sure you have [installed Apollo Client](../guide/installation.md).
 
-## 1. Install vue-apollo
+## 1. Install @vue/apollo-option
 
 ```
-npm install --save vue-apollo
+npm install --save @vue/apollo-option
 ```
 
 Or:
 
 ```
-yarn add vue-apollo
+yarn add @vue/apollo-option
 ```
 
 ## 2. Install the plugin into Vue
 
 ```js
 import Vue from 'vue'
-import VueApollo from 'vue-apollo'
+import VueApollo from '@vue/apollo-option'
 
 Vue.use(VueApollo)
 ```

packages/test-e2e/package.json

@@ -15,12 +15,13 @@
     "test:e2e:dev:client": "vue-cli-service test:e2e --mode development"
   },
   "dependencies": {
+    "@vue/apollo-option": "^4.0.0-alpha.1",
+    "@vue/apollo-components": "^4.0.0-alpha.1",
     "core-js": "^3.1.2",
     "graphql-type-json": "^0.3.0",
     "marked": "^0.7.0",
     "shortid": "^2.2.8",
     "vue": "^2.5.16",
-    "vue-apollo": "^3.0.1",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1"
   },

packages/test-e2e/src/vue-apollo.js

@@ -1,10 +1,12 @@
 import Vue from 'vue'
-import VueApollo from 'vue-apollo'
+import VueApollo from '@vue/apollo-option'
+import VueApolloComponents from '@vue/apollo-components'
 import { createApolloClient, restartWebsockets } from 'vue-cli-plugin-apollo/graphql-client'
 import { print } from 'graphql'
 
 // Install the vue plugin
 Vue.use(VueApollo)
+Vue.use(VueApolloComponents)
 
 // Name of the localStorage item
 const AUTH_TOKEN = 'apollo-token'

packages/test-ssr/package.json

@@ -22,6 +22,8 @@
     "test:e2e:dev:client": "vue-cli-service test:e2e --mode development --url http://localhost:8000"
   },
   "dependencies": {
+    "@vue/apollo-option": "^4.0.0-alpha.1",
+    "@vue/apollo-components": "^4.0.0-alpha.1",
     "core-js": "^3.1.2",
     "graphql-type-json": "^0.2.1",
     "isomorphic-fetch": "^2.2.1",
@@ -29,7 +31,6 @@
     "mkdirp": "^0.5.1",
     "shortid": "^2.2.8",
     "vue": "^2.6.10",
-    "vue-apollo": "^3.0.1",
     "vue-router": "^3.0.6",
     "vue-server-renderer": "^2.6.0"
   },

packages/test-ssr/src/vue-apollo.js

@@ -1,9 +1,11 @@
 import Vue from 'vue'
-import VueApollo from 'vue-apollo'
+import VueApollo from '@vue/apollo-option'
+import VueApolloComponents from '@vue/apollo-components'
 import { createApolloClient, restartWebsockets } from 'vue-cli-plugin-apollo/graphql-client'
 
 // Install the vue plugin
 Vue.use(VueApollo)
+Vue.use(VueApolloComponents)
 
 // Name of the localStorage item
 const AUTH_TOKEN = 'apollo-token'

packages/vue-apollo-components/build/rollup.config.browser.js

@@ -0,0 +1,15 @@
+import base from './rollup.config.base'
+import { uglify } from 'rollup-plugin-uglify'
+import { minify } from 'uglify-es'
+
+const config = Object.assign({}, base, {
+  output: {
+    file: 'dist/vue-apollo-components.min.js',
+    format: 'iife',
+    name: 'VueApolloComponents',
+  },
+})
+
+config.plugins.push(uglify({}, minify))
+
+export default config

packages/vue-apollo-components/build/rollup.config.es.js

@@ -0,0 +1,11 @@
+import base from './rollup.config.base'
+
+const config = Object.assign({}, base, {
+  output: {
+    file: 'dist/vue-apollo-components.esm.js',
+    format: 'es',
+    name: 'vue-apollo-components',
+  },
+})
+
+export default config

packages/vue-apollo-components/build/rollup.config.umd.js

@@ -0,0 +1,11 @@
+import base from './rollup.config.base'
+
+const config = Object.assign({}, base, {
+  output: {
+    file: 'dist/vue-apollo-components.umd.js',
+    format: 'umd',
+    name: 'vue-apollo-components',
+  },
+})
+
+export default config

packages/vue-apollo-components/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "@vue/apollo-components",
+  "version": "4.0.0-alpha.1",
+  "description": "Apollo GraphQL components for Vue.js",
+  "main": "dist/vue-apollo.umd.js",
+  "module": "dist/vue-apollo.esm.js",
+  "unpkg": "dist/vue-apollo.min.js",
+  "scripts": {
+    "build": "yarn build:browser && yarn build:es && yarn build:umd",
+    "build:browser": "rollup --config build/rollup.config.browser.js",
+    "build:es": "rollup --config build/rollup.config.es.js",
+    "build:umd": "rollup --config build/rollup.config.umd.js",
+    "prepublishOnly": "yarn test && yarn build",
+    "dev": "nodemon --exec 'yarn build:es && yarn build:umd' --watch src --watch lib",
+    "test": "yarn build && yarn test:eslint",
+    "test:eslint": "eslint --ext .js {src,ssr,lib,build}/**/*.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Akryum/vue-apollo.git"
+  },
+  "keywords": [
+    "vue",
+    "apollo",
+    "graphql",
+    "component"
+  ],
+  "author": "Guillaume Chau <guillaume.b.chau@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Akryum/vue-apollo/issues"
+  },
+  "homepage": "https://github.com/Akryum/vue-apollo#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@vue/apollo-option": "^4.0.0-alpha.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.1.2",
+    "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "@babel/plugin-transform-for-of": "^7.4.4",
+    "@babel/preset-env": "^7.1.0",
+    "@types/graphql": "^14.0.1",
+    "@vue/test-utils": "^1.0.0-beta.25",
+    "apollo-cache-inmemory": "^1.2.9",
+    "apollo-client": "^2.4.1",
+    "apollo-link": "^1.0.3",
+    "apollo-link-http": "^1.2.0",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-eslint": "^10.0.1",
+    "cross-env": "^6.0.0",
+    "eslint": "^6.3.0",
+    "eslint-config-standard": "^12.0.0",
+    "eslint-plugin-import": "^2.8.0",
+    "eslint-plugin-node": "^10.0.0",
+    "eslint-plugin-promise": "^4.0.1",
+    "eslint-plugin-standard": "^4.0.0",
+    "graphql": "^14.0.2",
+    "graphql-tag": "^2.5.0",
+    "jest": "^24.8.0",
+    "nodemon": "^1.18.4",
+    "rimraf": "^3.0.0",
+    "rollup": "^1.21.2",
+    "rollup-plugin-babel": "^4.0.2",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-replace": "^2.0.0",
+    "rollup-plugin-uglify": "^6.0.0",
+    "typescript": "^3.1.3",
+    "uglify-es": "^3.1.6",
+    "vue": "^2.5.16",
+    "vue-property-decorator": "^8.2.2"
+  },
+  "resolutions": {
+    "js-yaml": "^3.13.1"
+  },
+  "jest": {
+    "testRegex": "tests/unit/.*\\.test.js$"
+  }
+}

packages/vue-apollo-components/src/ApolloMutation.js

@@ -1,4 +1,4 @@
-import { addGqlError } from '../../lib/utils'
+import { addGqlError } from '@vue/apollo-option/lib/utils'
 import gql from 'graphql-tag'
 
 export default {

packages/vue-apollo-components/src/index.js

@@ -0,0 +1,43 @@
+import CApolloQuery from './ApolloQuery'
+import CApolloSubscribeToMore from './ApolloSubscribeToMore'
+import CApolloMutation from './ApolloMutation'
+
+const plugin = {}
+
+export function install (Vue, options) {
+  if (install.installed) return
+  install.installed = true
+
+  Vue.component('apollo-query', CApolloQuery)
+  Vue.component('ApolloQuery', CApolloQuery)
+  Vue.component('apollo-subscribe-to-more', CApolloSubscribeToMore)
+  Vue.component('ApolloSubscribeToMore', CApolloSubscribeToMore)
+  Vue.component('apollo-mutation', CApolloMutation)
+  Vue.component('ApolloMutation', CApolloMutation)
+}
+
+plugin.install = install
+
+// eslint-disable-next-line no-undef
+plugin.version = VERSION
+
+// Apollo provider
+export const ApolloProvider = plugin
+
+// Components
+export const ApolloQuery = CApolloQuery
+export const ApolloSubscribeToMore = CApolloSubscribeToMore
+export const ApolloMutation = CApolloMutation
+
+// Auto-install
+let GlobalVue = null
+if (typeof window !== 'undefined') {
+  GlobalVue = window.Vue
+} else if (typeof global !== 'undefined') {
+  GlobalVue = global.Vue
+}
+if (GlobalVue) {
+  GlobalVue.use(plugin)
+}
+
+export default plugin

packages/vue-apollo-option/.eslintignore

@@ -0,0 +1,3 @@
+node_modules/
+dist/
+schema.graphql

packages/vue-apollo-option/.eslintrc.js

@@ -0,0 +1,30 @@
+module.exports = {
+  root: true,
+  parser: 'babel-eslint',
+  parserOptions: {
+    sourceType: 'module'
+  },
+  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
+  extends: 'standard',
+  // required to lint *.vue files
+  /* plugins: [
+    'html'
+  ], */
+  env: {
+    browser: true,
+  },
+  // add your custom rules here
+  'rules': {
+    // allow paren-less arrow functions
+    'arrow-parens': 0,
+    // allow async-await
+    'generator-star-spacing': 0,
+    // allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+    // trailing comma
+    'comma-dangle': ['error', 'always-multiline'],
+    // beware of returning assignement
+    'no-return-assign': 'off',
+    'no-extend-native': 'warn',
+  }
+}

packages/vue-apollo-option/.npmignore

@@ -0,0 +1,5 @@
+src/
+types/test/
+tests/
+.babelrc
+.eslintrc.js

packages/vue-apollo-option/README.md

@@ -0,0 +1,61 @@
+# Apollo and GraphQL for Vue.js
+
+[![npm](https://img.shields.io/npm/v/vue-apollo.svg) ![npm](https://img.shields.io/npm/dm/vue-apollo.svg)](https://www.npmjs.com/package/vue-apollo)
+[![vue1](https://img.shields.io/badge/apollo-2.x-blue.svg)](https://www.apollographql.com/)
+[![vue1](https://img.shields.io/badge/vue-1.x-brightgreen.svg) ![vue2](https://img.shields.io/badge/vue-2.2+-brightgreen.svg)](https://vuejs.org/)
+[![CircleCI branch](https://img.shields.io/circleci/project/github/vuejs/vue-apollo/dev.svg)](https://circleci.com/gh/vuejs/vue-apollo/tree/dev)
+
+<p align="center">
+  <img src="https://cdn-images-1.medium.com/max/800/1*H9AANoofLqjS10Xd5TwRYw.png">
+  <br>
+  <a href="https://www.patreon.com/akryum" target="_blank">
+    <img src="https://c5.patreon.com/external/logo/become_a_patron_button.png" alt="Become a Patreon">
+  </a>
+  <br>
+</p>
+
+<br>
+
+**[Documentation](http://apollo.vuejs.org)**
+
+<br>
+
+[Contributing guide](../../CONTRIBUTING.md)
+
+<br>
+
+## Sponsors
+
+### Gold
+
+<p align="center">
+  <a href="https://www.sumcumo.com/en/" target="_blank">
+    <img src="https://cdn.discordapp.com/attachments/258614093362102272/570728242399674380/logo-sumcumo.png" alt="sum.cumo logo" width="400px">
+  </a>
+</p>
+
+<p align="center">
+  <a href="https://www.vuemastery.com/" target="_blank">
+    <img src="https://cdn.discordapp.com/attachments/258614093362102272/557267759130607630/Vue-Mastery-Big.png" alt="Vue Mastery logo" width="200px">
+  </a>
+</p>
+
+### Silver
+
+<p align="center">
+  <a href="https://vueschool.io/" target="_blank">
+    <img src="https://vueschool.io/img/logo/vueschool_logo_multicolor.svg" alt="VueSchool logo" width="200px">
+  </a>
+</p>
+
+### Bronze
+
+<p align="center">
+  <a href="https://vuetifyjs.com" target="_blank">
+    <img src="https://cdn.discordapp.com/attachments/537832759985700914/537832771691872267/Horizontal_Logo_-_Dark.png" width="100">
+  </a>
+
+  <a href="https://www.frontenddeveloperlove.com/" target="_blank" title="Frontend Developer Love">
+    <img src="https://cdn.discordapp.com/attachments/258614093362102272/557267744249085953/frontend_love-logo.png" width="56">
+  </a>
+</p>

packages/vue-apollo-option/babel.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  'presets': [
+    [require('@babel/preset-env'), { 'modules': false }],
+  ],
+  'plugins': [
+    require('@babel/plugin-proposal-class-properties'),
+    [require('@babel/plugin-transform-for-of'), { assumeArray: true }],
+  ],
+}

packages/vue-apollo-option/build/rollup.config.base.js

@@ -0,0 +1,27 @@
+import babel from 'rollup-plugin-babel'
+import cjs from 'rollup-plugin-commonjs'
+import replace from 'rollup-plugin-replace'
+import resolve from 'rollup-plugin-node-resolve'
+
+const config = require('../package.json')
+
+export default {
+  input: 'src/index.js',
+  plugins: [
+    resolve({
+      jsnext: true,
+      main: true,
+      browser: true,
+    }),
+    cjs({
+      exclude: 'src/**',
+    }),
+    babel({
+      exclude: 'node_modules/**',
+    }),
+    replace({
+      VERSION: JSON.stringify(config.version),
+    }),
+  ],
+  external: ['apollo-client', 'apollo-link', 'graphql-tag'],
+}

packages/vue-apollo-option/build/rollup.config.browser.js

@@ -4,7 +4,7 @@ import { minify } from 'uglify-es'
 
 const config = Object.assign({}, base, {
   output: {
-    file: 'dist/vue-apollo.min.js',
+    file: 'dist/vue-apollo-option.min.js',
     format: 'iife',
     name: 'VueApollo',
   },

packages/vue-apollo-option/build/rollup.config.es.js

@@ -2,7 +2,7 @@ import base from './rollup.config.base'
 
 const config = Object.assign({}, base, {
   output: {
-    file: 'dist/vue-apollo.esm.js',
+    file: 'dist/vue-apollo-option.esm.js',
     format: 'es',
     name: 'vue-apollo',
   },

packages/vue-apollo-option/build/rollup.config.umd.js

@@ -2,7 +2,7 @@ import base from './rollup.config.base'
 
 const config = Object.assign({}, base, {
   output: {
-    file: 'dist/vue-apollo.umd.js',
+    file: 'dist/vue-apollo-option.umd.js',
     format: 'umd',
     name: 'vue-apollo',
   },

packages/vue-apollo-option/package.json

@@ -1,10 +1,10 @@
 {
-  "name": "vue-apollo",
-  "version": "3.0.1",
-  "description": "Use Apollo and GraphQL with Vue.js",
-  "main": "dist/vue-apollo.umd.js",
-  "module": "dist/vue-apollo.esm.js",
-  "unpkg": "dist/vue-apollo.min.js",
+  "name": "@vue/apollo-option",
+  "version": "4.0.0-alpha.1",
+  "description": "Use Apollo and GraphQL with Vue.js using the `apollo` option",
+  "main": "dist/vue-apollo-option.umd.js",
+  "module": "dist/vue-apollo-option.esm.js",
+  "unpkg": "dist/vue-apollo-option.min.js",
   "typings": "types/index.d.ts",
   "scripts": {
     "build": "yarn build:browser && yarn build:es && yarn build:umd",
@@ -25,7 +25,9 @@
   "keywords": [
     "vue",
     "apollo",
-    "graphql"
+    "graphql",
+    "option",
+    "classic"
   ],
   "author": "Guillaume Chau <guillaume.b.chau@gmail.com>",
   "license": "MIT",

packages/vue-apollo-option/src/index.js

@@ -1,10 +1,6 @@
 import { DollarApollo } from './dollar-apollo'
 import { ApolloProvider as plugin } from './apollo-provider'
 
-import CApolloQuery from './components/ApolloQuery'
-import CApolloSubscribeToMore from './components/ApolloSubscribeToMore'
-import CApolloMutation from './components/ApolloMutation'
-
 import { installMixin } from './mixin'
 import { Globals, omit } from '../lib/utils'
 
@@ -48,15 +44,6 @@ export function install (Vue, options) {
   })
 
   installMixin(Vue, vueVersion)
-
-  if (vueVersion === '2') {
-    Vue.component('apollo-query', CApolloQuery)
-    Vue.component('ApolloQuery', CApolloQuery)
-    Vue.component('apollo-subscribe-to-more', CApolloSubscribeToMore)
-    Vue.component('ApolloSubscribeToMore', CApolloSubscribeToMore)
-    Vue.component('apollo-mutation', CApolloMutation)
-    Vue.component('ApolloMutation', CApolloMutation)
-  }
 }
 
 plugin.install = install
@@ -67,11 +54,6 @@ plugin.version = VERSION
 // Apollo provider
 export const ApolloProvider = plugin
 
-// Components
-export const ApolloQuery = CApolloQuery
-export const ApolloSubscribeToMore = CApolloSubscribeToMore
-export const ApolloMutation = CApolloMutation
-
 // Auto-install
 let GlobalVue = null
 if (typeof window !== 'undefined') {