@axel669/hephaestus v0.1.1

Hephaestus

Library for doing fast and dirty work with generating static content from svelte files on a server.

Installation

yarn add @axel669/hephaestus

Usage

Svelte Context Script

Hephaestus uses the <script context="module"> feature of Svelte to pass information to components when they are rendered (either on page load, or during the build proces).

A user should treat this script as a hook that runs when a page is loaded as a component, before it is rendered in any context.

The buildProps and get functions are optional exports for build-time and http GET requests to render, but post must be exported if the page needs to respond to a POST request.

<script context="module">
    //  buildProps runs during the build phase (never during dynamic renders
    //  in a server). The return value is an object that will be used as the
    //  props that are passed into the component when rendering it.
    export async function buildProps() {
        return {
            when: new Date()
        }
    }

    //  The get/post functions are used to respond to http requests to the page.
    //  Both functions can be optoinally async, and both take a single argument
    //  that is the Express Request object, unmodified.
    //  The return value should have a "status" property that is an http status
    //  code to use for the response, and either a "redirect" or "props"
    //  property.
    //  The "redirect" property should be a URL to redirect to, and the status
    //  property should say which kind of redirection it is (will default to
    //  302 if one is not given).
    //  The "props" property is an object that will be passed as the props to
    //  the component when it is rendered and sent.
    export async function get(req) {
        return {
            status: 200,
            props: {
                when: new Date(),
                who: req.query.user,
            }
        }
    }

    export function post(req) {
        return {
            status: 200,
            props: {
                name: req.body.name
            }
        }
    }
</script>

Express

import express from "express"
import heph from "@axel669/hephaestus"

const server = express()

server.use(
    await heph({
        source: "content",
        error: "$error.svelte",
        pass: /^api\//,
    })
)

Expess API

heph(config)

config {
    //  source is the directory where the svelte files are.
    //  Files named $layout are automatically wrapped around page files inside
    //  the given folder, and are nested in the order of the folders.
    //  files that are prefixed with "$" will not be loaded as pages, but can
    //  still be imported as components normally.
    "source": String,

    //  The filename of the error page (recommended to use $error.svelte).
    //  The error page does not have any layout applied to it, and is sent
    //  for any non 2xx response that is not a redirect.
    //  Optional
    "error?": String,

    //  Any route that matches the given regex will not be processed at all
    //  and handed to the next middleware function as normal for express.
    //  If a route is not passed on and is not found as a page, a 404 is
    //  returned even if a later piece of middleware might have it.
    //  Optional
    "pass?": RegExp,
}

Static Build

package.json

{
    "scripts": {
        "build-static": "heph config.mjs"
    }
}

CLI Config

.mjs file

export default {
    //  source is the directory where the svelte files are.
    //  Files named $layout are automatically wrapped around page files inside
    //  the given folder, and are nested in the order of the folders.
    //  files that are prefixed with "$" will not be loaded as pages, but can
    //  still be imported as components normally.
    "source": "content",

//  The filename of the error page (recommended to use $error.svelte).
//  The error page does not have any layout applied to it.
//  Optional
"error?": "$error.svelte",

//  The output folder for the static files.
"dest": "public",

//  Hooks that are run at specific times in the build process.
"hooks?": {
    //  Hook that is run at startup, before any files are loaded or
    //  processed.
    async init() {
    },
    //  Hook that is run after all files have been written to disk.
    async done() {
    }
},

//  Directory for static files that will be copied into the output folder
//  after building the html files.
//  Optional
"staticFiles?": "static"

}

## TODO
- possibly add more hooks around build events
Open to sugestions for features.