Update symbiote to v2

.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/Block.js

@@ -1,23 +1,23 @@
 // @ts-check
-import { BaseComponent, Data } from '@symbiotejs/symbiote';
+import { DICT, PubSub, Symbiote, slotProcessor } from '../symbiote.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';
 
 const TAG_PREFIX = 'uc-';
 
 // @ts-ignore TODO: fix this
-export class Block extends BaseComponent {
+export class Block extends Symbiote {
   /** @type {string | null} */
   static StateConsumerScope = null;
 
@@ -78,8 +78,9 @@ 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);
   }
 
   /**
@@ -137,15 +138,15 @@ export class Block extends BaseComponent {
     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
+        attribute: DICT.CTX_NAME_ATTR,
+      }).then((result) => {
+        if (result.success) {
+          // 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}" is required and it is not set.`);
+        }
       });
     } else {
       super.connectedCallback();
@@ -219,7 +220,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(() => {
@@ -235,7 +236,7 @@ export class Block extends BaseComponent {
    * @protected
    */
   destroyCtxCallback() {
-    Data.deleteCtx(this.ctxName);
+    PubSub.deleteCtx(this.ctxName);
 
     this.localeManager?.destroy();
   }
@@ -329,6 +330,7 @@ export class Block extends BaseComponent {
       const resolver = args[0];
       consoleArgs = resolver();
     }
+
     console.log(`[${this.ctxName}]`, ...consoleArgs);
   }
 
@@ -343,5 +345,3 @@ export class Block extends BaseComponent {
     }
   }
 }
-
-export { BaseComponent };

abstract/CTX.js

@@ -24,7 +24,7 @@ export const uploaderBlockCtx = (fnCtx) => ({
   '*commonProgress': 0,
   '*uploadList': [],
   '*uploadQueue': new Queue(1),
-  /** @type {ReturnType<import('../types').OutputErrorCollection>[]} */
+  /** @type {import('../types').OutputErrorCollection[]} */
   '*collectionErrors': [],
   /** @type {import('../types').OutputCollectionState | null} */
   '*collectionState': null,

abstract/TypedCollection.js

@@ -1,4 +1,4 @@
-import { Data, UID } from '@symbiotejs/symbiote';
+import { PubSub, UID } from '../symbiote.js';
 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 '../symbiote.js';
 
 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 '../symbiote.js';
 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 { applyStyles, Data } from '@symbiotejs/symbiote';
+import { applyStyles, 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 {
   /**
@@ -202,7 +202,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/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: {

blocks/CameraSource/CameraSource.js

@@ -1,8 +1,9 @@
-import { UploaderBlock } from '../../abstract/UploaderBlock.js';
+import { html } from '../../symbiote.js';
 import { ActivityBlock } from '../../abstract/ActivityBlock.js';
+import { UploaderBlock } from '../../abstract/UploaderBlock.js';
+import { UploadSource } from '../utils/UploadSource.js';
 import { canUsePermissionsApi } from '../utils/abilities.js';
 import { debounce } from '../utils/debounce.js';
-import { UploadSource } from '../utils/UploadSource.js';
 
 export class CameraSource extends UploaderBlock {
   couldBeCtxOwner = true;
@@ -213,7 +214,7 @@ export class CameraSource extends UploaderBlock {
   }
 }
 
-CameraSource.template = /* HTML */ `
+CameraSource.template = html`
   <uc-activity-header>
     <button type="button" class="uc-mini-btn" set="onclick: *historyBack">
       <uc-icon name="back"></uc-icon>
@@ -224,7 +225,7 @@ CameraSource.template = /* HTML */ `
     </div>
     <uc-select
       class="uc-camera-select"
-      set="$.options: cameraSelectOptions; @hidden: cameraSelectHidden; onchange: onCameraSelectChange"
+      set="options: cameraSelectOptions; @hidden: cameraSelectHidden; onchange: onCameraSelectChange"
     >
     </uc-select>
     <button type="button" class="uc-mini-btn uc-close-btn" set="onclick: *closeModal">

blocks/CloudImageEditor/src/CropFrame.js

@@ -1,4 +1,5 @@
 // @ts-check
+import { html } from '../../../symbiote.js';
 import { Block } from '../../../abstract/Block.js';
 import {
   clamp,
@@ -508,4 +509,4 @@ export class CropFrame extends Block {
   }
 }
 
-CropFrame.template = /* HTML */ ` <svg class="uc-svg" ref="svg-el" xmlns="http://www.w3.org/2000/svg"></svg> `;
+CropFrame.template = html`<svg class="uc-svg" ref="svg-el" xmlns="http://www.w3.org/2000/svg"></svg>`;

blocks/CloudImageEditor/src/EditorButtonControl.js

@@ -1,3 +1,4 @@
+import { html } from '../../../symbiote.js';
 import { classNames } from './lib/classNames.js';
 import { Block } from '../../../abstract/Block.js';
 
@@ -37,7 +38,7 @@ export class EditorButtonControl extends Block {
   }
 }
 
-EditorButtonControl.template = /* HTML */ `
+EditorButtonControl.template = html`
   <button type="button" role="option" l10n="@title:title-prop">
     <uc-icon set="@name: icon;"></uc-icon>
     <div class="uc-title" ref="title-el">{{title}}</div>