Export as ES module#652
Open
shirte wants to merge 15 commits into
Open
Conversation
To avoid interfering with unit tests in the Dockerfile, the ES version is generated alongside the original CommonJS version.
Provide entrypoints for CommonJS (suitable for old code) and ES (modern
javascript).
Use top-level await in the ES version to enable the user to import the
RDKit object using `import {RDKit } from "@rdkit/rdkit"`. Since CommonJS
doesn't allow top-level await, the corresponding entrypoint skips this.
Use typescript files (ts) to combine .js & .d.ts files and therefore
simplify the wrapper code.
Move type declarations into this folder. Use a placeholder file for RDKit_minimal_esm.js to avoid errors in the code editor. When the webassembly wrapper is generated, it will overwrite the placeholder file. Add a gitignore file that avoids tracking generated files.
Move tsconfig.json to root directory. Create multiple tsconfig files for the CommonJS and ES entrypoints. Upgrade typescript to version 5 to support `import type * from ...`.
Use "file:../.." for the @rdkit/rdkit dependency to make sure that the local version will be used. This simplifies development and testing.
Avoid copying files from the rdkit-js dist directory (and let the bundler do that). Import initRDKitModule instead of using window.initRDKitModule. Simplify statements importing types from "@rdkit/rdkit".
Disable telemetry in nextjs example. This also avoids the error message "npm error This command does not support workspaces." when running "npm run dev". Avoid copying wasm files in nextjs configuration.
Add dependency @rdkit/rdkit (pointing to local version).
Demonstrate the new `import { RDKit } from "@rdkit/rdkit/es"` mechanism
and simplify the RDKit loading procedure.
Remove unused dependency bulma-collapsible.
Add missing webpack dev dependency.
Add .gitignore file.
Rename example "vue" to "vue-example" to avoid conflicts when running `npm install` (since "vue" is also the name of the UI library).* Add missing dependency hex-rgb. Import initRDKitModule instead of using window.initRDKitModule. Simplify type import statements.
Setting rdkitLoaded to true and calling draw() afterwards lead to a race condition, because setState already rerenders the UI. Removing the draw() call simplifies the code and avoids the warning in the console.
|
@shirte is attempting to deploy a commit to the Valence Labs Team on Vercel. A member of the Team first needs to authorize it. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The aim of this pull request was to enable importing rdkit-js with modern ES syntax:
The code in this package was simplified by combining code and types in typescript files. These files are compiled via tsup to a CommonJS module (for legacy projects) as well as a ES module (see
tsup.config.ts). The package.json file specifies which version is served.The ES version does not write initRDKitModule to the global window object and it does not require copying wasm files (e.g. see changes in the nextjs example). Also it allows importing RDKit directly without going through a complicated initialization routine:
The path "@rdkit/rdkit/es" is used for backwards compatibility. Also, if the bundler doesn't support top-level await, rdkit-js can still be imported using the normal import path "@rdkit/rdkit". The react example project was adapted to demonstrate the resulting benefits.
Building the webassembly wrapper with the Dockerfile doesn't work for the 2026 releases anymore (also without the changes in this pull request). Building older RDKit versions still works:
Minor fixes:
export type * from ...