ts-config-single-spa provides a foundational TypeScript configuration preset designed specifically for projects within the single-spa microfrontend ecosystem. Currently at version 3.0.0, this package aims to standardize `tsconfig.json` settings, ensuring compatibility and best practices across various microfrontends. It handles common configurations such as `target`, `module`, `jsx` support, and `moduleResolution`, which are critical for smooth integration in a polyglot microfrontend architecture. While there isn't a strict independent release cadence, it is part of the larger `create-single-spa` monorepo and updates are coordinated with other single-spa tooling, ensuring ongoing relevance and support. Its key differentiator is simplifying TypeScript setup for single-spa, minimizing boilerplate, and reducing common configuration pitfalls associated with module interoperation and shared dependencies in a microfrontend environment.
npm install ts-config-single-spaVerified import paths — ran on the pinned version, not inferred.
Demonstrates a basic `tsconfig.json` file extending `ts-config-single-spa` for a microfrontend, including common compiler options and file inclusions.
Review the TypeScript release notes for your target version. Explicitly set `compilerOptions` like `strict: true`, `moduleResolution: "node"`, `target: "es2020"`, and `rootDir: "."` in your `tsconfig.json` if they differ from the new defaults or your project's expected behavior. Always run `tsc --init` in a temporary directory to see the latest default `tsconfig.json`.
Ensure `compilerOptions.moduleResolution` is set appropriately (e.g., `"node"` or `"bundler"`). Verify `baseUrl` and `paths` in your `tsconfig.json` are correctly configured to resolve internal package imports. If using a monorepo, explicitly check `webpack-config-single-spa-ts` configurations and ensure `fork-ts-checker-webpack-plugin` is set up correctly for your workspace to prevent stale type errors.
Configure `webpack.config.js` to correctly define `externals` for shared libraries. Utilize import maps for in-browser module resolution, and configure your build tool (Webpack, Rollup) to treat these as external. Tools like `systemjs-webpack-interop` or `import-map-externals-webpack-plugin` can assist with this.
Migrate your `target` to `"es2015"` or newer (e.g., `"es2020"` or `"esnext"`) and update `module` and `moduleResolution` to `"esnext"` or `"bundler"` if compatible with your runtime and build chain. Be aware of `package.json` `"type": "module"` implications and ensure your bundles are compatible with in-browser ES modules.
Ensure your `compilerOptions.lib` array explicitly includes `"dom"`, `"dom.iterable"`, and `"es20xx"` (where `xx` is your target ECMAScript version) as needed. `ts-config-single-spa` aims to provide reasonable defaults, but local overrides might be necessary for specific browser APIs. The current version should include `dom` and `es2020` by default.
Install the official type declarations: `npm install --save-dev @types/single-spa`. Ensure `compilerOptions.moduleResolution` is set to `"node"` (or `"bundler"` for newer TS versions) in your `tsconfig.json`. If using `type: "module"` in `package.json`, check for `package.json` `"exports"` configuration issues for `single-spa` itself.
Verify the `extends` path: ensure `"ts-config-single-spa"` is correctly specified. Check `include` and `exclude` arrays for typos or incorrect glob patterns. Ensure the `ts-config-single-spa` package is correctly installed in `node_modules`.
Ensure `@types/single-spa` is installed. If manually declaring types, create a `global.d.ts` file with `declare global { interface Window { singleSpa: any; // Or a more specific SingleSpaGlobal type } }` to extend the global `Window` interface.