Skip to content

Commit

Permalink
docs: document type-specific module aliases (#40004)
Browse files Browse the repository at this point in the history
Co-authored-by: trop[bot] <37223003+trop[bot]@users.noreply.github.com>
Co-authored-by: Erick Zhao <erick@hotmail.ca>
  • Loading branch information
trop[bot] and erickzhao committed Sep 27, 2023
1 parent 9c2984f commit 74f50e8
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 2 deletions.
17 changes: 17 additions & 0 deletions docs/tutorial/process-model.md
Original file line number Diff line number Diff line change
Expand Up @@ -228,6 +228,23 @@ channel with a renderer process using [`MessagePort`][]s. An Electron app can
always prefer the [UtilityProcess][] API over Node.js [`child_process.fork`][] API when
there is need to fork a child process from the main process.

## Process-specific module aliases (TypeScript)

Electron's npm package also exports subpaths that contain a subset of
Electron's TypeScript type definitions.

- `electron/main` includes types for all main process modules.
- `electron/renderer` includes types for all renderer process modules.
- `electron/common` includes types for modules that can run in main and renderer processes.

These aliases have no impact on runtime, but can be used for typechecking
and autocomplete.

```js title="Usage example"
const { app } = require('electron/main')
const { shell } = require('electron/common')
```

[window-mdn]: https://developer.mozilla.org/en-US/docs/Web/API/Window
[`MessagePort`]: https://developer.mozilla.org/en-US/docs/Web/API/MessagePort
[`child_process.fork`]: https://nodejs.org/dist/latest-v16.x/docs/api/child_process.html#child_processforkmodulepath-args-options
Expand Down
16 changes: 14 additions & 2 deletions docs/tutorial/tutorial-2-first-app.md
Original file line number Diff line number Diff line change
Expand Up @@ -222,14 +222,26 @@ with CommonJS module syntax:
- [app][app], which controls your application's event lifecycle.
- [BrowserWindow][browser-window], which creates and manages app windows.

:::info Capitalization conventions
<details><summary>Module capitalization conventions</summary>

You might have noticed the capitalization difference between the **a**pp
and **B**rowser**W**indow modules. Electron follows typical JavaScript conventions here,
where PascalCase modules are instantiable class constructors (e.g. BrowserWindow, Tray,
Notification) whereas camelCase modules are not instantiable (e.g. app, ipcRenderer, webContents).

:::
</details>

<details><summary>Typed import aliases</summary>

For better type checking when writing TypeScript code, you can choose to import
main process modules from <code>electron/main</code>.

```js
const { app, BrowserWindow } = require('electron/main')
```

For more information, see the [Process Model docs](../tutorial/process-model.md#process-specific-module-aliases-typescript).
</details>

:::warning ES Modules in Electron

Expand Down

0 comments on commit 74f50e8

Please sign in to comment.