WIP

.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);
   }
 }

abstract/UploaderBlock.js

@@ -1,7 +1,7 @@
 // @ts-check
 import { ActivityBlock } from './ActivityBlock.js';
 
-import { Data } from '@symbiotejs/symbiote';
+import { PubSub } from '@symbiotejs/symbiote';
 import { uploadFileGroup } from '@uploadcare/upload-client';
 import { calculateMaxCenteredCropFrame } from '../blocks/CloudImageEditor/src/crop-utils.js';
 import { parseCropPreset } from '../blocks/CloudImageEditor/src/lib/parseCropPreset.js';
@@ -234,7 +234,7 @@ export class UploaderBlock extends ActivityBlock {
 
     if (changeMap.uploadProgress) {
       for (const entryId of changeMap.uploadProgress) {
-        const { isUploading, silent } = Data.getCtx(entryId).store;
+        const { isUploading, silent } = PubSub.getCtx(entryId).store;
         if (isUploading && !silent) {
           this.emit(EventType.FILE_UPLOAD_PROGRESS, this.api.getOutputItem(entryId));
         }
@@ -244,15 +244,15 @@ export class UploaderBlock extends ActivityBlock {
     }
     if (changeMap.isUploading) {
       for (const entryId of changeMap.isUploading) {
-        const { isUploading, silent } = Data.getCtx(entryId).store;
+        const { isUploading, silent } = PubSub.getCtx(entryId).store;
         if (isUploading && !silent) {
           this.emit(EventType.FILE_UPLOAD_START, this.api.getOutputItem(entryId));
         }
       }
     }
     if (changeMap.fileInfo) {
       for (const entryId of changeMap.fileInfo) {
-        const { fileInfo, silent } = Data.getCtx(entryId).store;
+        const { fileInfo, silent } = PubSub.getCtx(entryId).store;
         if (fileInfo && !silent) {
           this.emit(EventType.FILE_UPLOAD_SUCCESS, this.api.getOutputItem(entryId));
         }
@@ -263,7 +263,7 @@ export class UploaderBlock extends ActivityBlock {
     }
     if (changeMap.errors) {
       for (const entryId of changeMap.errors) {
-        const { errors } = Data.getCtx(entryId).store;
+        const { errors } = PubSub.getCtx(entryId).store;
         if (errors.length > 0) {
           this.emit(EventType.FILE_UPLOAD_FAILED, this.api.getOutputItem(entryId));
           this.emit(

abstract/UploaderPublicApi.js

@@ -1,14 +1,14 @@
 // @ts-check
 import { ActivityBlock } from './ActivityBlock.js';
 
-import { Data } from '@symbiotejs/symbiote';
+import { PubSub } from '@symbiotejs/symbiote';
 import { EventType } from '../blocks/UploadCtxProvider/EventEmitter.js';
 import { UploadSource } from '../blocks/utils/UploadSource.js';
 import { serializeCsv } from '../blocks/utils/comma-separated.js';
 import { IMAGE_ACCEPT_LIST, fileIsImage, mergeFileTypes } from '../utils/fileTypes.js';
 import { parseCdnUrl } from '../utils/parseCdnUrl.js';
-import { buildOutputCollectionState } from './buildOutputCollectionState.js';
 import { stringToArray } from '../utils/stringToArray.js';
+import { buildOutputCollectionState } from './buildOutputCollectionState.js';
 
 export class UploaderPublicApi {
   /**
@@ -176,7 +176,7 @@ export class UploaderPublicApi {
    * @returns {import('../types/exported.js').OutputFileEntry<TStatus>}
    */
   getOutputItem = (entryId) => {
-    const uploadEntryData = /** @type {import('./uploadEntrySchema.js').UploadEntry} */ (Data.getCtx(entryId).store);
+    const uploadEntryData = /** @type {import('./uploadEntrySchema.js').UploadEntry} */ (PubSub.getCtx(entryId).store);
 
     /** @type {import('@uploadcare/upload-client').UploadcareFile?} */
     const fileInfo = uploadEntryData.fileInfo;

abstract/bindCompatibilityFallbackProcessor.js

@@ -0,0 +1,16 @@
+// @ts-check
+
+import { DICT } from '@symbiotejs/symbiote';
+
+const FALLBACK_BIND_ATTR = 'set';
+
+/** @param {DocumentFragment} fr */
+export function bindCompatibilityFallbackProcessor(fr) {
+  [...fr.querySelectorAll(`[${FALLBACK_BIND_ATTR}]`)].forEach((el) => {
+    const setAttrValue = el.getAttribute(FALLBACK_BIND_ATTR);
+    if (setAttrValue) {
+      el.removeAttribute(FALLBACK_BIND_ATTR);
+      el.setAttribute(DICT.BIND_ATTR, setAttrValue);
+    }
+  });
+}

abstract/defineComponents.js

@@ -1,6 +1,11 @@
+const EXCLUDE_COMPONENTS = ['Symbiote', 'BaseComponent', 'UploaderBlock', 'ActivityBlock', 'Block', 'SolutionBlock'];
+
 /** @param {Object<string, any>} blockExports */
 export function defineComponents(blockExports) {
   for (let blockName in blockExports) {
+    if (EXCLUDE_COMPONENTS.includes(blockName)) {
+      continue;
+    }
     let tagName = [...blockName].reduce((name, char) => {
       if (char.toUpperCase() === char) {
         char = '-' + char.toLowerCase();

abstract/l10nProcessor.js

@@ -48,11 +48,11 @@ export function l10nProcessor(fr, fnCtx) {
         // We don't need the leading * in the key because we use the key as a local context key relative to the global state
         const nodeStateKey = localeStateKey(mappedKey).replace('*', '');
         // If the key is not present in the node context, add it
-        if (!fnCtx.nodeCtx.has(nodeStateKey)) {
-          fnCtx.nodeCtx.add(nodeStateKey, mappedKey);
+        if (!fnCtx.sharedCtx.has(nodeStateKey)) {
+          fnCtx.sharedCtx.add(nodeStateKey, mappedKey);
         }
         // Subscribe on the global l10n key change
-        const sub = fnCtx.nodeCtx.sub(nodeStateKey, () => {
+        const sub = fnCtx.sharedCtx.sub(nodeStateKey, () => {
           el[/** @type {'textContent'} */ (elProp)] = fnCtx.l10n(mappedKey);
         });
         keySubs?.add(sub);

abstract/uploadEntrySchema.js

@@ -109,7 +109,7 @@ export const uploadEntrySchema = Object.freeze({
   },
   source: {
     type: String,
-    value: false,
+    value: null,
     nullable: true,
   },
   fullPath: {