🇺🇸United States @hooroomoo

Account created on 14 September 2021, over 3 years ago
  • Software Engineer at Acquia 
#

Merge Requests

More

Recent comments

🇺🇸United States hooroomoo

Thanks for working on this @atul_ghate, I just changed your css of overflow-x: auto to instead specify horizontal scrolling using Radix's scrollbar API https://www.radix-ui.com/themes/docs/components/scroll-area which we already had in place for vertical scrolling.

I also added a whitespace: nowrap so the text doesn't break into the next line and remains in one line. Also the hover and selected background color changes also now take up the width of the entire horizontal scroll.

🇺🇸United States hooroomoo

hooroomoo made their first commit to this issue’s fork.

🇺🇸United States hooroomoo

How to test:

1. Run npm install and drush cr, then npm run drupaldev

2. Add the astro bundled files that are in the /ui/src/components/code-editor/astro-files-see-read-me/ directory to
/sites/default/files/xb/astro/. You do not need to add MenuBlock.js, MenuBlock.css, MenuContent.js, MenuContent.css since this MR can generate and add that for you by going through the below steps. I just included them in case there's trouble with the below steps. But if you want to skip steps 3-4, feel free to add those files too.

2. Drag a main navigation to your canvas from the Library tab in the primary panel. Or you can create your own menu to test in Drupal and drag that in.

3. Go to the tab in the primary menu and click Menu Block and the code editor should open. Click the Upload button in the top bar to add the MenuBlock.js and MenuBlock.css files to your /sites/default/files/xb/astro.

4. Do the same thing for MenuContent in to add MenuContent.js and MenuContent.css to your /sites/default/files/xb/astro.

5. Close the editor by clicking the Menu item in or refreshing (the routing/closing of the menu is not great right now) and you should see your menu in the canvas using the block--system-menu-block--foo.html.twig and menu--foo.html.

Troubleshooting

If you don't see your menus using are *--foo.html.twig templates or you don't see what you expect,

In the Developer Tools in Chrome, in the Console tab there is a dropdown in that bar that allows you to select the frame context in which the console will operate. Select the iframe of the canvas for the console and see if there are any errors. An example error could be the path to the component files and the astro bundled files that the is pointing to might be different on your machine. Or check the network tab to see if there are any 404s for the component files and the astro bundled files it is requesting and check if the path is correct.

Known issue, I wasn't able to look into yet

1. Didn't have enough time to get the preview working for the code editor so that's not working right now.

2. Passing in a React element like like h1 tag with {drupalProps.label} inside to the Title errors out. It looks to be a compatibility issue between how Astro's hydration script handles radix's Slot component.
"[astro-island] Error hydrating /src/components/App.jsx Error: Invalid type passed to createElement():

🇺🇸United States hooroomoo

Ok found from comment under experience_builder_library_info_alter and previous MRs it's because of Drupal.ajax bringing in Drupal.message that brings in Olivero assets but because the hooks run after a cache clear the current workaround that unsets the drupal.message library isn't getting triggered if a page that adds the library is visited first?

🇺🇸United States hooroomoo

Thanks q0rban, looks like the first merge failed because of e2e tests failing. Marking to needs work.

🇺🇸United States hooroomoo

Olivero(?) styles bleeding through but yay Preact component using Tailwind css being rendered in the Preview canvas.

🇺🇸United States hooroomoo

🐛 Overlay / annotations get misplaced occasionally Active Seeing this issue sometimes after inserting a new component/section using the Add section/add component button. Not expecting a fix in this MR but just putting it on people's radar again.

🇺🇸United States hooroomoo

hooroomoo made their first commit to this issue’s fork.

🇺🇸United States hooroomoo

Steps to test SimplePreactCounter to the preview canvas:

1. Add Astro bundled files located in /ui/components/editor/astro-bundles to /sites/default/files/xb/astro

2. In the XB UI, go to Library Tab and click Simple Preact Counter and open it in editor.

3. Click the blue Upload button in the top bar. This button will write the SWC-compiled code to your /sites/default/files/xb/astro with some manual changes with the imports. @see JSComponentUploadController.php for a comment

4. Refresh XB to close the editor since we don't have a a button to close it yet, and under the Library's component's tab you should see Simple Preact Counter that you can drag into the preview canvas. It should be hydrated but with the current implementation of the preview canvas you can't interact with it but you can go into your console and document.querySelector(xxxxx).click(); to test the counter

The code in JSComponentUploadController.php to handle the SWC-compiled file will need to be updated to handle different imports
since imports are currently hard-coded and based on a conversation with @effulgentsia ideally we could just rely on the Astro-bundled Preact packages instead of also bringing in Preact CDN through importmap.

Another important note, the component currently requires an export default to work with the astro bundles which is why the SimplePreactCounter uses the inline export default function syntax.

🇺🇸United States hooroomoo

Ok my update: passing in the SWC compiled code into an astro island looks like it is working. There is still a lot of cleaning up to do. The editor is not connected to the SDC wrapper/astro island yet, I just used a copy and paste of the compiled SWC code for a simple counter which lives in Counter_SWC.js in the gist linked below.

Currently all the files, including those relevant to the renderer-url attribute of the astro island live in my /sites/default/xb/astro and that is what the code is pointing to but that should change in the future. For now, I created a gist with those files if anyone wants to test it.

https://gist.github.com/harumijang/86ed1c6148690404d02ef322d0eddd37

One thing I am not sure about is in Counter_SWC .js, is where I am supposed to be calling the render function and to what part of the document I should inject it into.

🇺🇸United States hooroomoo

Renaming title to emphasize it is frontend only

🇺🇸United States hooroomoo

Thanks all!

Created follow-up to integrate the frontend with the backend, after the backend patterns work is done:
[PP-1] Integrate saving sections with the backend Postponed

🇺🇸United States hooroomoo

Looks good to me, just one question about LayoutNode type vs. RootNode type.

🇺🇸United States hooroomoo

hooroomoo changed the visibility of the branch 3459229-save-section to active.

🇺🇸United States hooroomoo

hooroomoo changed the visibility of the branch 3459229-save-section to hidden.

🇺🇸United States hooroomoo

hooroomoo made their first commit to this issue’s fork.

🇺🇸United States hooroomoo

Works great! Works between tabs and also from layers menu too. Just a couple of comments

🇺🇸United States hooroomoo

Updated issue summary with the steps i used to reproduce.

🇺🇸United States hooroomoo

I was able to reproduce the problem on the MR. Attached video

🇺🇸United States hooroomoo

A lot of the cypress eslint errors were for this rule: cypress/unsafe-to-chain-command. https://github.com/cypress-io/eslint-plugin-cypress/blob/master/docs/rules/unsafe-to-chain-command.md

This was good reading since the incorrect way seems very intuitive to me but turns out it's not recommended! :
https://docs.cypress.io/app/core-concepts/retry-ability#Actions-should-be-at-the-end-of-chains-not-the-middle

🇺🇸United States hooroomoo

Un-assigning myself for now in case anyone else wants to pick it up, get changes from 0.x first

🇺🇸United States hooroomoo

Talked to @jessebaker and he said i can take this so re-assigning it to myself

🇺🇸United States hooroomoo

Postponing this to after 🌱 [Proposal] A different approach to the iFrame preview interactions Active is in since that touches many many Cypress files and would make sense to fix the errors the eslint-cypress plugin surfaces after that's in to avoid extra work.

🇺🇸United States hooroomoo

Currently the issue is in the MR if a user copies and pastes within the iframe they can't do it consecutively because the it seems like the iframe doesn't receive the key events after the first time. So either the iframe would need to get focused again or the parent element outside the iframe needs the key listeners for copy and paste.

But since 🌱 [Proposal] A different approach to the iFrame preview interactions Active gets rid of cross communication between iframe and the parent, I kinda want to wait till that's in since the way this is currently implemented will need to change anyway.

🇺🇸United States hooroomoo

There should also be copy and paste functionality added to the layers menu in a follow-up

🇺🇸United States hooroomoo

Do drupal issues not allow video tags? Wasn't able to attach the demo to the issue summary but see #39 📌 [exploratory] StackBlitz PoC Active

🇺🇸United States hooroomoo

Will try to look at the dragging issue tom

🇺🇸United States hooroomoo

i haven't dug into this yet but the aggregation of js/css files currently has to be turned off to get our astro components to show up within the XB preview. This can be turned off at /admin/config/development/performance

🇺🇸United States hooroomoo

#23 Thank you for the thorough testing @ctrladel!

This issue addresses noticeable buggy behavior that's currently in head and further improvements to the dragging behavior will be done in a follow-up to get this in sooner since there's always something to tackle with drag and drop functionality.

🇺🇸United States hooroomoo

UX improvements from #23 is almost all addressed. One issue is the vm.preview.setUrl doesn't get set properly on the initial open. Will look into more tomorrow

🇺🇸United States hooroomoo

Pushed commit that lists astro components in assets menu (#2) from comment #23.

1. Instead of the Open StackBlitz button, create the StackBlitz iframe when the user clicks on the "Assets" button in XB's left sidebar. However, create this as a hidden iframe. This way it can boot up in the background without it appearing slow to the user.
3. When one of those is clicked, make the StackBlitz iframe visible and tell it to open the corresponding component's source code file in the editor.
4. Within the StackBlitz project, in addition to the index.astro file that's there, add a .astro file for each component containing a usage of that component in order to preview it. For example, pages/preview/PreactCounter.astro and pages/preview/SvelteCounter.astro.
5. For #3 above, it addition to navigating StackBlitz's code editor to the component's source file, also navigate its preview window to the component's preview page.

🇺🇸United States hooroomoo

Don't mind me... just updating the screenshot that has Svelte and Preact specific colors in the text...

🇺🇸United States hooroomoo

The still in-progress 📌 Refine dragging behavior and design in Layers menu Active fixes that. There are several bugs with the current layers menu that 📌 Refine dragging behavior and design in Layers menu Active fixes.

Production build 0.71.5 2024