v1.2.1

1.2.0 update: introduces Attachments for setting up HTML Canvas. Hook up your draw function, run an init function and even keep the canvas scaled to its container, all with {@Attach ... } call.

Refer to the below Svelte Playground for instructions on how to use.

Svelte Playground

[1.2.1] - 2025-05-22

Fixed

• fixed context-specific function type declarations

Removed

• removed unused canvas/index.ts file and exports

[1.2.0] - 2025-05-22

Added

• added Attachments as introduced in Svelte 5.29

Changed

• rebuilt project as a SvelteKit library (was previously manually set up with svelte-package)
• exported Loop class
• cleaned up JSDoc and switched to typescript

v1.2.0

1.2.0 update: introduces Attachments for setting up HTML Canvas. Hook up your draw function, run an init function and even keep the canvas scaled to its container, all with {@Attach ... } call.

Refer to the below Svelte Playground for instructions on how to use.

Svelte Playground

[1.2.0] - 2025-05-22

Added

• added Attachments as introduced in Svelte 5.29

Changed

• rebuilt project as a SvelteKit library (was previously manually set up with svelte-package)
• exported Loop class
• cleaned up JSDoc and switched to typescript

v1.1.3

[1.1.3] - 2024-12-21

Fixed

• added missing functions and lengths object to ssr dummy loop
• made internal begin, update, draw and end functions private
• added document check in loop.svelte.js

v1.1.2

[1.1.2] - 2024-12-21

Fixed

• now checks for window and provides a no-op loop for ssr environments. Should work in SvelteKit now.

Added

• added AutoType.svelte to Test-App
• added test-ssr app for SvelteKit testing

Dependencies

• removed @types/mainloop.js from devDependencies

v1.1.1

Changelog

[1.1.1] - 2024-12-16

• attempt #1 to fix github npm badge caching
• moved isVisible boolean back to ViewLoop component from loop state
• changed ViewLoop section style to display: contents for easier styling

v1.1.0

Changelog

[1.1.0] - 2024-12-16

• modernised and internalised mainloop.js, removed as dependency
  • this was required in order to get the library to work on the Svelte REPL
  • switched to es module export, removed old module exports
  • updated variable declarations
  • kept all original comments intact, added some jsdoc types
  • added a note about noop vs conditional performance, no change functionally
• fixed incorrect jsdoc type imports in JoinLoop.svelte

v1.0.1

Changes in 1.0.1

• Removed "log update functions" button from ViewLoop component

Initial Release v.1.0.0

Initial Release

A svelte wrapper for mainloop.js that handles function registration and cleanup, and lets you join and leave the loop with a single component. It provides debugging info and tools, exposes all of the standard mainloop.js functionality, is fully typed, and provides inline documentation through intellisense.

Features

• Easy loop joining/leaving with <JoinLoop> component
• Automatic cleanup when components are removed
• Delta time provided in seconds for easier calculations
• Debug interface via <ViewLoop> component
• Full TypeScript support with inline documentation
• Access to all mainloop.js stages (begin, update, draw, end)

Installation

npm install svelte-mainloop

Basic Usage

<script>
   import { JoinLoop } from 'svelte-mainloop'

   function update(delta) {
      // do something
   }
</script>

<JoinLoop {update}>

More info in the README.

You may also like to read the official MainLoop.js documentation.