Skip to content

Commit 15ff249

Browse files
weirdwaterweirdwater
committed
Comply with changelog grammar
1 parent 0c69852 commit 15ff249

3 files changed

Lines changed: 67 additions & 58 deletions

File tree

‎packages/pluggable-widgets-tools/CHANGELOG.md‎

Lines changed: 2 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -12,64 +12,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
1212

1313
### Changed
1414

15+
- We upgraded rollup to version 3. Custom rollup.config.js files [likely require changes](./docs/rollup3-guide.md).
1516
- The renderMode property in the preview arguments is no longer considered optional.
16-
17-
#### Rollup 3
18-
19-
We upgraded the bundling setup. For most packages this meant updating to the latest minor or patch versions, but for Rollup we upgraded from major version 2 to 3. If your widget uses custom configurations you may need to perform some actions.
20-
21-
1. Ensure you are using node 20 or above.
22-
2. Upgrade any Rollup related package to their latest (Rollup 3 supporting) version: `npm install <package-name>@latest`.
23-
3. Update your custom rollup configuration:
24-
- If your rollup configuration imports our base rollup configuration, rename the import to `@mendix/pluggable-widgets-tools/configs/rollup.config.mjs`.
25-
- Rollup now offers native support for ES Modules for Rollup configuration. This does mean it is stricter with regards to ESM and CJS, ensure that:
26-
- If you are using ESM to use the `.mjs` extension for your `rollup.config.mjs` file.
27-
- If you are using CJS you can continue using the `.js` extension for your `rollup.config.js` file.
28-
29-
If you decide to continue using ES Modules for your rollup configuration, there are [some caveats to be aware of](https://rollupjs.org/command-line-interface/#caveats-when-using-native-node-es-modules). Below we highlight a few.
30-
31-
##### ES Module Imports
32-
33-
When using ESM you should rename your Rollup configuration files to `.mjs`. This tells node to expect ESM for that particular file. Import statements targeting local files should be updated to include the file extension.
34-
35-
When importing some CJS packages you may no longer be able to access individual named exports directly. In this case you will need to import the full module. You can [desctructure](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) the module to keep the rest of your implementation the same.
36-
37-
```js
38-
// Partial import
39-
import { cp } from "shelljs";
40-
// Full namespace import
41-
import shelljs from "shelljs";
42-
const { cp } = shelljs;
43-
```
44-
45-
##### ES Module __Dirname
46-
47-
In ESM files the `__dirname` variable is not available. Instead, you can access the current file's path using `import.meta.url`. Do note that this includes the `file:` protocol prefix. An easy way to work with the file's url is to use it as the [base value for the URL constructor](https://developer.mozilla.org/en-US/docs/Web/API/URL/URL#base). This will allow you to resolve a relative path from that path. For example `new URL("../", "file:/a/b/c.txt")` results in the URL `file:/a`.
48-
49-
```js
50-
// ESM equivalent of __dirname
51-
const dirname = new URL("./", import.meta.url).pathname;
52-
```
53-
54-
Also note that `require()` is unavailable in ESM files. A common usecase for rollup setups is accessing the package.json of a project. If this is a static location relative to the script, you may use a typed import. Otherwise, read the file from the file system and parse it as JSON.
55-
56-
```js
57-
// CJS method
58-
import { join } from "node:path";
59-
const packagePath = join(process.cwd(), "/package.json");
60-
const package = require(packagePath);
61-
62-
// ESM import with attributes
63-
import package from "../package.json" with { type: "json" }
64-
65-
// Dynamic import with attributes
66-
const package = await import(packagePath, { with: { type: "json" }})
67-
68-
// Read file and parse (async version with fs.readFile)
69-
import { readFileSync } from "node:fs"
70-
const package = JSON.parse(readFileSync(packagePath))
71-
```
72-
17+
- We updated the Mendix package to 10.18.54340.
7318

7419
## [10.16.0] - 2024-10-31
7520

‎packages/pluggable-widgets-tools/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ In your `package.json` scripts, use the following command with the desired task:
7272

7373
## Migrating from previous versions
7474

75-
- 10.17 includes an upgrade from Rollup 2 to 3. See the [changelog](./CHANGELOG.md) for upgrade notes.
75+
- 10.17 includes an upgrade from Rollup 2 to 3. Custom `rollup.config.js` files [likely require changes](./docs/rollup3-guide.md).
7676
- Webpack bundler is changed to a Rollup. You must migrate your custom configuration.
7777
- Update `pluggable-widgets-tools` commands used in your `package.json` file to one of the described in this readme. In particular `start:js`, `start:ts`, and `start:server` commands should be changed to `start:web`.
7878
- You now can use named exports in your widget. That is, you can write `export MyWidget;` instead of `export default MyWidget;`.

‎packages/pluggable-widgets-tools/docs/rollup3-guide.md‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
2+
# Rollup 3 Upgrade Guide
3+
4+
In 10.18 we upgraded the Rollup bundling setup from major version 2 to 3. If your widget uses custom configurations you may need to perform some actions.
5+
6+
1. Ensure you are using node 20 or above.
7+
2. Upgrade any Rollup related package to their latest (Rollup 3 supporting) version: `npm install <package-name>@latest`.
8+
3. Update your custom rollup configuration:
9+
- If your rollup configuration imports our base rollup configuration, rename the import to `@mendix/pluggable-widgets-tools/configs/rollup.config.mjs`.
10+
- Rollup now offers native support for ECMAScript Modules (ESM) for Rollup configuration. This does mean it is stricter with regards to ESM and CJS, ensure that:
11+
- If you are using ESM to use the `.mjs` extension for your `rollup.config.mjs` file.
12+
- If you are using CJS you can continue using the `.js` extension for your `rollup.config.js` file.
13+
14+
## ECMAScript Module Caveats
15+
16+
If you decide to continue using ES Modules for your rollup configuration, there are [some caveats to be aware of](https://rollupjs.org/command-line-interface/#caveats-when-using-native-node-es-modules). Below we highlight a few.
17+
18+
### Rollup Config Filenames
19+
20+
When using ESM you should rename your Rollup configuration files to `.mjs`. This tells node to expect ESM for that particular file. Import statements targeting local files should be updated to include the file extension.
21+
22+
### Importing CommonJS files
23+
24+
When importing some CJS packages you may no longer be able to access individual named exports directly. In this case you will need to import the full module. You can [desctructure](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) the module to keep the rest of your implementation the same.
25+
26+
```js
27+
// Partial import
28+
import { cp } from "shelljs";
29+
// Full namespace import
30+
import shelljs from "shelljs";
31+
const { cp } = shelljs;
32+
```
33+
34+
### __Dirname
35+
36+
In ESM files the `__dirname` variable is not available. Instead, you can access the current file's path using `import.meta.url`. Do note that this includes the `file:` protocol prefix. An easy way to work with the file's url is to use it as the [base value for the URL constructor](https://developer.mozilla.org/en-US/docs/Web/API/URL/URL#base). This will allow you to resolve a relative path from that path. For example `new URL("../", "file:/a/b/c.txt")` results in the URL `file:/a`.
37+
38+
```js
39+
// ESM equivalent of __dirname
40+
const dirname = new URL("./", import.meta.url).pathname;
41+
```
42+
43+
### Absense of require()
44+
45+
Also note that `require()` is unavailable in ESM files. A common usecase for rollup setups is accessing the package.json of a project. If this is a static location relative to the script, you may use a typed import. Otherwise, read the file from the file system and parse it as JSON.
46+
47+
```js
48+
// CJS method
49+
import { join } from "node:path";
50+
const packagePath = join(process.cwd(), "/package.json");
51+
const package = require(packagePath);
52+
53+
// ESM import with attributes
54+
import package from "../package.json" with { type: "json" }
55+
56+
// Dynamic import with attributes
57+
const package = await import(packagePath, { with: { type: "json" }})
58+
59+
// Read file and parse (async version with fs.readFile)
60+
import { readFileSync } from "node:fs"
61+
const package = JSON.parse(readFileSync(packagePath))
62+
```
63+
64+

0 commit comments

Comments
 (0)