From db8ee5352bfc9316ec17bcc119ccd72e59d55e12 Mon Sep 17 00:00:00 2001 From: Hyeseong Kim Date: Thu, 11 Apr 2024 23:22:53 +0900 Subject: [PATCH] ES6 -> JavaScript module with `"module": "esmodule"` As follows https://github.com/rescript-lang/rescript-compiler/pull/6709 --- data/api/latest/js.json | 20 ++++----- misc_docs/syntax/decorator_module.mdx | 2 +- pages/docs/manual/latest/array-and-list.mdx | 2 +- .../manual/latest/build-configuration.mdx | 9 ++-- .../latest/build-pinned-dependencies.mdx | 2 +- .../latest/import-from-export-to-js.mdx | 42 +++++++++---------- pages/docs/manual/latest/installation.mdx | 2 +- .../manual/latest/typescript-integration.mdx | 4 +- pages/docs/react/latest/styling.mdx | 8 ++-- pages/docs/react/v0.10.0/styling.mdx | 8 ++-- pages/docs/react/v0.11.0/styling.mdx | 8 ++-- src/Playground.res | 2 +- src/bindings/RescriptCompilerApi.res | 4 +- src/common/CompilerManagerHook.res | 4 +- 14 files changed, 59 insertions(+), 58 deletions(-) diff --git a/data/api/latest/js.json b/data/api/latest/js.json index c9b052ef9..77c645d63 100644 --- a/data/api/latest/js.json +++ b/data/api/latest/js.json @@ -9057,8 +9057,8 @@ "id": "Js.WeakMap", "name": "WeakMap", "docstrings": [ - "Provides bindings for ES6 WeakMap", - "ES6 WeakMap API" + "Provides bindings for JavaScript WeakMap", + "WeakMap API" ], "items": [ { @@ -9074,8 +9074,8 @@ "id": "Js.Map", "name": "Map", "docstrings": [ - "Provides bindings for ES6 Map", - "ES6 Map API" + "Provides bindings for JavaScript Map", + "Map API" ], "items": [ { @@ -9091,8 +9091,8 @@ "id": "Js.WeakSet", "name": "WeakSet", "docstrings": [ - "Provides bindings for ES6 WeakSet", - "ES6 WeakSet API" + "Provides bindings for JavaScript WeakSet", + "WeakSet API" ], "items": [ { @@ -9108,8 +9108,8 @@ "id": "Js.Set", "name": "Set", "docstrings": [ - "Provides bindings for ES6 Set", - "ES6 Set API" + "Provides bindings for JavaScript Set", + "Set API" ], "items": [ { @@ -10138,7 +10138,7 @@ "kind": "type", "name": "symbol", "docstrings": [ - "Js symbol type (only available in ES6)" + "Js symbol type" ], "signature": "type symbol" }, @@ -14984,4 +14984,4 @@ } ] } -} \ No newline at end of file +} diff --git a/misc_docs/syntax/decorator_module.mdx b/misc_docs/syntax/decorator_module.mdx index 2de83b0b4..19fbe7c83 100644 --- a/misc_docs/syntax/decorator_module.mdx +++ b/misc_docs/syntax/decorator_module.mdx @@ -33,7 +33,7 @@ var root = Path.dirname("/User/github"); `@module` also supports [import attributes](https://github.com/tc39/proposal-import-attributes). It looks like this: - + ```rescript @module({from: "./myJson.json", with: {type_: "json", \"some-exotic-identifier": "someValue"}}) external myJson: Js.Json.t = "default" diff --git a/pages/docs/manual/latest/array-and-list.mdx b/pages/docs/manual/latest/array-and-list.mdx index 3af8df087..c411fe964 100644 --- a/pages/docs/manual/latest/array-and-list.mdx +++ b/pages/docs/manual/latest/array-and-list.mdx @@ -122,7 +122,7 @@ var x3 = Belt_Array.concatMany([y]); ``` -> Note that array spreads compiles to `Belt.Array.concatMany` right now. This is likely to change to native ES6 array spreads in the future. +> Note that array spreads compiles to `Belt.Array.concatMany` right now. This is likely to change to native array spreads in the future. ## List diff --git a/pages/docs/manual/latest/build-configuration.mdx b/pages/docs/manual/latest/build-configuration.mdx index 1588948a7..0df749bcf 100644 --- a/pages/docs/manual/latest/build-configuration.mdx +++ b/pages/docs/manual/latest/build-configuration.mdx @@ -122,7 +122,7 @@ The command itself is called from inside `lib/bs`. ## package-specs -Output to either CommonJS (the default) or ES6 modules. Example: +Output to either CommonJS (the default) or JavaScript module. Example: ```json { @@ -133,7 +133,8 @@ Output to either CommonJS (the default) or ES6 modules. Example: } ``` -- `"module": "es6-global"` resolves `node_modules` using relative paths. Good for development-time usage of ES6 in conjunction with browsers like Safari and Firefox that support ES6 modules today. **No more dev-time bundling**! +- `"module": "commonjs"` generates output as CommonJS format. +- `"module": "esmodule"` generates output as JavaScript module format. Will be default value in next major. - `"in-source": true` generates output alongside source files. If you omit it, it'll generate the artifacts into `lib/js`. The output directory is not configurable otherwise. This configuration only applies to you, when you develop the project. When the project is used as a third-party library, the consumer's own `rescript.json` `package-specs` overrides the configuration here, logically. @@ -198,7 +199,7 @@ To enable genType, set `"gentypeconfig"` at top level in the project's `rescript ```json { "gentypeconfig": { - "module": "es6", + "module": "esmodule", "moduleResolution": "node", "generatedFileExtension": ".gen.tsx", "debug": { @@ -211,7 +212,7 @@ To enable genType, set `"gentypeconfig"` at top level in the project's `rescript `generatedFileExtension`: File extension used for genType generated files (defaults to `".gen.tsx"`) -`module`: Module format used for the generated `*.gen.tsx` files (supports `"es6"` and `"commonjs"`) +`module`: Module format used for the generated `*.gen.tsx` files (supports `"esmodule"` and `"commonjs"`) `moduleResolution`: Module resolution strategy used in genType outputs. This may be required for compatibility with TypeScript projects. Specify the value as the same in `tsconfig.json`. diff --git a/pages/docs/manual/latest/build-pinned-dependencies.mdx b/pages/docs/manual/latest/build-pinned-dependencies.mdx index beae17ce0..ebab8d179 100644 --- a/pages/docs/manual/latest/build-pinned-dependencies.mdx +++ b/pages/docs/manual/latest/build-pinned-dependencies.mdx @@ -31,7 +31,7 @@ The build system respects the following rules for each package type: - Builds dev dependencies - Builds pinned dependencies - Runs custom rules -- Package-specs like ES6/CommonJS overrides all its dependencies +- Package-specs like JavaScript module or CommonJS overrides all its dependencies **Pinned dependencies** - Warnings reported diff --git a/pages/docs/manual/latest/import-from-export-to-js.mdx b/pages/docs/manual/latest/import-from-export-to-js.mdx index ce1db2110..fbfc50edf 100644 --- a/pages/docs/manual/latest/import-from-export-to-js.mdx +++ b/pages/docs/manual/latest/import-from-export-to-js.mdx @@ -8,7 +8,7 @@ canonical: "/docs/manual/latest/import-from-export-to-js" You've seen how ReScript's idiomatic [Import & Export](import-export.md) works. This section describes how we work with importing stuff from JavaScript and exporting stuff for JavaScript consumption. -**Note**: due to JS ecosystem's module compatibility issues, our advice of keeping your ReScript file's compiled JS output open in a tab applies here **more than ever**, as you don't want to subtly output the wrong JS module import/export code, on top of having to deal with Babel/Webpack/Jest/Node's CommonJS \<-> ES6 compatibility shims. +**Note**: due to JS ecosystem's module compatibility issues, our advice of keeping your ReScript file's compiled JS output open in a tab applies here **more than ever**, as you don't want to subtly output the wrong JS module import/export code, on top of having to deal with Babel/Webpack/Jest/Node's CommonJS \<-> JavaScript module compatibility shims. In short: **make sure your bindings below output what you'd have manually written in JS**. @@ -16,8 +16,8 @@ In short: **make sure your bindings below output what you'd have manually writte We support 2 JavaScript import/export formats: +- JavaScript module: `import * from 'MyReScriptFile'` and `export let ...`. - CommonJS: `require('myFile')` and `module.exports = ...`. -- ES6 modules: `import * from 'MyReScriptFile'` and `export let ...`. The format is [configurable in via `rescript.json`](build-configuration.md#package-specs). @@ -27,7 +27,7 @@ The format is [configurable in via `rescript.json`](build-configuration.md#packa Use the `module` [external](external.md): - + ```res example // Import nodejs' path.dirname @@ -35,11 +35,11 @@ Use the `module` [external](external.md): let root = dirname("/User/github") // returns "User" ``` ```js -var Path = require("path"); +import * as Path from "path"; var root = Path.dirname("/User/github"); ``` ```js -import * as Path from "path"; +var Path = require("path"); var root = Path.dirname("/User/github"); ``` @@ -57,30 +57,30 @@ Here's what the `external` does: By omitting the string argument to `module`, you bind to the whole JS module: - + ```res example @module external leftPad: (string, int) => string = "./leftPad" let paddedResult = leftPad("hi", 5) ``` ```js -var LeftPad = require("./leftPad"); +import * as LeftPad from "./leftPad"; var paddedResult = LeftPad("hi", 5); ``` ```js -import * as LeftPad from "./leftPad"; +var LeftPad = require("./leftPad"); var paddedResult = LeftPad("hi", 5); ``` -Depending on whether you're compiling ReScript to CommonJS or ES6 module, **this feature will generate subtly different code**. Please check both output tabs to see the difference. The ES6 output here would be wrong! +Depending on whether you're compiling ReScript to JavaScript module or CommonJS, **this feature will generate subtly different code**. Please check both output tabs to see the difference. The JavaScript module output here would be wrong! -### Import an ES6 Default Export +### Import an `default` Export -Use the value `"default"` on the right hand side: +Use the value `default` on the right hand side: - + ```res example @module("./student") external studentName: string = "default" @@ -97,9 +97,9 @@ var studentName = Student; **Since 11.1** -[Import attributes](https://github.com/tc39/proposal-import-attributes) can be used in ReScript, as long as ReScript is configured to output ES6. You do that by passing configuration to the `@module` attribute: +[Import attributes](https://github.com/tc39/proposal-import-attributes) can be used in ReScript, as long as ReScript is configured to output JavaScript module. You do that by passing configuration to the `@module` attribute: - + ```rescript @module({from: "./myJson.json", with: {type_: "json", \"some-exotic-identifier": "someValue"}}) external myJson: Js.Json.t = "default" @@ -141,7 +141,7 @@ let sub = (a, b) => a - b Now let's dynamically import the add function in another module, e.g. `App.res`: - + ```rescript // App.res let main = async () => { @@ -165,7 +165,7 @@ async function main() { ### Dynamically Importing an Entire Module The syntax for importing a whole module looks a little different, since we are operating on the module syntax level; instead of using `Js.import`, you may simply `await` the module itself: - + ```rescript // App.res let main = async () => { @@ -191,9 +191,9 @@ async function main() { As mentioned in ReScript's idiomatic [Import & Export](import-export.md), every let binding and module is exported by default to other ReScript modules (unless you use a `.resi` [interface file](module#signatures)). If you open up the compiled JS file, you'll see that these values can also directly be used by a _JavaScript_ file too. -### Export an ES6 Default Value +### Export a `default` Value -If your JS project uses ES6 modules, you're likely exporting & importing some default values: +If your JS project uses JavaScript module, you're likely exporting & importing some default values: ```js // student.js @@ -207,7 +207,7 @@ import studentName from 'student.js'; A JavaScript default export is really just syntax sugar for a named export implicitly called `default` (now you know!). So to export a default value from ReScript, you can just do: - + ```res example // ReScriptStudent.res @@ -218,7 +218,7 @@ var $$default = "Bob"; exports.$$default = $$default; exports.default = $$default; -// informal transpiler-compatible marker of a default export compiled from ES6 +// informal transpiler-compatible marker of a default export compiled from JavaScript module exports.__esModule = true; ``` ```js @@ -239,4 +239,4 @@ You can then import this default export as usual on the JS side: import studentName from 'ReScriptStudent.js'; ``` -If your JavaScript's ES6 default import is transpiled by Babel/Webpack/Jest into CommonJS `require`s, we've taken care of that too! See the CommonJS output tab for `__esModule`. +If your JavaScript's default import is transpiled by Babel/Webpack/Jest into CommonJS `require`s, we've taken care of that too! See the CommonJS output tab for `__esModule`. diff --git a/pages/docs/manual/latest/installation.mdx b/pages/docs/manual/latest/installation.mdx index dc3318b2a..8af2395fb 100644 --- a/pages/docs/manual/latest/installation.mdx +++ b/pages/docs/manual/latest/installation.mdx @@ -118,7 +118,7 @@ bun create rescript-app ], "package-specs": [ { - "module": "es6", + "module": "esmodule", "in-source": true } ], diff --git a/pages/docs/manual/latest/typescript-integration.mdx b/pages/docs/manual/latest/typescript-integration.mdx index 7b8f8967f..6b3fb27e1 100644 --- a/pages/docs/manual/latest/typescript-integration.mdx +++ b/pages/docs/manual/latest/typescript-integration.mdx @@ -132,7 +132,7 @@ The minimal configuration of genType is following: ```json { "gentypeconfig": { - "module": "es6", + "module": "esmodule", "moduleResolution": "node", "generatedFileExtension": ".gen.tsx" } @@ -153,7 +153,7 @@ And don't forget to make sure `allowJs` is set to `true` in the project's `tscon Make sure to set the same `moduleResolution` value in both `rescript.json` and `tsconfig.json`, so that the output of genType is done with the preferred module resolution. -For example if the TypeScript project uses ES Modules with `Node16` / `NodeNext` module resolution: +For example if the TypeScript project uses JavaScript modules with `Node16` / `NodeNext` module resolution: ```json // tsconfig.json diff --git a/pages/docs/react/latest/styling.mdx b/pages/docs/react/latest/styling.mdx index 9ec1c7544..ef2a0be86 100644 --- a/pages/docs/react/latest/styling.mdx +++ b/pages/docs/react/latest/styling.mdx @@ -45,11 +45,11 @@ let style = Use a `%%raw` expression to import CSS files within your ReScript / React component code: ```rescript -// in a CommonJS setup -%%raw("require('./styles/main.css')") - -// or with ES6 +// in a JS module setup %%raw("import './styles/main.css'") + +// or with CommonJS +%%raw("require('./styles/main.css')") ``` ## CSS Modules diff --git a/pages/docs/react/v0.10.0/styling.mdx b/pages/docs/react/v0.10.0/styling.mdx index 9ec1c7544..ef2a0be86 100644 --- a/pages/docs/react/v0.10.0/styling.mdx +++ b/pages/docs/react/v0.10.0/styling.mdx @@ -45,11 +45,11 @@ let style = Use a `%%raw` expression to import CSS files within your ReScript / React component code: ```rescript -// in a CommonJS setup -%%raw("require('./styles/main.css')") - -// or with ES6 +// in a JS module setup %%raw("import './styles/main.css'") + +// or with CommonJS +%%raw("require('./styles/main.css')") ``` ## CSS Modules diff --git a/pages/docs/react/v0.11.0/styling.mdx b/pages/docs/react/v0.11.0/styling.mdx index 9ec1c7544..ef2a0be86 100644 --- a/pages/docs/react/v0.11.0/styling.mdx +++ b/pages/docs/react/v0.11.0/styling.mdx @@ -45,11 +45,11 @@ let style = Use a `%%raw` expression to import CSS files within your ReScript / React component code: ```rescript -// in a CommonJS setup -%%raw("require('./styles/main.css')") - -// or with ES6 +// in a JS module setup %%raw("import './styles/main.css'") + +// or with CommonJS +%%raw("require('./styles/main.css')") ``` ## CSS Modules diff --git a/src/Playground.res b/src/Playground.res index 42b5a3547..df1b8bc75 100644 --- a/src/Playground.res +++ b/src/Playground.res @@ -1023,7 +1023,7 @@ module Settings = {
{React.string("Module-System")}
value} selected=config.module_system onChange=onModuleSystemUpdate diff --git a/src/bindings/RescriptCompilerApi.res b/src/bindings/RescriptCompilerApi.res index d0a1dbfa7..27c800493 100644 --- a/src/bindings/RescriptCompilerApi.res +++ b/src/bindings/RescriptCompilerApi.res @@ -431,8 +431,8 @@ module Compiler = { let setConfig = (t: t, config: Config.t): unit => { let moduleSystem = switch config.module_system { - | "nodejs" => #nodejs->Some - | "es6" => #es6->Some + | "commonjs" => #nodejs->Some + | "esmodule" => #es6->Some | _ => None } diff --git a/src/common/CompilerManagerHook.res b/src/common/CompilerManagerHook.res index 200ae76bc..1f850f732 100644 --- a/src/common/CompilerManagerHook.res +++ b/src/common/CompilerManagerHook.res @@ -407,12 +407,12 @@ let useCompilerManager = ( // Note: The compiler bundle currently defaults to // commonjs when initiating the compiler, but our playground - // should default to ES6. So we override the config + // should default to esmodule. So we override the config // and use the `setConfig` function to sync up the // internal compiler state with our playground state. let config = { ...instance->Compiler.getConfig, - module_system: "es6", + module_system: "esmodule", ?open_modules, } instance->Compiler.setConfig(config)