v0.20.0

.github/workflows/main.yml

@@ -7,20 +7,20 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        node: ['16.x', '18.x']
+        node: [20, 22]
         os: [ubuntu-latest, macOS-latest]
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v3
         with:
-          version: 8
+          version: 9
 
       - name: Use Node ${{ matrix.node }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node }}
           cache: 'pnpm'
@@ -29,4 +29,4 @@ jobs:
         run: pnpm install --frozen-lockfile
 
       - name: Lint
-        run: cd library && pnpm run lint
+        run: pnpm run lint

.gitignore

@@ -1 +1,3 @@
 node_modules
+lib
+.webpack

CHANGELOG.md

@@ -1,3 +1,8 @@
+## v0.20.0 (2024-10-25)
+
+- Updated Electron dependency to v33.0.
+- Refactored setup.
+
 ## v0.19.0 (2023-04-09)
 
 - Updated React Native for Web dependency to v0.19.

biome.json

@@ -0,0 +1,40 @@
+{
+  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
+  "organizeImports": {
+    "enabled": true,
+    "ignore": []
+  },
+  "formatter": {
+    "enabled": true,
+    "formatWithErrors": false,
+    "ignore": [],
+    "attributePosition": "auto",
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineWidth": 100
+  },
+  "javascript": {
+    "formatter": {
+      "arrowParentheses": "always",
+      "bracketSameLine": true,
+      "bracketSpacing": true,
+      "jsxQuoteStyle": "double",
+      "quoteProperties": "asNeeded",
+      "quoteStyle": "single",
+      "semicolons": "asNeeded",
+      "trailingCommas": "all"
+    }
+  },
+  "linter": {
+    "enabled": true,
+    "ignore": [],
+    "rules": {
+      "recommended": true
+    }
+  },
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  }
+}

example/package.json

@@ -3,33 +3,31 @@
   "productName": "React Native Electron",
   "version": "1.0.0",
   "description": "Example React Native Electron application",
+  "author": {
+    "name": "Paul Le Cam",
+    "email": "[email protected]"
+  },
+  "keywords": [],
+  "license": "MIT",
   "main": ".webpack/main",
   "scripts": {
     "start": "electron-forge start",
     "make": "electron-forge make",
     "package": "electron-forge package"
   },
-  "keywords": [],
-  "author": {
-    "name": "Paul Le Cam",
-    "email": "[email protected]"
-  },
-  "license": "MIT",
   "dependencies": {
-    "react": "18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-native-electron": "workspace:*"
   },
   "devDependencies": {
-    "@babel/core": "^7.21.4",
-    "@babel/preset-react": "^7.17.12",
-    "@electron-forge/cli": "^6.1.1",
-    "@electron-forge/maker-zip": "^6.1.1",
-    "@electron-forge/plugin-webpack": "6.1.1",
-    "babel-loader": "^9.1.2",
-    "electron": "^24.0.0",
+    "@electron-forge/cli": "^7.5.0",
+    "@electron-forge/maker-zip": "^7.5.0",
+    "@electron-forge/plugin-webpack": "7.5.0",
+    "electron": "^33.0.2",
     "node-loader": "^2.0.0",
-    "webpack": "^5.78.0"
+    "swc-loader": "^0.2.6",
+    "webpack": "^5.95.0"
   },
   "config": {
     "forge": {
@@ -51,7 +49,7 @@
                   "html": "./src/index.html",
                   "js": "./src/renderer.js",
                   "preload": {
-                    "js": "./node_modules/react-native-electron/preload.js"
+                    "js": "./node_modules/react-native-electron/lib/preload.js"
                   },
                   "name": "main_window"
                 }

example/src/App.js

@@ -1,9 +1,9 @@
 import React, { StrictMode, useEffect, useState } from 'react'
 import {
-  Platform,
   Alert,
   Clipboard,
   Linking,
+  Platform,
   StyleSheet,
   Text,
   TouchableOpacity,
@@ -95,14 +95,10 @@ function NavBar({ active, onSelect }) {
   const tabs = Object.keys(WEBSITES).map((website) => (
     <TouchableWithoutFeedback
       key={website}
-      onPress={function () {
+      onPress={() => {
         onSelect(website)
       }}>
-      <View
-        style={[
-          styles.navBarTab,
-          active === website && styles.navBarTabActive,
-        ]}>
+      <View style={[styles.navBarTab, active === website && styles.navBarTabActive]}>
         <Text>{website}</Text>
       </View>
     </TouchableWithoutFeedback>
@@ -120,15 +116,15 @@ function UriBar({ uri }) {
         </Text>
       </View>
       <TouchableOpacity
-        onPress={function () {
+        onPress={() => {
           Clipboard.setString(uri)
           Alert.alert('Copy to clipboard', `Copied URI to clipboard: ${uri}`)
         }}
         style={styles.uriTouchable}>
         <Text style={styles.uriText}>Copy to clipboard</Text>
       </TouchableOpacity>
       <TouchableOpacity
-        onPress={function () {
+        onPress={() => {
           Linking.openURL(uri)
         }}
         style={styles.uriTouchable}>
@@ -152,9 +148,7 @@ function SelectUriBar() {
 
 function schemeStyle(styleName, colorScheme) {
   const baseStyle = styles[styleName]
-  return colorScheme === 'dark'
-    ? [baseStyle, styles[`${styleName}Dark`]]
-    : baseStyle
+  return colorScheme === 'dark' ? [baseStyle, styles[`${styleName}Dark`]] : baseStyle
 }
 
 export default function App() {
@@ -195,9 +189,7 @@ export default function App() {
     <StrictMode>
       <View style={schemeStyle('layout', colorScheme)}>
         <View style={styles.titleView}>
-          <Text style={schemeStyle('titleText', colorScheme)}>
-            React Native Electron
-          </Text>
+          <Text style={schemeStyle('titleText', colorScheme)}>React Native Electron</Text>
         </View>
         <View style={styles.subtitleView}>
           <Text style={schemeStyle('subtitleText', colorScheme)}>

example/webpack.renderer.config.js

@@ -5,7 +5,7 @@ module.exports = {
   },
   resolve: {
     alias: {
-      'react-native': require('path').resolve(__dirname, '../library'),
+      'react-native': require('node:path').resolve(__dirname, '../library'),
     },
   },
 }

example/webpack.rules.js

@@ -1,12 +1,19 @@
 module.exports = [
   {
-    test: /\.jsx?$/,
+    test: /\.js$/,
+    exclude: /(node_modules)/,
     use: {
-      loader: 'babel-loader',
+      loader: 'swc-loader',
       options: {
-        exclude: /node_modules/,
-        presets: ['@babel/preset-react'],
-        plugins: ['@babel/plugin-proposal-export-namespace-from'],
+        jsc: {
+          parser: {
+            syntax: 'ecmascript',
+            jsx: true,
+          },
+        },
+        env: {
+          targets: 'Electron >= 33',
+        },
       },
     },
   },