@flareapp/svelte 2.6.0 → 2.8.0

package/README.md

@@ -66,6 +66,119 @@ See the [JavaScript identifying-users docs](https://flareapp.io/docs/javascript/
 Full documentation on the error boundary, lifecycle callbacks, reset keys, custom boundary usage, and more is available
 at [flareapp.io/docs/svelte/general/installation](https://flareapp.io/docs/svelte/general/installation).
 
+## Component profiling
+
+Records one span per component mount, nested under the active pageload or navigation trace, so you can
+see which components dominate a page's render time. Requires tracing to be enabled (`enableTracing:
+true`).
+
+Turn it on in `svelte.config.js` with an allowlist:
+
+```js
+import { withFlareConfig } from '@flareapp/svelte/config';
+import adapter from '@sveltejs/adapter-node';
+
+export default withFlareConfig(
+    { kit: { adapter: adapter() } },
+    { profileComponents: [/\+(page|layout)(@[^/]*)?$/, 'AddToCartButton'] },
+);
+```
+
+`profileComponents` accepts:
+
+- **nothing** (the default): no components are profiled.
+- **an array** of strings and regular expressions. Strings match exactly, regexes by `test()`.
+- **`true`**: every component. This is a debugging aid, not a production setting. A real page will hit
+  the 1024 span cap and bury the spans you care about among icons and list items.
+
+Profiling and component tracking are independent. You can run either on its own:
+
+```js
+withFlareConfig(config, { componentTracking: false, profileComponents: [/\+page$/] });
+```
+
+### Preprocessor ordering
+
+Both features are injected by a Svelte preprocessor, which `withFlareConfig` installs for you. It parses
+each file with `svelte/compiler` to find the component's own instance script, which is the only reliable
+way to tell that script apart from a `<script>` nested in your markup. So it has to be handed Svelte
+syntax.
+
+That only constrains you if you also run a markup preprocessor that converts another template language
+(pug and the like) into Svelte. `withFlareConfig` puts the Flare preprocessor first, where it would see
+the untransformed template, so in that setup wire it up yourself and place it after the one that
+produces Svelte:
+
+```js
+import { flarePreprocessor } from '@flareapp/svelte/config';
+
+export default {
+    preprocess: [templateToSvelte(), flarePreprocessor({ profileComponents: [/\+page$/] })],
+};
+```
+
+Style blocks are not affected. `<style lang="scss">` and friends are handled regardless of ordering.
+
+A file the preprocessor cannot parse is left exactly as it was, with a warning naming the file. You lose
+that component's registration, never the build.
+
+### Component names
+
+Names come from the filename, and route files carry their route directory so they stay distinguishable:
+
+| File                                   | Name                 |
+| -------------------------------------- | -------------------- |
+| `src/lib/ProductGallery.svelte`        | `ProductGallery`     |
+| `src/routes/+page.svelte`              | `+page`              |
+| `src/routes/product/[id]/+page.svelte` | `product/[id]/+page` |
+| `src/routes/product/+layout.svelte`    | `product/+layout`    |
+
+Without the route prefix every route in a SvelteKit app would be called `+page`, and the allowlist could
+not target one of them. The allowlist matches the same string the span reports, so what you write is what
+you see. Renaming or moving a file silently stops it being profiled.
+
+Layout-breakout files (`+page@.svelte`, `+page@(app).svelte`, `+layout@.svelte`, and so on) keep their
+`@` suffix in the span name, for example `foo/+page@(app)`.
+
+### What the tree shows
+
+Only components you matched produce spans. A matched component nests under the nearest **matched**
+ancestor, skipping anything unmatched in between, so the tree reflects your allowlist rather than the
+real component tree.
+
+### Two shapes, both correct
+
+A layout mounts once and does not re-mount when you navigate, so it records a span on the load where it
+mounted and not on later navigations. Expect the full tree on a pageload:
+
+```
+browser_pageload  /product/[id]        312ms
+ └─ +layout                            290ms
+     └─ product/[id]/+page             240ms
+         └─ AddToCartButton             12ms
+```
+
+and a flatter one after a client-side navigation:
+
+```
+browser_navigation  /product/[other]   180ms
+ └─ product/[other]/+page              140ms
+     └─ AddToCartButton                 11ms
+```
+
+The missing layout span is expected, not a dropped span.
+
+### Waits in `{#await}` are not included
+
+A component does not wait for a pending `{#await}` branch before it finishes mounting. Read a parent's
+duration as the time to mount its own synchronous subtree, not as time-to-interactive. A component
+rendered inside `{:then}` can therefore start after its parent has already ended.
+
+### No update spans
+
+Only mounts are recorded. Svelte 5 disallows `beforeUpdate` and `afterUpdate` in runes mode, so there is
+no reliable way to time an update from outside a component.
+
 ## Compatibility
 
 - Svelte 5.3+

package/dist/componentTree.js

@@ -87,8 +87,9 @@ function hasAncestor(node, ancestor) {
     let current = node.parent;
     const seen = new Set();
     while (current && !seen.has(current)) {
-        if (current === ancestor)
+        if (current === ancestor) {
             return true;
+        }
         seen.add(current);
         current = current.parent;
     }

package/dist/config.d.ts

@@ -1,13 +1,27 @@
+import type { ProfileComponentsOption } from '@flareapp/core/util';
 import type { PreprocessorGroup } from 'svelte/compiler';
 import { type FlarePreprocessorOptions } from './preprocessor.js';
 interface SvelteConfig {
     preprocess?: PreprocessorGroup | PreprocessorGroup[];
+    kit?: {
+        files?: {
+            routes?: string;
+        };
+        [key: string]: unknown;
+    };
     [key: string]: unknown;
 }
 export interface WithFlareConfigOptions {
     componentTracking?: boolean;
+    /** Which components get a mount span. Matched against the route-aware profile name. */
+    profileComponents?: ProfileComponentsOption;
     exclude?: FlarePreprocessorOptions['exclude'];
     importSource?: string;
 }
+/**
+ * Wraps a SvelteKit config with Flare's preprocessor, passing through `kit.files.routes` for
+ * route-aware profile names. Returns `config` unchanged if nothing was requested, or a Flare
+ * preprocessor is already installed.
+ */
 export declare function withFlareConfig(config: SvelteConfig, options?: WithFlareConfigOptions): SvelteConfig;
 export { flarePreprocessor, type FlarePreprocessorOptions } from './preprocessor.js';

package/dist/config.js

@@ -1,14 +1,27 @@
 import { flarePreprocessor } from './preprocessor.js';
+/**
+ * Wraps a SvelteKit config with Flare's preprocessor, passing through `kit.files.routes` for
+ * route-aware profile names. Returns `config` unchanged if nothing was requested, or a Flare
+ * preprocessor is already installed.
+ */
 export function withFlareConfig(config, options) {
-    const { componentTracking = true, exclude, importSource } = options ?? {};
-    if (!componentTracking) {
+    const { componentTracking = true, profileComponents = false, exclude, importSource } = options ?? {};
+    // An empty array profiles nothing, so treat it as off when deciding whether to install.
+    const profilingRequested = profileComponents === true || (Array.isArray(profileComponents) && profileComponents.length > 0);
+    if (!componentTracking && !profilingRequested) {
         return config;
     }
     const existing = normalizePreprocessors(config.preprocess);
     if (existing.some((p) => !!p.__flareId)) {
         return config;
     }
-    const preprocessor = flarePreprocessor({ exclude, importSource });
+    const preprocessor = flarePreprocessor({
+        exclude,
+        importSource,
+        componentTracking,
+        profileComponents,
+        routesDir: config.kit?.files?.routes,
+    });
     preprocessor.__flareId = true;
     return {
         ...config,
@@ -16,10 +29,12 @@ export function withFlareConfig(config, options) {
     };
 }
 function normalizePreprocessors(preprocess) {
-    if (!preprocess)
+    if (!preprocess) {
         return [];
-    if (Array.isArray(preprocess))
+    }
+    if (Array.isArray(preprocess)) {
         return preprocess;
+    }
     return [preprocess];
 }
 export { flarePreprocessor } from './preprocessor.js';

package/dist/contextToAttributes.js

@@ -1,7 +1,4 @@
+import { toCustomContext } from '@flareapp/core';
 export function contextToAttributes(context) {
-    return {
-        'context.custom': {
-            svelte: context.svelte,
-        },
-    };
+    return toCustomContext('svelte', context.svelte);
 }

package/dist/extractComponentInfo.js

@@ -4,11 +4,11 @@ export function extractComponentInfo(frames, ancestor) {
     if (svelteFrames.length === 0) {
         return { componentName: null, componentHierarchy: [] };
     }
-    // Try the preprocessor-based component tree first.
-    // Walk each .svelte frame until we find one that was registered.
+    // Preprocessor-based component tree first: walk each .svelte frame until one was registered.
     for (const frame of svelteFrames) {
-        if (!frame.fileName)
+        if (!frame.fileName) {
             continue;
+        }
         const treeHierarchy = lookupComponentTree(frame.fileName, ancestor);
         if (treeHierarchy.length > 0) {
             return {

package/dist/getErrorOrigin.d.ts

@@ -1,3 +1,7 @@
 import type ErrorStackParser from 'error-stack-parser';
 import type { SvelteErrorOrigin } from './types.js';
+/**
+ * Classify a parsed stack trace's error origin: 'event' (DOM handler), 'effect' (async side-effect),
+ * 'render' (component render phase), or 'unknown' (no frames or no recognizable pattern).
+ */
 export declare function getErrorOrigin(frames: ErrorStackParser.StackFrame[]): SvelteErrorOrigin;

package/dist/getErrorOrigin.js

@@ -1,16 +1,8 @@
-// Heuristic classification of where a Svelte error originated, based on stack frame inspection.
-//
-// Svelte's onMount/beforeUpdate/$effect callbacks, DOM event handlers, and render functions
-// all produce errors that look identical at the catch site (the error boundary sees a plain Error
-// either way). The only distinguishing signal is the stack trace: different origins leave
-// recognizable function names, file names, or DOM API calls in the frames.
-//
-// We check patterns in priority order: event > effect > render > unknown.
-// Priority matters because an event handler inside a Svelte component would match both
-// EVENT_PATTERNS and the .svelte filename check; we want 'event' to win.
-// Inline event handlers (onclick, onsubmit, ...) and DOM event API calls.
-// Browsers compile `onclick={handler}` to `.onclick = ...` or `addEventListener(...)`,
-// so these patterns catch both Svelte's compiled output and manual DOM calls.
+// Origins are indistinguishable at the boundary catch site; the stack trace is the only signal.
+// Checked in priority order event > effect > render > unknown, so an event handler inside a
+// component wins over the .svelte filename check.
+// Inline event handlers and DOM event API calls. Svelte compiles `onclick={handler}` to
+// `.onclick = ...` or `addEventListener(...)`, so these match compiled output and manual DOM calls.
 const EVENT_PATTERNS = [
     /\.onclick\b/i,
     /\.onsubmit\b/i,
@@ -25,37 +17,33 @@ const EVENT_PATTERNS = [
     /\.ontouch/i,
     /addEventListener/,
     /dispatchEvent/,
+    // The rest match the native frame a browser inserts for the DOM call that invoked the listener
+    // (e.g. `HTMLButtonElement.onclick (native)`), not application code calling that API.
     /EventTarget\./,
     /HTMLElement\./,
     /HTMLButtonElement\./,
     /HTMLInputElement\./,
     /HTMLFormElement\./,
 ];
-// Async side-effects: $effect callbacks, onMount microtasks, promise continuations.
-// Svelte 5 schedules effects via queueMicrotask; promise chains and MutationObserver
-// callbacks are also async side-effects, not render-phase code.
+// Async side-effects: $effect callbacks (Svelte 5 schedules via queueMicrotask), onMount
+// microtasks, promise continuations, MutationObserver callbacks. Not render-phase code.
 const EFFECT_PATTERNS = [/queueMicrotask/, /Promise\.then/, /Promise\.catch/, /MutationObserver/];
-// Inspects a parsed stack trace and classifies the error origin into one of:
-//   'event'   - error happened in a DOM event handler
-//   'effect'  - error happened in an async side-effect ($effect, onMount, promise)
-//   'render'  - error happened during Svelte component render (template/script top-level)
-//   'unknown' - no frames or no recognizable pattern
+/**
+ * Classify a parsed stack trace's error origin: 'event' (DOM handler), 'effect' (async side-effect),
+ * 'render' (component render phase), or 'unknown' (no frames or no recognizable pattern).
+ */
 export function getErrorOrigin(frames) {
     if (frames.length === 0) {
         return 'unknown';
     }
-    // Flatten each frame into a single searchable string so regex matching is straightforward.
     const frameStrings = frames.map((f) => `${f.functionName ?? ''} ${f.fileName ?? ''} ${f.source ?? ''}`);
-    // Check event patterns first (highest priority).
     if (frameStrings.some((s) => EVENT_PATTERNS.some((p) => p.test(s)))) {
         return 'event';
     }
-    // Then async effect patterns.
     if (frameStrings.some((s) => EFFECT_PATTERNS.some((p) => p.test(s)))) {
         return 'effect';
     }
-    // If any frame originates from a .svelte file but didn't match event/effect,
-    // the error most likely occurred during the synchronous render phase.
+    // A .svelte frame that matched neither event nor effect is most likely the synchronous render phase.
     const hasSvelteFrame = frames.some((f) => f.fileName?.includes('.svelte'));
     if (hasSvelteFrame) {
         return 'render';

package/dist/identify.d.ts

@@ -1,3 +1,5 @@
 import type { Flare } from '@flareapp/js/browser';
+/** Web path: full identity on the default singleton. Svelte's framework has no version. */
 export declare function registerSvelteSdkIdentity(flare: Flare): void;
+/** Injected path: framework tag only, never sdkInfo. */
 export declare function tagSvelteFramework(flare: Flare): void;

package/dist/identify.js

@@ -1,22 +1,16 @@
+import { createIdentityTagger, FrameworkName } from '@flareapp/core';
 import { PACKAGE_VERSION } from './version.js';
-// Per-instance guards. A boolean cannot serve injection: with a singleton AND an
-// injected RendererFlare, each instance must be tagged independently.
-const sdkTagged = new WeakSet();
-const frameworkTagged = new WeakSet();
-// Web path: full identity on the default singleton (sdk + framework). Svelte's framework has no version.
+const tagger = createIdentityTagger({
+    sdkName: '@flareapp/svelte',
+    sdkVersion: PACKAGE_VERSION,
+    frameworkName: FrameworkName.Svelte,
+});
+/** Web path: full identity on the default singleton. Svelte's framework has no version. */
 export function registerSvelteSdkIdentity(flare) {
-    if (!sdkTagged.has(flare)) {
-        sdkTagged.add(flare);
-        flare.setSdkInfo({ name: '@flareapp/svelte', version: PACKAGE_VERSION });
-    }
-    tagSvelteFramework(flare);
+    tagger.registerSdkIdentity(flare);
+    tagger.tagFramework(flare, undefined);
 }
-// Injected path: framework tag ONLY. Never touch sdkInfo — that would clobber the
-// injected instance's own SDK name (e.g. @flareapp/electron).
+/** Injected path: framework tag only, never sdkInfo. */
 export function tagSvelteFramework(flare) {
-    if (frameworkTagged.has(flare)) {
-        return;
-    }
-    frameworkTagged.add(flare);
-    flare.setFramework({ name: 'Svelte' });
+    tagger.tagFramework(flare, undefined);
 }

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export { default as FlareErrorBoundary } from './FlareErrorBoundary.svelte';
 export { createFlareErrorHandler, type FlareErrorHandlerOptions } from './createFlareErrorHandler.js';
 export { __flareRegisterComponent, getComponentTreeContext } from './componentTree.js';
+export { __flareProfileComponent } from './profileComponent.js';
 export { withFlareConfig, type WithFlareConfigOptions } from './config.js';
 export { flarePreprocessor, type FlarePreprocessorOptions } from './preprocessor.js';
 export type { FlareSvelteContext, SvelteErrorOrigin } from './types.js';

package/dist/index.js

@@ -1,15 +1,15 @@
 import { flare } from '@flareapp/js';
 import { registerSvelteSdkIdentity } from './identify.js';
 import { registerDefaultFlare } from './resolveFlare.js';
-// Web entry. Importing @flareapp/js runs the root's own side effects (window.flare + global
-// catch) — correct for the web. Register the singleton as the default Flare AND set its SDK
-// identity AT IMPORT. The import-time identity registration is a hard contract: @flareapp/sveltekit
-// does `export * from '@flareapp/svelte'` and overrides the SDK name per-report, relying on this
-// running first (spec Decision 6). Do not defer it.
+// Web entry. Importing @flareapp/js runs the root's side effects (window.flare + global catch),
+// correct for the web. Registering the singleton and its SDK identity at import time is required:
+// @flareapp/sveltekit does `export * from '@flareapp/svelte'` and overrides the SDK name per
+// report, which only works if this ran first. Do not defer it.
 registerDefaultFlare(() => flare);
 registerSvelteSdkIdentity(flare);
 export { default as FlareErrorBoundary } from './FlareErrorBoundary.svelte';
 export { createFlareErrorHandler } from './createFlareErrorHandler.js';
 export { __flareRegisterComponent, getComponentTreeContext } from './componentTree.js';
+export { __flareProfileComponent } from './profileComponent.js';
 export { withFlareConfig } from './config.js';
 export { flarePreprocessor } from './preprocessor.js';

package/dist/inject.d.ts

@@ -1,6 +1,7 @@
 export { default as FlareErrorBoundary } from './FlareErrorBoundary.svelte';
 export { createFlareErrorHandler, type FlareErrorHandlerOptions } from './createFlareErrorHandler.js';
 export { __flareRegisterComponent, getComponentTreeContext } from './componentTree.js';
+export { __flareProfileComponent } from './profileComponent.js';
 export { withFlareConfig, type WithFlareConfigOptions } from './config.js';
 export { flarePreprocessor, type FlarePreprocessorOptions } from './preprocessor.js';
 export type { FlareSvelteContext, SvelteErrorOrigin } from './types.js';

package/dist/inject.js

@@ -1,8 +1,9 @@
-// Electron-safe entry. NO @flareapp/js root import, NO default registration, NO import-time
-// identity. The caller MUST pass `flare` (handler option / boundary prop); resolveFlare throws
+// Electron-safe entry. No @flareapp/js root import, no default registration, no import-time
+// identity. The caller must pass `flare` (handler option / boundary prop); resolveFlare throws
 // at wiring time if absent.
 export { default as FlareErrorBoundary } from './FlareErrorBoundary.svelte';
 export { createFlareErrorHandler } from './createFlareErrorHandler.js';
 export { __flareRegisterComponent, getComponentTreeContext } from './componentTree.js';
+export { __flareProfileComponent } from './profileComponent.js';
 export { withFlareConfig } from './config.js';
 export { flarePreprocessor } from './preprocessor.js';

package/dist/preprocessor.d.ts

@@ -1,6 +1,17 @@
+import { type ProfileComponentsOption } from '@flareapp/core/util';
 import type { PreprocessorGroup } from 'svelte/compiler';
 export interface FlarePreprocessorOptions {
     exclude?: RegExp;
     importSource?: string;
+    /** Inject the component-tree registration used by error reports. */
+    componentTracking?: boolean;
+    /** Which components get a mount span. Matched against the route-aware profile name. */
+    profileComponents?: ProfileComponentsOption;
+    /** Project-relative routes directory, from `kit.files.routes`. */
+    routesDir?: string;
 }
+/**
+ * Injects component-tree registration and, where configured, mount profiling into each `.svelte`
+ * file. Wire it into `svelte.config.js`'s `preprocess`, or use `withFlareConfig` to do that for you.
+ */
 export declare function flarePreprocessor(options?: FlarePreprocessorOptions): PreprocessorGroup;

package/dist/preprocessor.js

@@ -1,62 +1,164 @@
+import { createComponentMatcher, withoutStatefulFlags } from '@flareapp/core/util';
+import MagicString from 'magic-string';
+import { resolveProfileName } from './resolveProfileName.js';
+// Loaded on demand so the compiler stays out of the entry's module graph. Costs nothing at
+// runtime either: this hook only ever runs during the build's preprocessing pass.
+let compiler;
+function loadCompiler() {
+    compiler ??= import('svelte/compiler').catch((error) => {
+        // Otherwise one transient failure sticks to every remaining file in the build.
+        compiler = undefined;
+        throw error;
+    });
+    return compiler;
+}
+/**
+ * Injects component-tree registration and, where configured, mount profiling into each `.svelte`
+ * file. Wire it into `svelte.config.js`'s `preprocess`, or use `withFlareConfig` to do that for you.
+ */
 export function flarePreprocessor(options) {
-    const exclude = options?.exclude;
+    const exclude = withoutStatefulFlags(options?.exclude);
     const importSource = options?.importSource ?? '@flareapp/svelte';
+    const componentTracking = options?.componentTracking ?? true;
+    const routesDir = options?.routesDir ?? 'src/routes';
+    const matchesProfile = createComponentMatcher(options?.profileComponents ?? false);
+    function buildInjection(filename) {
+        const profileName = resolveProfileName(filename, routesDir);
+        const shouldProfile = matchesProfile(profileName);
+        if (!componentTracking && !shouldProfile) {
+            return null;
+        }
+        const imports = [];
+        const statements = [];
+        if (componentTracking) {
+            imports.push('__flareRegisterComponent as __flare_reg__');
+            statements.push(`const __flare_node__ = __flare_reg__('${escapeString(extractComponentName(filename))}', '${escapeString(filename)}');`);
+        }
+        if (shouldProfile) {
+            imports.push('__flareProfileComponent as __flare_prof__');
+            statements.push(`__flare_prof__('${escapeString(profileName)}');`);
+        }
+        return `import { ${imports.join(', ')} } from '${importSource}';\n${statements.join('\n')}\n`;
+    }
     return {
         name: 'flare-component-tree',
-        markup({ content, filename }) {
-            if (!filename?.includes('.svelte')) {
-                return;
-            }
-            if (exclude?.test(filename)) {
-                return;
-            }
-            const hasScript = /<script[\s>]/i.test(content);
-            if (hasScript) {
-                return;
-            }
-            const componentName = extractComponentName(filename);
-            const escapedFile = escapeString(filename);
-            const injection = `<script>\n` +
-                `import { __flareRegisterComponent as __flare_reg__ } from '${importSource}';\n` +
-                `const __flare_node__ = __flare_reg__('${componentName}', '${escapedFile}');\n` +
-                `</script>\n`;
-            return {
-                code: injection + content,
-            };
-        },
-        script({ content, filename, attributes }) {
-            if (!filename?.includes('.svelte')) {
-                return;
-            }
-            if (exclude?.test(filename)) {
+        async markup({ content, filename }) {
+            if (!filename?.includes('.svelte') || exclude?.test(filename)) {
                 return;
             }
-            if (attributes.context === 'module' || attributes.module != null) {
+            const injection = buildInjection(filename);
+            if (!injection) {
                 return;
             }
-            // Skip a script the markup hook already injected. For a scriptless component the markup
-            // hook adds a `<script>` with our registration; Svelte then runs THIS script hook over
-            // that injected block within the same preprocessor pass. Without this guard we inject a
-            // second time, producing a duplicate `const __flare_node__` -> "already been declared"
-            // compile error.
-            if (content.includes('__flare_node__')) {
+            const parsed = await instanceScriptStart(content, filename);
+            if (parsed === undefined) {
                 return;
             }
-            const componentName = extractComponentName(filename);
-            const escapedFile = escapeString(filename);
-            const injection = `import { __flareRegisterComponent as __flare_reg__ } from '${importSource}';\n` +
-                `const __flare_node__ = __flare_reg__('${componentName}', '${escapedFile}');\n`;
-            return {
-                code: injection + content,
-            };
+            return injectWithMap(content, injection, filename, parsed.start, parsed.bomCount);
         },
     };
 }
+/** Keeps the merged sourcemap's `sources` from carrying an absolute build-machine path. */
+function basename(filename) {
+    return filename.split(/[/\\]/).pop() ?? filename;
+}
+/**
+ * The name error reports use. Stays a bare basename rather than reusing `resolveProfileName`, because
+ * changing it would change component hierarchies people already have.
+ */
 function extractComponentName(filename) {
-    const normalized = filename.replace(/\\/g, '/');
-    const base = normalized.split('/').pop() ?? filename;
-    return base.replace(/\.svelte$/, '');
+    return basename(filename).replace(/\.svelte$/, '');
 }
 function escapeString(str) {
     return str.replace(/\\/g, '\\\\').replace(/'/g, "\\'");
 }
+/** Copied from Svelte's own preprocessor, so we agree with it on what counts as a style tag. */
+const REGEX_STYLE_TAGS = /<!--[^]*?-->|<style((?:\s+[^=>'"/\s]+=(?:"[^"]*"|'[^']*'|[^>\s]+)|\s+[^=>'"/\s]+)*\s*)(?:\/>|>([\S\s]*?)<\/style>)/g;
+const CLOSING_STYLE_TAG = '</style>';
+/** One warning per file per process. A dev server runs this hook again on every save. */
+const warnedFiles = new Set();
+/**
+ * Blanks out every `<style>` body, keeping the exact character count so offsets into the original
+ * still line up. Svelte parses style bodies as CSS, so `lang="scss"` and friends throw and would
+ * otherwise cost the file its registration.
+ */
+function blankStyleBodies(content) {
+    return content.replace(REGEX_STYLE_TAGS, (match, _attributes, body) => {
+        // The first branch of the regex matches comments, which have no body to blank.
+        if (body === undefined || match.startsWith('<!--')) {
+            return match;
+        }
+        const bodyStart = match.length - body.length - CLOSING_STYLE_TAG.length;
+        // Newlines survive so reported line numbers keep matching the real file.
+        return match.slice(0, bodyStart) + body.replace(/[^\n]/g, ' ') + match.slice(bodyStart + body.length);
+    });
+}
+function warnOnce(filename, reason) {
+    if (warnedFiles.has(filename)) {
+        return;
+    }
+    warnedFiles.add(filename);
+    // Silence here reads as "component tracking works", which is worse than a noisy build.
+    console.warn(`[flare] Skipped component tracking for ${filename}: ${reason}`);
+}
+/** How many BOM characters sit at the very start of the source, back to back. */
+function countLeadingBoms(content) {
+    let count = 0;
+    while (content.charCodeAt(count) === 0xfeff) {
+        count++;
+    }
+    return count;
+}
+/**
+ * Where the instance script's body begins, `null` when the component has none, `undefined` when the
+ * source cannot be parsed. Svelte hands a script hook every `<script>` in the file, nested ones
+ * included, so only the parser can say which one belongs to the component. `bomCount` rides along
+ * because the null case still needs to know how many bytes of BOM it must insert after.
+ */
+async function instanceScriptStart(content, filename) {
+    // parse() strips exactly one leading BOM itself and reports offsets against the stripped source.
+    // Stripping every leading BOM here (not just one) before parsing means none are left for parse()'s
+    // own stripping to act on, so the count we add back is exact no matter how many there were.
+    const bomCount = countLeadingBoms(content);
+    const source = content.slice(bomCount);
+    try {
+        const { parse } = await loadCompiler();
+        const root = parse(blankStyleBodies(source), { modern: true, filename });
+        if (!root.instance) {
+            return { start: null, bomCount };
+        }
+        const start = root.instance.content.start;
+        return { start: start + bomCount, bomCount };
+    }
+    catch (error) {
+        // Half-written source, or a template another preprocessor still has to turn into Svelte.
+        // Skipping costs a registration; guessing corrupts the file.
+        warnOnce(filename, error instanceof Error ? error.message : String(error));
+        return undefined;
+    }
+}
+/** The map matters: inserting lines shifts everything below, throwing off stack frames and breakpoints. */
+function injectWithMap(content, injection, filename, start, bomCount) {
+    const magicSource = new MagicString(content);
+    if (start === null) {
+        const scriptBlock = `<script>\n${injection}</script>\n`;
+        // prepend() inserts at offset 0, which would land ahead of the BOM(s) and move them into the
+        // template. appendRight(bomCount, ...) inserts right after all of them instead, keeping every
+        // BOM at the front so compile()'s own BOM stripping still fires.
+        if (bomCount > 0) {
+            magicSource.appendRight(bomCount, scriptBlock);
+        }
+        else {
+            magicSource.prepend(scriptBlock);
+        }
+    }
+    else {
+        magicSource.appendLeft(start, `\n${injection}`);
+    }
+    return {
+        code: magicSource.toString(),
+        // Basename, not the full path: the merged map inherits `sources` from the oldest map in
+        // the chain, which is ours, so an absolute path here ships in every built sourcemap.
+        map: magicSource.generateMap({ hires: true, source: basename(filename) }),
+    };
+}

package/dist/profileComponent.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Records one `browser_component` span for this component's mount. The preprocessor injects the call,
+ * don't write it by hand.
+ *
+ * Init runs top-down, so a child can point at a span id its parent reserved but hasn't recorded yet.
+ */
+export declare function __flareProfileComponent(name: string): void;

package/dist/profileComponent.js

@@ -0,0 +1,47 @@
+import { activeComponentRoot, nowNano, recordComponentSpan, reserveSpanId, resolveComponentParent, } from '@flareapp/js/browser';
+import { getContext, onMount, setContext } from 'svelte';
+// Separate from the component tree's key: that one chains every component, this one only the
+// profiled ones.
+const PROFILE_KEY = '__flare_component_profile';
+/**
+ * Records one `browser_component` span for this component's mount. The preprocessor injects the call,
+ * don't write it by hand.
+ *
+ * Init runs top-down, so a child can point at a span id its parent reserved but hasn't recorded yet.
+ */
+export function __flareProfileComponent(name) {
+    try {
+        const inherited = getContext(PROFILE_KEY) ?? null;
+        // A layout that survives a navigation still holds the old trace, so re-home rather than
+        // record onto one that already shipped.
+        const parent = resolveComponentParent(inherited, activeComponentRoot());
+        if (!parent) {
+            // Tracing off, no root open, or SSR. Publishing no context keeps us transparent:
+            // descendants resolve against the live root themselves.
+            return;
+        }
+        const spanId = reserveSpanId(parent.traceId);
+        if (!spanId) {
+            return;
+        }
+        const startTimeUnixNano = nowNano();
+        setContext(PROFILE_KEY, { traceId: parent.traceId, parentSpanId: spanId });
+        onMount(() => {
+            try {
+                recordComponentSpan({
+                    name,
+                    spanId,
+                    parent,
+                    startTimeUnixNano,
+                    endTimeUnixNano: nowNano(),
+                });
+            }
+            catch {
+                // instrumentation must never break the host
+            }
+        });
+    }
+    catch {
+        // instrumentation must never break the host
+    }
+}

package/dist/resolveFlare.d.ts

@@ -1,3 +1,2 @@
-import type { Flare } from '@flareapp/js/browser';
-export declare function registerDefaultFlare(provider: () => Flare): void;
-export declare function resolveFlare(explicit?: Flare): Flare;
+declare const registerDefaultFlare: (provider: () => import("@flareapp/js").Flare) => void, resolveFlare: (explicit?: import("@flareapp/js").Flare) => import("@flareapp/js").Flare;
+export { registerDefaultFlare, resolveFlare };

package/dist/resolveFlare.js

@@ -1,42 +1,6 @@
-let defaultProvider = null;
-// `process.env.NODE_ENV` is replaced inline by bundlers (vite/webpack). The try/catch keeps a
-// process-less environment safe: treat "undetermined" as production (warn, never crash).
-function isDevMode() {
-    try {
-        return process.env.NODE_ENV !== 'production';
-    }
-    catch {
-        return false;
-    }
-}
-// Called once by the web entry (index.ts) as an import side effect.
-export function registerDefaultFlare(provider) {
-    // Tripwire: a web default registering while the Electron bridge exists means a renderer pulled
-    // the package root — directly, or via component-tracking codegen emitting the root specifier
-    // (set the preprocessor's importSource to '@flareapp/svelte/inject' to avoid that). It drags
-    // the keyed @flareapp/js singleton and its global side effects into the renderer.
-    if (typeof window !== 'undefined' && window.__flare) {
-        const message = '[flare] @flareapp/svelte (web root) was imported in a renderer where the Electron ' +
-            'bridge is present, pulling the keyed @flareapp/js singleton into the renderer. ' +
-            "Import @flareapp/svelte/inject (and set the preprocessor importSource to '@flareapp/svelte/inject') instead.";
-        // Dev: throw so the misconfiguration is impossible to miss. Production: warn instead, so a
-        // shipped app isn't crashed by a (recoverable) reporting-setup mistake.
-        if (isDevMode()) {
-            throw new Error(message);
-        }
-        console.warn(message);
-    }
-    defaultProvider = provider;
-}
-// Resolve at WIRING time (handler creation / component setup), never inside a report path.
-export function resolveFlare(explicit) {
-    if (explicit) {
-        return explicit;
-    }
-    if (defaultProvider) {
-        return defaultProvider();
-    }
-    throw new Error('[flare] No Flare instance available. Pass `flare` (e.g. from ' +
-        '@flareapp/electron/renderer), or import @flareapp/svelte (the package root) ' +
-        'to use the @flareapp/js default singleton.');
-}
+import { createFlareResolver } from '@flareapp/js/browser';
+const { registerDefaultFlare, resolveFlare } = createFlareResolver({
+    packageName: '@flareapp/svelte',
+    injectInstruction: "Import @flareapp/svelte/inject (and set the preprocessor importSource to '@flareapp/svelte/inject') instead.",
+});
+export { registerDefaultFlare, resolveFlare };

package/dist/resolveProfileName.d.ts

@@ -0,0 +1,10 @@
+/**
+ * The name a profiled component reports, and what `profileComponents` matches against.
+ *
+ * Separate from `extractComponentName`, which feeds error reports and has to keep its bare basenames.
+ * Profiling needs the route path too, otherwise every route in a SvelteKit app is just `+page`.
+ *
+ * @param filename Absolute path as a Svelte preprocessor receives it.
+ * @param routesDir Project-relative routes directory, from `kit.files.routes`.
+ */
+export declare function resolveProfileName(filename: string, routesDir?: string): string;

package/dist/resolveProfileName.js

@@ -0,0 +1,41 @@
+/**
+ * The name a profiled component reports, and what `profileComponents` matches against.
+ *
+ * Separate from `extractComponentName`, which feeds error reports and has to keep its bare basenames.
+ * Profiling needs the route path too, otherwise every route in a SvelteKit app is just `+page`.
+ *
+ * @param filename Absolute path as a Svelte preprocessor receives it.
+ * @param routesDir Project-relative routes directory, from `kit.files.routes`.
+ */
+export function resolveProfileName(filename, routesDir = 'src/routes') {
+    const normalized = filename.replace(/\\/g, '/');
+    const base = normalized.split('/').pop() ?? normalized;
+    const name = base.replace(/\.svelte$/, '');
+    // Only route files clash with each other. An ordinary component name is already fine as is.
+    if (!name.startsWith('+')) {
+        return name;
+    }
+    // Users can write `./src/routes` or `src/routes/`, both legal, so flatten before searching.
+    const normalizedRoutesDir = routesDir
+        .replace(/\\/g, '/')
+        .replace(/^\.\//, '')
+        .replace(/^\/+|\/+$/g, '');
+    const start = routeDirStart(normalized, normalizedRoutesDir);
+    if (start === -1) {
+        return name;
+    }
+    const relativeDir = normalized.slice(start, normalized.lastIndexOf('/'));
+    return relativeDir ? `${relativeDir}/${name}` : name;
+}
+/**
+ * Index just past the routes directory, or -1 when the path isn't in there. Anchors on the last
+ * occurrence, so a project checked out under something like /home/src/routes/ still works.
+ */
+function routeDirStart(normalized, normalizedRoutesDir) {
+    const nested = normalized.lastIndexOf(`/${normalizedRoutesDir}/`);
+    if (nested !== -1) {
+        return nested + normalizedRoutesDir.length + 2;
+    }
+    const prefix = `${normalizedRoutesDir}/`;
+    return normalized.startsWith(prefix) ? prefix.length : -1;
+}

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const PACKAGE_VERSION = "2.6.0";
+export declare const PACKAGE_VERSION = "2.8.0";

package/dist/version.js

@@ -1,2 +1,2 @@
 // generated during release, do not modify
-export const PACKAGE_VERSION = '2.6.0';
+export const PACKAGE_VERSION = '2.8.0';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@flareapp/svelte",
-    "version": "2.6.0",
+    "version": "2.8.0",
     "description": "Svelte client for flareapp.io",
     "homepage": "https://flareapp.io",
     "bugs": "https://github.com/spatie/flare-client-js/issues",
@@ -14,12 +14,7 @@
         "email": "info@spatie.be"
     },
     "contributors": [
-        "Adriaan Marain <adriaan@spatie.be>",
-        "Alex Vanderbist <alex@spatie.be>",
-        "Dries Heyninck <dries@spatie.be>",
-        "Freek Van der Herten <freek@spatie.be>",
-        "Sebastian De Deyne <sebastian@spatie.be>",
-        "Sébastien Henau <seba@spatie.be>"
+        "Dries Heyninck <dries@spatie.be>"
     ],
     "type": "module",
     "files": [
@@ -67,6 +62,8 @@
     "devDependencies": {
         "@flareapp/electron": "file:../electron",
         "@flareapp/js": "file:../js",
+        "@flareapp/test-helpers": "*",
+        "@jridgewell/trace-mapping": "^0.3.31",
         "@sveltejs/package": "^2.5.7",
         "@sveltejs/vite-plugin-svelte": "^5.0.0",
         "@testing-library/svelte": "^5.0.0",
@@ -76,14 +73,15 @@
         "vitest": "^4.0.0"
     },
     "peerDependencies": {
-        "@flareapp/js": "^2.6.0",
+        "@flareapp/js": "^2.8.0",
         "svelte": "^5.3.0"
     },
     "publishConfig": {
         "access": "public"
     },
     "dependencies": {
-        "@flareapp/core": "2.6.0",
-        "error-stack-parser": "^2.1.4"
+        "@flareapp/core": "2.8.0",
+        "error-stack-parser": "^2.1.4",
+        "magic-string": "^0.30.21"
     }
 }