Question - Automatically generating a typescript interface for the global functions about gas-webpack-plugin HOT 29 CLOSED

@alexblack Thank you for trying.

Please try running as follows:

yarn google-script-dts-generator -s ./src/server/ -o ./src/client/ --namedExportsFiles ./src/server/**/*.ts

from gas-webpack-plugin.

@alexblack Hi, I have a cli tool that google-script-dts-generator.
You can generate client side google.script.run type definition from server side typescript using it.
But for now it can generate from only assignment expression global object (cannot generate from named export).
Can you once use google-script-dts-generator? (In this case you need write assignment expression to global object)
I think that I will add feature to generate from named export if it seems to meet your needs.

from gas-webpack-plugin.

Hi @alexblack, @fossamagna, I published a prerelease of gas-client written in typescript (npm i [email protected]) that supports what you're trying to do without needing to write the server function interfaces, and also allows autocompleting server functions. It behaves like this:

You'll need to make a couple other changes to your code -- see the same PR with react refresh: enuchi/React-Google-Apps-Script#98

Here's how I import gas-client now, including importing types from the server:

import { GASClient } from 'gas-client';
import * as publicServerFunctions from '../../server';

const { serverFunctions } = new GASClient<typeof publicServerFunctions>({
  // this is necessary for local development but will be ignored in production
  allowedDevelopmentDomains: origin =>
    /https:\/\/.*\.googleusercontent\.com$/.test(origin),
});

export { serverFunctions };

from gas-webpack-plugin.

thanks @fossamagna and @enuchi those both look like great improvements. I will take a closer look! Thanks again.

from gas-webpack-plugin.

@enuchi I tried the new gas-client out, it looks really great, it enabled me to remove a lot of boilerplate code and makes great use of typescript. I hit one issue, I don't think its an issue with gas-client, but I can't seem to figure out a solution. If I do a full tsc compile, then I get errors in the addon client, like:

Error: src/server/auth.ts(2,10): error TS2304: Cannot find name 'ScriptApp'.
Error: src/server/auth.ts(6,10): error TS2304: Cannot find name 'ScriptApp'.
Error: src/server/auth.ts(10,17): error TS2304: Cannot find name 'ScriptApp'.

This happens for any types from gas-types-detailed that are used in the server global functions. In server its not a problem, since I include gas-types-detailed in types in the tsconfig.json, but for client, I wasn't able to do that, I hit another issue: DefinitelyTyped/DefinitelyTyped#32585

I wonder if there is a way for the server to export just the interface, without exporting all the types used internally?

Update: I tried putting gas-types-detailed in client/tsconfig.json types, then added skipLibCheck: true, which got past those type errors above, but now I get errors related to use of console, which seems to be back to that core issue with the gas types containing an alternate console definition... I googled and can't seem to find any way to exclude that type, or simply import the types I need without the rest. Frustrating!

from gas-webpack-plugin.

thanks @fossamagna I tried out that tool, I'm not sure if I did things properly, because I don't think it found any of my methods to export:

https://gist.github.com/alexblack/0ae220accdd26f9c2ee2efb8d129d790

I ran: yarn google-script-dts-generator -s ./src/server -o ./src/client

Where ./src/server/index.ts looks like this:

export * from './ui';
export * from './sheets';
export * from './auth';

from gas-webpack-plugin.

@alexblack Hi

But for now it can generate from only assignment expression global object (cannot generate from named export).
Can you once use google-script-dts-generator? (In this case you need write assignment expression to global object)

Sorry for now cannot generate from named export. Temporarily can you write assignment expressions global object ?
I think that I will add feature to generate from named export if it seems to meet your needs.
fossamagna/google-script-dts-generator#75

from gas-webpack-plugin.

@fossamagna Hi, my apologies I missed that. Yes I can probably do that. Am I understanding correctly: I'd temporarily go back to having global.functionName = functionName assignments, then use google-script-dts-generator on it to see if the output is useful/helpful here?

from gas-webpack-plugin.

@alexblack Yes, If google-script-dts-generator is useful/helpful for you, I will add to support generate from named export.

from gas-webpack-plugin.

@alexblack Sorry. google-script-dts-generator has a bug, and d.ts file may not be generated correctly.
Now, I am working to fix a bug and add support named exports.
Tomorrow, I will publish new version of google-script-dts-generator.

from gas-webpack-plugin.

@alexblack I published google-script-dts-generator v1.1.0.
I added new --namedExportsFiles <glob> option to support named export.

from gas-webpack-plugin.

from gas-webpack-plugin.

--namedExportsFiles

@fossamagna what do I put in <glob>? Is it expected to work with the setup I have now?

Where ./src/server/index.ts looks like this:

export * from './ui';
export * from './sheets';
export * from './auth';

I tried yarn google-script-dts-generator -s ./src/server/ -o ./src/client/ --namedExportsFiles *.ts and didn't have any luck yet, I don't see any of the functions in google.script.d.ts

from gas-webpack-plugin.

Thanks @fossamagna sorry I should have thought of that! Ok I tried that, and its getting closer. With that command, here is what I get:

https://gist.github.com/alexblack/d8f8d0a1ad29c662250af2f5104003ee

I see (5) of my functions there, listed as methods of the IRun interface. These 5 functions are from ./src/server/auth.ts. I don't see my functions from ./src/server/sheets.ts nor ./src/server/ui.ts.

I tried other variations:

1. yarn google-script-dts-generator -s ./src/server/ -o ./src/client/ --namedExportsFiles ./src/server/sheets.ts works, and I then get all the functions from sheets.ts in IRun
2. yarn google-script-dts-generator -s ./src/server/ -o ./src/client/ --namedExportsFiles ./src/server/auth.ts works, gives me the same results as what you suggested
3. yarn google-script-dts-generator -s ./src/server/ -o ./src/client/ --namedExportsFiles ./src/server/ui.ts fails with an error:

alex@Alexs-MacBook-Air sheets-addon % yarn google-script-dts-generator -s ./src/server/ -o ./src/client/ --namedExportsFiles ./src/server/ui.ts    
yarn run v1.22.5
$ /Users/alex/dev/micro/sheets-addon/node_modules/.bin/google-script-dts-generator -s ./src/server/ -o ./src/client/ --namedExportsFiles ./src/server/ui.ts
Undefined is unsupported type. it is declarated as any type.
/Users/alex/dev/micro/sheets-addon/node_modules/google-script-dts-generator/dist/index.js:230
            members.forEach((v, k) => {
                    ^

TypeError: Cannot read property 'forEach' of undefined
    at toDomType (/Users/alex/dev/micro/sheets-addon/node_modules/google-script-dts-generator/dist/index.js:230:21)
    at /Users/alex/dev/micro/sheets-addon/node_modules/google-script-dts-generator/dist/index.js:208:64
    at Map.forEach (<anonymous>)
    at toDomType (/Users/alex/dev/micro/sheets-addon/node_modules/google-script-dts-generator/dist/index.js:206:17)
    at /Users/alex/dev/micro/sheets-addon/node_modules/google-script-dts-generator/dist/index.js:208:64
    at Map.forEach (<anonymous>)
    at toDomType (/Users/alex/dev/micro/sheets-addon/node_modules/google-script-dts-generator/dist/index.js:206:17)
    at /Users/alex/dev/micro/sheets-addon/node_modules/google-script-dts-generator/dist/index.js:199:53
    at Array.map (<anonymous>)
    at toDomType (/Users/alex/dev/micro/sheets-addon/node_modules/google-script-dts-generator/dist/index.js:199:44)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Here are the contents of ./src/server/ui.ts (slightly edited): https://gist.github.com/alexblack/4dd5356b8cf58469bbb03deab7cdef73

from gas-webpack-plugin.

@alexblack Thank you for trying.

I can reproduce an error that TypeError: Cannot read property 'forEach' of undefined.
I consider that it is a bug of google-script-dts-generator.
I will fix this bug.

from gas-webpack-plugin.

@alexblack I published google-script-dts-generator v1.1.1.
This release should clear the error.

from gas-webpack-plugin.

Thanks @fossamagna I appreciate all your help here. Yes that clears the error.

However, I haven't yet found a way to get the methods from all 3 files (sheets.ts, auth.ts and ui.ts) into the generated interface.

When I run yarn google-script-dts-generator -s ./src/server/ -o ./src/client/ --namedExportsFiles ./src/server/**/*.ts I only see the methods for auth.ts in google.script.d.ts

Is it intended to work with multiple files like this?

from gas-webpack-plugin.

@alexblack Hi, You need to quote the wildcard of --namedExportsFiles option:

yarn google-script-dts-generator -s ./src/server/ -o ./src/client/ --namedExportsFiles "./src/server/**/*.ts"

from gas-webpack-plugin.

@fossamagna You're right. Ok I think I see all the functions on the interface now, I will try out using this. Thanks!

from gas-webpack-plugin.

@fossamagna Its working well, it generates the interface with all functions which is great, and my client code runs. However, when I try to build it or check it using tsc I get an error:

$ yarn tsc --project ./src/client/tsconfig.json --noEmit
$ /Users/alex/dev/micro/sheets-addon/node_modules/.bin/tsc --project ./src/client/tsconfig.json --noEmit
node_modules/@types/google.script.client-side/index.d.ts:154:11 - error TS2451: Cannot redeclare block-scoped variable 'run'.

154     const run: RunnerFunctions & PublicEndpoints;
              ~~~

  src/client/google.script.d.ts:63:15
    63         const run: IRun;
                     ~~~
    'run' was also declared here.

Have you seen this before?

from gas-webpack-plugin.

@alexblack I guess the definition is duplicated in the type definition of google.script.client-side and the generated type definition.
Does excluding the google.script.client-side type definition eliminate the error?

from gas-webpack-plugin.

I'll have to give that a try when I have a sec, but I assume something else would break...

from gas-webpack-plugin.

@alexblack
When use @types/google.script.client-side, with --endpointsOnly option. google-script-dts-generator supported generate PublicEndpoints interface only.
This feature is released as [email protected]

from gas-webpack-plugin.

@fossamagna sorry for the delay here, thanks for your ongoing updates. This is looking good. I hit one issue: some of the functions in PublicEndpoints have void as a return type, when I expected a non-void return type, eg one should have been string | undefined.

Here is what I see when I run it:

$ /Users/alex/dev/micro/sheets-addon/node_modules/.bin/google-script-dts-generator -s ./src/server/ -o ./src/client/ --namedExportsFiles './src/server/**/*.ts' --endpointsOnly
Undefined is unsupported type. it is declarated as any type.
Undefined is unsupported type. it is declarated as any type.
✨  Done in 1.54s.

Output:

declare namespace google {
    /**
     * Methods available to Google Apps Script
     */
    namespace script {
        interface PublicEndpoints {
            getOpenIDToken(): void;
            getOAuthToken(): void;
            publishOAuthToken(): void;
            enableSmuggle(): void;
            disableSmuggle(): void;
            setActiveSheet(sheetName: string): void;
            getSheets(): void;
            setActiveSheetId(sheetId: number): void;
            getSpreadsheetValues(range: string): void;
            getSpreadsheetNamedRanges(): void;
            getSpreadsheetSheetsAndNamedRanges(): void;
            markSpreadsheetInstalledOn(): void;
            getSpreadsheetProperties(): void;
            API_ERROR(message: string): void;
            setUserProperty(key: string, value: string): void;
            getUserProperty(key: string): void;
            openSidebar(): void;
            getDialogLocationSerialized(): void;
            showModalDialog(dialogId: string, locationSerialized: string, title: string): void;
            onOpen(e: any | SheetsOnOpen): void;
            onInstall(): void;
            onOpen(e: any | SheetsOnOpen): void;
            onInstall(): void;
            setUserProperty(key: string, value: string): void;
            getUserProperty(key: string): void;
            openSidebar(): void;
            getDialogLocationSerialized(): void;
            showModalDialog(dialogId: string, locationSerialized: string, title: string): void;
        }


        interface Spreadsheet {
        }


        interface SheetsOnOpen {
            source: Spreadsheet;
        }



    }
}

from gas-webpack-plugin.

@alexblack Thanks for your feedback.
I consider that even when a return value of server-side function is non-void type, return type of client-side function is always void. the server-side function can return a value to the client as a parameter passed to a success handler.
https://developers.google.com/apps-script/guides/html/reference/run?hl=ja#return

from gas-webpack-plugin.

@fossamagna Thanks for the info, ok I think I see what you're saying. Unfortunately in this scenario I was hoping to have the return types left unchanged. I'm using this with https://www.npmjs.com/package/gas-client which makes it so that you can call these methods and get the return value.

eg

// Or we can use async/await syntax:
async () => {
  try {
    const response = await serverFunctions.addSheet(sheetTitle);
    doSomething(response);
  } catch (err) {
    handleError(err);
  }
};

from gas-webpack-plugin.

@alexblack I understood your use case. I'll consider that add to support your use case.
ex: When specify --non-void-return-type option, generate return type of server-side function not void.

from gas-webpack-plugin.

@fossamagna That sounds like it would work well, thanks

from gas-webpack-plugin.

@alexblack Hi, I added --nonVoidReturnType option to google-script-dts-generator. This option assumed that using in combination with gas-client.This feature is released as [email protected]

from gas-webpack-plugin.