chore: bump to v0.17.2 (#365)

Co-authored-by: Marco Pasqualetti <marco.pasqualetti@live.com>

.github/workflows/ci-documentation.yml

@@ -4,20 +4,20 @@ on:
   push:
     branches:
       - 'main'
+    # match
+    # - all files inside `apps/documentation` and `.github`
+    # - all files in the root expect `Cargo.toml`
     paths:
-      # ⬇ Keep paths in sync with `typescript.yml`
       - '.github/**'
       - '*'
       - '!Cargo.toml'
-      # ⬆ Keep paths in sync with `typescript.yml`
       - 'apps/documentation/**'
   pull_request:
+    # same as `on.push.paths`
     paths:
-      # ⬇ Keep paths in sync with `typescript.yml`
       - '.github/**'
       - '*'
       - '!Cargo.toml'
-      # ⬆ Keep paths in sync with `typescript.yml`
       - 'apps/documentation/**'
 
 jobs:

.github/workflows/repo-root-ci.yml

@@ -8,18 +8,10 @@ on:
   push:
     branches:
       - 'main'
-    paths:
-      - '*'
-      - '.github/**'
-      - '.docker/**'
   pull_request:
-    paths:
-      - '*'
-      - '.github/**'
-      - '.docker/**'
 
 jobs:
-  build-and-test:
+  format:
     name: Check format
     runs-on: ubuntu-latest
     timeout-minutes: 15
@@ -33,3 +25,23 @@ jobs:
 
       - name: Test project
         run: pnpm repo:root:format:check
+
+  ci_ok:
+    name: OK
+    runs-on: ubuntu-latest
+    timeout-minutes: 1
+    if: always()
+    needs: [format]
+    env:
+      FAILURE: ${{ contains(join(needs.*.result, ','), 'failure') }}
+      CANCELLED: ${{ contains(join(needs.*.result, ','), 'cancelled') }}
+    steps:
+      - name: Check for failure or cancelled jobs result
+        shell: bash
+        run: |
+          echo "Failure: $FAILURE - Cancelled: $CANCELLED"
+          if [ "$FAILURE" = "false" ] && [ "$CANCELLED" = "false" ]; then
+            exit 0
+          else
+            exit 1
+          fi

.github/workflows/rust.yml

@@ -4,15 +4,7 @@ on:
   push:
     branches:
       - 'main'
-    paths:
-      - '.github/**'
-      - 'Cargo.toml'
-      - 'crates/**'
   pull_request:
-    paths:
-      - '.github/**'
-      - 'Cargo.toml'
-      - 'crates/**'
 
 env:
   CARGO_TERM_COLOR: always
@@ -40,6 +32,7 @@ jobs:
             os: 'ubuntu-latest'
 
     runs-on: ${{ matrix.os }}
+    timeout-minutes: 15
 
     steps:
       - name: Checkout code
@@ -56,6 +49,7 @@ jobs:
   lint_and_fmt:
     name: Check format and lint rust crates
     runs-on: ubuntu-latest
+    timeout-minutes: 15
 
     steps:
       - name: Checkout code
@@ -66,3 +60,23 @@ jobs:
 
       - run: cargo fmt --all -- --check
       - run: cargo clippy -- -D warnings
+
+  ci_ok:
+    name: OK
+    runs-on: ubuntu-latest
+    timeout-minutes: 1
+    if: always()
+    needs: [build_and_test, lint_and_fmt]
+    env:
+      FAILURE: ${{ contains(join(needs.*.result, ','), 'failure') }}
+      CANCELLED: ${{ contains(join(needs.*.result, ','), 'cancelled') }}
+    steps:
+      - name: Check for failure or cancelled jobs result
+        shell: bash
+        run: |
+          echo "Failure: $FAILURE - Cancelled: $CANCELLED"
+          if [ "$FAILURE" = "false" ] && [ "$CANCELLED" = "false" ]; then
+            exit 0
+          else
+            exit 1
+          fi

.github/workflows/typescript.yml

@@ -4,26 +4,11 @@ on:
   push:
     branches:
       - 'main'
-    paths:
-      # ⬇ Keep paths in sync with `ci-documentation.yml`
-      - '.github/**'
-      - '*'
-      - '!Cargo.toml'
-      # ⬆ Keep paths in sync with `ci-documentation.yml`
-      - 'packages/**'
   pull_request:
-    paths:
-      # ⬇ Keep paths in sync with `ci-documentation.yml`
-      - '.github/**'
-      - '*'
-      - '!Cargo.toml'
-      # ⬆ Keep paths in sync with `ci-documentation.yml`
-      - 'packages/**'
 
 jobs:
   build_and_test:
     name: Check build and test
-    timeout-minutes: 15
 
     strategy:
       fail-fast: true
@@ -34,6 +19,7 @@ jobs:
           - 'windows-latest'
 
     runs-on: ${{ matrix.os }}
+    timeout-minutes: 15
 
     steps:
       - name: Checkout code
@@ -68,3 +54,23 @@ jobs:
 
       - name: Types
         run: pnpm types
+
+  ci_ok:
+    name: OK
+    runs-on: ubuntu-latest
+    timeout-minutes: 1
+    if: always()
+    needs: [build_and_test, lint_and_fmt]
+    env:
+      FAILURE: ${{ contains(join(needs.*.result, ','), 'failure') }}
+      CANCELLED: ${{ contains(join(needs.*.result, ','), 'cancelled') }}
+    steps:
+      - name: Check for failure or cancelled jobs result
+        shell: bash
+        run: |
+          echo "Failure: $FAILURE - Cancelled: $CANCELLED"
+          if [ "$FAILURE" = "false" ] && [ "$CANCELLED" = "false" ]; then
+            exit 0
+          else
+            exit 1
+          fi

Cargo.toml

@@ -1,13 +1,10 @@
 [workspace]
 resolver = "2"
-members = [
-		"crates/tuono",
-		"crates/tuono_lib",
-		"crates/tuono_lib_macros",
-]
+members = ["crates/tuono", "crates/tuono_lib", "crates/tuono_lib_macros"]
 exclude = [
-		"apps/documentation",
-		"examples/with-mdx",
-		"examples/tuono-app",
-		"examples/tuono-tutorial"
+  "apps/documentation",
+  "examples/with-mdx",
+  "examples/tuono-app",
+  "examples/tuono-tutorial",
+  "examples/with-tailwind",
 ]

apps/documentation/package.json

@@ -19,6 +19,7 @@
     "clsx": "2.1.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
+    "remark-gfm": "4.0.0",
     "tuono": "npm:tuono@0.16.9"
   },
   "devDependencies": {

apps/documentation/src/components/MdxProvider/MdxProvider.tsx

@@ -7,6 +7,7 @@ import MdxQuote from './MdxQuote'
 import MdxCode from './MdxCode'
 import { h } from './MdxTitle'
 import MdxBold from './MdxBold'
+import MdxTable from './MdxTable'
 
 interface MdxProviderProps {
   children: ReactNode
@@ -30,6 +31,12 @@ export default function MdxProvider({
         h5: h(5),
         h6: h(6),
         strong: MdxBold,
+        table: MdxTable,
+        thead: MdxTable.Thead,
+        tbody: MdxTable.Tbody,
+        tr: MdxTable.Tr,
+        th: MdxTable.Th,
+        td: MdxTable.Td,
       }}
     >
       {children}

apps/documentation/src/components/MdxProvider/MdxTable/MdxTable.tsx

@@ -0,0 +1,27 @@
+import type { DetailedHTMLProps, TableHTMLAttributes, JSX } from 'react'
+import { Table, ScrollArea } from '@mantine/core'
+
+type MdxTableProps = DetailedHTMLProps<
+  TableHTMLAttributes<HTMLTableElement>,
+  HTMLTableElement
+>
+
+function MdxTable(props: MdxTableProps): JSX.Element {
+  const { children, ...rest } = props
+  return (
+    <ScrollArea type="auto">
+      <Table highlightOnHover {...rest}>
+        {children}
+      </Table>
+    </ScrollArea>
+  )
+}
+
+MdxTable.Thead = Table.Thead
+MdxTable.Tbody = Table.Tbody
+MdxTable.Tr = Table.Tr
+MdxTable.Th = Table.Th
+MdxTable.Td = Table.Td
+MdxTable.Caption = Table.Caption
+
+export default MdxTable

apps/documentation/src/components/MdxProvider/MdxTable/index.ts

@@ -0,0 +1,3 @@
+import MdxTable from './MdxTable'
+
+export default MdxTable

apps/documentation/src/components/Sidebar/sidebarElements.ts

@@ -170,6 +170,11 @@ export const sidebarElements: Array<SidebarElement> = [
         label: 'CSS modules',
         href: '/documentation/styles/css-modules',
       },
+      {
+        type: 'element',
+        label: 'Tailwind CSS',
+        href: '/documentation/styles/tailwind-css',
+      },
     ],
   },
   {

apps/documentation/src/routes/documentation/components/link.mdx

@@ -32,6 +32,8 @@ For navigating to pages outside of your app (other websites), you should use the
 
 The `Link` component behaves similarly to the `<a>` HTML tag, with a few additional features controlled by the following props:
 
-- `href`: `string` (Required) - Relative path to the page in your application. Anchor names (links with hashtags) are also valid.
-- `preload`: `boolean` (Defaults to `true`) - Whether to preload the page if the link is within the viewport.
-- `scroll`: `boolean` (Defaults to `true`) - Whether to preserve scroll position between navigations.
+| Prop      | Type                | Default value | Description                                                                                       |
+| --------- | ------------------- | ------------- | ------------------------------------------------------------------------------------------------- |
+| `href`    | `string` (Required) | -             | Relative path to the page in your application. Anchor names (links with hashtags) are also valid. |
+| `preload` | `boolean`           | `true`        | Whether to preload the page if the link is within the viewport.                                   |
+| `scroll`  | `boolean`           | `true`        | Whether to preserve scroll position between navigations.                                          |

apps/documentation/src/routes/documentation/hooks/use-router.mdx

@@ -7,22 +7,27 @@ import MetaTags from '@/components/MetaTags'
 
 import Breadcrumbs from '@/components/Breadcrumbs'
 
-<Breadcrumbs breadcrumbs={[{ label: 'Hooks' }]} />
+<Breadcrumbs breadcrumbs={[{ label: 'useRouter' }]} />
 
 # useRouter
 
 The `useRouter` hook provides access to various data about the current route, as well as methods to navigate between pages, as seen in the below example:
 
-```typescript jsx
+```tsx
+import { JSX } from 'react'
 import { useRouter } from 'tuono'
 
-export default function IndexPage() {
+export default function IndexPage(): JSX.Element {
   const router = useRouter()
 
   return (
     <>
       <p>pathname: {router.pathname}</p>
-      <button onClick={() => router.push("/foo")}>
+      <button
+        onClick={() => {
+          router.push('/foo')
+        }}
+      >
         My link
       </button>
     </>
@@ -30,7 +35,7 @@ export default function IndexPage() {
 }
 ```
 
-## `router` object
+## `useRouter` result
 
 - `pathname`: `string` - Returns the current path name
 - `query`: `Record<string, string>` - This object contains all the query params of the current route
@@ -45,6 +50,8 @@ Handles client side page navigation quickly. Useful for internal links, or for w
 router.push(path, options)
 ```
 
-- `path`: `string` - The path of the page you want to navigate to
-- `options`: `PushOptions` - Optional config object for additional control
-  - `scroll`: `boolean` - If `false` the scroll offset will be kept across page navigation. Default `true`
+| Name             | Type                | Default value | Description                                                       |
+| ---------------- | ------------------- | ------------- | ----------------------------------------------------------------- |
+| `path`           | `string` (Required) | -             | The path of the page you want to navigate to.                     |
+| `options`        | `PushOptions`       | -             | Optional config object for additional control.                    |
+| `options.scroll` | `boolean`           | `true`        | If `false` the scroll offset will be kept across page navigation. |

apps/documentation/src/routes/documentation/styles/tailwind-css.mdx

@@ -0,0 +1,62 @@
+import MetaTags from '@/components/MetaTags'
+
+<MetaTags
+  title="Tuono - Tailwind CSS"
+  canonical="https://tuono.dev/documentation/styles/css-modules"
+/>
+
+import Breadcrumbs from '@/components/Breadcrumbs'
+
+<Breadcrumbs breadcrumbs={[{ label: 'Tailwind CSS' }]} />
+
+# Tailwind CSS
+
+[Tailwind CSS](https://tailwindcss.com) is a popular utility-first CSS framework.
+Tuono support begins with Tailwind CSS v4.
+
+You can start using it right away with the `with-tailwind` template:
+
+```sh
+tuono new tuono-with-tailwind --template with-tailwind
+```
+
+## Installation
+
+1. Install Tailwind CSS via your Node.js preferred package manager.
+
+   ```sh
+   npm install tailwindcss@next @tailwindcss/vite@next
+   ```
+
+2. Add the Tailwind CSS vite plugin to `tuono.config.ts`, as seen in the example below:
+
+   ```ts
+   import type { TuonoConfig } from 'tuono/config'
+   import tailwindcss from '@tailwindcss/vite'
+
+   const config: TuonoConfig = {
+     vite: {
+       plugins: [tailwindcss()],
+     },
+   }
+
+   export default config
+   ```
+
+3. Add the Tailwind CSS directives to `src/styles/global.css`.
+
+   ```css
+   @import 'tailwindcss';
+   ```
+
+## Usage
+
+Tailwind CSS is ready to go! You can now start using utility classes anywhere in your app.
+
+```tsx
+import { JSX } from 'react'
+
+export default function Example(): JSX.Element {
+  return <h1 className="text-6xl font-bold">Tuono + Tailwind CSS!</h1>
+}
+```

apps/documentation/tuono.config.ts

@@ -1,5 +1,6 @@
 import type { TuonoConfig } from 'tuono/config'
 import mdx from '@mdx-js/rollup'
+import remarkGfm from 'remark-gfm'
 
 const config: TuonoConfig = {
   vite: {
@@ -8,7 +9,13 @@ const config: TuonoConfig = {
       '@tabler/icons-react': '@tabler/icons-react/dist/esm/icons/index.mjs',
     },
     plugins: [
-      { enforce: 'pre', ...mdx({ providerImportSource: '@mdx-js/react' }) },
+      {
+        enforce: 'pre',
+        ...mdx({
+          providerImportSource: '@mdx-js/react',
+          remarkPlugins: [remarkGfm],
+        }),
+      },
     ],
   },
 }

crates/tuono/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "tuono"
-version = "0.17.1"
+version = "0.17.2"
 edition = "2021"
 authors = ["V. Ageno <valerioageno@yahoo.it>"]
 description = "Superfast React fullstack framework"

crates/tuono_lib/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "tuono_lib"
-version = "0.17.1"
+version = "0.17.2"
 edition = "2021"
 authors = ["V. Ageno <valerioageno@yahoo.it>"]
 description = "Superfast React fullstack framework"
@@ -32,7 +32,7 @@ either = "1.13.0"
 tower-http = {version = "0.6.0", features = ["fs"]}
 colored = "2.1.0"
 
-tuono_lib_macros = {path = "../tuono_lib_macros", version = "0.17.1"}
+tuono_lib_macros = {path = "../tuono_lib_macros", version = "0.17.2"}
 # Match the same version used by axum
 tokio-tungstenite = "0.24.0"
 futures-util = { version = "0.3", default-features = false, features = ["sink", "std"] }

crates/tuono_lib_macros/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "tuono_lib_macros"
-version = "0.17.1"
+version = "0.17.2"
 edition = "2021"
 description = "Superfast React fullstack framework"
 homepage = "https://tuono.dev"

examples/with-tailwind/.gitignore

@@ -0,0 +1,13 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.tuono
+out
+target

examples/with-tailwind/Cargo.toml

@@ -0,0 +1,11 @@
+[package]
+name = "with-tailwind"
+version = "0.0.1"
+edition = "2021"
+
+[[bin]]
+name = "tuono"
+path = ".tuono/main.rs"
+
+[dependencies]
+tuono_lib = { path = "../../crates/tuono_lib/" }

examples/with-tailwind/README.md

@@ -0,0 +1,9 @@
+# Tuono with Tailwind CSS starter
+
+This is the starter project for using Tuono and Tailwind CSS. To download it run in your terminal:
+
+```shell
+tuono new [NAME] --template with-tailwind
+```
+
+To learn about how to set this up yourself, read our [Tailwind CSS documentation page](https://tuono.dev/documentation/styles/tailwind-css).

examples/with-tailwind/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "with-tailwind",
+  "description": "Basic tuono application with tailwind",
+  "version": "0.0.1",
+  "dependencies": {
+    "@tailwindcss/vite": "^4.0.0-beta.9",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.0.0-beta.9",
+    "tuono": "link:../../packages/tuono"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
+    "typescript": "^5.6.3"
+  }
+}

examples/with-tailwind/src/routes/__layout.tsx

@@ -0,0 +1,18 @@
+import type { ReactNode, JSX } from 'react'
+
+interface RootLayoutProps {
+  children: ReactNode
+}
+
+export default function RootLayout({ children }: RootLayoutProps): JSX.Element {
+  return (
+    <html>
+      <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+      </head>
+      <body>
+        <main>{children}</main>
+      </body>
+    </html>
+  )
+}

examples/with-tailwind/src/routes/index.tsx

@@ -0,0 +1,26 @@
+import type { JSX } from 'react'
+
+export default function IndexPage(): JSX.Element {
+  return (
+    <div className="min-h-screen flex items-center justify-normal sm:justify-center p-4">
+      <div className="bg-white rounded-lg p-8 border-0 sm:border border-neutral-200 max-w-[unset] sm:max-w-md w-full">
+        <h1 className="text-4xl font-bold mb-4 text-center">
+          Welcome to Tuono
+        </h1>
+        <p className="text-gray-600 text-center mb-6">
+          This is a simple example of how to use Tailwind CSS utility classes in
+          Tuono.
+        </p>
+        <div className="flex flex-wrap gap-3 justify-center">
+          <a
+            href="https://tuono.dev"
+            target="_blank"
+            className="text-blue-600 underline hover:text-black flex items-center gap-1"
+          >
+            Tuono Documentation
+          </a>
+        </div>
+      </div>
+    </div>
+  )
+}

examples/with-tailwind/src/styles/global.css

@@ -0,0 +1 @@
+@import 'tailwindcss';

examples/with-tailwind/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src", "tuono.config.ts"]
+}

examples/with-tailwind/tuono.config.ts

@@ -0,0 +1,10 @@
+import type { TuonoConfig } from 'tuono/config'
+import tailwindcss from '@tailwindcss/vite'
+
+const config: TuonoConfig = {
+  vite: {
+    plugins: [tailwindcss()],
+  },
+}
+
+export default config

packages/tuono-fs-router-vite-plugin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tuono-fs-router-vite-plugin",
-  "version": "0.17.1",
+  "version": "0.17.2",
   "description": "Plugin for the tuono's file system router. Tuono is the react/rust fullstack framework",
   "homepage": "https://tuono.dev",
   "scripts": {

packages/tuono-router/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tuono-router",
-  "version": "0.17.1",
+  "version": "0.17.2",
   "description": "React routing component for the framework tuono. Tuono is the react/rust fullstack framework",
   "homepage": "https://tuono.dev",
   "scripts": {

packages/tuono/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tuono",
-  "version": "0.17.1",
+  "version": "0.17.2",
   "description": "Superfast React fullstack framework",
   "homepage": "https://tuono.dev",
   "scripts": {