Hey, when I try to npm i in the example directory, npm is not happy:

λ  npm i
npm ERR! code ETARGET
npm ERR! notarget No matching version found for @microeinhundert/[email protected].
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

Prerequisites

We do our best to reply to all the issues on time. If you will follow the given guidelines, the turn around time will be faster.

• Ensure the issue isn't already reported.

Delete the above section and the instructions in the sections below before submitting

Description

Hi, I've been trying to use radonis to get react and adonisjs together, and I've run into a problem. I created a new project to learn how to use the lib and followed the installation step by step and saw the example repository. I'm now trying to interact with a button and it updates the page with the new useState information from react, but I click on the button and nothing happens.

import { island } from '@microeinhundert/radonis'
import { useState } from 'react'

function SomeInteractiveIsland () {
  const [count, setCount] = useState(0)

  function handleClick () {
    setCount(count + 1)
  }

  return <button type="button" onClick={handleClick}>Click me {count}</button>
}

// The first argument should be a unique name for the island
export default island('SomeInteractiveIsland', SomeInteractiveIsland)

This is the code I'm trying to make, and on the main page it looks like this

import { useI18n } from '@microeinhundert/radonis'
import { BaseLayout } from 'Layouts/Base'
import { HydrationRoot } from '@microeinhundert/radonis'
import SomeInteractiveIsland from 'Components/SomeInteractiveIsland.island'

function Index () {
  const { formatMessage$ } = useI18n()

  const messages = {
    title: formatMessage$('home.index.title'),
  }

  return (
    <BaseLayout>
      <h1>{messages.title}</h1>
      <p>This is an empty view.</p>
      <HydrationRoot>
        <SomeInteractiveIsland />
      </HydrationRoot>
    </BaseLayout>
  )
}

export { Index }

I don't know if I need to do some more configuration, but I also tested it with another lib and it didn't work either, what do I do?

Package Version

"@adonisjs/core": "^5.9.0",
"@adonisjs/repl": "^3.1.11",
"@adonisjs/session": "^6.4.0",
"@adonisjs/shield": "^7.1.0",
"@adonisjs/view": "^6.2.0",
"@microeinhundert/radonis": "^5.0.0",
"@microeinhundert/radonis-server": "^5.0.0",
"@microeinhundert/radonis-unocss": "^5.0.0",
"proxy-addr": "^2.0.7",
"reflect-metadata": "^0.1.13",
"source-map-support": "^0.5.21"

Error Message & Stack Trace

Relevant Information

Images

Errors should be more helpful and guide the user to the solution.
Error handling should also be done with Exceptions like in the AdonisJS core.

Description

I've setup the application docker config according to the Adonis JS documentation, and when running the code all islands are logging to the server. When I run the yarn dev, the islands log to the browser.

First of all, thank you for your efforts with this amazing project 🎉 I think it's a considerable addition to the AdonisJS ecosystem and I'm really enjoying working with it.

I'm still learning how things work with Radonis. I copied the "old-school way" example from the Forms section in the docs, but I get a TypeScript error in Visual Studio Code on the action prop:

import { useFlashMessages, Form } from '@microeinhundert/radonis'

export default function Login({}: ILoginProps) {
  const { tx } = useTwind()

    return (
        <Form
              method="post"
              action="AuthController.login" // 👈 this prop
              reloadDocument
        >
            ...
        </Form>
    )
}

The route is registered:

Route.post('/auth/login', 'AuthController.login')

P.S. A quick suggestion—I think it would be useful if the docs could have a somewhat more gentle introduction to the Hydration concept. I know it's not a Radonis-specific concept but having never used hydration before, I'm not really sure where to apply it.

Description

Hello, I've been enjoying using radonis and thank you for fixing that earlier error. Now I'm stuck at a stage where I can't proceed without help, I've tried researching and everything but since it's something specific, I thought it best to ask here.

I'm trying to make a system to change the theme of the entire site, from what I've seen I can only use useState and useEffect inside the islands, so how would I do it in this case, since the Base is on top of everything? And couldn't she be an island?

I even found it strange, but it seems that the console.log is not returning anything, but it still sets the cookie

Package Version

Error Message & Stack Trace

Relevant Information

I'm building a multi-tenant application, where each tenant has a subdomain. I use a route group for this.

The routes look like this:

Route.group(() => {
  Route.get('/auth/login', 'AuthController.showLogin')
  Route.post('/auth/login', 'AuthController.login')
})
  .domain(`:tenant.${Env.get('BASE_TENANT_SUBDOMAIN')}`)
  //.middleware(['tenant'])

I'm using the form component:

<Form method="post" action="AuthController.login" reloadDocument>
    ...
</Form>

When I visit http://<tenant>.dev.local/auth/login, I get this error in the browser:

Error
[Radonis] Cannot find route for "AuthController.login"
node_modules/@microeinhundert/radonis-shared/build/cjs/src/utils.js:26:11                  invariant
node_modules/@microeinhundert/radonis-hooks/build/cjs/src/hooks/useUrlBuilder.js:28:40                  findRouteOrFail
node_modules/@microeinhundert/radonis-hooks/build/cjs/src/hooks/useUrlBuilder.js:88:23                  Object.make
node_modules/@microeinhundert/radonis-form/build/cjs/src/hooks/useForm.js:46:43                  useForm
node_modules/@microeinhundert/radonis-form/build/cjs/src/components/Form.js:19:40                  Form
node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5662:16                  renderWithHooks

I also tried action="/auth/login" but got the same error. Looking at the types, it seems like only the route identifier is applicable here.

If I comment out the form, it works as expected.

Looking at the stack trace, then referring to findRouteOrFail:

It seems the routes are coming from the manifest, so I will include that here:

{
  "entry.client": {
    "type": "entry",
    "path": "/radonis/entry.client.js",
    "flashMessages": [],
    "messages": [],
    "routes": [
      "action",
      "formAction",
      "to",
      "auto"
    ],
    "imports": []
  }
}

(it's the same regardless of whether I uncomment .domain() or not)

At the moment, I'm still figuring out how things work, but would love to start contributing once I'm a bit more familiar with the codebase.

Description

With this not using webpack and I'm not sure how everything is being built with esbuild, how would one go about adding Tailwind w/ Daisy UI? For the life of me, I can't figure it out

Package Version

5.0.4

Error Message & Stack Trace

Relevant Information

I'm trying to protect a signup endpoint with hCaptcha (the invisible type, which appears when the submit button is pressed).

I need to use a ref to programmatically submit the form when the response has been received from hCaptcha.

Here is the code (with some parts redacted for brevity):

function SignupForm({}: SignupFormProps) {
  const [captchaResponse, setCaptchaResponse] = useState<string | null>(null)
  const { formatMessage } = useI18n()
  const formRef = useRef<HTMLFormElement>()
  const captchaRef = useRef<HCaptcha>(null)

  useEffect(() => {
    alert('captchaResponse state changed') // 👈 it reaches here
    if (captchaResponse && formRef?.current) {
      alert('submitting the form...') // 👈 but not here
      formRef.current.submit()
    }
  }, [captchaResponse])

  return (
    <Form
      noValidate
      method="post"
      action="UsersController.create"
      ref={formRef} // 👈 the ref is assigned to the form
      onSubmit={(e) => {
        e.preventDefault()
        if (captchaRef?.current) {
          captchaRef.current.execute() // 👈 this shows the captcha when the submit button is pressed
        }
      }}
    >

         {/* Form goes here */}

          <HCaptcha
            sitekey={process.env.PUBLIC_HCAPTCHA_SITE_KEY!}
            size="invisible"
            onVerify={(token) => setCaptchaResponse(token)}
            ref={captchaRef}
          />
        </div>
      </div>
    </Form>
  )
}

export default hydratable('SignupForm', SignupForm)

And here is the error I get in the console:

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
Check the render method of `SignupForm`.

The formRef is undefined:

console.log(formRef.current)
undefined

Is there a possible workaround for this?

I followed the migration steps but when I start my app, I get this error:

> [email protected] dev
> concurrently 'npm:dev:*'

[dev:*client] 
[dev:*client] > [email protected] dev:client
[dev:*client] > node ace build:client --watch './resources/!(views)/**/*.ts(x)?'
[dev:*client] 
[dev:*server] 
[dev:*server] > [email protected] dev:server
[dev:*server] > node ace serve --watch
[dev:*server] 
[dev:*server] [ info ]  building project...
[dev:*server] [ info ]  starting http server...
[dev:*client]
[dev:*client]   BuildException 
[dev:*client] 
[dev:*client]  E_CANNOT_BUILD: Cannot build the Radonis client bundle
[dev:*client] 
[dev:*client] 
[dev:*client]    1  Function.cannotBuild
[dev:*client]      /home/joel/diagram/node_modules/@microeinhundert/radonis-build/src/exceptions/buildException.ts:28
[dev:*client] 
[dev:*client]    2  build
[dev:*client]      /home/joel/diagram/node_modules/@microeinhundert/radonis-build/src/build.ts:165
[dev:*client] 
[dev:*client]    3  BuildClient.#buildClient
[dev:*client]      /home/joel/diagram/node_modules/@microeinhundert/radonis-server/commands/BuildClient.ts:114
[dev:*client] 
[dev:*client]    4  BuildClient.run
[dev:*client]      /home/joel/diagram/node_modules/@microeinhundert/radonis-server/commands/BuildClient.ts:142
[dev:*client] 
[dev:*client]    5  BuildClient.exec
[dev:*client]      /home/joel/diagram/node_modules/@adonisjs/ace/build/src/BaseCommand/index.js:157
[dev:*client] 
[dev:*client]    6  Kernel.handle
[dev:*client]      /home/joel/diagram/node_modules/@adonisjs/ace/build/src/Kernel/index.js:553
[dev:*client] 
[dev:*client]    7  App.handle
[dev:*client]      /home/joel/diagram/node_modules/@adonisjs/core/build/src/Ignitor/Ace/App/index.js:226
[dev:*client] 
[dev:*client]    8  Ace.handle
[dev:*client]      /home/joel/diagram/node_modules/@adonisjs/core/build/src/Ignitor/Ace/index.js:33
[dev:*client] 
[dev:*client] npm run dev:client exited with code 1
[dev:*server] [17:28:03.348] INFO (diagram/85715): started server on 0.0.0.0:3333
[dev:*server] [ info ]  watching file system for changes
[dev:*server] ╭─────────────────────────────────────────────────╮
[dev:*server] │                                                 │
[dev:*server] │    Server address: http://127.0.0.1:3333        │
[dev:*server] │    Watching filesystem for changes: YES         │
[dev:*server] │                                                 │
[dev:*server] ╰─────────────────────────────────────────────────╯
^C[dev:*server] npm run dev:server exited with code SIGINT

There isn't really much else in the way of context.

I am upgrading from 1.11.4.

Does every hydratable descendant of a HydrationRoot need to be wrapped in hydratable() or just the first child?