Skip to content
Snippets Groups Projects

#3522999 writeup on theme limitations

1 unresolved thread

Closes #3522999

Merge request reports

Loading
Loading

Activity

Filter activity
  • Approvals
  • Assignees & reviewers
  • Comments (from bots)
  • Comments (from users)
  • Commits & branches
  • Edits
  • Labels
  • Lock status
  • Mentions
  • Merge request status
  • Tracking
359 359 ];
360 360 }
361 361 ```
362 ### 3.5 Limitations / Tradeoffs
363 We've already established this system makes it possible to render Drupal render arrays with React. This makes it possible to use existing Drupal core functionality as if it were rendered by Twig. As powerful as this is, this isn't a 100% seamless solution. There are some limitations to be aware of:
364 #### 3.5.1 Radix
365 Radix in the field widget React components might be the largest contributor to the complexity of this system. Radix components are structured differently than Drupal's default Twig templates. Some examples of this added complexity:
366 - A Radix text input component has no way to directly apply attributes to a native `<input>` element. Props are only added to input's wrapping div. This means Drupal JS might be looking for `input[attribute]` selectors that don't exist. To get around this, we assign a ref to the Radix component and use Vanilla JS to transfer the attributes to the input element after the component renders. Because there are scenarios where the ref must be passed to multiple components, it's not possible to use refs as functions - which means this approach necessitates additional `useEffect `hooks. This is all additional complexity solely due to the Radix-related deviation from Drupal's default twig templates.
  • Harumi Jang approved this merge request

    approved this merge request

  • Reads great!

    One part that confused me but maybe its a React thing I'm not aware of. But would appreciate a sentence or some words explaining what is meant by using ref as a function and what the alternative to that then is for passing it to multiple components (assuming multiple components here means going down the layers of wrapper drupal component for element -> xb component for element -> radix component for element )

    Edited by Harumi Jang
  • Ben Mullins added 28 commits

    added 28 commits

    • eb64166e...936ee9e7 - 25 commits from branch project:0.x
    • 13caa2fa - Merge remote-tracking branch 'origin/0.x' into 3522999-document-use-cases
    • c024fbde - fb
    • 63facd66 - Merge remote-tracking branch 'origin/0.x' into 3522999-document-use-cases

    Compare with previous version

  • Harumi Jang
  • Harumi Jang
  • Harumi Jang added 1 commit

    added 1 commit

    • 0324d5ee - Apply 2 suggestion(s) to 1 file(s)

    Compare with previous version

  • Harumi Jang
  • Harumi Jang added 1 commit

    added 1 commit

    Compare with previous version

  • Harumi Jang added 8 commits

    added 8 commits

    Compare with previous version

  • merged

  • Please register or sign in to reply
    Loading