✨ Update example & make previewable on StackBlitz

Author: GuiDevloper

examples/active-class-name/README.md

@@ -4,9 +4,10 @@ Nullstack [Context](https://nullstack.app/context)'s [Router](https://nullstack.
 
 ## Deploy your own
 
-Deploy it now with [Vercel](https://vercel.com):
+Deploy it now with [Vercel](https://vercel.com) or preview on [StackBlitz](https://stackblitz.com):
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/GuiDevloper/nullstack-examples/tree/main/examples/active-class-name&project-name=active-class-name&repo-name=active-class-name&demo-title=Nullstack+activeClassName&demo-description=Nullstack+example+of+active+class+name&demo-url=https://github.com/GuiDevloper/nullstack-examples/tree/main/examples/active-class-name&demo-image=https://nullstack.app/image-1200x630.png)
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/fork/github/GuiDevloper/nullstack-examples/tree/main/examples/active-class-name?title=Nullstack+ActiveClassName)
 
 ## How to use
 

examples/active-class-name/package.json

@@ -7,5 +7,10 @@
     "start": "npx nullstack start",
     "build": "npx nullstack build",
     "vercel-build": "npm run build && npx nullstack-adapt-vercel"
+  },
+  "stackblitz": {
+    "installDependencies": false,
+    "startCommand": "npm i [email protected] -D && nullstack-adapt-babel && npm start",
+    "compileTrigger": "save"
   }
 }

examples/active-class-name/src/components/ActiveLink.tsx

@@ -1,19 +1,23 @@
-import { NullstackClientContext } from 'nullstack'
+import { NullstackClientContext, NullstackFunctionalComponent } from 'nullstack'
 
-type ActiveLinkProps = Partial<NullstackClientContext> & {
+type ActiveLinkProps = JSX.AllElements['a'] & {
   href: string
-  class?: string
 }
 
-function ActiveLink(context: ActiveLinkProps) {
-  const { href, children, router } = context
+function ActiveLink({
+  href,
+  children,
+  router,
+  class: currentClasses,
+  ...otherAttributes
+}: NullstackClientContext<ActiveLinkProps>) {
   const activeClass = router.path === href ? ' active' : ''
-  const classes = `${context.class}${activeClass}`
+  const classes = `${currentClasses}${activeClass}`
   return (
-    <a href={href} class={classes}>
+    <a href={href} class={classes} {...otherAttributes}>
       {children}
     </a>
   )
 }
 
-export default ActiveLink
+export default ActiveLink as NullstackFunctionalComponent<ActiveLinkProps>

examples/active-class-name/src/pages/Dynamic.tsx

@@ -1,8 +1,8 @@
-import { NullstackClientContext } from 'nullstack'
+import { NullstackClientContext, NullstackFunctionalComponent } from 'nullstack'
 
-function Dynamic({ router }: Partial<NullstackClientContext>) {
+function Dynamic({ router }: NullstackClientContext) {
   const cleanRoute = router.path.replace('/', '')
   return <p>Hello, I'm the {cleanRoute} page</p>
 }
 
-export default Dynamic
+export default Dynamic as NullstackFunctionalComponent<Record<string, any>>