@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.
- package/README.md +109 -11
- package/dist/cjs/decorators/addEventListener.js +45 -7
- package/dist/cjs/decorators/addEventListener.js.map +2 -2
- package/dist/cjs/decorators/elementDefine.js +225 -6
- package/dist/cjs/decorators/elementDefine.js.map +3 -3
- package/dist/cjs/decorators/index.js +2 -0
- package/dist/cjs/decorators/index.js.map +2 -2
- package/dist/cjs/decorators/mutationObserver.js +104 -0
- package/dist/cjs/decorators/mutationObserver.js.map +7 -0
- package/dist/cjs/decorators/query.js +13 -1
- package/dist/cjs/decorators/query.js.map +2 -2
- package/dist/cjs/decorators/resizeObserver.js +104 -0
- package/dist/cjs/decorators/resizeObserver.js.map +7 -0
- package/dist/cjs/examples/RxJSOperatorsExample.js +285 -0
- package/dist/cjs/examples/RxJSOperatorsExample.js.map +7 -0
- package/dist/esm/decorators/addEventListener.js +45 -7
- package/dist/esm/decorators/addEventListener.js.map +2 -2
- package/dist/esm/decorators/elementDefine.js +225 -6
- package/dist/esm/decorators/elementDefine.js.map +3 -3
- package/dist/esm/decorators/index.js +2 -0
- package/dist/esm/decorators/index.js.map +2 -2
- package/dist/esm/decorators/mutationObserver.js +85 -0
- package/dist/esm/decorators/mutationObserver.js.map +7 -0
- package/dist/esm/decorators/query.js +13 -1
- package/dist/esm/decorators/query.js.map +2 -2
- package/dist/esm/decorators/resizeObserver.js +85 -0
- package/dist/esm/decorators/resizeObserver.js.map +7 -0
- package/dist/esm/examples/RxJSOperatorsExample.js +266 -0
- package/dist/esm/examples/RxJSOperatorsExample.js.map +7 -0
- package/dist/esm-bundle/dooboostore-simple-web-component.esm.js +446 -13
- package/dist/esm-bundle/dooboostore-simple-web-component.esm.js.map +4 -4
- package/dist/types/decorators/addEventListener.d.ts +24 -5
- package/dist/types/decorators/addEventListener.d.ts.map +1 -1
- package/dist/types/decorators/elementDefine.d.ts +14 -0
- package/dist/types/decorators/elementDefine.d.ts.map +1 -1
- package/dist/types/decorators/index.d.ts +2 -0
- package/dist/types/decorators/index.d.ts.map +1 -1
- package/dist/types/decorators/mutationObserver.d.ts +36 -0
- package/dist/types/decorators/mutationObserver.d.ts.map +1 -0
- package/dist/types/decorators/query.d.ts +12 -0
- package/dist/types/decorators/query.d.ts.map +1 -1
- package/dist/types/decorators/resizeObserver.d.ts +37 -0
- package/dist/types/decorators/resizeObserver.d.ts.map +1 -0
- package/dist/types/examples/RxJSOperatorsExample.d.ts +94 -0
- package/dist/types/examples/RxJSOperatorsExample.d.ts.map +1 -0
- package/dist/umd-bundle/dooboostore-simple-web-component.umd.js +446 -13
- package/dist/umd-bundle/dooboostore-simple-web-component.umd.js.map +4 -4
- package/package.json +4 -4
- package/src/decorators/addEventListener.ts +52 -9
- package/src/decorators/elementDefine.ts +330 -47
- package/src/decorators/index.ts +2 -0
- package/src/decorators/mutationObserver.ts +128 -0
- package/src/decorators/query.ts +23 -0
- package/src/decorators/resizeObserver.ts +129 -0
- package/src/examples/RxJSOperatorsExample.ts +279 -0
- package/dist/cjs/elements/tt/SwcAppMixin.js +0 -1
- package/dist/cjs/elements/tt/SwcAppMixin.js.map +0 -7
- package/dist/cjs/elements/tt/SwcAsync.js +0 -1
- package/dist/cjs/elements/tt/SwcAsync.js.map +0 -7
- package/dist/cjs/elements/tt/SwcAsyncTemplate.js +0 -1
- package/dist/cjs/elements/tt/SwcAsyncTemplate.js.map +0 -7
- package/dist/cjs/elements/tt/SwcChoose.js +0 -1
- package/dist/cjs/elements/tt/SwcChoose.js.map +0 -7
- package/dist/cjs/elements/tt/SwcChooseTemplate.js +0 -1
- package/dist/cjs/elements/tt/SwcChooseTemplate.js.map +0 -7
- package/dist/cjs/elements/tt/SwcIf.js +0 -1
- package/dist/cjs/elements/tt/SwcIf.js.map +0 -7
- package/dist/cjs/elements/tt/SwcIfTemplate.js +0 -1
- package/dist/cjs/elements/tt/SwcIfTemplate.js.map +0 -7
- package/dist/cjs/elements/tt/SwcLoop.js +0 -1
- package/dist/cjs/elements/tt/SwcLoop.js.map +0 -7
- package/dist/cjs/elements/tt/SwcLoopTemplate.js +0 -1
- package/dist/cjs/elements/tt/SwcLoopTemplate.js.map +0 -7
- package/dist/cjs/elements/tt/SwcSubTemplates.js +0 -1
- package/dist/cjs/elements/tt/SwcSubTemplates.js.map +0 -7
- package/dist/cjs/elements/tt/register.js +0 -1
- package/dist/cjs/elements/tt/register.js.map +0 -7
- package/dist/esm/elements/tt/SwcAppMixin.js +0 -1
- package/dist/esm/elements/tt/SwcAppMixin.js.map +0 -7
- package/dist/esm/elements/tt/SwcAsync.js +0 -1
- package/dist/esm/elements/tt/SwcAsync.js.map +0 -7
- package/dist/esm/elements/tt/SwcAsyncTemplate.js +0 -1
- package/dist/esm/elements/tt/SwcAsyncTemplate.js.map +0 -7
- package/dist/esm/elements/tt/SwcChoose.js +0 -1
- package/dist/esm/elements/tt/SwcChoose.js.map +0 -7
- package/dist/esm/elements/tt/SwcChooseTemplate.js +0 -1
- package/dist/esm/elements/tt/SwcChooseTemplate.js.map +0 -7
- package/dist/esm/elements/tt/SwcIf.js +0 -1
- package/dist/esm/elements/tt/SwcIf.js.map +0 -7
- package/dist/esm/elements/tt/SwcIfTemplate.js +0 -1
- package/dist/esm/elements/tt/SwcIfTemplate.js.map +0 -7
- package/dist/esm/elements/tt/SwcLoop.js +0 -1
- package/dist/esm/elements/tt/SwcLoop.js.map +0 -7
- package/dist/esm/elements/tt/SwcLoopTemplate.js +0 -1
- package/dist/esm/elements/tt/SwcLoopTemplate.js.map +0 -7
- package/dist/esm/elements/tt/SwcSubTemplates.js +0 -1
- package/dist/esm/elements/tt/SwcSubTemplates.js.map +0 -7
- package/dist/esm/elements/tt/register.js +0 -1
- package/dist/esm/elements/tt/register.js.map +0 -7
- package/dist/types/elements/tt/SwcAppMixin.d.ts +0 -1
- package/dist/types/elements/tt/SwcAppMixin.d.ts.map +0 -1
- package/dist/types/elements/tt/SwcAsync.d.ts +0 -1
- package/dist/types/elements/tt/SwcAsync.d.ts.map +0 -1
- package/dist/types/elements/tt/SwcAsyncTemplate.d.ts +0 -1
- package/dist/types/elements/tt/SwcAsyncTemplate.d.ts.map +0 -1
- package/dist/types/elements/tt/SwcChoose.d.ts +0 -1
- package/dist/types/elements/tt/SwcChoose.d.ts.map +0 -1
- package/dist/types/elements/tt/SwcChooseTemplate.d.ts +0 -1
- package/dist/types/elements/tt/SwcChooseTemplate.d.ts.map +0 -1
- package/dist/types/elements/tt/SwcIf.d.ts +0 -1
- package/dist/types/elements/tt/SwcIf.d.ts.map +0 -1
- package/dist/types/elements/tt/SwcIfTemplate.d.ts +0 -1
- package/dist/types/elements/tt/SwcIfTemplate.d.ts.map +0 -1
- package/dist/types/elements/tt/SwcLoop.d.ts +0 -1
- package/dist/types/elements/tt/SwcLoop.d.ts.map +0 -1
- package/dist/types/elements/tt/SwcLoopTemplate.d.ts +0 -1
- package/dist/types/elements/tt/SwcLoopTemplate.d.ts.map +0 -1
- package/dist/types/elements/tt/SwcSubTemplates.d.ts +0 -1
- package/dist/types/elements/tt/SwcSubTemplates.d.ts.map +0 -1
- package/dist/types/elements/tt/register.d.ts +0 -1
- package/dist/types/elements/tt/register.d.ts.map +0 -1
- package/src/elements/tt/SwcAppMixin.ts +0 -13
- package/src/elements/tt/SwcAsync.ts +0 -139
- package/src/elements/tt/SwcAsyncTemplate.ts +0 -126
- package/src/elements/tt/SwcChoose.ts +0 -182
- package/src/elements/tt/SwcChooseTemplate.ts +0 -229
- package/src/elements/tt/SwcIf.ts +0 -145
- package/src/elements/tt/SwcIfTemplate.ts +0 -158
- package/src/elements/tt/SwcLoop.ts +0 -222
- package/src/elements/tt/SwcLoopTemplate.ts +0 -255
- package/src/elements/tt/SwcSubTemplates.ts +0 -6
- package/src/elements/tt/register.ts +0 -720
|
@@ -1,182 +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, getElementConfig} from '../../decorators';
|
|
5
|
-
//
|
|
6
|
-
// export default async (w: Window)=> {
|
|
7
|
-
// const tagName = 'swc-choose';
|
|
8
|
-
// const existing = w.customElements.get(tagName);
|
|
9
|
-
// if (existing) return existing;
|
|
10
|
-
// @elementDefine(tagName, { window: w })
|
|
11
|
-
// class SwcChoose extends w.HTMLElement {
|
|
12
|
-
// private _value: any;
|
|
13
|
-
// private _replaceWrapStart: string | null = null;
|
|
14
|
-
// private _replaceWrapEnd: string | null = null;
|
|
15
|
-
// private _nodes: Node[] = [];
|
|
16
|
-
// private _previousTemplate: HTMLTemplateElement | null = null;
|
|
17
|
-
//
|
|
18
|
-
// static get observedAttributes() {
|
|
19
|
-
// return ['value', 'replace-wrap-start', 'replace-wrap-end'];
|
|
20
|
-
// }
|
|
21
|
-
//
|
|
22
|
-
// get value(): any {
|
|
23
|
-
// return this._value;
|
|
24
|
-
// }
|
|
25
|
-
//
|
|
26
|
-
// set value(nv: any) {
|
|
27
|
-
// this._value = nv;
|
|
28
|
-
// this.refresh(this._value);
|
|
29
|
-
// }
|
|
30
|
-
//
|
|
31
|
-
// connectedCallback() {
|
|
32
|
-
// this.style.display = 'none';
|
|
33
|
-
// if (!this.id) {
|
|
34
|
-
// throw new Error('[SWC] SwcChoose must have an "id" attribute for reliable cleanup.');
|
|
35
|
-
// }
|
|
36
|
-
// if (this.hasAttribute('value')) {
|
|
37
|
-
// this.refresh();
|
|
38
|
-
// }
|
|
39
|
-
// }
|
|
40
|
-
//
|
|
41
|
-
// attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
|
|
42
|
-
// switch (name) {
|
|
43
|
-
// case 'value':
|
|
44
|
-
// this._value = newValue;
|
|
45
|
-
// this.refresh(this._value);
|
|
46
|
-
// break;
|
|
47
|
-
// case 'replace-wrap-start':
|
|
48
|
-
// this._replaceWrapStart = newValue;
|
|
49
|
-
// break;
|
|
50
|
-
// case 'replace-wrap-end':
|
|
51
|
-
// this._replaceWrapEnd = newValue;
|
|
52
|
-
// break;
|
|
53
|
-
// }
|
|
54
|
-
// }
|
|
55
|
-
//
|
|
56
|
-
// private replaceExpressions(html: string, groupArgs: any, context: any, wrap: { start: string, end: string }): string {
|
|
57
|
-
// let config: any = undefined;
|
|
58
|
-
// if (wrap) {
|
|
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
|
-
// }
|
|
67
|
-
// const ae = new ActionExpression(html, config);
|
|
68
|
-
// const win = this.ownerDocument?.defaultView || window;
|
|
69
|
-
// for (const expr of ae.getExpressions('replace')) {
|
|
70
|
-
// try {
|
|
71
|
-
// const value = FunctionUtils.executeReturn({
|
|
72
|
-
// script: ConvertUtils.decodeHtmlEntity(expr.script, win.document),
|
|
73
|
-
// context,
|
|
74
|
-
// args: groupArgs
|
|
75
|
-
// });
|
|
76
|
-
// ae.replace(expr, String(value));
|
|
77
|
-
// } catch (e) {
|
|
78
|
-
// console.error(`[SWC] Failed to execute ${expr.original}:`, e);
|
|
79
|
-
// }
|
|
80
|
-
// }
|
|
81
|
-
// return ae.getUnprocessedTemplate();
|
|
82
|
-
// }
|
|
83
|
-
//
|
|
84
|
-
// refresh(value?: any) {
|
|
85
|
-
// if (!this.id) return;
|
|
86
|
-
// value = value ?? getAttributeValue(this, 'value') ?? this._value;
|
|
87
|
-
// const portal = SwcUtils.getParentContainer(this);
|
|
88
|
-
// if (!portal) return;
|
|
89
|
-
// const win = (getElementConfig(this).window ?? this.ownerDocument?.defaultView) || window;
|
|
90
|
-
// const helperSet = SwcUtils.getHelperAndHostSet(win, this);
|
|
91
|
-
// const groupArgs = {...helperSet, $value: value, $templateHost: this};
|
|
92
|
-
// // HTMLElement에서는 children에서 template 찾기
|
|
93
|
-
// const templates = Array.from(this.children).filter(
|
|
94
|
-
// (el): el is HTMLTemplateElement => el.tagName === 'TEMPLATE'
|
|
95
|
-
// );
|
|
96
|
-
// let selected: HTMLTemplateElement | null = null;
|
|
97
|
-
// for (const t of templates) {
|
|
98
|
-
// if (t.getAttribute('is') === 'swc-when') {
|
|
99
|
-
// const attrVal = t.getAttribute('test') || '';
|
|
100
|
-
// let matches = false;
|
|
101
|
-
// const result = FunctionUtils.executeReturn({
|
|
102
|
-
// script: attrVal,
|
|
103
|
-
// context: t,
|
|
104
|
-
// args: groupArgs
|
|
105
|
-
// });
|
|
106
|
-
// matches = !!result;
|
|
107
|
-
// if (matches) {
|
|
108
|
-
// selected = t;
|
|
109
|
-
// break;
|
|
110
|
-
// }
|
|
111
|
-
// }
|
|
112
|
-
// }
|
|
113
|
-
// const target = selected || (templates.find(t => t.getAttribute('is') === 'swc-otherwise') ?? null);
|
|
114
|
-
// const skipValue = target?.getAttribute?.('skip-if-same');
|
|
115
|
-
// const skipValue2 = this._previousTemplate?.getAttribute?.('skip-if-same');
|
|
116
|
-
// const hasSkipIfSame = target?.hasAttribute?.('skip-if-same');
|
|
117
|
-
// const isSame = this._previousTemplate === target;
|
|
118
|
-
// if (hasSkipIfSame && isSame) {
|
|
119
|
-
// return;
|
|
120
|
-
// }
|
|
121
|
-
// this.cleanup();
|
|
122
|
-
// this._previousTemplate = target;
|
|
123
|
-
// if (target) {
|
|
124
|
-
// let htmlString = target.innerHTML;
|
|
125
|
-
// htmlString = this.replaceExpressions(htmlString, groupArgs, this, {start: this._replaceWrapStart ?? '{#{', end: this._replaceWrapEnd ?? '}#}'});
|
|
126
|
-
// const result = this.ownerDocument?.createElement('template') || document.createElement('template');
|
|
127
|
-
// result.innerHTML = htmlString;
|
|
128
|
-
// const processedFragment = result.content;
|
|
129
|
-
// this._nodes = Array.from(processedFragment.childNodes);
|
|
130
|
-
// const setTemplateHost = (element: HTMLElement) => {
|
|
131
|
-
// (element as any).__swc_template_host = this;
|
|
132
|
-
// Array.from(element.children).forEach((child: any) => {
|
|
133
|
-
// if (child instanceof HTMLElement) {
|
|
134
|
-
// setTemplateHost(child);
|
|
135
|
-
// }
|
|
136
|
-
// });
|
|
137
|
-
// };
|
|
138
|
-
// this._nodes.forEach((node: any) => {
|
|
139
|
-
// if (node instanceof HTMLElement) {
|
|
140
|
-
// setTemplateHost(node as HTMLElement);
|
|
141
|
-
// }
|
|
142
|
-
// });
|
|
143
|
-
// const endpoint = this.ownerDocument?.createComment(`swc-choose endpoint id:${this.id}`) || document.createComment(`swc-choose endpoint id:${this.id}`);
|
|
144
|
-
// processedFragment.appendChild(endpoint);
|
|
145
|
-
// this._nodes.push(endpoint);
|
|
146
|
-
// portal.insertBefore(processedFragment, this.nextSibling);
|
|
147
|
-
// }
|
|
148
|
-
// }
|
|
149
|
-
//
|
|
150
|
-
// private cleanup() {
|
|
151
|
-
// if (this.id) {
|
|
152
|
-
// const portal = SwcUtils.getParentContainer(this);
|
|
153
|
-
// if (portal) {
|
|
154
|
-
// const endpointText = `swc-choose endpoint id:${this.id}`;
|
|
155
|
-
// let current = this.nextSibling;
|
|
156
|
-
// const toRemove: Node[] = [];
|
|
157
|
-
// while (current) {
|
|
158
|
-
// toRemove.push(current);
|
|
159
|
-
// if (current.nodeType === 8 && (current as Comment).data === endpointText) {
|
|
160
|
-
// toRemove.forEach(n => {
|
|
161
|
-
// const realNode = (n as any).__upgraded_instance || n;
|
|
162
|
-
// if (realNode.parentElement) {
|
|
163
|
-
// realNode.parentElement.removeChild(realNode);
|
|
164
|
-
// }
|
|
165
|
-
// });
|
|
166
|
-
// break;
|
|
167
|
-
// }
|
|
168
|
-
// current = current.nextSibling;
|
|
169
|
-
// }
|
|
170
|
-
// }
|
|
171
|
-
// }
|
|
172
|
-
// this._nodes = [];
|
|
173
|
-
// }
|
|
174
|
-
//
|
|
175
|
-
// disconnectedCallback() {
|
|
176
|
-
// this.cleanup();
|
|
177
|
-
// }
|
|
178
|
-
// }
|
|
179
|
-
//
|
|
180
|
-
// return w.customElements.whenDefined(tagName);
|
|
181
|
-
//
|
|
182
|
-
// }
|
|
@@ -1,229 +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 {SwcChooseInterface} from '../../types';
|
|
6
|
-
// import {attributeThis, getAttributeValue, getElementConfig} from '../../decorators';
|
|
7
|
-
//
|
|
8
|
-
// export class SwcChooseTemplate extends HTMLTemplateElement implements SwcChooseInterface {
|
|
9
|
-
// _value: any;
|
|
10
|
-
//
|
|
11
|
-
// @attributeThis('replace-wrap-start')
|
|
12
|
-
// _replaceWrapStart: string | null;
|
|
13
|
-
// @attributeThis('replace-wrap-end')
|
|
14
|
-
// _replaceWrapEnd: string | null;
|
|
15
|
-
//
|
|
16
|
-
// private _nodes: Node[] = [];
|
|
17
|
-
// private _previousTemplate: HTMLTemplateElement | null = null;
|
|
18
|
-
//
|
|
19
|
-
// get value(): any {
|
|
20
|
-
// return this._value;
|
|
21
|
-
// }
|
|
22
|
-
//
|
|
23
|
-
// set value(nv: any) {
|
|
24
|
-
// this._value = nv;
|
|
25
|
-
// this.refresh(this._value);
|
|
26
|
-
// }
|
|
27
|
-
//
|
|
28
|
-
// constructor() {
|
|
29
|
-
// super();
|
|
30
|
-
// // console.log('swc chooooooooooooooooooooooooose constructor called!');
|
|
31
|
-
// // console.log('swc cccccccss', this.getAttribute('value'));
|
|
32
|
-
// }
|
|
33
|
-
//
|
|
34
|
-
// static get observedAttributes() {
|
|
35
|
-
// return ['value'];
|
|
36
|
-
// }
|
|
37
|
-
//
|
|
38
|
-
// attributeChangedCallback(na, o, n) {
|
|
39
|
-
// // console.log('-----------------choooooooose attr origin', na, o, n);
|
|
40
|
-
// }
|
|
41
|
-
//
|
|
42
|
-
// connectedCallback() {
|
|
43
|
-
// // console.log('------choooooooose connectedCallback called!------');
|
|
44
|
-
// if (!this.id) {
|
|
45
|
-
// throw new Error('[SWC] SwcChoose must have an "id" attribute for reliable cleanup.');
|
|
46
|
-
// }
|
|
47
|
-
// if (this.hasAttribute('value')) {
|
|
48
|
-
// this.refresh();
|
|
49
|
-
// }
|
|
50
|
-
// }
|
|
51
|
-
//
|
|
52
|
-
// @changedAttributeThis('value')
|
|
53
|
-
// private setValue(value: any, o: string, n: string) {
|
|
54
|
-
// if (!this.id) return;
|
|
55
|
-
// // console.log('chooooooose value', value)
|
|
56
|
-
// this._value = value;
|
|
57
|
-
// this.refresh(this._value);
|
|
58
|
-
// }
|
|
59
|
-
//
|
|
60
|
-
// // @changedAttributeThis('replace-wrap')
|
|
61
|
-
// // private setReplaceWrap(replaceWrapAttr?: string | null) {
|
|
62
|
-
// // this.refresh();
|
|
63
|
-
// // }
|
|
64
|
-
//
|
|
65
|
-
// private replaceExpressions(html: string, groupArgs: any, context: any, wrap: { start: string, end: string }): string {
|
|
66
|
-
// let config: any = undefined;
|
|
67
|
-
// if (wrap) {
|
|
68
|
-
// config = {
|
|
69
|
-
// expression: {
|
|
70
|
-
// replace: {start: `${wrap.start}`, end: `${wrap.end}`},
|
|
71
|
-
// callReturn: {start: `${wrap.start}=`, end: `${wrap.end}`},
|
|
72
|
-
// call: {start: `${wrap.start}@`, end: `${wrap.end}`}
|
|
73
|
-
// }
|
|
74
|
-
// };
|
|
75
|
-
// }
|
|
76
|
-
// const ae = new ActionExpression(html, config);
|
|
77
|
-
// const win = this.ownerDocument?.defaultView || window;
|
|
78
|
-
//
|
|
79
|
-
// // @ts-ignore
|
|
80
|
-
// for (const expr of ae.getExpressions('replace')) {
|
|
81
|
-
// try {
|
|
82
|
-
// const value = FunctionUtils.executeReturn({
|
|
83
|
-
// script: ConvertUtils.decodeHtmlEntity(expr.script, win.document),
|
|
84
|
-
// context,
|
|
85
|
-
// args: groupArgs
|
|
86
|
-
// });
|
|
87
|
-
// ae.replace(expr, String(value));
|
|
88
|
-
// } catch (e) {
|
|
89
|
-
// console.error(`[SWC] Failed to execute ${expr.original}:`, e);
|
|
90
|
-
// }
|
|
91
|
-
// }
|
|
92
|
-
// return ae.getUnprocessedTemplate();
|
|
93
|
-
// }
|
|
94
|
-
//
|
|
95
|
-
// refresh(value?: any) {
|
|
96
|
-
// if (!this.id) return;
|
|
97
|
-
// value = value ?? getAttributeValue(this, 'value') ?? this._value;
|
|
98
|
-
// // console.log('[DEBUG] SwcChoose.refresh called, value:', value);
|
|
99
|
-
// const portal = SwcUtils.getParentContainer(this);
|
|
100
|
-
// if (!portal) {
|
|
101
|
-
// // console.log('[DEBUG] SwcChoose portal is null!');
|
|
102
|
-
// return;
|
|
103
|
-
// }
|
|
104
|
-
//
|
|
105
|
-
// const win = (getElementConfig(this).window ?? this.ownerDocument?.defaultView) || window;
|
|
106
|
-
// const helperSet = SwcUtils.getHelperAndHostSet(win, this);
|
|
107
|
-
// const groupArgs = {...helperSet, $value: value, $templateHost: this};
|
|
108
|
-
//
|
|
109
|
-
// const templates = Array.from(this.content.querySelectorAll('template'));
|
|
110
|
-
// let selected: HTMLTemplateElement | null = null;
|
|
111
|
-
//
|
|
112
|
-
// for (const t of templates) {
|
|
113
|
-
// if (t.getAttribute('is') === 'swc-when') {
|
|
114
|
-
// const attrVal = t.getAttribute('test') || '';
|
|
115
|
-
// let matches = false;
|
|
116
|
-
//
|
|
117
|
-
//
|
|
118
|
-
// const result = FunctionUtils.executeReturn({
|
|
119
|
-
// script: attrVal,
|
|
120
|
-
// context: t,
|
|
121
|
-
// args: groupArgs
|
|
122
|
-
// });
|
|
123
|
-
// matches = !!result;
|
|
124
|
-
// // Use ActionExpression to parse and extract script from value attribute
|
|
125
|
-
// // const ae = new ActionExpression(attrVal);
|
|
126
|
-
// // const expr = ae.getFirstExpression('replace');
|
|
127
|
-
//
|
|
128
|
-
// // if (expr) {
|
|
129
|
-
// // const decodedScript = ConvertUtils.decodeHtmlEntity(expr.script, win.document);
|
|
130
|
-
// // const result = FunctionUtils.executeReturn({
|
|
131
|
-
// // script: decodedScript,
|
|
132
|
-
// // context: t,
|
|
133
|
-
// // args: groupArgs
|
|
134
|
-
// // });
|
|
135
|
-
// // matches = !!result;
|
|
136
|
-
// // } else {
|
|
137
|
-
// // matches = String(attrVal) === String(value);
|
|
138
|
-
// // }
|
|
139
|
-
//
|
|
140
|
-
// if (matches) {
|
|
141
|
-
// selected = t;
|
|
142
|
-
// break;
|
|
143
|
-
// }
|
|
144
|
-
// }
|
|
145
|
-
// }
|
|
146
|
-
//
|
|
147
|
-
// const target = selected || (this.content.querySelector('template[is="swc-otherwise"]') as HTMLTemplateElement);
|
|
148
|
-
//
|
|
149
|
-
// const skipValue = target?.getAttribute?.('skip-if-same');
|
|
150
|
-
// const skipValue2 = this._previousTemplate?.getAttribute?.('skip-if-same');
|
|
151
|
-
// const hasSkipIfSame = target?.hasAttribute?.('skip-if-same');
|
|
152
|
-
// const isSame = this._previousTemplate === target;
|
|
153
|
-
// // console.log('---rrrr---', this._previousTemplate, target, hasSkipIfSame, isSame, skipValue, skipValue2);
|
|
154
|
-
// if (hasSkipIfSame && isSame) {
|
|
155
|
-
// return;
|
|
156
|
-
// }
|
|
157
|
-
//
|
|
158
|
-
// this.cleanup();
|
|
159
|
-
// this._previousTemplate = target;
|
|
160
|
-
//
|
|
161
|
-
// if (target) {
|
|
162
|
-
// let htmlString = target.innerHTML;
|
|
163
|
-
// htmlString = this.replaceExpressions(htmlString, groupArgs, this, {start: this._replaceWrapStart ?? '{#{', end: this._replaceWrapEnd ?? '}#}'});
|
|
164
|
-
//
|
|
165
|
-
// const result = this.ownerDocument?.createElement('template') || document.createElement('template');
|
|
166
|
-
// result.innerHTML = htmlString;
|
|
167
|
-
// const processedFragment = result.content;
|
|
168
|
-
//
|
|
169
|
-
// // console.log('[DEBUG] SwcChoose processedFragment children:', processedFragment._childNodesInternal?.length);
|
|
170
|
-
// this._nodes = Array.from(processedFragment.childNodes);
|
|
171
|
-
//
|
|
172
|
-
// const setTemplateHost = (element: HTMLElement) => {
|
|
173
|
-
// (element as any).__swc_template_host = this;
|
|
174
|
-
// Array.from(element.children).forEach((child: any) => {
|
|
175
|
-
// if (child instanceof HTMLElement) {
|
|
176
|
-
// setTemplateHost(child);
|
|
177
|
-
// }
|
|
178
|
-
// });
|
|
179
|
-
// };
|
|
180
|
-
//
|
|
181
|
-
// this._nodes.forEach((node: any) => {
|
|
182
|
-
// if (node instanceof HTMLElement) {
|
|
183
|
-
// setTemplateHost(node as HTMLElement);
|
|
184
|
-
// }
|
|
185
|
-
// });
|
|
186
|
-
//
|
|
187
|
-
// // console.log(`[DEBUG] SwcChoose before insertBefore, portal: ${portal?.tagName}, isConnected: ${(portal as any)?.isConnected}`);
|
|
188
|
-
//
|
|
189
|
-
// // Add endpoint comment node
|
|
190
|
-
// const endpoint = this.ownerDocument?.createComment(`swc-choose endpoint id:${this.id}`) || document.createComment(`swc-choose endpoint id:${this.id}`);
|
|
191
|
-
// processedFragment.appendChild(endpoint);
|
|
192
|
-
// this._nodes.push(endpoint);
|
|
193
|
-
//
|
|
194
|
-
// portal.insertBefore(processedFragment, this.nextSibling);
|
|
195
|
-
// // console.log('[DEBUG] SwcChoose after insertBefore');
|
|
196
|
-
// }
|
|
197
|
-
// }
|
|
198
|
-
//
|
|
199
|
-
// private cleanup() {
|
|
200
|
-
// if (this.id) {
|
|
201
|
-
// const portal = SwcUtils.getParentContainer(this);
|
|
202
|
-
// if (portal) {
|
|
203
|
-
// const endpointText = `swc-choose endpoint id:${this.id}`;
|
|
204
|
-
// let current = this.nextSibling;
|
|
205
|
-
// const toRemove: Node[] = [];
|
|
206
|
-
//
|
|
207
|
-
// while (current) {
|
|
208
|
-
// toRemove.push(current);
|
|
209
|
-
// if (current.nodeType === 8 && (current as Comment).data === endpointText) {
|
|
210
|
-
// // Found the endpoint!
|
|
211
|
-
// toRemove.forEach(n => {
|
|
212
|
-
// const realNode = (n as any).__upgraded_instance || n;
|
|
213
|
-
// if (realNode.parentElement) {
|
|
214
|
-
// realNode.parentElement.removeChild(realNode);
|
|
215
|
-
// }
|
|
216
|
-
// });
|
|
217
|
-
// break;
|
|
218
|
-
// }
|
|
219
|
-
// current = current.nextSibling;
|
|
220
|
-
// }
|
|
221
|
-
// }
|
|
222
|
-
// }
|
|
223
|
-
// this._nodes = [];
|
|
224
|
-
// }
|
|
225
|
-
//
|
|
226
|
-
// disconnectedCallback() {
|
|
227
|
-
// this.cleanup();
|
|
228
|
-
// }
|
|
229
|
-
// }
|
package/src/elements/tt/SwcIf.ts
DELETED
|
@@ -1,145 +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-if';
|
|
8
|
-
// const existing = w.customElements.get(tagName);
|
|
9
|
-
// if (existing) return existing;
|
|
10
|
-
// @elementDefine(tagName, { window: w })
|
|
11
|
-
// class SwcIf extends w.HTMLElement {
|
|
12
|
-
//
|
|
13
|
-
// private _value: any;
|
|
14
|
-
// private _replaceWrapStart: string | null = null;
|
|
15
|
-
// private _replaceWrapEnd: string | null = null;
|
|
16
|
-
// private _skipIfSame: string | null = null;
|
|
17
|
-
// private _nodes: Node[] = [];
|
|
18
|
-
//
|
|
19
|
-
// static get observedAttributes() {
|
|
20
|
-
// return ['value', 'replace-wrap-start', 'replace-wrap-end', 'skip-if-same'];
|
|
21
|
-
// }
|
|
22
|
-
//
|
|
23
|
-
// get value(): boolean {
|
|
24
|
-
// return this._value;
|
|
25
|
-
// }
|
|
26
|
-
//
|
|
27
|
-
// set value(nv: any) {
|
|
28
|
-
// this.refresh(nv);
|
|
29
|
-
// }
|
|
30
|
-
//
|
|
31
|
-
// connectedCallback() {
|
|
32
|
-
// if (!this.id) {
|
|
33
|
-
// throw new Error('[SWC] SwcIf must have an "id" attribute for reliable cleanup.');
|
|
34
|
-
// }
|
|
35
|
-
// if (this.hasAttribute('value')) {
|
|
36
|
-
// this.refresh();
|
|
37
|
-
// }
|
|
38
|
-
// }
|
|
39
|
-
//
|
|
40
|
-
// attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
|
|
41
|
-
// switch (name) {
|
|
42
|
-
// case 'value':
|
|
43
|
-
// this._value = newValue;
|
|
44
|
-
// this.refresh(this._value);
|
|
45
|
-
// break;
|
|
46
|
-
// case 'replace-wrap-start':
|
|
47
|
-
// this._replaceWrapStart = newValue;
|
|
48
|
-
// break;
|
|
49
|
-
// case 'replace-wrap-end':
|
|
50
|
-
// this._replaceWrapEnd = newValue;
|
|
51
|
-
// break;
|
|
52
|
-
// case 'skip-if-same':
|
|
53
|
-
// this._skipIfSame = newValue;
|
|
54
|
-
// break;
|
|
55
|
-
// }
|
|
56
|
-
// }
|
|
57
|
-
//
|
|
58
|
-
// private replaceExpressions(html: string, groupArgs: any, context: any, wrap: { start: string, end: string }): string {
|
|
59
|
-
// let config: any = undefined;
|
|
60
|
-
// if (wrap) {
|
|
61
|
-
// config = {
|
|
62
|
-
// expression: {
|
|
63
|
-
// replace: {start: `${wrap.start}`, end: `${wrap.end}`},
|
|
64
|
-
// callReturn: {start: `${wrap.start}=`, end: `${wrap.end}`},
|
|
65
|
-
// call: {start: `${wrap.start}@`, end: `${wrap.end}`}
|
|
66
|
-
// }
|
|
67
|
-
// };
|
|
68
|
-
// }
|
|
69
|
-
// const ae = new ActionExpression(html, config);
|
|
70
|
-
// const win = this.ownerDocument?.defaultView || window;
|
|
71
|
-
// for (const expr of ae.getExpressions('replace')) {
|
|
72
|
-
// try {
|
|
73
|
-
// const value = FunctionUtils.executeReturn({
|
|
74
|
-
// script: ConvertUtils.decodeHtmlEntity(expr.script, win.document),
|
|
75
|
-
// context,
|
|
76
|
-
// args: groupArgs
|
|
77
|
-
// });
|
|
78
|
-
// ae.replace(expr, String(value));
|
|
79
|
-
// } catch (e) {
|
|
80
|
-
// console.error(`[SWC] Failed to execute ${expr.original}:`, e);
|
|
81
|
-
// }
|
|
82
|
-
// }
|
|
83
|
-
// return ae.getUnprocessedTemplate();
|
|
84
|
-
// }
|
|
85
|
-
//
|
|
86
|
-
// refresh(value?: any) {
|
|
87
|
-
// if (!this.id) return;
|
|
88
|
-
// const targetValue = value !== undefined ? value : (getAttributeValue(this, 'value') ?? this._value);
|
|
89
|
-
// if (this.hasAttribute('skip-if-same') && this._value === targetValue && (this._nodes.length > 0 || this.nextSibling)) {
|
|
90
|
-
// if (this._value === targetValue && this._nodes.length > 0) return;
|
|
91
|
-
// }
|
|
92
|
-
// this.cleanup();
|
|
93
|
-
// this._value = targetValue;
|
|
94
|
-
// const portal = this.parentElement;
|
|
95
|
-
// if (!portal || !this._value) return;
|
|
96
|
-
// const win = this.ownerDocument?.defaultView || window;
|
|
97
|
-
// const helperSet = SwcUtils.getHelperAndHostSet(win, this);
|
|
98
|
-
// let htmlString = this.innerHTML;
|
|
99
|
-
// const groupArgs = {...helperSet, $value: this._value, $templateHost: this};
|
|
100
|
-
// htmlString = this.replaceExpressions(htmlString, groupArgs, this, {start: this._replaceWrapStart ?? '{#{', end: this._replaceWrapEnd ?? '}#}'});
|
|
101
|
-
// const result = this.ownerDocument?.createElement('template') || document.createElement('template');
|
|
102
|
-
// result.innerHTML = htmlString;
|
|
103
|
-
// const processedFragment = result.content;
|
|
104
|
-
// this._nodes = Array.from(processedFragment.childNodes);
|
|
105
|
-
// this._nodes.forEach((node: any) => {
|
|
106
|
-
// if (node instanceof HTMLElement) (node as any).__swc_template_host = this;
|
|
107
|
-
// });
|
|
108
|
-
// const endpointText = `swc-if endpoint id:${this.id}`;
|
|
109
|
-
// const endpoint = this.ownerDocument?.createComment(endpointText) || document.createComment(endpointText);
|
|
110
|
-
// processedFragment.appendChild(endpoint);
|
|
111
|
-
// this._nodes.push(endpoint);
|
|
112
|
-
// portal.insertBefore(processedFragment, this.nextSibling);
|
|
113
|
-
// }
|
|
114
|
-
//
|
|
115
|
-
// private cleanup() {
|
|
116
|
-
// if (this.id) {
|
|
117
|
-
// const portal = this.parentElement;
|
|
118
|
-
// if (portal) {
|
|
119
|
-
// const endpointText = `swc-if endpoint id:${this.id}`;
|
|
120
|
-
// let current = this.nextSibling;
|
|
121
|
-
// const toRemove: Node[] = [];
|
|
122
|
-
// while (current) {
|
|
123
|
-
// toRemove.push(current);
|
|
124
|
-
// if (current.nodeType === 8 && (current as Comment).data === endpointText) {
|
|
125
|
-
// toRemove.forEach(n => {
|
|
126
|
-
// const realNode = (n as any).__upgraded_instance || n;
|
|
127
|
-
// if (realNode.parentElement) {
|
|
128
|
-
// realNode.parentElement.removeChild(realNode);
|
|
129
|
-
// }
|
|
130
|
-
// });
|
|
131
|
-
// break;
|
|
132
|
-
// }
|
|
133
|
-
// current = current.nextSibling;
|
|
134
|
-
// }
|
|
135
|
-
// }
|
|
136
|
-
// }
|
|
137
|
-
// this._nodes = [];
|
|
138
|
-
// }
|
|
139
|
-
//
|
|
140
|
-
// disconnectedCallback() {
|
|
141
|
-
// this.cleanup();
|
|
142
|
-
// }
|
|
143
|
-
// }
|
|
144
|
-
//
|
|
145
|
-
// }
|