Nathan Walker NathanWalker

Electron: an accessory view in a message box on macOS

For electron/electron#12437: dialog.showMessageBox with an accessory view, here a scrollable, selectable, monospaced stack trace with a Copy button.

NativeScript's macOS runtime makes every Objective-C class a global in Electron's main process, and JavaScript classes can subclass them. Nothing to compile, no addon, no patch to Electron.

See it running

On an Apple Silicon Mac with macOS 14.4 or later:

Electron: a non-activating, keyboard-focusable panel on macOS

For electron/electron#52915: a Spotlight-like input panel that takes typing while the app the user was in stays active.

NativeScript's macOS runtime makes every Objective-C class a global in Electron's main process, and JavaScript classes can subclass them. Nothing to compile, no addon, no patch to Electron.

See it running

On an Apple Silicon Mac with macOS 14.4 or later:

ns-bitrig: NativeScript on Bitrig's simulators

Bitrig hosts its iOS simulators in its own device set (~/Library/Bitrig/Simulators); the NativeScript CLI only looks at Apple's default set, so ns run ios does not see them. ns-bitrig.sh runs the unmodified CLI with three process-local shims:

xcrun simctl … becomes xcrun simctl --set ~/Library/Bitrig/Simulators …;
open Simulator.app is skipped while Bitrig shows a booted device;
the CLI's installed-app lookup, which reads Apple's default simulator

[Draft] Deep-dive: How NativeScript's JS->native bindings work

What is NativeScript?

NativeScript is a JavaScript runtime that allows you to write an iOS or Android app entirely in TypeScript or JavaScript with no compromises. That is to say, it provides you with the same level of native access that writing the app in Obj-C/Swift (for iOS) or Java/Kotlin (for Android) does. Not just JSON-serialisable data types like NSString, but all data types are supported. To illustrate what it's all about, here's how you would get the battery level using NativeScript (the below snippet is entirely JS code!):

import { isIOS, isAndroid, Application } from "@nativescript/core";

/**

	import * as nodePath from 'path';
	import paths from 'tsconfig-paths';
	import * as tsconfig from 'tsconfig-extends';
	import Project from 'ts-simple-ast';

	// use `tsconfig-extends` module cause it can recursively apply "extends" field
	const compilerOptions = tsconfig.load_file_sync('./tsconfig.json');
	const absoluteBaseUrl = nodePath.join(process.cwd(), compilerOptions.baseUrl);
	const matchPathFunc = paths.createMatchPath(absoluteBaseUrl, compilerOptions.paths \|\| {});
	const project = new Project({ compilerOptions });

	// In case of Angular, this is the component that contains a view with a <RadSideDrawer>

	export class MenuComponent implements AfterViewInit {

	@ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent;
	private _drawer: SideDrawerType;

	ngAfterViewInit(): void {
	this._drawer = this.drawerComponent.sideDrawer;
	this._changeDetectionRef.detectChanges();

	// angular
	import {Component} from '@angular/core';

	@Component({
	moduleId: module.id,
	selector: 'app',
	template: `
	<StackLayout>
	<page-router-outlet></page-router-outlet>
	</StackLayout>

	var pkg = require('./package.json');
	var path = require('path');
	var Builder = require('systemjs-builder');
	var name = pkg.name;

	var builder = new Builder();
	var config = {
	baseURL: '.',
	transpiler: 'typescript',
	typescriptOptions: {

	# Change YOUR_TOKEN to your prerender token
	# Change http://example.com (at the end of the last RewriteRule) to your website url

	<IfModule mod_headers.c>
	RequestHeader set X-Prerender-Token "YOUR_TOKEN"
	</IfModule>

	<IfModule mod_rewrite.c>
	RewriteEngine On