Fix/wait-for-ctx-name-attr

abstract/Block.js

@@ -8,6 +8,7 @@ import { sharedConfigKey } from './sharedConfigKey.js';
 import { toKebabCase } from '../utils/toKebabCase.js';
 import { warnOnce } from '../utils/warnOnce.js';
 import { getPluralForm } from '../utils/getPluralForm.js';
+import { waitForAttribute } from '../utils/waitForAttribute.js';
 
 const TAG_PREFIX = 'lr-';
 
@@ -16,6 +17,7 @@ export class Block extends BaseComponent {
   /** @type {string | null} */
   static StateConsumerScope = null;
   static className = '';
+  requireCtxName = false;
   allowCustomTemplate = true;
 
   init$ = blockCtx();
@@ -137,7 +139,22 @@ export class Block extends BaseComponent {
       this.constructor['template'] = null;
       this.processInnerHtml = true;
     }
-    super.connectedCallback();
+    if (this.requireCtxName) {
+      waitForAttribute({
+        element: this,
+        attribute: 'ctx-name',
+        onSuccess: () => {
+          // async wait for ctx-name attribute to be set, needed for Angular because it sets attributes after mount
+          // TODO: should be moved to the symbiote core
+          super.connectedCallback();
+        },
+        onTimeout: () => {
+          console.error('Attribute `ctx-name` is required and it is not set.');
+        },
+      });
+    } else {
+      super.connectedCallback();
+    }
   }
 
   disconnectedCallback() {

abstract/SolutionBlock.js

@@ -2,6 +2,7 @@ import { ShadowWrapper } from '../blocks/ShadowWrapper/ShadowWrapper.js';
 import { uploaderBlockCtx } from './CTX.js';
 
 export class SolutionBlock extends ShadowWrapper {
+  requireCtxName = true;
   init$ = uploaderBlockCtx(this);
   _template = null;
 

abstract/UploaderBlock.js

@@ -4,7 +4,7 @@
 import { Data } from '@symbiotejs/symbiote';
 import { calculateMaxCenteredCropFrame } from '../blocks/CloudImageEditor/src/crop-utils.js';
 import { parseCropPreset } from '../blocks/CloudImageEditor/src/lib/parseCropPreset.js';
 import { Modal } from '../blocks/Modal/Modal.js';
 import { UploadSource } from '../blocks/utils/UploadSource.js';
 import { debounce } from '../blocks/utils/debounce.js';
 import { customUserAgent } from '../blocks/utils/userAgent.js';
@@ -176,7 +176,7 @@
       fileSize: file.size,
       silentUpload: silent ?? false,
       source: source ?? UploadSource.API,
-      fullPath,
+      fullPath: fullPath ?? null,
     });
   }
 

blocks/Config/Config.js

@@ -40,6 +40,7 @@ const attrStateMapping = /** @type {Record<keyof import('../../types').ConfigAtt
 
 export class Config extends Block {
   ctxOwner = true;
+  requireCtxName = true;
 
   constructor() {
     super();

blocks/DataOutput/DataOutput.js

@@ -5,6 +5,7 @@ import { uploadFileGroup } from '@uploadcare/upload-client';
 
 export class DataOutput extends UploaderBlock {
   processInnerHtml = true;
+  requireCtxName = true;
 
   init$ = {
     ...this.init$,

blocks/ShadowWrapper/ShadowWrapper.js

@@ -1,5 +1,6 @@
 // @ts-check
 import { Block } from '../../abstract/Block.js';
+import { waitForAttribute } from '../../utils/waitForAttribute.js';
 
 const CSS_ATTRIBUTE = 'css-src';
 
@@ -22,17 +23,18 @@ export function shadowed(Base) {
   return class extends Base {
     renderShadow = true;
     pauseRender = true;
+    requireCtxName = true;
 
     shadowReadyCallback() {}
 
     initCallback() {
       super.initCallback();
       this.setAttribute('hidden', '');
 
-      // async wait for attributes to be set, needed for Angular because it sets attributes after constructor
-      setTimeout(() => {
-        let href = this.getAttribute(CSS_ATTRIBUTE);
-        if (href) {
+      waitForAttribute({
+        element: this,
+        attribute: CSS_ATTRIBUTE,
+        onSuccess: (href) => {
           this.attachShadow({
             mode: 'open',
           });
@@ -53,11 +55,12 @@ export function shadowed(Base) {
           };
           // @ts-ignore TODO: fix this
           this.shadowRoot.prepend(link);
-        } else {
+        },
+        onTimeout: () => {
           console.error(
             'Attribute `css-src` is required and it is not set. See migration guide: https://uploadcare.com/docs/file-uploader/migration-to-0.25.0/'
           );
-        }
+        },
       });
     }
   };

blocks/UploadCtxProvider/UploadCtxProvider.js

@@ -1,3 +1,5 @@
 import { UploaderBlock } from '../../abstract/UploaderBlock.js';
 
-export class UploadCtxProvider extends UploaderBlock {}
+export class UploadCtxProvider extends UploaderBlock {
+  requireCtxName = true;
+}