@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,): 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'
render(<Component test="Welcome"/>, 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.2.2
resolve-dependency.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
Newly introduced telemetry in devenv 1.4 sparked a backlash over privacy concerns, leading to the removal of its AI-powered feature after strong community pushback.
Security News
TC39 met in Seattle and advanced 9 JavaScript proposals, including three to Stage 4, introducing new features and enhancements for a future ECMAScript release.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.