@phystack/browser 4.4.29

package/README.md

@@ -0,0 +1,44 @@
+# @phystack/browser
+
+A simple Electron browser for the Phygrid platform.
+
+## Installation
+
+```bash
+npm install -g @phystack/browser
+# or
+yarn global add @phystack/browser
+```
+
+## Usage
+
+```bash
+# Basic usage - opens default URL
+phy-browser
+
+# Open a specific URL
+phy-browser --url https://example.com
+
+# Set window dimensions
+phy-browser --width 1280 --height 800
+
+# Launch in fullscreen mode
+phy-browser --fullscreen
+
+# Launch in kiosk mode
+phy-browser --kiosk
+
+# Open with DevTools
+phy-browser --dev
+```
+
+## Options
+
+- `-u, --url <url>`: URL to open in the browser window (default: "https://phygrid.com")
+- `-w, --width <width>`: Window width (default: "1024")
+- `-h, --height <height>`: Window height (default: "768")
+- `-f, --fullscreen`: Launch in fullscreen mode
+- `-k, --kiosk`: Launch in kiosk mode
+- `-d, --dev`: Open DevTools on startup
+- `-V, --version`: Output the version number
+- `--help`: Display help for command

package/bin/index.js

@@ -0,0 +1,30 @@
+#!/usr/bin/env node
+
+const { spawn } = require('child_process');
+const path = require('path');
+const electron = require('electron');
+const isDev = process.env.NODE_ENV === 'development';
+
+// Pass all arguments to electron
+const args = process.argv.slice(2);
+args.unshift(path.join(__dirname, '../dist/index.js'));
+
+// Set environment variables
+const env = Object.assign({}, process.env);
+if (isDev) {
+  console.log('Starting Electron in development mode');
+  env.NODE_ENV = 'development';
+} else {
+  console.log('Starting Electron in production mode');
+  env.NODE_ENV = 'production';
+}
+
+// Spawn electron process
+const proc = spawn(electron, args, {
+  stdio: 'inherit',
+  env
+});
+
+proc.on('close', (code) => {
+  process.exit(code);
+});

package/dist/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.js

@@ -0,0 +1,86 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const electron_1 = require("electron");
+const commander_1 = require("commander");
+const path_1 = __importDefault(require("path"));
+// Define the command line options
+commander_1.program
+    .version('1.0.0')
+    .option('-u, --url <url>', 'URL to open in the browser window', 'https://phygrid.com')
+    .option('-w, --width <width>', 'Window width', '1280')
+    .option('-h, --height <height>', 'Window height', '800')
+    .option('-f, --fullscreen', 'Launch in fullscreen mode')
+    .option('-k, --kiosk', 'Launch in kiosk mode')
+    .option('-d, --dev', 'Open DevTools on startup');
+commander_1.program.parse(process.argv);
+const options = commander_1.program.opts();
+// Check if we're in development mode
+const isDev = process.env.NODE_ENV === 'development';
+// Store URL for preload script
+electron_1.app.commandLine.appendSwitch('app-url', options.url);
+// Prevent multiple instances of the app
+const gotTheLock = electron_1.app.requestSingleInstanceLock();
+if (!gotTheLock) {
+    console.log('Another instance is already running. Exiting...');
+    electron_1.app.quit();
+}
+else {
+    // Create window when the app is ready
+    let mainWindow = null;
+    function createWindow() {
+        mainWindow = new electron_1.BrowserWindow({
+            width: parseInt(options.width, 10),
+            height: parseInt(options.height, 10),
+            fullscreen: options.fullscreen || false,
+            kiosk: options.kiosk || false,
+            webPreferences: {
+                preload: path_1.default.join(__dirname, 'preload.js'),
+                nodeIntegration: false,
+                contextIsolation: true,
+                sandbox: true,
+                webSecurity: true,
+                webviewTag: true, // Enable the webview tag
+            },
+        });
+        // Load the app
+        if (isDev) {
+            console.log('Running in development mode - loading from dev server at http://localhost:3424');
+            // In development mode, load from webpack dev server
+            mainWindow.loadURL('http://localhost:3424');
+        }
+        else {
+            console.log('Running in production mode - loading from built files');
+            // In production mode, load from the built files
+            mainWindow.loadFile(path_1.default.join(__dirname, 'renderer/index.html'));
+        }
+        if (options.dev || isDev) {
+            mainWindow.webContents.openDevTools();
+        }
+        mainWindow.on('closed', () => {
+            mainWindow = null;
+        });
+    }
+    electron_1.app.on('ready', createWindow);
+    electron_1.app.on('window-all-closed', () => {
+        if (process.platform !== 'darwin') {
+            electron_1.app.quit();
+        }
+    });
+    electron_1.app.on('activate', () => {
+        if (mainWindow === null) {
+            createWindow();
+        }
+    });
+    // Handle second instance
+    electron_1.app.on('second-instance', () => {
+        if (mainWindow) {
+            if (mainWindow.isMinimized()) {
+                mainWindow.restore();
+            }
+            mainWindow.focus();
+        }
+    });
+}

package/dist/preload.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/preload.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const electron_1 = require("electron");
+// Get the URL from command line arguments or use default when in dev mode
+let url = 'https://phygrid.com';
+// In production, try to get URL from command line
+const urlArg = process.argv.find(arg => arg.startsWith('--app-url='));
+if (urlArg) {
+    url = urlArg.split('=')[1];
+}
+// Expose protected methods that allow the renderer process to use
+// the ipcRenderer without exposing the entire object
+electron_1.contextBridge.exposeInMainWorld('electron', {
+    // Add any needed IPC methods here
+    appUrl: url,
+    isDev: process.env.NODE_ENV === 'development',
+    sendMessage: (channel, data) => {
+        // Whitelist channels to ensure only approved channels are used
+        const validChannels = ['toMain'];
+        if (validChannels.includes(channel)) {
+            electron_1.ipcRenderer.send(channel, data);
+        }
+    },
+    receive: (channel, func) => {
+        const validChannels = ['fromMain'];
+        if (validChannels.includes(channel)) {
+            // Remove the event listener to avoid memory leaks
+            electron_1.ipcRenderer.removeAllListeners(channel);
+            // Add a new listener
+            electron_1.ipcRenderer.on(channel, (_, ...args) => func(...args));
+        }
+    }
+});

package/dist/renderer/App.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const App: React.FC;
+export default App;

package/dist/renderer/App.js

@@ -0,0 +1,121 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+const react_1 = require("@emotion/react");
+const react_2 = require("react");
+const Sidebar_1 = __importDefault(require("./Sidebar"));
+const appContainerStyle = (0, react_1.css) `
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  width: 100%;
+`;
+const mainContentStyle = (0, react_1.css) `
+  flex: 1;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+`;
+const webviewStyle = (0, react_1.css) `
+  width: 100%;
+  height: 100%;
+  border: none;
+  display: block;
+  border: 5px solid red;
+`;
+const dividerStyle = (0, react_1.css) `
+  width: 4px;
+  height: 100%;
+  background-color: #3C4043;
+  cursor: col-resize;
+  flex-shrink: 0;
+  position: relative;
+  &:hover {
+    background-color: #4285F4;
+  }
+`;
+const sidebarContainerStyle = (0, react_1.css) `
+  width: 450px;
+  min-width: 250px;
+  max-width: 50%;
+  height: 100%;
+  background-color: #202124;
+  color: #E8EAED;
+  overflow-y: auto;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+`;
+const App = () => {
+    const dividerRef = (0, react_2.useRef)(null);
+    const appRef = (0, react_2.useRef)(null);
+    const sidebarRef = (0, react_2.useRef)(null);
+    const mainRef = (0, react_2.useRef)(null);
+    const [isDragging, setIsDragging] = (0, react_2.useState)(false);
+    // Get the URL from the preload script
+    const appUrl = window.electron?.appUrl || 'https://phygrid.com';
+    (0, react_2.useEffect)(() => {
+        const divider = dividerRef.current;
+        const container = appRef.current;
+        const sidebar = sidebarRef.current;
+        const main = mainRef.current;
+        if (!divider || !container || !sidebar || !main)
+            return;
+        let startX = 0;
+        let startSidebarWidth = 0;
+        const onMouseDown = (e) => {
+            setIsDragging(true);
+            startX = e.clientX;
+            startSidebarWidth = sidebar.offsetWidth;
+            document.addEventListener('mousemove', onMouseMove);
+            document.addEventListener('mouseup', onMouseUp);
+            document.body.style.cursor = 'col-resize';
+            document.body.style.userSelect = 'none';
+            // Prevent text selection during drag
+            e.preventDefault();
+        };
+        const onMouseMove = (e) => {
+            if (!isDragging)
+                return;
+            // Calculate new width based on mouse movement
+            // For right sidebar: we need to SUBTRACT the movement from initial width
+            // (moving left = make sidebar bigger, moving right = make sidebar smaller)
+            const dx = e.clientX - startX;
+            let newWidth = startSidebarWidth - dx;
+            // Apply constraints
+            newWidth = Math.max(250, newWidth); // Min width
+            newWidth = Math.min(container.offsetWidth * 0.7, newWidth); // Max width
+            // Set sidebar width
+            sidebar.style.width = `${newWidth}px`;
+            // Force webview update
+            const webview = main.querySelector('webview');
+            if (webview) {
+                webview.style.width = '100%';
+            }
+        };
+        const onMouseUp = () => {
+            setIsDragging(false);
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
+            document.body.style.cursor = '';
+            document.body.style.userSelect = '';
+        };
+        divider.addEventListener('mousedown', onMouseDown);
+        return () => {
+            divider.removeEventListener('mousedown', onMouseDown);
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
+        };
+    }, [isDragging]);
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: appRef, css: appContainerStyle, children: [(0, jsx_runtime_1.jsx)("div", { ref: mainRef, css: mainContentStyle, children: (0, jsx_runtime_1.jsx)("webview", { src: appUrl, css: webviewStyle }) }), (0, jsx_runtime_1.jsx)("div", { ref: dividerRef, css: dividerStyle }), (0, jsx_runtime_1.jsx)("div", { ref: sidebarRef, css: sidebarContainerStyle, children: (0, jsx_runtime_1.jsx)(Sidebar_1.default, {}) })] }));
+};
+exports.default = App;

package/dist/renderer/Sidebar.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Sidebar: React.FC;
+export default Sidebar;

package/dist/renderer/Sidebar.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+const react_1 = require("@emotion/react");
+const sidebarStyle = (0, react_1.css) `
+  height: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  display: flex;
+  flex-direction: column;
+  font-size: 12px;
+`;
+const sidebarHeaderStyle = (0, react_1.css) `
+  padding: 8px 12px;
+  border-bottom: 1px solid #3C4043;
+  background-color: #202124;
+`;
+const headingStyle = (0, react_1.css) `
+  color: #fff;
+  font-size: 16px;
+  font-weight: 400;
+`;
+const sectionStyle = (0, react_1.css) `
+  margin-bottom: 8px;
+  border-bottom: 1px solid #3C4043;
+`;
+const sectionHeaderStyle = (0, react_1.css) `
+  padding: 8px 12px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #E8EAED;
+  background-color: #2D2F31;
+  cursor: pointer;
+  user-select: none;
+`;
+const sectionContentStyle = (0, react_1.css) `
+  padding: 8px 12px;
+`;
+const paragraphStyle = (0, react_1.css) `
+  color: #9AA0A6;
+  margin-bottom: 6px;
+  line-height: 1.4;
+  font-size: 12px;
+`;
+const codeStyle = (0, react_1.css) `
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  color: #E8EAED;
+`;
+const consoleLineStyle = (0, react_1.css) `
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  margin-bottom: 4px;
+  line-height: 1.5;
+`;
+const consoleInfoStyle = (0, react_1.css) `
+  color: #8AB4F8;
+  margin-right: 6px;
+`;
+const consoleWarningStyle = (0, react_1.css) `
+  color: #F29900;
+  margin-right: 6px;
+`;
+const consoleInputStyle = (0, react_1.css) `
+  color: #9AA0A6;
+`;
+const consoleOutputStyle = (0, react_1.css) `
+  color: #80CBC4;
+`;
+const indentStyle = (level) => (0, react_1.css) `
+  margin-left: ${level * 20}px;
+`;
+const Sidebar = () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { css: sidebarStyle, children: [(0, jsx_runtime_1.jsx)("div", { css: sidebarHeaderStyle, children: (0, jsx_runtime_1.jsx)("h1", { css: headingStyle, children: "DevTools Panel" }) }), (0, jsx_runtime_1.jsxs)("div", { css: sectionStyle, children: [(0, jsx_runtime_1.jsx)("div", { css: sectionHeaderStyle, children: "Elements" }), (0, jsx_runtime_1.jsxs)("div", { css: sectionContentStyle, children: [(0, jsx_runtime_1.jsx)("p", { css: paragraphStyle, children: (0, jsx_runtime_1.jsx)("code", { css: codeStyle, children: "<html>" }) }), (0, jsx_runtime_1.jsx)("p", { css: [paragraphStyle, indentStyle(1)], children: (0, jsx_runtime_1.jsx)("code", { css: codeStyle, children: "<head>...</head>" }) }), (0, jsx_runtime_1.jsx)("p", { css: [paragraphStyle, indentStyle(1)], children: (0, jsx_runtime_1.jsx)("code", { css: codeStyle, children: "<body>" }) }), (0, jsx_runtime_1.jsx)("p", { css: [paragraphStyle, indentStyle(2)], children: (0, jsx_runtime_1.jsx)("code", { css: codeStyle, children: "<div id=\"root\">" }) }), (0, jsx_runtime_1.jsx)("p", { css: [paragraphStyle, indentStyle(3)], children: (0, jsx_runtime_1.jsx)("code", { css: codeStyle, children: "<div class=\"app-container\">" }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { css: sectionStyle, children: [(0, jsx_runtime_1.jsx)("div", { css: sectionHeaderStyle, children: "Console" }), (0, jsx_runtime_1.jsxs)("div", { css: sectionContentStyle, children: [(0, jsx_runtime_1.jsxs)("p", { css: consoleLineStyle, children: [(0, jsx_runtime_1.jsx)("span", { css: consoleInfoStyle, children: "\u2139\uFE0F " }), "React app loaded successfully"] }), (0, jsx_runtime_1.jsxs)("p", { css: consoleLineStyle, children: [(0, jsx_runtime_1.jsx)("span", { css: consoleWarningStyle, children: "\u26A0\uFE0F " }), "Resizable sidebar is active"] }), (0, jsx_runtime_1.jsx)("p", { css: [consoleLineStyle, consoleInputStyle], children: "> document.title" }), (0, jsx_runtime_1.jsx)("p", { css: [consoleLineStyle, consoleOutputStyle], children: "\"Phygrid Browser\"" })] })] }), (0, jsx_runtime_1.jsxs)("div", { css: sectionStyle, children: [(0, jsx_runtime_1.jsx)("div", { css: sectionHeaderStyle, children: "Instructions" }), (0, jsx_runtime_1.jsxs)("div", { css: sectionContentStyle, children: [(0, jsx_runtime_1.jsx)("p", { css: paragraphStyle, children: "This sidebar emulates Chrome DevTools" }), (0, jsx_runtime_1.jsxs)("p", { css: paragraphStyle, children: [(0, jsx_runtime_1.jsx)("strong", { children: "Drag the vertical divider" }), " to resize this panel"] })] })] })] }));
+};
+exports.default = Sidebar;