Skip to content

1.6.0

Compare
Choose a tag to compare
@matthewp matthewp released this 13 Nov 13:58
· 321 commits to master since this release

This is a minor release, adding one new feature (the ability to define dependencies).

meta.deps for ES and CommonJS modules

1.6.0 adds the ability to define dependencies on ES modules (modules using import/export) and CommonJS (using require). This is useful when a module has an implicit dependency (such as a css file) that it does not define as a dependency itself.

As an example, let's say you had a module:

counter.js

function makeCounter() {
  let counter = document.createElement("div");
  counter.className = "counter";
  counter.textContent = 0;
  
  let start = Date.now();
  setInterval(() => {
    let end = Date.now();
    let diff = start - end;
    let seconds = Math.floor(diff / 1000);
    counter.textContent = seconds;
  }, 500);

  return counter;
}

export default makeCounter;

Which has an associated CSS for styling:

counter.css

.counter {
  font-weight: bolder;
  color: tomato;
}

If you wanted to use this component, previously you would have to remember to import both of these files in each place that needed them.

In 1.6.0 you can now add meta.deps to any ES or CommonJS module, adding to globals which were previously supported.

To fix the above, edit your package.json:

{
  "name": "my-app",
  "version": "1.0.0",
  "main": "main.js",

  "steal": {
    "meta": {
      "my-app/counter":  {
        "deps": ["my-app/counter.css"]
      }
    }
  }
}

And now you can simply import the counter.js module, and the styles will come with it.

Thanks to @DesignByOnyx for adding this feature.

Issues