JSdocs Autocomplete not working as expected

[Rahul Singh]

./src/server/custom-function.ts

export function CUSTOM_FUNCTION(input1, input2 = 1) {
    return input1 * input2;
}

./src/server/index.js

import { CUSTOM_FUNCTION } from './custom-function'

/**
 * Multiplies an input1 and input2
 * @param {number} input1 First Number
 * @param {number} input2 Second Number. Default 1.
 * @return input1 * input2.
 * @customfunction
 */
export {CUSTOM_FUNCTION}

dist/code.js (very top section)

/**
 * Multiplies an input1 and input2
 * @param {number} input1 First Number
 * @param {number} input2 Second Number. Default 1.
 * @return input1 * input2.
 * @customfunction
 */ function CUSTOM_FUNCTION()

Result:
Custom function is listed as a formula in Google Sheet function drop-down, but Google Sheet docs says that the formula doesn't accept any args.

Expected Result:
Google Sheet's custom function definition should show input1 and input2 as an arg.

Possible Cause:
I believe that function declaration at the very top of dist/code.js is the problem here (it not having args listed). I tested my theory out by pasting input arg and deploying the modification. To my surprise, autocomplete now works as intended. Here's the snippet of the modification I made:

/**
 * Multiplies an input1 and input2
 * @param {number} input1 First Number
 * @param {number} input2 Second Number. Default 1.
 * @return input1 * input2.
 * @customfunction
 */ function CUSTOM_FUNCTION(input1, input2)

Any ideas how to make autocomplete work without the manual modifications? Would be more than happy to help you with a PR.

[Elisha Nuchi]

Yes, I can see that behavior happening. This project currently relies on https://github.com/fossamagna/gas-webpack-plugin to expose the function in the global scope, and that plugin is not carrying across the arguments. You could see if that plugin can be updated to include the arguments.

[Randy Ramnansingh]

@rahools are you using the stock webpack config? My code output does not include the JSDoc strings in the correct place so when the plugin is deployed my custom functions don't even show up in the autosuggestion

[Elisha Nuchi]

Also see #212 for troubleshooting

[Rahul Singh]

@randy-mammoth-labs Yes stock webpack config will output JSDocs in the compiled code. Did you write @customfunction in the JSDoc you intend to include in the final output?

[Randy Ramnansingh]

@rahools yup, and I see the comments in the compiled code, but the comments are not at the top level function declarations e.g.

// code.js

function MY_CUSTOM_SHEETS_FUNCTION() {}

var global = this;

(() => {
    "use strict";
    function __webpack_require__(moduleId) {
        var cachedModule = __webpack_module_cache__[moduleId];
        if (void 0 !== cachedModule) return cachedModule.exports;
        var module = __webpack_module_cache__[moduleId] = {
            exports: {}
        };
        return __webpack_modules__[moduleId](module, module.exports, __webpack_require__), 
        module.exports;
    }
    var __webpack_modules__ = {
        457: (__unused_webpack_module, exports, __webpack_require__) => {
            /**
 * Retrieves List materials. Required paramater(s): scenario and data_field.
 * Examples: MY_CUSTOM_SHEETS_FUNCTION(arg1, arg2)
 *
 * @param {string} arg1 - Required.
 * @param {string} arg2 - Required.
 * @return {string} Something
 * @customfunction
 */            exports.MY_CUSTOM_SHEETS_FUNCTION = function(arg1, arg2) { //code goes here };
....

I've noticed that the comment needs to go the function declaration at the top level of code.js in order for it work properly in Sheets

[Rahul Singh]

That's weird, It works for me. I even tested out the thing by cloning a fresh copy, adding comments as shown in #212 (comment) and compiling the code.

[Randy Ramnansingh]

@rahools after following the structure in that linked comment it works for me! Now I am stuck where you are 🙃

[Randy Ramnansingh]

@rahools I've got a solution for you, in index.ts I did the following to get the args showing up in the Google Sheets formula autocomplete

/** jsdocs go here */
global.MY_FUNCTION = (arg1, arg2) => MY_FUNCTION(arg1, arg2)

That's it! (thanks Copilot)

[Rahul Singh]

@randy-mammoth-labs's solution works great, closing the issue.