TypeScript support

[ehmicky]

Netlify functions now support TypeScript, i.e. functions can be written directly as .ts files.

However, this plugin currently only allows .js files, not .ts files.

https://github.com/bencao/netlify-plugin-inline-functions-env/blob/14a5dbcde9bac799b25a9f45c5ed7354ea0b27c1/lib.js#L11-L17

[ziogas]

FYI @ehmicky, if you set buildEvent = "onBuild" then it inlines post typescript processing, so technically, javascript https://github.com/bencao/netlify-plugin-inline-functions-env#configuring-build-event

[ehmicky]

@ziogas Could you please clarify? I am not sure I understand what you precisely mean.

Netlify Functions can now directly be written as .ts files, in which case transpiling will be run during Functions bundling, but the resulting .js files are not written to the Functions source directory. In other words, in that instance, from a Build plugin standpoint, there are no .js files, only .ts files and utils.functions.listAll() will return those functions with extension .ts.

[ziogas]

@ehmicky oh, you might be correct, it's probably another plugin I'm using that transpiles typescript code 🙈

Initially, I was referring to the fact that you can write nextjs API functions with typescript (that are stored as Netlify's Functions). But I see now that they're transpiled by the netlify-plugin-nextjs or nextjs itself first.

[Elyx0]

@ehmicky Any solutions that did it for you there? So the readme section about TS doesn't do it?

[ehmicky]

The README's section about TypeScript is different from this issue. I don't think this can be worked around without submitting a PR to modify the above function in this plugin's source code.

[Elyx0]

I gave a failed shot to https://github.com/Elyx0/netlify-plugin-inline-functions-env and then clone locally and used

[[plugins]]
package = "/../netlify-plugin-inline-functions-env/

What I did was add .ts recognition and plug the const tsPlugin = require('@babel/plugin-transform-typescript');

locally the files get transformed, but somehow when hitting https://github.com/netlify/build/blob/3588ad1b2ae55b6b3d66a61b7b307d8d851a2dd2/packages/build/src/log/messages/core_steps.js#L66-L67

It seems it's not using the .ts files that were just transformed and gives me a zip without the modification done by the writeFile( of the inline plugin.

I tried both pre and post build. The verbose shows my code correctly transformed back even for .ts files.

Edit:

Somehow some parts are replaced and some not when i open the zip and look at the generated code

Original sentry.ts

  import FlagsModule from './utils/feature_flags'; 
  // ... some code that uses FlagsModule 

  if (!client && process.env.LAUNCHDARKLY_API_KEY) {
     debug('Feature Flags will init with %s', process.env.LAUNCHDARKLY_API_KEY)
  //   console.log(Object.keys(LaunchDarkly),{LaunchDarkly});
     client = LaunchDarkly.init(process.env.LAUNCHDARKLY_API_KEY);
     debug('Feature Flags initialized.');
     return client;
  }
if (!process.env.GATSBY_SENTRY_DSN) {
  throw new Error('GATSBY_SENTRY_DSN not set');
}

SentryTunnelModule.getHost = () => {
  const { host: knownHost } = url.parse(process.env.GATSBY_SENTRY_DSN as any);
  return knownHost;
}

transformed

 // functions/utils/feature_flags.ts
  var FlagsModule = {};
FlagsModule.init = (user = default_user) => {
  if (client)
    return client;
  if (!client && process.env.LAUNCHDARKLY_API_KEY) { // ❌
    debug("Feature Flags will init with %s", process.env.LAUNCHDARKLY_API_KEY); // ❌
    client = launchdarkly_default.init(process.env.LAUNCHDARKLY_API_KEY); // ❌
    debug("Feature Flags initialized.");
    return client;
  } 
  // ...etc



// functions/sentry.ts

  if (false) { // <-- ok
    throw new Error("GATSBY_SENTRY_DSN not set");
  }
SentryTunnelModule.getHost = () => {
  const { host: knownHost } = import_url.default.parse("https://[email protected]/5909234"); // <-- ok
  return knownHost;
};

Not sure yet why one flag and not the other as I don't have neither GATSBY_SENTRY_DSN in my netlify deploy env on on netlify website (https://app.netlify.com/sites/[project]/settings/deploys#environment). Nor LAUNCHDARKLY_API_KEY they're both only in my .toml that has [context.branch-deploy.environment] section and one [context.production.environment] section.

I can see the root file is getting inlined:

inlining functions\sentry.ts
inlining functions\gatsby\gatsby.js

[Elyx0]

Well I solved it by inlining all I could find in FUNCTIONS_SRC and putting it under a inlineAll plugin config param

Welcome to https://www.npmjs.com/package/netlify-plugin-inline-functions-env-typescript ! (you can cherry pick some commits if you want to merge into @bencao package )

[bdefore]

Thank you for publishing this fork @Elyx0 ... really saved me today.