@zessjs/cli 1.0.0

package/template/javascript/src/pages/ConditionalPage.jsx

@@ -0,0 +1,85 @@
+import { Match, Show, Switch, useMemo, useSignal } from '@zessjs/core'
+import { Link } from '@zessjs/router'
+
+const ConditionalPage = () => {
+  const [count, setCount] = useSignal(0)
+  const status = useMemo(() => {
+    const currentCount = count()
+    if (currentCount > 10) return 'success'
+    if (currentCount > 5) return 'warning'
+    return 'info'
+  })
+
+  return (
+    <div class="w-full text-center pb-8">
+      <header class="mb-8">
+        <h1 class="text-2xl font-bold mb-2">Conditional Rendering</h1>
+        <p class="text-gray-600">
+          This demonstrates Zess's conditional rendering components
+        </p>
+      </header>
+      <div class="flex justify-center items-center gap-4 mb-8">
+        <button
+          class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded transition-all"
+          onClick={() => setCount((prevCount) => Math.max(0, prevCount - 1))}
+        >
+          -
+        </button>
+        <span class="text-3xl font-bold min-w-16">{count()}</span>
+        <button
+          class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded transition-all"
+          onClick={() => setCount((prevCount) => prevCount + 1)}
+        >
+          +
+        </button>
+      </div>
+      <div class="mb-8 space-y-4 max-w-md mx-auto">
+        <div class="p-4 border border-gray-200 rounded bg-white">
+          <h3 class="text-lg font-semibold mb-2">Using Show Component</h3>
+          {/* Show component renders content conditionally based on the 'when' prop */}
+          {/* Falls back to the fallback content when condition is false */}
+          <Show
+            when={count() > 5}
+            fallback={
+              <p class="text-gray-600">Count is less than or equal to 5</p>
+            }
+          >
+            <p class="text-green-600 font-medium">
+              Count is greater than 5! 🎉
+            </p>
+          </Show>
+        </div>
+        <div class="p-4 border border-gray-200 rounded bg-white">
+          <h3 class="text-lg font-semibold mb-2">
+            Using {'<Switch>'} and {'<Match>'}
+          </h3>
+          {/* Switch component acts like a switch statement for rendering */}
+          {/* Only the first matching Match component within Switch is rendered */}
+          <Switch>
+            <Match when={status() === 'success'}>
+              <p class="text-green-600 font-medium">Status: Success</p>
+            </Match>
+            <Match when={status() === 'warning'}>
+              <p class="text-yellow-600 font-medium">Status: Warning</p>
+            </Match>
+            <Match when={status() === 'info'}>
+              <p class="text-blue-600 font-medium">Status: Info</p>
+            </Match>
+          </Switch>
+        </div>
+      </div>
+      <div>
+        {/* Link back to home page */}
+        <Link
+          to="/"
+          relative={false}
+          class="inline-block px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded transition-all"
+        >
+          Back to Home
+        </Link>
+      </div>
+    </div>
+  )
+}
+
+export default ConditionalPage

package/template/javascript/src/pages/CounterPage.jsx

@@ -0,0 +1,50 @@
+import { useMemo, useSignal } from '@zessjs/core'
+import { Link } from '@zessjs/router'
+
+const CounterPage = () => {
+  const [count, setCount] = useSignal(0)
+  const doubleCount = useMemo(() => count() * 2)
+
+  return (
+    <div class="w-full text-center pb-8">
+      <header class="mb-8">
+        <h1 class="text-2xl font-bold mb-2">Counter Example</h1>
+        <p class="text-gray-600">
+          This is a simple counter demonstrating Zess's signal system
+        </p>
+      </header>
+      <div class="flex justify-center items-center gap-4 mb-8">
+        <button
+          class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded transition-all"
+          onClick={() => setCount((prevCount) => prevCount - 1)}
+        >
+          -
+        </button>
+        <span class="text-3xl font-bold min-w-16">{count()}</span>
+        <button
+          class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded transition-all"
+          onClick={() => setCount((prevCount) => prevCount + 1)}
+        >
+          +
+        </button>
+      </div>
+      <div class="mb-8">
+        <p class="text-gray-700">
+          Double the count is: <strong>{doubleCount()}</strong>
+        </p>
+      </div>
+      <div>
+        {/* Link back to home page */}
+        <Link
+          to="/"
+          relative={false}
+          class="inline-block px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded transition-all"
+        >
+          Back to Home
+        </Link>
+      </div>
+    </div>
+  )
+}
+
+export default CounterPage

package/template/javascript/src/pages/HomePage.jsx

@@ -0,0 +1,43 @@
+import { Link } from '@zessjs/router'
+
+const HomePage = () => (
+  <div class="w-full text-center pb-8">
+    <section>
+      <h2 class="text-2xl font-semibold mb-6">Explore Examples</h2>
+      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+        {/* Counter example card - links to counter page */}
+        <Link
+          to="counter"
+          class="block p-4 border border-gray-200 rounded hover:border-indigo-500 transition-all bg-white"
+        >
+          <h3 class="text-lg font-medium mb-2">Counter Example</h3>
+          <p class="text-sm text-gray-600">
+            Signal system and reactive updates
+          </p>
+        </Link>
+        {/* List example card - links to list page */}
+        <Link
+          to="list"
+          class="block p-4 border border-gray-200 rounded hover:border-purple-500 transition-all bg-white"
+        >
+          <h3 class="text-lg font-medium mb-2">List Example</h3>
+          <p class="text-sm text-gray-600">
+            Render lists and handle user input
+          </p>
+        </Link>
+        {/* Conditional rendering example card - links to conditional page */}
+        <Link
+          to="conditional"
+          class="block p-4 border border-gray-200 rounded hover:border-pink-500 transition-all bg-white"
+        >
+          <h3 class="text-lg font-medium mb-2">Conditional Rendering</h3>
+          <p class="text-sm text-gray-600">
+            {'<Show>'} and {'<Switch>'} components
+          </p>
+        </Link>
+      </div>
+    </section>
+  </div>
+)
+
+export default HomePage

package/template/javascript/src/pages/ListPage.jsx

@@ -0,0 +1,83 @@
+import { For, Show, useSignal } from '@zessjs/core'
+import { Link } from '@zessjs/router'
+
+const ListPage = () => {
+  const [items, setItems] = useSignal([
+    'Zess Compiler',
+    'Zess Core',
+    'Zess Router',
+  ])
+  const [newItem, setNewItem] = useSignal('')
+  const addItem = () => {
+    const item = newItem().trim()
+    if (item) {
+      setItems((prevItems) => [...prevItems, item])
+      setNewItem('')
+    }
+  }
+  const handleKeyPress = (e) => {
+    if (e.key === 'Enter') addItem()
+  }
+
+  return (
+    <div class="w-full text-center pb-8">
+      <header class="mb-8">
+        <h1 class="text-2xl font-bold mb-2">List Example</h1>
+        <p class="text-gray-600">
+          This shows how to render lists with {'<For>'} component
+        </p>
+      </header>
+      <div class="mb-8">
+        <div class="flex flex-col sm:flex-row gap-2 justify-center">
+          <input
+            type="text"
+            value={newItem()}
+            onInput={(e) => setNewItem(e.target.value)}
+            onKeyPress={handleKeyPress}
+            placeholder="Enter new item..."
+            class="px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-indigo-500"
+          />
+          <button
+            onClick={addItem}
+            class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded transition-all"
+          >
+            Add Item
+          </button>
+        </div>
+      </div>
+      <div class="mb-8">
+        {/* Conditionally render the list or an empty state message */}
+        <Show
+          when={items().length > 0}
+          fallback={<p class="text-gray-500 py-4">No items in the list yet.</p>}
+        >
+          <ul class="space-y-2 max-w-md mx-auto">
+            {/* Zess For component for efficiently rendering lists */}
+            <For each={items()}>
+              {(item, index) => (
+                <li class="flex items-center p-2 border-b border-gray-200 bg-white">
+                  <span class="mr-2 text-gray-500 font-medium">
+                    {index() + 1}.
+                  </span>
+                  <span class="text-left flex-1">{item}</span>
+                </li>
+              )}
+            </For>
+          </ul>
+        </Show>
+      </div>
+      <div>
+        {/* Link back to home page */}
+        <Link
+          to="/"
+          relative={false}
+          class="inline-block px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded transition-all"
+        >
+          Back to Home
+        </Link>
+      </div>
+    </div>
+  )
+}
+
+export default ListPage

package/template/javascript/tests/HelloWorld.test.jsx

@@ -0,0 +1,15 @@
+import { render } from '@zessjs/core'
+import { describe, expect, it } from 'vitest'
+
+function HelloWorld() {
+  return <div>Hello World</div>
+}
+
+describe('HelloWorld', () => {
+  it('should render a <HelloWorld> component', () => {
+    const container = document.createElement('div')
+    const dispose = render(() => <HelloWorld />, container)
+    expect(container.textContent).toBe('Hello World')
+    dispose()
+  })
+})

package/template/javascript/vite.config.js

@@ -0,0 +1,11 @@
+import tailwindcss from '@tailwindcss/vite'
+import zess from '@zessjs/vite-plugin'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [tailwindcss(), zess()],
+  test: {
+    environment: 'jsdom',
+    include: ['./tests/*.test.{js,jsx}'],
+  },
+})

package/template/typescript/eslint.config.ts

@@ -0,0 +1,2 @@
+import { sxzz } from '@sxzz/eslint-config'
+export default sxzz()

package/template/typescript/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg+xml" href="/zess.svg" />
+    <title>Zess App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/App.tsx"></script>
+  </body>
+</html>

package/template/typescript/src/App.tsx

@@ -0,0 +1,101 @@
+import { render, type Component } from '@zessjs/core'
+import { Link, Route, Router } from '@zessjs/router'
+import viteLogo from './assets/vite.svg'
+import ConditionalPage from './pages/ConditionalPage'
+import CounterPage from './pages/CounterPage'
+import HomePage from './pages/HomePage'
+import ListPage from './pages/ListPage'
+import './assets/style.css'
+import zessLogo from '/zess.svg'
+
+const AppLayout: Component<{ children?: JSX.Element }> = (props) => (
+  <div class="min-h-screen flex flex-col items-center bg-gradient-to-br from-blue-100 via-white to-yellow-100">
+    <nav class="w-full py-4 flex justify-center">
+      <div class="flex space-x-6 md:space-x-8">
+        {/* Home page link - active when at root URL */}
+        <Link
+          end
+          to="/"
+          class="text-gray-700 hover:text-indigo-600 transition-all duration-200"
+          activeClass="text-indigo-600 font-semibold"
+        >
+          Home
+        </Link>
+        {/* Counter page link */}
+        <Link
+          end
+          to="counter"
+          class="text-gray-700 hover:text-indigo-600 transition-all duration-200"
+          activeClass="text-indigo-600 font-semibold"
+        >
+          Counter
+        </Link>
+        {/* List page link */}
+        <Link
+          end
+          to="list"
+          class="text-gray-700 hover:text-indigo-600 transition-all duration-200"
+          activeClass="text-indigo-600 font-semibold"
+        >
+          List
+        </Link>
+        {/* Conditional page link */}
+        <Link
+          end
+          to="conditional"
+          class="text-gray-700 hover:text-indigo-600 transition-all duration-200"
+          activeClass="text-indigo-600 font-semibold"
+        >
+          Conditional
+        </Link>
+      </div>
+    </nav>
+    <div class="flex flex-col md:flex-row items-center justify-center my-8 md:my-12 space-y-4 md:space-y-0 md:space-x-12">
+      <img
+        src={zessLogo}
+        class="h-32 md:h-40 transition-all duration-300 hover:drop-shadow-[0_0_2em_#646cffaa]"
+        alt="Zess logo"
+      />
+      <img
+        src={viteLogo}
+        class="h-32 md:h-40 transition-all duration-300 hover:drop-shadow-[0_0_2em_#646cffaa]"
+        alt="Vite logo"
+      />
+    </div>
+    <h1 class="text-5xl md:text-6xl font-bold mb-8 md:mb-12">Hello Zess!</h1>
+    <main class="w-full max-w-4xl px-4 pb-12">{props.children}</main>
+  </div>
+)
+
+const ZessApp: Component = () => (
+  <Router root={AppLayout} mode="history">
+    {/* Route for Home page */}
+    <Route path="/" component={HomePage} />
+    {/* Route for Counter page */}
+    <Route path="counter" component={CounterPage} />
+    {/* Route for List page */}
+    <Route path="list" component={ListPage} />
+    {/* Route for Conditional page */}
+    <Route path="conditional" component={ConditionalPage} />
+    {/* Catch-all route for 404 page not found */}
+    <Route
+      path="*"
+      component={() => (
+        <div class="text-center py-16">
+          <h1 class="text-4xl font-bold mb-4">404</h1>
+          <p class="text-xl text-gray-600 mb-8">Page not found</p>
+          {/* Link to home page */}
+          <Link
+            to="/"
+            relative={false}
+            class="inline-block px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded transition-all"
+          >
+            Go back to Home
+          </Link>
+        </div>
+      )}
+    />
+  </Router>
+)
+
+render(() => <ZessApp />, document.querySelector('#app')!)

package/template/typescript/src/pages/ConditionalPage.tsx

@@ -0,0 +1,92 @@
+import {
+  Match,
+  Show,
+  Switch,
+  useMemo,
+  useSignal,
+  type Component,
+} from '@zessjs/core'
+import { Link } from '@zessjs/router'
+
+const ConditionalPage: Component = () => {
+  const [count, setCount] = useSignal(0)
+  const status = useMemo(() => {
+    const currentCount = count()
+    if (currentCount > 10) return 'success'
+    if (currentCount > 5) return 'warning'
+    return 'info'
+  })
+
+  return (
+    <div class="w-full text-center pb-8">
+      <header class="mb-8">
+        <h1 class="text-2xl font-bold mb-2">Conditional Rendering</h1>
+        <p class="text-gray-600">
+          This demonstrates Zess's conditional rendering components
+        </p>
+      </header>
+      <div class="flex justify-center items-center gap-4 mb-8">
+        <button
+          class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded transition-all"
+          onClick={() => setCount((prevCount) => Math.max(0, prevCount - 1))}
+        >
+          -
+        </button>
+        <span class="text-3xl font-bold min-w-16">{count()}</span>
+        <button
+          class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded transition-all"
+          onClick={() => setCount((prevCount) => prevCount + 1)}
+        >
+          +
+        </button>
+      </div>
+      <div class="mb-8 space-y-4 max-w-md mx-auto">
+        <div class="p-4 border border-gray-200 rounded bg-white">
+          <h3 class="text-lg font-semibold mb-2">Using Show Component</h3>
+          {/* Show component renders content conditionally based on the 'when' prop */}
+          {/* Falls back to the fallback content when condition is false */}
+          <Show
+            when={count() > 5}
+            fallback={
+              <p class="text-gray-600">Count is less than or equal to 5</p>
+            }
+          >
+            <p class="text-green-600 font-medium">
+              Count is greater than 5! 🎉
+            </p>
+          </Show>
+        </div>
+        <div class="p-4 border border-gray-200 rounded bg-white">
+          <h3 class="text-lg font-semibold mb-2">
+            Using {'<Switch>'} and {'<Match>'}
+          </h3>
+          {/* Switch component acts like a switch statement for rendering */}
+          {/* Only the first matching Match component within Switch is rendered */}
+          <Switch>
+            <Match when={status() === 'success'}>
+              <p class="text-green-600 font-medium">Status: Success</p>
+            </Match>
+            <Match when={status() === 'warning'}>
+              <p class="text-yellow-600 font-medium">Status: Warning</p>
+            </Match>
+            <Match when={status() === 'info'}>
+              <p class="text-blue-600 font-medium">Status: Info</p>
+            </Match>
+          </Switch>
+        </div>
+      </div>
+      <div>
+        {/* Link back to home page */}
+        <Link
+          to="/"
+          relative={false}
+          class="inline-block px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded transition-all"
+        >
+          Back to Home
+        </Link>
+      </div>
+    </div>
+  )
+}
+
+export default ConditionalPage

package/template/typescript/src/pages/CounterPage.tsx

@@ -0,0 +1,50 @@
+import { useMemo, useSignal, type Component } from '@zessjs/core'
+import { Link } from '@zessjs/router'
+
+const CounterPage: Component = () => {
+  const [count, setCount] = useSignal(0)
+  const doubleCount = useMemo(() => count() * 2)
+
+  return (
+    <div class="w-full text-center pb-8">
+      <header class="mb-8">
+        <h1 class="text-2xl font-bold mb-2">Counter Example</h1>
+        <p class="text-gray-600">
+          This is a simple counter demonstrating Zess's signal system
+        </p>
+      </header>
+      <div class="flex justify-center items-center gap-4 mb-8">
+        <button
+          class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded transition-all"
+          onClick={() => setCount((prevCount) => prevCount - 1)}
+        >
+          -
+        </button>
+        <span class="text-3xl font-bold min-w-16">{count()}</span>
+        <button
+          class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded transition-all"
+          onClick={() => setCount((prevCount) => prevCount + 1)}
+        >
+          +
+        </button>
+      </div>
+      <div class="mb-8">
+        <p class="text-gray-700">
+          Double the count is: <strong>{doubleCount()}</strong>
+        </p>
+      </div>
+      <div>
+        {/* Link back to home page */}
+        <Link
+          to="/"
+          relative={false}
+          class="inline-block px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded transition-all"
+        >
+          Back to Home
+        </Link>
+      </div>
+    </div>
+  )
+}
+
+export default CounterPage

package/template/typescript/src/pages/HomePage.tsx

@@ -0,0 +1,44 @@
+import { Link } from '@zessjs/router'
+import type { Component } from '@zessjs/core'
+
+const HomePage: Component = () => (
+  <div class="w-full text-center pb-8">
+    <section>
+      <h2 class="text-2xl font-semibold mb-6">Explore Examples</h2>
+      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+        {/* Counter example card - links to counter page */}
+        <Link
+          to="counter"
+          class="block p-4 border border-gray-200 rounded hover:border-indigo-500 transition-all bg-white"
+        >
+          <h3 class="text-lg font-medium mb-2">Counter Example</h3>
+          <p class="text-sm text-gray-600">
+            Signal system and reactive updates
+          </p>
+        </Link>
+        {/* List example card - links to list page */}
+        <Link
+          to="list"
+          class="block p-4 border border-gray-200 rounded hover:border-purple-500 transition-all bg-white"
+        >
+          <h3 class="text-lg font-medium mb-2">List Example</h3>
+          <p class="text-sm text-gray-600">
+            Render lists and handle user input
+          </p>
+        </Link>
+        {/* Conditional rendering example card - links to conditional page */}
+        <Link
+          to="conditional"
+          class="block p-4 border border-gray-200 rounded hover:border-pink-500 transition-all bg-white"
+        >
+          <h3 class="text-lg font-medium mb-2">Conditional Rendering</h3>
+          <p class="text-sm text-gray-600">
+            {'<Show>'} and {'<Switch>'} components
+          </p>
+        </Link>
+      </div>
+    </section>
+  </div>
+)
+
+export default HomePage