Guía del marco: SvelteKit

Variables de entorno público vs privado

SvelteKit distingue explícitamente entre variables públicas (accesibles en el cliente) y privadas (solo servidor) a través de $env/static/public / $env/dynamic/public vs $env/static/private / $env/dynamic/private.

.env

# Ends up in browser bundle — anyone can see it
PUBLIC_MARKPDF_API_KEY=tu_key_publica

# Only accessible from server-side code (+page.server.ts, +server.ts, hooks.server.ts)
MARKPDF_API_KEY=tu_key_privada

Si usa createConvertStore/MarkpdfClient en un componente .svelte (código de cliente), solo puede pasarle una variable PUBLIC_*, y esa clave está expuesta en el paquete, como en cualquier SPA.

Patrón A: clave pública en el cliente (prototipos, herramientas internas)

<script lang="ts">
  import { PUBLIC_MARKPDF_API_KEY } from "$env/static/public";
  import { MarkpdfClient, createConvertStore } from "@markpdf/svelte";

  const client = new MarkpdfClient({ apiKey: PUBLIC_MARKPDF_API_KEY });
  const convertStore = createConvertStore(client);
</script>

Al igual que con cualquier SPA, esta clave es visible para cualquiera que inspeccione el paquete o el tráfico de la red. Úselo solo si acepta ese riesgo (consulte consideraciones clave de exposición, que se aplican de la misma manera aquí).

Patrón B (recomendado): proxy con `+server.ts`

Mantenga la clave en el servidor y exponga su propio punto final:

src/routes/api/convert/+server.ts

import { MARKPDF_API_KEY } from "$env/static/private";
import { MarkpdfClient } from "@markpdf/svelte";
import type { RequestHandler } from "./$types";

const client = new MarkpdfClient({ apiKey: MARKPDF_API_KEY });

export const POST: RequestHandler = async ({ request }) => {
  const form = await request.formData();
  const file = form.get("file") as File;

  const markdown = await client.convertFile(file, { filename: file.name, mode: "fast" });

  return new Response(markdown, { headers: { "content-type": "text/markdown" } });
};

Y desde el componente del cliente, cargue el archivo en su propio punto final en lugar de hacerlo directamente en markpdf:

<script lang="ts">
  let status = "idle";
  let markdown = "";

  async function onFile(e: Event) {
    const file = (e.target as { files?: FileList | null }).files?.[0];
    if (!file) return;

    status = "uploading";
    const form = new FormData();
    form.append("file", file);

    const res = await fetch("/api/convert", { method: "POST", body: form });
    markdown = await res.text();
    status = "success";
  }
</script>

<input type="file" on:change={onFile} />

Con este patrón, createConvertStore no se aplica en el lado del cliente (no tiene sentido llamarlo contra su propio punto final a menos que también implemente el mismo contrato de progreso). Si necesita un progreso de carga real en su propio punto final, implemente el mismo patrón XMLHttpRequest que createConvertStore usa internamente, apuntando a /api/convert en lugar de API de markpdf.

Acciones de formulario como alternativa a `+server.ts`

Si el formulario de carga se encuentra en la misma página, una acción de formulario (+page.server.ts) es una alternativa sin necesidad de un punto final separado:

src/routes/convert/+page.server.ts

import { MARKPDF_API_KEY } from "$env/static/private";
import { MarkpdfClient } from "@markpdf/svelte";
import type { Actions } from "./$types";

const client = new MarkpdfClient({ apiKey: MARKPDF_API_KEY });

export const actions: Actions = {
  default: async ({ request }) => {
    const form = await request.formData();
    const file = form.get("file") as File;
    const markdown = await client.convertFile(file, { filename: file.name, mode: "fast" });
    return { markdown };
  },
};

Utilice acciones de formulario cuando el formulario sea tradicional (envío de página completa, mejora progresiva con use:enhance). Utilice un punto final +server.ts cuando necesite cargar el progreso a través de XMLHttpRequest/fetch desde el cliente JS, o cuando otro servicio necesite llamar a su proxy directamente.

Python

Node.js / TypeScript

C++

Next.js

Angular

React

React Native

Svelte

Bun

Flutter

Java

Kotlin

Guía del marco: SvelteKit

Guía del marco: SvelteKit

Variables de entorno público vs privado

Patrón A: clave pública en el cliente (prototipos, herramientas internas)

Patrón B (recomendado): proxy con `+server.ts`

Acciones de formulario como alternativa a `+server.ts`

​Guía del marco: SvelteKit

​Variables de entorno público vs privado

​Patrón A: clave pública en el cliente (prototipos, herramientas internas)

​Patrón B (recomendado): proxy con +server.ts

​Acciones de formulario como alternativa a +server.ts

Guía del marco: SvelteKit

Variables de entorno público vs privado

Patrón A: clave pública en el cliente (prototipos, herramientas internas)

Patrón B (recomendado): proxy con `+server.ts`

Acciones de formulario como alternativa a `+server.ts`