https://github.com/lowlighter/mizu

🌊 Lightweight, intuitive, and customizable JS library that makes building powerful web apps a breeze!
https://github.com/lowlighter/mizu

csr customizable deno html minimal reactive ssg ssr template-engine typescript

Last synced: 1 day ago
JSON representation

🌊 Lightweight, intuitive, and customizable JS library that makes building powerful web apps a breeze!

• Host: GitHub
• URL: https://github.com/lowlighter/mizu
• Owner: lowlighter
• License: mit
• Created: 2024-10-08T02:11:28.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-12-20T23:19:57.000Z (about 1 month ago)
• Last Synced: 2025-01-20T10:51:42.805Z (9 days ago)
• Topics: csr, customizable, deno, html, minimal, reactive, ssg, ssr, template-engine, typescript
• Language: TypeScript
• Homepage: https://mizu.sh/
• Size: 2.68 MB
• Stars: 246
• Watchers: 2
• Forks: 3
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        




  

    

  

  

    

  

  

    

  

  

    

  





# Usage

## Client-side

Set up _**mizu.js**_ in your browser environment using one of two methods:

- Immediately Invoked Function Expression (IIFE)

- EcmaScript Module (ESM)

> [!NOTE]

>

> On the client-side...

>

> - **Rendering is explicit**, requiring the `*mizu` attribute to enable _**mizu.js**_ on a subtree.

> - **Reactivity is enabled**, so changes to contexts will trigger a re-render.

### IIFE _( `.js`)_

This setup automatically starts rendering the page once the script is loaded. It's the simplest way to get started but limited to the default configuration.

```html

```

### ESM _( `.mjs`)_

This setup requires you to import and start _**mizu.js**_ manually, allowing customization of the rendering process, such as setting the initial context and loading additional directives.

```html

  import Mizu from "https://mizu.sh/client.mjs"

  await Mizu.render(document.body, { context: { foo: "🌊 Yaa, mizu!" } })

```

## Server-side

To set up _**mizu.js**_ in a server environment, install it locally. _**mizu.js**_ packages are hosted on ![jsr.io/@mizu](https://jsr.io/@mizu).

> [!NOTE]

>

> On the server side...

>

> - **Rendering is implicit**, so the `*mizu` attribute is not required.

> - **Reactivity is disabled**, meaning changes to contexts are not tracked and will not trigger a re-render.

### Deno

Deno supports the `jsr:` specifier natively, allowing you to import _**mizu.js**_ directly.

```ts

import Mizu from "jsr:@mizu/render/server"

await Mizu.render(`
`, { context: { foo: "🌊 Yaa, mizu!" } })

```


Alternatively, add it to your project using the Deno CLI.

```bash

deno add jsr:@mizu/render

```

### Other runtimes (NodeJS, Bun, etc.)

Add _**mizu.js**_ to your project using the JSR npm compatibility layer.

```bash

# NodeJS

npx jsr add @mizu/render

```

```bash

# Bun

bunx jsr add @mizu/render

```

Once installed, use it in your project.

```ts

import Mizu from "@mizu/render/server"

await Mizu.render(`
`, { context: { foo: "🌊 Yaa, mizu!" } })

```


# 📜 License

```

MIT License

Copyright (c) 2024 Simon Lecoq

```

[`💕 Support mizu.js develoment`](https://github.com/sponsors/lowlighter)