Oktay Yuzcan's questions

Estou tentando construir um aplicativo que usa react-pdf/renderer. Vou enviar uma resposta em PDF do servidor node js express. As fontes que uso em react-pdf/renderer(.ttf) parecem ser obtidas via XMLHttpRequest(dentro da biblioteca). Na construção final, posso ver que ele usa XMLHttpRequest. Quando tento executar isso no node js, ele trava por causa disso, não existe. Como posso convertê-lo em node-fetch ou outra coisa para fazê-lo funcionar? Preciso fazer polyfill disso? E como? Eu uso rollup

As fontes são registradas com a maneira padrão Font.register() com url externa

configuração ts:

{
    "compilerOptions": {
    "baseUrl": "src/",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "Bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["src"]
}

configuração base do rollup:

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import { babel } from '@rollup/plugin-babel';
import json from '@rollup/plugin-json';

export default {
  plugins: [
    peerDepsExternal(),
    resolve({
      browser: true,
      preferBuiltins: false,
    }),
    // resolve(),
    commonjs(),
    babel({
      babelHelpers: 'bundled',
      exclude: /node_modules/,
      presets: ["@babel/preset-react", "@babel/preset-typescript"],
    }),
    typescript({
      tsconfig: "./tsconfig.json",
      outputToFilesystem: true,
    }),
    json(),
  ],
};

configuração de rollup:

import terser from '@rollup/plugin-terser';
import baseConfig from './rollup.base.config.js';

export default [
  {
    input: 'src/index.ts',
    output: [
      {
        file: 'dist/module.js',
        format: 'cjs',
        sourcemap: true,
      },
    ],
    external: ['react', 'react-dom'],
    preserveModules: true,
    plugins: [
      ...baseConfig.plugins,
      terser(),
    ],
  },
];

Posso construí-lo com "rollup -c".

No servidor node eu apenas faço:

await renderToStream(
    t(data)   // t is something that is imported from the build
  );

Funciona sem as fontes.

Como posso corrigir o problema do XMLHttpRequest?

Eu tenho vários enums

const enum E1 {
    CLOSED = 'CLOSED',
    OPEN = 'OPEN',
    IN_PROGRESS = 'IN_PROGRESS',
}

const enum E2 {
    OPEN = 'OPEN',
    CLOSED = 'CLOSED',
    IN_PROGRESS = 'IN_PROGRESS',
}

const enum E3 {
    OPEN = 'OPEN',
    IN_PROGRESS = 'IN_PROGRESS',
}

Quero criar uma função que aceite um enum que um dos valores deva ser 'CLOSED'

const func = (value: 'CLOSED') => {...}
interface Data1 {status: E1}
interface Data2 {status: E2}
interface Data3 {status: E3}
const o1: Data1 = {status: E1.CLOSED}
const o2: Data2 = {status: E2.OPEN}
const o3: Data3 = {status: E3.OPEN}

func(o1.status)   // this should be valid. status is type E1, it contains 'CLOSED'
func(o2.status)   // this should be valid. status is type E2, it contains 'CLOSED'
func(o3.status)   // this should be invalid. status type is E3, it does not contain 'CLOSED'

Não gera um erro para cada um deles:

Argument of type E... is not assignable to parameter of type "CLOSED"

Não quero que essa função saiba sobre cada enum, pois são muitos. É por isso que usei o tipovalue: 'CLOSED'

Preciso de algo como um enum comum para fazer com que outros o estendam de alguma forma, para que eu possa usar seu tipo no argumento em vez de 'CLOSED'?

Versão datilografada: 4.9.4

Não entendo por que uma função genérica obtém o tipo genérico automaticamente, sem fornecer nada a ela.

type T<G = Record<string, any>> = {
     id: keyof G
     label: string
     somethingElse?: string
}

Esta função retorna um objeto que possui uma propriedade especial id, que deverá ter um tipo "random"se sourcea propriedade não for passada para ele. Se sourcefor aprovado, o retornado iddeverá obter o tipo desource

const element = <ID extends string = 'random'>({ source }: { source?: ID } = {}) =>
    ({
        id: (source || 'random') as ID,
        label: 'Element1',
    }) as const satisfies T  
    // I don't want the return type to be "T", I want what it returns to satisfy "T".
    // as you see I dont provide "somethingElse" key here, so I don't want it in the return type

type Data = { a: string; b: number }

Isso me dá o erro exato que desejo, mas apenas se eu usar variáveis:

const el1 = element()                   // el1 gets type { readonly id: "random";  readonly label: "Element1"; }
const el2 = element({source: 'b'})     // el2 gets type { readonly id: "b";  readonly label: "Element1"; }
const el3 = element({source: 'else'})   // el3 gets type { readonly id: "else";  readonly label: "Element1"; }

const b: T<Data>[] = [el, el2, el3]   // el1 and el3 invalid, el2 valid. It is all correct

Mas por que isso é válido quando eu uso diretamente sem variável? Deve gerar um erro

const a: T<Data>[] = [element()]   
// No generic or property is provided to it "element()", 
// why the return type of "element()" is { readonly id: keyof Data; readonly label: "Element1"; } ?? 

Parque TypeScript