feat(ui): Project creation working!

Author: Guillaume Chau

packages/@vue/cli-shared-utils/index.js

@@ -4,7 +4,8 @@
   'spinner',
   'validate',
   'openBrowser',
-  'pluginResolution'
+  'pluginResolution',
+  'exit'
 ].forEach(m => {
   Object.assign(exports, require(`./lib/${m}`))
 })

packages/@vue/cli-shared-utils/lib/exit.js

@@ -0,0 +1,9 @@
+exports.exitProcess = true
+
+exports.exit = function (code) {
+  if (exports.exitProcess) {
+    process.exit(code)
+  } else if (code > 0) {
+    throw new Error(`Process exited with code ${code}`)
+  }
+}

packages/@vue/cli-shared-utils/lib/validate.js

@@ -1,4 +1,5 @@
 const joi = require('joi')
+const { exit } = require('./exit')
 
 // proxy to joi for option validation
 exports.createSchema = fn => fn(joi)
@@ -10,7 +11,7 @@ exports.validate = (obj, schema, cb) => {
       if (process.env.VUE_CLI_TEST) {
         throw err
       } else {
-        process.exit(1)
+        exit(1)
       }
     }
   })

packages/@vue/cli-ui/README.md

@@ -0,0 +1,13 @@
+# @vue/cli-ui
+
+Start development version:
+
+```
+yarn run serve
+```
+
+In another terminal:
+
+```
+yarn run graphql-api
+```

packages/@vue/cli-ui/package.json

@@ -8,28 +8,29 @@
     "graphql-api": "vue-cli-service graphql-api",
     "run-graphql-api": "vue-cli-service run-graphql-api"
   },
+  "dependencies": {
+    "graphql": "^0.13.0",
+    "lowdb": "^1.0.0",
+    "mkdirp": "^0.5.1",
+    "rimraf": "^2.6.2",
+    "shortid": "^2.2.8"
+  },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.0.0-beta.3",
     "@vue/cli-plugin-eslint": "^3.0.0-beta.3",
     "@vue/cli-service": "^3.0.0-beta.3",
     "@vue/eslint-config-standard": "^3.0.0-beta.3",
-    "@vue/ui": "^0.1.6",
-    "apollo-cache-inmemory": "^1.0.0",
-    "apollo-client": "^2.0.1",
-    "apollo-link": "^1.0.0",
-    "apollo-link-context": "^1.0.5",
-    "apollo-link-http": "^1.0.0",
-    "apollo-link-persisted-queries": "^0.1.0",
+    "@vue/ui": "^0.1.9",
+    "apollo-cache-inmemory": "^1.1.10",
+    "apollo-client": "^2.2.6",
+    "apollo-link": "^1.2.1",
+    "apollo-link-http": "^1.5.3",
     "apollo-link-state": "^0.4.0",
     "apollo-link-ws": "^1.0.0",
-    "apollo-upload-client": "^7.0.0-alpha.4",
-    "apollo-utilities": "^1.0.1",
-    "graphql": "^0.13.0",
+    "apollo-utilities": "^1.0.9",
+    "eslint": "^4.16.0",
     "graphql-tag": "^2.5.0",
     "lint-staged": "^6.0.0",
-    "lowdb": "^1.0.0",
-    "mkdirp": "^0.5.1",
-    "shortid": "^2.2.8",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.1",
     "subscriptions-transport-ws": "^0.9.5",
@@ -62,8 +63,5 @@
       "vue-cli-service lint",
       "git add"
     ]
-  },
-  "dependencies": {
-    "eslint": "^4.16.0"
   }
 }

packages/@vue/cli-ui/src/App.vue

@@ -4,7 +4,9 @@
       <router-view/>
     </div>
 
-    <StatusBar/>
+    <StatusBar
+      @project="$router.push({ name: 'project-select' })"
+    />
   </div>
 </template>
 

packages/@vue/cli-ui/src/apollo.js

@@ -1,46 +1,16 @@
 import { ApolloClient } from 'apollo-client'
 import { split, ApolloLink } from 'apollo-link'
 import { HttpLink } from 'apollo-link-http'
-import { createUploadLink } from 'apollo-upload-client'
 import { InMemoryCache } from 'apollo-cache-inmemory'
-import { SubscriptionClient, MessageTypes } from 'subscriptions-transport-ws'
+import { SubscriptionClient } from 'subscriptions-transport-ws'
 import { WebSocketLink } from 'apollo-link-ws'
 import { getMainDefinition } from 'apollo-utilities'
-import { createPersistedQueryLink } from 'apollo-link-persisted-queries'
-import { setContext } from 'apollo-link-context'
 import { withClientState } from 'apollo-link-state'
 import defaults from './state/defaults'
 import resolvers from './state/resolvers'
 
-function getAuth () {
-  // get the authentication token from local storage if it exists
-  const token = localStorage.getItem('apollo-token')
-  // return the headers to the context so httpLink can read them
-  return token ? `Bearer ${token}` : ''
-}
-
-function restartWebsockets (wsClient) {
-  // Copy current operations
-  const operations = Object.assign({}, wsClient.operations)
-
-  // Close connection
-  wsClient.close(true)
-
-  // Open a new one
-  wsClient.connect()
-
-  // Push all current operations to the new connection
-  Object.keys(operations).forEach(id => {
-    wsClient.sendMessage(
-      id,
-      MessageTypes.GQL_START,
-      operations[id].options
-    )
-  })
-}
-
 // Create the apollo client
-export default function createApolloClient ({ ssr, base, endpoints, persisting }) {
+export default function createApolloClient ({ base, endpoints, persisting }) {
   let link
   let wsClient
 
@@ -49,102 +19,36 @@ export default function createApolloClient ({ ssr, base, endpoints, persisting }
     uri: base + endpoints.graphql
   })
 
-  // HTTP Auth header injection
-  const authLink = setContext((_, { headers }) => ({
-    headers: {
-      ...headers,
-      authorization: getAuth()
-    }
-  }))
-
-  // Concat all the http link parts
-  httpLink = authLink.concat(httpLink)
-  if (persisting) {
-    httpLink = createPersistedQueryLink().concat(httpLink)
-  }
-
   // Apollo cache
   const cache = new InMemoryCache()
 
   // Client-side state
   const stateLink = withClientState({ defaults, cache, resolvers })
 
-  if (!ssr) {
-    // If on the client, recover the injected state
-    if (typeof window !== 'undefined') {
-      // eslint-disable-next-line no-underscore-dangle
-      const state = window.__APOLLO_STATE__
-      if (state) {
-        // If you have multiple clients, use `state.<client_id>`
-        cache.restore(state.defaultClient)
-      }
-    }
-
-    // Web socket
-    wsClient = new SubscriptionClient(base.replace(/^https?/i, 'ws' + (process.env.NODE_ENV === 'production' ? 's' : '')) +
-    endpoints.subscription, {
-      reconnect: true,
-      connectionParams: () => ({
-        'Authorization': getAuth()
-      })
-    })
-
-    // Create the subscription websocket link
-    const wsLink = new WebSocketLink(wsClient)
-
-    // File upload
-    const uploadLink = authLink.concat(createUploadLink({
-      uri: base + endpoints.graphql
-    }))
+  // Web socket
+  wsClient = new SubscriptionClient(base.replace(/^https?/i, 'ws' + (process.env.NODE_ENV === 'production' ? 's' : '')) +
+  endpoints.subscription, {
+    reconnect: true
+  })
 
-    // using the ability to split links, you can send data to each link
-    // depending on what kind of operation is being sent
-    httpLink = split(
-      operation => operation.getContext().upload,
-      uploadLink,
-      httpLink
-    )
+  // Create the subscription websocket link
+  const wsLink = new WebSocketLink(wsClient)
 
-    link = split(
-      // split based on operation type
-      ({ query }) => {
-        const { kind, operation } = getMainDefinition(query)
-        return kind === 'OperationDefinition' &&
-          operation === 'subscription'
-      },
-      wsLink,
-      httpLink
-    )
-  } else {
-    // On the server, we don't want WebSockets
-    link = httpLink
-  }
+  link = split(
+    // split based on operation type
+    ({ query }) => {
+      const { kind, operation } = getMainDefinition(query)
+      return kind === 'OperationDefinition' &&
+        operation === 'subscription'
+    },
+    wsLink,
+    httpLink
+  )
 
   const apolloClient = new ApolloClient({
     link: ApolloLink.from([stateLink, link]),
-    cache,
-    // Additional options
-    ...(ssr ? {
-      // Set this on the server to optimize queries when SSR
-      ssrMode: true
-    } : {
-      // This will temporary disable query force-fetching
-      ssrForceFetchDelay: 100,
-      // Apollo devtools
-      connectToDevTools: process.env.NODE_ENV !== 'production'
-    })
+    cache
   })
 
-  apolloClient.$onLogin = token => {
-    localStorage.setItem('apollo-token', token)
-    if (wsClient) restartWebsockets(wsClient)
-  }
-
-  apolloClient.$onLogout = () => {
-    localStorage.removeItem('apollo-token')
-    if (wsClient) restartWebsockets(wsClient)
-    apolloClient.resetStore()
-  }
-
   return apolloClient
 }