I’m working on a new plugin that supports calculating inline math expressions using MathJS. Here’s a link to the repo so you can understand what I’m working on: https://github.com/arkag/calc
While it works right now, I’d really like to start fleshing it out with some things that I’d appreciate.
What I’m trying to do right now would be to add some logic to allow people to toggle positive signs in front of non-negative numbers (show +1 instead of 1 or +0 instead of zero).
Here’s what I’m adding to my calc.js file after deactivate() in modules.export:
componentWillMount() {
// Events subscribed to in Inkdrop's system can be easily cleaned up with a CompositeDisposable
this.subscriptions = new CompositeDisposable();
// Register command that toggles this dialog
this.subscriptions.add(inkdrop.commands.add(document.body, {
'calc:toggle-positives': () => this.togglePositives()
}));
},
togglePositives() {
const showPositives = new Boolean();
if (!showPositives) {
showPositives = true;
} else {
showPositives = false;
}
}
I am trying to get showPositives to be accessible in the react-calc.js file I have, but this isn’t working. It says that showPositives isn’t defined when I reference it in the mentioned external file.
It also seems like the command I’m registering is grayed out and won’t let me use it.
You should register/unregister your commands in activate / deactivate method. paste-as-markdown plugin is a good example. componentWillMount is a React API and that’s why it doesn’t work.
Because import is an ES6 syntax.
To write ES6 in your plugin directly, you have to put 'use babel'; at the very first line in your JS file so that Inkdrop transpiles it before running it.
So I think I found the issue, but the root cause is definitely lack of experience and I’d like some more input as to how I resolve this…
I’m currently writing code intolib and it seems like most newer plugins write into src, and then it’s somehow built into lib.
The plugin guide could definitely use some updating or additional guidance regarding this. It seems like lib is written to be “safe” while src is just meant to get stuff done. The guide, from what I can tell, doesn’t show how to do this whole workflow between the two folders.
You replied as I was typing up a second message! I actually already have the set up in both files, but it’s still giving me that error. I think this might be related to my above message.
Basically the plugin dev manual works fine.
I assume that you made the plugin based from my math plugin, which is transpiled with Babel beforehand from src into lib directory.
Putting 'use babel'; lets the app transpile on the fly, which takes a little time to process on the first loading.
You have to understand what is ES6 and Babel.
Ah! That makes much more sense. Is that generally recommended over dynamically transpile-ing? If so, is there a recommended guide for getting that set up?
Regardless, it looks like I’m up and running now, I actually just looked at the transpiled code from paste-as-markdown and copied the format that way, but I’ve moved the use babel lines above everything else.
I’m preparing to release v5 which has a significant startup time improvement. (Read my blogpost)
Before v5, pre-transpiling is recommended to reduce the startup time but I guess it’s not necessary anymore as v5 is fast enough.
Supporting Babel in Inkdrop is just to help you use ES6 syntax without setting it up yourself.
So, you don’t have to set up Babel in your repository unless you have a special reason.
Oh, great then! For my reference, what syntax does Inkdrop run off of by default? Or is that just base JS syntax and ES6 is the standard, but it requires the library imported?
