♻️ Fully update active-class-name example

GuiDevloper · GuiDevloper · commit 69f0525f7dc3 · 2023-04-22T07:10:48.000-03:00
diff --git a/examples/active-class-name/.eslintrc.js b/examples/active-class-name/.eslintrc.js
@@ -0,0 +1,19 @@
+module.exports = {
+  extends: 'plugin:nullstack/recommended',
+  rules: {
+    'nullstack/prettier': [
+      'warn',
+      {
+        // More options at https://prettier.io/docs/en/options
+        trailingComma: 'all',
+        tabWidth: 2,
+        semi: false,
+        singleQuote: true,
+        printWidth: 80,
+      },
+      {
+        usePrettierrc: false,
+      },
+    ],
+  },
+}
diff --git a/examples/active-class-name/.gitignore b/examples/active-class-name/.gitignore
@@ -0,0 +1,32 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+package-lock.json
+yarn.lock
+pnpm-lock.yaml
+
+# testing
+/coverage
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env
+
+# vercel
+.vercel
+
+# bundle folders
+.development/
+.production/
diff --git a/examples/active-class-name/README.md b/examples/active-class-name/README.md
@@ -6,7 +6,7 @@ Nullstack [Context](https://nullstack.app/context)'s [Router](https://nullstack.
 
 Deploy it now with [Vercel](https://vercel.com):
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/GuiDevloper/nullstack-examples/tree/master/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/master/examples/active-class-name&demo-image=https://nullstack.app/image-1200x630.png)
+[![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)
 
 ## How to use
 
@@ -16,4 +16,4 @@ Execute [`nulla create`](https://github.com/GuiDevloper/nulla) with [npm](https:
 npx nulla create --example active-class-name active-class-name-app
 ```
 
-Then deploy it with [Vercel](https://github.com/GuiDevloper/nulla/blob/master/docs/en-US/deploy-vercel.md), [Heroku](https://github.com/GuiDevloper/nulla/blob/master/docs/en-US/deploy-heroku.md) or [Netlify](https://github.com/GuiDevloper/nulla/blob/master/docs/en-US/deploy-netlify.md).
+Then deploy it with [Vercel](https://github.com/GuiDevloper/nulla/blob/main/docs/en-US/deploy-vercel.md), [Heroku](https://github.com/GuiDevloper/nulla/blob/main/docs/en-US/deploy-heroku.md) or [Netlify](https://github.com/GuiDevloper/nulla/blob/main/docs/en-US/deploy-netlify.md).
diff --git a/examples/active-class-name/api/nullstack.js b/examples/active-class-name/api/nullstack.js
@@ -1,3 +1,3 @@
-import application from '../.production/server';
+import application from '../.production/server'
 
-export default application.server;
+export default application.server
diff --git a/examples/active-class-name/client.js b/examples/active-class-name/client.js
diff --git a/examples/active-class-name/client.ts b/examples/active-class-name/client.ts
@@ -0,0 +1,5 @@
+import Nullstack from 'nullstack'
+
+import Application from './src/Application'
+
+export default Nullstack.start(Application)
diff --git a/examples/active-class-name/package.json b/examples/active-class-name/package.json
@@ -1,11 +1,11 @@
 {
   "private": true,
   "devDependencies": {
-    "nullstack": "~0.15.0"
+    "nullstack": "~0.17.5"
   },
   "scripts": {
-    "start": "npx nullstack start --port=3000",
-    "build": "npx nullstack build --mode=ssr",
+    "start": "npx nullstack start",
+    "build": "npx nullstack build",
     "vercel-build": "npm run build"
   }
 }
diff --git a/examples/active-class-name/server.js b/examples/active-class-name/server.js
diff --git a/examples/active-class-name/server.ts b/examples/active-class-name/server.ts
@@ -0,0 +1,5 @@
+import Nullstack from 'nullstack'
+
+import Application from './src/Application'
+
+export default Nullstack.start(Application)
diff --git a/examples/active-class-name/src/Application.tsx b/examples/active-class-name/src/Application.tsx
@@ -1,29 +1,30 @@
-import Nullstack from 'nullstack';
-import './Application.css';
-import Nav from './components/Nav';
-import Home from './pages/Home';
-import About from './pages/About';
-import Blog from './pages/Blog';
-import Dynamic from './pages/Dynamic';
+import Nullstack, { NullstackClientContext } from 'nullstack'
+
+import './Application.css'
+import Nav from './components/Nav'
+import About from './pages/About'
+import Blog from './pages/Blog'
+import Dynamic from './pages/Dynamic'
+import Home from './pages/Home'
 
 class Application extends Nullstack {
-  
-  prepare({ page }) {
-    page.title = 'Nullstack active-class-name';
+
+  prepare({ page }: NullstackClientContext) {
+    page.title = 'Nullstack active-class-name'
   }
 
   render() {
     return (
       <>
-        <Nav/>
-        <Home route="/"/>
-        <About route="/about"/>
-        <Blog route="/blog"/>
-        <Dynamic route="/*"/>
+        <Nav />
+        <Home route="/" />
+        <About route="/about" />
+        <Blog route="/blog" />
+        <Dynamic route="/*" />
       </>
     )
   }
 
 }
 
-export default Application;
+export default Application
diff --git a/examples/active-class-name/src/components/ActiveLink.tsx b/examples/active-class-name/src/components/ActiveLink.tsx
@@ -1,19 +1,19 @@
-import { NullstackClientContext } from 'nullstack';
+import { NullstackClientContext } from 'nullstack'
 
-interface ActiveLinkProps extends NullstackClientContext {
-  href?: string,
+type ActiveLinkProps = Partial<NullstackClientContext> & {
+  href: string
   class?: string
 }
 
 function ActiveLink(context: ActiveLinkProps) {
-  const { href, children, router } = context;
-  const activeClass = router.path === href ? ' active' : '';
-  const classes = `${context.class}${activeClass}`;
+  const { href, children, router } = context
+  const activeClass = router.path === href ? ' active' : ''
+  const classes = `${context.class}${activeClass}`
   return (
     <a href={href} class={classes}>
       {children}
     </a>
   )
 }
 
-export default ActiveLink;
+export default ActiveLink
diff --git a/examples/active-class-name/src/components/Nav.tsx b/examples/active-class-name/src/components/Nav.tsx
@@ -1,18 +1,24 @@
-import './Nav.css';
-import ActiveLink from './ActiveLink';
+import './Nav.css'
+import ActiveLink from './ActiveLink'
 
 function Nav() {
   return (
     <nav>
       <ul class="nav">
         <li>
-          <ActiveLink href="/" class="nav-link">Home</ActiveLink>
+          <ActiveLink href="/" class="nav-link">
+            Home
+          </ActiveLink>
         </li>
         <li>
-          <ActiveLink href="/about" class="nav-link">About</ActiveLink>
+          <ActiveLink href="/about" class="nav-link">
+            About
+          </ActiveLink>
         </li>
         <li>
-          <ActiveLink href="/blog" class="nav-link">Blog</ActiveLink>
+          <ActiveLink href="/blog" class="nav-link">
+            Blog
+          </ActiveLink>
         </li>
         <li>
           <ActiveLink href="/dynamic-route" class="nav-link">
@@ -21,7 +27,7 @@ function Nav() {
         </li>
       </ul>
     </nav>
-  );
+  )
 }
 
-export default Nav;
+export default Nav
diff --git a/examples/active-class-name/src/pages/About.tsx b/examples/active-class-name/src/pages/About.tsx
@@ -1,7 +1 @@
-import type { NullstackClientContext } from "nullstack";
-
-function Home({}: NullstackClientContext) {
-  return <p>Hello, I'm the About page</p>
-}
-
-export default Home;
+export default () => <p>Hello, I'm the About page</p>
diff --git a/examples/active-class-name/src/pages/Blog.tsx b/examples/active-class-name/src/pages/Blog.tsx
@@ -1,7 +1 @@
-import type { NullstackClientContext } from "nullstack";
-
-function Home({}: NullstackClientContext) {
-  return <p>Hello, I'm the Blog page</p>
-}
-
-export default Home;
+export default () => <p>Hello, I'm the Blog page</p>
diff --git a/examples/active-class-name/src/pages/Dynamic.tsx b/examples/active-class-name/src/pages/Dynamic.tsx
@@ -1,8 +1,8 @@
-import type { NullstackClientContext } from 'nullstack';
+import { NullstackClientContext } from 'nullstack'
 
-function Home({ router }: NullstackClientContext) {
-  const cleanRoute = router.path.replace('/', '');
+function Dynamic({ router }: Partial<NullstackClientContext>) {
+  const cleanRoute = router.path.replace('/', '')
   return <p>Hello, I'm the {cleanRoute} page</p>
 }
 
-export default Home;
+export default Dynamic
diff --git a/examples/active-class-name/src/pages/Home.tsx b/examples/active-class-name/src/pages/Home.tsx
@@ -1,7 +1 @@
-import type { NullstackClientContext } from 'nullstack';
-
-function Home({}: NullstackClientContext) {
-  return <p>Hello, I'm the Home page</p>
-}
-
-export default Home;
+export default () => <p>Hello, I'm the Home page</p>
diff --git a/examples/active-class-name/tsconfig.json b/examples/active-class-name/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "strict": false,
+    "noImplicitAny": false,
+    "jsx": "preserve",
+    "lib": ["ES2020", "DOM"]
+  }
+}

Original file line number	Diff line number	Diff line change
`@@ -1,11 +1,11 @@`
`1`	`1`	`{`
`2`	`2`	`"private": true,`
`3`	`3`	`"devDependencies": {`
`4`		`- "nullstack": "~0.15.0"`
	`4`	`+ "nullstack": "~0.17.5"`
`5`	`5`	`},`
`6`	`6`	`"scripts": {`
`7`		`- "start": "npx nullstack start --port=3000",`
`8`		`- "build": "npx nullstack build --mode=ssr",`
	`7`	`+ "start": "npx nullstack start",`
	`8`	`+ "build": "npx nullstack build",`
`9`	`9`	`"vercel-build": "npm run build"`
`10`	`10`	`}`
`11`	`11`	`}`