Is anyone using an IDE outside of Drafts to build action scripts? I use VS Code for all my JavaScript development, and much prefer that interface to work in. The catch is that I can’t test within VS Code, so to use the features of my development environment, I have to copy/paste or import/export between Drafts and VS Code, and debugging isn’t possible because I can’t find a way to access the Drafts library.
Is there an npm package or other means to import and connect to Drafts from an IDE?
I create a fair amount of code in VS Code in library files in the Drafts scripts directory. I
have a standard test function tied to an action which has a keyboard shortcut. I can immediately try any code In Drafts, but I even use Keyboard Maestro to use the same key code in VS Code to switch me to Drafts and so nd the same key press.
Debugging all happens in Drafts, though I have creates some enhanced logging to help with that.
There are also Typescript definition file available for Drafts on Github.
These are actually the things I’ve been trying to work out.
library files in the Drafts scripts directory
Where is that directory?
I have a standard test function tied to an action which has a keyboard shortcut.
Can you share details of this functions?
Debugging all happens in Drafts, though I have creates some enhanced logging to help with that.
Is this just console.log logging or do you have a special logging function just for Drafts?
OK, I finally located that. Just being able to include that in my dev dependencies will be helpful.
If there’s any more specific information about developing for Drafts, I’d appreciate it.
Drafts’ scripting documentation is your primary source.
If you want more prebuilt functions then I have made a library.
Hope that helps.
That does, thanks!
I’ve actually been using the Drafts Script Reference pretty much from the start. It was getting VS Code to recognize those globals for autocomplete and in-IDE tools that I was missing.
Those libraries should help a lot. Thanks for sharing them.
I’m currently using Textastic on iPad to edit scripts. I have a file called playground.js in the Drafts/Library/Scripts directory which I edit, and then while developing in Drafts I have a single-line script action there which is just require("playground.js"). I assign that the keyboard shortcut Command + R. Once I’ve finished the script, I hit the import button to “save” the finished script into the action permanently.
One thing I was trying to figure out recently which I wonder if anyone on this thread could help with. I would love to have code completion in Textastic which knew about the Drafts objects, methods, and properties while I was typing. Textastic on iPad supports importing various code completion package formats, as you can see here, but I’m not familiar with Sublime Text 3 or TextMate, and I don’t know if there’s any documentation on those formats.
Is there any way that the Drafts documentation could be turned into a format that Textastic could understand? Perhaps I should post this as a separate thread.
I’m wondering if @mikestraw or @sylumer can help me. Would you mind going into a bit more detail on how to get VS Code to recognise the Drafts global objects for the purposes of autocomplete etc. Assume little knowledge of VS Code.
Steps taken so far:
Desired result: when I type things like “editor.” there should be suggestions such as “getText()”. Any ideas on this? I’ve done plenty of scripting in Drafts but have little knowledge of things like Node.js, Typescript etc.
It’s quite a while since I set it up, so I did a quick test set-up, skipping the Node.js nom install, because I did that first time around.
I added the definition files to a folder, added a JavaScript project configuration file specifying to pull in all the definition files in the folder, and then I started typing in a new example file and it began pulling in the relevant content.
{
"compilerOptions": {
"checkJs": true,
"typeRoots": ["./*.d.ts"]
}
}
I’ll also add that I just tinker in JavaScript and have never developed (or had personal need to develop) anything around Node, so that’s black box to me too.
Hope that helps.
That works wonderfully, thank you! It was the jsconfig.json file that I was missing. Not knowing how it worked, I had assumed I could use the tsconfig.json file that was included in the repository.
What I did in the end was to create add all of the .d.ts files to iCloud/Drafts/Library/Scripts/definitions/, then added the jsconfig.json file to iCloud/Drafts/Library/Scripts/ and changed it to
{
"compilerOptions": {
"checkJs": true,
"typeRoots": ["definitions/*.d.ts"]
}
}
Then I added the whole iCloud/Drafts/Library/Scripts/ directory to my VS Code workspace, so that I can now edit any of my scripts and they’ll be updated in iCloud.
I’m not sure if this is the right way, but I have a shell script that concatenates all the Typescript declarations in one .js file, and have that .js file in in /iCloud Drive/Drafts/Library/Scripts.
I just added the concatenation to the build script for the Scripting Reference, so that concatenated file will always be available updated with the reference at this URL:
That’s pretty similar to what I have set-up for my library development stuff.
{
"compilerOptions":
{
"target":"es6",
"checkJs": true,
"typeRoots": ["./definitions/*.d.ts"]
},
"exclude": ["./docs/assets/library/tad.d.ts", "./*.d.ts"]
}
For anyone who wants the TADpoLe definitions to go with the Drafts ones, they are available in a single tad.d.ts file you can download from the web site. You can then just drop that in alongside the Drafts ones.
My library build scripts also concatenate my separate .d.ts files into the single one referenced above, and then copy things around so that this file gets published to the site when I push an update.
That’s even better, thank you. My jsconfig.json file now reads
{
"compilerOptions": {
"checkJs": true,
"typeRoots": ["drafts-definitions.js"]
}
}
@agiletortoise: Perhaps I should put this in the Feature Requests section, but I’d love to have autocomplete suggestions built into Drafts scripting one day. I really like how it works in apps like Scriptable and Swift Playgrounds with the suggestion bar above the keyboard. Useful as a beginner for figuring out what’s possible, and for a more experienced coder to remind yourself of the names of methods etc.
Does anyone have Drafts code completion running in an iOS editor?
In responding to another topic, I spotted your questions @jsamlarose. I do have code completion running in an iOS editor. Here’s a screenshot of me entering a property of draft in an alert(), and it listing content as I type in the text.
You may note that the look and feel of what I’m using is very similar to my VS Code set up above. That’s because it is, and it uses the same configuration files, etc. 
The app I’m using has a terribly generic name in the app store of “Code”, so here’s the app store link because otherwise it is a pain to find.
You can read about the app here:
I’ve been using it for maybe 7 or 8 months now I think and while I don’t do a lot of editing on it, when I do it has been great.
Hope that’s useful.
Ahhhh @sylumer — yet again, many thanks. Had a few life things to deal with in recent months, but finally had a minute and the inclination to get this up and running this evening. I created a new “workplace folder”, downloaded the drafts-definitions.js, created a jsconfig.json that pointed to drafts-definitions.js. Got a little confused along the way about where the folder was, but the upshot is that I’ve now got code Drafts javascript code completion running on my iPad. Happy joy.
Just want to leave the note here that I finally found a satisfactory solution for how to
For that, I use the Rollup bundler. You can find the configuration in my GitHub Repository, the Readme provides some additional instructions.
Thanks to all of you for your helpful advice along the way!
