Code Monkey home page Code Monkey logo

bun-appetit's Introduction

Appetit

A continuation of Nattramn for Bun.

Allows for a simple way of creating universal web applications - partly following the PRPL pattern. Using web components for the client side logic.

Usage

Import the Appetit class and provide a config.

Include <script type="module" src="/appetit-client.js"></script> 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 <appetit-router></appetit-router>.

Use the <appetit-link> web component for routes you wish to use soft navigation for. The route will be prefetched on hover similar to instant.page.

Example

import Appetit from "bun-appetit";

const template = `
  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <appetit-router></appetit-router>
    <script type="module" src="appetit-client.js"></script>
  </body>
  </html>
`;

const config = {
  server: {
    compression: true,
    serveStatic: "public",
    minifyHTML: true,
  },
  router: {
    pages: [
      {
        route: "/",
        template,
        handler: async () => ({
          body: `
            <h1>Appetit</h1>
            <h2>Home</h2>
            <p>
              Click link to go further!
              Read <appetit-link href="/about">about me.</appetit-link>
            </p>
            `,
          head: "<title>Home - Nattramn</title>",
        }),
      },
      {
        route: "/about",
        template,
        handler: async () => ({
          body: `
            <h1>Appetit</h1>
            <h2>About</h2>
            <p>The Nattramn only occationally shows himself[1] and is said to be ghost of a suicide[2].</p>
            <small>1) This library sends partial content on some requests.</small>
            <small>2) Node.js 🤡.</small>
          `,
          head: "<title>About - Nattramn</title>",
        }),
      },
    ],
  },
};

const appetit = new Appetit(config);

appetit.serve(5000);

What does Appetit do.

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

bun-appetit's People

Contributors

enjikaka avatar stonetwig avatar

Stargazers

André Philip avatar ⊣˚∆˚⊢ avatar Roberto Canha avatar Anonimus Programus avatar  avatar Brian Roach avatar

Watchers

André Philip avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.