Skip to content

Commit

Permalink
Filter out Svelte's unexpected class prop console warnings
Browse files Browse the repository at this point in the history
Astro's hydration code passes a `class` prop to Svelte components, inducing Svelte to log a warning about an unknown prop. Preempting this by exporting a `class` prop from the Svelte component isn't a viable workaround since `class` is a reserved identifier in JS.

This PR implements the console-filtering workaround suggested by @HiDeoo in withastro#5665, borrowing the `useConsoleFilter` approach from the [preact integration](https://github.com/withastro/astro/blob/a1c0cbe604c9f91cdc421b5606aab574999eba01/packages/integrations/preact/src/server.ts#L72-L94).

It would probably be better to generalize console filtering so it could be shared across multiple integrations.

Ideally there would be a way to handle this in Svelte, but as was pointed out in the issue thread even they resort to [similar cringe-inducing hackery](https://github.com/sveltejs/kit/blob/master/packages/kit/src/runtime/client/client.js#L1974-L1996) in sveltekit.
  • Loading branch information
kitschpatrol authored Jun 4, 2023
1 parent c895981 commit dc03074
Showing 1 changed file with 73 additions and 11 deletions.
84 changes: 73 additions & 11 deletions packages/integrations/svelte/client.js
Original file line number Diff line number Diff line change
@@ -1,24 +1,33 @@
const noop = () => {};

let originalConsoleWarning;
let consoleFilterRefs = 0;

export default (target) => {
return (Component, props, slotted, { client }) => {
if (!target.hasAttribute('ssr')) return;
const slots = {};
for (const [key, value] of Object.entries(slotted)) {
slots[key] = createSlotDefinition(key, value);
}

try {
new Component({
target,
props: {
...props,
$$slots: slots,
$$scope: { ctx: [] },
},
hydrate: client !== 'only',
$$inline: true,
});
} catch (e) {}
useConsoleFilter();
try {
new Component({
target,
props: {
...props,
$$slots: slots,
$$scope: { ctx: [] },
},
hydrate: client !== 'only',
$$inline: true,
});
} catch (e) {}
} finally {
finishUsingConsoleFilter();
}
};
};

Expand Down Expand Up @@ -51,3 +60,56 @@ function createSlotDefinition(key, children) {
noop,
];
}

/**
* Reduces console noise by filtering known non-problematic warnings.
*
* Performs reference counting to allow parallel usage from async code.
*
* To stop filtering, please ensure that there always is a matching call
* to `finishUsingConsoleFilter` afterwards.
*/
function useConsoleFilter() {
consoleFilterRefs++;

if (!originalConsoleWarning) {
// eslint-disable-next-line no-console
originalConsoleWarning = console.warn;
try {
// eslint-disable-next-line no-console
console.warn = filteredConsoleWarning;
} catch (error) {
// If we're unable to hook `console.warn`, just accept it
}
}
}

/**
* Indicates that the filter installed by `useConsoleFilter`
* is no longer needed by the calling code.
*/
function finishUsingConsoleFilter() {
consoleFilterRefs--;

// Note: Instead of reverting `console.warning` back to the original
// when the reference counter reaches 0, we leave our hook installed
// to prevent potential race conditions once `check` is made async
}

/**
* Hook/wrapper function for the global `console.warning` function.
*
* Ignores known non-problematic errors while any code is using the console filter.
* Otherwise, simply forwards all arguments to the original function.
*/
function filteredConsoleWarning(msg, ...rest) {
if (consoleFilterRefs > 0 && typeof msg === 'string') {
// Astro passes a `class` prop to the Svelte component, which
// outputs the following warning, which we can safely filter out.
const isKnownSvelteError = msg.includes(
"was created with unknown prop 'class'"
);
if (isKnownSvelteError) return;
}
originalConsoleWarning(msg, ...rest);
}

0 comments on commit dc03074

Please sign in to comment.