https://github.com/voorjaar/fresh_mtos

A plugin for Deno Fresh that turns your site into a single page application.
https://github.com/voorjaar/fresh_mtos

deno deno-module denoland fresh mtos spa

Last synced: about 2 months ago
JSON representation

A plugin for Deno Fresh that turns your site into a single page application.

• Host: GitHub
• URL: https://github.com/voorjaar/fresh_mtos
• Owner: voorjaar
• License: mit
• Created: 2022-11-15T03:56:07.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2022-11-15T06:10:48.000Z (about 2 years ago)
• Last Synced: 2024-12-17T16:13:43.984Z (about 2 months ago)
• Topics: deno, deno-module, denoland, fresh, mtos, spa
• Language: TypeScript
• Homepage: https://deno.land/x/fresh_mtos
• Size: 65.4 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# fresh_mtos

A plugin for [Deno Fresh](https://fresh.deno.dev) that turns your site into a

single page application.

> Checkout [this page](https://fresh-mtos.deno.dev/) for a live demo.

## What it does?

The plugin adds [mtos](https://github.com/voorjaar/mtos) to your website.

> You still serve the static HTML files, but the user experience is the same as

> SPA with incremental requests via fetch API on the client side. And you can

> also add transition animations, progress bar, etc.

## Installation

1. [Create a fresh project](https://fresh.deno.dev/docs/getting-started/create-a-project)

   if you haven't done so.

2. Add `fresh_mtos` to your `import_map.json`

   ```diff

   {

   "imports": {

       "$fresh/": "https://deno.land/x/[email protected]/",

   +   "$fresh_mtos/": "https://deno.land/x/fresh_mtos/",

       "$std/": "https://deno.land/[email protected]/",

       "$gfm": "https://deno.land/x/[email protected]/mod.ts",

       "preact": "https://esm.sh/[email protected]",

       "preact/": "https://esm.sh/[email protected]/",

       "preact-render-to-string": "https://esm.sh/*[email protected]",

       "@preact/signals": "https://esm.sh/*@preact/[email protected]",

       "@preact/signals-core": "https://esm.sh/*@preact/[email protected]",

       "twind": "https://esm.sh/[email protected]",

       "twind/": "https://esm.sh/[email protected]/"

   }

   }

   ```

3. Create a configuration file called `mtos.config.ts`.

   ```ts

   import type { Options } from "$fresh_mtos/mod.ts";

   export default {

     selfURL: import.meta.url,

   } as Options;

   ```

   You can also use the `defineConfig` API.

   ```ts

   import { defineConfig } from "$fresh_mtos/mod.ts";

   export default defineConfig({

     selfURL: import.meta.url,

   });

   ```

4. Add the plugin to your `main.ts`

   ```ts

   /// 

   /// 

   /// 

   /// 

   /// 

   import { start } from "$fresh/server.ts";

   import manifest from "./fresh.gen.ts";

   import twindPlugin from "$fresh/plugins/twind.ts";

   import twindConfig from "./twind.config.ts";

   import mtosConfig from "./mtos.config.ts";

   import mtosPlugin from "$fresh_mtos/mod.ts";

   await start(manifest, {

     plugins: [

       twindPlugin(twindConfig),

       mtosPlugin(mtosConfig),

     ],

   });

   ```

## Options

The below options can be used to setup [mtos](https://github.com/voorjaar/mtos).

```ts

interface Options {

  /** Eval Script Element When Update, Default is false */

  eval?: boolean;

  /** Fetch Options */

  fetch?: RequestInit;

  /** Auto Scroll Behavior */

  scroll?: {

    enable?: boolean;

    left?: number;

    top?: number;

    behavior?: "auto" | "smooth";

  };

  /** Fetch Hooks */

  onMatch: (a: HTMLAnchorElement) => boolean;

  onFetchStart?(href: string): boolean | undefined | void;

  onFetchEnd?: (html: string, href: string) => string | undefined | void;

  onFetchError?: (error: Error, href: string) => void;

  /** Render Hooks */

  onBeforePageRendered?: (href: string) => void;

  onPageRendered?: (href: string) => void;

  /** Dom Patch Hooks */

  getNodeKey?: (node: Node) => any;

  onBeforeNodeAdded?: (node: Node) => Node;

  onNodeAdded?: (node: Node) => Node;

  onBeforeElUpdated?: (fromEl: HTMLElement, toEl: HTMLElement) => boolean;

  onElUpdated?: (el: HTMLElement) => void;

  onBeforeNodeDiscarded?: (node: Node) => boolean;

  onNodeDiscarded?: (node: Node) => void;

  onBeforeElChildrenUpdated?: (

    fromEl: HTMLElement,

    toEl: HTMLElement,

  ) => boolean;

}

```

## License

[MIT](https://github.com/voorjaar/fresh_mtos/blob/main/LICENSE)

Copyright (c) 2022, Raven Satir