@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'
frontEnd(config=: FrontEndConfig,): !_goa.MiddlewareCreate a middleware to serve Front-End JavaScript, including JSX and node_modules.
FrontEndConfig (optional): Options for the middleware.The middleware constructor will initialise the middleware function to serve files from the specified directory or directories (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.
Files served with this middleware, either transpiler or plain JS, will be cached using their mtime. There is no need to compute md5 because this middleware is meant for the development purposes, whereas production code can be built with Depack.
FrontEndConfig: Options for the middleware.
| Name | Type | Description | Default |
|---|---|---|---|
| directory | (string | !Array<string>) | The directory or directories from which to serve files. | frontend |
| mount | string | The directory on which to mount. The dirname must be inside the mount. E.g., to serve example/src/index.js from /src/index.js, the mount is example/src and directory is src. | . |
| override | !Object<string, string> | Instead of resolving the package.json path for packages and looking up the module and main fields, paths can be passed manually in the override. E.g., { preact: '/node_modules/preact/src/preact.js' } will serve the source code of Preact instead of the resolved dist version. | - |
| 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' |
| log | (boolean | !Function) | Log to console when source files were patched. | false |
The middleware can be used in any _Koa application, or within the idio web server.
/* yarn example/ */
import idio from '@idio/idio'
import render from '@depack/render'
import frontend from '@idio/frontend'
(async () => {
const { url, app } = await idio({
// logger: { use: true },
_frontend: {
use: true,
middlewareConstructor(_, config) {
return frontend(config)
},
config: {
directory: 'example/frontend',
},
},
}, { port: process.env.PORT })
app.use(async (ctx) => {
ctx.body = render(<html>
<head><title>Example</title></head>
<body>
Hello World
<script type="module" src="example/frontend"/>
</body>
</html>, { addDoctype: true })
})
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;
}
GNU Affero General Public License v3.0
| © Art Deco for Idio 2019 |
|
| Tech Nation Visa Sucks |
|---|
typedefs.json to files.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.