add support @nuxt/[email protected]

.gitignore

@@ -19,3 +19,7 @@ pnpm-lock.yaml
 # nuxtron dev output
 bin
 workspace
+
+# ide
+.vscode/
+.idea/

examples/_template/ts/main/background.ts

@@ -1,11 +1,8 @@
 import { app } from 'electron';
 import serve from 'electron-serve';
-import {
-  createWindow,
-  exitOnChange,
-} from './helpers';
+import { createWindow, exitOnChange } from './helpers';
 
-const isProd: boolean = process.env.NODE_ENV === 'production';
+const isProd: boolean = 'production' === process.env.NODE_ENV;
 
 if (isProd) {
   serve({ directory: 'app' });
@@ -19,7 +16,7 @@ if (isProd) {
 
   const mainWindow = createWindow('main', {
     width: 1000,
-    height: 600,
+    height: 600
   });
 
   if (isProd) {

examples/_template/ts/main/helpers/create-window.ts

@@ -1,79 +1,79 @@
-import {
-  screen,
-  BrowserWindow,
-  BrowserWindowConstructorOptions,
-  Rectangle,
-} from 'electron';
+import { BrowserWindow, BrowserWindowConstructorOptions, Rectangle, screen } from 'electron';
 import Store from 'electron-store';
 
 export default (windowName: string, options: BrowserWindowConstructorOptions): BrowserWindow => {
   const key = 'window-state';
   const name = `window-state-${windowName}`;
   const store = new Store({ name });
-  const defaultSize = {
-    width: options.width,
-    height: options.height,
+  const bounds = screen.getPrimaryDisplay().bounds;
+  const defaultSize: Rectangle = {
+    width: options.width ?? bounds.width,
+    height: options.height ?? bounds.height,
+    x: options.x ?? bounds.x,
+    y: options.y ?? bounds.y
   };
-  let state = {};
+
   let win: BrowserWindow;
 
-  const restore = () => store.get(key, defaultSize);
+  const restore = () => <Rectangle>store.get(key, defaultSize);
 
-  const getCurrentPosition = () => {
+  const getCurrentPosition = (): Rectangle => {
     const position = win.getPosition();
     const size = win.getSize();
     return {
       x: position[0],
       y: position[1],
       width: size[0],
-      height: size[1],
+      height: size[1]
     };
   };
 
   const windowWithinBounds = (windowState: Rectangle, bounds: Rectangle) => {
-    return (
-      windowState.x >= bounds.x &&
-      windowState.y >= bounds.y &&
-      windowState.x + windowState.width <= bounds.x + bounds.width &&
+    let test = true;
+
+    const items = [
+      windowState.x >= bounds.x,
+      windowState.y >= bounds.y,
+      windowState.x + windowState.width <= bounds.x + bounds.width,
       windowState.y + windowState.height <= bounds.y + bounds.height
-    );
+    ];
+
+    items.forEach(item => {
+      test = test && item;
+    });
+
+    return test;
   };
 
-  const resetToDefaults = () => {
+  const resetToDefaults = (): Rectangle => {
     const bounds = screen.getPrimaryDisplay().bounds;
     return Object.assign({}, defaultSize, {
       x: (bounds.width - defaultSize.width) / 2,
-      y: (bounds.height - defaultSize.height) / 2,
+      y: (bounds.height - defaultSize.height) / 2
     });
   };
 
   const ensureVisibleOnSomeDisplay = (windowState: Rectangle) => {
-    const visible = screen.getAllDisplays().some(display => {
-      return windowWithinBounds(windowState, display.bounds);
-    });
-    if (!visible) {
-      // Window is partially or fully not visible now.
-      // Reset it to safe defaults.
-      return resetToDefaults();
-    }
-    return windowState;
+    const visible = screen.getAllDisplays().some(display => windowWithinBounds(windowState, display.bounds));
+
+    // Window is partially or fully not visible now.
+    // Reset it to safe defaults.
+    return visible ? windowState : resetToDefaults();
   };
 
   const saveState = () => {
-    if (!win.isMinimized() && !win.isMaximized()) {
-      Object.assign(state, getCurrentPosition());
-    }
-    store.set(key, state);
+    const target = (!win.isMinimized() && !win.isMaximized()) ? Object.assign(state, getCurrentPosition()) : state;
+    store.set(key, target);
   };
 
-  state = ensureVisibleOnSomeDisplay(restore());
+  const state = ensureVisibleOnSomeDisplay(restore());
 
   const browserOptions: BrowserWindowConstructorOptions = {
-    ...options,
-    ...state,
+    ...options, ...state,
     webPreferences: {
       nodeIntegration: true,
-    },
+      contextIsolation: true
+    }
   };
   win = new BrowserWindow(browserOptions);
 

examples/_template/ts/main/helpers/exit-on-change.ts

@@ -1,6 +1,6 @@
+import { app } from 'electron';
 import { watchFile } from 'fs';
 import { join } from 'path';
-import { app } from 'electron';
 
 export default function exitOnChange(): void {
   watchFile(join(process.cwd(), 'app/background.js'), () => {

examples/_template/ts/main/helpers/index.ts

@@ -1,7 +1,4 @@
 import createWindow from './create-window';
 import exitOnChange from './exit-on-change';
 
-export {
-  createWindow,
-  exitOnChange,
-};
+export { createWindow, exitOnChange };

examples/with-typescript/package.json

@@ -7,19 +7,21 @@
   "main": "app/background.js",
   "scripts": {
     "dev": "nuxtron",
-    "build": "nuxtron build"
+    "build": "nuxtron build",
+    "postinstall": "electron-builder install-app-deps"
   },
   "dependencies": {
     "electron-serve": "^1.0.0",
     "electron-store": "^6.0.1"
   },
   "devDependencies": {
-    "@nuxt/typescript": "^2.8.1",
-    "@types/node": "^12.7.12",
-    "electron": "^10.1.5",
+    "@nuxt/types": "^2.14.9",
+    "@nuxt/typescript-build": "^2.0.3",
+    "@nuxt/typescript-runtime": "^2.0.0",
+    "core-js": "^3.8.0",
+    "electron": "^11.0.3",
     "electron-builder": "^22.9.1",
-    "nuxt": "^2.14.7",
-    "nuxtron": "^0.3.1",
-    "typescript": "^3.6.4"
+    "nuxt": "^2.14.9",
+    "nuxtron": "^0.3.1"
   }
 }

examples/with-typescript/renderer/assets/README.md

@@ -0,0 +1,7 @@
+# ASSETS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).

examples/with-typescript/renderer/components/Logo.vue

@@ -0,0 +1,26 @@
+<template lang='html'>
+  <svg class='NuxtLogo' height='180' viewBox='0 0 452 342' width='245' xmlns='http://www.w3.org/2000/svg'>
+    <path
+      d='M139 330l-1-2c-2-4-2-8-1-13H29L189 31l67 121 22-16-67-121c-1-2-9-14-22-14-6 0-15 2-22 15L5 303c-1 3-8 16-2 27 4 6 10 12 24 12h136c-14 0-21-6-24-12z'
+      fill='#00C58E' />
+    <path
+      d='M447 304L317 70c-2-2-9-15-22-15-6 0-15 3-22 15l-17 28v54l39-67 129 230h-49a23 23 0 0 1-2 14l-1 1c-6 11-21 12-23 12h76c3 0 17-1 24-12 3-5 5-14-2-26z'
+      fill='#108775' />
+    <path
+      d='M376 330v-1l1-2c1-4 2-8 1-12l-4-12-102-178-15-27h-1l-15 27-102 178-4 12a24 24 0 0 0 2 15c4 6 10 12 24 12h190c3 0 18-1 25-12zM256 152l93 163H163l93-163z'
+      fill='#2F495E' />
+  </svg>
+</template>
+
+<style lang='css'>
+.NuxtLogo {
+  animation: 1s appear;
+  margin: auto;
+}
+
+@keyframes appear {
+  0% {
+    opacity: 0;
+  }
+}
+</style>

examples/with-typescript/renderer/components/README.md

@@ -0,0 +1,7 @@
+# COMPONENTS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+The components directory contains your Vue.js Components.
+
+_Nuxt.js doesn't supercharge these components._

examples/with-typescript/renderer/layouts/README.md

@@ -0,0 +1,7 @@
+# LAYOUTS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your Application Layouts.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).

examples/with-typescript/renderer/layouts/default.vue

@@ -0,0 +1,59 @@
+<template lang='html'>
+  <div>
+    <Nuxt />
+  </div>
+</template>
+
+<style lang='css'>
+html {
+  box-sizing: border-box;
+  font-family: 'Source Sans Pro',
+  -apple-system,
+  BlinkMacSystemFont,
+  'Segoe UI',
+  Roboto,
+  'Helvetica Neue',
+  Arial,
+  sans-serif;
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  word-spacing: 1px;
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+}
+
+.button--green {
+  border: 1px solid #3b8070;
+  border-radius: 4px;
+  color: #3b8070;
+  display: inline-block;
+  padding: 10px 30px;
+  text-decoration: none;
+}
+
+.button--green:hover {
+  background-color: #3b8070;
+  color: #ffffff;
+}
+
+.button--grey {
+  border: 1px solid #35495e;
+  border-radius: 4px;
+  color: #35495e;
+  display: inline-block;
+  margin-left: 15px;
+  padding: 10px 30px;
+  text-decoration: none;
+}
+
+.button--grey:hover {
+  background-color: #35495e;
+  color: #ffffff;
+}
+</style>

examples/with-typescript/renderer/middleware/README.md

@@ -0,0 +1,8 @@
+# MIDDLEWARE
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your application middleware.
+Middleware let you define custom functions that can be run before rendering either a page or a group of pages.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware).

examples/with-typescript/renderer/nuxt.config.ts

@@ -0,0 +1,15 @@
+import { NuxtConfig } from '@nuxt/types';
+
+const config: NuxtConfig = {
+  head: {
+    title: 'Nuxtron (with-typescript)'
+  },
+  buildModules: ['@nuxt/typescript-build'],
+  build: {
+    extend: (config) => {
+      config.target = 'electron-renderer';
+    }
+  }
+};
+
+export default config;

examples/with-typescript/renderer/pages/README.md

@@ -0,0 +1,6 @@
+# PAGES
+
+This directory contains your Application Views and Routes.
+The framework reads all the `*.vue` files inside this directory and creates the router of your application.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing).