JavaScript bibliotheek VEMAP

De map src/lib bevat alle niet-UI JavaScript modules: configuratie, Alpine data providers, stores, services en helpers voor parsers/middleware. Deze pagina focust op de minimale kennis die je nodig hebt bij het debuggen of uitbreiden van de core logica.

Dankzij aliassen in tsconfig.json en dezelfde alias-config in astro.config.mjs kun je overal dezelfde padnotaties gebruiken (@lib/..., @utils/...). Gebruik die aliassen ook in dynamische imports (await import("@lib/services/...")) zodat TypeScript, Vite en SSR allemaal dezelfde resolutie volgen, de developerservaring consistenter blijft en relative-path fouten (../../) vermeden worden. Dit zorgt voor een consistente en eenvoudige ontwikkelomgeving en helpt bij consistentie wanneer bestanden verplaatst worden.

---

Module overzicht

Domein	Entry file(s)	Korte toelichting
App factory	app.factory.js	Initialiseert stores, Alpine data en shared services.
Config	config/{app,environments,index}.js	Globale settings, environment mapping en runtime helpers.
Utils	utils/*.js + utils/{charts,http}	Pure helpers voor data, formatting, cookies, tokens en netwerk.
Services	services/auth.service.js, fileUpload.service.js	API-clients met fetch wrappers en error handling.
Stores	stores/*.store.js	Alpine-compatible state containers (modal, project, task, etc.).
Alpine data	alpine/**/*data.js	JSON/data providers voor dashboards, formulieren en charts.
Parser	parser/papaparse.init.js	PapaParse configuratie voor bulk imports/exports.
Middleware	middleware/auth.middleware.js	Session/role guard voor server routes en API calls.
Email editor libs	email-editor/{index,builders,utils}.ts(x)	Bridge tussen EmailBuilder en VEMAP (schema’s, utils).

---

Gebruik & tips

• Importeer utils/services altijd via absolute alias (@lib/utils/...) om tree-shaking te behouden.
• Stores verwachten dat app.factory.js is uitgevoerd; initialiseer deze in layouts of entrypoints voor je Alpine code aanroept.
• Houd PapaParse configuratie (parser/papaparse.init.js) in sync met test/parser/papaparse.init.test.js.
• Nieuwe API-calls? Voeg eerst een service toe en schrijf daarna een store of Alpine helper; zo blijft mocking in tests eenvoudig.
• Dynamische imports werken cross-platform zolang je de aliassen gebruikt: const { default: service } = await import("@services/auth.service").

---

Integratie met Astro & Alpine

• tsconfig.json bepaalt de aliassen én baseUrl: ".", waardoor imports overal in de codebase identiek zijn. Voeg nieuwe alias entries toe zodra je nieuwe lib-subdomeinen introduceert.
• astro.config.mjs kopieert dezelfde aliassen naar Vite en definieert alpinejs({ entrypoint: "./src/lib/app.factory.js" }). Hierdoor worden stores automatisch geïnjecteerd tijdens SSR en hydraties.
• SSR draait met output: "server". Laat stores en services daarom geen browser-API’s aanroepen zonder guard (if (typeof window !== "undefined") ...).
• Wil je Alpine code lazy-loaden? Gebruik await import("@lib/alpine/forms/recipients.data.js") binnen een whenVisible hook; Astro/Vite splitst dat automatisch uit, terwijl de alias consistent blijft.

---

Bestandenstructuur

• Directorysrc/lib/

  • app.factory.js
  • Directoryconfig/

    • app.js
    • environments.js
    • index.js
  • Directoryutils/

    • app-version.js
    • auth.js
    • constants.js
    • cookies.js
    • datepicker.js
    • dates.js
    • errors.js
    • events.js
    • files.js
    • fileUpload.js
    • formatters.js
    • functions.js
    • session.js
    • strings.js
    • tokens.js
    • validation.js
    • Directorycharts/

      • config.js
      • data.js
      • factory.js
    • Directoryhttp/

      • client.js
      • headers.js
  • Directoryservices/

    • auth.service.js
    • fileUpload.service.js
  • Directorystores/

    • calendar.store.js
    • closure.store.js
    • closureReferences.store.js
    • tenant.store.js
    • event.store.js
    • fileModal.store.js
    • files.store.js
    • formModal.store.js
    • metrics.store.js
    • modal.store.js
    • notification.store.js
    • period.store.js
    • project.store.js
    • slideover.store.js
    • task.store.js
    • user.store.js
  • Directoryalpine/

    • Directoryauth/

      • …
    • Directorycharts/

      • …
    • Directoryforms/

      • …
    • Directorymail/

      • …
    • Directorystats/

      • …
    • Directoryviews/

      • …
  • Directoryparser/

    • papaparse.init.js
  • Directorymiddleware/

    • auth.middleware.js
  • Directoryemail-editor/

    • index.ts
    • utils.ts
    • Directorybuilders/

      • buildBlockComponent.tsx
      • buildBlockConfigurationDictionary.ts
      • buildBlockConfigurationSchema.ts