Is your feature request related to a problem? Please describe. I haven't used eleventy for a few months, and I'm not sure if my setup got messed, or this is how eleventy works to begin with. Every change that I make in the code -- it's refreshing the browser page automatically and losing scroll position instead of injecting changes.

Describe the solution you'd like Inject changes without having the need to refresh the page automatically or manually.

Describe alternatives you've considered There are no alternatives for CMS, I haven't tired any others -- but I do build webapps and all of their setups (cli's) have this functionality

Describe the bug I'm having trouble reproducing this, but this does occur fairly consistently in a project I'm working on when serving eleventy.

Essentially, I make some changes to a file and the elevent-dev-server tries to reload. It sometimes encounters the error below. If I save the file again, it will continue working normally.

I am running this via an Nx monorepo using the @nrwl/workspace:run-commands, so not sure if that affects anything. The equivalent command using npm-run-all would be the command here.

[11ty] Unhandled rejection in promise: (more in DEBUG output)
[11ty] ENOENT: no such file or directory, open '/Users/bondandy/Projects/cx-cloud-ui/node_modules/@11ty/eleventy-dev-server/node_modules/morphdom/dist/morphdom-esm.js' (via Error)
[11ty] 
[11ty] Original error stack trace: Error: ENOENT: no such file or directory, open '/Users/bondandy/Projects/cx-cloud-ui/node_modules/@11ty/eleventy-dev-server/node_modules/morphdom/dist/morphdom-esm.js'
[11ty]     at Object.openSync (node:fs:585:3)
[11ty]     at Object.readFileSync (node:fs:453:35)
[11ty]     at EleventyDevServer._getFileContents (/Users/bondandy/Projects/cx-cloud-ui/node_modules/@11ty/eleventy-dev-server/server.js:184:23)
[11ty]     at EleventyDevServer.requestMiddleware (/Users/bondandy/Projects/cx-cloud-ui/node_modules/@11ty/eleventy-dev-server/server.js:275:29)
[11ty]     at EleventyDevServer.onRequestHandler (/Users/bondandy/Projects/cx-cloud-ui/node_modules/@11ty/eleventy-dev-server/server.js:347:11)
[11ty]     at Server.emit (node:events:390:28)
[11ty]     at parserOnIncoming (node:_http_server:951:12)
[11ty]     at HTTPParser.parserOnHeadersComplete (node:_http_common:128:17)

To Reproduce Steps to reproduce the behavior:

1. Save changes
2. Error occurs
3. Save same page again
4. Works normal

Expected behavior Ideally no error occurs and the changes are saved & page reloads

Environment:

• OS and Version: MacOS 12.3.1
• Eleventy Version: 2.0.0-canary.4

Additional context Add any other context about the problem here.

After terminating 11ty --serve, it keep Trying to connect… & logging into browser console

[11ty][12:07:39.465 UTC] Trying to connect…                  reload-client.js:21
[11ty][12:07:39.772 UTC] Connected                           reload-client.js:21

[11ty][12:08:40.546 UTC] Disconnected                        reload-client.js:21
[11ty][12:09:18.706 UTC] Trying to connect…                 reload-client.js:160
▼ WebSocket connection to 'ws://localhost:5555/' failed:     reload-client.js:21
    init @ reload-client.js:160
    reconnect @ reload-client.js:88

It should suppress WebSocket connection failed (? and Trying to connect… ?) warning which will result:

(99) [11ty][12:09:18.706 UTC] Trying to connect…            reload-client.js:160

For example, this configuration:

const { EleventyServerlessBundlerPlugin } = require("@11ty/eleventy");

module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(function(eleventyConfig) {
    eleventyConfig.setServerOptions({
      middleware: [async function customMiddleware(req, res, next) {
        let result = await next();
        console.log( {result} );
        return result;
      }],
    });
  });

  eleventyConfig.addPlugin(EleventyServerlessBundlerPlugin, {
    name: "possum", // The serverless function name from your permalink object
    functionsDir: "./netlify/functions/",
  });
};

Reported after a test case reproduction from https://twitter.com/peschee/status/1526312000321642497

I have been using - quite a lot - the middleware feature of browsersync.

Despite being "minimal", could this new server propose the same feature? Of course it's still possible to use browsersync.

I have been using - quite a lot - the serveStatic feature of browsersync.

Despite being "minimal", could this new server propose the same feature? Of course it's still possible to use browsersync.

Mentioning to you (and will do so in the affected plugin, too) only because it may be that other plugins will be similarly affected, but 2.0.0-canary.1 crashed on launch with the following (cc @KyleMit):

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: eleventy_site@undefined
npm WARN Found: @11ty/[email protected]
npm WARN node_modules/@11ty/eleventy
npm WARN   peer @11ty/eleventy@">=0.10.0-beta.1" from [email protected]
npm WARN   node_modules/eleventy-plugin-embed-tweet
npm WARN     dev eleventy-plugin-embed-tweet@"^0.3.1" from the root project
npm WARN   1 more (the root project)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer @11ty/eleventy@">=0.10.0-beta.1" from [email protected]
npm WARN node_modules/eleventy-plugin-embed-tweet
npm WARN   dev eleventy-plugin-embed-tweet@"^0.3.1" from the root project

Describe the bug

I've been test running 2.0.0-canary-10 for a few weeks now on my blog. So far, I'm a BIG fan of the new reload behavior! It makes authoring a much more pleasant experience and is so much faster. That said, I did notice a bug where the hot reload breaks and elements inserted into the page with JavaScript disappear once the hot reload occurs.

Suppose you have this index.html in an absolute bare-minimum 11ty project with nothing else:

<p>I love <span id="test"></span></p>
<script>
document.getElementById('test').innerText = '11ty';
</script>

On an initial page load or a manual reload, it works as expected: The user sees I love 11ty.

If you later edit the file and save it to trigger a rebuild, though, the page reloads and the JavaScript breaks. Now, you only see I love.

To Reproduce Steps to reproduce the behavior:

1. Clone https://github.com/AleksandrHovhannisyan/11ty-sandbox/tree/2.0.0-canary-11-js-hotreload.
2. Run yarn to install dependencies.
3. Run yarn serve to start the dev server.
4. Navigate to localhost:8080. Observe the page reads: I love 11ty.
5. Open, edit, and save src/index.html.
6. Observe that the server hot-reloads the page.
7. Observe that the paragraph now reads I love.

Expected behavior This is somewhat expected because the page didn't actually reload, so the JavaScript doesn't re-run. On the other hand, if the page isn't actually reloading, elements previously inserted by JavaScript should be preserved. It can be a little annoying if you're writing JavaScript and want to see the results since you need to reload the page manually on each refresh. However, so far this has only been a minor annoyance for me.

Screenshots

N/A

Environment:

• OS and Version: N/A (Windows 10 build 19044,1706, running 11ty in WSL 2)
• Eleventy Version: 2.0.0-canary-11 (also reproducible in 10)

browser-sync works as expected,

the script shows up, but doesnt do anything, i need to manually refresh

i even toggled domdiff and dropped brave shields

first i thought it was a vite problem

let me know what more information i can give ya

Description

Currently, reload-client.js can listen for changes to underlying CSS files and reload styles accordingly when domdiff is enabled.

This works when editing the CSS file directly (e.g. when editing an existing class), however styles do not reload when updating a template file to use a newly created CSS class.

Minimal Reproduction:

Given a project using @11ty/[email protected] with the following files:

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <p class="foo">Hello world</p>
  </body>
</html>

style.css:

.foo {
  color: red;
}

.eleventy.js:

module.exports = function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy("style.css")
}

Run eleventy --serve and open the webpage.

Add the following to style.css:

.bar {
  color: blue;
}

Save the file.

Change class="foo" to class="bar" in index.html and save.

The text turns black, as though unstyled.

Expected Behavior

The text should turn blue after the class is updated.

Additional Info:

If style.css is re-saved with the same contents after the HTML is updated, then the new style is applied.

This issue is particularly problematic for users of Tailwind CSS which relies on generating many new utility classes during development.

Eleventy v2.0.0-canary.3 Eleventy Dev Server 1.0.0-canary.3 MacOS: Monterrey (Apple M& Pro)

Probably missing something obvious here. Tried to change port using setServerConfig as per the docs

module.exports = function(eleventyConfig) {
  // SERVER
  // -------------------------------
  eleventyConfig.setServerConfig({
    port: 3000
  });

  // CONFIG
  // -------------------------------
  return {
    markdownTemplateEngine: "njk",
    dir: {
      input: "src",
      output: "dist"
    }
  };
};

And I keep getting the following error message

[11ty] Eleventy CLI Fatal Error: (more in DEBUG output)
[11ty] 1. Error in your Eleventy config file '/Users/jeromecoupe/data/sandboxes/test/.eleventy.js'. (via EleventyConfigError)
[11ty] 2. eleventyConfig.setServerConfig is not a function (via TypeError)
...

As soon as I remove the setServerConfig lines, everything is back to normal and I get a server running on port 8080 when running npx eleventy --serve.

Version of Eleventy / Eleventy dev server

• @11ty/eleventy 2.0.0-canary.18
• @11ty/eleventy-dev-server 1.0.0-canary.14

Steps to reproduce

1. Configure Eleventy to output files in ./dist
2. Generate CSS and JS files from ./src/assets/ to ./dist/assets/ output folder using NPM scripts (Sass and esbuild)
3. Configure Eleventy Dev Server to pick up changes in output directory using input

module.exports = function (eleventyConfig) {
  // server options
  eleventyConfig.setServerOptions({
    port: 3000,
    input: "./dist",
  });

  // override base config
  return {
    dir: {
      input: "src",
      output: "./dist",
      markdownTemplateEngine: "njk",
    },
  };
};

Configuration seems to be working fine: the port changes to 3000

addWatchTarget does not work either

Tried adding addWatchTarget for source scss and js files. Not working for me either.

module.exports = function (eleventyConfig) {
  // watch targets to trigger a build
  eleventyConfig.addWatchTarget("./src/assets/scss/");
  eleventyConfig.addWatchTarget("./src/assets/js/");

  // server options
  eleventyConfig.setServerOptions({
    port: 3000,
    input: "./dist",
  });

  // override base config
  return {
    dir: {
      input: "./src",
      output: "./dist",
      markdownTemplateEngine: "njk",
    },
  };
};

If I comment out the server config and use eleventy 1.0.2, everythig works as expected, both watch targets trigger a build and a page reload.

Test repository

Here is a repository with a reduced test case if that helps.

Expected behaviour

Eleventy dev server reloads the project when any file changes in ./dist, be it generated by Eleventy or not. I am expecting this to be equivalent to browser-sync start --server \"./dist\" --files \"./dist\"

Actual behaviour

HTML files trigger a reload, while CSS and JS files do not.

Gist

Shower presentation engine while served with eleventy-dev-server stops working properly after the first reload.

Steps to reproduce

1. Install the server npm install -g @11ty/eleventy-dev-server
2. Clone [email protected]:shower/shower.git
3. Install dependencies npm install
4. Run the server eleventy-dev-server
5. Open http://localhost:8080/
6. Click the first slide
7. Press Right Arrow key a few times to reach the end
8. Press Left Arrow key to go back
9. Open index.html in editor and save it
10. Try to navigate the slides, compare the behavior

Expected behavior

The same, before and after saving the file

Actual behavior

After the saving slides start to behave weird

https://user-images.githubusercontent.com/105274/179629661-3b6b405c-13a5-452c-9b56-78eddb36d30e.mp4

While I suspect the issue to be specific to Windows, I have not tested on other platforms yet.

Within the reload method of the server, we expect the files to list out paths of the changed files. On Windows, these paths use \\ as a delimiter sometimes, for example ./src\\views\\index.njk, while entry.inputPath uses a correctly normalised / delimiter - /src/views/index.njk.

This leads to a mismatch in the reload-client bundle, here, and thus always triggers a full refresh instead of morphing the DOM.

I'm unsure if this is related to a Windows user setting, or something handled internally by 11ty, but seems to be worth looking into!

Pending support for:

• enabled, though enabled is a bad name—maybe alias with --reload=false or something 😅
• encoding
• showAllHosts
• https

https://www.11ty.dev/docs/watch-serve/#eleventy-dev-server

Related to #29.

This is what works now:

const { EleventyServerlessBundlerPlugin } = require("@11ty/eleventy");

module.exports = function(eleventyConfig) {
  eleventyConfig.setServerOptions({
    middleware: [function overrideMiddleware(req, res, next) {
      // This works now
      res.writeHead(200, {"content-type": "text/html"}); // content-type header required for live-reload
      res.write("Before Text");
      res.end();

      next();
    }],
  });
});

However, I’d like to see folks able to consume res.statusCode (404 when no file is present) and res.body with the static content to do request-time content transforms