Implement ssg.stopWatcher() in cms

Author: scriptype

src/cms/api/models/ssg.js

@@ -14,15 +14,27 @@ const createSSGModel = (state) => {
     },
 
     async watch({ rootDirectory, refreshTheme, debug, cli }) {
-      return state.setState(
-        await ssg.watch({
-          rootDirectory,
-          refreshTheme,
-          debug,
-          cli,
-          onChange: state.setState
-        })
-      )
+      if (state.isWatching()) {
+        return false
+      }
+      const { result, watcher } = await ssg.watch({
+        rootDirectory,
+        refreshTheme,
+        debug,
+        cli,
+        onChange: state.setState
+      })
+      state.startWatcher(watcher.stop)
+      state.setState(result)
+      return true
+    },
+
+    async stopWatcher() {
+      if (!state.isWatching()) {
+        return false
+      }
+      await state.stopWatcher()
+      return true
     }
   }
 }

src/cms/index.js

@@ -7,14 +7,27 @@ const createCMS = (initialState = {}) => {
       ssgOptions: {},
       settings: {},
       fileSystemTree: [],
-      contentModel: {}
+      contentModel: {},
+      watcher: {
+        isRunning: false,
+        stop: _=>_
+      }
     }, initialState)
 
     return {
       getSettings: () => state.settings,
       getFileSystemTree: () => state.fileSystemTree,
       getContentModel: () => state.contentModel,
       getSSGOptions: () => state.ssgOptions,
+      isWatching: () => state.watcher.isRunning,
+      stopWatcher: () => {
+        state.watcher.stop()
+        state.watcher.isRunning = false
+      },
+      startWatcher: (stopFn) => {
+        state.watcher.isRunning = true
+        state.watcher.stop = stopFn
+      },
 
       setState: (newState) => {
         Object.assign(state, newState)

src/cms/server/public/api.js

@@ -30,6 +30,13 @@ const api = {
         body: JSON.stringify(options)
       })
       return response.text()
+    },
+
+    stopWatcher: async () => {
+      const response = await fetch('/api/ssg/stop-watcher', {
+        method: 'post'
+      })
+      return response.text()
     }
 
   },

src/cms/server/public/app.js

@@ -1,5 +1,6 @@
 import ssgBuild from './app/ssgBuild.js'
 import ssgWatch from './app/ssgWatch.js'
+import ssgStopWatcher from './app/ssgStopWatcher.js'
 import getSSGOptions from './app/getSSGOptions.js'
 import getSettings from './app/getSettings.js'
 import updateSettings from './app/updateSettings.js'
@@ -31,6 +32,10 @@ const makeButtonsWork = () => {
     await ssgWatch()
     setIframeSrc()
   })
+  query('#ssg-stop-watcher-btn').addEventListener('click', async () => {
+    await ssgStopWatcher()
+    setIframeSrc()
+  })
   query('#get-ssg-options-btn').addEventListener('click', getSSGOptions)
   query('#get-settings-btn').addEventListener('click', getSettings)
   query('#update-settings-btn').addEventListener('click', updateSettings)

src/cms/server/public/app/ssgStopWatcher.js

@@ -0,0 +1,7 @@
+import api from '../api.js'
+
+const ssgStopWatcher = async () => {
+  return api.ssg.stopWatcher()
+}
+
+export default ssgStopWatcher

src/cms/server/public/index.html

@@ -83,6 +83,7 @@
                 <p>ssg</p>
                 <button type="button" id="ssg-build-btn">ssg.build()</button>
                 <button type="button" id="ssg-watch-btn">ssg.watch()</button>
+                <button type="button" id="ssg-stop-watcher-btn">ssg.stopWatcher()</button>
                 <button type="button" id="get-ssg-options-btn">get ssg options</button>
 
                 <p>settings</p>

src/cms/server/router/api/ssg.js

@@ -29,3 +29,12 @@ module.exports = express.Router()
       res.status(500).send(e)
     }
   })
+  .post('/stop-watcher', async (req, res, next) => {
+    try {
+      await req.api.ssg.stopWatcher()
+      res.sendStatus(200)
+    } catch (e) {
+      console.log('Error running ssg.stopWatcher', e)
+      res.status(500).send(e)
+    }
+  })

src/ssg/index.js

@@ -103,9 +103,13 @@ const watch = async ({ rootDirectory, refreshTheme, debug, cli, onChange = _=>_
     }
   }
 
-  Watcher.init(watcherOptions)
+  const watcher = await Watcher.init(watcherOptions)
+  const result = await build(buildOptions)
 
-  return build(buildOptions)
+  return {
+    result,
+    watcher
+  }
 }
 
 module.exports = {