Watch custom directories

[dkzlv]

Is your feature request related to a problem? Please describe. If you have a content-driven blog, that uses Markdown processor, you want rollup/webpack to watch certain directories, where you hold your content files. Otherwise all the content is pre-processed during the build phase and you need to restart the sapper dev command to get fresh content.

Describe the solution you'd like Would be awesome, if sapper dev command would respect the watch-attributes of rollup config.

Describe alternatives you've considered Write a wrapper script, that would restart sapper dev every time something changes in the directory, but the page won't refresh and it is just kind of messy.

How important is this feature to you? Somehow quite important. I've already written the said script 😅

Additional context I use sapper to power my blog. I have a src/posts/ folder, where I keep all the posts in markdown-format. And I have src/routes/[slug].json.js file, where I read files in this folder, convert them to HTML and serve.

[antony]

I think this relates very closely to the idea behind https://github.com/sveltejs/sapper/pull/853

[ben-rogerson]

I'm keen on this feature too. I also have a set of markdown posts that I'd like Sapper to watch and the browser to reload while editing.

[mromanuk]

I'm keen on this feature too. I also have a set of markdown posts that I'd like Sapper to watch and the browser to reload while editing.

I'm having the same issue, currently I'm editing my markdown files, and I didn't find a way to update those automatically, is there any workaround?

[ajboni]

I'm keen on this feature too. I also have a set of markdown posts that I'd like Sapper to watch and the browser to reload while editing.

I'm having the same issue, currently I'm editing my markdown files, and I didn't find a way to update those automatically, is there any workaround?

Im trying to do the same with this.addWatchFile and seems to work on individual files, but not on folders:

export default {
    client: {
		input: config.client.input(),
		output: config.client.output(),
		plugins: [{
        	buildStart() {
				this.addWatchFile('static/posts/post1.md') // works
				this.addWatchFile('static/posts') // Does not work
				this.addWatchFile('static/**/*') // Does not work
			}
		},
...
}

EDIT: quick dirty fix (wont work on new files until restarted though)

buildStart() {
    const files = fs.readdirSync('./static/posts/');
	files.forEach(file => {
		this.addWatchFile('static/posts/' + file)
	});
}

[mromanuk]

EDIT: quick dirty fix (wont work on new files until restarted though)

buildStart() {
    const files = fs.readdirSync('./static/posts/');
	files.forEach(file => {
		this.addWatchFile('static/posts/' + file)
	});
}

Thank you @ajboni !

Your code should go in server, right? For my own case, I've added globbing because my posts are inside a directory:

import glob from 'glob'

server: {
...
plugins: [
       //...,
      {
        buildStart() {
          var self = this
          const postsDir = './src/_articles'
          glob(postsDir + '/**/*.md', null, function(er, files) {
            files.forEach(file => {
              self.addWatchFile(file)
            })
          })
        }
      }
     //...
     ]

[ajboni]

Thank you @ajboni !

Your code should go in server, right? For my own case, I've added globbing because my posts are inside a directory:

I've put it on client, but now I'm having doubts on where it belongs... It's working anyway heh

[gavinmcfarland]

For my use case, I wasn't able to get it working using the suggestions above.

I generate a server from markdown files which are fetched using node-fetch and window.fetch. The server automatically updates so that when the page manually reloads the updated content appears but I can't get Sapper to hot-reload when the file changes.

I've confirmed using the suggestions above that it's watching the files and they are successfully recognised when they're updated. But the client and server aren't reloading and therefore fetching the new content.

update: I was able to get it working. It appeared there was something causing my client bundle to error. I had to place it in the server config, I'm not sure why that as opposed to the client, but it seems to work. Thanks!

[janosh]

For me, the snippets from @ajboni and @mromanuk are throwing

TypeError: this.addWatchFile is not a function

  server: {
    // ...
    plugins: [
      {
        buildStart() {
          glob('content/**/*', null, function (err, files) {
            files.forEach((file) => {
              this.addWatchFile(file)
            })
          })
        },
      },
    ],
    // ...
  },

[ajboni]

For me, the snippets from @ajboni and @mromanuk are throwing

TypeError: this.addWatchFile is not a function

  server: {
    // ...
    plugins: [
      {
        buildStart() {
          glob('content/**/*', null, function (err, files) {
            files.forEach((file) => {
              this.addWatchFile(file)
            })
          })
        },
      },
    ],
    // ...
  },

This was working for me back then: https://www.github.com/ajboni/svelte-sapper-static-blog/tree/master/rollup.config.js

[janosh]

Oops, my mistake. I put that code snippet in server rather than client. Thanks!

[janosh]

Follow up question: rollup is now detecting changes and rebuilding but the changes don't appear on the page. I assume that's because I'm watching Markdown and Yaml files and the file that parses these content files isn't being rerun. Would I need something like rollup.watch to rerun the parser.js when a START event fires?

[JamesCoyle]

If I put that buildStart snippet into the client it builds but doesn't refresh. If I put it into the server it builds and refreshes but doesn't update the page content. If I put it in both server and client it builds and refreshes and sometimes updates the content but sometimes doesn't.

Is there any way to get this working properly? I don't like having to stop and start the dev server manually whenever I need to change something in the static files.

[zhammer]

@JamesCoyle

If I put that buildStart snippet into the client it builds but doesn't refresh. If I put it into the server it builds and refreshes but doesn't update the page content. If I put it in both server and client it builds and refreshes and sometimes updates the content but sometimes doesn't.

yeah, i imagine when you (properly) have both the server reload content and client reload page it depends on which gets reloaded first to determine if you're going to see the new content when your page reloads.

i'd also like a supported solution for this!

[Zeng1998]

is there any solutions now?