Merge branch 'release/v8'

README.md

@@ -49,23 +49,17 @@
 
 We can use `examples/*` as a template.
 
-To create the `examples/with-material-ui`, run the command below:
+To create the `examples/with-tailwindcss`, run the command below:
 
 ```
 # with npx
-$ npx create-nextron-app MY_APP --example with-material-ui
+$ npx create-nextron-app MY_APP --example with-tailwindcss
 
 # with yarn
-$ yarn create nextron-app MY_APP --example with-material-ui
+$ yarn create nextron-app MY_APP --example with-tailwindcss
 
 # with pnpm
-$ pnpm dlx create-nextron-app MY_APP --example with-material-ui
-```
-
-For nextron v8 or below, please specify `--branch` option:
-
-```
-npx create-nextron-app MY_APP --example with-material-ui --branch release/v8
+$ pnpm dlx create-nextron-app MY_APP --example with-tailwindcss
 ```
 
 ### Run Electron with Development Mode
@@ -166,28 +160,6 @@ To build Windows 32 bit version, run `npm run build:win32` like below:
 }
 ```
 
-### `--electron-builder-options` (default: `undefined`)
-
-An example below builds NSIS 32-bit installer for Windows:
-
-```json
-{
-  "scripts": {
-    "build": "nextron build --electron-builder-options=\"--windows nsis:ia32\""
-  }
-}
-```
-
-Next example builds deb and tar.xz for Linux:
-
-```json
-{
-  "scripts": {
-    "build": "nextron build --electron-builder-options=\"--linux deb tar.xz\""
-  }
-}
-```
-
 ### `--config` (default: `./electron-builder.yml`)
 
 ```json
@@ -338,34 +310,34 @@ protocols:
 
 Then, you can see the app from URL: `your-custom-protocol-edited://any-uri-here?data=include-any-data`.
 
-### [examples/custom-build-options](./examples/custom-build-options)
+### [examples/basic-store-data](./examples/basic-store-data)
 
-<p align="center"><img src="https://i.imgur.com/QqQekRJ.png"></p>
+<p align="center"><img src="https://i.imgur.com/BgFze6G.png"></p>
 
 ```
 # with npx
-$ npx create-nextron-app my-app --example custom-build-options
+$ npx create-nextron-app my-app --example basic-store-data
 
 # with yarn
-$ yarn create nextron-app my-app --example custom-build-options
+$ yarn create nextron-app my-app --example basic-store-data
 
 # with pnpm
-$ pnpm dlx create-nextron-app my-app --example custom-build-options
+$ pnpm dlx create-nextron-app my-app --example basic-store-data
 ```
 
-### [examples/custom-main-entry](./examples/custom-main-entry)
+### [examples/custom-build-options](./examples/custom-build-options)
 
-<p align="center"><img src="https://i.imgur.com/nqpLJI0.png"></p>
+<p align="center"><img src="https://i.imgur.com/QqQekRJ.png"></p>
 
 ```
 # with npx
-$ npx create-nextron-app my-app --example custom-main-entry
+$ npx create-nextron-app my-app --example custom-build-options
 
 # with yarn
-$ yarn create nextron-app my-app --example custom-main-entry
+$ yarn create nextron-app my-app --example custom-build-options
 
 # with pnpm
-$ pnpm dlx create-nextron-app my-app --example custom-main-entry
+$ pnpm dlx create-nextron-app my-app --example custom-build-options
 ```
 
 ### [examples/custom-renderer-port](./examples/custom-renderer-port)
@@ -383,36 +355,6 @@ $ yarn create nextron-app my-app --example custom-renderer-port
 $ pnpm dlx create-nextron-app my-app --example custom-renderer-port
 ```
 
-### [examples/ipc-communication](./examples/ipc-communication)
-
-<p align="center"><img src="https://i.imgur.com/kIDlAFT.png"></p>
-
-```
-# with npx
-$ npx create-nextron-app my-app --example ipc-communication
-
-# with yarn
-$ yarn create nextron-app my-app --example ipc-communication
-
-# with pnpm
-$ pnpm dlx create-nextron-app my-app --example ipc-communication
-```
-
-### [examples/store-data](./examples/store-data)
-
-<p align="center"><img src="https://i.imgur.com/BgFze6G.png"></p>
-
-```
-# with npx
-$ npx create-nextron-app my-app --example store-data
-
-# with yarn
-$ yarn create nextron-app my-app --example store-data
-
-# with pnpm
-$ pnpm dlx create-nextron-app my-app --example store-data
-```
-
 ### [examples/with-ant-design](./examples/with-ant-design)
 
 <p align="center"><img src="https://i.imgur.com/NrkTPe9.png"></p>
@@ -547,7 +489,6 @@ You already create apps with nextron? Feel free to share your apps or services:
 ## Related
 
 - [create-nextron-app](https://github.com/saltyshiomix/create-nextron-app) - Create Nextron (Electron + Next.js) apps in one command ⚡
-- [Nuxtron](https://github.com/saltyshiomix/nuxtron) - ⚡ Electron + Nuxt.js ⚡
 
 ## License
 

examples/_template/js/main/background.js

@@ -1,4 +1,5 @@
-import { app } from 'electron'
+import path from 'path'
+import { app, ipcMain } from 'electron'
 import serve from 'electron-serve'
 import { createWindow } from './helpers'
 
@@ -16,6 +17,9 @@ if (isProd) {
   const mainWindow = createWindow('main', {
     width: 1000,
     height: 600,
+    webPreferences: {
+      preload: path.join(__dirname, 'preload.js'),
+    },
   })
 
   if (isProd) {
@@ -30,3 +34,7 @@ if (isProd) {
 app.on('window-all-closed', () => {
   app.quit()
 })
+
+ipcMain.on('message', async (event, arg) => {
+  event.reply('message', `${arg} World!`)
+})

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

@@ -66,9 +66,9 @@ export const createWindow = (windowName, options) => {
     ...state,
     ...options,
     webPreferences: {
-      ...options.webPreferences,
       nodeIntegration: false,
       contextIsolation: true,
+      ...options.webPreferences,
     },
   })
 

examples/_template/js/main/preload.js

@@ -0,0 +1,17 @@
+import { contextBridge, ipcRenderer } from 'electron'
+
+const handler = {
+  send(channel, value) {
+    ipcRenderer.send(channel, value)
+  },
+  on(channel, callback) {
+    const subscription = (_event, ...args) => callback(...args)
+    ipcRenderer.on(channel, subscription)
+
+    return () => {
+      ipcRenderer.removeListener(channel, subscription)
+    }
+  },
+}
+
+contextBridge.exposeInMainWorld('ipc', handler)

examples/_template/ts/main/background.ts

@@ -1,8 +1,9 @@
-import { app } from 'electron'
+import path from 'path'
+import { app, ipcMain } from 'electron'
 import serve from 'electron-serve'
 import { createWindow } from './helpers'
 
-const isProd: boolean = process.env.NODE_ENV === 'production'
+const isProd = process.env.NODE_ENV === 'production'
 
 if (isProd) {
   serve({ directory: 'app' })
@@ -16,6 +17,9 @@ if (isProd) {
   const mainWindow = createWindow('main', {
     width: 1000,
     height: 600,
+    webPreferences: {
+      preload: path.join(__dirname, 'preload.js'),
+    },
   })
 
   if (isProd) {
@@ -30,3 +34,7 @@ if (isProd) {
 app.on('window-all-closed', () => {
   app.quit()
 })
+
+ipcMain.on('message', async (event, arg) => {
+  event.reply('message', `${arg} World!`)
+})

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

@@ -74,9 +74,9 @@ export const createWindow = (
     ...state,
     ...options,
     webPreferences: {
-      ...options.webPreferences,
       nodeIntegration: false,
       contextIsolation: true,
+      ...options.webPreferences,
     },
   })
 

examples/_template/ts/main/preload.ts

@@ -0,0 +1,20 @@
+import { contextBridge, ipcRenderer, IpcRendererEvent } from 'electron'
+
+const handler = {
+  send(channel: string, value: unknown) {
+    ipcRenderer.send(channel, value)
+  },
+  on(channel: string, callback: (...args: unknown[]) => void) {
+    const subscription = (_event: IpcRendererEvent, ...args: unknown[]) =>
+      callback(...args)
+    ipcRenderer.on(channel, subscription)
+
+    return () => {
+      ipcRenderer.removeListener(channel, subscription)
+    }
+  },
+}
+
+contextBridge.exposeInMainWorld('ipc', handler)
+
+export type IpcHandler = typeof handler

examples/basic-lang-javascript/package.json

@@ -18,7 +18,7 @@
     "electron": "^26.2.2",
     "electron-builder": "^24.6.4",
     "next": "^12.3.4",
-    "nextron": "^8.11.3",
+    "nextron": "^8.12.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }

examples/basic-lang-javascript/renderer/pages/home.jsx

@@ -3,11 +3,19 @@ import Head from 'next/head'
 import Link from 'next/link'
 import Image from 'next/image'
 
-function Home() {
+export default function HomePage() {
+  const [message, setMessage] = React.useState('No message found')
+
+  React.useEffect(() => {
+    window.ipc.on('message', (message) => {
+      setMessage(message)
+    })
+  }, [])
+
   return (
     <React.Fragment>
       <Head>
-        <title>Home - Nextron (with-javascript)</title>
+        <title>Home - Nextron (basic-lang-javascript)</title>
       </Head>
       <div>
         <p>
@@ -23,8 +31,16 @@ function Home() {
           height="256px"
         />
       </div>
+      <div>
+        <button
+          onClick={() => {
+            window.ipc.send('message', 'Hello')
+          }}
+        >
+          Test IPC
+        </button>
+        <p>{message}</p>
+      </div>
     </React.Fragment>
   )
 }
-
-export default Home

examples/basic-lang-javascript/renderer/pages/next.jsx

@@ -2,11 +2,11 @@ import React from 'react'
 import Head from 'next/head'
 import Link from 'next/link'
 
-function Next() {
+export default function NextPage() {
   return (
     <React.Fragment>
       <Head>
-        <title>Next - Nextron (with-javascript)</title>
+        <title>Next - Nextron (basic-lang-javascript)</title>
       </Head>
       <div>
         <p>
@@ -19,5 +19,3 @@ function Next() {
     </React.Fragment>
   )
 }
-
-export default Next

examples/basic-lang-typescript/package.json

@@ -20,9 +20,9 @@
     "electron": "^26.2.2",
     "electron-builder": "^24.6.4",
     "next": "^12.3.4",
-    "nextron": "^8.11.3",
+    "nextron": "^8.12.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "typescript": "^4.9.4"
+    "typescript": "^5.2.2"
   }
 }

examples/basic-lang-typescript/renderer/pages/home.tsx

@@ -3,11 +3,19 @@ import Head from 'next/head'
 import Link from 'next/link'
 import Image from 'next/image'
 
-function Home() {
+export default function HomePage() {
+  const [message, setMessage] = React.useState('No message found')
+
+  React.useEffect(() => {
+    window.ipc.on('message', (message: string) => {
+      setMessage(message)
+    })
+  }, [])
+
   return (
     <React.Fragment>
       <Head>
-        <title>Home - Nextron (with-typescript)</title>
+        <title>Home - Nextron (basic-lang-typescript)</title>
       </Head>
       <div>
         <p>
@@ -23,8 +31,16 @@ function Home() {
           height="256px"
         />
       </div>
+      <div>
+        <button
+          onClick={() => {
+            window.ipc.send('message', 'Hello')
+          }}
+        >
+          Test IPC
+        </button>
+        <p>{message}</p>
+      </div>
     </React.Fragment>
   )
 }
-
-export default Home