passing-notes-ui
A middleware for delivering code to the browser during development
It leverages native support for ES modules to avoid the overhead in writing large bundles. npm packages are compiled to separate, standalone ESM files and cached by the browser. Application code is built and bundled incrementally.
It uses esbuild under the hood and has limited support for non-standard JavaScript features.
Usage
Install passing-notes-ui by running:
yarn add passing-notes-uiGiven a directory (say, ./ui) containing HTML, CSS, and JS files, we provide
several ways to serve them over HTTP.
To quickly start a server that does nothing aside from serving those files:
yarn serve-ui ./uiTo add this functionality as a middleware to an existing app:
import {compose, Logger} from 'passing-notes'
import serveUi from 'passing-notes-ui'
const logger = new Logger()
export default compose(
serveUi({path: './ui', logger}),
() => () => ({status: 404})
)serveUi will compile any JavaScript (.js) files requested by the browser,
bundling project source code into a single file. Any npm packages imported via
bare specifiers (e.g. 'react') are externalized and bundled separately and
ultimately imported via HTTP:
import React from '/npm/react'JavaScript, CSS, and other files from npm packages can be requested directly via URL:
<link href="/npm/the-new-css-reset/css/reset.css" rel="stylesheet">Currently, serveUi compiles as needed on each request. In the future, it may
instead compile only when files change.
Optionally, "virtual files" can be specified.
import {compose, Logger} from 'passing-notes'
import serveUi from 'passing-notes-ui'
const logger = new Logger()
export default compose(
serveUi({
logger,
path: './ui',
files: {
'index.html': `
<!doctype html>
<script type="module" src="/index.js"></script>
`,
'index.js': `
import text from './text.js'
document.body.textContent = text
`
}
}),
() => () => ({status: 404})
)These virtual files are compiled and served as if they were written directly to the file system at the given paths.