fix: require ctx-name attribute for all the public blocks and wait …

…for it with 300ms timeout

this is required mostly for Angular projects, because it sets binded attributes async

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',
+        onMutate: () => {
+          // 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;
 

blocks/Config/Config.js

@@ -4,6 +4,7 @@ import { initialConfig } from './initialConfig.js';
 import { sharedConfigKey } from '../../abstract/sharedConfigKey.js';
 import { toKebabCase } from '../../utils/toKebabCase.js';
 import { normalizeConfigValue } from './normalizeConfigValue.js';
+import { waitForAttribute } from '../../utils/waitForAttribute.js';
 
 const allConfigKeys = /** @type {(keyof import('../../types').ConfigType)[]} */ (Object.keys(initialConfig));
 
@@ -40,6 +41,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,
+        onMutate: (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;
+}

solutions/file-uploader/inline/demo.htm

@@ -27,7 +27,7 @@ <h2>Multiple sources</h2>
   </style>
 
   <!-- Uploader widget element: -->
-  <lr-file-uploader-inline css-src="./inline/index.css"> </lr-file-uploader-inline>
+  <lr-file-uploader-inline ctx-name="my-uploader" css-src="./inline/index.css"> </lr-file-uploader-inline>
 </lr-live-html>
 
 <h2>Single source</h2>
@@ -60,5 +60,5 @@ <h2>Single source</h2>
   </style>
 
   <!-- Uploader widget element: -->
-  <lr-file-uploader-inline current-activity css-src="./inline/index.css"> </lr-file-uploader-inline>
+  <lr-file-uploader-inline ctx-name="my-uploader" current-activity css-src="./inline/index.css"> </lr-file-uploader-inline>
 </lr-live-html>

solutions/file-uploader/minimal/demo.htm

@@ -18,6 +18,7 @@ <h2>Live example</h2>
 
   <!-- Uploader widget element: -->
   <lr-file-uploader-minimal
+    ctx-name="my-uploader" 
     css-src="./minimal/index.css"></lr-file-uploader-minimal>
 
   <lr-data-output

solutions/file-uploader/regular/demo.htm

@@ -16,7 +16,7 @@ <h2>Button with modal window</h2>
   </style>
 
   <!-- Uploader widget element: -->
-  <lr-file-uploader-regular css-src="./regular/index.css">
+  <lr-file-uploader-regular ctx-name="my-uploader" css-src="./regular/index.css">
   </lr-file-uploader-regular>
 </lr-live-html>
 <h2>Single source</h2>
@@ -37,6 +37,6 @@ <h2>Single source</h2>
   </style>
 
   <!-- Uploader widget element: -->
-  <lr-file-uploader-regular css-src="./regular/index.css">
+  <lr-file-uploader-regular ctx-name="my-uploader" css-src="./regular/index.css">
   </lr-file-uploader-regular>
 </lr-live-html>