jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Separate interfaces for installed, bundled and downloadable plugins

Browse Source 
Summary:
I've re-designed interfaces describing plugins as I found that mental overhead working with them became too expensive because of slightly flawed design. However this cascaded changes in many files so you can see how extensively these interfaces used in our codebase.

Before this change we had one interface PluginDetails which described three different entities: 1) plugins installed on the disk 2) plugins bundled into Flipper 3) plugins available on Marketplace. It's hard to use this "general" PluginDetails interface because of this as you always need to think about all three use cases everywhere.

After this change we have 3 separate interfaces: InstalledPluginDetails, BundledPluginDetails and DownloadablePluginDetails and things became much type-safer now.

Reviewed By: mweststrate

Differential Revision: D25530383

fbshipit-source-id: b93593916a980c04e36dc6ffa168797645a0ff9c
This commit is contained in:
Anton Nikolaev
2020-12-15 09:28:58 -08:00
committed by Facebook GitHub Bot
parent efb82e80b5
commit 5383017299
27 changed files with 327 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
desktop/app/src/dispatcher/__tests__/plugins.node.tsx
View File

@@ -16,7 +16,7 @@ import dispatcher, {
createRequirePluginFunction,
filterNewestVersionOfEachPlugin,
} from '../plugins';
import {PluginDetails} from 'flipper-plugin-lib';
import {BundledPluginDetails, InstalledPluginDetails} from 'flipper-plugin-lib';
import path from 'path';
import {remote} from 'electron';
import {FlipperPlugin} from '../../plugin';
@@ -37,17 +37,23 @@ const mockStore = configureStore<State, {}>([])(
);
const logger = getInstance();
const samplePluginDetails: PluginDetails = {
const sampleInstalledPluginDetails: InstalledPluginDetails = {
name: 'other Name',
entry: './test/index.js',
version: '1.0.0',
specVersion: 2,
main: 'dist/bundle.js',
dir: '/Users/mock/.flipper/thirdparty/flipper-plugin-sample',
source: 'src/index.js',
id: 'Sample',
title: 'Sample',
isDefault: false,
dir: '/Users/mock/.flipper/thirdparty/flipper-plugin-sample',
entry: 'this/path/does not/exist',
isBundled: false,
isActivatable: true,
};
const sampleBundledPluginDetails: BundledPluginDetails = {
...sampleInstalledPluginDetails,
isBundled: true,
};
beforeEach(() => {
@@ -80,18 +86,16 @@ test('checkDisabled', () => {
expect(
disabled({
...samplePluginDetails,
...sampleBundledPluginDetails,
name: 'other Name',
entry: './test/index.js',
version: '1.0.0',
}),
).toBeTruthy();
expect(
disabled({
...samplePluginDetails,
...sampleBundledPluginDetails,
name: disabledPlugin,
entry: './test/index.js',
version: '1.0.0',
}),
).toBeFalsy();
@@ -100,9 +104,8 @@ test('checkDisabled', () => {
test('checkGK for plugin without GK', () => {
expect(
checkGK([])({
...samplePluginDetails,
...sampleBundledPluginDetails,
name: 'pluginID',
entry: './test/index.js',
version: '1.0.0',
}),
).toBeTruthy();
@@ -111,23 +114,21 @@ test('checkGK for plugin without GK', () => {
test('checkGK for passing plugin', () => {
expect(
checkGK([])({
...samplePluginDetails,
...sampleBundledPluginDetails,
name: 'pluginID',
gatekeeper: TEST_PASSING_GK,
entry: './test/index.js',
version: '1.0.0',
}),
).toBeTruthy();
});
test('checkGK for failing plugin', () => {
const gatekeepedPlugins: PluginDetails[] = [];
const gatekeepedPlugins: InstalledPluginDetails[] = [];
const name = 'pluginID';
const plugins = checkGK(gatekeepedPlugins)({
...samplePluginDetails,
...sampleBundledPluginDetails,
name,
gatekeeper: TEST_FAILING_GK,
entry: './test/index.js',
version: '1.0.0',
});
@@ -138,8 +139,9 @@ test('checkGK for failing plugin', () => {
test('requirePlugin returns null for invalid requires', () => {
const requireFn = createRequirePluginFunction([], require);
const plugin = requireFn({
...samplePluginDetails,
...sampleInstalledPluginDetails,
name: 'pluginID',
dir: '/Users/mock/.flipper/thirdparty/flipper-plugin-sample',
entry: 'this/path/does not/exist',
version: '1.0.0',
});
@@ -151,8 +153,9 @@ test('requirePlugin loads plugin', () => {
const name = 'pluginID';
const requireFn = createRequirePluginFunction([], require);
const plugin = requireFn({
...samplePluginDetails,
...sampleInstalledPluginDetails,
name,
dir: '/Users/mock/.flipper/thirdparty/flipper-plugin-sample',
entry: path.join(__dirname, 'TestPlugin'),
version: '1.0.0',
});
@@ -162,21 +165,33 @@ test('requirePlugin loads plugin', () => {
});
test('newest version of each plugin is used', () => {
const bundledPlugins: PluginDetails[] = [
{...samplePluginDetails, name: 'flipper-plugin-test1', version: '0.1.0'},
const bundledPlugins: BundledPluginDetails[] = [
{
...samplePluginDetails,
...sampleBundledPluginDetails,
name: 'flipper-plugin-test1',
version: '0.1.0',
},
{
...sampleBundledPluginDetails,
name: 'flipper-plugin-test2',
version: '0.1.0-alpha.201',
},
];
const installedPlugins: PluginDetails[] = [
const installedPlugins: InstalledPluginDetails[] = [
{
...samplePluginDetails,
...sampleInstalledPluginDetails,
name: 'flipper-plugin-test2',
version: '0.1.0-alpha.21',
dir: '/Users/mock/.flipper/thirdparty/flipper-plugin-test2',
entry: './test/index.js',
},
{
...sampleInstalledPluginDetails,
name: 'flipper-plugin-test1',
version: '0.10.0',
dir: '/Users/mock/.flipper/thirdparty/flipper-plugin-test1',
entry: './test/index.js',
},
{...samplePluginDetails, name: 'flipper-plugin-test1', version: '0.10.0'},
];
const filteredPlugins = filterNewestVersionOfEachPlugin(
bundledPlugins,
@@ -184,12 +199,14 @@ test('newest version of each plugin is used', () => {
);
expect(filteredPlugins).toHaveLength(2);
expect(filteredPlugins).toContainEqual({
...samplePluginDetails,
...sampleInstalledPluginDetails,
name: 'flipper-plugin-test1',
version: '0.10.0',
dir: '/Users/mock/.flipper/thirdparty/flipper-plugin-test1',
entry: './test/index.js',
});
expect(filteredPlugins).toContainEqual({
...samplePluginDetails,
...sampleBundledPluginDetails,
name: 'flipper-plugin-test2',
version: '0.1.0-alpha.201',
});
@@ -198,21 +215,33 @@ test('newest version of each plugin is used', () => {
test('bundled versions are used when env var FLIPPER_DISABLE_PLUGIN_AUTO_UPDATE is set even if newer versions are installed', () => {
process.env.FLIPPER_DISABLE_PLUGIN_AUTO_UPDATE = 'true';
try {
const bundledPlugins: PluginDetails[] = [
{...samplePluginDetails, name: 'flipper-plugin-test1', version: '0.1.0'},
const bundledPlugins: BundledPluginDetails[] = [
{
...samplePluginDetails,
...sampleBundledPluginDetails,
name: 'flipper-plugin-test1',
version: '0.1.0',
},
{
...sampleBundledPluginDetails,
name: 'flipper-plugin-test2',
version: '0.1.0-alpha.21',
},
];
const installedPlugins: PluginDetails[] = [
const installedPlugins: InstalledPluginDetails[] = [
{
...samplePluginDetails,
...sampleInstalledPluginDetails,
name: 'flipper-plugin-test2',
version: '0.1.0-alpha.201',
dir: '/Users/mock/.flipper/thirdparty/flipper-plugin-test2',
entry: './test/index.js',
},
{
...sampleInstalledPluginDetails,
name: 'flipper-plugin-test1',
version: '0.10.0',
dir: '/Users/mock/.flipper/thirdparty/flipper-plugin-test1',
entry: './test/index.js',
},
{...samplePluginDetails, name: 'flipper-plugin-test1', version: '0.10.0'},
];
const filteredPlugins = filterNewestVersionOfEachPlugin(
bundledPlugins,
@@ -220,12 +249,12 @@ test('bundled versions are used when env var FLIPPER_DISABLE_PLUGIN_AUTO_UPDATE
);
expect(filteredPlugins).toHaveLength(2);
expect(filteredPlugins).toContainEqual({
...samplePluginDetails,
...sampleBundledPluginDetails,
name: 'flipper-plugin-test1',
version: '0.1.0',
});
expect(filteredPlugins).toContainEqual({
...samplePluginDetails,
...sampleBundledPluginDetails,
name: 'flipper-plugin-test2',
version: '0.1.0-alpha.21',
});
@@ -238,8 +267,12 @@ test('requirePlugin loads valid Sandy plugin', () => {
const name = 'pluginID';
const requireFn = createRequirePluginFunction([], require);
const plugin = requireFn({
...samplePluginDetails,
...sampleInstalledPluginDetails,
name,
dir: path.join(
__dirname,
'../../../../flipper-plugin/src/__tests__/TestPlugin',
),
entry: path.join(
__dirname,
'../../../../flipper-plugin/src/__tests__/TestPlugin',
@@ -253,7 +286,7 @@ test('requirePlugin loads valid Sandy plugin', () => {
expect(plugin.details).toMatchObject({
flipperSDKVersion: '0.0.0',
id: 'Sample',
isDefault: false,
isBundled: false,
main: 'dist/bundle.js',
name: 'pluginID',
source: 'src/index.js',
@@ -272,9 +305,10 @@ test('requirePlugin errors on invalid Sandy plugin', () => {
const failedPlugins: any[] = [];
const requireFn = createRequirePluginFunction(failedPlugins, require);
requireFn({
...samplePluginDetails,
...sampleInstalledPluginDetails,
name,
// Intentionally the wrong file:
dir: __dirname,
entry: path.join(__dirname, 'TestPlugin'),
version: '1.0.0',
flipperSDKVersion: '0.0.0',
@@ -288,8 +322,12 @@ test('requirePlugin loads valid Sandy Device plugin', () => {
const name = 'pluginID';
const requireFn = createRequirePluginFunction([], require);
const plugin = requireFn({
...samplePluginDetails,
...sampleInstalledPluginDetails,
name,
dir: path.join(
__dirname,
'../../../../flipper-plugin/src/__tests__/DeviceTestPlugin',
),
entry: path.join(
__dirname,
'../../../../flipper-plugin/src/__tests__/DeviceTestPlugin',
@@ -303,7 +341,7 @@ test('requirePlugin loads valid Sandy Device plugin', () => {
expect(plugin.details).toMatchObject({
flipperSDKVersion: '0.0.0',
id: 'Sample',
isDefault: false,
isBundled: false,
main: 'dist/bundle.js',
name: 'pluginID',
source: 'src/index.js',

30
desktop/app/src/dispatcher/pluginDownloads.tsx
View File

@@ -9,6 +9,8 @@
import {
DownloadablePluginDetails,
getInstalledPluginDetails,
getPluginVersionInstallationDir,
installPluginFromFile,
} from 'flipper-plugin-lib';
import {Store} from '../reducers/index';
@@ -62,23 +64,24 @@ async function handlePluginDownload(
store: Store,
) {
const dispatch = store.dispatch;
const {name, title, version, downloadUrl, dir} = plugin;
const {name, title, version, downloadUrl} = plugin;
const installationDir = getPluginVersionInstallationDir(name, version);
console.log(
`Downloading plugin "${title}" v${version} from "${downloadUrl}" to "${dir}".`,
`Downloading plugin "${title}" v${version} from "${downloadUrl}" to "${installationDir}".`,
);
const targetDir = await getTempDirName();
const targetFile = path.join(targetDir, `${name}-${version}.tgz`);
const tmpDir = await getTempDirName();
const tmpFile = path.join(tmpDir, `${name}-${version}.tgz`);
try {
const cancellationSource = axios.CancelToken.source();
dispatch(
pluginDownloadStarted({plugin, cancel: cancellationSource.cancel}),
);
if (await fs.pathExists(dir)) {
if (await fs.pathExists(installationDir)) {
console.log(
`Using existing files instead of downloading plugin "${title}" v${version} from "${downloadUrl}" to "${dir}"`,
`Using existing files instead of downloading plugin "${title}" v${version} from "${downloadUrl}" to "${installationDir}"`,
);
} else {
await fs.ensureDir(targetDir);
await fs.ensureDir(tmpDir);
let percentCompleted = 0;
const response = await axios.get(plugin.downloadUrl, {
adapter: axiosHttpAdapter,
@@ -103,15 +106,16 @@ async function handlePluginDownload(
}
const responseStream = response.data as fs.ReadStream;
const writeStream = responseStream.pipe(
fs.createWriteStream(targetFile, {autoClose: true}),
fs.createWriteStream(tmpFile, {autoClose: true}),
);
await new Promise((resolve, reject) =>
writeStream.once('finish', resolve).once('error', reject),
);
await installPluginFromFile(targetFile);
await installPluginFromFile(tmpFile);
}
const installedPlugin = await getInstalledPluginDetails(installationDir);
if (!store.getState().plugins.clientPlugins.has(plugin.id)) {
const pluginDefinition = requirePlugin(plugin);
const pluginDefinition = requirePlugin(installedPlugin);
dispatch(
registerPluginUpdate({
plugin: pluginDefinition,
@@ -120,11 +124,11 @@ async function handlePluginDownload(
);
}
console.log(
`Successfully downloaded and installed plugin "${title}" v${version} from "${downloadUrl}" to "${dir}".`,
`Successfully downloaded and installed plugin "${title}" v${version} from "${downloadUrl}" to "${installationDir}".`,
);
} catch (error) {
console.error(
`Failed to download plugin "${title}" v${version} from "${downloadUrl}" to "${dir}".`,
`Failed to download plugin "${title}" v${version} from "${downloadUrl}" to "${installationDir}".`,
error,
);
if (startedByUser) {
@@ -144,6 +148,6 @@ async function handlePluginDownload(
}
} finally {
dispatch(pluginDownloadFinished({plugin}));
await fs.remove(targetDir);
await fs.remove(tmpDir);
}
}

49
desktop/app/src/dispatcher/plugins.tsx
View File

@@ -29,7 +29,11 @@ import isProduction from '../utils/isProduction';
import {notNull} from '../utils/typeUtils';
import {sideEffect} from '../utils/sideEffect';
import semver from 'semver';
import {PluginDetails} from 'flipper-plugin-lib';
import {
ActivatablePluginDetails,
BundledPluginDetails,
InstalledPluginDetails,
} from 'flipper-plugin-lib';
import {tryCatchReportPluginFailures, reportUsage} from '../utils/metrics';
import * as FlipperPluginSDK from 'flipper-plugin';
import {_SandyPluginDefinition} from 'flipper-plugin';
@@ -51,9 +55,9 @@ export default async (store: Store, logger: Logger) => {
globalObject.FlipperPlugin = FlipperPluginSDK;
globalObject.Immer = Immer;
const gatekeepedPlugins: Array<PluginDetails> = [];
const disabledPlugins: Array<PluginDetails> = [];
const failedPlugins: Array<[PluginDetails, string]> = [];
const gatekeepedPlugins: Array<ActivatablePluginDetails> = [];
const disabledPlugins: Array<ActivatablePluginDetails> = [];
const failedPlugins: Array<[ActivatablePluginDetails, string]> = [];
defaultPluginsIndex = getDefaultPluginsIndex();
@@ -89,7 +93,7 @@ export default async (store: Store, logger: Logger) => {
);
};
function reportVersion(pluginDetails: PluginDetails) {
function reportVersion(pluginDetails: ActivatablePluginDetails) {
reportUsage(
'plugin:version',
{
@@ -101,10 +105,10 @@ function reportVersion(pluginDetails: PluginDetails) {
}
export function filterNewestVersionOfEachPlugin(
bundledPlugins: PluginDetails[],
dynamicPlugins: PluginDetails[],
): PluginDetails[] {
const pluginByName: {[key: string]: PluginDetails} = {};
bundledPlugins: BundledPluginDetails[],
dynamicPlugins: InstalledPluginDetails[],
): ActivatablePluginDetails[] {
const pluginByName: {[key: string]: ActivatablePluginDetails} = {};
for (const plugin of bundledPlugins) {
pluginByName[plugin.name] = plugin;
}
@@ -120,7 +124,7 @@ export function filterNewestVersionOfEachPlugin(
return Object.values(pluginByName);
}
function getBundledPlugins(): Array<PluginDetails> {
function getBundledPlugins(): Array<BundledPluginDetails> {
// DefaultPlugins that are included in the bundle.
// List of defaultPlugins is written at build time
const pluginPath =
@@ -129,7 +133,7 @@ function getBundledPlugins(): Array<PluginDetails> {
? path.join(__dirname, 'defaultPlugins')
: './defaultPlugins/index.json');
let bundledPlugins: Array<PluginDetails> = [];
let bundledPlugins: Array<BundledPluginDetails> = [];
try {
bundledPlugins = global.electronRequire(pluginPath);
} catch (e) {
@@ -148,8 +152,8 @@ export async function getDynamicPlugins() {
}
}
export const checkGK = (gatekeepedPlugins: Array<PluginDetails>) => (
plugin: PluginDetails,
export const checkGK = (gatekeepedPlugins: Array<ActivatablePluginDetails>) => (
plugin: ActivatablePluginDetails,
): boolean => {
if (!plugin.gatekeeper) {
return true;
@@ -161,7 +165,9 @@ export const checkGK = (gatekeepedPlugins: Array<PluginDetails>) => (
return result;
};
export const checkDisabled = (disabledPlugins: Array<PluginDetails>) => {
export const checkDisabled = (
disabledPlugins: Array<ActivatablePluginDetails>,
) => {
const enabledList = process.env.FLIPPER_ENABLED_PLUGINS
? new Set<string>(process.env.FLIPPER_ENABLED_PLUGINS.split(','))
: null;
@@ -171,7 +177,7 @@ export const checkDisabled = (disabledPlugins: Array<PluginDetails>) => {
} catch (e) {
console.error(e);
}
return (plugin: PluginDetails): boolean => {
return (plugin: ActivatablePluginDetails): boolean => {
if (disabledList.has(plugin.name)) {
disabledPlugins.push(plugin);
return false;
@@ -192,10 +198,10 @@ export const checkDisabled = (disabledPlugins: Array<PluginDetails>) => {
};
export const createRequirePluginFunction = (
failedPlugins: Array<[PluginDetails, string]>,
failedPlugins: Array<[ActivatablePluginDetails, string]>,
reqFn: Function = global.electronRequire,
) => {
return (pluginDetails: PluginDetails): PluginDefinition | null => {
return (pluginDetails: ActivatablePluginDetails): PluginDefinition | null => {
try {
return requirePlugin(pluginDetails, reqFn);
} catch (e) {
@@ -207,7 +213,7 @@ export const createRequirePluginFunction = (
};
export const requirePlugin = (
pluginDetails: PluginDetails,
pluginDetails: ActivatablePluginDetails,
reqFn: Function = global.electronRequire,
): PluginDefinition => {
return tryCatchReportPluginFailures(
@@ -218,10 +224,10 @@ export const requirePlugin = (
};
const requirePluginInternal = (
pluginDetails: PluginDetails,
pluginDetails: ActivatablePluginDetails,
reqFn: Function = global.electronRequire,
): PluginDefinition => {
let plugin = pluginDetails.isDefault
let plugin = pluginDetails.isBundled
? defaultPluginsIndex[pluginDetails.name]
: reqFn(pluginDetails.entry);
if (pluginDetails.flipperSDKVersion) {
@@ -248,7 +254,8 @@ const requirePluginInternal = (
// set values from package.json as static variables on class
Object.keys(pluginDetails).forEach((key) => {
if (key !== 'name' && key !== 'id') {
plugin[key] = plugin[key] || pluginDetails[key as keyof PluginDetails];
plugin[key] =
plugin[key] || pluginDetails[key as keyof ActivatablePluginDetails];
}
});
}