How to create a plugin correctly? Mocha is allowed?

Razzwan

I am using this documentation for creating a plugin for sketch. For including native custom Objective C framework and auto-conversion from JS to Objective C and vise versa, I am using Mocha.

Is this generally a legal way to create a plugin? What do I need to read to create a plugin correctly?

We are published Beta version of plugin, but it doesn't work the same way as on local development machine. We are using paid licenses with the latest version of Sketch for development, why can customers have a different working environment from our local?

Please, help to find a correct working way of plugin creating. I need help...

abynim

Razzwan Hi Razzwan. I've made almost all of my plugins using ObjC and injecting those frameworks at runtime using Mocha. It's definitely legal and should work.

What differences are you noticing between your local setup vs customers?

Razzwan

@kevgski please, help to find an answer, please, help to understand, what exactly was done incorrectly?

Razzwan

@christianklotz please, help me. How to create a plugin correctly? Perhaps, some way exists to pay for a consultation?

Razzwan

abynim I am noticed, that:

hotkeys doesn't work properly after instulling our plugin, but we are don't use hotkeys at all. This is our manifest.json file:

{
  "name": "Spelly",
  "description": "Spell checker by Spelly",
  "author": "Spelly Team",
  "authorEmail": "dev@spelly.io",
  "homepage": "https://spelly.io",
  "version": "3.29.11",
  "identifier": "com.spellychecker.spelly",
  "appcast": "https://spelly.io/plugin/appcast.xml",
  "bundleVersion": 1,
  "compatibleVersion": "70.1",
  "icon": "images/icon.png",
  "commands": [
    {
      "name": "OpenDocument",
      "identifier": "onOpenDocument",
      "script": "./actions/onOpenDocument.ts",
      "handlers": {
        "actions": {
          "OpenDocument": "onOpenDocument"
        }
      }
    },
    {
      "name": "CloseDocument",
      "identifier": "onCloseDocument",
      "script": "./actions/onCloseDocument.ts",
      "handlers": {
        "actions": {
          "CloseDocument": "onCloseDocument"
        }
      }
    },
    {
      "name": "SelectionChanged",
      "identifier": "onSelectionChanged",
      "script": "./actions/onSelectionChanged.ts",
      "handlers": {
        "actions": {
          "SelectionChanged.finish": "onSelectionChanged"
        }
      }
    },
    {
      "name": "ChangeDocument",
      "identifier": "onDocumentChanged",
      "script": "./actions/onDocumentChanged.ts",
      "handlers": {
        "actions": {
          "onDocumentChanged": "onDocumentChanged"
        }
      }
    },
    {
      "name": "HandleURL",
      "identifier": "runtime",
      "script": "./actions/onHandleURL.ts",
      "handlers": {
        "actions": {
          "HandleURL": "onHandleURL"
        }
      }
    },
    {
      "name": "Restore",
      "identifier": "restore",
      "script": "./actions/onRestoreDocument.ts",
      "handlers": {
        "actions": {
          "run": "onRestoreDocument"
        }
      }
    },
    {
      "name": "Hide",
      "identifier": "hide",
      "script": "./actions/onHide.ts",
      "handler": "onHide"
    },
    {
      "name": "Add Right Offset",
      "identifier": "add-offset",
      "script": "./actions/onToggleOffset.ts",
      "handler": "onAddOffset"
    },
    {
      "name": "Remove Right Offset",
      "identifier": "remove-offset",
      "script": "./actions/onToggleOffset.ts",
      "handler": "onRemoveOffset"
    }
  ],
  "menu": {
    "title": "Spelly",
    "items": ["restore", "hide", "-", "add-offset", "remove-offset"]
  }
}

Somehow, plugin is not running at all. User try to install it, but it doesn't appear on the screen. We are using this approach to show the plugin:

  const webViewConf = WKWebViewConfiguration.alloc().init();
  const webView = WKWebView.alloc().initWithFrame_configuration(rect, webViewConf);
  webView._drawsBackground = false;
  webView.configuration().preferences().setValue_forKey(true, 'developerExtrasEnabled');
  webView.autoresizingMask = NSViewMinYMargin | NSViewMinXMargin;
  
  const doc = context.actionContext.document;
  webView.on(VIEW_LOADED_SIGNAL, () => {
      // add deligate for supporting ui interactions
      injectClientMessaging(this.webView);
      // add deligate for supporting web actions
      setWebDelegate(this);
      // add deligate for supporting navigation actions
      setNavDelegate(this);
      loadURL(this.webView, template);
      doc.canvasView().addSubview(webView);
  });
  webView.load();

Razzwan

Regarding first problem, I think it is just because user try to use hotkeys when mouse overed on our widjet and we are catching all mouse events.
Second problem can happen if user using Sketch version lower then 70.1, because we are not supporting lower Sketch versions
But first described problem still exists: Suddenly, the sketch crashes with any action after about half an hour of work. And it always throw such error:
```
Application Specific Information:
Assertion failed: ([runtime isKindOfClass:[Mocha class]]), function Mocha_getProperty, file /Users/jenkins/jm-sketchsrv-com/workspace/Stage_BigSur/Modules/CocoaScript/src/framework/mocha/MochaRuntime.m, line 1042.
```
We are using all sketch polyfills for timers and so on, but this error still suddenly happen time by time after 20-40 minutes of work... (

abynim

From your code it looks like you're inserting a WebView within the Canvas View of a document. I don't think inserting anything directly into the canvas view is a good idea. In Runner we use these methods to insert the RunBar on the top edge of the canvas (you can also add a view at the bottom). Those methods are only available from Sketch 70+ by the way.

Mouse hover should not affect shortcuts (hotkeys). Shortcuts are triggered based on which view is the firstResponder and in your case perhaps the webView you're adding to the canvas becomes the firstResponder. I can't know for sure without actually testing your plugin.
If your plugin is only supported on a certain Sketch version and above, perhaps you can check the user's Sketch version and show a relevant message instead of trying to load the web view anyway. Check the version of the main bundle: [[NSBundle mainBundle] objectForInfoDictionaryKey:@"CFBundleShortVersionString"];.
The assertion failure seems to be from Mocha saying it cannot find the Mocha runtime. My guess is that your code is trying to access some object that may have been deallocated at the time. Again, can't be sure without testing your plugin.

If your plugin is complex and requires inserting persistent views perhaps you can consider using ObjC all throughout rather than a mix of JS and ObjC. Creating and maintaining many JS contexts in memory can make Sketch quite slow. I think the JS environment is great for running quick scripts that perform their task and get out of the way.

abynim

Just noticed your plugin's homepage in the manifest. Downloaded the plugin now. Is the live version having these issues or is it a different development version?

Edit after checking your plugin:
I guess redoing the plugin in ObjC is not a viable option considering your plugin is all done already, but perhaps it would help to move the logic of creating and maintaining your web view over to ObjC rather than using timers, etc. in JS.

Razzwan

abynim Just noticed your plugin's homepage in the manifest. Downloaded the plugin now. Is the live version having these issues or is it a different development version?

Yes. Live version having these issues

Razzwan

abynim I guess redoing the plugin in ObjC is not a viable option considering your plugin is all done already, but perhaps it would help to move the logic of creating and maintaining your web view over to ObjC rather than using timers, etc. in JS.

Thank you. We are thinking about that. The most important part was done using Obj C and ofcourse, Obj C allow to improve performance and user experience. We are using timers in JS codebase just only to avoid webView rendering problems. Seems like we can avoid them using Obj C code as well, but I don't now how yet

Razzwan

Mouse hover should not affect shortcuts (hotkeys). Shortcuts are triggered based on which view is the firstResponder and in your case perhaps the webView you're adding to the canvas becomes the firstResponder. I can't know for sure without actually testing your plugin.

Yes, I think you are right.

If your plugin is only supported on a certain Sketch version and above, perhaps you can check the user's Sketch version and show a relevant message instead of trying to load the web view anyway. Check the version of the main bundle: [[NSBundle mainBundle] objectForInfoDictionaryKey:@"CFBundleShortVersionString"];.

Thank you very much! I will do that!

The assertion failure seems to be from Mocha saying it cannot find the Mocha runtime. My guess is that your code is trying to access some object that may have been deallocated at the time. Again, can't be sure without testing your plugin.

Yes, seems like that. We are storing js context using sketch/async fiber all the way. Perhaps, something unexpected can happen with fiber and it can be suddenly removed (deallocated). I suppose, that between fiber creating and fiber removing no other attempts to remove context, but this may be the wrong assumption

abynim

Razzwan I have found that it is most efficient to instantiate a singleton in ObjC which can stay in memory after your plugin is initialized (perhaps on starting Sketch) and then manage all of your plugins capabilities internally. Your singleton can add observers to Sketch documents and update the contents of your WebView as required.

Razzwan

abynim I have found that it is most efficient to instantiate a singleton in ObjC which can stay in memory after your plugin is initialized (perhaps on starting Sketch) and then manage all of your plugins capabilities internally. Your singleton can add observers to Sketch documents and update the contents of your WebView as required.

Those, do you advise to avoid using sketch/async fiber at all? Should I use Obj C singleton instead?

abynim

Razzwan Yes, that way you have more control over memory management, and parts of your plugin will not get deallocated unexpectedly.

It is also more performant in my experience. I did a bunch of performance tests when trying to optimize Runner. For example, we setup our own shortcut system in Runner to avoid routing user actions through JS so the search window shows up faster. Even now if you launch Runner through the Plugins menu it is a tad slower than using the shortcut because the menu is routed from JS → ObjC, but the shortcut is intercepted directly in ObjC.

Razzwan

abynim thank you so much for your answers. I hope this helps us to fix all the problems of our plugin and release a great product soon.

I wish you creative success!

Razzwan

Finally we are fixed that problem with Mocha and fiber.

If someone interested it, it was problem with wrong fiber usage. We are created just only one fiber for all async actions, but correct usage must use different fibers for each separate async action.