✨ Wrap context in effect

Author: Frontendland

src/components/ContextMenu/ContextMenu.svelte

@@ -67,10 +67,12 @@
         }
     })
 
-    if (!context) {
-        // eslint-disable-next-line no-console, max-len
-        console.error('Missing "context" slot. Attach slot="context" to one of the children of your <ContextMenu> component.')
-    }
+    $effect(() => {
+        if (!context) {
+            // eslint-disable-next-line no-console, max-len
+            console.error('Missing "context" slot. Attach slot="context" to one of the children of your <ContextMenu> component.')
+        }
+    })
 </script>
 
 <svelte:element {...rest} this={element} class={classes} bind:this={ctx}>

src/pages/components/context-menu.astro

@@ -12,7 +12,7 @@ import { listWithGroups } from '@data'
 <Layout>
     <h1>ContextMenu</h1>
     <div class="grid md-2 lg-3">
-        <ComponentWrapper type="Astro">
+        <ComponentWrapper type="Astro" className="card">
             <AstroContextMenu className="ctx">
                 <span class="muted">Right-click here</span>
                 <span class="muted">Click "Sign out" to close context.</span>
@@ -29,7 +29,7 @@ import { listWithGroups } from '@data'
             </AstroContextMenu>
         </ComponentWrapper>
 
-        <ComponentWrapper type="Svelte">
+        <ComponentWrapper type="Svelte" className="card">
             <!-- @ts-ignore -->
             <SvelteContextMenu className="ctx s" client:visible>
                 <span class="muted">Right-click here</span>
@@ -47,14 +47,22 @@ import { listWithGroups } from '@data'
             </SvelteContextMenu>
         </ComponentWrapper>
 
-        <ComponentWrapper type="React">
+        <ComponentWrapper type="React" className="card">
             <div class="ctx">
                 <a href="/react" class="muted">See in React playground {'->'}</a>
             </div>
         </ComponentWrapper>
     </div>
 </Layout>
 
+<style is:global lang="scss">
+    @use '../../scss/config.scss' as *;
+
+    .card {
+        @include visibility(visible);
+    }
+</style>
+
 <script>
     import { closeContext } from '@utils/context'
     import { on } from '@utils/DOMUtils'

src/static/ComponentWrapper.astro

@@ -8,6 +8,7 @@ const {
     secondary,
     compact,
     type,
+    className,
     bodyClassName
 } = Astro.props
 ---
@@ -20,6 +21,7 @@ const {
     bodyClassName={bodyClassName}
     className={classNames([
         type && type.slice(0, 1).toLocaleLowerCase(),
+        className,
         'default'
     ])}
 >