v0.10.0

.github/workflows/build.yml

@@ -24,7 +24,8 @@ jobs:
         config:
           - os: windows-2019
           - os: ubuntu-latest
-          - os: macos-latest
+          - os: macos-13
+          - os: macos-14
     runs-on: ${{ matrix.config.os }}
     timeout-minutes: 90
 
@@ -99,6 +100,8 @@ jobs:
             name: Arduino-Lab-for-MicroPython_Linux_X86-64
           - path: "*-mac_x64.zip"
             name: Arduino-Lab-for-MicroPython_macOS_X86-64
+          - path: "*-mac_arm64.zip"
+            name: Arduino-Lab-for-MicroPython_macOS_arm-64
           # - path: "*Windows_64bit.exe"
           #   name: Windows_X86-64_interactive_installer
           # - path: "*Windows_64bit.msi"

backend/helpers.js

@@ -4,12 +4,12 @@ const path = require('path')
 
 async function openFolderDialog(win) {
   // https://stackoverflow.com/questions/46027287/electron-open-folder-dialog
-  let dir = await dialog.showOpenDialog(win, { properties: [ 'openDirectory' ] })
+  const dir = await dialog.showOpenDialog(win, { properties: [ 'openDirectory' ] })
   return dir.filePaths[0] || null
 }
 
 function listFolder(folder) {
-  files = fs.readdirSync(path.resolve(folder))
+  let files = fs.readdirSync(path.resolve(folder))
   // Filter out directories
   files = files.filter(f => {
     let filePath = path.resolve(folder, f)
@@ -38,7 +38,7 @@ function ilistFolder(folder) {
 
 function getAllFiles(dirPath, arrayOfFiles) {
   // https://coderrocketfuel.com/article/recursively-list-all-the-files-in-a-directory-using-node-js
-  files = ilistFolder(dirPath)
+  let files = ilistFolder(dirPath)
   arrayOfFiles = arrayOfFiles || []
   files.forEach(function(file) {
     const p = path.join(dirPath, file.path)

backend/ipc.js

@@ -6,7 +6,7 @@ const {
   getAllFiles
 } = require('./helpers.js')
 
-module.exports = function registerIPCHandlers(win, ipcMain) {
+module.exports = function registerIPCHandlers(win, ipcMain, app) {
   ipcMain.handle('open-folder', async (event) => {
     console.log('ipcMain', 'open-folder')
     const folder = await openFolderDialog(win)
@@ -107,4 +107,24 @@ module.exports = function registerIPCHandlers(win, ipcMain) {
 
     win.setMinimumSize(minWidth, minHeight)
   })
+
+  ipcMain.handle('confirm-close', () => {
+    console.log('ipcMain', 'confirm-close')
+    app.exit()
+  })
+
+  ipcMain.handle('is-packaged', () => {
+    return app.isPackaged
+  })
+
+  ipcMain.handle('get-app-path', () => {
+    console.log('ipcMain', 'get-app-path')
+    return app.getAppPath()
+  })
+
+  win.on('close', (event) => {
+    console.log('BrowserWindow', 'close')
+    event.preventDefault()
+    win.webContents.send('check-before-close')
+  })
 }

backend/menu.js

@@ -4,7 +4,6 @@ const openAboutWindow = require('about-window').default
 
 module.exports = function registerMenu(win) {
   const isMac = process.platform === 'darwin'
-  const isDev = !app.isPackaged
   const template = [
     ...(isMac ? [{
       label: app.name,
@@ -56,17 +55,13 @@ module.exports = function registerMenu(win) {
       label: 'View',
       submenu: [
         { role: 'reload' },
+        { role: 'toggleDevTools' },
         { type: 'separator' },
         { role: 'resetZoom' },
         { role: 'zoomIn' },
         { role: 'zoomOut' },
         { type: 'separator' },
         { role: 'togglefullscreen' },
-        ...(isDev ? [
-          { type: 'separator' },
-          { role: 'toggleDevTools' },
-        ]:[
-        ])
       ]
     },
     {

index.js

@@ -6,6 +6,8 @@ const registerIPCHandlers = require('./backend/ipc.js')
 const registerMenu = require('./backend/menu.js')
 
 let win = null // main window
+let splash = null
+let splashTimestamp = null
 
 // START APP
 function createWindow () {
@@ -17,17 +19,42 @@ function createWindow () {
       nodeIntegration: false,
       webSecurity: true,
       enableRemoteModule: false,
-      preload: path.join(__dirname, "preload.js")
+      preload: path.join(__dirname, "preload.js"),
+      show: false
     }
   })
   // and load the index.html of the app.
   win.loadFile('ui/arduino/index.html')
 
-  registerIPCHandlers(win, ipcMain)
-  registerMenu(win)
-}
+  // If the app takes a while to open, show splash screen
+  // Create the splash screen
+  splash = new BrowserWindow({
+    width: 450,
+    height: 140,
+    transparent: true,
+    frame: false,
+    alwaysOnTop: true
+  });
+  splash.loadFile('ui/arduino/splash.html')
+  splashTimestamp = Date.now()
+
+  win.once('ready-to-show', () => {
+    if (Date.now()-splashTimestamp > 1000) {
+      splash.destroy()
+    } else {
+      setTimeout(() => {
+        splash.destroy()
+      }, 500)
+    }
+    win.show()
+  })
 
+  registerIPCHandlers(win, ipcMain, app)
+  registerMenu(win)
 
-// TODO: Loading splash screen
+  app.on('activate', () => {
+    if (BrowserWindow.getAllWindows().length === 0) createWindow()
+  })
+}
 
-app.whenReady().then(createWindow)
+app.on('ready', createWindow)

package.json

@@ -1,14 +1,14 @@
 {
   "name": "arduino-lab-micropython-ide",
   "productName": "Arduino Lab for MicroPython",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "description": "Arduino Lab for MicroPython is a project sponsored by Arduino, based on original work by Murilo Polese.\nThis is an experimental pre-release software, please direct any questions exclusively to Github issues.",
   "main": "index.js",
   "scripts": {
     "post-set-shell": "npm config set script-shell bash",
     "rebuild": "electron-rebuild",
     "dev": "electron  --inspect ./",
-    "build": "npm run post-set-shell && electron-builder $(if [ $(uname -m) =  arm64 ]; then echo --mac --x64; fi)",
+    "build": "npm run post-set-shell && electron-builder",
     "postinstall": "npm run post-set-shell && npm run rebuild"
   },
   "devDependencies": {
@@ -21,6 +21,7 @@
   "build": {
     "appId": "cc.arduino.micropython-lab",
     "artifactName": "${productName}-${os}_${arch}.${ext}",
+    "extraResources": "./ui/arduino/helpers.py",
     "mac": {
       "target": "zip",
       "icon": "build_resources/icon.icns"

preload.js

@@ -13,10 +13,10 @@ const Serial = {
     return ports.filter(p => p.vendorId && p.productId)
   },
   connect: async (path) => {
-    return await board.open(path)
+    return board.open(path)
   },
   disconnect: async () => {
-    return await board.close()
+    return board.close()
   },
   run: async (code) => {
     return board.run(code)
@@ -145,15 +145,22 @@ const Disk = {
   },
   fileExists: async (filePath) => {
     return ipcRenderer.invoke('file-exists', filePath)
+  },
+  getAppPath: () => {
+    return ipcRenderer.invoke('get-app-path')
   }
 }
 
 const Window = {
   setWindowSize: (minWidth, minHeight) => {
     ipcRenderer.invoke('set-window-size', minWidth, minHeight)
-  }
+  },
+  beforeClose: (callback) => ipcRenderer.on('check-before-close', callback),
+  confirmClose: () => ipcRenderer.invoke('confirm-close'),
+  isPackaged: () => ipcRenderer.invoke('is-packaged')
 }
 
+
 contextBridge.exposeInMainWorld('BridgeSerial', Serial)
 contextBridge.exposeInMainWorld('BridgeDisk', Disk)
 contextBridge.exposeInMainWorld('BridgeWindow', Window)

ui/arduino/index.html

@@ -30,6 +30,7 @@
     <script type="text/javascript" src="views/components/repl-panel.js" charset="utf-8"></script>
     <script type="text/javascript" src="views/components/tabs.js" charset="utf-8"></script>
     <script type="text/javascript" src="views/components/toolbar.js" charset="utf-8"></script>
+    <script type="text/javascript" src="views/components/overlay.js" charset="utf-8"></script>
 
     <!-- Views -->
     <script type="text/javascript" src="views/editor.js" charset="utf-8"></script>

ui/arduino/main.js

@@ -19,27 +19,26 @@ function App(state, emit) {
     `
   }
 
-  let overlay = html`<div id="overlay" class="closed"></div>`
-
-  if (state.diskFiles == null) {
-    emit('load-disk-files')
-    overlay = html`<div id="overlay" class="open"><p>Loading files...</p></div>`
+  if (state.view == 'file-manager') {
+    return html`
+      <div id="app">
+        ${FileManagerView(state, emit)}
+        ${Overlay(state, emit)}
+      </div>
+    `
+  } else {
+    return html`
+      <div id="app">
+        ${EditorView(state, emit)}
+        ${Overlay(state, emit)}
+      </div>
+    `
   }
-
-  if (state.isRemoving) overlay = html`<div id="overlay" class="open"><p>Removing...</p></div>`
-  if (state.isConnecting) overlay = html`<div id="overlay" class="open"><p>Connecting...</p></div>`
-  if (state.isLoadingFiles) overlay = html`<div id="overlay" class="open"><p>Loading files...</p></div>`
-  if (state.isSaving) overlay = html`<div id="overlay" class="open"><p>Saving file... ${state.savingProgress}</p></div>`
-  if (state.isTransferring) overlay = html`<div id="overlay" class="open"><p>Transferring file... ${state.transferringProgress}</p></div>`
-
-  const view = state.view == 'editor' ? EditorView(state, emit) : FileManagerView(state, emit)
   return html`
     <div id="app">
-      ${view}
-      ${overlay}
+      ${Overlay(state, emit)}
     </div>
   `
-
 }
 
 window.addEventListener('load', () => {
@@ -49,7 +48,9 @@ window.addEventListener('load', () => {
   app.mount('#app')
 
   app.emitter.on('DOMContentLoaded', () => {
-    app.emitter.emit('refresh-files')
+    if (app.state.diskNavigationRoot) {
+      app.emitter.emit('refresh-files')
+    }
   })
 
 })