Esm modules fix #1677
Esm modules fix #1677
Conversation
✅ Deploy Preview for fdc3 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Currently this PR successfully builds all packages but it does not run the demo app when The I still need to get the demo server working correctly but I ran out of time today. |
|
I imagine this PR will be a merge nightmare as it has touched so many files.... I don't know what the best way to deal with that will be. |
I don't think it will be that bad as most of the changes are in the imports into files. It would pick up conflicts with new additions, but won't with many other PRs. Regardless, we should try and get this done and merged ASAP. @hughtroeger has offered to try and get this tested as a solution for @enewsome's issue #1609 However, the tests / cucumber see quite unhappy with the change and need further work. The SAST scan failing is down to the rename of a script file that needs to be in .semgrepignore here: Lines 4 to 5 in 16100f5 |
|
yes I think that the tests will be an issue. Converting to ESM is usually fairly painless other than things liks jest / karma / webpack / ts-node. I have already replaced ts-node with tsx as it's much happier with esm but have no idea how hard it will be to convince the testing framework to work - especially as I have no experience with this test runner. |
|
I've spent a bit more time on this today and it's not good news I am afraid.... This could end up being a much bigger job that we first thought. |
|
I have confirmed that the fixes that I have put into this PR so far have fixed my issues when trying to run vitest in my local app. This is the case where my lib depends on The fix is good.... we "just" need to get the rest of the tooling in the mono repo working in an esm environment. |
Many thanks for your work on this issue @Roaders! @hughtroeger and @enewsome it would be worth confirming if this branch resolves some of your issues... @Roaders which tooling most needs looking at?
|
|
Also want to express thanks for working on this @Roaders. We will test the changes in this PR and get back to you shortly. |
|
I'm afraid that to test it you're going to have to check it out locally and build it locally then install each of the built packages one by one in your app. This worked for me. It's the tests that are not working in the PR. |
Roaders
force-pushed
the
esm-modules-fix
branch
2 times, most recently
from
2ec636c to
e9f62f0
Compare
Roaders
force-pushed
the
esm-modules-fix
branch
from
e9f62f0 to
6ae93bb
Compare
|
|
|
this pr now switches all of the testing over to vitest. It seems much faster to me, is a much more "standard" testing setup and works with esm. jest has been completely removed and nyc has been removed from most places. It is still used in the root package.json to generate a report. I guess we could probably do that another way but I'm not sure what it's doing so I didn't want to touch that. |
| }); | ||
|
|
||
| setupGenericSteps(); | ||
| // Inlined generic steps from @finos/testing (migrated to quickpickle) |
There was a problem hiding this comment.
ok, we don't want to do this.....
|
|
||
| export class CustomWorld extends PropsWorld { | ||
| messaging: TestMessaging | null = null; | ||
| export interface CustomWorldInterface extends QuickPickleWorldInterface { |
There was a problem hiding this comment.
we are no longer extending PropsWorld here....
| // for testing app launch timeouts the Mock server sets a 2 second timeout | ||
| // if that is ignored it defaults to 100 seconds so test should timeout and catch that | ||
| async function (this: CustomWorld, appId: string, field: string) { | ||
| async (world: CustomWorld, appId: string, field: string) => { |
There was a problem hiding this comment.
we are no longer setting the 3 second timeout here
There was a problem hiding this comment.
where has this file come from?
| }, | ||
| }); | ||
| }); | ||
|
|
There was a problem hiding this comment.
put back this commented code
|
|
||
| export class CustomWorld extends PropsWorld { | ||
| mockFDC3Server: MockFDC3Server | null = null; | ||
| export interface CustomWorldInterface extends QuickPickleWorldInterface { |
There was a problem hiding this comment.
no longer extending PropsWorld
| "files": ["dist"], | ||
| "scripts": { | ||
| "build": "tsc", | ||
| "test": "vitest run", |
| "build": "tsc", | ||
| "test": "vitest run", | ||
| "test:watch": "vitest", | ||
| "test:coverage": "vitest run --coverage", |
There was a problem hiding this comment.
we can probably get rid of this script as coverage is calculated normally
There was a problem hiding this comment.
remove BrowserTypes as it should not have changed
| "import": "./dist/src/index.js", | ||
| "require": "./dist/src/index.js" | ||
| }, | ||
| "./dist/src/agent": { |
There was a problem hiding this comment.
do we need these additional exports?
| world.server.shutdown(); | ||
| }); | ||
|
|
||
| // Inlined generic steps from @finos/testing (migrated to quickpickle) |
There was a problem hiding this comment.
we don't want to do this
| "nyc": "17.1.0", | ||
| "prettier": "3.4.1" | ||
| "tsx": "^4.20.5", | ||
| "pixelmatch": "^5.3.0", |
There was a problem hiding this comment.
what is pixelmatch for?
There was a problem hiding this comment.
Pull request overview
This PR migrates the FDC3 repository to proper ESM (ECMAScript Module) support by addressing module format issues in published packages. The changes enable Node.js and ESM-consuming applications to properly import FDC3 packages without bundler magic.
Changes:
- Updated TypeScript compiler settings from CommonJS to NodeNext module resolution
- Added
"type": "module"to package.json files to mark packages as ESM - Added
.jsextensions to all relative imports to comply with ESM requirements - Migrated test framework from Jest/Cucumber to Vitest/Quickpickle for ESM compatibility
- Fixed code generation utilities and import attribute syntax
Reviewed changes
Copilot reviewed 199 out of 204 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| tsconfig.root.json | Updated module and moduleResolution to NodeNext for ESM support |
| packages/*/package.json | Added "type": "module" and updated build/test scripts |
| packages//src/**/.ts | Added .js extensions to relative imports for ESM compliance |
| toolbox/fdc3-workbench/src/**/*.tsx | Added .js extensions and fixed import formatting |
| packages//test/**/.ts | Migrated tests from Jest/Cucumber to Vitest/Quickpickle |
| packages/fdc3-schema/s2tQuicktypeUtil.cjs | Renamed from .js to .cjs for proper CommonJS identification |
| packages/fdc3-standard/src/api/Channel.ts | Fixed trailing whitespace issue |
| toolbox/fdc3-workbench/src/App.tsx | Added CSS import attribute syntax |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| import { Intents } from './components/Intents.js'; | ||
| import { AppChannels } from './components/AppChannels.js'; | ||
| import snackbarStore from './store/SnackbarStore.js'; | ||
| import './App.css' with { type: 'css' }; |
There was a problem hiding this comment.
Import attributes using with syntax are experimental and not yet standardized. For CSS imports in TypeScript/JavaScript applications, the standard approach is to use regular imports without attributes. Most bundlers (webpack, vite, etc.) handle CSS imports without the with { type: 'css' } syntax. This syntax is only needed for JSON modules and may not be supported by all tooling.
| import * as draft7MetaSchema from 'ajv/dist/refs/json-schema-draft-07.json'; | ||
| import addFormats from 'ajv-formats'; | ||
| import * as AjvModule from 'ajv/dist/2019.js'; | ||
| import * as draft7MetaSchema from 'ajv/dist/refs/json-schema-draft-07.json' with { type: 'json' }; |
There was a problem hiding this comment.
While JSON import attributes are part of the import attributes proposal, they require specific bundler/runtime support. Consider loading JSON files using fs.readFileSync and JSON.parse for better compatibility across different environments, especially for published packages that need to work in various contexts.
| // used to debug tests not ending - only available as a commonJs module | ||
| // eslint-disable-next-line @typescript-eslint/no-require-imports | ||
| const wtf = require('wtfnode'); | ||
| import wtf from 'wtfnode'; |
There was a problem hiding this comment.
The wtfnode import has been changed from require to ES import. Ensure that wtfnode is properly exported as an ES module. If it's a CommonJS-only package, you may need to use import * as wtf from 'wtfnode' or continue using dynamic import/require for compatibility.
| TypeAliasDeclaration, | ||
| } from 'ts-morph'; | ||
| import print from 'message-await'; | ||
| import messageAwait, { MessageAwait } from 'message-await'; |
There was a problem hiding this comment.
Unused import MessageAwait.
| @@ -1,4 +1,5 @@ | |||
| import { mock } from 'jest-mock-extended'; | |||
| import { vi, beforeEach, beforeAll, afterAll, describe, test, expect } from 'vitest'; | |||
There was a problem hiding this comment.
Unused import beforeAll.
| import { codeExamples } from '../fixtures/codeExamples'; | ||
| import { openApiDocsLink } from '../fixtures/openApiDocs'; | ||
| import { ContextTemplates } from './ContextTemplates.js'; | ||
| import { ContextType, Fdc3Listener } from '../utility/Fdc3Api.js'; |
There was a problem hiding this comment.
Unused import Fdc3Listener.
Describe your change
This is an initial attempt to fis the module formats of the libraries published from this repo. I think that the current issues with the published packages are:
module- this means that node does not know that it should treat the files as mjs rather than cjsNodeNextwhich means that we do not specify extensions on our imports and esm consuming apps will not be able to consume the files (unless bundler magic deals with this which I think webpack and angular build systems do)To fix these issues this PR:
"type": "module"Related Issue
fixes #1609
Contributor License Agreement
Review Checklist
DesktopAgent,Channel,PrivateChannel,Listener,Bridging)?JSDoc comments on interfaces and types should be matched to the main documentation in /docs
Conformance test definitions should cover all required aspects of an FDC3 Desktop Agent implementation, which are usually marked with a MUST keyword, and optional features (SHOULD or MAY) where the format of those features is defined
The Web Connection protocol and Desktop Agent Communication Protocol schemas must be able to support all necessary aspects of the Desktop Agent API, while Bridging must support those aspects necessary for Desktop Agents to communicate with each other
npm run build) run and the results checked in?Generated code will be found at
/src/api/BrowserTypes.tsand/or/src/bridging/BridgingTypes.tsBaseContextschema applied viaallOf(as it is in existing types)?titleanddescriptionprovided for all properties defined in the schema?npm run build) run and the results checked in?Generated code will be found at
/src/context/ContextTypes.tsTHIS SOFTWARE IS CONTRIBUTED SUBJECT TO THE TERMS OF THE FINOS CORPORATE CONTRIBUTOR LICENSE AGREEMENT.
THIS SOFTWARE IS LICENSED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE AND ANY WARRANTY OF NON-INFRINGEMENT, ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. THIS SOFTWARE MAY BE REDISTRIBUTED TO OTHERS ONLY BY EFFECTIVELY USING THIS OR ANOTHER EQUIVALENT DISCLAIMER IN ADDITION TO ANY OTHER REQUIRED LICENSE TERMS.