Preview refresh on eleventy (11ty) static site with Visual Editor is glitchy

Support
,
1

The Context

I’m using eleventy (11ty) as a static site generator.

I want the Visual Editor to refresh with the latest changes I’ve made in the editor.

The Problem

If I’ve got a very fast build, everything works great.

However, if the build in 11ty takes a second or so, the Visual Editor refreshes too fast and the page shows the old content.

What I’ve Tried

I’ve read all the documentation here and here on automatic content reload.

I’ve tried listening to the stackBitObjectsChanged event… but that doesn’t really help as I can’t refresh a specific area of the page with 11ty.

What I Want

I want to be able to say from 11ty to the Visual Editor “Hey, the page has been rebuilt now, please refresh it!”

There doesn’t seem to be any docs on how to do this.

Is there a postMessage I can call from the iframe I’m in that forces Visual Editor to refresh the whole page?

Thanks in advance - this is a huge pain point for us adopting Netlify!

Config

I run 11ty with my stackbit.config.ts file as below using npx @11ty/eleventy --serve --port {PORT} or ./node_modules/.bin/eleventy --serve --port {PORT}

import { defineStackbitConfig } from '@stackbit/types';
import { GitContentSource } from '@stackbit/cms-git';
import { Page } from './src/local/models/page';

export default defineStackbitConfig({
    stackbitVersion: '~0.6.0',
    ssgName: 'custom',
    devCommand: 'npx @11ty/eleventy --serve --port {PORT}',
    experimental: {
        ssg: {
            name: 'eleventy',
            logPatterns: {
                up: ['Server at']
            }
        }
    },
    nodeVersion: '18',
    contentSources: [
        new GitContentSource({
            rootPath: __dirname,
            contentDirs: ['src'],
            models: [Page],
            assetsConfig: {
                referenceType: 'static',
                staticDir: 'public',
                uploadDir: 'images',
                publicPath: '/'
            }
        })
    ],
    modelExtensions: [
        { name: 'Page', type: 'page', urlPath: '/{slug}' }
    ]
});
3

Hi @johngallagher,

You seem to have a helpdesk ticket open. We’ll follow-up there (unless one of the devs responds in this thread directly).