pdfme / pdfme

Open-source PDF generation library built with TypeScript and React. Features a WYSIWYG template designer, PDF viewer, and powerful generation capabilities. Create custom PDFs effortlessly in both browser and Node.js environments.
http://pdfme.com/
MIT License
2.48k stars 228 forks source link

Types for generate method producing an issues #537

Open RishikeshDarandale opened 1 month ago

RishikeshDarandale commented 1 month ago

Describe the bug

Here is the code that I have

import type { Template } from '@pdfme/common';
import { text, image, barcodes } from '@pdfme/schemas';
import { generate } from '@pdfme/generator';

const template: Template = {
  // skip... you can use text, image, qrcode schema type in template.
};
const inputs = [
  // skip...
];

const options = {
  font: {
     ...
  },
};

const pdf = await generate({
  template,
  inputs,
  options,
  plugins: {
    text,
    image,
    qrcode: barcodes.qrcode,
  },
});

For template, following typescript issue is reported

Type 'objectOutputType<{ schemas: ZodArray<ZodRecord<ZodString, ZodObject<{ type: ZodString; content: ZodOptional<ZodString>; position: ZodObject<{ x: ZodNumber; y: ZodNumber; }, "strip", ZodTypeAny, { ...; }, { ...; }>; ... 4 more ...; readOnly: ZodOptional<...>; }, "passthrough", ZodTypeAny, objectOutputType<...>, objec...' is not assignable to type '{ schemas: Record<string, { type: "text"; height: number; width: number; position: { x: number; y: number; }; rotate?: number; alignment?: "center" | "left" | "right"; verticalAlignment?: "top" | "bottom" | "middle"; ... 6 more ...; dynamicFontSize?: { ...; }; } | { ...; } | { ...; }>[]; basePdf: string | ... 1 more...'.
  Types of property 'schemas' are incompatible.
    Type 'Record<string, objectOutputType<{ type: ZodString; content: ZodOptional<ZodString>; position: ZodObject<{ x: ZodNumber; y: ZodNumber; }, "strip", ZodTypeAny, { ...; }, { ...; }>; ... 4 more ...; readOnly: ZodOptional<...>; }, ZodTypeAny, "passthrough">>[]' is not assignable to type 'Record<string, { type: "text"; height: number; width: number; position: { x: number; y: number; }; rotate?: number; alignment?: "center" | "left" | "right"; verticalAlignment?: "top" | "bottom" | "middle"; ... 6 more ...; dynamicFontSize?: { ...; }; } | { ...; } | { ...; }>[]'.
      Type 'Record<string, objectOutputType<{ type: ZodString; content: ZodOptional<ZodString>; position: ZodObject<{ x: ZodNumber; y: ZodNumber; }, "strip", ZodTypeAny, { ...; }, { ...; }>; ... 4 more ...; readOnly: ZodOptional<...>; }, ZodTypeAny, "passthrough">>' is not assignable to type 'Record<string, { type: "text"; height: number; width: number; position: { x: number; y: number; }; rotate?: number; alignment?: "center" | "left" | "right"; verticalAlignment?: "top" | "bottom" | "middle"; ... 6 more ...; dynamicFontSize?: { ...; }; } | { ...; } | { ...; }>'.
        'string' index signatures are incompatible.
          Type 'objectOutputType<{ type: ZodString; content: ZodOptional<ZodString>; position: ZodObject<{ x: ZodNumber; y: ZodNumber; }, "strip", ZodTypeAny, { ...; }, { ...; }>; ... 4 more ...; readOnly: ZodOptional<...>; }, ZodTypeAny, "passthrough">' is not assignable to type '{ type: "text"; height: number; width: number; position: { x: number; y: number; }; rotate?: number; alignment?: "center" | "left" | "right"; verticalAlignment?: "top" | "bottom" | "middle"; fontSize?: number; ... 5 more ...; dynamicFontSize?: { ...; }; } | { ...; } | { ...; }'.ts(2322)
schema.d.ts(1536, 5): The expected type comes from property 'template' which is declared here on type '{ template: { schemas: Record<string, { type: "text"; height: number; width: number; position: { x: number; y: number; }; rotate?: number; alignment?: "center" | "left" | "right"; verticalAlignment?: "top" | "bottom" | "middle"; ... 6 more ...; dynamicFontSize?: { ...; }; } | { ...; } | { ...; }>[]; basePdf: string ...'
(property) template: {
    schemas: Record<string, {
        type: "text";
        height: number;
        width: number;
        position: {
            x: number;
            y: number;
        };
        rotate?: number | undefined;
        alignment?: "center" | "left" | "right" | undefined;
        verticalAlignment?: "top" | "bottom" | "middle" | undefined;
        fontSize?: number | undefined;
        fontName?: string | undefined;
        fontColor?: string | undefined;
        backgroundColor?: string | undefined;
        characterSpacing?: number | undefined;
        lineHeight?: number | undefined;
        dynamicFontSize?: {
            max: number;
            min: number;
            fit?: string | undefined;
        } | undefined;
    } | {
        type: "image";
        height: number;
        width: number;
        position: {
            x: number;
            y: number;
        };
        rotate?: number | undefined;
    } | {
        type: "qrcode" | "japanpost" | "ean13" | "ean8" | "code39" | "code128" | "nw7" | "itf14" | "upca" | "upce" | "gs1datamatrix";
        height: number;
        width: number;
        position: {
            x: number;
            y: number;
        };
        rotate?: number | undefined;
        backgroundcolor?: string | undefined;
        barcolor?: string | undefined;
        textcolor?: string | undefined;
    }>[];
    basePdf: (string | ArrayBuffer | Uint8Array) & (string | ArrayBuffer | Uint8Array | undefined);
    sampledata?: Record<string, string>[] | undefined;
    columns?: string[] | undefined;
}

image

Another, issue is with plugins.

The typescript issue for plugins is

Object literal may only specify known properties, and 'plugins' does not exist in type '{ template: { schemas: Record<string, { type: "text"; height: number; width: number; position: { x: number; y: number; }; rotate?: number; alignment?: "center" | "left" | "right"; verticalAlignment?: "top" | "bottom" | "middle"; ... 6 more ...; dynamicFontSize?: { ...; }; } | { ...; } | { ...; }>[]; basePdf: string ...'.ts(2353)
(property) plugins: {
    text: Plugin<TextSchema>;
    image: Plugin<ImageSchema>;
    qrcode: Plugin<BarcodeSchema>;
}

image

To Reproduce

Just use the generate method with above types mentioned above.

Expected behavior

typescript issues should not be there

Your Environment

- pdfme package(@pdfme/generator or @pdfme/ui): 4.2.4
- pdfme version:
- Operating system: win 10 (WSL - uBuntu 24.04 LTS)
- Node.js version or Browser name & version: node 20.x

Your Error Log

Type 'objectOutputType<{ schemas: ZodArray<ZodRecord<ZodString, ZodObject<{ type: ZodString; content: ZodOptional<ZodString>; position: ZodObject<{ x: ZodNumber; y: ZodNumber; }, "strip", ZodTypeAny, { ...; }, { ...; }>; ... 4 more ...; readOnly: ZodOptional<...>; }, "passthrough", ZodTypeAny, objectOutputType<...>, objec...' is not assignable to type '{ schemas: Record<string, { type: "text"; height: number; width: number; position: { x: number; y: number; }; rotate?: number; alignment?: "center" | "left" | "right"; verticalAlignment?: "top" | "bottom" | "middle"; ... 6 more ...; dynamicFontSize?: { ...; }; } | { ...; } | { ...; }>[]; basePdf: string | ... 1 more...'.
  Types of property 'schemas' are incompatible.
    Type 'Record<string, objectOutputType<{ type: ZodString; content: ZodOptional<ZodString>; position: ZodObject<{ x: ZodNumber; y: ZodNumber; }, "strip", ZodTypeAny, { ...; }, { ...; }>; ... 4 more ...; readOnly: ZodOptional<...>; }, ZodTypeAny, "passthrough">>[]' is not assignable to type 'Record<string, { type: "text"; height: number; width: number; position: { x: number; y: number; }; rotate?: number; alignment?: "center" | "left" | "right"; verticalAlignment?: "top" | "bottom" | "middle"; ... 6 more ...; dynamicFontSize?: { ...; }; } | { ...; } | { ...; }>[]'.
      Type 'Record<string, objectOutputType<{ type: ZodString; content: ZodOptional<ZodString>; position: ZodObject<{ x: ZodNumber; y: ZodNumber; }, "strip", ZodTypeAny, { ...; }, { ...; }>; ... 4 more ...; readOnly: ZodOptional<...>; }, ZodTypeAny, "passthrough">>' is not assignable to type 'Record<string, { type: "text"; height: number; width: number; position: { x: number; y: number; }; rotate?: number; alignment?: "center" | "left" | "right"; verticalAlignment?: "top" | "bottom" | "middle"; ... 6 more ...; dynamicFontSize?: { ...; }; } | { ...; } | { ...; }>'.
        'string' index signatures are incompatible.
          Type 'objectOutputType<{ type: ZodString; content: ZodOptional<ZodString>; position: ZodObject<{ x: ZodNumber; y: ZodNumber; }, "strip", ZodTypeAny, { ...; }, { ...; }>; ... 4 more ...; readOnly: ZodOptional<...>; }, ZodTypeAny, "passthrough">' is not assignable to type '{ type: "text"; height: number; width: number; position: { x: number; y: number; }; rotate?: number; alignment?: "center" | "left" | "right"; verticalAlignment?: "top" | "bottom" | "middle"; fontSize?: number; ... 5 more ...; dynamicFontSize?: { ...; }; } | { ...; } | { ...; }'.ts(2322)
schema.d.ts(1536, 5): The expected type comes from property 'template' which is declared here on type '{ template: { schemas: Record<string, { type: "text"; height: number; width: number; position: { x: number; y: number; }; rotate?: number; alignment?: "center" | "left" | "right"; verticalAlignment?: "top" | "bottom" | "middle"; ... 6 more ...; dynamicFontSize?: { ...; }; } | { ...; } | { ...; }>[]; basePdf: string ...'
(property) template: {
    schemas: Record<string, {
        type: "text";
        height: number;
        width: number;
        position: {
            x: number;
            y: number;
        };
        rotate?: number | undefined;
        alignment?: "center" | "left" | "right" | undefined;
        verticalAlignment?: "top" | "bottom" | "middle" | undefined;
        fontSize?: number | undefined;
        fontName?: string | undefined;
        fontColor?: string | undefined;
        backgroundColor?: string | undefined;
        characterSpacing?: number | undefined;
        lineHeight?: number | undefined;
        dynamicFontSize?: {
            max: number;
            min: number;
            fit?: string | undefined;
        } | undefined;
    } | {
        type: "image";
        height: number;
        width: number;
        position: {
            x: number;
            y: number;
        };
        rotate?: number | undefined;
    } | {
        type: "qrcode" | "japanpost" | "ean13" | "ean8" | "code39" | "code128" | "nw7" | "itf14" | "upca" | "upce" | "gs1datamatrix";
        height: number;
        width: number;
        position: {
            x: number;
            y: number;
        };
        rotate?: number | undefined;
        backgroundcolor?: string | undefined;
        barcolor?: string | undefined;
        textcolor?: string | undefined;
    }>[];
    basePdf: (string | ArrayBuffer | Uint8Array) & (string | ArrayBuffer | Uint8Array | undefined);
    sampledata?: Record<string, string>[] | undefined;
    columns?: string[] | undefined;
}


### Additional context

_No response_
hoqqanen commented 3 weeks ago

I am encountering the same issue. Putting // @ts-ignore above the call to generate confirms that the library is working as intended, it's just that the typechecking fails.