adonis-preact

v1.0.0

Published

2 years ago

Preact provider for AdonisJS 5

Downloads

0High
0Medium
0Low

donswayo

adonisjs adonis preact provider

Adonis Preact

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