Splitting Wasp TS Config?

Splitting Wasp TS Config, Can we do it?

Overview

The early support for TS config of Wasp was introduced in v0.15. It's been out for a while. Some of the goals were to support multiple Wasp files, take advantage of built-in TypeScript support for most editors, and lessen the burden of maintaining the codebase. Unfortunately, at the moment, splitting or using multiple Wasp files is a feature we can anticipate in future updates.

However, there is a way we can reduce the lines of code in the wasp file

Part 1: Extracting the pages from main.wasp.ts in 2 steps

One of the ways we can reduce the code in main.wasp.ts is by moving the pages to a different file and exporting it from there. (Can I call this Factory Pattern?)

Step 1: Move the page constants in a file, I'll call it pages.config.ts. Then return.

// pages.config.ts

export const pagesConfig = (app: any) => {
  const landingPage = app.page('LandingPage', {
    component: { importDefault: 'LandingPage', from: '@src/landing-page/LandingPage' }
  });
  // other pages

  return {
    landingPage,
    // other pages
  }
}

** I suggest you also nest the file inside a dedicated directory, maybe name it wasp-config

Step 2: Import the pages in main.wasp.ts, pass the app instance to pagesConfig

// main.wasp.ts

import { pagesConfig } from './pages.config.ts'
// other code

const { 
  landingPage,
  // other pages
} from pagesConfig(app)

app.route('LandingPageRoute', { path: '/', to: landingPage });

Part 2: Extracting jobs, query, actions and other configs

Step 1: Move the config to a variable in a new file, let's call it jobs.config.ts. I will give an example for jobs, but the same applies for queries or actions.

// jobs.config.ts

// import the appropriate type to avoid ts errors
import { JobConfig } from "wasp-config";

export const jobConfigs = (app: any) => {
  const dailyStatsJobConfig: JobConfig = {
    executor: 'PgBoss',
      perform: {
      fn: { import: 'calculateDailyStats', from: '@src/analytics/stats' }
    },
    entities: ['User', 'DailyStats', 'Logs', 'PageViewSource']
  }

  return {
    dailyStatsJobConfig
  }
}

Step 2: Import and use the config in main.wasp.ts, same with what we did for pages

// main.wasp.ts

import { jobConfigs } from './jobs.config.ts'
// other code

const { 
  dailyStatsJobConfig,
} from jobConfigs(app)

app.job('dailyStatsJob', dailyStatsJobConfig);

Wrap Up

By doing all these extractions, we can significantly reduce the code and somehow organize main.wasp.ts while we wait for the official support for multiple wasp files.

** Please let me know if you have questions or if you found a better solution.

Comments

[Matija Sosic]

Nice one! What have you been using Wasp for?