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

Allow plugins to use css

Browse Source 
Summary:
Flipper plugins fail when importing css from third-party dependencies. This diff tries to fix that.

Effectively, the plugin can import the css and export it when is bundled.

When we load the plugin, we check if there's a css file for it. If there's one, we return it and try to use it.

Reviewed By: aigoncharov

Differential Revision: D40758178

fbshipit-source-id: e53afffcc481504905d5eeb1aea1f9114ee2a86b
This commit is contained in:
Lorenzo Blasa
2022-10-27 22:50:30 -07:00
committed by Facebook GitHub Bot
parent ff282630be
commit 587f428cf8
15 changed files with 94 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
desktop/flipper-server-companion/src/HeadlessPluginInitializer.tsx
View File

@@ -26,15 +26,15 @@ export class HeadlessPluginInitializer extends AbstractPluginInitializer {
protected async requirePluginImpl(
pluginDetails: ActivatablePluginDetails,
): Promise<_SandyPluginDefinition> {
const plugin = await getRenderHostInstance().requirePlugin(
const requiredPlugin = await getRenderHostInstance().requirePlugin(
pluginDetails.entry,
);
if (!plugin) {
if (!requiredPlugin || !requiredPlugin.plugin) {
throw new Error(
`Failed to obtain plugin source for: ${pluginDetails.name}`,
);
}
return new _SandyPluginDefinition(pluginDetails, plugin);
return new _SandyPluginDefinition(pluginDetails, requiredPlugin.plugin);
}
protected async filterAllLocalVersions(

16
desktop/flipper-server-companion/src/initializeRenderHost.tsx
View File

@@ -31,7 +31,7 @@ export function initializeRenderHost(
async exportFileBinary() {
throw new Error('Not implemented');
},
openLink(url: string) {
openLink(_url: string) {
throw new Error('Not implemented');
},
hasFocus() {
@@ -54,22 +54,24 @@ export function initializeRenderHost(
return flipperServerConfig.gatekeepers[gatekeeper] ?? false;
},
flipperServer,
async requirePlugin(path) {
let source = await flipperServer.exec('plugin-source', path);
async requirePlugin(path): Promise<{plugin: any; css?: string}> {
const source = await flipperServer.exec('plugin-source', path);
let js = source.js;
// append source url (to make sure a file entry shows up in the debugger)
source += `\n//# sourceURL=file://${path}`;
js += `\n//# sourceURL=file://${path}`;
// and source map url (to get source code if available)
source += `\n//# sourceMappingURL=file://${path.replace(/.js$/, '.map')}`;
js += `\n//# sourceMappingURL=file://${path.replace(/.js$/, '.map')}`;
// Plugins are compiled as typical CJS modules, referring to the global
// 'module', which we'll make available by loading the source into a closure that captures 'module'.
// Note that we use 'eval', and not 'new Function', because the latter will cause the source maps
// to be off by two lines (as the function declaration uses two lines in the generated source)
// eslint-disable-next-line no-eval
const cjsLoader = eval('(module) => {' + source + '\n}');
const cjsLoader = eval('(module) => {' + js + '\n}');
const theModule = {exports: {}};
cjsLoader(theModule);
return theModule.exports;
return {plugin: theModule.exports};
},
getStaticResourceUrl(path): string {
// the 'static' folder is mounted as static middleware in Express at the root