Gluon v0.11

CanadaHonk ยท January 8, 2023

Only 3 days since v0.10, here’s another big update. Gluon v0.11.0 is out with frictionless local file support, more IPC innovations, big stability fixes, and more!


Local File Support New API

Gluon now supports using local files as a website without using the file:// protocol, fixing CORS issues and some features only being available to http(s), also making it easier and requiring less boilerplate. If you provide a path to a directory or HTML file, it will load it specially with Gluon’s new “Local Support”.

For Chromium-based browsers, Gluon loads a custom browser-session-only internal domain (https://gluon.local) by talking to the browser. For Firefox-based browsers, Gluon starts a local HTTP server (as Firefox lacks support for such things).

node.js
// In your Node backend
import * as Gluon from '@gluon-framework/gluon';

// Loads index.html in the same directory as the script ran with Node
const Window = await Gluon.open('index.html');

// Loads "static" directory
const Window = await Gluon.open('static');

// Loads "static" directory, with custom index (not default index.html)
const Window = await Gluon.open('static/custom.html');

Before v0.11

Comparing to what was needed before v0.11 for opening a local index.html in the same folder as the script:

old_local_open.js
import * as Gluon from '@gluon-framework/gluon';
import { fileURLToPath, pathToFileURL } from 'url';
import { join, dirname } from 'path';

// Get __dirname equivalent for ESM
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

// Open Gluon window using file://
const Window = await Gluon.open(pathToFileURL(join(__dirname, 'index.html')).href);

With v0.11

new_local_open.js
import * as Gluon from '@gluon-framework/gluon';
const Window = await Gluon.open('index.html'); // Open Gluon window using new Local Support

A massive improvement! This is a massive quality of life and ease update for developers, opening local files/sites in just one line (unlike most other frameworks as well).


IPC Overhauled API

IPC Store New API

IPC now has a “Store” for sharing common data easily 2-way between Node and Web. You can use it just like an Object or use get(key) and set(key, value). Requires being re-set if the value changes, and values can only be JSON serializable.

node.js
// In your Node backend
import * as Gluon from '@gluon-framework/gluon';
const Window = await Gluon.open('https://gluonjs.org');

// Use like an Object
Window.ipc.store.config = {
  env: 'production'
};

await Window.page.loaded;

// Or use functions
const loggedIn = Window.ipc.store.get('loggedIn');
loggedIn // false
web.js
// In your website's JS

// Use like an Object
const { env } = Gluon.ipc.store.config;
env // 'production'

// Or use functions
Gluon.ipc.store.set('loggedIn', !!localStorage.getItem('token'));

Page Improved API

Title New API

The Node backend can now set and get the title of the page (and window), uses getter/setter instead of functions.

node.js
// In your Node backend
import * as Gluon from '@gluon-framework/gluon';
const Window = await Gluon.open('https://gluonjs.org');

await Window.page.title; // Get the current title as string
Window.page.title = 'new title'; // Set the title

Eval Error Handling Improved API

The eval function now properly handles errors and will return Errors like if executed in Web normally.

node.js
// In your Node backend
import * as Gluon from '@gluon-framework/gluon';
const Window = await Gluon.open('https://gluonjs.org');

await Window.page.eval(`notDefined`);
// ReferenceError: notDefined is not defined

Open Window Improved API

You can now specify a specific family of browser to open with forceEngine, and specifying chromium or firefox.

node.js
// In your Node backend
import * as Gluon from '@gluon-framework/gluon';

// Open a new Gluon window with a Chromium-based system installed browser
const ChromiumWindow = await Gluon.open('https://gluonjs.org', {
  forceEngine: 'chromium'
});

// Open a new Gluon window with a Firefox-based system installed browser
const FirefoxWindow = await Gluon.open('https://gluonjs.org', {
  forceEngine: 'firefox'
});

Stability Improvements

Also with v0.11, stability is much improved. Connecting to the browser should now be much more reliable, especially Firefox, due to more internal rewrites.


Hope you have fun with the new APIs and improvements! Let me know your feedback and opinions in the Discord.