Development Setup

Relevant source files

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

• package.json
• vite.config.ts
• eslint.config.js
• tsconfig.json
• scripts/publish-check.sh
• README.md
• src/lib/SuiModule/SuiModule.svelte

This document outlines the development setup for the sui-svelte-wallet-kit library. It covers the project's dependencies, build system, development server, code quality tools, and publishing workflow. The setup is primarily managed through pnpm and configured via package.json, Vite, SvelteKit, ESLint, and TypeScript configuration files.

The project is a Svelte 5 library built with SvelteKit, packaged for distribution on npm, and relies on modern tooling for a streamlined development experience.

Core Dependencies and Project Structure

The project's dependencies are defined in package.json and are categorized into dependencies, devDependencies, and peerDependencies.

Sources: package.json:71-100

Dependencies

These are the core libraries required for the package to function at runtime.

Package	Version	Description
@mysten/enoki	^0.12.14	Used for zkLogin (Google) integration.
@mysten/sui	^1.45.2	The official Sui TypeScript SDK for interacting with the Sui blockchain, including the SuiClient.
@mysten/wallet-standard	^0.19.9	Implements the wallet standard for wallet interaction.
@suiet/wallet-sdk	^0.5.0	Provides wallet detection (WalletRadar) and SuiNS resolution (resolveAddressToSuiNSNames).
@wallet-standard/core	^1.1.1	Core interfaces and utilities for the Wallet Standard, used for discovering and interacting with wallets.

Sources: package.json:94-100, src/lib/SuiModule/SuiModule.svelte:2-7

Dev Dependencies

These packages are used for development, building, testing, and maintaining code quality.

Package	Version	Role
@sveltejs/kit	^2.49.1	The Svelte application framework used for development and building.
@sveltejs/package	^2.5.7	Tool for packaging Svelte libraries.
vite	^7.2.6	The build tool and development server.
svelte	^5.45.4	The Svelte 5 compiler.
typescript	^5.9.3	Provides type checking for the project.
eslint	^9.39.1	Linter for identifying and reporting on patterns in JavaScript/TypeScript.
prettier	^3.7.4	Code formatter to ensure consistent style.
publint	^0.3.15	A tool to lint package exports and ensure proper configuration.
vitest	^4.0.15	Test framework.

Sources: package.json:72-92

Peer Dependencies

The package requires the consuming application to have svelte installed.

Package	Version	Description
svelte	^5.0.0	Requires a Svelte 5 project environment.

Sources: package.json:70-72

Scripts and Workflows

The scripts section in package.json defines the main workflows for development, building, and publishing.

Sources: package.json:15-32

Key Scripts

Script	Command	Description
dev	vite dev	Starts the Vite development server for the example app (src/routes).
build	svelte-kit sync && vite build	Builds the example application. Not used for packaging the library.
package	svelte-kit sync && svelte-package	Packages the library source code from src/lib into the dist directory for publishing.
prepack	pnpm run package	A lifecycle script that automatically runs the package script before pnpm pack or pnpm publish.
check	svelte-kit sync && svelte-check --tsconfig ./tsconfig.json	Runs Svelte's type checker against the codebase.
lint	prettier --check . && eslint .	Checks for formatting issues with Prettier and linting errors with ESLint.
format	prettier --write .	Automatically formats all files in the project using Prettier.
publish:patch	pnpm version patch && pnpm build && pnpm publish	Bumps the patch version, builds the package, and publishes it to the npm registry.

Build and Packaging Process

The library is packaged using the svelte-package command. The process is initiated by running pnpm run package or pnpm run prepack.

This diagram illustrates the packaging flow.

*svelte-kit sync**: Generates type definitions and synchronizes project files.

• svelte-package: Compiles the Svelte components and TypeScript files from src/lib into JavaScript and type definition files (.d.ts) inside the dist directory.

The files array in package.json ensures that only the dist directory is included in the final published package.

Sources: package.json:20, package.json:34-38

Publishing Workflow

The project includes helper scripts for versioning and publishing. A pre-publish check script is also available to ensure the package is valid.

This diagram shows the steps involved in publishing a new patch version.

The publish-check.sh script can be run manually to validate the package before publishing. It performs the following checks:

1. Verifies the existence of required files (package.json, README.md, etc.).
2. Ensures package.json contains name, version, and description.
3. Runs the prepack script to build the package.
4. Confirms that the dist directory and its main entry points (dist/index.js, dist/index.d.ts) are created.

Sources: package.json:30-32, scripts/publish-check.sh

Configuration

The development environment is configured through several files at the root of the project.

This diagram shows the relationship between the main configuration files.

Vite Configuration (vite.config.ts)

Vite is configured to use the SvelteKit plugin and sets the development server port to 5176.

// vite.config.ts
import devtoolsJson from 'vite-plugin-devtools-json';
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vitest/config';

export default defineConfig({
	plugins: [sveltekit(), devtoolsJson()] as any,
	server: {
		port: 5176
	},
});

Sources: vite.config.ts

TypeScript Configuration (tsconfig.json)

The TypeScript configuration extends the base config from SvelteKit (./.svelte-kit/tsconfig.json). Key settings include:

• "strict": true: Enables all strict type-checking options.
• "moduleResolution": "bundler": Modern module resolution strategy suitable for bundlers like Vite.
• "checkJs": true: Allows TypeScript to report errors in .js files.

// tsconfig.json
{
	"extends": "./.svelte-kit/tsconfig.json",
	"compilerOptions": {
		"allowJs": true,
		"checkJs": true,
		"esModuleInterop": true,
		"forceConsistentCasingInFileNames": true,
		"resolveJsonModule": true,
		"skipLibCheck": true,
		"sourceMap": true,
		"strict": true,
		"moduleResolution": "bundler",
	}
}

Sources: tsconfig.json

ESLint Configuration (eslint.config.js)

The project uses a flat ESLint configuration (eslint.config.js). It combines recommended rules from:

• @eslint/js (JavaScript)
• typescript-eslint (TypeScript)
• eslint-plugin-svelte (Svelte)
• eslint-config-prettier (to disable rules that conflict with Prettier)

It also disables the no-undef rule, as recommended for TypeScript projects where the compiler handles undefined variable checks.

Sources: eslint.config.js