Vienna
Account created on 21 January 2005, almost 21 years ago
#

Merge Requests

More

Recent comments

🇦🇹Austria fago Vienna

frontend PR https://github.com/drunomics/nuxtjs-drupal-ce/pull/402 is ready for review. it's backward compatible

🇦🇹Austria fago Vienna

Since our custom element class uses attributes terminology, not props, the question is what we should use here.

Overall usage:
- Custom Elements spec: "attributes" (string-only) vs "properties" (any type)
- React: "props"
- Vue: "props" (component data) vs "attrs" passed (HTML attributes)

More important, the Web Components Terminology Distinction

Attributes (HTML):
- String-only values
- Set via HTML:
- Retrieved via: element.getAttribute('title')

Properties (JavaScript):
- Any JavaScript type (objects, arrays, etc.)
- Set via JavaScript: element.imageData = {src: '...', alt: '...'}
- Retrieved via: element.imageData

--> in our case, the values may be objects, like imagedata, not only strings. So I think going with props instead of attributes makes sense + it fits the JS-world well.

🇦🇹Austria fago Vienna
🇦🇹Austria fago Vienna
🇦🇹Austria fago Vienna
🇦🇹Austria fago Vienna

fago created an issue.

🇦🇹Austria fago Vienna
🇦🇹Austria fago Vienna

ready, let's merge when CI is happy

🇦🇹Austria fago Vienna

Merged!

🇦🇹Austria fago Vienna

fago created an issue.

🇦🇹Austria fago Vienna

fago created an issue.

🇦🇹Austria fago Vienna

added it as second MR now

🇦🇹Austria fago Vienna

I've got a new version of the changes without the dependencies, working fine for me as well. Unfortunately gitlab is down atm, so cannot push it, so attaching a full patch meanwhile instead.

🇦🇹Austria fago Vienna

While looking into why this was not fixing the issue, I figured out what is the real problem: Canvas ExtJS simply missed the slot html comments... ! I was not aware there are both component and slot comment, while the component-comments worked, slot comments were missing and cause the issue. I've fixed that in 🐛 Annotations for child components within slots are lost Active now - and this makes things working with and without (!) this fix! SRY for missing that before :-/

In any case, this fix seems to be a reasonable addition though. Honestly, I must say I don't know why it works without, possibly it depends on a lucky timing.

Looking at the code, however I'm not sure the added dependency on the update functions is right. In my understanding, it would lead to the useComponentHtmlMap's useEffect to re-render and thus trigger a re-creation of the mutation observer on every change. I think simply using the observer to trigger the updates should be good enough + the improvement of the equality check makes sense!

🇦🇹Austria fago Vienna

it turns out, this fixes the issue! So it seems the missing slot-comments were really the main problem

🇦🇹Austria fago Vienna
🇦🇹Austria fago Vienna

oh, I just figured that the canvas-start/stop comments are there but NOT the canvas-slot-start-UUID/SLOTNAME comments!

So we need to fix this first.

🇦🇹Austria fago Vienna

fago created an issue.

🇦🇹Austria fago Vienna

thx, that looks mostly great now! I've found case where I think we should throw an exception though, see MR. Could you check that?

🇦🇹Austria fago Vienna

fago created an issue.

🇦🇹Austria fago Vienna

Adding an update with the material and demo from the drupalcon session about this:

🇦🇹Austria fago Vienna
🇦🇹Austria fago Vienna

As clarified in the mentioned ticket, we are moving on with the new entity-generic version developed by drunomics as 3.x.
While the functionality is similar, this is a completely different module and thus there is NO upgrade path. Remove old views plugins and configure the new ones instead.

🇦🇹Austria fago Vienna

ok, many weeks have passed, much more than the required 2 weeks, + we get kars-t's approval, so I'm moving on with this now.

I'm marking 2.x as unsupported and starting 3.x with the entity-generic 3.x version as proposed.
If you are interested in maintaining 2.x please reach out to me.

🇦🇹Austria fago Vienna

2.x is unuspported now. Please reach out to me if you want to take over maintaining it.

🇦🇹Austria fago Vienna

thank you, merged. 2.x is becoming unsupported now though.

🇦🇹Austria fago Vienna

graber, thank you!

🇦🇹Austria fago Vienna

Thanks! I commented https://git.drupalcode.org/project/custom_elements/-/merge_requests/139 - please take a look.

> What we're missing is a method to generate Custom Element out of $ce_display directly.
yeah, let's introduce it then, as a separte method + make the existing method call the new helper?

🇦🇹Austria fago Vienna

fago created an issue.

🇦🇹Austria fago Vienna
🇦🇹Austria fago Vienna

Debugging this a bit, the canvas-start/end markers are correctly rendered by the wrapping component, example:

<div id="nuxt-preview-humanifyheader" class="nuxt-preview-container" data-component-name="HumanifyHeader" data-component-props="{&quot;darkVariant&quot;:true,&quot;backgroundColor&quot;:&quot;crust&quot;}" data-component-slots="{&quot;branding&quot;:&quot;&lt;!-- canvas-start-aaef79ba-f04f-42bc-b888-e0229d46c9b5 --&gt;&lt;div id=\&quot;nuxt-preview-humanifylogo\&quot; class=\&quot;nuxt-preview-container\&quot; data-component-name=\&quot;HumanifyLogo\&quot; data-component-props=\&quot;{&amp;quot;linkToFrontPage&amp;quot;:true}\&quot; data-component-slots=\&quot;[]\&quot;&gt;&lt;\/div&gt;\n&lt;!-- canvas-end-aaef79ba-f04f-42bc-b888-e0229d46c9b5 --&gt;&quot;,&quot;navigation&quot;:&quot;&lt;!-- canvas-start-95805f3a-b32e-4d58-b08e-f506579ab18f --&gt;&lt;div id=\&quot;nuxt-preview-humanifynavigation\&quot; class=\&quot;nuxt-preview-container\&quot; data-component-name=\&quot;HumanifyNavigation\&quot; data-component-props=\&quot;[]\&quot; data-component-slots=\&quot;[]\&quot;&gt;&lt;\/div&gt;\n&lt;!-- canvas-end-95805f3a-b32e-4d58-b08e-f506579ab18f --&gt;&quot;}" data-once="nuxt-preview"><header class="dark bg-crust"><div class="min-w-sm mx-auto flex h-24 max-w-screen-xl items-center justify-between gap-x-12 px-4 sm:px-12 md:h-32 lg:gap-x-16 lg:px-16"><div class="h-12 flex-shrink-0 items-center justify-start md:h-16"><div style="display: contents;"><!-- canvas-start-aaef79ba-f04f-42bc-b888-e0229d46c9b5 --><div id="nuxt-preview-humanifylogo" class="nuxt-preview-container" data-component-name="HumanifyLogo" data-component-props="{&quot;linkToFrontPage&quot;:true}" data-component-slots="[]" data-once="nuxt-preview"><a class="inline-flex h-12 max-h-16 items-center gap-2 md:h-16" href="/"><span class="sr-only">Home</span><svg class="mt-2 h-full w-auto shrink-0" viewBox="0 0 489.142 489.142" xmlns="http://www.w3.org/2000/svg">...</svg><span class="text-flamingo shrink-0 text-lg uppercase tracking-widest"> Humanify </span></a></div>
<!-- canvas-end-aaef79ba-f04f-42bc-b888-e0229d46c9b5 --></div></div><div class="flex h-12 flex-grow items-center justify-end md:h-16"><div style="display: contents;"><!-- canvas-start-95805f3a-b32e-4d58-b08e-f506579ab18f --><div id="nuxt-preview-humanifynavigation" class="nuxt-preview-container" data-component-name="HumanifyNavigation" data-component-props="[]" data-component-slots="[]" data-once="nuxt-preview"><div class="md:flex md:items-center md:gap-12"><nav aria-label="Global" class="hidden md:!block"><ul class="flex items-center gap-6 text-sm"><li><a href="#" class="text-text hover:text-text/75 transition-colors">Services</a></li><li><a href="#" class="text-text hover:text-text/75 transition-colors">Blog</a></li><li><a href="#" class="text-text hover:text-text/75 transition-colors">About</a></li><li><a href="#" class="text-text hover:text-text/75 transition-colors">Careers</a></li></ul></nav><div class="flex items-center gap-4"><div class="sm:flex sm:gap-4"><a class="bg-teal text-inverted-text hover:bg-teal/90 rounded-md px-5 py-2.5 text-sm font-medium shadow-sm transition-colors" href="#"> Login </a><div class="hidden sm:!flex"><a class="bg-surface-0/75 text-text hover:text-text/75 rounded-md px-5 py-2.5 text-sm font-medium transition-colors" href="#"> Register </a></div></div><div class="block md:hidden"><button class="bg-surface-2 text-text rounded-sm p-2"><svg xmlns="http://www.w3.org/2000/svg" class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"></path></svg></button></div></div></div></div>
<!-- canvas-end-95805f3a-b32e-4d58-b08e-f506579ab18f --></div></div></div></header></div>

so that part is working correctly

🇦🇹Austria fago Vienna
🇦🇹Austria fago Vienna

fago created an issue. See original summary .

🇦🇹Austria fago Vienna

fago created an issue.

🇦🇹Austria fago Vienna

Images are defined like this:

 title: Image
	type: object
	examples:
	  - src: "https://images.unsplash.com/photo-1484959014842-cd1d967a39cf?ixlib=rb-1.2.1&ixid=Mnw
xMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80"
		alt: "Woman playing the violin"
		width: 1770
		height: 1180
	$ref: "json-schema-definitions://canvas.module/image"
🇦🇹Austria fago Vienna

fago created an issue.

🇦🇹Austria fago Vienna

fago created an issue.

🇦🇹Austria fago Vienna

This is implemented already over at https://www.drupal.org/project/lupus_decoupled_recipe
Please help testing and report recipe related issues over at https://www.drupal.org/project/issues/lupus_decoupled_recipe_dev?categor...

Let's do some more testing before closing this though.

🇦🇹Austria fago Vienna
🇦🇹Austria fago Vienna

fago created an issue.

🇦🇹Austria fago Vienna

great, that works well!

The preview is empty for me when using nuxt-previewer, so there is some issue with that. But that should a separate issue. Done then!

Merged!

🇦🇹Austria fago Vienna

fago created an issue.

🇦🇹Austria fago Vienna

Works great now! Canvas brings all the API we need, we just need to use it correctly.

🇦🇹Austria fago Vienna
🇦🇹Austria fago Vienna

Except that I think you are looking to have those JS components live in code (and git), and not in config entities. Is that right?

Yes, the idea is that you can use whatever external tooling, IDE, frameworks etc as you like, as long as it produces a valid JavaScript file/bundle. I defined a loose contract so all that is required is defining a render() function. That way, it should be possible to wrap any kind of framework easily.

So, as you point out, code components are/will be flexible, generic JS as well, code-wise, but as I understand it's one fixed bundling process / tooling that is used.

🇦🇹Austria fago Vienna

fago created an issue.

🇦🇹Austria fago Vienna

Running it some issue when testing this on an article content type with a tags field.

Manage custom element dies, with exception:

The website encountered an unexpected error. Try again later.

Drupal\Core\Entity\EntityMalformedException: The "taxonomy_term" entity cannot have a URI as it does not have an ID in Drupal\Core\Entity\EntityBase->toUrl() (line 177 of core/lib/Drupal/Core/Entity/EntityBase.php).

Drupal\custom_elements\Processor\DefaultFieldItemProcessor->addtoElement() (Line: 327)
Drupal\custom_elements\CustomElementGenerator->process() (Line: 71)
Drupal\custom_elements\Processor\DefaultFieldItemListProcessor->addtoElement() (Line: 327)
Drupal\custom_elements\CustomElementGenerator->process() (Line: 59)
Drupal\custom_elements\Plugin\CustomElementsFieldFormatter\AutoCeFieldFormatter->build() (Line: 302)
Drupal\custom_elements\CustomElementGenerator->buildEntityComponentFields() (Line: 262)
Drupal\custom_elements\CustomElementGenerator->buildEntityContent() (Line: 205)
Drupal\custom_elements\CustomElementGenerator->generateMultiple() (Line: 178)
Drupal\custom_elements\CustomElementGenerator->generate() (Line: 1232)
Drupal\custom_elements_ui\Form\EntityCustomElementsDisplayEditForm->buildPreview() (Line: 443)
Drupal\custom_elements_ui\Form\EntityCustomElementsDisplayEditForm->form() (Line: 107)
Drupal\Core\Entity\EntityForm->buildForm()

The exception is NOT catched, so it fatals out.
Seems like just cathing RunTimeException wasn't a good idea, sry for that. Should explicitely catch EntityMalFormedExceptions or there others that we need to catch also?

Testing it on a simple page content type, I don't get it to work. The Preview field-set is there, but it's empty always?

🇦🇹Austria fago Vienna

MR looks all good now, thanks! Taking a test drive now..

🇦🇹Austria fago Vienna

So this got moved to https://www.drupal.org/project/canvas_extjs for now.
Not yet tested with beta2, but works fine with beta1. It integrates nicely with Lupus Decoupled, but needs dev-releases for now. See here 📌 First-class experience builder support Active for setup steps if you want to give it a try!

🇦🇹Austria fago Vienna
🇦🇹Austria fago Vienna
🇦🇹Austria fago Vienna

Got this complete and working. Also improved docs. Ready for final tweaks!

🇦🇹Austria fago Vienna

Thank you, much better! I did another review and left a couple of remarks at the PR.

🇦🇹Austria fago Vienna

The patch has been mostly written by arthur_lorenz, and be reviewed and slightly improved by me. I added credits for arthur.

🇦🇹Austria fago Vienna
🇦🇹Austria fago Vienna

fago created an issue.

🇦🇹Austria fago Vienna

thank you, merged

🇦🇹Austria fago Vienna

Disclosure: I used AI to help creating this!

🇦🇹Austria fago Vienna

Updating setup instructions for testing. Assuming 📌 Allow selection of suiting preview providers Active is merged.

Test setup

  • Install custom_elements module with latest 3.x dev version + lupus_decoupled with latest 1.x-dev
  • Install drupal canvas + https://www.drupal.org/project/issues/canvas_extjs
  • Install drupal and enable both modules
  • Launch a test-frontend with https://github.com/drunomics/nuxt-component-preview configured. Use alpha9 or later.
    The easiest way to do that is to clone https://github.com/drunomics/nuxt-component-preview and to use its dev-playground via `npm run dev`. However, you need to make sure CORS is configured correctly. For that, copy the example CORS config from the README into nuxt.config.ts - with your drupal base URL
  • Go to Lupus Decoupled settings screen, configure your base-url (e.g. https://localhost:3000) and select Nuxt as preview provider.
  • Register components in Drupal canvas. For now this only works via drush:
    ddev drush canvas:extjs-register https://yourfrontend.com/component-index.json
    
🇦🇹Austria fago Vienna

Component registration is done and works nicely now also - see 📌 Ease registration via component index Active .

🇦🇹Austria fago Vienna
🇦🇹Austria fago Vienna

got it implemented, it's rather straight-forward - some care must be taken for installations with custom_elements module versions <3.2 which do not have the new API. I tested the code with both versions, works fine.

For gitlab-ci runs, I had a first green run without current stable custom_elements version, besides some phpstan complaining about using unexiting APIs... I'm making it work with the version now so it can run against that.

🇦🇹Austria fago Vienna

fago created an issue.

🇦🇹Austria fago Vienna

yes, that's definitely possible. However, atm it's nothing that is supported out of the box, so you need a custom module to make it work.
We have been doing this with lupus-decoupled a lot in the past.

Extension points:
- https://git.drupalcode.org/project/lupus_decoupled/-/blob/1.x/modules/lu... - decorate the service to customize it
- https://git.drupalcode.org/project/lupus_decoupled/-/blob/1.x/modules/lu... and/or add URLs here

Then, you need to handle which content goes onto which domain. One simple, but not perfect approach is to add a common prefix in URL-aliases of your content, e.g. prefix /site1, then use api-path prefix, e.g. /ce-api/site1 in your nuxt site. Not perfect, since it obviously would only work for the aliased urls, not others.

Integration with domain module would probably make more sense and should be rather straight-forward, possible even out-of-the-box, there is an issue 📌 Support domain module Active . Happy to help getting this work if you would like to go for that.

Please re-open if you have more questions and feel free to reach out at slack!

🇦🇹Austria fago Vienna

I think this can be much simplified by being based solely on the preview-API which already landed in 3.x + existing render logic + existing sample-values of core. It seems like all we should have to add is some glue-code and UI on top?

🇦🇹Austria fago Vienna
🇦🇹Austria fago Vienna

I got i working quite nicely! :-)

Based upon the vue-team supported vue-component-meta package we are able to read most metadata. Generally, it buidls upon the typescript definitons and also supports enums that way. @example and @enum-labels are supported via js-tags. Given that, the generated file is served from nuxt and can be used to easily register files via drush!

https://github.com/drunomics/nuxt-component-preview/releases/tag/1.0.0-a... is released with the new feature.

🇦🇹Austria fago Vienna

this seems ready now!

🇦🇹Austria fago Vienna

I started working on this and pushed some WIP code, it's a first draft.

Disclosure & Note: I used AI to help creating this!

🇦🇹Austria fago Vienna
🇦🇹Austria fago Vienna
🇦🇹Austria fago Vienna

Created MR. For now it is hard-coded to canvas field. I opened the todo for making a better, general solution over at 📌 Auto-configure best settings based upon field type Active .

🇦🇹Austria fago Vienna

fago created an issue.

🇦🇹Austria fago Vienna

fago created an issue.

🇦🇹Austria fago Vienna
🇦🇹Austria fago Vienna
🇦🇹Austria fago Vienna

Also fixes compatibility with canvas 1.0.0-beta1.

🇦🇹Austria fago Vienna
🇦🇹Austria fago Vienna
🇦🇹Austria fago Vienna

fago created an issue.

🇦🇹Austria fago Vienna

Ready. This requires some changes in extjs also. Creating issue.

🇦🇹Austria fago Vienna

fago changed the visibility of the branch 3549952-canvas-integration-add to hidden.

🇦🇹Austria fago Vienna
🇦🇹Austria fago Vienna

I had to implement slot support in the component-preview helper module of Nuxt first. I made sure it works with nested components also:
https://github.com/drunomics/nuxt-component-preview/releases/tag/1.0.0-a...

Given that, I got it working, even with nested slots. It works with latest custom elements 3.x and https://github.com/drunomics/nuxt-component-preview/releases/tag/1.0.0-a... or later.

However, during testing I found one issue. The canvas overlay for interacting with components is not calculating the right position when having JS-rendered layouts, it seems to be fail to find the right position. As workaround elements can be dragged and selected from the left-array sidebar meanwhile. This is probably something we need to look into with canvas folks.

🇦🇹Austria fago Vienna

fago created an issue.

🇦🇹Austria fago Vienna
🇦🇹Austria fago Vienna

fago created an issue.

🇦🇹Austria fago Vienna

alpha8 tagged - it's compatible with alpha8. see https://github.com/drunomics/nuxt-component-preview/releases/tag/1.0.0-a...

There is also a test fail, but it's unrelated and also appeared in 3.x. Merging and opening a bug ticket for the test fail.

🇦🇹Austria fago Vienna

I already have things + tests working. It needs an updated nuxt-component-preview module. It won't be compatible to alpha6, api changed.
So tagging a new alpha first.

🇦🇹Austria fago Vienna

fago created an issue.

🇦🇹Austria fago Vienna

fago created an issue.

🇦🇹Austria fago Vienna

fago created an issue.

🇦🇹Austria fago Vienna

fago created an issue.

🇦🇹Austria fago Vienna

fago created an issue.

🇦🇹Austria fago Vienna

I've added a test-case demonstrating the issue, as I described it in #79. (branch 3050261-test-case-2 in issue fork)

🇦🇹Austria fago Vienna

ok, good progress was made on the custom_elements module side of things. It has now a working nuxt-preview-provider integration. The glue to select the provider and configure the base-url from Lupus-Decoupled is missing still, thus a few steps are required for testing the setup.

Test setup

  • Install custom_elements module with latest 3.x dev version
  • Install drupal canvas with draft MR / fork from Add a generic JavaScriptComponentSource Active
  • Install drupal and enable both modules
  • Launch a test-frontend with https://github.com/drunomics/nuxt-component-preview configured. The easiest way to do that is to clone https://github.com/drunomics/nuxt-component-preview and to use its dev-playground. However, you need to make sure CORS is configured correctly. For that, copy the example CORS config from the README into nuxt.config.ts - with your drupal base URL
  • Register components in Drupal canvas. For now this is a manual process, run drush php-eval '\Drupal\canvas\Plugin\Canvas\ComponentSource\JavaScriptComponent::createTestComponentEntities();' to create test-config that matches the test-components available in the playground.
  • Create a new canvas page and test it. During editing nuxt-components should render correctly.
🇦🇹Austria fago Vienna

Thanks, yes. The idea is to move this to a contrib for now, so we can move on quicker. It could be integrated in canvas at later state then.

As you can see in the draft MR, I'd envision this is a directly usable component source plugin, not a base class. It would be generic as it would work with any external JS bundles provided.

🇦🇹Austria fago Vienna

ok, merged it, so we can move on more easily and have green tests again. Let's open new issues for all remarks found.

Production build 0.71.5 2024