Custom Transformer: Imports?

[ColoredCarrot]

Hi,

I'm attempting to write a custom transformer as introduced in #2281, in order to use JavaScript's new Temporal instead of Date.

The TypeScript DSL has drastically changed since that PR, now using $. I've been able to adapt to that, getting it to generate what I want:

data.triggeredAt = Temporal.Instant.from(data.triggeredAt);

The one thing I'm missing now is a way to add an import for Temporal, since I'm using a polyfill until browser support catches up:

import { Temporal } from "temporal-polyfill"

How can I add that import?

Here's my transformer so far:

const temporalTransformer: ExpressionTransformer = ({
    dataExpression,
    schema,
}) => {
    if (
        !dataExpression ||
        schema.type !== "string" ||
        schema.format !== "date-time"
    ) {
        return undefined;
    }

    const javaClassName = schema["x-className"];
    if (
        javaClassName === "java.time.Instant" ||
        javaClassName === "java.time.OffsetDateTime"
    ) {
        const temporalExpr = $("Temporal")
            .attr("Instant")
            .attr("from")
            .call(dataExpression);
        return [$.expr(dataExpression).assign(temporalExpr)];
    }

    return undefined;
};

I saw this discussion, but the workaround of an line import won't work for me, since I'm generating runtime code. Which would need to use a dynamic import, which is async, so can't be used since transformers are sync. (Side note, it would be very nice if transformer functions were declared async.)

[mrlubos]

@ColoredCarrot Check this example with Big.js. It's the same logic, you need to declare and use a symbol instead of plain Temporal identifier. Let me know if you're unable to figure it out #3132 (comment)

[mrlubos]

@ColoredCarrot something like this should work (didn't test, I'm on mobile)

const temporal = plugin.symbolOnce('Temporal', {
  external: 'temporal-polyfill',
});

[ColoredCarrot]

Nice, that works fantastic. Now the second part is the TypeTransformer (introduced in #2383). I have this for now:

const temporalTypeTransformer: TypeTransformer = ({ schema }) => {
    if (
        schema.type !== "string" ||
        schema.format !== "date-time"
    ) {
        return undefined;
    }

    return ts.factory.createTypeReferenceNode(
        ts.factory.createQualifiedName(
            ts.factory.createIdentifier("Temporal"),
            ts.factory.createIdentifier("Instant"),
        ),
        undefined,
    );
};

This generates a reference to Temporal.Instant correctly in types.gen.ts, but same problem, the import is missing.

@mrlubos Would this be as simple as adding plugin to TypeTransformer as well?

[mrlubos]

@ColoredCarrot yes, added in #3617

[mrlubos]

@ColoredCarrot you will want to construct a type DSL similar to what you did earlier, symbols won't work with the low-level TypeScript compiler API. I was going to suggest it anyway as a way to future-proof your code – I expanded the accepted return types to allow DSL nodes but left the low-level API untouched to avoid breaking other people's functions.

[mrlubos]

Going to throw in the builder for consistency too #3618

[ColoredCarrot]

I'm now returning this in the type transformer:

const temporal = plugin.symbolOnce("Temporal", {
    external: "temporal-polyfill",
});
return $.type(temporal).attr("Instant");

...and that works perfectly. Thank you so much for your help!

---

For anyone else, here's the final code (without my custom x-className handling):

const temporalTransformer: ExpressionTransformer = ({
    dataExpression,
    schema,
    plugin,
    $,
}) => {
    if (
        !dataExpression ||
        schema.type !== "string" ||
        schema.format !== "date-time"
    ) {
        return undefined;
    }

    const temporal = plugin.symbolOnce("Temporal", {
        external: "temporal-polyfill",
    });
    const temporalExpr = $(temporal)
        .attr("Instant")
        .attr("from")
        .call(dataExpression);
    return [$.expr(dataExpression).assign(temporalExpr)];
};

const temporalTypeTransformer: TypeTransformer = ({ schema, plugin, $ }) => {
    if (schema.type !== "string" || schema.format !== "date-time") {
        return undefined;
    }

    const temporal = plugin.symbolOnce("Temporal", {
        external: "temporal-polyfill",
    });
    return $.type(temporal).attr("Instant");
};

[Baterka]

@mrlubos @ColoredCarrot Wondering if its possible to import 2 or more types from a single source?
Example:

{
      typeTransformers: [
        ({ $, schema, plugin }) => {
          if (schema.type === "number") {
            const CustomNumber = plugin.symbolOnce("CustomNumber", {
              external: "@shared/types",
              kind: "type",
            });
            return $.type(CustomNumber);
          }
          if (schema.type === "string" && schema.format === "FlakeIdString") {
            const temporal = plugin.symbolOnce("FlakeIdString", {
              external: "@shared/types",
              kind: "type",
            });
            return $.type(temporal);
          }
          return undefined;
        },
      ],
      name: "@hey-api/transformers",
    },

But the generated types file have only:

import type { FlakeIdString } from "@shared/types";

when it should be:

import type { FlakeIdString, CustomNumber } from "@shared/types";

If I use plugin.symbol instead of plugin.symbolOnce it merges them but causes duplicates:

import type {
  CustomNumber,
  CustomNumber2,
  CustomNumber3,
  FlakeIdString,
} from "@shared/types";

[mrlubos]

@Baterka 100%. That's a bug as you found out. I opened an issue in #3634. The symbolOnce API is meant to avoid the issue you pointed out with the symbol API, but now that I think about it maybe I can fix both for this use case