Developer Environment Setup

Relevant source files

The following files were used as context for generating this wiki page:

• packages/remotes/package.json
• packages/remotes/vite.config.ts
• packages/remotes/svelte.config.js
• packages/remotes/tsconfig.json
• packages/remotes/eslint.config.js
• README.md

The @opensky/remotes package is a SvelteKit library designed to provide helper utilities for remote form functions. The development environment is built upon a modern web stack, utilizing SvelteKit, Vite, and TypeScript. This setup ensures a streamlined development workflow, from running a local development server to building the final distributable package.

Code quality and consistency are maintained through a combination of ESLint for linting, Prettier for code formatting, and svelte-check for type-checking Svelte components. The project is configured as a standard Node.js module, with all dependencies and development scripts managed through package.json.

Core Technologies and Dependencies

The project relies on a set of core technologies and dependencies for its functionality, build process, and development experience. These are defined in packages/remotes/package.json.

Peer Dependencies

These packages are expected to be installed by the consumer of the @opensky/remotes library.

Package	Version	Description
@sveltejs/kit	^2.27.0	The SvelteKit framework.
svelte	^5.0.0	The Svelte compiler and runtime.
Sources: packages/remotes/package.json:16-19

Runtime Dependencies

This is the main dependency required for the library to function at runtime.

Package	Version	Description
runed	^0.35.1	Provides Svelte 5 runes utilities, such as useDebounce.
Sources: packages/remotes/package.json:13-15, packages/remotes/src/lib/validation.svelte.ts:2

Development Dependencies

These packages are used for development, testing, and building the library.

Package	Description
@sveltejs/kit	SvelteKit framework tools for development.
@sveltejs/package	Utility for packaging Svelte libraries.
vite	The build tool and development server.
typescript	The TypeScript compiler.
eslint	Pluggable JavaScript linter.
prettier	An opinionated code formatter.
svelte-check	A tool to check Svelte components for issues.
publint	A tool to check for common package publishing issues.
Sources: packages/remotes/package.json:20-37

Configuration

The development environment is governed by several key configuration files that control the build process, TypeScript compilation, and code quality checks.

Build and Framework Configuration

The project uses Vite as its build tool and development server, configured via vite.config.ts. SvelteKit's behavior is defined in svelte.config.js.

The diagram below illustrates how the configuration files interact.

• vite.config.ts: This file configures Vite by simply adding the SvelteKit plugin, which handles most of the build and development server setup.
  Sources: packages/remotes/vite.config.ts:4-6
• svelte.config.js: This file configures SvelteKit. It specifies the use of vitePreprocess() to allow preprocessors like TypeScript in Svelte files and uses @sveltejs/adapter-auto to automatically select the appropriate adapter for the deployment environment.
  Sources: packages/remotes/svelte.config.js:5-15

TypeScript Configuration

TypeScript is configured via tsconfig.json. This file extends the base configuration generated by SvelteKit (./.svelte-kit/tsconfig.json) and applies stricter rules for development.

Option	Value	Description
strict	true	Enables all strict type-checking options.
module	NodeNext	Specifies module code generation compatible with Node.js.
moduleResolution	bundler	Mimics how modern bundlers resolve modules.
checkJs	true	Reports errors in .js files.
Sources: packages/remotes/tsconfig.json:3-14

Linting and Formatting

Code quality is enforced by ESLint and Prettier. The configuration in eslint.config.js combines multiple rule sets.

The following diagram shows the composition of the ESLint configuration.

Sources: packages/remotes/eslint.config.js:1-11

The configuration applies recommended rules from ESLint, TypeScript-ESLint, and eslint-plugin-svelte, and integrates Prettier to avoid conflicting rules. It also specifies parser options for Svelte files to ensure proper analysis.
Sources: packages/remotes/eslint.config.js:12-34

Development Workflow

The scripts section in package.json defines the main commands for developing, testing, and building the project.

Available Scripts

Command	Description
npm run dev	Starts the Vite development server.
npm run build	Builds the library for production and prepares it for packaging.
npm run preview	Starts a local server to preview the production build.
npm run check	Runs SvelteKit sync and then type-checks the project with svelte-check.
npm run lint	Checks for code formatting issues with Prettier and lints the code with ESLint.
npm run format	Automatically formats all project files using Prettier.
Sources: packages/remotes/package.json:56-65

Build Process

The build script orchestrates a multi-step process to create the distributable package.

The diagram below outlines the steps executed by the npm run build command.

1. vite build: Compiles the application using Vite.
2. npm run prepack: This script is run after the Vite build.
   • svelte-kit sync: Synchronizes type definitions.
   • svelte-package: Packages the Svelte library into the dist directory.
   • publint: Checks the generated package for common publishing errors.
     Sources: packages/remotes/package.json:57, packages/remotes/package.json:63

The final output is placed in the dist directory, which is what gets published to npm. The files array in package.json ensures only the dist directory is included in the published package.
Sources: packages/remotes/package.json:43-47