sejori/peko

Featherweight apps on the edge, built with Web Standards 🐣⚡

peko's Issues

Remove Deno namespace references

Remove all references to the global Deno object everywhere in source code except tests.
This is so the library can be used in an engine-agnostic fashion.

`hostname` passed to `Server` does not apply to `stdServer`

The server created in the code below listens on http://0.0.0.0:7777 when it should listen on http://debug:7777.

const server = new Server({ hostname: 'debug' });

The parameter passed to the constructor is properly set on the class instance.
https://github.com/sebringrose/peko/blob/ff9f475f9c3101e8b21848899082c94a624236f7/server.ts#L31-L34
https://github.com/sebringrose/peko/blob/ff9f475f9c3101e8b21848899082c94a624236f7/server.ts#L39
However, this.hostname is not used when the stdServer is created.
https://github.com/sebringrose/peko/blob/ff9f475f9c3101e8b21848899082c94a624236f7/server.ts#L72-L76

Fix Vue Example

The Vue example fails with the following error:

Error: On-the-fly template compilation is not supported in the ESM build of @vue/server-renderer. All templates must be pre-compiled into render functions.

Full API Documentation

Pretty self-explantory. Should add comments to types etc in order to have these auto-generated.

General-Purpose HTML Rendering

As well as using the SSR handler for complete HTML page rendering it could also be used to serve chunks of HTML that can be loaded into a variety of web applications. Therefore it makes sense to restructure some of the code so that this usecase is more intuitive and we don't have to hack it into the existing system.

Renaming the "addPageRoute" function to "addHTMLRoute" and redefining the "PekoPageRouteData" type to be more general-purpose seem like the right course of action to me.

Use better dependency cdn for Preact example as reversehttp is slow

https://github.com/ije/esm.sh ?

Refactor cacher middleware to use Cache API

https://developer.mozilla.org/en-US/docs/Web/API/Cache

https://deno.land/[email protected]?s=Cache

Deno Deploy support

Is there a plan to support https://deno.com/deploy?

Helpers subdirectory

• getDeps
• add...Routes
• JWT validation & creation for auth
• Observable initialisation & listeners for datastore

Angular-like HTML Templating

Once the arguments of the HTML templating function have been agreed to remain fixed (at least mostly). We could use .html files with Angular-like {{value}} templating instead of describing html inside of a string in .js files.

The main benefit of this is that developers can have proper syntax highlighting of their HTML templates.

Test Middleware and Handler of Routes for common security pitfalls (devMode)

Extend addRoute functions to check supplied function bodies for security traps (e.g. header/script injection vulnerabilities)

File watch handler that wraps SSE to emit events when files change.

This can be added as a route in dev env to broadcast file changes to client. The intention is that the client can then either simply refresh or reload the module that changed. However, the latter get's complicated when we consider that modules might be bundled before being sent to client so knowing which modules appear in a bundle to trigger a reload would be a challenge.

Middleware Setup

Expand Peko Route type to include middleware function and rewrite serve logic in mod.ts to pass request through provided middleware before handler.

    {
        route: "/api/parrotFcn",
        method: "POST",
        middleware: (request: Request) => auth(request),
        handler: async (request: Request) => await new Response(`Parrot sqwarks: ${JSON.stringify(request.body)}`)
    }

auth() would likely be coming from Helper library or is defined by developer.

preflight - cache `GET` and `OPTIONS` requests separately

The cacher() middleware uses the same headers for both the preflight (OPTIONS) and main (GET) requests when the route is the same.

I think adding ctx.request.method to the key would fix the issue.

1. Is the current behaviour intentional?
2. Am I missing something?

https://github.com/sebringrose/peko/blob/836e830e1c2daa738b8d71a12bec999bd4c5ea6b/middleware/cacher.ts#L11

Replace imports from `deno/std` with engine agnostic `node:[library]` imports or custom helper utils

This may not be needed as some of the deno/std library may work in other JS/TS engines such as bun. Some testing needs to be done by first trying to run Peko in bun after #177 is completed.

calling next without `await` breaks cascade.

The cascade order is broken when calling next without awaiting it. It's very hard ot figure out exactly what's going wrong here but I've narrowed it down to the calling of next without await in a middleware.

You can see the response from a middleware/handler is lost and the cascade continues beyond what it should.

Eta-templating example broken as eta converts "<" to "&lt;"

Should be a simple fix with eta config or plugin.

https://eta.js.org/docs/learn/configuration

"TypeError: Cannot read property '__H' of undefined" in production bundles (preact/hooks is culprit)

If anyone has any thoughts on this issue they would be so appreciated. To reproduce simply run the default template with $ docker-compose up and navigate to the about page. You should see this appear as an error in the browser console or in the Deno process logs in terminal. I've tried using many different version of Preact and they all seem to have this issue.

Potential fix would be to try and swap out the Deno bundler for a custom bundler like Bundler or Denopack.

Related to: preactjs/preact#2690

Hot-Reload with file change emitter in ssrHandler (devMode)

Watch provided SSR module and it's local dependencies for changes then omit server-side event that triggers client to refresh/reload html.

Clients will need to utilise some JavaScript to subscribe to the Hot-Reload event. Simple and effective implementation would be to dynamically reimport modules and rerun hydration script. This can be made into an example.

ssrHandler - cache based on params as well as route string

now that params can be passed into render function caching on route string alone won't do as same route could return different content based on params from middleware

lots of readdir boilerplate in server / router files - util for that?

Peko/Store - Observable datastore connected to Server Events

I believe it makes sense to include a lightweight datastore/database wrapper in Peko. By default data would be stored in-memory but database-service connection functions can be provided to change this.

It would also be cool to make data updates trigger ServerEvents so that new data could be emitted to client apps in real-time applications.

server.addRoutes(router.routes) misses async routes

When starting a server with a separate router module it makes sense to use server.addRoutes(router.routes) but this means subsequent additions to the router's routes won't be seen by the server. Using server.routes = router.routes is a workaround but that ties all server routes to the router routes and will undo any previous server.addRoute() calls.

error from you example preact : deno version 1.24.3

i clone you example , but i get error
i use deno latest : Deno 1.24.3
d:\1. BELAJAR HTML\denoPRO\MAINAN\peko> deno run --allow-net --allow-env --allow-read --watch examples/preact/app.ts

and get error for Example preact folder

error message:
error: Uncaught (in promise) Error: The filename, directory name, or volume label syntax is incorrect. (os error 123), readdir '/D:/1.%20BELAJAR%20HTML/denoPRO/MAINAN/peko/examples/preact/src' for await (const dirEntry of Deno.readDir(path)) {

documented param `onError` missing on `listen` function

The onError callback is documented but not actually present in the listen function's parameters.

https://github.com/sebringrose/peko/blob/2fde0a154474dd909b05e90a9dff181f1370b575/server.ts#L63-L65

How do i set it?

Example Structure

Move preact example code ("example.js" file and "exampleSrc" dir) into a new "examples" directory so that future examples can be housed alongside. These files should be put within "examples/preact" and maybe renamed for clarity.

It would also be good to have a preact TypeScript example file as well as the existing JavaScript one to demonstrate using Peko and Preact with TypeScript.

Optional Bundling/Compiling

It has been suggested that relying solely on prefetching source modules in browser will lead to worse performance than bundling. I can see this being the case in larger projects with lots of separate module code to pull into the browser.

It may be appropriate to add an optional bundling parameter to the SSR handler in Peko so that a page's source module can bundled and stored within a bundles directory (e.g. stdout). This would then be referenced in the client hydration script instead of the source module.

We need to do a bit of research on how worthwhile this is in terms of performance. Thoughts?