snapstromegon / eleventy-plugin-rollup Goto Github PK

After doing #3 I should create some basic unittests to check most of the current plugin behavior.

When I run eleventy with eleventy --serve I would like to make changes in my JS file and have Rollup automatically pick up those changes, rebuild the destination JS file, and have browsersync refresh the browser. This doesn't work - Rollup doesn't pick up changes to the JS file. I have to restart eleventy --serve on the command line each time I make changes to JS files.

https://rollupjs.org/guide/en/#watch-options specifies that Rollup will watch the specified input files for changes, but:

These options only take effect when running Rollup with the --watch flag, or using rollup.watch.

How do I run Rollup in watch mode?

My .eleventy.js file reads:

eleventyConfig.addPlugin(rollupPlugin, {
  rollupOptions: {
    output: {
      format: 'es',
      dir: 'dist/js',
    },
    watch: {
      include: [
        'src/js/*'
      ]
    }
  },
});

However, I can't see how to invoke Rollup via eleventy-plugin-rollup in watch mode.

Unittests should be a check for incoming PRs - this is a bout implementing such a check using github actions

When the plugin generates the path to the compiled JS file, it inserts one too many ../ in the path (see this page for a live example).

For the path /blog/rock-paper-scissors/ (i.e. the file /blog/rock-paper-scissors/index.html it generates the script tag

<script src="../../../assets/js/blog-278a73.js" type="module"></script>

but it should be

<script src="../../assets/js/blog-278a73.js" type="module"></script>

Browsers seem to ignore the extra one and load the file anyway. This still happens if I use a relative path and pass in true as a second argument to the shortcode.

I believe this issue is caused by passing in the output file to path.relative(), not its directory.

console.log(path.relative('dist/blog/rock-paper-scissors/index.html', 'dist/assets/js/blog-278a73.js'));
// Returns ../../../assets/js/blog-278a73.js

console.log(path.relative('dist/blog/rock-paper-scissors', 'dist/assets/js/blog-278a73.js'));
// Returns ../../assets/js/blog-571c47.js

Modifying the call to path.relative() to use path.dirname(eleventyInstance.page.outputPath) instead of the raw outputPath fixes the issue. I'm happy to submit a PR with this change if this doesn't cause any other problems.

Plugin version: 1.2.0
Node version: 18.8.0
Eleventy version: 1.0.1

This is mainly for myself.

Since people actually want to use this, I want to provide more assurances than "it feels right". Because of that I want to explore the possible options for unittesting this.

A solution should:

• work mostly without writing to disk (good for performance)
• be easy to use
• allow for easy expansion

I will probably go for ava since I already know it and it's also used in 11ty.

/404.html are used across all 404 pages, including https://example.com/posts/hello-world, this plugin resolves the target JS URL by relative paths, so scripts on 404 pages will not work.

Potential solutions:

1. Extend scriptGenerator: pass eleventyInstance to the callback as well so the user can customise the final resolution for the JS for each different context. In this example:

   +++ node_modules/eleventy-plugin-rollup/index.js	2023-02-11 15:46:32
   @@ -180 +180 @@
   -    return this.scriptGenerator(relativePath);
   +    return this.scriptGenerator(relativePath, eleventyInstance); // backwards compatible

   eleventyConfig.addPlugin(rollupPlugin, {
     rollupOptions: "rollup.config.js",
     scriptGenerator: (relativeUrl, eleventyInstance) => {
       if (eleventyInstance.page.url === '/404.html') {
         relativeUrl = "/" + relativeUrl;
       }
   
       return `<script async defer src="${relativeUrl}"></script>`
     }
   });

2. Hardcode 404 logic to use absolute URL in this plugin.

   if (eleventyInstance.page.url === '/404.html') {
     relativePath = "/" + relativePath;
   }

Github Actions should be used to do automatic releases on PR merge to main.

I am trying to make rollup work with my setup, the source code is located under ./src folder, when i try to use rollup shortcode it fails to find the js file, if i move the /src/static/js/main.js to root /static/js/main.js then it is able to find it and build under /public/static/js/main-abc.js but when I open localhost it fails to load it giving 404. Not sure whats wrong with my setup, it does not matter if i use importScriptsAbsoluteFrom: 'src', useAbsoluteScriptPaths: true, or not, it still cant find the source in ./src/ folder.

What am I missing here :?

const rollupPlugin = require('eleventy-plugin-rollup');

module.exports = function (eleventyConfig) {
  eleventyConfig.setBrowserSyncConfig({
    files: './public/static/**/*.(css|js)',
  });

  eleventyConfig.addWatchTarget('static/js/*');

  eleventyConfig.addPlugin(rollupPlugin, {
    rollupOptions: {
      output: {
        format: 'es',
        dir: 'public/static/js',
      },
    },
  });

  return {
    dir: {
      input: 'src',
      output: 'public',
    },
  };
};

Example repo: https://github.com/odevtools/fakester

Error:

[11ty] 1. Having trouble writing to "public/index.html" from "./src/index.md" (via EleventyTemplateError)
[11ty] 2. (./src/_includes/base.njk)
[11ty]   EleventyShortcodeError: Error with Nunjucks shortcode `rollup` (via Template render error)
[11ty] 3. ENOENT: no such file or directory, open 'static/js/main.js' (via Template render error)
[11ty]
[11ty] Original error stack trace: Error: ENOENT: no such file or directory, open 'static/js/main.js'