@dooboostore/simple-web-component 1.0.47 → 1.0.48

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (132) hide show
  1. package/README.md +109 -11
  2. package/dist/cjs/decorators/addEventListener.js +45 -7
  3. package/dist/cjs/decorators/addEventListener.js.map +2 -2
  4. package/dist/cjs/decorators/elementDefine.js +225 -6
  5. package/dist/cjs/decorators/elementDefine.js.map +3 -3
  6. package/dist/cjs/decorators/index.js +2 -0
  7. package/dist/cjs/decorators/index.js.map +2 -2
  8. package/dist/cjs/decorators/mutationObserver.js +104 -0
  9. package/dist/cjs/decorators/mutationObserver.js.map +7 -0
  10. package/dist/cjs/decorators/query.js +13 -1
  11. package/dist/cjs/decorators/query.js.map +2 -2
  12. package/dist/cjs/decorators/resizeObserver.js +104 -0
  13. package/dist/cjs/decorators/resizeObserver.js.map +7 -0
  14. package/dist/cjs/examples/RxJSOperatorsExample.js +285 -0
  15. package/dist/cjs/examples/RxJSOperatorsExample.js.map +7 -0
  16. package/dist/esm/decorators/addEventListener.js +45 -7
  17. package/dist/esm/decorators/addEventListener.js.map +2 -2
  18. package/dist/esm/decorators/elementDefine.js +225 -6
  19. package/dist/esm/decorators/elementDefine.js.map +3 -3
  20. package/dist/esm/decorators/index.js +2 -0
  21. package/dist/esm/decorators/index.js.map +2 -2
  22. package/dist/esm/decorators/mutationObserver.js +85 -0
  23. package/dist/esm/decorators/mutationObserver.js.map +7 -0
  24. package/dist/esm/decorators/query.js +13 -1
  25. package/dist/esm/decorators/query.js.map +2 -2
  26. package/dist/esm/decorators/resizeObserver.js +85 -0
  27. package/dist/esm/decorators/resizeObserver.js.map +7 -0
  28. package/dist/esm/examples/RxJSOperatorsExample.js +266 -0
  29. package/dist/esm/examples/RxJSOperatorsExample.js.map +7 -0
  30. package/dist/esm-bundle/dooboostore-simple-web-component.esm.js +446 -13
  31. package/dist/esm-bundle/dooboostore-simple-web-component.esm.js.map +4 -4
  32. package/dist/types/decorators/addEventListener.d.ts +24 -5
  33. package/dist/types/decorators/addEventListener.d.ts.map +1 -1
  34. package/dist/types/decorators/elementDefine.d.ts +14 -0
  35. package/dist/types/decorators/elementDefine.d.ts.map +1 -1
  36. package/dist/types/decorators/index.d.ts +2 -0
  37. package/dist/types/decorators/index.d.ts.map +1 -1
  38. package/dist/types/decorators/mutationObserver.d.ts +36 -0
  39. package/dist/types/decorators/mutationObserver.d.ts.map +1 -0
  40. package/dist/types/decorators/query.d.ts +12 -0
  41. package/dist/types/decorators/query.d.ts.map +1 -1
  42. package/dist/types/decorators/resizeObserver.d.ts +37 -0
  43. package/dist/types/decorators/resizeObserver.d.ts.map +1 -0
  44. package/dist/types/examples/RxJSOperatorsExample.d.ts +94 -0
  45. package/dist/types/examples/RxJSOperatorsExample.d.ts.map +1 -0
  46. package/dist/umd-bundle/dooboostore-simple-web-component.umd.js +446 -13
  47. package/dist/umd-bundle/dooboostore-simple-web-component.umd.js.map +4 -4
  48. package/package.json +4 -4
  49. package/src/decorators/addEventListener.ts +52 -9
  50. package/src/decorators/elementDefine.ts +330 -47
  51. package/src/decorators/index.ts +2 -0
  52. package/src/decorators/mutationObserver.ts +128 -0
  53. package/src/decorators/query.ts +23 -0
  54. package/src/decorators/resizeObserver.ts +129 -0
  55. package/src/examples/RxJSOperatorsExample.ts +279 -0
  56. package/dist/cjs/elements/tt/SwcAppMixin.js +0 -1
  57. package/dist/cjs/elements/tt/SwcAppMixin.js.map +0 -7
  58. package/dist/cjs/elements/tt/SwcAsync.js +0 -1
  59. package/dist/cjs/elements/tt/SwcAsync.js.map +0 -7
  60. package/dist/cjs/elements/tt/SwcAsyncTemplate.js +0 -1
  61. package/dist/cjs/elements/tt/SwcAsyncTemplate.js.map +0 -7
  62. package/dist/cjs/elements/tt/SwcChoose.js +0 -1
  63. package/dist/cjs/elements/tt/SwcChoose.js.map +0 -7
  64. package/dist/cjs/elements/tt/SwcChooseTemplate.js +0 -1
  65. package/dist/cjs/elements/tt/SwcChooseTemplate.js.map +0 -7
  66. package/dist/cjs/elements/tt/SwcIf.js +0 -1
  67. package/dist/cjs/elements/tt/SwcIf.js.map +0 -7
  68. package/dist/cjs/elements/tt/SwcIfTemplate.js +0 -1
  69. package/dist/cjs/elements/tt/SwcIfTemplate.js.map +0 -7
  70. package/dist/cjs/elements/tt/SwcLoop.js +0 -1
  71. package/dist/cjs/elements/tt/SwcLoop.js.map +0 -7
  72. package/dist/cjs/elements/tt/SwcLoopTemplate.js +0 -1
  73. package/dist/cjs/elements/tt/SwcLoopTemplate.js.map +0 -7
  74. package/dist/cjs/elements/tt/SwcSubTemplates.js +0 -1
  75. package/dist/cjs/elements/tt/SwcSubTemplates.js.map +0 -7
  76. package/dist/cjs/elements/tt/register.js +0 -1
  77. package/dist/cjs/elements/tt/register.js.map +0 -7
  78. package/dist/esm/elements/tt/SwcAppMixin.js +0 -1
  79. package/dist/esm/elements/tt/SwcAppMixin.js.map +0 -7
  80. package/dist/esm/elements/tt/SwcAsync.js +0 -1
  81. package/dist/esm/elements/tt/SwcAsync.js.map +0 -7
  82. package/dist/esm/elements/tt/SwcAsyncTemplate.js +0 -1
  83. package/dist/esm/elements/tt/SwcAsyncTemplate.js.map +0 -7
  84. package/dist/esm/elements/tt/SwcChoose.js +0 -1
  85. package/dist/esm/elements/tt/SwcChoose.js.map +0 -7
  86. package/dist/esm/elements/tt/SwcChooseTemplate.js +0 -1
  87. package/dist/esm/elements/tt/SwcChooseTemplate.js.map +0 -7
  88. package/dist/esm/elements/tt/SwcIf.js +0 -1
  89. package/dist/esm/elements/tt/SwcIf.js.map +0 -7
  90. package/dist/esm/elements/tt/SwcIfTemplate.js +0 -1
  91. package/dist/esm/elements/tt/SwcIfTemplate.js.map +0 -7
  92. package/dist/esm/elements/tt/SwcLoop.js +0 -1
  93. package/dist/esm/elements/tt/SwcLoop.js.map +0 -7
  94. package/dist/esm/elements/tt/SwcLoopTemplate.js +0 -1
  95. package/dist/esm/elements/tt/SwcLoopTemplate.js.map +0 -7
  96. package/dist/esm/elements/tt/SwcSubTemplates.js +0 -1
  97. package/dist/esm/elements/tt/SwcSubTemplates.js.map +0 -7
  98. package/dist/esm/elements/tt/register.js +0 -1
  99. package/dist/esm/elements/tt/register.js.map +0 -7
  100. package/dist/types/elements/tt/SwcAppMixin.d.ts +0 -1
  101. package/dist/types/elements/tt/SwcAppMixin.d.ts.map +0 -1
  102. package/dist/types/elements/tt/SwcAsync.d.ts +0 -1
  103. package/dist/types/elements/tt/SwcAsync.d.ts.map +0 -1
  104. package/dist/types/elements/tt/SwcAsyncTemplate.d.ts +0 -1
  105. package/dist/types/elements/tt/SwcAsyncTemplate.d.ts.map +0 -1
  106. package/dist/types/elements/tt/SwcChoose.d.ts +0 -1
  107. package/dist/types/elements/tt/SwcChoose.d.ts.map +0 -1
  108. package/dist/types/elements/tt/SwcChooseTemplate.d.ts +0 -1
  109. package/dist/types/elements/tt/SwcChooseTemplate.d.ts.map +0 -1
  110. package/dist/types/elements/tt/SwcIf.d.ts +0 -1
  111. package/dist/types/elements/tt/SwcIf.d.ts.map +0 -1
  112. package/dist/types/elements/tt/SwcIfTemplate.d.ts +0 -1
  113. package/dist/types/elements/tt/SwcIfTemplate.d.ts.map +0 -1
  114. package/dist/types/elements/tt/SwcLoop.d.ts +0 -1
  115. package/dist/types/elements/tt/SwcLoop.d.ts.map +0 -1
  116. package/dist/types/elements/tt/SwcLoopTemplate.d.ts +0 -1
  117. package/dist/types/elements/tt/SwcLoopTemplate.d.ts.map +0 -1
  118. package/dist/types/elements/tt/SwcSubTemplates.d.ts +0 -1
  119. package/dist/types/elements/tt/SwcSubTemplates.d.ts.map +0 -1
  120. package/dist/types/elements/tt/register.d.ts +0 -1
  121. package/dist/types/elements/tt/register.d.ts.map +0 -1
  122. package/src/elements/tt/SwcAppMixin.ts +0 -13
  123. package/src/elements/tt/SwcAsync.ts +0 -139
  124. package/src/elements/tt/SwcAsyncTemplate.ts +0 -126
  125. package/src/elements/tt/SwcChoose.ts +0 -182
  126. package/src/elements/tt/SwcChooseTemplate.ts +0 -229
  127. package/src/elements/tt/SwcIf.ts +0 -145
  128. package/src/elements/tt/SwcIfTemplate.ts +0 -158
  129. package/src/elements/tt/SwcLoop.ts +0 -222
  130. package/src/elements/tt/SwcLoopTemplate.ts +0 -255
  131. package/src/elements/tt/SwcSubTemplates.ts +0 -6
  132. package/src/elements/tt/register.ts +0 -720
@@ -1,158 +0,0 @@
1
- // import { changedAttributeThis } from '../../decorators/changedAttributeThis';
2
- // import { SwcUtils } from '../../utils/Utils';
3
- // import { FunctionUtils, ActionExpression } from '@dooboostore/core';
4
- // import { ConvertUtils } from '@dooboostore/core-web';
5
- // import { SwcIfInterface } from '../../types';
6
- // import { attributeThis, getAttributeValue } from '../../decorators';
7
- //
8
- // export class SwcIfTemplate extends HTMLTemplateElement implements SwcIfInterface {
9
- // // id =
10
- // // @attributeThis('value')
11
- // _value: any;
12
- //
13
- // @attributeThis('replace-wrap-start')
14
- // _replaceWrapStart: string | null;
15
- // @attributeThis('replace-wrap-end')
16
- // _replaceWrapEnd: string | null;
17
- //
18
- // @attributeThis('skip-if-same')
19
- // _skipIfSame: string | null;
20
- //
21
- // private _nodes: Node[] = [];
22
- //
23
- // get value(): boolean {
24
- // return this._value;
25
- // }
26
- //
27
- // set value(nv: any) {
28
- // // this._value = nv;
29
- // this.refresh(nv);
30
- // }
31
- //
32
- // constructor() {
33
- // super();
34
- // }
35
- //
36
- // connectedCallback() {
37
- // if (!this.id) {
38
- // throw new Error('[SWC] SwcIf must have an "id" attribute for reliable cleanup.');
39
- // }
40
- // if (this.hasAttribute('value')) {
41
- // this.refresh();
42
- // }
43
- // }
44
- //
45
- // @changedAttributeThis('value')
46
- // private setValue(value: any, o: string, n: string) {
47
- // if (!this.id) return;
48
- // this._value = value;
49
- // this.refresh(this._value);
50
- // }
51
- //
52
- // // @changedAttributeThis('replace-wrap')
53
- // // private setReplaceWrap(replaceWrapAttr?: string | null) {
54
- // // this.refresh();
55
- // // }
56
- //
57
- // private replaceExpressions(html: string, groupArgs: any, context: any, wrap: {start: string, end: string}): string {
58
- // let config: any = undefined;
59
- // if (wrap) {
60
- // config = {
61
- // expression: {
62
- // replace: { start: `${wrap.start}`, end: `${wrap.end}` },
63
- // callReturn: { start: `${wrap.start}=`, end: `${wrap.end}` },
64
- // call: { start: `${wrap.start}@`, end: `${wrap.end}` }
65
- // }
66
- // };
67
- // }
68
- // const ae = new ActionExpression(html, config);
69
- // const win = this.ownerDocument?.defaultView || window;
70
- //
71
- // // @ts-ignore
72
- // for (const expr of ae.getExpressions('replace')) {
73
- // try {
74
- // const value = FunctionUtils.executeReturn({
75
- // script: ConvertUtils.decodeHtmlEntity(expr.script, win.document),
76
- // context,
77
- // args: groupArgs
78
- // });
79
- // ae.replace(expr, String(value));
80
- // } catch (e) {
81
- // console.error(`[SWC] Failed to execute ${expr.original}:`, e);
82
- // }
83
- // }
84
- // return ae.getUnprocessedTemplate();
85
- // }
86
- //
87
- // refresh(value?: any) {
88
- // if (!this.id) return;
89
- // const targetValue = value !== undefined ? value : (getAttributeValue(this, 'value') ?? this._value);
90
- //
91
- // // skip-if-same 속성이 존재하고(true/빈 문자열), 이전 값과 새로운 값이 완전히 동일하면 렌더링 스킵!
92
- // if (this.hasAttribute('skip-if-same') && this._value === targetValue && (this._nodes.length > 0 || this.nextSibling)) {
93
- // if (this._value === targetValue && this._nodes.length > 0) return;
94
- // }
95
- //
96
- // this.cleanup();
97
- // this._value = targetValue;
98
- //
99
- // const portal = this.parentElement;
100
- // if (!portal || !this._value) return;
101
- //
102
- // const win = this.ownerDocument?.defaultView || window;
103
- // const helperSet = SwcUtils.getHelperAndHostSet(win, this);
104
- //
105
- // let htmlString = this.innerHTML;
106
- // const groupArgs = { ...helperSet, $value: this._value, $templateHost: this };
107
- //
108
- // htmlString = this.replaceExpressions(htmlString, groupArgs, this, {start:this._replaceWrapStart ?? '{#{', end: this._replaceWrapEnd ?? '}#}'});
109
- //
110
- // const result = this.ownerDocument?.createElement('template') || document.createElement('template');
111
- // result.innerHTML = htmlString;
112
- // const processedFragment = result.content;
113
- //
114
- // this._nodes = Array.from(processedFragment.childNodes);
115
- // this._nodes.forEach((node: any) => {
116
- // if (node instanceof HTMLElement) (node as any).__swc_template_host = this;
117
- // });
118
- //
119
- // // Add endpoint comment node
120
- // const endpointText = `swc-if endpoint id:${this.id}`;
121
- // const endpoint = this.ownerDocument?.createComment(endpointText) || document.createComment(endpointText);
122
- // processedFragment.appendChild(endpoint);
123
- // this._nodes.push(endpoint);
124
- //
125
- // portal.insertBefore(processedFragment, this.nextSibling);
126
- // }
127
- //
128
- // private cleanup() {
129
- // if (this.id) {
130
- // const portal = this.parentElement;
131
- // if (portal) {
132
- // const endpointText = `swc-if endpoint id:${this.id}`;
133
- // let current = this.nextSibling;
134
- // const toRemove: Node[] = [];
135
- //
136
- // while (current) {
137
- // toRemove.push(current);
138
- // if (current.nodeType === 8 && (current as Comment).data === endpointText) {
139
- // // Found the endpoint!
140
- // toRemove.forEach(n => {
141
- // const realNode = (n as any).__upgraded_instance || n;
142
- // if (realNode.parentElement) {
143
- // realNode.parentElement.removeChild(realNode);
144
- // }
145
- // });
146
- // break;
147
- // }
148
- // current = current.nextSibling;
149
- // }
150
- // }
151
- // }
152
- // this._nodes = [];
153
- // }
154
- //
155
- // disconnectedCallback() {
156
- // this.cleanup();
157
- // }
158
- // }
@@ -1,222 +0,0 @@
1
- // import {SwcUtils} from '../../utils/Utils';
2
- // import {ActionExpression, FunctionUtils} from '@dooboostore/core';
3
- // import {ConvertUtils} from '@dooboostore/core-web';
4
- // import {elementDefine, getAttributeValue} from '../../decorators';
5
- //
6
- // export default async (w: Window) => {
7
- // const tagName = 'swc-loop';
8
- // const existing = w.customElements.get(tagName);
9
- // if (existing) return existing;
10
- //
11
- // @elementDefine(tagName, { window: w })
12
- // class SwcLoop extends w.HTMLElement {
13
- //
14
- // private _value: any[] = [];
15
- // private _replaceWrapStart: string | null = null;
16
- // private _replaceWrapEnd: string | null = null;
17
- // private _nodeGroups: Node[][] = [];
18
- // private innerHTMLUserData: string;
19
- //
20
- // static get observedAttributes() {
21
- // return ['value', 'replace-wrap-start', 'replace-wrap-end'];
22
- // }
23
- //
24
- // get value(): any[] {
25
- // return this._value;
26
- // }
27
- //
28
- // set value(nv: any[]) {
29
- // this._value = nv;
30
- // this.refresh(nv);
31
- // }
32
- //
33
- // getValue(index: number) {
34
- // return this._value?.[index];
35
- // }
36
- //
37
- // connectedCallback() {
38
- // this.style.display = 'none';
39
- // this.innerHTMLUserData = this.innerHTML;
40
- // console.log('iiiiiiiiiiii', this.innerHTMLUserData, this.innerHTML,)
41
- // // this.innerHTML='';
42
- // if (!this.id) {
43
- // throw new Error('[SWC] SwcLoop must have an "id" attribute for reliable cleanup.');
44
- // }
45
- // if (this.hasAttribute('value')) {
46
- // this.refresh();
47
- // }
48
- // }
49
- //
50
- // attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
51
- // switch (name) {
52
- // case 'value':
53
- // this._value = newValue ? JSON.parse(newValue) : [];
54
- // this.refresh(this._value);
55
- // break;
56
- // case 'replace-wrap-start':
57
- // this._replaceWrapStart = newValue;
58
- // break;
59
- // case 'replace-wrap-end':
60
- // this._replaceWrapEnd = newValue;
61
- // break;
62
- // }
63
- // }
64
- //
65
- // private replaceExpressions(html: string, groupArgs: any, context: any, wrap: { start: string, end: string }): string {
66
- // let config: any = undefined;
67
- // config = {
68
- // expression: {
69
- // replace: {start: `${wrap.start}`, end: `${wrap.end}`},
70
- // callReturn: {start: `${wrap.start}=`, end: `${wrap.end}`},
71
- // call: {start: `${wrap.start}@`, end: `${wrap.end}`}
72
- // }
73
- // };
74
- // const ae = new ActionExpression(html, config);
75
- // const win = this.ownerDocument?.defaultView || window;
76
- // const expressions = ae.getExpressions('replace');
77
- // for (const expr of expressions) {
78
- // const script = ConvertUtils.decodeHtmlEntity(expr.script, win.document);
79
- // try {
80
- // const value = FunctionUtils.executeReturn({
81
- // script: script,
82
- // context,
83
- // args: groupArgs
84
- // });
85
- // ae.replace(expr, String(value));
86
- // } catch (e) {
87
- // console.error(`[SWC] Failed to execute ${expr.original}:`, e);
88
- // }
89
- // }
90
- // return ae.getUnprocessedTemplate();
91
- // }
92
- //
93
- // private createFragmentAndNodes(items: any[], helperSet: any, startIndex: number = 0): { fragment: DocumentFragment; newNodesGroup: Node[][] } {
94
- // const win = this.ownerDocument?.defaultView || window;
95
- // const fragment = win.document.createDocumentFragment();
96
- // const newNodesGroup: Node[][] = [];
97
- // items.forEach((item, i) => {
98
- // const index = startIndex + i;
99
- // let htmlString = this.innerHTMLUserData;
100
- // const groupArgs = {...helperSet, $item: item, $index: index, $value: this._value};
101
- // htmlString = this.replaceExpressions(htmlString, groupArgs, this, {start: this._replaceWrapStart ?? '{#{', end: this._replaceWrapEnd ?? '}#}'});
102
- // const temp = this.ownerDocument?.createElement('template') || document.createElement('template');
103
- // temp.innerHTML = htmlString;
104
- // const content = temp.content;
105
- // const nodes = Array.from(content.childNodes);
106
- // const setTemplateHost = (element: HTMLElement) => {
107
- // (element as any).__swc_template_host = this;
108
- // Array.from(element.children).forEach((child: any) => {
109
- // if (child instanceof HTMLElement) {
110
- // setTemplateHost(child);
111
- // }
112
- // });
113
- // };
114
- // nodes.forEach((node: any) => {
115
- // if (node instanceof HTMLElement) {
116
- // setTemplateHost(node as HTMLElement);
117
- // }
118
- // });
119
- // newNodesGroup.push(nodes);
120
- // fragment.appendChild(content);
121
- // });
122
- // return {fragment, newNodesGroup};
123
- // }
124
- //
125
- // appendItem(...items: any[]) {
126
- // if (!items || items.length <= 0) return;
127
- // const portal = SwcUtils.getParentContainer(this);
128
- // if (!portal) return;
129
- // const win = this.ownerDocument?.defaultView || window;
130
- // const helperSet = SwcUtils.getHelperAndHostSet(win, this);
131
- // const startIndex = this._value ? this._value.length : 0;
132
- // if (this._value !== items) {
133
- // this._value = [...(this._value || []), ...items];
134
- // }
135
- // const {fragment, newNodesGroup} = this.createFragmentAndNodes(items, helperSet, startIndex);
136
- // this._nodeGroups.push(...newNodesGroup);
137
- // let insertReference: Node | null = this.nextSibling;
138
- // if (this._nodeGroups.length > items.length) {
139
- // const lastExistingGroup = this._nodeGroups[this._nodeGroups.length - items.length - 1];
140
- // if (lastExistingGroup && lastExistingGroup.length > 0) {
141
- // const lastNode = lastExistingGroup[lastExistingGroup.length - 1];
142
- // insertReference = lastNode.nextSibling;
143
- // }
144
- // }
145
- // const endpointText = `swc-loop endpoint id:${this.id}`;
146
- // let current = this.nextSibling;
147
- // let endpointNode: Node | null = null;
148
- // while (current) {
149
- // if (current.nodeType === 8 && (current as Comment).data === endpointText) {
150
- // endpointNode = current;
151
- // break;
152
- // }
153
- // current = current.nextSibling;
154
- // }
155
- // portal.insertBefore(fragment, endpointNode || this.nextSibling);
156
- // }
157
- //
158
- // async prependItem(...items: any[]) {
159
- // if (!items || items.length <= 0) return;
160
- // const portal = SwcUtils.getParentContainer(this);
161
- // if (!portal) return;
162
- // const win = this.ownerDocument?.defaultView || window;
163
- // const helperSet = SwcUtils.getHelperAndHostSet(win, this);
164
- // if (this._value !== items) {
165
- // this._value = [...items, ...(this._value || [])];
166
- // }
167
- // const {fragment, newNodesGroup} = this.createFragmentAndNodes(items, helperSet, 0);
168
- // this._nodeGroups = [...newNodesGroup, ...this._nodeGroups];
169
- // portal.insertBefore(fragment, this.nextSibling);
170
- // }
171
- //
172
- // refresh(value?: any) {
173
- // if (!this.id) return;
174
- // const targetValue = value !== undefined ? value : (getAttributeValue(this, 'value') ?? this._value ?? []);
175
- // this.cleanup();
176
- // this._value = targetValue;
177
- // if (!this._value || this._value.length <= 0) return;
178
- // const win = this.ownerDocument?.defaultView || window;
179
- // const helperSet = SwcUtils.getHelperAndHostSet(win, this);
180
- // const groupArgs = {...helperSet, $value: value, $templateHost: this};
181
- // const {fragment, newNodesGroup} = this.createFragmentAndNodes(this._value, groupArgs, 0);
182
- // this._nodeGroups = newNodesGroup;
183
- // const portal = SwcUtils.getParentContainer(this);
184
- // if (portal) {
185
- // const endpointText = `swc-loop endpoint id:${this.id}`;
186
- // const endpoint = this.ownerDocument?.createComment(endpointText) || document.createComment(endpointText);
187
- // fragment.appendChild(endpoint);
188
- // portal.insertBefore(fragment, this.nextSibling);
189
- // }
190
- // }
191
- //
192
- // private cleanup() {
193
- // if (this.id) {
194
- // const portal = SwcUtils.getParentContainer(this);
195
- // if (portal) {
196
- // const endpointText = `swc-loop endpoint id:${this.id}`;
197
- // let current = this.nextSibling;
198
- // const toRemove: Node[] = [];
199
- // while (current) {
200
- // toRemove.push(current);
201
- // if (current.nodeType === 8 && (current as Comment).data === endpointText) {
202
- // toRemove.forEach(n => {
203
- // const realNode = (n as any).__upgraded_instance || n;
204
- // if (realNode.parentElement) {
205
- // realNode.parentElement.removeChild(realNode);
206
- // }
207
- // });
208
- // break;
209
- // }
210
- // current = current.nextSibling;
211
- // }
212
- // }
213
- // }
214
- // this._nodeGroups = [];
215
- // }
216
- //
217
- // disconnectedCallback() {
218
- // this.cleanup();
219
- // }
220
- // }
221
- // return w.customElements.whenDefined(tagName);
222
- // }
@@ -1,255 +0,0 @@
1
- // import { changedAttributeThis } from '../../decorators/changedAttributeThis';
2
- // import { SwcUtils } from '../../utils/Utils';
3
- // import { FunctionUtils, ActionExpression } from '@dooboostore/core';
4
- // import { ConvertUtils } from '@dooboostore/core-web';
5
- // import { attributeThis, getAttributeValue } from '../../decorators';
6
- //
7
- // export class SwcLoopTemplate extends HTMLTemplateElement {
8
- // _value: any[] = [];
9
- //
10
- // @attributeThis('replace-wrap-start')
11
- // _replaceWrapStart: string | null;
12
- // @attributeThis('replace-wrap-end')
13
- // _replaceWrapEnd: string | null;
14
- //
15
- // private _nodeGroups: Node[][] = [];
16
- //
17
- // get value(): any[] {
18
- // return this._value;
19
- // }
20
- //
21
- // set value(nv: any[]) {
22
- // this._value = nv;
23
- // this.refresh(nv);
24
- // }
25
- //
26
- // getValue(index: number) {
27
- // return this._value?.[index];
28
- // }
29
- //
30
- // constructor() {
31
- // super();
32
- // // console.log('swc SwcLoop constructor called!');
33
- // // console.log('swc SwcLoop', this.getAttribute('value'));
34
- // }
35
- //
36
- // connectedCallback() {
37
- // if (!this.id) {
38
- // throw new Error('[SWC] SwcLoop must have an "id" attribute for reliable cleanup.');
39
- // }
40
- // if (this.hasAttribute('value')) {
41
- // this.refresh();
42
- // }
43
- // }
44
- //
45
- // @changedAttributeThis('value')
46
- // private setValue(value: any, o: string, n: string) {
47
- // if (!this.id) return;
48
- // this._value = value;
49
- // this.refresh(this._value);
50
- // }
51
- //
52
- // // @changedAttributeThis('replace-wrap')
53
- // // private setReplaceWrap(replaceWrapAttr?: string | null) {
54
- // // this.refresh();
55
- // // }
56
- //
57
- // private replaceExpressions(html: string, groupArgs: any, context: any, wrap: {start: string, end: string}): string {
58
- // let config: any = undefined;
59
- // config = {
60
- // expression: {
61
- // replace: { start: `${wrap.start}`, end: `${wrap.end}` },
62
- // callReturn: { start: `${wrap.start}=`, end: `${wrap.end}` },
63
- // call: { start: `${wrap.start}@`, end: `${wrap.end}` }
64
- // }
65
- // };
66
- // const ae = new ActionExpression(html, config);
67
- // const win = this.ownerDocument?.defaultView || window;
68
- //
69
- // // @ts-ignore
70
- // const expressions = ae.getExpressions('replace');
71
- // for (const expr of expressions) {
72
- // const script = ConvertUtils.decodeHtmlEntity(expr.script, win.document);
73
- // try {
74
- // const value = FunctionUtils.executeReturn({
75
- // script: script,
76
- // context,
77
- // args: groupArgs
78
- // });
79
- // ae.replace(expr, String(value));
80
- // } catch (e) {
81
- // console.error(`[SWC] Failed to execute ${expr.original}:`, e);
82
- // }
83
- // }
84
- // return ae.getUnprocessedTemplate();
85
- // }
86
- //
87
- // private createFragmentAndNodes(items: any[], helperSet: any, startIndex: number = 0): { fragment: DocumentFragment; newNodesGroup: Node[][] } {
88
- // const win = this.ownerDocument?.defaultView || window;
89
- // const fragment = win.document.createDocumentFragment();
90
- // const newNodesGroup: Node[][] = [];
91
- //
92
- // items.forEach((item, i) => {
93
- // const index = startIndex + i;
94
- // let htmlString = this.innerHTML;
95
- // const groupArgs = { ...helperSet, $item: item, $index: index, $value: this._value };
96
- //
97
- // htmlString = this.replaceExpressions(htmlString, groupArgs, this, {start:this._replaceWrapStart ?? '{#{', end: this._replaceWrapEnd ?? '}#}'});
98
- //
99
- // const temp = this.ownerDocument?.createElement('template') || document.createElement('template');
100
- // temp.innerHTML = htmlString;
101
- //
102
- // const content = temp.content;
103
- // const nodes = Array.from(content.childNodes);
104
- //
105
- // const setTemplateHost = (element: HTMLElement) => {
106
- // (element as any).__swc_template_host = this;
107
- // Array.from(element.children).forEach((child: any) => {
108
- // if (child instanceof HTMLElement) {
109
- // setTemplateHost(child);
110
- // }
111
- // });
112
- // };
113
- //
114
- // nodes.forEach((node: any) => {
115
- // if (node instanceof HTMLElement) {
116
- // setTemplateHost(node as HTMLElement);
117
- // }
118
- // });
119
- // newNodesGroup.push(nodes);
120
- // fragment.appendChild(content);
121
- // });
122
- //
123
- // return { fragment, newNodesGroup };
124
- // }
125
- //
126
- // appendItem(...items: any[]) {
127
- // if (!items || items.length <= 0) return;
128
- // const portal = SwcUtils.getParentContainer(this);
129
- // if (!portal) return;
130
- //
131
- // const win = this.ownerDocument?.defaultView || window;
132
- // const helperSet = SwcUtils.getHelperAndHostSet(win, this);
133
- //
134
- // const startIndex = this._value ? this._value.length : 0;
135
- //
136
- // // 내부 상태(value) 업데이트 (기존 배열에 새 아이템 추가)
137
- // if (this._value !== items) {
138
- // this._value = [...(this._value || []), ...items];
139
- // }
140
- //
141
- // const { fragment, newNodesGroup } = this.createFragmentAndNodes(items, helperSet, startIndex);
142
- // this._nodeGroups.push(...newNodesGroup);
143
- //
144
- // // console.log('뭐야 씨발');
145
- // // append 위치 계산: 기존에 그려진 마지막 노드 뒤에 삽입, 없으면 템플릿 바로 뒤에 삽입
146
- // let insertReference: Node | null = this.nextSibling;
147
- // if (this._nodeGroups.length > items.length) {
148
- // const lastExistingGroup = this._nodeGroups[this._nodeGroups.length - items.length - 1];
149
- // if (lastExistingGroup && lastExistingGroup.length > 0) {
150
- // const lastNode = lastExistingGroup[lastExistingGroup.length - 1];
151
- // insertReference = lastNode.nextSibling;
152
- // }
153
- // }
154
- //
155
- // // SSR endpoint handling: if we append, we should find the old endpoint and remove it or insert before it.
156
- // // However, it's safer to just cleanup and redraw for now, OR find the endpoint.
157
- // // For appendItem, we find the endpoint comment and insert before it.
158
- // const endpointText = `swc-loop endpoint id:${this.id}`;
159
- // let current = this.nextSibling;
160
- // let endpointNode: Node | null = null;
161
- // while (current) {
162
- // if (current.nodeType === 8 && (current as Comment).data === endpointText) {
163
- // endpointNode = current;
164
- // break;
165
- // }
166
- // current = current.nextSibling;
167
- // }
168
- //
169
- // portal.insertBefore(fragment, endpointNode || this.nextSibling);
170
- // }
171
- //
172
- // async prependItem(...items: any[]) {
173
- // if (!items || items.length <= 0) return;
174
- // const portal = SwcUtils.getParentContainer(this);
175
- // if (!portal) return;
176
- //
177
- // const win = this.ownerDocument?.defaultView || window;
178
- // const helperSet = SwcUtils.getHelperAndHostSet(win, this);
179
- //
180
- // // 내부 상태(value) 업데이트 (기존 배열의 앞쪽에 새 아이템 추가)
181
- // if (this._value !== items) {
182
- // this._value = [...items, ...(this._value || [])];
183
- // }
184
- //
185
- // const { fragment, newNodesGroup } = this.createFragmentAndNodes(items, helperSet, 0);
186
- //
187
- // // 기존의 nodeGroups 배열 맨 앞에 새로운 그룹들을 추가
188
- // this._nodeGroups = [...newNodesGroup, ...this._nodeGroups];
189
- //
190
- // // prepend 위치: 이 템플릿(SwcLoop) 노드의 바로 다음 위치 (가장 위)
191
- // portal.insertBefore(fragment, this.nextSibling);
192
- // }
193
- //
194
- // refresh(value?: any) {
195
- // if (!this.id) return;
196
- // // 1. 그릴 대상 확정
197
- // const targetValue = value !== undefined ? value : (getAttributeValue(this, 'value') ?? this._value ?? []);
198
- //
199
- // // 2. 화면 정리
200
- // this.cleanup();
201
- //
202
- // // 3. 상태 완전 교체 (이어붙이지 않음!)
203
- // this._value = targetValue;
204
- //
205
- // if (!this._value || this._value.length <= 0) return;
206
- //
207
- // // 4. 화면 다시 그리기 (appendItem을 쓰지 않고 바로 그리기)
208
- // const win = this.ownerDocument?.defaultView || window;
209
- // const helperSet = SwcUtils.getHelperAndHostSet(win, this);
210
- // helperSet.$templateHost = this;
211
- // const { fragment, newNodesGroup } = this.createFragmentAndNodes(this._value, helperSet, 0);
212
- //
213
- // this._nodeGroups = newNodesGroup;
214
- // const portal = SwcUtils.getParentContainer(this);
215
- // if (portal) {
216
- // // Add endpoint comment node
217
- // const endpointText = `swc-loop endpoint id:${this.id}`;
218
- // const endpoint = this.ownerDocument?.createComment(endpointText) || document.createComment(endpointText);
219
- // fragment.appendChild(endpoint);
220
- //
221
- // portal.insertBefore(fragment, this.nextSibling);
222
- // }
223
- // }
224
- //
225
- // private cleanup() {
226
- // if (this.id) {
227
- // const portal = SwcUtils.getParentContainer(this);
228
- // if (portal) {
229
- // const endpointText = `swc-loop endpoint id:${this.id}`;
230
- // let current = this.nextSibling;
231
- // const toRemove: Node[] = [];
232
- //
233
- // while (current) {
234
- // toRemove.push(current);
235
- // if (current.nodeType === 8 && (current as Comment).data === endpointText) {
236
- // // Found the endpoint!
237
- // toRemove.forEach(n => {
238
- // const realNode = (n as any).__upgraded_instance || n;
239
- // if (realNode.parentElement) {
240
- // realNode.parentElement.removeChild(realNode);
241
- // }
242
- // });
243
- // break;
244
- // }
245
- // current = current.nextSibling;
246
- // }
247
- // }
248
- // }
249
- // this._nodeGroups = [];
250
- // }
251
- //
252
- // disconnectedCallback() {
253
- // this.cleanup();
254
- // }
255
- // }
@@ -1,6 +0,0 @@
1
- // class SwcLoading extends HTMLTemplateElement {}
2
- // class SwcError extends HTMLTemplateElement {}
3
- // class SwcSuccess extends HTMLTemplateElement {}
4
- // class SwcWhen extends HTMLTemplateElement {}
5
- // class SwcOtherwise extends HTMLTemplateElement {}
6
- // class SwcDefault extends HTMLTemplateElement {}