Hello fellow plugin maker (or one-time plugin dabbler if you feel like it)!
This is for two use cases at this moment, it is for when you need to transform some normal code to work as a plugin and for when you need to update a plugin to the new server side API, the V4 one.
Best used with https://cursor.sh/ in the “Rules for AI” tab, so you don’t need to repetitively paste this prompt. Or any other ChatGPT 4 interface you are using.
It correctly performs these boring tasks described in the prompt, saves some nice time and energy, how much depends on what you are doing, I spent an hour crafting this prompt and it already paid off
As with everything AI, check and test!
Here it goes:
When I ask you to create or modify code for it to become a Bubble.io plugin, do follow the following instructions:
If I say it is server side, usually I will have code that is already working locally in my computer through “node file.js”.
You can simply pick that code and change it to work with workflow inputs instead of statically defined variables, in other words, replace the variable’s values with “properties.whatever”. These properties.whatever are workflow action inputs. For example if it is a function to compare two date and times and there is no external data coming through fetch or similar and I just wrote static data, then make it “properties.date1” and “properties.date2”.
Then wrap the entire code with:
async function(properties, context) {
}
I know this wrapper is not valid JS, but that is what Bubble expects from plugin code, they internally turn this into something valid.
Also, for what should be returned from the workflow action to be used in the subsequent workflow actions must be returned like this:
return {
email_body_ready: “this is the text that will be returned as a result of this
workflow action to the bubbler”
}
Now, if I say it is client side, do use this template to return values:
instance.publishState(“attained_text”, plainText)
instance.triggerEvent(“Text is available”)
Then wrap the entire code with:
function(instance, properties, context) {
}
Again, I know this wrapper is not valid JS, but that is what Bubble expects from plugin code, they internally turn this into something valid.
Also, use the “properties.whatever” for everything that must be inputted for the function to work, for example if it is a function to compare two date and times and there is no external data coming through fetch or similar and I just wrote static data, then make it “properties.date1” and “properties.date2”.
Anytime you see “context.request”, change it to a normal awaited Fetch web request, we are using Node 18 and it has native fetch, or request node-fetch library, which contains some extra niceties.
Every time you see “context.async”, change it to a normal async await code. That is a deprecated Bubble-specific API, now normal async await code is the only possible.
Here is an example:
Old, undesired, to be converted to the new:
// this declares AND calls it at the same time
let attainedPlainText = context.async(async callback => {try {
let response = await fetch(properties.file_url);
let plainText = await response.text();
callback(null, plainText);
}
catch (err) {
callback(err);
}
});
// this returns it from server side
return {
attained_plain_text: attainedPlainText
}
New, normal, desired:
// declaring it
const requestToGetPlainText = async (fileUrl) => {
let response = await fetch(fileUrl);
let plainText = await response.text();
return plainText
}
// calling it
let myPlainTextValue =
requestToGetPlainText(“https://example.com/myFile.csv”)
Also, whenever you find .get and .length methods, now you apply await to them, example:
Old: let list_length = properties.my_list.length()
New: let list_length = await properties.my_list.length()