feat(api): save sahred data to disk

Author: Guillaume Chau

packages/@vue/cli-ui/apollo-server/api/PluginApi.js

@@ -22,6 +22,13 @@ const { validateSuggestion } = require('./suggestion')
 const { validateProgress } = require('./progress')
 const { validateWidget } = require('./widget')
 
+/**
+ * @typedef SetSharedDataOptions
+ * @prop {boolean} disk Don't keep this data in memory by writing it to disk
+ */
+
+/** @typedef {import('../connectors/shared-data').SharedData} SharedData */
+
 class PluginApi {
   constructor ({ plugins, file, project, lightMode = false }, context) {
     // Context
@@ -453,10 +460,10 @@ class PluginApi {
   /* Namespaced */
 
   /**
-   * Retrieve a Shared data value.
+   * Retrieve a Shared data instance.
    *
    * @param {string} id Id of the Shared data
-   * @returns {any} Shared data value
+   * @returns {SharedData} Shared data instance
    */
   getSharedData (id) {
     return sharedData.get({ id, projectId: this.project.id }, this.context)
@@ -467,18 +474,19 @@ class PluginApi {
    *
    * @param {string} id Id of the Shared data
    * @param {any} value Value of the Shared data
+   * @param {SetSharedDataOptions} options
    */
-  setSharedData (id, value) {
-    sharedData.set({ id, projectId: this.project.id, value }, this.context)
+  async setSharedData (id, value, { disk = false } = {}) {
+    return sharedData.set({ id, projectId: this.project.id, value, disk }, this.context)
   }
 
   /**
    * Delete a shared data.
    *
    * @param {string} id Id of the Shared data
    */
-  removeSharedData (id) {
-    sharedData.remove({ id, projectId: this.project.id }, this.context)
+  async removeSharedData (id) {
+    return sharedData.remove({ id, projectId: this.project.id }, this.context)
   }
 
   /**
@@ -616,24 +624,93 @@ class PluginApi {
    *   - callAction
    *
    * @param {string} namespace Prefix to add to the id params
-   * @returns {object} Namespaced methods
    */
   namespace (namespace) {
     return {
+      /**
+       * Retrieve a Shared data instance.
+       *
+       * @param {string} id Id of the Shared data
+       * @returns {SharedData} Shared data instance
+       */
       getSharedData: (id) => this.getSharedData(namespace + id),
-      setSharedData: (id, value) => this.setSharedData(namespace + id, value),
+      /**
+       * Set or update the value of a Shared data
+       *
+       * @param {string} id Id of the Shared data
+       * @param {any} value Value of the Shared data
+       * @param {SetSharedDataOptions} options
+       */
+      setSharedData: (id, value, options) => this.setSharedData(namespace + id, value, options),
+      /**
+       * Delete a shared data.
+       *
+       * @param {string} id Id of the Shared data
+       */
       removeSharedData: (id) => this.removeSharedData(namespace + id),
+      /**
+       * Watch for a value change of a shared data
+       *
+       * @param {string} id Id of the Shared data
+       * @param {function} handler Callback
+       */
       watchSharedData: (id, handler) => this.watchSharedData(namespace + id, handler),
+      /**
+       * Delete the watcher of a shared data.
+       *
+       * @param {string} id Id of the Shared data
+       * @param {function} handler Callback
+       */
       unwatchSharedData: (id, handler) => this.unwatchSharedData(namespace + id, handler),
+      /**
+       * Listener triggered when a Plugin action is called from a client addon component.
+       *
+       * @param {string} id Id of the action to listen
+       * @param {any} cb Callback (ex: (params) => {} )
+       */
       onAction: (id, cb) => this.onAction(namespace + id, cb),
+      /**
+       * Call a Plugin action. This can also listened by client addon components.
+       *
+       * @param {string} id Id of the action
+       * @param {object} params Params object passed as 1st argument to callbacks
+       * @returns {Promise}
+       */
       callAction: (id, params) => this.callAction(namespace + id, params),
+      /**
+       * Retrieve a value from the local DB
+       *
+       * @param {string} id Path to the item
+       * @returns Item value
+       */
       storageGet: (id) => this.storageGet(namespace + id),
+      /**
+       * Store a value into the local DB
+       *
+       * @param {string} id Path to the item
+       * @param {any} value Value to be stored (must be serializable in JSON)
+       */
       storageSet: (id, value) => this.storageSet(namespace + id, value),
+      /**
+       * Add a suggestion for the user.
+       *
+       * @param {object} options Suggestion
+       */
       addSuggestion: (options) => {
         options.id = namespace + options.id
         return this.addSuggestion(options)
       },
+      /**
+       * Remove a suggestion
+       *
+       * @param {string} id Id of the suggestion
+       */
       removeSuggestion: (id) => this.removeSuggestion(namespace + id),
+      /**
+       * Register a widget for project dashboard
+       *
+       * @param {object} def Widget definition
+       */
       registerWidget: (def) => {
         def.id = namespace + def.id
         return this.registerWidget(def)

packages/@vue/cli-ui/apollo-server/connectors/shared-data.js

@@ -2,30 +2,70 @@
 const channels = require('../channels')
 // Utils
 const { log } = require('../util/logger')
-
+const path = require('path')
+const fs = require('fs-extra')
+const { rcFolder } = require('../util/rcFolder')
+
+/**
+ * @typedef SharedData
+ * @prop {string} id
+ * @prop {any} value
+ * @prop {Date} updated
+ * @prop {boolean} disk
+ */
+
+const rootFolder = path.resolve(rcFolder, 'shared-data')
+fs.ensureDirSync(rootFolder)
+
+/** @type {Map<string, Map<string, SharedData>>} */
 const sharedData = new Map()
 let watchers = new Map()
 
 function get ({ id, projectId }, context) {
   const store = sharedData.get(projectId)
   if (!store) return null
 
-  const value = store.get(id)
-  if (typeof value === 'undefined') return null
+  let data = store.get(id)
+  if (data == null) {
+    if (fs.existsSync(path.resolve(rootFolder, projectId, `${id}.json`))) {
+      data = {
+        id,
+        updated: new Date(),
+        disk: true
+      }
+    }
+  }
 
-  return {
-    id,
-    value
+  if (data && data.disk) {
+    data.value = readOnDisk({ id, projectId }, context)
+  }
+
+  return data
+}
+
+async function readOnDisk ({ id, projectId }, context) {
+  const file = path.resolve(rootFolder, projectId, `${id}.json`)
+  if (await fs.exists(file)) {
+    return fs.readJson(file)
   }
+  return null
 }
 
-function set ({ id, projectId, value }, context) {
+async function set ({ id, projectId, value, disk = false }, context) {
+  if (disk) {
+    await writeOnDisk({ id, projectId, value }, context)
+  }
   let store = sharedData.get(projectId)
   if (!store) {
     store = new Map()
     sharedData.set(projectId, store)
   }
-  store.set(id, value)
+  store.set(id, {
+    id,
+    ...(disk ? {} : { value }),
+    disk,
+    updated: new Date()
+  })
 
   context.pubsub.publish(channels.SHARED_DATA_UPDATED, {
     sharedDataUpdated: { id, projectId, value }
@@ -36,9 +76,19 @@ function set ({ id, projectId, value }, context) {
   return { id, value }
 }
 
-function remove ({ id, projectId }, context) {
+async function writeOnDisk ({ id, projectId, value }, context) {
+  const projectFolder = path.resolve(rootFolder, projectId)
+  await fs.ensureDir(projectFolder)
+  await fs.writeJson(path.resolve(projectFolder, `${id}.json`), value)
+}
+
+async function remove ({ id, projectId }, context) {
   const store = sharedData.get(projectId)
   if (store) {
+    const data = store.get(id)
+    if (data && data.disk) {
+      fs.remove(path.resolve(rootFolder, projectId, `${id}.json`))
+    }
     store.delete(id)
   }
 

packages/@vue/cli-ui/apollo-server/util/db.js

@@ -1,27 +1,9 @@
 const Lowdb = require('lowdb')
 const FileSync = require('lowdb/adapters/FileSync')
-const fs = require('fs-extra')
 const path = require('path')
-const { getRcPath } = require('@vue/cli/lib/util/rcPath')
+const { rcFolder } = require('./rcFolder')
 
-let folder
-
-if (process.env.VUE_CLI_UI_TEST) {
-  folder = '../../live-test'
-  // Clean DB
-  fs.removeSync(path.resolve(__dirname, folder))
-} else if (process.env.VUE_APP_CLI_UI_DEV) {
-  folder = '../../live'
-} else {
-  folder = (
-    process.env.VUE_CLI_UI_DB_PATH ||
-    getRcPath('.vue-cli-ui')
-  )
-}
-
-fs.ensureDirSync(path.resolve(__dirname, folder))
-
-const db = new Lowdb(new FileSync(path.resolve(__dirname, folder, 'db.json')))
+const db = new Lowdb(new FileSync(path.resolve(rcFolder, 'db.json')))
 
 // Seed an empty DB
 db.defaults({

packages/@vue/cli-ui/apollo-server/util/rcFolder.js

@@ -0,0 +1,23 @@
+const fs = require('fs-extra')
+const path = require('path')
+
+const { getRcPath } = require('@vue/cli/lib/util/rcPath')
+
+let folder
+
+if (process.env.VUE_CLI_UI_TEST) {
+  folder = path.resolve(__dirname, '../../live-test')
+  // Clean DB
+  fs.removeSync(path.resolve(__dirname, folder))
+} else if (process.env.VUE_APP_CLI_UI_DEV) {
+  folder = path.resolve(__dirname, '../../live')
+} else {
+  folder = (
+    path.resolve(__dirname, process.env.VUE_CLI_UI_DB_PATH) ||
+    getRcPath('.vue-cli-ui')
+  )
+}
+
+fs.ensureDirSync(path.resolve(__dirname, folder))
+
+exports.rcFolder = folder

packages/@vue/cli-ui/ui-defaults/tasks.js

@@ -2,6 +2,11 @@ const path = require('path')
 const fs = require('fs-extra')
 const { processStats } = require('./utils/stats')
 
+/** @typedef {import('../apollo-server/api/PluginApi')} PluginApi */
+
+/**
+ * @param {PluginApi} api
+ */
 module.exports = api => {
   const { getSharedData, setSharedData, removeSharedData } = api.namespace('org.vue.webpack.')
 
@@ -13,7 +18,6 @@ module.exports = api => {
     status: null,
     progress: {},
     operations: null,
-    stats: null,
     sizes: null,
     problems: null,
     url: null
@@ -75,8 +79,8 @@ module.exports = api => {
           const statsFile = path.resolve(api.getCwd(), `./node_modules/.stats-${type}.json`)
           const value = await fs.readJson(statsFile)
           const { stats, analyzer } = processStats(value)
-          setSharedData(id, stats)
-          setSharedData(`${id}-analyzer`, analyzer)
+          setSharedData(id, stats, { disk: true })
+          setSharedData(`${id}-analyzer`, analyzer, { disk: true })
           await fs.remove(statsFile)
         } else if (data.type === 'progress') {
           if (type === 'serve' || !modernMode) {