https://github.com/glatek/nattramn

Universal web applications with Deno.
https://github.com/glatek/nattramn

deno prpl-pattern prpl-server web-components

Last synced: about 2 months ago
JSON representation

Universal web applications with Deno.

• Host: GitHub
• URL: https://github.com/glatek/nattramn
• Owner: Glatek
• Created: 2020-05-31T12:43:58.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-05-08T10:28:36.000Z (8 months ago)
• Last Synced: 2024-11-17T14:13:10.098Z (about 2 months ago)
• Topics: deno, prpl-pattern, prpl-server, web-components
• Language: TypeScript
• Homepage: https://deno.land/x/nattramn
• Size: 88.9 KB
• Stars: 0
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Nattramn

![](https://svgshare.com/i/Leh.svg)

A continuation of [Wext.js](https://github.com/Vufuzi/wext.js) for [Deno](https://deno.land/).

Allows for a simple way of creating universal web applications - partly following the [PRPL pattern](https://web.dev/apply-instant-loading-with-prpl/). Using web components for the client side logic.

## Usage

Import the Nattramn class and provide a config. Run with `--allow-read` and `--allow-net` flags in your server side code.

Include `` in your HTML template to be able to use the web component for the router and link.

For each page handler in the router config, a template is used as a stencil and will stamp the output of the handler method into  ``.

Use the `` web component for routes you wish to use soft navigation for. The route will be prefetched on hover similar to [instant.page](https://instant.page/).

### Example

```typescript

import Nattramn from 'https://deno.land/x/nattramn/index.ts';

const template = `

  

  

  

    

    

  

  

    

    

  

  

`;

const config = {

  server: {

    compression: true,

    serveStatic: 'public',

    minifyHTML: true

  },

  router: {

    pages: [

      {

        route: '/',

        template,

        handler: async () => ({

          body: `

            
Nattramn

            
Home

            


              Click link to go further!

              Read about me.

            

            `,

          head: 'Home - Nattramn'

        })

      },

      {

        route: '/about',

        template,

        handler: async () => ({

          body: `

            
Nattramn

            
About

            
The Nattramn only occationally shows himself[1] and is said to be ghost of a suicide[2].

            1) This library sends partial content on some requests.

            2) Node.js 🤡.

          `,

          head: 'About - Nattramn'

        })

      }

    ]

  }

};


const nattramn = new Nattramn(config);

await nattramn.startServer(5000);

```

## What does Nattramn do

Express-like functionally with handlers for route, with the big difference that when partial content is requested only the `` content of the next page is fetched and replaces the inner content of ``. There is also support for  `` in ``, but not any other tags in head - as they usually do not matter for client side changes.

## Other

Nattramn in currently in production at [podd.app](https://podd.app).

Logo attribution: https://commons.wikimedia.org/wiki/File:Year_Walk_(Nattravnen).PNG