The Future of Webshell (v3+)

Jules Sam. Randolph

Jules Sam. Randolph

Freelance React developer

This post will be regularly updated to track the main features scheduled for webshell.

Asynchronous Web to Native Communication

Native Usage

MyComponent.jsx
import * as React from 'react';
import { makeWebshell } from '@formidable-webview/webshell';
import { AsyncFlatteryFeature } from './AsyncFlatteryFeature';
const flatters = new AsyncFlatteryFeature();
const Webshell = makeWebshell(WebView, flatters);
// This function must return a promise!
function handleAsyncFlattery() {
return Promise.resolve('I love you too!');
}
export const MyComponent = (props) => {
return <Webshell onAsyncWebFlattery={handleFlattery} />;
};

Native Implementation

AsyncFlatteryFeature.js
import { FeatureBuilder } from '@formidable-webview/webshell';
import script from './AsyncFlatteryFeature.webjs';
export const AsyncFlatteryFeature = new FeatureBuilder({
script,
defaultOptions: {},
identifier: 'org.myorg/webshell.async-flattery'
})
.withAsyncShellHandler('onAsyncWebFlattery', 'flatters')
.build();

Web Implementation

AsyncFlatteryFeature.webjs
function AsyncFlatteryFeature(context) {
context
.postAsyncMessageToShell('flatters', 'I really like you.')
.then(function (response) {
console.info(response);
// 'I love you too!'
});
}

Asynchronous Native to Web Communication

Native Usage

MyComponent.jsx
import * as React from 'react';
import { makeWebshell } from '@formidable-webview/webshell';
import { AsyncFlatteryFeature } from './AsyncFlatteryFeature';
const flatteryFeature = new AsyncFlatteryFeature();
const Webshell = makeWebshell(WebView, flatteryFeature);
export const MyComponent = (props) => {
const webHandleRef = React.useRef();
React.useEffect(() => {
// props.user must be JSON-serializable
webHandleRef.current?
.postAsyncMessageToWeb(flatteryFeature, 'flatters', 'I really like you!')
.then(response => console.info(response));
}, []);
return <Webshell webHandleRef={webHandleRef} />;
};

Native Implementation

AsyncFlatteryFeature.js
import { FeatureBuilder } from '@formidable-webview/webshell';
import script from './AsyncFlatteryFeature.webjs';
export const AsyncFlatteryFeature = new FeatureBuilder({
script,
defaultOptions: {},
identifier: 'org.myorg/webshell.async-flattery'
})
.withAsyncWebHandler('flatters')
.build();

Web Implementation

AsyncFlatteryFeature.webjs
function AsyncFlatteryFeature(context) {
context.onAsyncShellMessage('flatters', function (message) {
return Promise.resolve('I love you too!')
});
}

Feature Cardinality

Specify the cardinality of a feature (how many instances can co-exist). We are planning to get inspiration from multi-instance plugins in docusaurus.