Merge pull request #539 from uploadcare/fix/wait-for-ctx-name-attr

Fix/wait-for-ctx-name-attr
uploadcare · Oct 12, 2023 · 5c78438 · 5c78438
2 parents 5d01ac9 + f9d62d4
commit 5c78438
Show file tree

Hide file tree

Showing 16 changed files with 446 additions and 19 deletions.
diff --git a/abstract/Block.js b/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() {

diff --git a/abstract/SolutionBlock.js b/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;
 

diff --git a/abstract/UploaderBlock.js b/abstract/UploaderBlock.js
@@ -176,7 +176,7 @@ export class UploaderBlock extends ActivityBlock {
       fileSize: file.size,
       silentUpload: silent ?? false,
       source: source ?? UploadSource.API,
-      fullPath,
+      fullPath: fullPath ?? null,
     });
   }
 

diff --git a/blocks/Config/Config.js b/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();

diff --git a/blocks/DataOutput/DataOutput.js b/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$,

diff --git a/blocks/ShadowWrapper/ShadowWrapper.js b/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/'
           );
-        }
+        },
       });
     }
   };

diff --git a/blocks/UploadCtxProvider/UploadCtxProvider.js b/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;
+}