@dooboostore/simple-web-component 1.0.3 → 1.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/simple-web-component",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -14,6 +14,15 @@
     }
   },
   "description": "Simple Web Component library based on dom-render philosophy",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dooboostore-develop/packages.git",
+    "directory": "packages/@dooboostore/simple-web-component"
+  },
+  "bugs": {
+    "url": "https://github.com/dooboostore-develop/packages/issues"
+  },
+  "homepage": "https://github.com/dooboostore-develop/packages#readme",
   "keywords": [
     "front",
     "web-components",
@@ -69,9 +78,10 @@
     "typescript": "^5.9.2",
     "esbuild-plugin-tsc": "^0.5.0",
     "esbuild": "^0.23.0",
+    "reflect-metadata": "^0.2.2",
     "@dooboostore/core": "1.0.28",
-    "@dooboostore/core-web": "1.0.9",
-    "@dooboostore/core-node": "1.0.10"
+    "@dooboostore/core-node": "1.0.10",
+    "@dooboostore/core-web": "1.0.9"
   },
   "scripts": {
     "clean": "rm -rf dist",
@@ -88,6 +98,7 @@
     "publish:npm": "pnpm run build && cp package.json package.json.back && pnpm pack && TARBALL_NAME=$(ls dooboostore-simple-web-component-*.tgz | head -n 1) && tar -xzf \"$TARBALL_NAME\" -C . --strip-components=1 package/package.json && rm \"$TARBALL_NAME\" && (pnpm publish --no-git-checks || true) && cp package.json.back package.json && rm -rf package.json.back  ",
     "ts:clean": "find . -name '*.js' -o -name '*.map' -o -name '*.d.ts' | xargs rm -f",
     "typecheck": "pnpm exec tsc --noEmit",
-    "test": "echo test"
+    "test": "echo test",
+    "test:bundle": "pnpm --filter @dooboostore/simple-web-component-bundle-test dev"
   }
 }

package/src/bundle-entry.ts

@@ -1 +1,2 @@
+import 'reflect-metadata';
 export * from './index';

package/src/decorators/elementDefine.ts

@@ -1,14 +1,13 @@
 import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
 import { getAttributeChangedMap, ATTRIBUTE_CHANGED_WILDCARD } from './attributeChanged';
-import { getTemplateMethod } from './template';
-import { getStyleMethod } from './style';
+import { getInnerHtmlMetadataList } from './innerHtml';
 import { getQueryMetadata } from './query';
 import { getQueryAllMetadata } from './queryAll';
 import { getAddEventListenerMetadata } from './addEventListener';
+import { getLifecycleMetadata, ON_BEFORE_CONNECTED_METADATA_KEY, ON_AFTER_CONNECTED_METADATA_KEY, ON_BEFORE_DISCONNECTED_METADATA_KEY, ON_AFTER_DISCONNECTED_METADATA_KEY, ON_BEFORE_ADOPTED_METADATA_KEY, ON_AFTER_ADOPTED_METADATA_KEY } from './lifecycles';
 
 export interface ElementConfig {
-  tagName: string;
-  useShadow?: boolean;
+  name: string;
   extends?: string;
   observedAttributes?: string[];
   customElementRegistry?: CustomElementRegistry;
@@ -87,7 +86,7 @@ const registerTag = (className: string, tagName: string) => {
 export const elementDefine =
   (inConfig: ElementConfig | string): ClassDecorator =>
   (constructor: any) => {
-    const config: ElementConfig = typeof inConfig === 'string' ? { tagName: inConfig } : inConfig;
+    const config: ElementConfig = typeof inConfig === 'string' ? { name: inConfig } : inConfig;
 
     // 1. Automatically derive extendsTagName from prototype chain if not provided
     let extendsTagName = config.extends;
@@ -116,7 +115,10 @@ export const elementDefine =
 
       constructor(...args: any[]) {
         super(...args);
-        if (config.useShadow === true && !this.shadowRoot) {
+        const innerHtmlList = getInnerHtmlMetadataList(this);
+        const useShadow = innerHtmlList?.some(it => it.options.useShadow === true);
+
+        if (useShadow === true && !this.shadowRoot) {
           this.attachShadow({ mode: 'open' });
         }
       }
@@ -131,8 +133,6 @@ export const elementDefine =
               const root = it.options.useShadow !== false && this.shadowRoot ? this.shadowRoot : this;
               const element = root.querySelector(it.selector);
 
-              // 중복 호출 방지: 해당 selector로 찾은 요소가 이전과 다를 때만 호출하거나,
-              // 또는 매번 호출할지 결정해야 함. 여기서는 새로운 요소가 발견되면 호출하는 방식으로 처리.
               if (element) {
                 let bound = this._boundElements.get(element);
                 if (!bound) {
@@ -154,10 +154,6 @@ export const elementDefine =
             .forEach(it => {
               const root = it.options.useShadow !== false && this.shadowRoot ? this.shadowRoot : this;
               const elements = root.querySelectorAll(it.selector);
-
-              // queryAll은 목록이 바뀔 수 있으므로 일단 호출하되,
-              // 내부 로직은 사용자에게 맡기거나 좀 더 정교한 비교가 필요할 수 있음.
-              // 여기서는 단순하게 호출만 다시 함. (사용자가 요청한 '다시 호출' 반영)
               (this as any)[it.propertyKey](elements);
             });
         }
@@ -178,7 +174,6 @@ export const elementDefine =
                   this._boundElements.set(targetElement, bound);
                 }
 
-                // 중복 바인딩 방지: (요소, 이벤트, 메서드) 조합 확인
                 const eventKey = `event:${String(it.propertyKey)}:${eventName}`;
                 if (!bound.has(eventKey)) {
                   targetElement.addEventListener(
@@ -197,55 +192,80 @@ export const elementDefine =
       }
 
       disconnectedCallback() {
+        // 1. onBeforeDisconnected
+        const beforeMethods = getLifecycleMetadata(this, ON_BEFORE_DISCONNECTED_METADATA_KEY);
+        beforeMethods?.forEach(m => {
+          if (typeof (this as any)[m] === 'function') (this as any)[m]();
+        });
+
         if (this._observer) {
           this._observer.disconnect();
         }
+
         if (super.disconnectedCallback) {
           super.disconnectedCallback();
         }
-      }
 
-      connectedMoveCallback() {
-        //default logic...
-        if (super.connectedMoveCallback) {
-          super.connectedMoveCallback();
-        }
+        // 2. onAfterDisconnected
+        const afterMethods = getLifecycleMetadata(this, ON_AFTER_DISCONNECTED_METADATA_KEY);
+        afterMethods?.forEach(m => {
+          if (typeof (this as any)[m] === 'function') (this as any)[m]();
+        });
       }
 
       adoptedCallback() {
-        //default logic...
+        // 1. onBeforeAdopted
+        const beforeMethods = getLifecycleMetadata(this, ON_BEFORE_ADOPTED_METADATA_KEY);
+        beforeMethods?.forEach(m => {
+          if (typeof (this as any)[m] === 'function') (this as any)[m]();
+        });
+
         if (super.adoptedCallback) {
           super.adoptedCallback();
         }
+
+        // 2. onAfterAdopted
+        const afterMethods = getLifecycleMetadata(this, ON_AFTER_ADOPTED_METADATA_KEY);
+        afterMethods?.forEach(m => {
+          if (typeof (this as any)[m] === 'function') (this as any)[m]();
+        });
       }
 
       async connectedCallback() {
-        const templateMethod = getTemplateMethod(this);
-        const styleMethod = getStyleMethod(this);
-
-        const template = templateMethod ? await (this as any)[templateMethod]() : undefined;
-        const style = styleMethod ? await (this as any)[styleMethod]() : undefined;
+        // 1. onBeforeConnected
+        const beforeMethods = getLifecycleMetadata(this, ON_BEFORE_CONNECTED_METADATA_KEY);
+        beforeMethods?.forEach(m => {
+          if (typeof (this as any)[m] === 'function') (this as any)[m]();
+        });
 
-        // If not using shadow DOM and no decorators are present, do nothing
-        if (!this.shadowRoot && template === undefined && style === undefined) {
-          return;
+        if (typeof (this as any).initCore === 'function') {
+          (this as any).initCore();
         }
 
-        let content = '';
-        if (style !== undefined && style.trim().length > 0) {
-          content += `<style>${style}</style>`;
-        }
+        const innerHtmlList = getInnerHtmlMetadataList(this);
 
-        if (template !== undefined) {
-          content += template;
-        } else if (!this.shadowRoot) {
-          content += this.innerHTML;
+        let shadowContent = '';
+        let lightContent = '';
+
+        if (innerHtmlList) {
+          for (const meta of innerHtmlList) {
+            const result = await (this as any)[meta.propertyKey]();
+            if (result !== undefined) {
+              if (meta.options.useShadow === true) {
+                shadowContent += result;
+              } else {
+                lightContent += result;
+              }
+            }
+          }
         }
 
         if (this.shadowRoot) {
-          this.shadowRoot.innerHTML = content;
-        } else {
-          this.innerHTML = content;
+          this.shadowRoot.innerHTML = shadowContent;
+        }
+
+        if (lightContent) {
+          this.innerHTML = lightContent;
         }
 
         // 초기 동기화
@@ -261,16 +281,20 @@ export const elementDefine =
         if (super.connectedCallback) {
           await super.connectedCallback();
         }
+
+        // 2. onAfterConnected
+        const afterMethods = getLifecycleMetadata(this, ON_AFTER_CONNECTED_METADATA_KEY);
+        afterMethods?.forEach(m => {
+          if (typeof (this as any)[m] === 'function') (this as any)[m]();
+        });
       }
 
       // 4. Handle attribute changes and route to decorated methods
       attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
-        // Call the original callback if it exists
         if (super.attributeChangedCallback) {
           super.attributeChangedCallback(name, oldValue, newValue);
         }
 
-        // Call all methods associated with @attributeChanged
         const methodKeys = attributeChangedMap?.get(name);
         if (methodKeys && Array.isArray(methodKeys)) {
           methodKeys.forEach(key => {
@@ -280,7 +304,6 @@ export const elementDefine =
           });
         }
 
-        // Call the wildcard methods if they exist
         const wildcardMethodKeys = attributeChangedMap?.get(ATTRIBUTE_CHANGED_WILDCARD);
         if (wildcardMethodKeys && Array.isArray(wildcardMethodKeys)) {
           wildcardMethodKeys.forEach(key => {
@@ -294,9 +317,18 @@ export const elementDefine =
 
     // 5. Register Custom Element using specified or default registry
     const registry = config.customElementRegistry || (typeof customElements !== 'undefined' ? customElements : undefined);
-    if (registry && !registry.get(config.tagName)) {
+    if (registry && !registry.get(config.name)) {
       const options = extendsTagName ? { extends: extendsTagName } : undefined;
-      registry.define(config.tagName, NewClass as any, options);
+
+      // Safari support check for Customized Built-in Elements
+      if (extendsTagName && typeof document !== 'undefined') {
+        const isSupported = document.createElement(extendsTagName, { is: 'any' }).outerHTML.indexOf('is=') !== -1;
+        if (!isSupported) {
+          console.warn(`[SWC] Browser does not support 'is' attribute (Customized Built-in Elements). ` + `If you are on Safari, please include '@ungap/custom-elements' polyfill.`);
+        }
+      }
+
+      registry.define(config.name, NewClass as any, options);
     }
 
     // 6. Save metadata

package/src/decorators/innerHtml.ts

@@ -0,0 +1,41 @@
+import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
+
+export interface InnerHtmlOptions {
+  useShadow?: boolean;
+}
+
+export interface InnerHtmlMetadata {
+  propertyKey: string | symbol;
+  options: InnerHtmlOptions;
+}
+
+export const INNER_HTML_METADATA_KEY = Symbol('simple-web-component:inner-html');
+
+export function innerHtml(options: InnerHtmlOptions): MethodDecorator;
+export function innerHtml(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function innerHtml(arg1?: InnerHtmlOptions | Object, arg2?: string | symbol, arg3?: PropertyDescriptor): MethodDecorator | void {
+  const decorator = (options: InnerHtmlOptions, target: Object, propertyKey: string | symbol) => {
+    const constructor = target.constructor;
+    let list = ReflectUtils.getMetadata<InnerHtmlMetadata[]>(INNER_HTML_METADATA_KEY, constructor);
+    if (!list) {
+      list = [];
+      ReflectUtils.defineMetadata(INNER_HTML_METADATA_KEY, list, constructor);
+    }
+    list.push({ propertyKey, options });
+  };
+
+  if (arg2) {
+    // Used as @innerHtml
+    return decorator({}, arg1!, arg2);
+  }
+
+  // Used as @innerHtml(options)
+  return (target: Object, propertyKey: string | symbol) => {
+    decorator((arg1 as InnerHtmlOptions) || {}, target, propertyKey);
+  };
+}
+
+export const getInnerHtmlMetadataList = (target: any): InnerHtmlMetadata[] | undefined => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.getMetadata(INNER_HTML_METADATA_KEY, constructor);
+};

package/src/decorators/lifecycles.ts

@@ -0,0 +1,37 @@
+import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
+
+export const ON_BEFORE_CONNECTED_METADATA_KEY = Symbol('simple-web-component:on-before-connected');
+export const ON_AFTER_CONNECTED_METADATA_KEY = Symbol('simple-web-component:on-after-connected');
+export const ON_BEFORE_DISCONNECTED_METADATA_KEY = Symbol('simple-web-component:on-before-disconnected');
+export const ON_AFTER_DISCONNECTED_METADATA_KEY = Symbol('simple-web-component:on-after-disconnected');
+export const ON_BEFORE_ADOPTED_METADATA_KEY = Symbol('simple-web-component:on-before-adopted');
+export const ON_AFTER_ADOPTED_METADATA_KEY = Symbol('simple-web-component:on-after-adopted');
+
+function createLifecycleDecorator(metadataKey: symbol): MethodDecorator {
+  return (target: Object, propertyKey: string | symbol) => {
+    const constructor = target.constructor;
+    let list = ReflectUtils.getMetadata<(string | symbol)[]>(metadataKey, constructor);
+    if (!list) {
+      list = [];
+      ReflectUtils.defineMetadata(metadataKey, list, constructor);
+    }
+    list.push(propertyKey);
+  };
+}
+
+export const onBeforeConnected = createLifecycleDecorator(ON_BEFORE_CONNECTED_METADATA_KEY);
+export const onAfterConnected = createLifecycleDecorator(ON_AFTER_CONNECTED_METADATA_KEY);
+export const onConnected = onAfterConnected; // Alias for backward compatibility
+
+export const onBeforeDisconnected = createLifecycleDecorator(ON_BEFORE_DISCONNECTED_METADATA_KEY);
+export const onAfterDisconnected = createLifecycleDecorator(ON_AFTER_DISCONNECTED_METADATA_KEY);
+export const onDisconnected = onAfterDisconnected; // Alias
+
+export const onBeforeAdopted = createLifecycleDecorator(ON_BEFORE_ADOPTED_METADATA_KEY);
+export const onAfterAdopted = createLifecycleDecorator(ON_AFTER_ADOPTED_METADATA_KEY);
+export const onAdopted = onAfterAdopted; // Alias
+
+export const getLifecycleMetadata = (target: any, metadataKey: symbol): (string | symbol)[] | undefined => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.getMetadata(metadataKey, constructor);
+};

package/src/elements/SwcChoose.ts

@@ -1,27 +1,25 @@
-import { elementDefine, template, style } from '../index';
+import { elementDefine, innerHtml } from '../index';
 
-@elementDefine({ tagName: 'swc-choose', useShadow: true })
+@elementDefine({ name: 'swc-choose' })
 export class SwcChoose extends HTMLElement {
   private _observer: MutationObserver | null = null;
-  private _value: any = undefined;
+  private _swcValue: any = undefined;
 
-  set value(val: any) {
-    this._value = val;
+  set swcValue(val: any) {
+    this._swcValue = val;
     this.evaluate();
   }
 
-  get value() {
-    return this._value;
+  get swcValue() {
+    return this._swcValue;
   }
 
-  @style
-  styles() {
-    return `:host { display: contents; }`;
-  }
-
-  @template
+  @innerHtml({ useShadow: true })
   render() {
-    return `<slot id="choose-slot"></slot>`;
+    return `
+      <style>:host { display: contents; }</style>
+      <slot id="choose-slot"></slot>
+    `;
   }
 
   connectedCallback() {
@@ -39,8 +37,8 @@ export class SwcChoose extends HTMLElement {
     const other = this.querySelector('swc-other');
     let matched = false;
 
-    // 현재 choose에 설정된 value (문자열인 경우 "null", "undefined" 등 처리)
-    const chooseValue = this.getAttribute('value') ?? this._value;
+    // 현재 choose에 설정된 value (swc-value 우선)
+    const chooseValue = this.getAttribute('swc-value') ?? this.getAttribute('value') ?? this._swcValue;
 
     whens.forEach(when => {
       if (matched) {

package/src/elements/SwcForOf.ts

@@ -1,17 +1,17 @@
-import { elementDefine, template, style } from '../index';
+import { elementDefine, innerHtml } from '../index';
 import { SwcHTMLElementBase } from './SwcHTMLElementBase';
 
-@elementDefine({ tagName: 'swc-for-of', useShadow: true })
+@elementDefine({ name: 'swc-for-of' })
 export class SwcForOf extends SwcHTMLElementBase {
-  private _value: any[] = [];
+  private _swcValue: any[] = [];
 
   constructor() {
     super();
   }
 
-  set value(val: any[]) {
+  set swcValue(val: any[]) {
     if (!Array.isArray(val)) val = [];
-    this._value = this.createReactiveProxy(
+    this._swcValue = this.createReactiveProxy(
       val,
       () => this.renderAll(),
       (idx, v) => this.updateSingleRow(idx, v)
@@ -19,18 +19,16 @@ export class SwcForOf extends SwcHTMLElementBase {
     this.renderAll();
   }
 
-  get value(): any[] {
-    return this._value;
+  get swcValue(): any[] {
+    return this._swcValue;
   }
 
-  @style
-  styles() {
-    return `:host { display: contents; }`;
-  }
-
-  @template
+  @innerHtml({ useShadow: true })
   renderTemplate() {
-    return `<slot id="tpl-slot" style="display:none;"></slot>`;
+    return `
+      <style>:host { display: contents; }</style>
+      <slot id="tpl-slot" style="display:none;"></slot>
+    `;
   }
 
   connectedCallback() {
@@ -90,6 +88,6 @@ export class SwcForOf extends SwcHTMLElementBase {
       if (s.id !== 'tpl-slot') s.remove();
     });
 
-    this._value.forEach((item, index) => this.renderRow(item, index));
+    this._swcValue.forEach((item, index) => this.renderRow(item, index));
   }
 }

package/src/elements/SwcHTMLElementBase.ts

@@ -1,5 +1,4 @@
-import { getTemplateMethod } from '../decorators/template';
-import { getStyleMethod } from '../decorators/style';
+import { SwcUtils } from '../utils/Utils';
 
 export abstract class SwcHTMLElementBase extends HTMLElement {
   protected _masterTplNodes: Node[] = [];
@@ -13,81 +12,27 @@ export abstract class SwcHTMLElementBase extends HTMLElement {
   protected initCore() {
     this._asKey = this.getAttribute('as') || 'value';
     this._asIndexKey = this.getAttribute('as-index') || 'index';
+
+    if (this._masterTplNodes.length > 0) return; // 이미 초기화됨
+
     const tplSlot = this.shadowRoot?.getElementById('tpl-slot') as HTMLSlotElement;
     if (tplSlot) {
       this._masterTplNodes = tplSlot.assignedNodes().map(n => n.cloneNode(true));
+    } else if (this.childNodes.length > 0) {
+      // Light DOM에서 템플릿 추출
+      this._masterTplNodes = Array.from(this.childNodes).map(n => n.cloneNode(true));
     }
   }
 
-  protected getValueByPath(obj: any, path: string) {
-    if (path === this._asKey) return obj;
-    if (path.startsWith(`${this._asKey}.`)) {
-      return path
-        .split('.')
-        .slice(1)
-        .reduce((acc, part) => acc && acc[part], obj);
-    }
-    return undefined;
-  }
-
   protected applyData(node: Node, data: any, index?: number) {
-    const context: Record<string, any> = {};
-    if (index !== undefined) {
-      context[this._asIndexKey] = index.toString();
-    }
-
-    const walk = (n: Node) => {
-      if (n.nodeType === Node.TEXT_NODE) {
-        if (!(n as any)._original) (n as any)._original = n.textContent;
-        let text = (n as any)._original;
-
-        text = text.replace(/{{(.*?)}}/g, (match: string, path: string) => {
-          path = path.trim();
-          if (context[path] !== undefined) return context[path];
-          const val = this.getValueByPath(data, path);
-          return val !== undefined ? val : match;
-        });
-        if (n.textContent !== text) n.textContent = text;
-      } else if (n.nodeType === Node.ELEMENT_NODE) {
-        const el = n as Element;
-        Array.from(el.attributes).forEach(a => {
-          if (!(a as any)._original) (a as any)._original = a.value;
-          let val = (a as any)._original;
-
-          val = val.replace(/{{(.*?)}}/g, (match: string, path: string) => {
-            path = path.trim();
-            if (context[path] !== undefined) return context[path];
-            const v = this.getValueByPath(data, path);
-            return v !== undefined ? v : match;
-          });
-          if (a.value !== val) a.value = val;
-        });
-        el.childNodes.forEach(walk);
-      }
-    };
-    walk(node);
+    SwcUtils.applyData(node, data, {
+      asKey: this._asKey,
+      asIndexKey: this._asIndexKey,
+      index
+    });
   }
 
-  /**
-   * 객체/배열의 변경을 감지하는 Proxy 생성 유틸리티
-   */
   protected createReactiveProxy(target: any, onChange: () => void, onIndexChange?: (index: number, val: any) => void) {
-    return new Proxy(target, {
-      set: (t, prop, val) => {
-        const isIndex = !isNaN(Number(prop));
-        t[prop] = val;
-        if (isIndex && onIndexChange) {
-          onIndexChange(Number(prop), val);
-        } else {
-          onChange();
-        }
-        return true;
-      },
-      deleteProperty: (t, prop) => {
-        delete t[prop];
-        onChange();
-        return true;
-      }
-    });
+    return SwcUtils.createReactiveProxy(target, onChange, onIndexChange);
   }
 }

package/src/elements/SwcIf.ts

@@ -1,32 +1,30 @@
-import { elementDefine, template, style } from '../index';
+import { elementDefine, innerHtml } from '../index';
 import { SwcHTMLElementBase } from './SwcHTMLElementBase';
 
-@elementDefine({ tagName: 'swc-if', useShadow: true })
+@elementDefine({ name: 'swc-if' })
 export class SwcIf extends SwcHTMLElementBase {
-  private _value: any = false;
+  private _swcValue: any = false;
   private _observer: MutationObserver | null = null;
 
   constructor() {
     super();
   }
 
-  set value(val: any) {
-    this._value = val;
+  set swcValue(val: any) {
+    this._swcValue = val;
     this.render();
   }
 
-  get value(): any {
-    return this._value;
+  get swcValue(): any {
+    return this._swcValue;
   }
 
-  @style
-  styles() {
-    return `:host { display: contents; }`;
-  }
-
-  @template
+  @innerHtml({ useShadow: true })
   renderTemplate() {
-    return `<slot id="tpl-slot" style="display:none;"></slot>`;
+    return `
+      <style>:host { display: contents; }</style>
+      <slot id="tpl-slot" style="display:none;"></slot>
+    `;
   }
 
   connectedCallback() {
@@ -43,10 +41,10 @@ export class SwcIf extends SwcHTMLElementBase {
   private render() {
     if (!this.shadowRoot) return;
 
-    const attrValue = this.getAttribute('value');
+    const attrValue = this.getAttribute('swc-value') || this.getAttribute('value');
     if (attrValue !== null && attrValue.includes('{{')) return;
 
-    let displayValue = attrValue !== null ? attrValue : this._value;
+    let displayValue = attrValue !== null ? attrValue : this._swcValue;
     let isTruthy = !!displayValue;
     if (typeof displayValue === 'string') {
       if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;