WIP

Author: nd0ut

.github/workflows/checks.yml

@@ -10,7 +10,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: '16'
+          node-version: '20'
       - name: Install dependencies
         working-directory: ./
         run: npm ci

.github/workflows/codeql.yml

@@ -31,8 +31,7 @@ jobs:
         with:
           languages: ${{ matrix.language }}
           queries: +security-and-quality
-          paths-ignore:
-            - '**/*.test-d.ts(x?)'
+          paths-ignore: "**/*.test-d.ts(x?)"
       - name: Autobuild
         uses: github/codeql-action/autobuild@v2
 

.github/workflows/shipjs-manual-prepare.yml

@@ -15,7 +15,7 @@ jobs:
           ref: main
       - uses: actions/setup-node@v2
         with:
-          node-version: '16'
+          node-version: '20'
       - run: npm ci
       - run: |
           git config --global user.email "github-actions[bot]@users.noreply.github.com"

.github/workflows/shipjs-trigger.yml

@@ -16,7 +16,7 @@ jobs:
       - uses: actions/setup-node@v2
         with:
           registry-url: "https://registry.npmjs.org"
-          node-version: '16'
+          node-version: '20'
       - run: npm ci
       - run: |
           git config --global user.email "github-actions[bot]@users.noreply.github.com"

.nvmrc

@@ -0,0 +1 @@
+20

README.md

@@ -85,7 +85,7 @@ We use [JSDoc type annotations](https://www.typescriptlang.org/docs/handbook/int
   href="https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@1/web/uc-file-uploader-regular.min.css"
 />
 
-<uc-file-uploader-regular ctx-name="my-uploader"> </uc-file-uploader-regular>
+<uc-file-uploader-regular ctx="my-uploader"> </uc-file-uploader-regular>
 ```
 
 3. Configure Uploadcare File Uploader and add your personal public key to the project. Discover the instructions in the [following section](#configuration).
@@ -109,7 +109,7 @@ UC.defineComponents(UC);
   href="https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@1/web/uc-file-uploader-regular.min.css"
 />
 
-<uc-file-uploader-inline ctx-name="my-uploader"> </uc-file-uploader-inline>
+<uc-file-uploader-inline ctx="my-uploader"> </uc-file-uploader-inline>
 ```
 
 4. Configure Uploadcare File Uploader and add your personal public key to the project. Discover the instructions in the [following section](#configuration).
@@ -123,10 +123,10 @@ All configurations in Uploadcare File Uploader are managed from `uc-config` bloc
 3. Add a `uc-config` block to your markup and replace `YOUR_PUBLIC_KEY` with your own public key:
 
 ```html
-<uc-config ctx-name="my-uploader" pubkey="YOUR_PUBLIC_KEY"></uc-config>
+<uc-config ctx="my-uploader" pubkey="YOUR_PUBLIC_KEY"></uc-config>
 ```
 
-4. Make sure that your config block uses the same `ctx-name` attribute value as your solution block.
+4. Make sure that your config block uses the same `ctx` attribute value as your solution block.
 
 Discover more about Uploadcare File Uploader configuration in [our documentation](https://uploadcare.com/docs/file-uploader/configuration/?ref=github-readme).
 

abstract/ActivityBlock.js

@@ -54,6 +54,8 @@ export class ActivityBlock extends Block {
         this.setAttribute('activity', this.activityType);
       }
       this.sub('*currentActivity', (/** @type {String} */ val) => {
+        if (this.activityType === 'url') {
+        }
         if (this.activityType !== val && this[ACTIVE_PROP]) {
           this._deactivate();
         } else if (this.activityType === val && !this[ACTIVE_PROP]) {

abstract/Block.js

@@ -1,23 +1,27 @@
 // @ts-check
-import { BaseComponent, Data } from '@symbiotejs/symbiote';
+import { DICT, PubSub, Symbiote } from '@symbiotejs/symbiote';
+// @ts-ignore - something wrong with the tsd
+import { slotProcessor } from '@symbiotejs/symbiote/core/slotProcessor.js';
 import { initialConfig } from '../blocks/Config/initialConfig.js';
 import { EventEmitter } from '../blocks/UploadCtxProvider/EventEmitter.js';
 import { WindowHeightTracker } from '../utils/WindowHeightTracker.js';
-import { extractFilename, extractCdnUrlModifiers, extractUuid } from '../utils/cdn-utils.js';
+import { extractCdnUrlModifiers, extractFilename, extractUuid } from '../utils/cdn-utils.js';
 import { getLocaleDirection } from '../utils/getLocaleDirection.js';
 import { getPluralForm } from '../utils/getPluralForm.js';
 import { applyTemplateData, getPluralObjects } from '../utils/template-utils.js';
 import { waitForAttribute } from '../utils/waitForAttribute.js';
 import { blockCtx } from './CTX.js';
 import { LocaleManager, localeStateKey } from './LocaleManager.js';
+import { A11y } from './a11y.js';
 import { l10nProcessor } from './l10nProcessor.js';
 import { sharedConfigKey } from './sharedConfigKey.js';
-import { A11y } from './a11y.js';
+import { bindCompatibilityFallbackProcessor } from './bindCompatibilityFallbackProcessor.js';
 
 const TAG_PREFIX = 'uc-';
+const CTX_NAME_FALLBACK_ATTR = 'ctx-name';
 
 // @ts-ignore TODO: fix this
-export class Block extends BaseComponent {
+export class Block extends Symbiote {
   /** @type {string | null} */
   static StateConsumerScope = null;
 
@@ -78,8 +82,12 @@ export class Block extends BaseComponent {
     super();
     /** @type {Map<string, Set<{ remove: () => void }>>} */
     this.l10nProcessorSubs = new Map();
-    // @ts-ignore TODO: fix this
+    // @ts-expect-error TODO: fix this
     this.addTemplateProcessor(l10nProcessor);
+    this.addTemplateProcessor(slotProcessor);
+
+    // Prepend tpl processors with bind compatibility fallback processor
+    this.tplProcessors = new Set([bindCompatibilityFallbackProcessor, ...this.tplProcessors]);
   }
 
   /**
@@ -135,17 +143,29 @@ export class Block extends BaseComponent {
       this.processInnerHtml = true;
     }
     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
+      Promise.race([
+        waitForAttribute({
+          element: this,
+          attribute: DICT.CTX_NAME_ATTR,
+        }),
+        waitForAttribute({
+          element: this,
+          attribute: CTX_NAME_FALLBACK_ATTR,
+        }),
+      ]).then((result) => {
+        if (result.success) {
+          if (result.attribute === CTX_NAME_FALLBACK_ATTR) {
+            const ctxName = result.value;
+            this.style.setProperty(DICT.CSS_CTX_PROP, `'${ctxName}'`);
+          }
+          // async wait for ctx 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 {
+          console.error(
+            `Attribute "${DICT.CTX_NAME_ATTR}" or "${CTX_NAME_FALLBACK_ATTR}" is required and it is not set.`,
+          );
+        }
       });
     } else {
       super.connectedCallback();
@@ -217,7 +237,7 @@ export class Block extends BaseComponent {
 
     // Destroy local context
     // TODO: this should be done inside symbiote
-    Data.deleteCtx(this);
+    PubSub.deleteCtx(this.localCtx.uid);
 
     if (blocksRegistry?.size === 0) {
       setTimeout(() => {
@@ -233,7 +253,7 @@ export class Block extends BaseComponent {
    * @protected
    */
   destroyCtxCallback() {
-    Data.deleteCtx(this.ctxName);
+    PubSub.deleteCtx(this.ctxName);
 
     this.localeManager?.destroy();
   }
@@ -327,6 +347,7 @@ export class Block extends BaseComponent {
       const resolver = args[0];
       consoleArgs = resolver();
     }
+
     console.log(`[${this.ctxName}]`, ...consoleArgs);
   }
 
@@ -341,5 +362,3 @@ export class Block extends BaseComponent {
     }
   }
 }
-
-export { BaseComponent };

abstract/TypedCollection.js

@@ -1,4 +1,4 @@
-import { Data, UID } from '@symbiotejs/symbiote';
+import { PubSub, UID } from '@symbiotejs/symbiote';
 import { TypedData } from './TypedData.js';
 
 export class TypedCollection {
@@ -22,9 +22,9 @@ export class TypedCollection {
     this.__ctxId = options.ctxName || UID.generate();
     /**
      * @private
-     * @type {Data}
+     * @type {PubSub}
      */
-    this.__data = Data.registerCtx({}, this.__ctxId);
+    this.__data = PubSub.registerCtx({}, this.__ctxId);
     /**
      * @private
      * @type {string[]}
@@ -232,7 +232,7 @@ export class TypedCollection {
   }
 
   destroy() {
-    Data.deleteCtx(this.__ctxId);
+    PubSub.deleteCtx(this.__ctxId);
     this.__propertyObservers = null;
     this.__collectionObservers = null;
     for (let id in this.__subsMap) {

abstract/TypedData.js

@@ -1,4 +1,4 @@
-import { Data, UID } from '@symbiotejs/symbiote';
+import { PubSub, UID } from '@symbiotejs/symbiote';
 
 const MSG_NAME = '[Typed State] Wrong property name: ';
 const MSG_TYPE = '[Typed State] Wrong property type: ';
@@ -20,9 +20,9 @@ export class TypedData {
     }, {});
     /**
      * @private
-     * @type {Data}
+     * @type {PubSub}
      */
-    this.__data = Data.registerCtx(this.__schema, this.__ctxId);
+    this.__data = PubSub.registerCtx(this.__schema, this.__ctxId);
   }
 
   /** @returns {String} */
@@ -72,6 +72,6 @@ export class TypedData {
   }
 
   remove() {
-    Data.deleteCtx(this.__ctxId);
+    PubSub.deleteCtx(this.__ctxId);
   }
 }