Added info how to suppress unused prop warnings to guide & examples, …

sites/svelteflow.dev/src/components/unused-prop-warning.tsx

@@ -0,0 +1,13 @@
+import { Link } from 'nextra-theme-docs';
+import { Callout } from 'nextra-theme-docs';
+
+export default function UnusedPropWarning() {
+  return (
+    <Callout type="warning">
+      To surpress unknown prop warnings in the browser console, please{' '}
+      <Link href="/learn/guides/custom-nodes#suppress-unknown-prop-warnings">
+        refer to the guide.
+      </Link>
+    </Callout>
+  );
+}

sites/svelteflow.dev/src/pages/examples/edges/custom-connectionline.mdx

@@ -4,10 +4,13 @@ title: Connection Line
 
 import ExampleLayout from '@/layouts/example-with-frontmatter';
 import ExampleViewer from '@/components/example-viewer';
+import UnusedPropWarning from '@/components/unused-prop-warning';
 
 <ExampleLayout>
 A Connection Line is what you see when you click and drag out from a handle. It represents a possible edge and can snap to valid handles in close proximity.
 You can implement your own Connection Line by passing a Svelte component with `slot="connectionLine"`. The `useConnection` hook gives you access to the current `connection`.
 
 <ExampleViewer codePath="examples/edges/custom-connectionline" />
 </ExampleLayout>
+
+<UnusedPropWarning />

sites/svelteflow.dev/src/pages/examples/edges/simple-floating-edges.mdx

@@ -4,6 +4,7 @@ title: Simple Floating Edges
 
 import ExampleViewer from '@/components/example-viewer';
 import ExampleLayout from '@/layouts/example-with-frontmatter';
+import UnusedPropWarning from '@/components/unused-prop-warning';
 
 <ExampleLayout>
 This example shows how to implement an edge type that dynamically connects to the closest handle.
@@ -13,3 +14,5 @@ This example shows how to implement an edge type that dynamically connects to th
   framework="svelte"
 />
 </ExampleLayout>
+
+<UnusedPropWarning />

sites/svelteflow.dev/src/pages/examples/interaction/contextual-zoom.mdx

@@ -4,6 +4,7 @@ title: Contextual Zoom
 
 import ExampleViewer from '@/components/example-viewer';
 import ExampleLayout from '@/layouts/example-with-frontmatter';
+import UnusedPropWarning from '@/components/unused-prop-warning';
 
 <ExampleLayout>
 This example shows how the current zoom level can be used by a node to decide which content to show.
@@ -14,3 +15,5 @@ We can access the zoom inside the viewport writable via the [`useSvelteStore` ho
   framework="svelte"
 />
 </ExampleLayout>
+
+<UnusedPropWarning />

sites/svelteflow.dev/src/pages/examples/misc/threlte-flow.mdx

@@ -4,6 +4,7 @@ title: Threlte Flow
 
 import ExampleLayout from '@/layouts/example-with-frontmatter';
 import ExampleViewer from '@/components/example-viewer';
+import UnusedPropWarning from '@/components/unused-prop-warning';
 
 <ExampleLayout>
 You may have noticed that the hero flow on our [our homepage](/) is actually written in React 🙈.
@@ -18,3 +19,5 @@ For all the the non-believers, here it is written in Svelte Flow with help from
 />
 
 </ExampleLayout>
+
+<UnusedPropWarning />

sites/svelteflow.dev/src/pages/examples/nodes/connection-limit.mdx

@@ -5,6 +5,7 @@ description: This is an example of a custom node limiting the amount of connecti
 
 import ExampleLayout from '@/layouts/example-with-frontmatter';
 import ExampleViewer from '@/components/example-viewer';
+import UnusedPropWarning from '@/components/unused-prop-warning';
 
 <ExampleLayout>
 This is an example of a custom node with a custom handle that can limit the amount of connections a handle can have using the `isConnectable` prop.
@@ -13,3 +14,5 @@ as an arg for the `isConnectable` prop of the CustomHandle component.
 
 <ExampleViewer codePath="examples/nodes/connection-limit" />
 </ExampleLayout>
+
+<UnusedPropWarning />

sites/svelteflow.dev/src/pages/examples/nodes/custom-node.mdx

@@ -5,9 +5,12 @@ description: This is an example of a custom node implementation. Svelte Flow nod
 
 import ExampleLayout from '@/layouts/example-with-frontmatter';
 import ExampleViewer from '@/components/example-viewer';
+import UnusedPropWarning from '@/components/unused-prop-warning';
 
 <ExampleLayout>
 Creating your own nodes is as easy as creating a regular Svelte component and passing them to `nodeTypes`. Being just regular components, you can essentially display any content and implement any functionality you like. Inside, you have access to a number of props that let you implement and extend default node behaviour.
 
 <ExampleViewer codePath="examples/nodes/custom-node" />
 </ExampleLayout>
+
+<UnusedPropWarning />

sites/svelteflow.dev/src/pages/examples/nodes/drag-handle.mdx

@@ -4,9 +4,12 @@ title: Drag Handle
 
 import ExampleLayout from '@/layouts/example-with-frontmatter';
 import ExampleViewer from '@/components/example-viewer';
+import UnusedPropWarning from '@/components/unused-prop-warning';
 
 <ExampleLayout>
 You can restrict dragging to a specific part of node, by specifiying a class that will act as a [`dragHandle`](/api-reference/types/node).
 
 <ExampleViewer codePath="examples/nodes/drag-handle" />
 </ExampleLayout>
+
+<UnusedPropWarning />

sites/svelteflow.dev/src/pages/examples/nodes/easy-connect.mdx

@@ -5,10 +5,13 @@ title: Easy Connect
 
 import ExampleLayout from '@/layouts/example-with-frontmatter';
 import ExampleViewer from '@/components/example-viewer';
+import UnusedPropWarning from '@/components/unused-prop-warning';
 
 <ExampleLayout>
   Fed up with tiny little connection handles? Make your whole node act as one!
   Keep in mind though that you need to define seperate drag handles in this case
   to still be able to drag the node.
   <ExampleViewer codePath="examples/nodes/easy-connect" />
 </ExampleLayout>
+
+<UnusedPropWarning />

sites/svelteflow.dev/src/pages/examples/styling/tailwind.mdx

@@ -5,6 +5,7 @@ description: In this example we demonstrate how to use tailwind for styling a fl
 
 import ExampleViewer from '@/components/example-viewer';
 import ExampleLayout from '@/layouts/example-with-frontmatter';
+import UnusedPropWarning from '@/components/unused-prop-warning';
 
 <ExampleLayout>
 You can use third party libraries to style your flows. In this example we are using [tailwind](https://tailwindcss.com/).
@@ -17,3 +18,5 @@ You can use third party libraries to style your flows. In this example we are us
   tailwind
 />
 </ExampleLayout>
+
+<UnusedPropWarning />

sites/svelteflow.dev/src/pages/examples/styling/turbo-flow.mdx

@@ -5,6 +5,7 @@ description: This example showcases how you can recreate the style that is used
 
 import ExampleViewer from '@/components/example-viewer';
 import ExampleLayout from '@/layouts/example-with-frontmatter';
+import UnusedPropWarning from '@/components/unused-prop-warning';
 
 <ExampleLayout>
 Every part of the Svelte Flow UI is customizable. As the name implies the look is taken from the beautiful [turbo.build](https://turbo.build/pack/docs/core-concepts#function-level-caching) website. You can find more information about custom styles in the [theming guide](/learn/guides/theming). (Svelte Flow uses Turborepo and we love it 💜)
@@ -17,3 +18,5 @@ Every part of the Svelte Flow UI is customizable. As the name implies the look i
   }}
 />
 </ExampleLayout>
+
+<UnusedPropWarning />

sites/svelteflow.dev/src/pages/learn/guides/custom-nodes.mdx

@@ -96,3 +96,61 @@ Now that we have a custom node with a color picker, we want to update the backgr
 For this we add another node to the nodes array and then subscribe to the color stores of both nodes. Whenever one of the colors changes, we update the background color of the flow:
 
 <ExampleViewer codePath="guides/custom-nodes/b" editorHeight={500} />
+
+## Suppress unknown prop warnings
+
+Following this guide you will probably wonder why your browser console is flooded with warnings like this:
+
+```
+<CustomNode /> was created with unknown prop 'height'
+```
+
+This is due to the wrapper component always passing every prop to the custom node component, regardless wether you have implemented them in your svelte component or not.
+Sadly, the only way to surpress the warnings is by actually exporting all props and using them in an empty statement, like this:
+
+```svelte filename="CustomNode.svelte"
+<script>
+    export let id; id;
+    export let data; data;
+    export let dragHandle; dragHandle;
+    export let type; type;
+    export let selected; selected;
+    export let isConnectable; isConnectable;
+    export let zIndex; zIndex;
+    export let positionAbsolute; positionAbsolute;
+    export let width; width;
+    export let height; height;
+    export let dragging; dragging;
+    export let targetPosition; targetPosition;
+    export let sourcePosition; sourcePosition;
+</script>
+```
+
+Or if you use Typescript:
+
+```ts filename="CustomNode.svelte"
+<script lang=ts>
+    type $$Props = NodeProps;
+
+    export let id: $$Props['id']; id;
+    export let data: $$Props['data']; data;
+    export let dragHandle: $$Props['dragHandle']; dragHandle;
+    export let type: $$Props['type']; type;
+    export let selected: $$Props['selected']; selected;
+    export let isConnectable: $$Props['isConnectable']; isConnectable;
+    export let zIndex: $$Props['zIndex']; zIndex;
+    export let positionAbsolute: $$Props['positionAbsolute']; positionAbsolute;
+    export let width: $$Props['width']; width;
+    export let height: $$Props['height']; height;
+    export let dragging: $$Props['dragging']; dragging;
+    export let targetPosition: $$Props['targetPosition']; targetPosition;
+    export let sourcePosition: $$Props['sourcePosition']; sourcePosition;
+</script>
+```
+
+<Callout type="default">
+  <strong>Help appreciated:</strong>
+  If you have a better solution, please let us know. This is quite an annoyance when
+  working with custom nodes and edges. You can find more information in the related
+  [Svelte issue](https://github.com/sveltejs/svelte/issues/5892#issuecomment-762660755).
+</Callout>