Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: document type-specific module aliases #40004

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
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