@witchcraft/nuxt-electron 0.0.12 → 0.2.0

package/README.md

@@ -11,9 +11,10 @@
 
 - :zap: Auto reloads/restarts electron on changes to the main/renderer code or nuxt server restarts.
 - :rocket: Api calls are proxied to the server.
-- :start: Route paths are not touched. Does not require static builds or changing baseURL/buildAssetsDir. 
+- :start: Rendering strategy isn't changed. Does not require static builds or changing baseURL/buildAssetsDir. 
 - :scissors: Trims server and non-electron routes from the electron bundle.
 - :open_file_folder: Modifies directory structure for easier multi-platform builds.
+- :snowflake: Nix Support - Playground contains an example flake for reproducible development and builds.
 - :hammer_and_wrench: Helpful Tools/Composables
 	- `isElectron` 
 	- Electron Only 
@@ -29,16 +30,43 @@
 
 # Playground
 
-There is a playground available but it only works locally due to electron.
+There is a playground with a comprehensive example, but it only works locally due to electron.
+
+To try it:
+
+```bash
+git clone https://github.com/witchcraftjs/nuxt-electron.git
+pnpm i
+cd nuxt-electron/playground
+pnpm build && pnpm build:electron:no-pack
+pnpm preview:electron:dev
+```
+You can also do: 
+```bash
+pnpm build
+pnpm build:electron:pack
+# in one tab
+pnpm preview
+# in another tab
+OVERRIDE_PUBLIC_SERVER_URL=http://localhost:3000 ./.dist/electron/release/linux-unpacked/your-app-name
+```
+
+If you're using nix the above should work in the dev shell. You can also do `nix run` but warning, this is like just building and doing `pnpm launch:electron` (see below).
 
 ## Install
 ```bash
 pnpx nuxi module add @witchcraft/nuxt-electron
 
 ```
-The library installs the @witchcraft/ui module to use it's css config and twMerge.
+### Components
+
+If using any of the provided components, they rely on the @witchcraft/ui module.
 
-If using the components, you should add the library to your tailwind css as a source:
+If not, ignore it.
+
+This module installs it to use it's css config and twMerge.
+
+All you need to do is add the electron module to your tailwind css as a source:
 ```css [assets/css/tailwind.css]
 @source "../../../.nuxt/witchcraft-electron.css";
 ```
@@ -47,22 +75,41 @@ If using the components, you should add the library to your tailwind css as a so
 
 A directory structure like the following is suggested:
 ```
-.dist/ (I prefer .dist over dist so it stays hidden and at the top)
-	├─ [platform]
-   ├─ .output (nuxt output)
-   ├─ release
-      ├─ ${productName}_${version}.${ext}
-   ├─ build (for any intermediate builds like electron's)
-app/ - nuxt code
-app-electron/ - contains all the main/renderer code
+[project root]
+├── .dist/ (I prefer .dist over dist so it stays hidden and at the top)/
+│   └── [platform]/
+│       ├── .output/ (nuxt output)
+│       ├── release/
+│       │   └── ${productName}_${version}.${ext}
+│       └── build/ (for any intermediate builds like electron's)
+├── app/ - nuxt code
+└── app-electron/ - contains all the main/renderer code
 ```
+The module sets it up like this when building electron, but not for the regular build. You should set that to go elsewhere if you're using it (though it's not required).
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+	nitro: {
+		output: {
+			dir: ".dist/web/.output",
+			serverDir: ".dist/web/.output/server",
+			publicDir: ".dist/web/.output/public"
+		}
+	}
+})
+```
+
 Usage of nuxt 4's new directory structure is recommended.
 
 For whatever electron builder you want to use, you must point it at the correct directories.
 
 For `electron-builder` with the default directories the module uses and to have all the artifacts in one folder, add:
 
-```
+
+<details>
+<summary>Electron Builder Config Example</summary>
+
+```json
 {
 	"directories": {
 		"output": ".dist/electron/release"
@@ -85,103 +132,122 @@ For `electron-builder` with the default directories the module uses and to have
 	},
 }
 ```
+</details>
 
 Add the following to the package.json:
-```jsonc
+
+<details>
+<summary>Package.json</summary>
+
+```json
 // package.json
 {
 	"main": ".dist/electron/build/main.cjs",
 	"scripts": {
 		"dev": "nuxi dev",
 		"build": "nuxi build",
-		"preview": "nuxt preview .dist/web",
+		"preview": "LOG_LEVEL=trace nuxt preview .dist/web",
 		"======= electron": "=======",
-		"dev:electron": "AUTO_OPEN=electron nuxi dev",
-		 // write a dev desktop file for linux, see below
-		"gen:dev:electron:desktop": "node node_modules/@witchcraft/nuxt-electron/genDevDesktop.js YOURAPPNAMEK",
-		 // for the desktop file
+		"dev:electron": "AUTO_OPEN=electron pnpm dev",
 		"launch:electron": "electron .",
-		"build:electron": "BUILD_ELECTRON=true nuxi build",
-		"build:electron:no-pack": "SKIP_ELECTRON_PACK=true BUILD_ELECTRON=true nuxi build",
-		"build:electron:pack": "electron-builder",
-		"preview:electron": "concurrrently --kill-others \" npm run preview\" \"npm run launch:electron\""
+		"launch:electron:dev": "LOG_LEVEL=trace OVERRIDE_PUBLIC_SERVER_URL=http://localhost:3000 electron .",
+		"build:electron": "BUILD_ELECTRON=true pnpm build",
+		"build:electron:pack": "APP_VERSION=0.0.0 electron-builder",
+		"build:electron:no-pack": "APP_VERSION=0.0.0 SKIP_ELECTRON_PACK=true BUILD_ELECTRON=true nuxi build",
+		// write a dev desktop file for linux, see below
+		"preview:electron:dev": "concurrently --kill-others \"pnpm preview\" \"sleep 2 && pnpm launch:electron:dev\"",
+		"gen:dev:electron:desktop": "node node_modules/@witchcraft/nuxt-electron/genDevDesktop.js YOURAPPNAME",
 	}
 }
 ```
+</details>
+
+#### To Develop
 
+Run `pnpm dev:electron`. This will both launch nuxt and open electron.
+
+Alternatively, run the server and electron seperately:
+
+Run `pnpm dev` to start the nuxt dev server. The dev version of the app will be written to `.dist/electron/build/main.cjs`.
+
+In a seperate terminal run `pnpm launch:electron` to start the electron app (this will do `electron .` which will run the configured `main` property, aka `.dist/electron/build/main.cjs`).
+
+##### Notes
 By default the module will not open electron. You must set `process.env.AUTO_OPEN` to include the string `electron` or set `autoOpen `in the options to true, hence the seperate `dev:electron` script.
 
 The idea is if you use other platform modules as well, you'd do `AUTO_OPEN=electron,android`, etc. for each module you wanted to actually have auto open.
 
-Note that `preview:electron` requires `preview` be run at the same time to see how the `/api` route gets correctly proxied (to localhost in this case, see `main.ts` code below for how this is accomplished). In production, as configured below, `PUBLIC_SERVER_URL` will do nothing.
+#### To Build
 
-```jsonc
-{
-	"scripts": {
-		"preview:electron:dev": "concurrrently --kill-others \" npm run dev\" \"PUBLIC_SERVER_URL=http://localhost:3000 electron .\"",
-		"preview:electron:prod": "electron .\""
+Build the regular nuxt app with `pnpm build` then build the electron app with `pnpm build:electron` or `pnpm build:electron:no-pack` (if you just want to test, you can skip the packing).
 
-	}
-}
-```
+In this case, the build written to `.dist/electron/build/main.cjs` is the **production** build.
+
+To run the built production server and the production app proxied to this server, use `pnpm preview:electron:dev`.
+
+Alternatively...
+
+You can run `pnpm launch:electron` to launch the production build in nearly exactly as a user would.
+
+CAREFUL though, **this will proxy api requests to the real server**.
+
+If you want to test against the local server build, run it with `pnpm preview` then run the app with `pnpm launch:electron:dev`.
+
+If you use the example code, it allows `OVERRIDE_PUBLIC_SERVER_URL` which allows the app to override which server the app proxies to and that's what the script is setting to allow this.
 
-### Electron Files
+You can handle this different if you want and *not* allow overriding the server url. Up to you. See below.
+
+### Files
 
 In main to get the correct paths during build and dev, use the `getPaths` helper.
 
 To get the dev user data dir, use the `useDevDataDir` helper.
 
-We also need to create the nuxt `file://` protocol handler for every window and configure the proxies for server calls.
- 
-```ts
-// main.ts
+We also need to create the nuxt `app://` protocol handler for every window and configure the proxies for server calls.
 
-import { getPaths, useDevDataDir, createNuxtFileProtocolHandler } from "@witchcraft/nuxt-electron/electron"
 
-const paths = getPaths()
-const userDataDir = useDevDataDir() ?? app.getPath("userData")
+See full example in [main.ts](https://github.com/witchcraftjs/nuxt-electron/blob/master/playground/app-electron/main.ts).
 
-// when creating a window later 
-const win = new BrowserWindow({
-	title: "...",
-	webPreferences: {
-		preload: paths.preloadPath
-	}
-})
 
-// proxy /api requests to the real server 
-const proxies = {
-	"/api": paths.publicServerUrl,
-}
-
-// for every session partition 
-createNuxtFileProtocolHandler(win.webContents.session, paths.nuxtDir, proxies)
-await win.loadURL(paths.windowUrl)
-```
+For the nuxt config, here's the minimum you need, the one in the playground contains additional options for testing and debugging:
 
+<details>
+<summary>nuxt.config.ts</summary>
+	
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
 	modules: [
 		"@witchcraft/nuxt-electron",
+		/** Optional */
+		"@witchcraft/ui",
+		/** Optional */
+		"@witchcraft/nuxt-logger",
 	],
+			dir: ".dist/web/.output",
+			serverDir: ".dist/web/.output/server",
+			publicDir: ".dist/web/.output/public"
+		},
+	},
 	electron: {
 		additionalElectronVariables: {
-			// required for getPaths to work in production, see it for details
-			publicServerUrl: process.env.NODE_ENV === "production" 
-			? `"mysite.com"` 
-			: `undefined`
-		}
+			// this will hardcode `process.env.PUBLIC_SERVER_URL` to the server url in production
+			// this means getPaths().publicServerUrl will always return your site url (see getPaths) unless you allow getPaths an override (see it for details)
+			publicServerUrl: process.env.NODE_ENV === "production"
+			// note the quotes for strings! this is a literal replacement that happens
+			// you also cannot access process.env dynamically if you want this to work (e.g. process.env[name])
+				? `"https://yoursite.com"`
+				: `undefined`
+		},
+		// the module will set this to pre-render
+		// additionalRoutes: ["/other-page-prerendered"]
 	}
 })
 ```
-
-A full example, including usage with `@witchcraft/nuxt-logger` is available in the playground.
-
+</details>
 
 **NOTE: The proxies only work for api calls. They do not work for pages.**
 
-Proxying server only page routes seems possible but complicated because each route's resource calls must also be proxied. I don't think it's worth the pain. It's easier to make sure the electron app never accesses server only routes.
-
+Proxying server only page routes seems possible but complicated because each route's resource calls must also be proxied. I don't think it's worth the pain. It's easier to make sure the electron app never access server only routes.
 
 ### Runtime Config
 
@@ -212,12 +278,19 @@ An isomorphic logger is also available for electron, see [@witchcraft/nuxt-logge
 
 A script is provided for use with electron-builder to generate a dev desktop file for linux.
 
+This is useful for when registering deep links in the app as these require a desktop file to work on linux.
+
 It will create a desktop file named `dev-YOURAPPNAME.desktop`, put it in `~/.local/share/applications/` and re-install it with `xdg-desktop-menu un/install`.
 
-The desktop's exec is set to run bash, cd into the project dir and run `npm run launch:electron`. You can pass a second parameter to the script to use a different package.json script.
+The desktop's exec is set to run bash, cd into the project dir and run `pnpm launch:electron`. 
 
-This is useful for when registering deep links in the app as these require a desktop file to work on linux.
+You can pass a second parameter to the script to use a different package.json script.
 
+And a third parameter pointing to your config if it's not in one of the searched locations:
+
+- `electron-builder-config.js`
+- `electron-builder.json5`
+- `electron-builder.json`
 
 ## Misc Notes
 
@@ -240,17 +313,31 @@ First for production only changes, we run the nuxt config with a different env v
 
 Then we use a custom protocol to proxy requests and api calls.
 
-##### Custom `file://` Handler 
+##### Custom `app://` Handler 
+
+Electron uses the `file://` protocol by default to load all scripts/assets/etc. 
+
+Loading from files does not work well with the default nuxt config so we use use a custom protocol handler to intercept these requests and correctly route them so that we don't have to be changing nuxt's baseURL and buildAssetsDir.
+
+It is recommended to use a custom protocol instead of `file://`, so the example uses `app://`.
+
+Additionally to have as close to regular browser behavior, the host is set to `bundle`.
+
+So `getPaths` returns `app://bundle/path/to/file` for `windowUrl` in production.
+
+This is because using a `standard` protocol schema, paths like `/path/to/file` are resolved relative to the host as they are in the browser.
 
-Electron uses the `file://` protocol to load all scripts/assets/etc.
+Internally the protocol handler does the following:
 
-This does not work well with the default nuxt config so we use use a custom protocol handler to intercept all `file://` requests and correctly route them so that we don't have to be changing nuxt's baseURL and buildAssetsDir.
+- Checks the request is safe (does not try to escape the path given).
+- Reroutes proxy requests to the correct url.
+- Checks if the request exists as a file, if not, attempts to find the nested `index.html` file (e.g. `/some/path` will correctly load `/some/path/index.html`).
 
 ##### Electron Route
 In electron we want to point to a different route, `/{electronRoute}`, so we can trim other routes from the bundle. 
 
 To do this we prerender the `/{electronRoute}` route and point electron to `/{electronRoute}/index.html`. 
-	- This used to require changing baseURL and buildAssetsDir to "./" and "/" respectively, but with the new `file://` handler it now works perfectly.
+	- This used to require changing baseURL and buildAssetsDir to "./" and "/" respectively, but with the custom `app://` handler it should just work.
 
 We then need to remove unwanted routes from the bundle which are included regardless of whether they're used. So for the web app, remove electron routes, and for the electron app, remove web app routes. This is done through a nuxt hook in the nuxt config on production builds only.
 
@@ -266,7 +353,7 @@ A redirect from a page (e.i. `if (process.client && isElectron) { await navigate
 
 Building for electron requires lots of changes to the config. We can't just build for web then copy. So this module reroutes the output when building the web app (and reroutes it differently when building for electron (see directory sturcture above).
 
-The use out the nested .output is because nuxt preview will add this automatically even if we set a custom cwd. This was we can do `nuxt preview .dist/platform` though it might often not be of much help.
+The reason for the nested `.output` is so it doesn't overwrite the default one. We can also do `nuxt preview .dist/platform` though it's often not of much help.
 
 To build for electron you must set `process.env.BUILD_ELECTRON` to true, to do the configuration required to make the final output actually work with electron.
 

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "electron",
   "configKey": "electron",
-  "version": "0.0.12",
+  "version": "0.2.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -1,7 +1,7 @@
 import { crop } from '@alanscodelog/utils/crop';
 import { run } from '@alanscodelog/utils/run';
 import { defineNuxtModule, useLogger, createResolver, addComponentsDir, addTemplate, extendRouteRules, addImportsDir } from '@nuxt/kit';
-import { nuxtRemoveUneededPages, nuxtFileBasedRouting, nuxtRerouteOutputTo, createConstantCaseVariables } from '@witchcraft/nuxt-utils/utils';
+import { nuxtRemoveUneededPages, nuxtRerouteOutputTo, createConstantCaseVariables } from '@witchcraft/nuxt-utils/utils';
 import { defu } from 'defu';
 import fs from 'node:fs/promises';
 import path from 'node:path';
@@ -90,7 +90,7 @@ const module$1 = defineNuxtModule({
       logger.warn(`Missing electron scripts: ${[hasMainScript ? "" : "main.ts", hasPreloadScript ? "" : "preload.ts"].join(", ")}. Skipping electron build.`);
     }
     const isElectronBuild = process.env.BUILD_ELECTRON === "true" && hasScripts;
-    const skipElectronPack = process.env.SKIP_ELECTRON_PACK === "true";
+    const skipElectronPack = !isElectronBuild || process.env.SKIP_ELECTRON_PACK === "true";
     const autoOpen = !!(options.autoOpen && hasScripts && isDev);
     const useWatch = nuxt.options.dev;
     const devUserDataDir = options.devUserDataDir && await resolvePath(options.devUserDataDir, nuxt.options.alias);
@@ -159,11 +159,11 @@ const module$1 = defineNuxtModule({
       );
       const additionalElectronVariables = defu(
         options.additionalElectronVariables,
-        nuxt.options.electron.additionalElectronVariables
+        nuxt.options.electron === false ? {} : nuxt.options.electron.additionalElectronVariables
       );
       const additionalViteDefinesToCopy = [
         ...options.additionalViteDefinesToCopy,
-        ...nuxt.options.electron.additionalViteDefinesToCopy ?? []
+        ...nuxt.options.electron === false ? [] : nuxt.options.electron.additionalViteDefinesToCopy ?? []
       ];
       const copyFromVite = [
         "__NUXT_VERSION__",
@@ -183,9 +183,10 @@ const module$1 = defineNuxtModule({
           // on windows the backslashes in the paths must be double escaped
           electronRoute: electronRoute.replaceAll("\\", "\\\\"),
           electronProdUrl: electronProdUrl.replaceAll("\\", "\\\\"),
-          electronNuxtDir: electronNuxtDir.replaceAll("\\", "\\\\"),
-          electronNuxtPublicDir: electronNuxtPublicDir.replaceAll("\\", "\\\\"),
-          electronBuildDir: electronBuildDir.replaceAll("\\", "\\\\"),
+          // all paths muxt be made relative to the build dir where electron will launch from in production
+          electronNuxtDir: path.relative(electronBuildDir, relativeElectronDir).replaceAll("\\", "\\\\"),
+          electronNuxtPublicDir: path.relative(electronBuildDir, electronNuxtPublicDir).replaceAll("\\", "\\\\"),
+          electronBuildDir: path.relative(electronBuildDir, electronBuildDir).replaceAll("\\", "\\\\"),
           // ...options.additionalElectronVariables,
           // nuxt's runtimeConfig cannot be used in electron's main since it's built seperately
           // also we must stringify ourselves since escaped double quotes are not preserved in the final output :/
@@ -328,11 +329,21 @@ const module$1 = defineNuxtModule({
         }
       });
       nuxtRemoveUneededPages(nuxt, ["/", electronRoute, ...options.additionalRoutes]);
-      extendRouteRules(electronRoute, { ssr: false, prerender: true }, { override: true });
-      nuxt.options.router = defu(
-        nuxtFileBasedRouting().router,
-        nuxt.options.router ?? {}
-      );
+      nuxt.options.router.options ??= {};
+      nuxt.options.router.options.hashMode = false;
+      extendRouteRules(electronRoute + "/**", {
+        prerender: true
+      }, { override: true });
+      for (const route of options.additionalRoutes) {
+        extendRouteRules(route, {
+          prerender: true
+        }, { override: true });
+      }
+      nuxt.hook("prerender:routes", ({ routes }) => {
+        for (const route of ["/404.html"]) {
+          routes.add(route);
+        }
+      });
       nuxtRerouteOutputTo(nuxt, electronNuxtDir);
       nuxt.hook("close", async () => {
         logger.info(`Building Electron`);
@@ -361,7 +372,16 @@ const module$1 = defineNuxtModule({
       } else {
         logger.info(`Skipping Electron Build`);
       }
-      nuxtRerouteOutputTo(nuxt, nonElectronNuxtBuildDir);
+      const nuxtOutputDir = nuxt.options.nitro?.output?.dir;
+      if (nuxtOutputDir === void 0 || nuxtOutputDir === ".output") {
+        logger.warn(crop`Nitro output dir is not set or set to the default, it's suggested you set it to the following when using nuxt-electron:
+					nitro: {
+						output: ".dist/web/.output",
+						serverDir: ".dist/web/.output/server"
+						publicDir: ".dist/web/.output/public"
+					}
+				.`);
+      }
     }
     addImportsDir(resolve("runtime/utils"));
   }

package/dist/runtime/electron/createPriviledgedProtocolScheme.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Creates a protocol scheme to register as privileged with the following permissions (you can override them with the second parameter).
+ *
+ * Note this must be called before the app's ready event:
+ *
+ * ```ts
+ * protocol.registerSchemesAsPrivileged([
+ * 	createPrivilegedProtocolScheme("app")
+ * })
+ * ```
+ *
+ * ## Privileges
+ *
+ * Basically all except `bypassCSP` and `enableCORS`.
+ *
+ * - `standard`
+ * - `allowServiceWorkers`
+ * - `bypassCSP`
+ * - `corsEnabled`
+ * - `secure`
+ * - `supportFetchAPI`
+ * - `codeCache`
+ * - `stream`
+ */
+export declare function createPrivilegedProtocolScheme(protocolName: string, privileges?: Partial<Electron.CustomScheme["privileges"]>): Electron.CustomScheme;

package/dist/runtime/electron/createPriviledgedProtocolScheme.js

@@ -0,0 +1,16 @@
+export function createPrivilegedProtocolScheme(protocolName, privileges = {}) {
+  return {
+    scheme: protocolName,
+    privileges: {
+      bypassCSP: false,
+      corsEnabled: false,
+      stream: false,
+      standard: true,
+      secure: true,
+      supportFetchAPI: true,
+      allowServiceWorkers: true,
+      codeCache: true,
+      ...privileges
+    }
+  };
+}

package/dist/runtime/electron/createPrivilegedProtocolScheme.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Creates a protocol scheme to register as privileged with the following permissions (you can override them with the second parameter).
+ *
+ * Note this must be called before the app's ready event:
+ *
+ * ```ts
+ * protocol.registerSchemesAsPrivileged([
+ * 	createPrivilegedProtocolScheme("app")
+ * })
+ * ```
+ *
+ * ## Privileges
+ *
+ * Basically all except `bypassCSP` and `enableCORS`.
+ *
+ * - `standard`
+ * - `allowServiceWorkers`
+ * - `bypassCSP`
+ * - `corsEnabled`
+ * - `secure`
+ * - `supportFetchAPI`
+ * - `codeCache`
+ * - `stream`
+ */
+export declare function createPrivilegedProtocolScheme(protocolName: string, privileges?: Partial<Electron.CustomScheme["privileges"]>): Electron.CustomScheme;

package/dist/runtime/electron/createPrivilegedProtocolScheme.js

@@ -0,0 +1,16 @@
+export function createPrivilegedProtocolScheme(protocolName, privileges = {}) {
+  return {
+    scheme: protocolName,
+    privileges: {
+      bypassCSP: false,
+      corsEnabled: false,
+      stream: false,
+      standard: true,
+      secure: true,
+      supportFetchAPI: true,
+      allowServiceWorkers: true,
+      codeCache: true,
+      ...privileges
+    }
+  };
+}

package/dist/runtime/electron/createProxiedProtocolHandler.d.ts

@@ -0,0 +1,31 @@
+import type { Protocol } from "electron";
+export declare function createProxiedProtocolHandler(
+/** `protocol` or `session.protocol` depending on if you're using paritions with your windows or not, regular `protocol` only registers the handler for the default parition. */
+protocol: Protocol, protocolName: string | undefined, basePath: string, 
+/**
+ * If any route starts with one of these keys, it will get rerouted to the given value.
+ *
+ * At least `/api` should be added for a basic nuxt app to work correctly.
+ *
+ *
+ * ```ts
+ * routeProxies: {
+ * 	"/api": "http://localhost:3000/api",
+ * }
+ * ```
+ */
+routeProxies: Record<string, string>, { logger, errorPage }?: {
+    /**
+     * Optional logger. It's suggested you not pass this unless you're traceging in dev mode as a lot of requests can be made.
+     */
+    logger?: {
+        trace: (...args: any[]) => void;
+        error: (...args: any[]) => void;
+    };
+    /**
+     * The path to the error page. Defaults to "/404.html".
+     *
+     * The module forces nuxt to generate it as it's not rendered in build mode. This is only used for 404 errors. The 400 error for bad requests still just returns Bad Request for now. This might become more flexible in the future.
+     */
+    errorPage?: string;
+}): void;