New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details → →
Socket
Book a DemoSign in
Socket
Book a DemoSign in

adonis-preact

Package Overview
Dependencies
Maintainers
1
Versions
1
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

adonis-preact

Preact provider for AdonisJS 5

latest
Source
npmnpm
Version
1.0.0
Version published
Weekly downloads
2
Maintainers
1
Weekly downloads
 
Created
Source

Adonis Preact

NPM version build status npm download

Preact provider for AdonisJS.

Prerequisites

This provider requires AdonisJS v5 preview and won't work with AdonisJS v4.

Installation

npm i adonis-preact preact
node ace invoke adonis-preact

You'll also need to add "jsx": "react" to the compilerOptions of your TypeScript configuration.

Usage

Writing a layout component

adonis-preact doesn't create any HTML for you, so you will probably need to write a layout component that contains the base structure for your page:

// app/Components/layouts/Base.tsx

/** @jsx h */
import { h } from "preact";

export default function Base(props) {
  return (
    <html lang="en">
      <head>
        <meta charSet="UTF-8" />
        <title>My Adonis website</title>
      </head>
      <body>{props.children}</body>
    </html>
  );
}

Writing a page component

Now that you have a layout component, you can use it in any page component (the component that will be rendered from your controllers):

// app/Components/pages/Index.tsx

/** @jsx h */
import { h } from "preact";
import Base from '../layouts/Base';

export default function Index() {
  return (
    <Base>
      <div className="max-w-screen-xl mx-auto text-center py-16 px-8">
        <h2 className="font-extrabold tracking-tight text-gray-900 text-4xl leading-10">
          Hello from Adonis Preact!
        </h2>
      </div>
    </Base>
  );
}

Rendering a component

In a route handler

// start/routes.ts

import Route from '@ioc:Adonis/Core/Route';

import Index from 'App/Components/pages/Index';

Route.get('/', async ({ preact }) => preact.render(Index));

In a controller

// app/Controllers/Http/MyController.ts

import { HttpContextContract } from '@ioc:Adonis/Core/HttpContext';

import Index from 'App/Components/pages/Index';

export default class MyController {
  index({ preact }: HttpContextContract) {
    return preact.render(Index);
  }
}

Passing props to the rendered component

If the component you render expects props, they must be passed as a second argument to the render method:

// app/Components/pages/WithProps.tsx

/** @jsx h */
import { h } from "preact";
import Base from '../layouts/Base';

export default function WithProps(props: { name: string }) {
  return (
    <Base>
      <div className="max-w-screen-xl mx-auto text-center py-16 px-8">
        <h2 className="font-extrabold tracking-tight text-gray-900 text-4xl leading-10">
          Hello {props.name}!
        </h2>
      </div>
    </Base>
  );
}

// start/routes.ts

import Route from '@ioc:Adonis/Core/Route';

import Index from 'App/Components/pages/Index';

Route.get('/with-props', async ({ preact }) =>
  preact.render(WithProps, { name: 'my friend' }),
);

Accessing the Adonis context from a component

Adonis Preact provides a hook to access the Adonis context and some helpers from anywhere inside the component tree.

// app/Components/pages/WithContext.tsx

import { useAdonisContext } from '@ioc:Preact';
/** @jsx h */
import { h } from "preact";
import Base from '../layouts/Base';

export default function WithContext(props: { name: string }) {
  const { request } = useAdonisContext();

  return (
    <Base>
      <div className="max-w-screen-xl mx-auto text-center py-16 px-8">
        <h2 className="font-extrabold tracking-tight text-gray-900 text-4xl leading-10">
          Hello from {request.url()}!
        </h2>
      </div>
    </Base>
  );
}

// start/routes.ts

import Route from '@ioc:Adonis/Core/Route';

import WithContext from 'App/Components/pages/WithContext';

Route.get('*', async ({ preact }) => preact.render(WithContext));

License

  • Based on adonis-react package

MIT

Keywords

adonisjs
adonis
preact
provider

FAQs

Package last updated on 25 May 2022

Did you know?

Socket

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.

Install

Related posts

Attackers Are Hunting High-Impact Node.js Maintainers in a Coordinated Social Engineering Campaign

Security News

Attackers Are Hunting High-Impact Node.js Maintainers in a Coordinated Social Engineering Campaign

Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.

By Sarah Gooding  -  Apr 03, 2026