Merge branch 'release/v8'

.eslintignore

@@ -4,6 +4,3 @@ node_modules
 # nextron
 bin
 workspace
-
-# examples
-examples

.eslintrc.json

@@ -9,6 +9,7 @@
   "plugins": ["@typescript-eslint"],
   "rules": {
     "@typescript-eslint/no-unused-vars": "error",
-    "@typescript-eslint/no-explicit-any": "error"
+    "@typescript-eslint/no-explicit-any": "error",
+    "@next/next/no-html-link-for-pages": "off"
   }
 }

.prettierignore

@@ -4,6 +4,3 @@ node_modules
 # nextron
 bin
 workspace
-
-# examples
-examples

README.md

@@ -344,6 +344,24 @@ $ yarn create nextron-app my-app --example with-ant-design
 $ pnpm dlx create-nextron-app my-app --example with-ant-design
 ```
 
+### [examples/with-chakra-ui](./examples/with-chakra-ui)
+
+<p align="center">
+  <img src="https://i.imgur.com/oahHuxG.png">
+  <img src="https://i.imgur.com/sZ01Nyl.png">
+</p>
+
+```
+# with npx
+$ npx create-nextron-app my-app --example with-chakra-ui
+
+# with yarn
+$ yarn create nextron-app my-app --example with-chakra-ui
+
+# with pnpm
+$ pnpm dlx create-nextron-app my-app --example with-chakra-ui
+```
+
 ### [examples/with-emotion](./examples/with-emotion)
 
 <p align="center"><img src="https://i.imgur.com/3UKgyH7.png"></p>

examples/_template/js/main/background.js

@@ -1,32 +1,32 @@
-import { app } from 'electron';
-import serve from 'electron-serve';
-import { createWindow } from './helpers';
+import { app } from 'electron'
+import serve from 'electron-serve'
+import { createWindow } from './helpers'
 
-const isProd = process.env.NODE_ENV === 'production';
+const isProd = process.env.NODE_ENV === 'production'
 
 if (isProd) {
-  serve({ directory: 'app' });
+  serve({ directory: 'app' })
 } else {
-  app.setPath('userData', `${app.getPath('userData')} (development)`);
+  app.setPath('userData', `${app.getPath('userData')} (development)`)
 }
 
-(async () => {
-  await app.whenReady();
+;(async () => {
+  await app.whenReady()
 
   const mainWindow = createWindow('main', {
     width: 1000,
     height: 600,
-  });
+  })
 
   if (isProd) {
-    await mainWindow.loadURL('app://./home.html');
+    await mainWindow.loadURL('app://./home')
   } else {
-    const port = process.argv[2];
-    await mainWindow.loadURL(`http://localhost:${port}/home`);
-    mainWindow.webContents.openDevTools();
+    const port = process.argv[2]
+    await mainWindow.loadURL(`http://localhost:${port}/home`)
+    mainWindow.webContents.openDevTools()
   }
-})();
+})()
 
 app.on('window-all-closed', () => {
-  app.quit();
-});
+  app.quit()
+})

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

@@ -1,82 +1,78 @@
-import {
-  screen,
-  BrowserWindow,
-} from 'electron';
-import Store from 'electron-store';
+import { screen, BrowserWindow } from 'electron'
+import Store from 'electron-store'
 
-export default function createWindow(windowName, options) {
-  const key = 'window-state';
-  const name = `window-state-${windowName}`;
-  const store = new Store({ name });
+export const createWindow = (windowName, options) => {
+  const key = 'window-state'
+  const name = `window-state-${windowName}`
+  const store = new Store({ name })
   const defaultSize = {
     width: options.width,
     height: options.height,
-  };
-  let state = {};
-  let win;
+  }
+  let state = {}
 
-  const restore = () => store.get(key, defaultSize);
+  const restore = () => store.get(key, defaultSize)
 
   const getCurrentPosition = () => {
-    const position = win.getPosition();
-    const size = win.getSize();
+    const position = win.getPosition()
+    const size = win.getSize()
     return {
       x: position[0],
       y: position[1],
       width: size[0],
       height: size[1],
-    };
-  };
+    }
+  }
 
   const windowWithinBounds = (windowState, bounds) => {
     return (
       windowState.x >= bounds.x &&
       windowState.y >= bounds.y &&
       windowState.x + windowState.width <= bounds.x + bounds.width &&
       windowState.y + windowState.height <= bounds.y + bounds.height
-    );
-  };
+    )
+  }
 
   const resetToDefaults = () => {
-    const bounds = screen.getPrimaryDisplay().bounds;
+    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) => {
-    const visible = screen.getAllDisplays().some(display => {
+    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 resetToDefaults()
     }
-    return windowState;
-  };
+    return windowState
+  }
 
   const saveState = () => {
     if (!win.isMinimized() && !win.isMaximized()) {
-      Object.assign(state, getCurrentPosition());
+      Object.assign(state, getCurrentPosition())
     }
-    store.set(key, state);
-  };
+    store.set(key, state)
+  }
 
-  state = ensureVisibleOnSomeDisplay(restore());
+  state = ensureVisibleOnSomeDisplay(restore())
 
-  win = new BrowserWindow({
+  const win = new BrowserWindow({
     ...state,
     ...options,
     webPreferences: {
       nodeIntegration: true,
       contextIsolation: false,
       ...options.webPreferences,
     },
-  });
+  })
 
-  win.on('close', saveState);
+  win.on('close', saveState)
 
-  return win;
-};
+  return win
+}

examples/_template/js/main/helpers/index.js

@@ -1,5 +1 @@
-import createWindow from './create-window';
-
-export {
-  createWindow,
-};
+export * from './create-window'

examples/_template/ts/main/background.ts

@@ -1,32 +1,32 @@
-import { app } from 'electron';
-import serve from 'electron-serve';
-import { createWindow } from './helpers';
+import { app } from 'electron'
+import serve from 'electron-serve'
+import { createWindow } from './helpers'
 
-const isProd: boolean = process.env.NODE_ENV === 'production';
+const isProd: boolean = process.env.NODE_ENV === 'production'
 
 if (isProd) {
-  serve({ directory: 'app' });
+  serve({ directory: 'app' })
 } else {
-  app.setPath('userData', `${app.getPath('userData')} (development)`);
+  app.setPath('userData', `${app.getPath('userData')} (development)`)
 }
 
-(async () => {
-  await app.whenReady();
+;(async () => {
+  await app.whenReady()
 
   const mainWindow = createWindow('main', {
     width: 1000,
     height: 600,
-  });
+  })
 
   if (isProd) {
-    await mainWindow.loadURL('app://./home.html');
+    await mainWindow.loadURL('app://./home')
   } else {
-    const port = process.argv[2];
-    await mainWindow.loadURL(`http://localhost:${port}/home`);
-    mainWindow.webContents.openDevTools();
+    const port = process.argv[2]
+    await mainWindow.loadURL(`http://localhost:${port}/home`)
+    mainWindow.webContents.openDevTools()
   }
-})();
+})()
 
 app.on('window-all-closed', () => {
-  app.quit();
-});
+  app.quit()
+})

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

@@ -1,75 +1,74 @@
 import {
   screen,
   BrowserWindow,
-} from 'electron';
-import Store from 'electron-store';
-
-import type {
   BrowserWindowConstructorOptions,
-  Rectangle
-} from "electron";
+  Rectangle,
+} 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<Rectangle>({ name });
+export const createWindow = (
+  windowName: string,
+  options: BrowserWindowConstructorOptions
+): BrowserWindow => {
+  const key = 'window-state'
+  const name = `window-state-${windowName}`
+  const store = new Store<Rectangle>({ name })
   const defaultSize = {
     width: options.width,
     height: options.height,
-  };
-  let state = {};
-  let win;
+  }
+  let state = {}
 
-  const restore = () => store.get(key, defaultSize);
+  const restore = () => store.get(key, defaultSize)
 
   const getCurrentPosition = () => {
-    const position = win.getPosition();
-    const size = win.getSize();
+    const position = win.getPosition()
+    const size = win.getSize()
     return {
       x: position[0],
       y: position[1],
       width: size[0],
       height: size[1],
-    };
-  };
+    }
+  }
 
   const windowWithinBounds = (windowState, bounds) => {
     return (
       windowState.x >= bounds.x &&
       windowState.y >= bounds.y &&
       windowState.x + windowState.width <= bounds.x + bounds.width &&
       windowState.y + windowState.height <= bounds.y + bounds.height
-    );
-  };
+    )
+  }
 
   const resetToDefaults = () => {
-    const bounds = screen.getPrimaryDisplay().bounds;
+    const bounds = screen.getPrimaryDisplay().bounds
     return Object.assign({}, defaultSize, {
       x: (bounds.width - defaultSize.width) / 2,
       y: (bounds.height - defaultSize.height) / 2,
-    });
-  };
+    })
+  }
 
-  const ensureVisibleOnSomeDisplay = windowState => {
-    const visible = screen.getAllDisplays().some(display => {
-      return windowWithinBounds(windowState, display.bounds);
-    });
+  const ensureVisibleOnSomeDisplay = (windowState) => {
+    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 resetToDefaults()
     }
-    return windowState;
-  };
+    return windowState
+  }
 
   const saveState = () => {
     if (!win.isMinimized() && !win.isMaximized()) {
-      Object.assign(state, getCurrentPosition());
+      Object.assign(state, getCurrentPosition())
     }
-    store.set(key, state);
-  };
+    store.set(key, state)
+  }
 
-  state = ensureVisibleOnSomeDisplay(restore());
+  state = ensureVisibleOnSomeDisplay(restore())
 
   const browserOptions: BrowserWindowConstructorOptions = {
     ...state,
@@ -79,10 +78,10 @@ export default (windowName: string, options: BrowserWindowConstructorOptions): B
       contextIsolation: false,
       ...options.webPreferences,
     },
-  };
-  win = new BrowserWindow(browserOptions);
+  }
+  const win = new BrowserWindow(browserOptions)
 
-  win.on('close', saveState);
+  win.on('close', saveState)
 
-  return win;
-};
+  return win
+}