willium/index.html Secret

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <link rel="stylesheet" type="text/css" href="./styles.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <canvas id="canvas"/>
    <!-- All of the Node.js APIs are available in this renderer process. -->
    We are using Node.js <script>document.write(process.versions.node)</script>,
    Chromium <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.

    <script>
      // You can also require other files to run in this process
      require('./renderer.js')
    </script>
  </body>
</html>

## main.js
// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true
    }
  })

  // and load the index.html of the app.
  mainWindow.loadFile('index.html')

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(createWindow)

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

## preload.js
import { contextBridge } from "electron"

contextBridge.exposeInMainWorld("electron", {
  foo: (bar) => bar,
  connect: (port, connection) => {
		if (!validPorts.includes(port)) {
			throw new Error(`Invalid Channel "${port}"`)
		}

		const wrappedCallback = ({ ports }, _) => {
			if (ports.length !== 0) throw new Error("Connection requires (1) port")

			ports.forEach((messagePort) => {

				const post = (outgoing, transferables) => {
					messagePort.postMessage(outgoing, transferables)
				}

				const reply = (outgoing) => {
					messagePort.postMessage(outgoing)
				}

				const disconnect = () => {
					ipcRenderer.removeListener(port, wrappedCallback)
				}

				messagePort.onmessage = ({ data }) => {
					connection(data, post, reply, disconnect)
				}
				messagePort.onmessageerror = ({ data }) => {
					connection(data, post, reply, disconnect)
				}

				messagePort.start()
			})
		}

		ipcRenderer.on(port, wrappedCallback)
	},
})

## renderer.js
const buf = new ArrayBuffer(20)
const resp = window.electron.foo(buf)

console.log({
  buf,
  resp,
  eq: buf === resp
})

const htmlCanvas = document.getElementById("canvas");
const offscreen = htmlCanvas.transferControlToOffscreen();
const screenresp = window.electron.foo(offscreen)

console.log({
  offscreen,
  screenresp,
  eq: offscreen === screenresp
})

## styles.css
/* Empty */
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Hello World!</title>
	<link rel="stylesheet" type="text/css" href="./styles.css">
	</head>
	<body>
	<h1>Hello World!</h1>
	<canvas id="canvas"/>
	<!-- All of the Node.js APIs are available in this renderer process. -->
	We are using Node.js <script>document.write(process.versions.node)</script>,
	Chromium <script>document.write(process.versions.chrome)</script>,
	and Electron <script>document.write(process.versions.electron)</script>.

	<script>
	// You can also require other files to run in this process
	require('./renderer.js')
	</script>
	</body>
	</html>
	// Modules to control application life and create native browser window
	const {app, BrowserWindow} = require('electron')

	function createWindow () {
	// Create the browser window.
	const mainWindow = new BrowserWindow({
	width: 800,
	height: 600,
	webPreferences: {
	nodeIntegration: false,
	contextIsolation: true
	}
	})

	// and load the index.html of the app.
	mainWindow.loadFile('index.html')

	// Open the DevTools.
	// mainWindow.webContents.openDevTools()
	}

	// This method will be called when Electron has finished
	// initialization and is ready to create browser windows.
	// Some APIs can only be used after this event occurs.
	app.whenReady().then(createWindow)

	// Quit when all windows are closed, except on macOS. There, it's common
	// for applications and their menu bar to stay active until the user quits
	// explicitly with Cmd + Q.
	app.on('window-all-closed', function () {
	if (process.platform !== 'darwin') {
	app.quit()
	}
	})

	app.on('activate', function () {
	// On OS X it's common to re-create a window in the app when the
	// dock icon is clicked and there are no other windows open.
	if (BrowserWindow.getAllWindows().length === 0) {
	createWindow()
	}
	})

	// In this file you can include the rest of your app's specific main process
	// code. You can also put them in separate files and require them here.
	import { contextBridge } from "electron"

	contextBridge.exposeInMainWorld("electron", {
	foo: (bar) => bar,
	connect: (port, connection) => {
	if (!validPorts.includes(port)) {
	throw new Error(`Invalid Channel "${port}"`)
	}

	const wrappedCallback = ({ ports }, _) => {
	if (ports.length !== 0) throw new Error("Connection requires (1) port")

	ports.forEach((messagePort) => {

	const post = (outgoing, transferables) => {
	messagePort.postMessage(outgoing, transferables)
	}

	const reply = (outgoing) => {
	messagePort.postMessage(outgoing)
	}

	const disconnect = () => {
	ipcRenderer.removeListener(port, wrappedCallback)
	}

	messagePort.onmessage = ({ data }) => {
	connection(data, post, reply, disconnect)
	}
	messagePort.onmessageerror = ({ data }) => {
	connection(data, post, reply, disconnect)
	}

	messagePort.start()
	})
	}

	ipcRenderer.on(port, wrappedCallback)
	},
	})
	const buf = new ArrayBuffer(20)
	const resp = window.electron.foo(buf)

	console.log({
	buf,
	resp,
	eq: buf === resp
	})

	const htmlCanvas = document.getElementById("canvas");
	const offscreen = htmlCanvas.transferControlToOffscreen();
	const screenresp = window.electron.foo(offscreen)

	console.log({
	offscreen,
	screenresp,
	eq: offscreen === screenresp
	})