Cannot create custom plugin

mbiamont commented 5 years ago

🐛 Bug Report

I can't create a custom plugin. I've followed the tutorial but looks like the custom plugin isn't detected. In the Android side, the custom plugin is detected, but nothing appears in the Electron client.

See : Screenshot

Maybe it's coming from my configuration but I can't see where's the problem.

To Reproduce

I've pushed a sample here: https://github.com/mbiamont/sample-flipper-plugin

To test, simply clone it. And in ~.flipper/config.json, add the folder plugins from my project in the parameter pluginPaths.

For example, this is my version of config.json :

{"pluginPaths":["~/Workspace/other/sample-flipper-plugin/plugins/"],"disabledPlugins":[],"lastWindowPosition":{"x":12,"y":61,"width":1399,"height":877},"updaterEnabled":true}

Expected Behavior

I would expect to see my custom plugin appear in the Electron client.

Environment

I used Flipper Desktop 0.20.0 Same for Android: com.facebook.flipper:flipper:0.20.0

passy commented 5 years ago

Thanks for the detailed issue, @mbiamont!

Your setup looks correct to me. Can you try to start Flipper directly from the console to see if there are any logs about it trying to load the plugin? On MacOS, you can do that by running ~/Path/To/Flipper.app/Contents/MacOS/Flipper or yarn start in the repo checkout.

mbiamont commented 5 years ago

Thanks for the quick answer @passy .

Here're the logs:

➜  /Applications ./Flipper.app/Contents/MacOS/Flipper
🕵️‍  Watching for plugin changes
⚙️  Compiling sea-mammals...
❌  Plugin sea-mammals is ignored, because it could not be compiled.
Error: `fsevents` unavailable (this watcher can only be used on Darwin)
    at new FSEventsWatcher (/Applications/Flipper.app/Contents/Resources/app/node_modules/sane/src/fsevents_watcher.js:37:13)
    at createWatcher (/Applications/Flipper.app/Contents/Resources/app/node_modules/jest-haste-map/build/index.js:897:23)
    at Array.map (<anonymous>)
    at HasteMap._watch (/Applications/Flipper.app/Contents/Resources/app/node_modules/jest-haste-map/build/index.js:1062:44)
    at _buildPromise._buildFileMap.then.then.hasteMap (/Applications/Flipper.app/Contents/Resources/app/node_modules/jest-haste-map/build/index.js:440:23)
✅  Compiled all plugins.
2019-05-14 06:41:47.753 Flipper[48465:1034543] *** WARNING: Textured window <AtomNSWindow: 0x7fc81e507740> is getting an implicitly transparent titlebar. This will break when linking against newer SDKs. Use NSWindow's -titlebarAppearsTransparent=YES instead.
(node:48465) UnhandledPromiseRejectionWarning: Error: `fsevents` unavailable (this watcher can only be used on Darwin)
    at new FSEventsWatcher (/Applications/Flipper.app/Contents/Resources/app/node_modules/sane/src/fsevents_watcher.js:37:13)
    at createWatcher (/Applications/Flipper.app/Contents/Resources/app/node_modules/jest-haste-map/build/index.js:897:23)
    at Array.map (<anonymous>)
    at HasteMap._watch (/Applications/Flipper.app/Contents/Resources/app/node_modules/jest-haste-map/build/index.js:1062:44)
    at _buildPromise._buildFileMap.then.then.hasteMap (/Applications/Flipper.app/Contents/Resources/app/node_modules/jest-haste-map/build/index.js:440:23)
(node:48465) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:48465) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
(node:48465) UnhandledPromiseRejectionWarning: Error: `fsevents` unavailable (this watcher can only be used on Darwin)
    at new FSEventsWatcher (/Applications/Flipper.app/Contents/Resources/app/node_modules/sane/src/fsevents_watcher.js:37:13)
    at createWatcher (/Applications/Flipper.app/Contents/Resources/app/node_modules/jest-haste-map/build/index.js:897:23)
    at Array.map (<anonymous>)
    at HasteMap._watch (/Applications/Flipper.app/Contents/Resources/app/node_modules/jest-haste-map/build/index.js:1062:44)
    at _buildPromise._buildFileMap.then.then.hasteMap (/Applications/Flipper.app/Contents/Resources/app/node_modules/jest-haste-map/build/index.js:440:23)
(node:48465) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:48465) UnhandledPromiseRejectionWarning: Error: `fsevents` unavailable (this watcher can only be used on Darwin)
    at new FSEventsWatcher (/Applications/Flipper.app/Contents/Resources/app/node_modules/sane/src/fsevents_watcher.js:37:13)
    at createWatcher (/Applications/Flipper.app/Contents/Resources/app/node_modules/jest-haste-map/build/index.js:897:23)
    at Array.map (<anonymous>)
    at HasteMap._watch (/Applications/Flipper.app/Contents/Resources/app/node_modules/jest-haste-map/build/index.js:1062:44)
    at _buildPromise._buildFileMap.then.then.hasteMap (/Applications/Flipper.app/Contents/Resources/app/node_modules/jest-haste-map/build/index.js:440:23)
(node:48465) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 3)

❌ Plugin sea-mammals is ignored, because it could not be compiled.

Looks like my plugin is wrong. But I just copied it from the tutorial. I don't know what's the problem.

The link to my plugin setup: https://github.com/mbiamont/sample-flipper-plugin/tree/master/plugins/seamammals

danielbuechele commented 5 years ago

Can you try installing watchman: brew install watchman. We are using watchman to watch the plugin for changes and recompile it, once it changes.

mbiamont commented 5 years ago

Now it works great!

Thanks, @danielbuechele & @passy

Maybe you should consider updating the doc to explain to install watchman 😄

Also, totally not related, but where can I find the available icons (the ones declared in package.json), like "icon": "apps"?

danielbuechele commented 5 years ago

Great! Yes, I will update our docs.

For the icons, the situation is a little unfortunate, because we don't have a complete list that we can provide. The icons are provided from our CDN and there are 1k+ icons available, perhaps you can find a matching icon by guessing its name. If you are looking for a specific icon, I can see if it's available and let you know. Sorry, I know this situation isn't very good right now and we'll see if we can improve this somehow.

facebook / flipper