Resolve #3526297 "Add way to view fetch results inside code editor"
- Makes the following libraries available to code components:
- Extends the JSONAPI client so it's auto configured with a base URL, serializer, and cache
- Displays the data fetch results from SWR in "Data Fetch" tab using json-react-tree
- Enables React compatibility mode in Astro so code components can use React features
- Maps all imported libraries to known versions
Follow Ups
- Write tests/add to a recipe - see https://www.drupal.org/project/experience_builder/issues/3530346
Testing Instructions
- Check out this branch
- Run
npm run buildand clear cache - Run the following:
drush site:install minimal
drush recipe modules/contrib/experience_builder/tests/fixtures/recipes/base
drush pm:install experience_builder
drush php-eval "Drupal\experience_builder\Entity\Page::create(['title' => 'Homepage', 'type' => 'xb_page', 'path' => ['alias' => '/homepage', 'langcode' => 'en']])->save();"
composer require drupal/jsonapi_menu_items
drush pm:enable jsonapi jsonapi_menu_items menu_ui
- Login, go to /admin/structure/menu/manage/main and create a menu with nesting
- Go to
/homepageand then click "Edit" - Click + (Add) on the left hand menu, "+ Add new", give the component a name and click Add
- In the experience_builder module source code go to
tests/fixtures/code_components/menus - Copy the example into the editor and verify you get a working drop-down menu
- Verify the menu data fetched from JSON:API is shown in the Data Fetch pane
- Save the code component, and drag it from the components list to the content area of a page and verify the menu is rendered as expected
Edited by Sally Young
