@idio/frontend
Advanced tools
@idio/frontend is The Middleware To Serve Front-End JavaScript. It allows to set-up the modern front-end development environment where node_modules are served alongside compiled JSX code (without using Babel, see @a-la/jsx).
yarn add -E @idio/frontend
The package is available by importing its default function:
import frontend from '@idio/frontend'
async frontend(config: FrontendConfig,): MiddlewareThe middleware constructor will initialise the middleware function to serve files from the specified directory (frontend by default). The files will be updated on-the-fly to fix their imports to relative paths (e.g., preact will be transformed into /node_modules/preact/dist/preact.mjs). Any CSS styles will also be served using an injector script.
FrontendConfig: Options for the middleware.
| Name | Type | Description | Default |
|---|---|---|---|
| directory | string | The directory from which to serve files. | frontend |
| pragma | string | The pragma function to import. This enables to skip writing h at the beginning of each file. JSX will be transpiled to have h pragma, therefore to use React it's possible to do import { createElement: h } from 'react'. | import { h } from 'preact' |
The middleware can be used in any Koa application, or within the idio web server.
/* yarn example/ */
import core from '@idio/core'
import render from 'preact-render-to-string'
import frontend from '@idio/frontend'
(async () => {
const { url, router, app } = await core({
logger: { use: true },
_frontend: {
use: true,
middlewareConstructor(_, config) {
return frontend(config)
},
config: {
directory: 'example/frontend',
},
},
})
router.get('/', async (ctx) => {
ctx.body = '<!doctype html>\n' + render(
<html>
<head><title>Example</title></head>
<body>
Hello World
<script type="module" src="example/frontend"/>
</body>
</html>)
})
app.use(router.routes())
console.log('Started on %s', url)
})()
example/frontend
├── Component.jsx
├── index.jsx
└── style.css
The entry point
import { render } from 'preact'
import Component from './Component'
// linked node_modules are also resolved
import { Form, Input } from '@depack/form'
render(<Component test="Welcome"/>, document.body)
render(<Form>
<Input placeholder="hello world"/>
</Form>, document.body)
The component
import './style.css'
const Component = ({ test }) => {
return <div>{test}</div>
}
export default Component
The style
body {
background: lightcyan;
}
| © Art Deco for Idio 2019 |
|
| Tech Nation Visa Sucks |
|---|
1.4.0
node_modules entries.require.resolve to serve linked packages.FAQs
The Middleware To Serve Front-End JavaScript With JSX And Hot Reload.
The npm package @idio/frontend receives a total of 65 weekly downloads. As such, @idio/frontend popularity was classified as not popular.
We found that @idio/frontend demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.
Security News
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.