Clojurians Log v2

Wrap [:div ...] in reagent/as-element.

Depends what you mean by components; if "mini SPAs embedded in page", yes for reagent, and yes with limitations for re-frame (limitations because global app-db); if "DOM attached behavior a-la StimulusJS or Vue.js" no.

Hello everyone, I'm trying to get https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/getting-started.md#signing-a-user-in (azure auth) to work with Reagent. How can I convert this React hook to something Reagent can understand? Is it possible? I think I have the initialization working correctly, and the Authenticated/Unauthenticated templates seem to render as expected, but I can't seem to grasp how to translate the code I have commented below into something Reagent understands (the raw React code is from the Github example I have linked above):

import React from 'react';
import { useMsalAuthentication, AuthenticatedTemplate, UnauthenticatedTemplate } from "@azure/msal-react";

export function App() {
const {login, result, error} = useMsalAuthentication("popup"); // <-- I can't seem to convert this into usable CLJS code

return (
        <React.Fragment>
        <p>Anyone can see this paragraph.</p>
        <AuthenticatedTemplate>
        <p>At least one account is signed in!</p>
        </AuthenticatedTemplate>
        <UnauthenticatedTemplate>
        <p>No users are signed in!</p>
        </UnauthenticatedTemplate>
        </React.Fragment>
        );
}

You will have to use a function component for that. Read this section and the next one: https://github.com/reagent-project/reagent/blob/master/doc/ReactFeatures.md#function-components

Thank you for pointing me in the right direction @p-himik, I will check it out. 👍

https://github.com/reagent-project/reagent/blob/master/doc/ReagentCompiler.md#functional-components-implementation

This new "fun comp" thing allows use of hooks

Thanks, that's good to know. Yes I was aiming for the Vue.js style of sprinkling in components.

hi, suppose I have a super small application, it is a reagent component that shows a button and send an ajax request when clicked. The question is, can I have the same application multiple times included in the same html page?

Yes.

Thanks @p-himik, sorry, I forget to mention that reframe is also involved, my fears are because of the app-state, anyway I’m going to give it a try is not that hard, I just wanted to know before

You don't really need re-frame in a "super small application with a button that sends a request". And having re-frame there complicates things. You either have to dance around your state much more or straight up resolve to iframes.

So I have this widget component which returns a function so that local state works, but when I want to problematically render several widget components in my root component I get an error "Functions are not valid as a React child" because obviously it's returning a function. I'm not sure how to fix this issue while preserving component local state in reagent.

Don't use (widget ...), use [widget ...]. Apart from that, wrap it in a call to reagent.core/as-element.

Thanks that worked, also what's the difference between calling the component with parnes vs brackets?

It's all in the documentation: https://cljdoc.org/d/reagent/reagent/1.0.0-rc1/doc/tutorials/using-square-brackets-instead-of-parentheses-

@mikethompson Do you remember this Appendix 2 here on [] vs () docs: https://github.com/reagent-project/reagent/blob/master/doc/UsingSquareBracketsInsteadOfParens.md#appendix-2 This might be one of the docs copied from re-frame wiki. I think something is wrong in the example that should show some problem, it is perfectly valid code, no error there. I could just remove this, but if we can remember the original idea I could fix the example.