feat(shadow-styles): eliminating shadow styles (#646)

* feat(shadow-styles): deleted ShadowWrapper * feat(shadow-styles): deleted :host * feat(shadow-styles): replaced shadowReadyCallback with initCallback * feat(shadow-styles): added class minimal for file-uploader-minimal * fix: fixed localization initialization * feat(shadow-styles): added class for lr-file-uploader-inline * feat: added class for minimal and inline * fix: ctxOwner for EditorImageCropper * feat: deleted pauseRender * fix: add state keys if they're not present at the moment --------- Co-authored-by: nd0ut <[email protected]> Co-authored-by: Aleksandr Grenishin <[email protected]>
uploadcare · May 7, 2024 · 984dbda · 984dbda
1 parent 1e975c1
commit 984dbda
Show file tree

Hide file tree

Showing 24 changed files with 209 additions and 262 deletions.
diff --git a/abstract/Block.js b/abstract/Block.js
@@ -10,6 +10,7 @@ import { blockCtx } from './CTX.js';
 import { LocaleManager, localeStateKey } from './LocaleManager.js';
 import { l10nProcessor } from './l10nProcessor.js';
 import { sharedConfigKey } from './sharedConfigKey.js';
+import { initialConfig } from '../blocks/Config/initialConfig.js';
 
 const TAG_PREFIX = 'lr-';
 
@@ -172,7 +173,6 @@ export class Block extends BaseComponent {
     if (!this.has('*eventEmitter')) {
       this.add('*eventEmitter', new EventEmitter(this.debugPrint.bind(this)));
     }
-
     if (!this.has('*localeManager')) {
       this.add('*localeManager', new LocaleManager(this));
     }
@@ -264,6 +264,9 @@ export class Block extends BaseComponent {
             return false;
           }
           const sharedKey = sharedConfigKey(/** @type {keyof import('../types').ConfigType} */ (key));
+          if (!this.has(sharedKey)) {
+            this.add(sharedKey, initialConfig[/** @type {keyof import('../types').ConfigType} */ (key)]);
+          }
           this.$[sharedKey] = value;
           return true;
         },
@@ -272,6 +275,10 @@ export class Block extends BaseComponent {
          * @param {keyof import('../types').ConfigType} key
          */
         get: (obj, key) => {
+          const sharedKey = sharedConfigKey(key);
+          if (!this.has(sharedKey)) {
+            this.add(sharedKey, initialConfig[key]);
+          }
           return this.$[sharedConfigKey(key)];
         },
       });
@@ -285,7 +292,11 @@ export class Block extends BaseComponent {
    * @param {(value: import('../types').ConfigType[T]) => void} callback
    */
   subConfigValue(key, callback) {
-    this.sub(sharedConfigKey(key), callback);
+    const sharedKey = sharedConfigKey(key);
+    if (!this.has(sharedKey)) {
+      this.add(sharedKey, initialConfig[key]);
+    }
+    this.sub(sharedKey, callback);
   }
 
   /** @param {unknown[]} args */

diff --git a/abstract/LocaleManager.js b/abstract/LocaleManager.js
@@ -1,6 +1,7 @@
 // @ts-check
 import { debounce } from '../blocks/utils/debounce.js';
 import { resolveLocaleDefinition } from './localeRegistry.js';
+import { default as en } from '../locales/file-uploader/en.js';
 
 /** @param {string} key */
 export const localeStateKey = (key) => `*l10n/${key}`;
@@ -32,7 +33,9 @@ export class LocaleManager {
   constructor(blockInstance) {
     this._blockInstance = blockInstance;
 
-    blockInstance.add(localeStateKey('locale-id'), DEFAULT_LOCALE, false);
+    for (let [key, value] of Object.entries(en)) {
+      this._blockInstance.add(localeStateKey(key), value, false);
+    }
 
     setTimeout(() => {
       blockInstance.subConfigValue('localeName', async (localeName) => {

diff --git a/abstract/SolutionBlock.js b/abstract/SolutionBlock.js
@@ -1,7 +1,7 @@
-import { ShadowWrapper } from '../blocks/ShadowWrapper/ShadowWrapper.js';
 import { uploaderBlockCtx } from './CTX.js';
+import { Block } from './Block.js';
 
-export class SolutionBlock extends ShadowWrapper {
+export class SolutionBlock extends Block {
   requireCtxName = true;
   init$ = uploaderBlockCtx(this);
   _template = null;

diff --git a/abstract/l10nProcessor.js b/abstract/l10nProcessor.js
@@ -25,51 +25,52 @@ export function l10nProcessor(fr, fnCtx) {
       }
     }
 
-    // If the key is present in the global context, use it
-    const stateKey = localeStateKey(key);
-
-    if (fnCtx.has(stateKey)) {
-      fnCtx.sub(stateKey, () => {
-        key = /** @type {string} */ (key);
-        if (useAttribute) {
-          el.setAttribute(elProp, fnCtx.l10n(key));
-        } else {
-          el[/** @type {'textContent'} */ (elProp)] = fnCtx.l10n(key);
+    // Check if the key is present in the local context
+    const localCtxKey = key;
+    if (fnCtx.has(localCtxKey)) {
+      fnCtx.sub(localCtxKey, (mappedKey) => {
+        if (!mappedKey) {
+          return;
         }
+        // Store the subscription in a temporary map to be able to unsubscribe later
+        if (!fnCtx.l10nProcessorSubs.has(localCtxKey)) {
+          fnCtx.l10nProcessorSubs.set(localCtxKey, new Set());
+        }
+        const keySubs = fnCtx.l10nProcessorSubs.get(localCtxKey);
+        keySubs?.forEach(
+          /** @param {{ remove: () => void }} sub */
+          (sub) => {
+            sub.remove();
+            keySubs.delete(sub);
+            fnCtx.allSubs.delete(sub);
+          },
+        );
+        // 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('*', '');
+        // Subscribe on the global l10n key change
+        const sub = fnCtx.nodeCtx.sub(nodeStateKey, () => {
+          el[/** @type {'textContent'} */ (elProp)] = fnCtx.l10n(mappedKey);
+        });
+        keySubs?.add(sub);
+        // Store the subscription in the global context to make able Symbiote to unsubscribe it on destroy
+        fnCtx.allSubs.add(sub);
+        el.removeAttribute('l10n');
       });
-      el.removeAttribute('l10n');
-      return;
     }
 
-    // Otherwise, assume the key is present in the local context
-    const localCtxKey = key;
-    fnCtx.sub(localCtxKey, (mappedKey) => {
-      if (!mappedKey) {
-        return;
-      }
-      // Store the subscription in a temporary map to be able to unsubscribe later
-      if (!fnCtx.l10nProcessorSubs.has(localCtxKey)) {
-        fnCtx.l10nProcessorSubs.set(localCtxKey, new Set());
+    // Otherwise, assume the key is in the global context
+    const stateKey = localeStateKey(key);
+    if (!fnCtx.has(stateKey)) {
+      fnCtx.add(stateKey, '');
+    }
+    fnCtx.sub(stateKey, () => {
+      key = /** @type {string} */ (key);
+      if (useAttribute) {
+        el.setAttribute(elProp, fnCtx.l10n(key));
+      } else {
+        el[/** @type {'textContent'} */ (elProp)] = fnCtx.l10n(key);
       }
-      const keySubs = fnCtx.l10nProcessorSubs.get(localCtxKey);
-      keySubs?.forEach(
-        /** @param {{ remove: () => void }} sub */
-        (sub) => {
-          sub.remove();
-          keySubs.delete(sub);
-          fnCtx.allSubs.delete(sub);
-        },
-      );
-      // 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('*', '');
-      // Subscribe on the global l10n key change
-      const sub = fnCtx.nodeCtx.sub(nodeStateKey, () => {
-        el[/** @type {'textContent'} */ (elProp)] = fnCtx.l10n(mappedKey);
-      });
-      keySubs?.add(sub);
-      // Store the subscription in the global context to make able Symbiote to unsubscribe it on destroy
-      fnCtx.allSubs.add(sub);
-      el.removeAttribute('l10n');
     });
+    el.removeAttribute('l10n');
   });
 }
diff --git a/blocks/CloudImageEditor/src/EditorImageCropper.js b/blocks/CloudImageEditor/src/EditorImageCropper.js
@@ -42,6 +42,7 @@ function validateCrop(crop) {
 }
 
 export class EditorImageCropper extends Block {
+  ctxOwner = true;
   constructor() {
     super();
 

diff --git a/blocks/ShadowWrapper/ShadowWrapper.js b/blocks/ShadowWrapper/ShadowWrapper.js