Allow plugins to use css

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

View File

@@ -57,6 +57,7 @@ exports[`can create a Fake flipper with legacy wrapper 2`] = `
Object {
"clientPlugins": Map {
"TestPlugin" => SandyPluginDefinition {
"css": undefined,
"details": Object {
"dir": "/Users/mock/.flipper/thirdparty/flipper-plugin-sample1",
"entry": "./test/index.js",

View File

@@ -79,6 +79,7 @@ test('requirePluginInternal loads plugin', async () => {
expect(plugin).not.toBeNull();
expect(Object.keys(plugin as any)).toEqual([
'id',
'css',
'details',
'isDevicePlugin',
'module',

View File

@@ -131,19 +131,24 @@ export const requirePlugin = (pluginDetails: ActivatablePluginDetails) =>
export const requirePluginInternal = async (
pluginDetails: ActivatablePluginDetails,
): Promise<PluginDefinition> => {
let plugin = await getRenderHostInstance().requirePlugin(
const requiredPlugin = await getRenderHostInstance().requirePlugin(
(pluginDetails as InstalledPluginDetails).entry,
);
if (!plugin) {
if (!requiredPlugin || !requiredPlugin.plugin) {
throw new Error(
`Failed to obtain plugin source for: ${pluginDetails.name}`,
);
}
if (isSandyPlugin(pluginDetails)) {
// Sandy plugin
return new _SandyPluginDefinition(pluginDetails, plugin);
return new _SandyPluginDefinition(
pluginDetails,
requiredPlugin.plugin,
requiredPlugin.css,
);
} else {
// classic plugin
// Classic plugin
let plugin = requiredPlugin.plugin;
if (plugin.default) {
plugin = plugin.default;
}