or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

build-system.mdcli-reference.mdconfiguration.mddevelopment-server.mdindex.mdplugins.mdpreview-mode.mdtype-definitions.mdutilities.md
tile.json

type-definitions.mddocs/

Type Definitions

Custom type definitions for Electron-specific module patterns, import meta extensions, and Node.js environment integration.

Capabilities

Module Declarations

Special module import patterns for Electron-specific assets and resources.

/** Node.js Worker module with options */
declare module '*?nodeWorker' {
  import { Worker, WorkerOptions } from 'node:worker_threads';
  export default function (options: WorkerOptions): Worker;
}

/** Module path as string */
declare module '*?modulePath' {
  const src: string;
  export default src;
}

/** Asset path as string */
declare module '*?asset' {
  const src: string;
  export default src;
}

/** Asset with asar unpack directive */
declare module '*?asset&asarUnpack' {
  const src: string;
  export default src;
}

/** JSON asset with external CommonJS handling */
declare module '*.json?commonjs-external&asset' {
  const src: string;
  export default src;
}

/** Native Node.js addon */
declare module '*.node' {
  const node: any;
  export default node;
}

/** WebAssembly module with loader */
declare module '*.wasm?loader' {
  const loadWasm: (options?: WebAssembly.Imports) => Promise<WebAssembly.Instance>;
  export default loadWasm;
}

Usage Examples:

// Worker thread import
import WorkerConstructor from './cpu-intensive.js?nodeWorker';
const worker = new WorkerConstructor({ 
  workerData: { task: 'process' } 
});

// Module path for dynamic imports
import modulePath from './helper.js?modulePath';
const dynamicModule = await import(modulePath);

// Asset path for file system operations
import iconPath from './icon.png?asset';
fs.copyFileSync(iconPath, destPath);

// Asset with asar unpack (extracted from app.asar)
import nativeLib from './native.dll?asset&asarUnpack';

// Native addon
import addon from './binding.node';
const result = addon.compute(data);

// WebAssembly with loader
import loadWasm from './math.wasm?loader';
const wasmInstance = await loadWasm();
const result = wasmInstance.exports.calculate(42);

Process Environment Extensions

Extensions to Node.js process environment for Electron-specific variables.

declare namespace NodeJS {
  interface ProcessEnv {
    /** Vite's dev server address for Electron renderers */
    readonly ELECTRON_RENDERER_URL?: string;
  }
}

Usage Examples:

// In main process - load renderer from dev server or file
const rendererUrl = process.env.ELECTRON_RENDERER_URL 
  ? process.env.ELECTRON_RENDERER_URL  // Development: http://localhost:5173
  : `file://${path.join(__dirname, '../renderer/index.html')}`; // Production

mainWindow.loadURL(rendererUrl);

Import Meta Extensions

Enhanced import meta interface with Vite-specific functionality for Electron.

interface ImportMetaEnv {
  /** Current mode (development, production, etc.) */
  MODE: string;
  /** True in development mode */
  DEV: boolean;
  /** True in production mode */
  PROD: boolean;
}

interface ImportGlobOptions<Eager extends boolean, AsType extends string> {
  /** Import type for the import url */
  as?: AsType;
  /** Import as static or dynamic (default: false) */
  eager?: Eager;
  /** Import only the specific named export */
  import?: string;
  /** Custom queries */
  query?: string | Record<string, string | number | boolean>;
  /** Search files in node_modules and hidden directories (default: false) */
  exhaustive?: boolean;
}

interface KnownAsTypeMap {
  raw: string;
  url: string;
  worker: Worker;
}

interface ImportGlobFunction {
  /** Import a list of files with a glob pattern */
  <Eager extends boolean, As extends string, T = As extends keyof KnownAsTypeMap ? KnownAsTypeMap[As] : unknown>(
    glob: string | string[],
    options?: ImportGlobOptions<Eager, As>
  ): (Eager extends true ? true : false) extends true ? Record<string, T> : Record<string, () => Promise<T>>;
  
  <M>(glob: string | string[], options?: ImportGlobOptions<false, string>): Record<string, () => Promise<M>>;
  <M>(glob: string | string[], options: ImportGlobOptions<true, string>): Record<string, M>;
}

interface ImportMeta {
  url: string;
  readonly env: ImportMetaEnv;
  glob: ImportGlobFunction;
}

Usage Examples:

// Environment variables in renderer process
if (import.meta.env.DEV) {
  console.log('Development mode');
}

const apiUrl = import.meta.env.VITE_API_URL;
const debugMode = import.meta.env.MODE === 'development';

// Glob imports for dynamic loading
const modules = import.meta.glob('./plugins/*.ts');
for (const path in modules) {
  const mod = await modules[path]();
  console.log(path, mod);
}

// Eager glob imports (bundled)
const eagerModules = import.meta.glob('./utils/*.ts', { eager: true });

// Glob imports with specific export
const configs = import.meta.glob('./configs/*.ts', { 
  import: 'default',
  eager: true 
});

// Raw file imports
const templates = import.meta.glob('./templates/*.html', { 
  as: 'raw',
  eager: true 
});

Electron-Specific Patterns

Asset Handling Patterns

Different asset import patterns for various use cases:

// Standard asset (bundled and optimized)
import logoUrl from './logo.png';

// Asset with file path (for Node.js file operations)
import iconPath from './icon.ico?asset';

// Asset that must be unpacked from asar
import nativeBinary from './helper.exe?asset&asarUnpack';

// Module path for dynamic resolution
import workerPath from './worker.js?modulePath';

Worker Thread Patterns

Node.js worker thread integration:

// Import worker constructor
import WorkerConstructor from './cpu-worker.js?nodeWorker';

// Create worker with data
const worker = new WorkerConstructor({
  workerData: { input: data },
  stdout: true,
  stderr: true
});

// Handle worker communication
worker.on('message', (result) => {
  console.log('Worker result:', result);
});

worker.postMessage({ command: 'start' });

Native Module Patterns

Integration with native Node.js addons:

// Import native addon
import nativeAddon from './native-module.node';

// Use addon functions
const result = nativeAddon.processData(inputBuffer);
const config = nativeAddon.getSystemInfo();

// Handle addon errors
try {
  const output = nativeAddon.dangerousOperation();
} catch (error) {
  console.error('Native addon error:', error);
}

WebAssembly Patterns

WebAssembly module loading and execution:

// Import WASM loader
import loadMathWasm from './math.wasm?loader';

// Initialize WASM module
const wasmInstance = await loadMathWasm({
  env: {
    // Import functions for WASM
    log: (value: number) => console.log('WASM log:', value)
  }
});

// Use WASM exports
const { add, multiply, memory } = wasmInstance.exports;
const result = add(10, 20);

Environment Variable Types

Process-specific environment variable patterns:

// Main process environment variables
declare namespace NodeJS {
  interface ProcessEnv {
    readonly ELECTRON_RENDERER_URL?: string;
    readonly NODE_ENV_ELECTRON_VITE?: 'development' | 'production';
    readonly V8_INSPECTOR_PORT?: string;
    readonly V8_INSPECTOR_BRK_PORT?: string;
    readonly REMOTE_DEBUGGING_PORT?: string;
    readonly NO_SANDBOX?: '1';
    readonly ELECTRON_CLI_ARGS?: string; // JSON array
    readonly ELECTRON_ENTRY?: string;
  }
}

// Import meta environment variables (renderer process)
interface ImportMetaEnv {
  // Standard Vite variables
  readonly MODE: string;
  readonly DEV: boolean;
  readonly PROD: boolean;
  
  // Process-specific prefixed variables
  readonly VITE_APP_TITLE?: string;
  readonly MAIN_VITE_DEBUG?: string;
  readonly PRELOAD_VITE_CONTEXT_ISOLATION?: string;
  readonly RENDERER_VITE_FEATURE_FLAG?: string;
}