chore: transient props in playground

Author: devrnt

playground/app.tsx

@@ -1,10 +1,17 @@
 import { setup } from 'goober';
+import { shouldForwardProp } from 'goober/should-forward-prop';
 import * as React from 'react';
 
 import { WizardModule } from './modules';
 import { Page, Style } from './modules/common';
 
-setup(React.createElement);
+setup(
+  React.createElement,
+  undefined,
+  undefined,
+  // Transient props
+  shouldForwardProp((prop) => prop[0] !== '$'),
+);
 
 const App = () => {
   return (

playground/modules/common/section.tsx

@@ -12,7 +12,7 @@ const Title = styled('h2')`
   }
 `;
 
-const Item = styled('div')<{ showDivider: boolean }>`
+const Item = styled('div')<{ $showDivider: boolean }>`
   display: flex;
   flex-direction: column;
 
@@ -22,26 +22,25 @@ const Item = styled('div')<{ showDivider: boolean }>`
     background-image: linear-gradient(48.66deg, var(--purple), var(--blue));
     width: 100%;
     position: relative;
-    height: ${({ showDivider }) => (showDivider ? '1px' : 0)};
+    height: ${({ $showDivider }) => ($showDivider ? '1px' : 0)};
   }
 
-  ${({ showDivider }) =>
-    showDivider
-      ? `
-          &::after {
-            margin: 3rem 0 2rem;
-            content: '';
-            background-image: linear-gradient(
-              48.66deg,
-              var(--purple),
-              var(--blue)
-            );
-            width: 100%;
-            position: relative;
-            height: 1px;
-          }
-        `
-      : ''}
+  ${({ $showDivider }) =>
+    $showDivider &&
+    `
+      &::after {
+        margin: 3rem 0 2rem;
+        content: '';
+        background-image: linear-gradient(
+          48.66deg,
+          var(--purple),
+          var(--blue)
+        );
+        width: 100%;
+        position: relative;
+        height: 1px;
+      }
+    `}
 `;
 
 type Props = {
@@ -61,7 +60,7 @@ const Section: React.FC<Props> = ({
       <Title>
         {title} <span>{description}</span>
       </Title>
-      <Item showDivider={showDivider}>{children}</Item>
+      <Item $showDivider={showDivider}>{children}</Item>
     </>
   );
 };

playground/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "framer-motion": "^3.1.1",
-    "goober": "^2.0.19-next.1",
+    "goober": "^2.0.26",
     "react-app-polyfill": "^2.0.0",
     "react-query": "^3.5.11"
   },

playground/yarn.lock

@@ -2500,10 +2500,10 @@ globals@^11.1.0:
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
 
-goober@^2.0.19-next.1:
-  version "2.0.19-next.1"
-  resolved "https://registry.yarnpkg.com/goober/-/goober-2.0.19-next.1.tgz#6881ffba6346ed8cabc0872981771de791f855b3"
-  integrity sha512-1HlFxG2rYS6cag21p7stYv5f+sa0CQm8TCegcMIffBKDmfN30tLpCN0op4pDh2Xo34pwLe7PFYF6ZZRqovRX5A==
+goober@^2.0.26:
+  version "2.0.26"
+  resolved "https://registry.yarnpkg.com/goober/-/goober-2.0.26.tgz#e5089ca5e5501e20a850a41949bd92a2441ad994"
+  integrity sha512-YatSB1/vndQaSghgIeIsiG1+pG3+3f4SSy0MaMcjj4OKqe7VQVqCgNbc7TCvaD8FoAi9EpgcBhsTimWuALSi9A==
 
 graceful-fs@^4.1.11:
   version "4.2.4"