ES Module Support

[Jesspu]

ES Module Support

[Jesspu]

I am getting close to the esm port. Main issue is that esm import caches modules, with no method or means exposed to reload them. This means if you are running a watch server, and change the brunch config, the watcher will reload but won't pick up the changes (since it loads the brunch-config.js as a module). In cjs, require.cache is exposed and can be deleted/refreshed. I have to implement a node worker to load the module, as that seems to be the only workaround to not cache modules. Once I get that part figured out, it will be pretty close. Once I get all the test passing, and test it on a few of my own projects, I can get a PR up and let some other people test it. If you need to use esm in a plugin today, that can be done with the code I originally posted, and you can reference the esm plugin to see what changes need to be made to move a plugin to esm. That has been working great with both esm and cjs plugins in my current projects. I have already converted a few of the more popular plugins to esm and it works great. One nice side effect of working on this is learning more about how brunch works internally. Hoping to be able to help with more updates on the future. Will post updates here as I make progress.

…

On Sun, Mar 27, 2022, 12:41 PM Evan Boehs ***@***.***> wrote: Just stumbled upon brunch, I also really want it to stay alive. Anything the community can do? @paulmillr <https://github.com/paulmillr>, do stay safe! — Reply to this email directly, view it on GitHub <#1884 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAUN6P6YGSFNGIO4ONMF4JLVCCMVVANCNFSM5OZCXGLQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[Jesspu]

Very cool, thanks for sharing.

I am actually close to porting brunch itself to an ES module. That will allow it to use CJS and ESM packages throughout without any issues.

Once it's done and validated, I will share it as well. It will also be shipped to the @firstfleet/brunch npm package (fork of brunch that currently has my esm plugin support).

I hope this will at least future proof brunch a bit so I can keep using it.

[reubano]

Cool! I'm sure they'd appreciate a PR over here too.

[paulmillr]

@reubano hard to do find more time being at war, but I also want to keep Brunch up and running. Just need more help.

[reubano]

@reubano hard to do find more time being at war, but I also want to keep Brunch up and running. Just need more help.

Thoughts and prayers to you and yours!! 🙏🏽

[paulmillr]

Hey @Jesspu

Thanks for the kind words! Unfortunately i'm focusing on other projects at the moment, and there is no space for Brunch. You can consider it deprecated. Unless someone wants to contribute.

I'd keep this issue open in any case.

[Jesspu]

Okay, no problem appreciate your response and all the work on brunch over the years.

We are actually still using brunch for our new frontend apps built in svelte, and it works great. I have had to maintain most of our plugins, but with the way brunch is set up, it is pretty trivial.

Sad that the sun is setting on brunch, but I will probably keep using it until I am no longer able to do so.

If anyone else finds this issue, and has questions about converting brunch plugins to ESM, or using ESM in brunch, let me know and I will try to help.

[reubano]

Here's how I handled it for @observablehq/plot. Ugly, but works...

package.json

{
  ...
  "dependencies": {
    "@babel/runtime": "^7.7.4",
    "@observablehq/plot": "^0.4.2",
    "@popperjs/core": "^2.10.1",
    "bootstrap": "^5.1.0",
    "brunch": "^4.0.0",
    "coffeescript": "^2.5.1",
    "lodash": "^4.17.21",
    "mithril": "^2.0.4",
  },
  "devDependencies": {
    "@babel/core": "^7.17.8",
    "@babel/plugin-transform-runtime": "^7.17.0",
    "@babel/preset-env": "^7.16.11",
    "auto-reload-brunch": "^2.7.1",
    "babel-brunch": "^7.0.1",
    "clean-css-brunch": "^3.0.0",
    "coffee-script-brunch": "^4.0.0",
  }
}

brunch-config.js

// Generated by CoffeeScript 2.4.1

module.exports = {
  // http://brunch.io/docs/config
  plugins: {
    babel: {
      presets: ['@babel/preset-env'],
      plugins: [
        [
          "@babel/plugin-transform-runtime",
          {
            "absoluteRuntime": false,
            "version": "^7.7.4"
          }
        ]
      ],
      ignore: [
        /^node_modules\/bootstrap/,
        /^node_modules\/mithril/,
        /^node_modules\/lodash/,
        /^node_modules\/@babel\/runtime/,
      ]
    }
  },
  npm: {
    compilers: ['babel-brunch'],
    globals: {
      popper: "@popperjs/core",
      _: "lodash",
      Plot: "@observablehq/plot",
      babelInteropRequireDefault: "@babel/runtime/helpers/interopRequireDefault",
      babelGet: "@babel/runtime/helpers/get",
      babelInherits: "@babel/runtime/helpers/inherits",
      babelSlicedToArray: "@babel/runtime/helpers/slicedToArray",
      babelObjectSpread2: "@babel/runtime/helpers/objectSpread2",
      babelClassCallCheck: "@babel/runtime/helpers/classCallCheck",
      babelCreateClass: "@babel/runtime/helpers/createClass",
      babelPossibleConstructorReturn: "@babel/runtime/helpers/possibleConstructorReturn",
      babelGetPrototypeOf: "@babel/runtime/helpers/getPrototypeOf",
      babelObjectWithoutProperties: "@babel/runtime/helpers/objectWithoutProperties",
      babelToConsumableArray: "@babel/runtime/helpers/toConsumableArray",
      babelAssertThisInitialized: "@babel/runtime/helpers/assertThisInitialized",
      babelDefineProperty: "@babel/runtime/helpers/defineProperty",
      babelInteropRequireDefault: "@babel/runtime/helpers/interopRequireDefault",
      babelTypeof: "@babel/runtime/helpers/typeof",
      babelWrapNativeSuper: "@babel/runtime/helpers/wrapNativeSuper",
      babelRegenerator: "@babel/runtime/regenerator",
      bootstrap: "bootstrap",
    }
  },
  server: {
    hostname: "0.0.0.0",
    port: 3333
  },
  files: {
    javascripts: {
      joinTo: {
        "javascripts/app.js": /^app/,
        "javascripts/vendor.js": /^(?!app)/
      }
    },
    stylesheets: {
      joinTo: {
        "stylesheets/app.css": /^app\/.*custom\.css/,
        "stylesheets/vendor.css": /^(?!app)/
      }
    }
  },
  modules: {
    autoRequire: {
      "javascripts/app.js": ["initialize"]
    }
  },
  sourceMaps: "absoluteUrl"
};

view.coffee

m = require 'mithril'

module.exports =
  oncreate: (vnode) ->
    attrs = vnode.attrs
    data = attrs.collection.list

    graph = Plot.plot
      y: {grid: true}
      marks: [Plot.line(data, {x: "date", y: "value"})]

    vnode.dom.appendChild graph

  view: (vnode) -> m 'span.chart'

[reubano]

BTW @paulmillr, really hope you get more time for brunch. Don't know what I'd do if I was forced to go back to rollup or Webpack.

[boehs]

Just stumbled upon brunch, I also really want it to stay alive. Anything the community can do?

@paulmillr, do stay safe!