Implement a react parser to handle the presets

[ATLAS2002]

This is the current location of presets:

• packages
  • react
    • src
      • presets

        glare.ts
        index.ts
        tilt.ts

Problem:

And each of these preset files have a default function, that handles all the logic for that preset. But these are tightly coupled with the react environment. If we implement these effects in other frameworks then we have to rewrite the implementation code again.

Solution:

Instead what we can do is, move the logic to a separate preset directory packages/react/src/preset >> packages/preset under the packages. And for each framework there will be a dedicated parser, which will take the output generated by the preset file. And do react specific things, like adding refs. Currently the preset file takes the user's configuration and returns a resonate function which handles the implementation, also the ref of the component that it is controlling along with a title, that we pass to the ResonateContainer.

Important points:

• You can add the parser here: packages/react/src/core/parser.ts.
• The preset folder needs to be shifted directly under the packages/.
• Use typescript efficiently. Write readable and reusable types.
• Avoid using document.querySelector() or useRef() inside the preset file. Add a method inside the useAPI hook react/src/hooks/api.ts, and use it to access the element in the resonate function.
• Using best react practices will be highly appreciated (that includes not using querySelectors, that directly access the DOM elements).

Please add a comment under this issue, if there is anything that you think would be better to add or change. Also I will be more than happy to guide you through the details, but I encourage taking a look at the code first. If there are any doubts not related to this issue you can ask them in the discord channel of JWOC.

That's all for this issue, good luck everyone & Happy Coding! 😄

[vermaanurag1532]

i have done alot of projects in react i can resolve this issue for you

[vermaanurag1532]

please Assign it to me

[ATLAS2002]

please Assign it to me

Mention JWOC while asking for being assigned. And please tell me what is your approach for this problem. Since this is a vital issue in the core functionality of the project, I'd like to discuss into details first before I assign it. You can describe it here or we can have a conversation in the discord channel about it.

[Anushkabh]

@ATLAS2002 I WANT TO WORK ON THIS ISSUE UNDER JWOC.. KINDLY ASSIGN