@htmlplus/element 2.9.3 → 2.9.4
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 +0 -1
- package/client/decorators/bind.js +1 -1
- package/client/decorators/context.js +4 -6
- package/client/decorators/element.d.ts +1 -1
- package/client/decorators/element.js +44 -47
- package/client/decorators/event.d.ts +1 -1
- package/client/decorators/event.js +4 -5
- package/client/decorators/listen.d.ts +1 -1
- package/client/decorators/listen.js +1 -1
- package/client/decorators/method.d.ts +1 -1
- package/client/decorators/property.d.ts +1 -1
- package/client/decorators/property.js +7 -8
- package/client/decorators/state.d.ts +1 -1
- package/client/decorators/watch.d.ts +1 -1
- package/client/utils/appendToMethod.js +1 -1
- package/client/utils/attributes.d.ts +1 -1
- package/client/utils/attributes.js +1 -1
- package/client/utils/call.js +1 -2
- package/client/utils/config.js +1 -1
- package/client/utils/direction.d.ts +1 -1
- package/client/utils/event.d.ts +1 -1
- package/client/utils/getFramework.d.ts +1 -1
- package/client/utils/getStyles.d.ts +1 -1
- package/client/utils/getStyles.js +1 -2
- package/client/utils/getTag.d.ts +1 -1
- package/client/utils/getTag.js +1 -2
- package/client/utils/host.d.ts +1 -1
- package/client/utils/host.js +1 -1
- package/client/utils/isEvent.js +1 -1
- package/client/utils/isRTL.d.ts +1 -1
- package/client/utils/query.d.ts +1 -1
- package/client/utils/query.js +1 -2
- package/client/utils/queryAll.d.ts +1 -1
- package/client/utils/queryAll.js +1 -2
- package/client/utils/request.d.ts +1 -1
- package/client/utils/request.js +2 -3
- package/client/utils/shadowRoot.d.ts +1 -1
- package/client/utils/shadowRoot.js +1 -2
- package/client/utils/slots.d.ts +1 -1
- package/client/utils/slots.js +1 -2
- package/client/utils/toDecorator.d.ts +1 -1
- package/client/utils/toEvent.js +1 -1
- package/client/utils/toProperty.js +2 -2
- package/client/utils/updateAttribute.d.ts +1 -1
- package/package.json +1 -1
- package/transformer/plugins/assets.d.ts +1 -1
- package/transformer/plugins/copy.d.ts +1 -1
- package/transformer/plugins/customElement.d.ts +1 -1
- package/transformer/plugins/customElement.js +12 -13
- package/transformer/plugins/document.d.ts +1 -1
- package/transformer/plugins/document.js +18 -26
- package/transformer/plugins/extract.d.ts +1 -1
- package/transformer/plugins/extract.js +3 -4
- package/transformer/plugins/parse.d.ts +1 -1
- package/transformer/plugins/read.d.ts +2 -3
- package/transformer/plugins/readme.d.ts +1 -1
- package/transformer/plugins/style.d.ts +1 -1
- package/transformer/plugins/validate.d.ts +1 -1
- package/transformer/plugins/validate.js +1 -2
- package/transformer/plugins/visualStudioCode.d.ts +1 -1
- package/transformer/plugins/visualStudioCode.js +3 -4
- package/transformer/plugins/webTypes.d.ts +1 -1
- package/transformer/plugins/webTypes.js +15 -19
- package/transformer/transformer.d.ts +1 -1
- package/transformer/utils/addDependency.js +2 -3
- package/transformer/utils/extractAttribute.js +1 -1
- package/transformer/utils/extractFromComment.js +11 -8
- package/transformer/utils/getInitializer.js +1 -2
- package/transformer/utils/getType.js +3 -3
- package/transformer/utils/hasDecorator.js +1 -1
package/README.md
CHANGED
|
@@ -26,7 +26,6 @@ A powerful tool for building a scalable, reusable, fast, and lightweight `UI Com
|
|
|
26
26
|
- **Style File Recognition**: Identifies and links the relevant style file to the element.
|
|
27
27
|
- **Tag Name Recognition**: Generates tag name from the class name.
|
|
28
28
|
- **Clean Syntax**: Uses a minimal amount of code to achieve the same functionality, making the code easier to read, understand, and maintain.
|
|
29
|
-
- **Attribute Over Class**: Uses HTML attributes instead of HTML class names to keep the size of the start tag short, making it more readable and preventing the DOM from getting dirty.
|
|
30
29
|
|
|
31
30
|
## Quick Start
|
|
32
31
|
|
|
@@ -8,7 +8,7 @@ export function Bind() {
|
|
|
8
8
|
return {
|
|
9
9
|
configurable: true,
|
|
10
10
|
get() {
|
|
11
|
-
const value = descriptor
|
|
11
|
+
const value = descriptor?.value.bind(this);
|
|
12
12
|
defineProperty(this, key, {
|
|
13
13
|
value,
|
|
14
14
|
configurable: true,
|
|
@@ -6,7 +6,7 @@ export function Provider(namespace) {
|
|
|
6
6
|
const [MAIN, SUB] = namespace.split('.');
|
|
7
7
|
const prefix = `htmlplus:${MAIN}`;
|
|
8
8
|
const cleanups = (instance) => {
|
|
9
|
-
return (instance[symbol]
|
|
9
|
+
return (instance[symbol] ||= new Map());
|
|
10
10
|
};
|
|
11
11
|
const update = (instance) => {
|
|
12
12
|
const options = {};
|
|
@@ -31,11 +31,10 @@ export function Provider(namespace) {
|
|
|
31
31
|
cleanups(this).set(prefix, cleanup);
|
|
32
32
|
});
|
|
33
33
|
appendToMethod(target, CONSTANTS.LIFECYCLE_UPDATE, function (states) {
|
|
34
|
-
var _a;
|
|
35
34
|
update(this);
|
|
36
35
|
if (cleanups(this).size && !states.has(SUB))
|
|
37
36
|
return;
|
|
38
|
-
|
|
37
|
+
cleanups(this).get(`${prefix}:${states.get(SUB)}`)?.();
|
|
39
38
|
const type = `${prefix}:${this[SUB]}`;
|
|
40
39
|
const cleanup = () => {
|
|
41
40
|
off(window, `${type}:presence`, onPresence);
|
|
@@ -59,7 +58,7 @@ export function Consumer(namespace) {
|
|
|
59
58
|
const [MAIN, SUB] = namespace.split('.');
|
|
60
59
|
const prefix = `htmlplus:${MAIN}`;
|
|
61
60
|
const cleanups = (instance) => {
|
|
62
|
-
return (instance[symbol]
|
|
61
|
+
return (instance[symbol] ||= new Map());
|
|
63
62
|
};
|
|
64
63
|
const update = (instance, state) => {
|
|
65
64
|
instance[key] = state;
|
|
@@ -94,10 +93,9 @@ export function Consumer(namespace) {
|
|
|
94
93
|
!connected && setTimeout(() => dispatch(this, `${prefix}:presence`, options));
|
|
95
94
|
});
|
|
96
95
|
appendToMethod(target, CONSTANTS.LIFECYCLE_UPDATE, function (states) {
|
|
97
|
-
var _a;
|
|
98
96
|
if (cleanups(this).size && !states.has(SUB))
|
|
99
97
|
return;
|
|
100
|
-
|
|
98
|
+
cleanups(this).get(`${prefix}:${states.get(SUB)}`)?.();
|
|
101
99
|
const type = `${prefix}:${this[SUB]}`;
|
|
102
100
|
const cleanup = () => {
|
|
103
101
|
off(window, `${type}:disconnect`, onDisconnect);
|
|
@@ -17,52 +17,49 @@ export function Element() {
|
|
|
17
17
|
};
|
|
18
18
|
}
|
|
19
19
|
const proxy = (constructor) => {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
}
|
|
44
|
-
catch (_b) { }
|
|
45
|
-
}
|
|
46
|
-
connectedCallback() {
|
|
47
|
-
const instance = this[CONSTANTS.API_INSTANCE];
|
|
48
|
-
// TODO: experimental for global config
|
|
49
|
-
Object.assign(instance, getConfig('element', getTag(instance), 'property'));
|
|
50
|
-
instance[CONSTANTS.API_CONNECTED] = true;
|
|
51
|
-
const connect = () => {
|
|
52
|
-
request(instance, undefined, undefined, () => {
|
|
53
|
-
call(instance, CONSTANTS.LIFECYCLE_LOADED);
|
|
54
|
-
});
|
|
55
|
-
};
|
|
56
|
-
const callback = call(instance, CONSTANTS.LIFECYCLE_CONNECTED);
|
|
57
|
-
if (!(callback === null || callback === void 0 ? void 0 : callback.then))
|
|
58
|
-
return connect();
|
|
59
|
-
callback.then(() => connect());
|
|
20
|
+
return class Plus extends HTMLElement {
|
|
21
|
+
static formAssociated = constructor['formAssociated'];
|
|
22
|
+
static observedAttributes = constructor['observedAttributes'];
|
|
23
|
+
constructor() {
|
|
24
|
+
super();
|
|
25
|
+
this.attachShadow({
|
|
26
|
+
mode: 'open',
|
|
27
|
+
delegatesFocus: constructor['delegatesFocus'],
|
|
28
|
+
slotAssignment: constructor['slotAssignment']
|
|
29
|
+
});
|
|
30
|
+
const instance = (this[CONSTANTS.API_INSTANCE] = new constructor());
|
|
31
|
+
instance[CONSTANTS.API_HOST] = () => this;
|
|
32
|
+
call(instance, CONSTANTS.LIFECYCLE_CONSTRUCTED);
|
|
33
|
+
}
|
|
34
|
+
adoptedCallback() {
|
|
35
|
+
call(this[CONSTANTS.API_INSTANCE], CONSTANTS.LIFECYCLE_ADOPTED);
|
|
36
|
+
}
|
|
37
|
+
attributeChangedCallback(key, prev, next) {
|
|
38
|
+
// Ensures the integrity of readonly properties to prevent potential errors.
|
|
39
|
+
try {
|
|
40
|
+
const attribute = constructor[CONSTANTS.MAPPER]?.[key];
|
|
41
|
+
const property = attribute || camelCase(key);
|
|
42
|
+
this[property] = next;
|
|
60
43
|
}
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
44
|
+
catch { }
|
|
45
|
+
}
|
|
46
|
+
connectedCallback() {
|
|
47
|
+
const instance = this[CONSTANTS.API_INSTANCE];
|
|
48
|
+
// TODO: experimental for global config
|
|
49
|
+
Object.assign(instance, getConfig('element', getTag(instance), 'property'));
|
|
50
|
+
instance[CONSTANTS.API_CONNECTED] = true;
|
|
51
|
+
const connect = () => {
|
|
52
|
+
request(instance, undefined, undefined, () => {
|
|
53
|
+
call(instance, CONSTANTS.LIFECYCLE_LOADED);
|
|
54
|
+
});
|
|
55
|
+
};
|
|
56
|
+
const callback = call(instance, CONSTANTS.LIFECYCLE_CONNECTED);
|
|
57
|
+
if (!callback?.then)
|
|
58
|
+
return connect();
|
|
59
|
+
callback.then(() => connect());
|
|
60
|
+
}
|
|
61
|
+
disconnectedCallback() {
|
|
62
|
+
call(this[CONSTANTS.API_INSTANCE], CONSTANTS.LIFECYCLE_DISCONNECTED);
|
|
63
|
+
}
|
|
64
|
+
};
|
|
68
65
|
};
|
|
@@ -11,10 +11,9 @@ export function Event(options = {}) {
|
|
|
11
11
|
defineProperty(target, key, {
|
|
12
12
|
get() {
|
|
13
13
|
return (detail) => {
|
|
14
|
-
var _a, _b;
|
|
15
14
|
const element = host(this);
|
|
16
15
|
const framework = getFramework(this);
|
|
17
|
-
|
|
16
|
+
options.bubbles ??= false;
|
|
18
17
|
let type = String(key);
|
|
19
18
|
switch (framework) {
|
|
20
19
|
// TODO: Experimental
|
|
@@ -28,7 +27,7 @@ export function Event(options = {}) {
|
|
|
28
27
|
})
|
|
29
28
|
});
|
|
30
29
|
}
|
|
31
|
-
catch
|
|
30
|
+
catch { }
|
|
32
31
|
break;
|
|
33
32
|
case 'qwik':
|
|
34
33
|
case 'solid':
|
|
@@ -43,9 +42,9 @@ export function Event(options = {}) {
|
|
|
43
42
|
break;
|
|
44
43
|
}
|
|
45
44
|
let event;
|
|
46
|
-
event
|
|
45
|
+
event ||= getConfig('event', 'resolver')?.({ detail, element, framework, options, type });
|
|
47
46
|
event && element.dispatchEvent(event);
|
|
48
|
-
event
|
|
47
|
+
event ||= dispatch(this, type, { ...options, detail });
|
|
49
48
|
return event;
|
|
50
49
|
};
|
|
51
50
|
}
|
|
@@ -13,7 +13,7 @@ import { Bind } from './bind.js';
|
|
|
13
13
|
export function Listen(type, options) {
|
|
14
14
|
return function (target, key, descriptor) {
|
|
15
15
|
const element = (instance) => {
|
|
16
|
-
switch (options
|
|
16
|
+
switch (options?.target) {
|
|
17
17
|
case 'body':
|
|
18
18
|
return window.document.body;
|
|
19
19
|
case 'document':
|
|
@@ -7,19 +7,18 @@ import { appendToMethod, defineProperty, host, request, toProperty, updateAttrib
|
|
|
7
7
|
*/
|
|
8
8
|
export function Property(options) {
|
|
9
9
|
return function (target, key, descriptor) {
|
|
10
|
-
var _a, _b, _c;
|
|
11
10
|
// Creates a unique symbol for the lock flag.
|
|
12
11
|
const locked = Symbol();
|
|
13
12
|
// Converts property name to string.
|
|
14
13
|
const name = String(key);
|
|
15
14
|
// Calculates attribute.
|
|
16
|
-
const attribute =
|
|
15
|
+
const attribute = options?.attribute || kebabCase(name);
|
|
17
16
|
// Registers an attribute that is intricately linked to the property.
|
|
18
|
-
(
|
|
17
|
+
(target.constructor['observedAttributes'] ||= []).push(attribute);
|
|
19
18
|
// TODO
|
|
20
19
|
if (attribute) {
|
|
21
20
|
// TODO
|
|
22
|
-
|
|
21
|
+
target.constructor[CONSTANTS.MAPPER] ||= {};
|
|
23
22
|
// TODO
|
|
24
23
|
target.constructor[CONSTANTS.MAPPER][attribute] = name;
|
|
25
24
|
}
|
|
@@ -27,12 +26,12 @@ export function Property(options) {
|
|
|
27
26
|
// When the property is a getter function.
|
|
28
27
|
if (descriptor) {
|
|
29
28
|
// Checks the reflection.
|
|
30
|
-
if (options
|
|
29
|
+
if (options?.reflect) {
|
|
31
30
|
// Stores the original getter function.
|
|
32
31
|
const getter = descriptor.get;
|
|
33
32
|
// Defines a new getter function.
|
|
34
33
|
descriptor.get = function () {
|
|
35
|
-
const value = getter
|
|
34
|
+
const value = getter?.apply(this);
|
|
36
35
|
this[locked] = true;
|
|
37
36
|
updateAttribute(this, attribute, value);
|
|
38
37
|
this[locked] = false;
|
|
@@ -62,7 +61,7 @@ export function Property(options) {
|
|
|
62
61
|
request(this, name, previous, (skipped) => {
|
|
63
62
|
if (skipped)
|
|
64
63
|
return;
|
|
65
|
-
if (!
|
|
64
|
+
if (!options?.reflect)
|
|
66
65
|
return;
|
|
67
66
|
this[locked] = true;
|
|
68
67
|
updateAttribute(this, attribute, next);
|
|
@@ -85,7 +84,7 @@ export function Property(options) {
|
|
|
85
84
|
if (this[locked]) {
|
|
86
85
|
return;
|
|
87
86
|
}
|
|
88
|
-
this[key] = toProperty(input, options
|
|
87
|
+
this[key] = toProperty(input, options?.type);
|
|
89
88
|
};
|
|
90
89
|
// TODO: Check the configuration.
|
|
91
90
|
// Attaches the getter and setter functions to the current property of the host element.
|
|
@@ -4,7 +4,7 @@ export const appendToMethod = (target, key, handler) => {
|
|
|
4
4
|
// Creates new function
|
|
5
5
|
function next(...parameters) {
|
|
6
6
|
// Calls the previous
|
|
7
|
-
const result = previous
|
|
7
|
+
const result = previous?.bind(this)(...parameters);
|
|
8
8
|
// Calls the appended
|
|
9
9
|
handler.bind(this)(...parameters);
|
|
10
10
|
// Returns the result
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { HTMLPlusElement } from '../../types';
|
|
1
|
+
import { HTMLPlusElement } from '../../types/index.js';
|
|
2
2
|
export declare const attributes: (target: HTMLElement | HTMLPlusElement, attributes: any[]) => void;
|
package/client/utils/call.js
CHANGED
package/client/utils/config.js
CHANGED
|
@@ -23,6 +23,6 @@ export const getConfig = (...keys) => {
|
|
|
23
23
|
export const setConfig = (config, options) => {
|
|
24
24
|
if (isServer())
|
|
25
25
|
return;
|
|
26
|
-
const previous =
|
|
26
|
+
const previous = options?.override ? {} : window[`$htmlplus$`];
|
|
27
27
|
window[`$htmlplus$`] = merge({}, DEFAULTS, previous, config);
|
|
28
28
|
};
|
package/client/utils/event.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { HTMLPlusElement } from '../../types';
|
|
1
|
+
import { HTMLPlusElement } from '../../types/index.js';
|
|
2
2
|
export declare const getFramework: (target: HTMLElement | HTMLPlusElement) => string | undefined;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { HTMLPlusElement } from '../../types';
|
|
1
|
+
import { HTMLPlusElement } from '../../types/index.js';
|
|
2
2
|
export declare const getStyles: (target: HTMLPlusElement) => string | undefined;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import * as CONSTANTS from '../../constants/index.js';
|
|
2
2
|
export const getStyles = (target) => {
|
|
3
|
-
|
|
4
|
-
return (_a = target.constructor[CONSTANTS.STATIC_STYLE]) !== null && _a !== void 0 ? _a : target[CONSTANTS.STATIC_STYLE];
|
|
3
|
+
return target.constructor[CONSTANTS.STATIC_STYLE] ?? target[CONSTANTS.STATIC_STYLE];
|
|
5
4
|
};
|
package/client/utils/getTag.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { HTMLPlusElement } from '../../types';
|
|
1
|
+
import { HTMLPlusElement } from '../../types/index.js';
|
|
2
2
|
export declare const getTag: (target: HTMLPlusElement) => string | undefined;
|
package/client/utils/getTag.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import * as CONSTANTS from '../../constants/index.js';
|
|
2
2
|
export const getTag = (target) => {
|
|
3
|
-
|
|
4
|
-
return (_a = target.constructor[CONSTANTS.STATIC_TAG]) !== null && _a !== void 0 ? _a : target[CONSTANTS.STATIC_TAG];
|
|
3
|
+
return target.constructor[CONSTANTS.STATIC_TAG] ?? target[CONSTANTS.STATIC_TAG];
|
|
5
4
|
};
|
package/client/utils/host.d.ts
CHANGED
package/client/utils/host.js
CHANGED
package/client/utils/isEvent.js
CHANGED
package/client/utils/isRTL.d.ts
CHANGED
package/client/utils/query.d.ts
CHANGED
package/client/utils/query.js
CHANGED
|
@@ -3,6 +3,5 @@ import { shadowRoot } from './shadowRoot.js';
|
|
|
3
3
|
* Selects the first element in the shadow dom that matches a specified CSS selector.
|
|
4
4
|
*/
|
|
5
5
|
export function query(target, selectors) {
|
|
6
|
-
|
|
7
|
-
return (_a = shadowRoot(target)) === null || _a === void 0 ? void 0 : _a.querySelector(selectors);
|
|
6
|
+
return shadowRoot(target)?.querySelector(selectors);
|
|
8
7
|
}
|
package/client/utils/queryAll.js
CHANGED
|
@@ -3,6 +3,5 @@ import { shadowRoot } from './shadowRoot.js';
|
|
|
3
3
|
* Selects all elements in the shadow dom that match a specified CSS selector.
|
|
4
4
|
*/
|
|
5
5
|
export function queryAll(target, selectors) {
|
|
6
|
-
|
|
7
|
-
return (_a = shadowRoot(target)) === null || _a === void 0 ? void 0 : _a.querySelectorAll(selectors);
|
|
6
|
+
return shadowRoot(target)?.querySelectorAll(selectors);
|
|
8
7
|
}
|
package/client/utils/request.js
CHANGED
|
@@ -12,9 +12,8 @@ import { html, render } from './uhtml.js';
|
|
|
12
12
|
* @param callback Invoked when the rendering phase is completed.
|
|
13
13
|
*/
|
|
14
14
|
export const request = (target, name, previous, callback) => {
|
|
15
|
-
var _a, _b;
|
|
16
15
|
// Creates/Gets a stacks.
|
|
17
|
-
const stacks = (target[
|
|
16
|
+
const stacks = (target[CONSTANTS.API_STACKS] ||= new Map());
|
|
18
17
|
// Creates/Updates a stack.
|
|
19
18
|
const stack = stacks.get(name) || { callbacks: [], previous };
|
|
20
19
|
// Adds the callback to the stack, if exists.
|
|
@@ -60,7 +59,7 @@ export const request = (target, name, previous, callback) => {
|
|
|
60
59
|
target[CONSTANTS.API_RENDER_COMPLETED] = true;
|
|
61
60
|
};
|
|
62
61
|
// Creates/Gets a micro task function.
|
|
63
|
-
target[
|
|
62
|
+
target[CONSTANTS.API_REQUEST] ||= task({ handler });
|
|
64
63
|
// Calls the micro task.
|
|
65
64
|
call(target, CONSTANTS.API_REQUEST);
|
|
66
65
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { HTMLPlusElement } from '../../types';
|
|
1
|
+
import { HTMLPlusElement } from '../../types/index.js';
|
|
2
2
|
export declare const shadowRoot: (target: HTMLElement | HTMLPlusElement) => ShadowRoot | null;
|
package/client/utils/slots.d.ts
CHANGED
package/client/utils/slots.js
CHANGED
|
@@ -3,14 +3,13 @@ import { host } from './host.js';
|
|
|
3
3
|
* Returns the slots name.
|
|
4
4
|
*/
|
|
5
5
|
export const slots = (target) => {
|
|
6
|
-
var _a;
|
|
7
6
|
const element = host(target);
|
|
8
7
|
const slots = {};
|
|
9
8
|
const children = Array.from(element.childNodes);
|
|
10
9
|
for (const child of children) {
|
|
11
10
|
if (child.nodeName == '#comment')
|
|
12
11
|
continue;
|
|
13
|
-
const name = child['slot'] || (
|
|
12
|
+
const name = child['slot'] || (child.nodeValue?.trim() && 'default') || ('slot' in child && 'default');
|
|
14
13
|
if (!name)
|
|
15
14
|
continue;
|
|
16
15
|
slots[name] = true;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { HTMLPlusElement } from '../../types';
|
|
1
|
+
import { HTMLPlusElement } from '../../types/index.js';
|
|
2
2
|
export declare function toDecorator(util: Function, ...parameters: any[]): (target: HTMLPlusElement, key: PropertyKey) => void;
|
package/client/utils/toEvent.js
CHANGED
|
@@ -35,7 +35,7 @@ export const toProperty = (input, type) => {
|
|
|
35
35
|
return value;
|
|
36
36
|
}
|
|
37
37
|
}
|
|
38
|
-
catch
|
|
38
|
+
catch { }
|
|
39
39
|
}
|
|
40
40
|
if (CONSTANTS.TYPE_OBJECT & type || type === Object) {
|
|
41
41
|
try {
|
|
@@ -44,7 +44,7 @@ export const toProperty = (input, type) => {
|
|
|
44
44
|
return value;
|
|
45
45
|
}
|
|
46
46
|
}
|
|
47
|
-
catch
|
|
47
|
+
catch { }
|
|
48
48
|
}
|
|
49
49
|
if (CONSTANTS.TYPE_UNDEFINED & type || type === undefined) {
|
|
50
50
|
if (string === 'undefined') {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { HTMLPlusElement } from '../../types';
|
|
1
|
+
import { HTMLPlusElement } from '../../types/index.js';
|
|
2
2
|
export declare const updateAttribute: (target: HTMLElement | HTMLPlusElement, key: string, value: any) => void;
|
package/package.json
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { TransformerPlugin, TransformerPluginContext } from '../transformer.types';
|
|
1
|
+
import { TransformerPlugin, TransformerPluginContext } from '../transformer.types.js';
|
|
2
2
|
export declare const ASSETS_OPTIONS: Partial<AssetsOptions>;
|
|
3
3
|
export interface AssetsOptions {
|
|
4
4
|
destination?: (context: TransformerPluginContext) => string;
|
|
@@ -49,8 +49,7 @@ export const customElement = (options) => {
|
|
|
49
49
|
if (name.name != 'className')
|
|
50
50
|
return;
|
|
51
51
|
const hasClass = path.parentPath.node.attributes.some((attribute) => {
|
|
52
|
-
|
|
53
|
-
return ((_a = attribute.name) === null || _a === void 0 ? void 0 : _a.name) == 'class';
|
|
52
|
+
return attribute.name?.name == 'class';
|
|
54
53
|
});
|
|
55
54
|
if (hasClass)
|
|
56
55
|
return path.remove();
|
|
@@ -61,6 +60,10 @@ export const customElement = (options) => {
|
|
|
61
60
|
visitor(ast, {
|
|
62
61
|
JSXAttribute(path) {
|
|
63
62
|
const { name, value } = path.node;
|
|
63
|
+
if (name.name == 'value') {
|
|
64
|
+
name.name = '.' + name.name;
|
|
65
|
+
return;
|
|
66
|
+
}
|
|
64
67
|
const key = ['tabIndex', 'viewBox'];
|
|
65
68
|
if (!key.includes(name.name))
|
|
66
69
|
return;
|
|
@@ -79,13 +82,12 @@ export const customElement = (options) => {
|
|
|
79
82
|
return t.callExpression(t.identifier(local), [
|
|
80
83
|
node,
|
|
81
84
|
t.arrayExpression(attributes.map((attribute) => {
|
|
82
|
-
var _a;
|
|
83
85
|
switch (attribute.type) {
|
|
84
86
|
case 'JSXSpreadAttribute':
|
|
85
87
|
return attribute.argument;
|
|
86
88
|
default:
|
|
87
89
|
return t.objectExpression([
|
|
88
|
-
t.objectProperty(t.stringLiteral(attribute.name.name),
|
|
90
|
+
t.objectProperty(t.stringLiteral(attribute.name.name), attribute.value?.type == 'JSXExpressionContainer'
|
|
89
91
|
? attribute.value.expression
|
|
90
92
|
: attribute.value || t.booleanLiteral(true))
|
|
91
93
|
]);
|
|
@@ -181,9 +183,8 @@ export const customElement = (options) => {
|
|
|
181
183
|
// add type to properties
|
|
182
184
|
visitor(ast, {
|
|
183
185
|
Decorator(path) {
|
|
184
|
-
var _a, _b;
|
|
185
186
|
const { expression } = path.node;
|
|
186
|
-
if (
|
|
187
|
+
if (expression.callee?.name != CONSTANTS.DECORATOR_PROPERTY)
|
|
187
188
|
return;
|
|
188
189
|
if (!expression.arguments.length) {
|
|
189
190
|
expression.arguments.push(t.objectExpression([]));
|
|
@@ -197,8 +198,7 @@ export const customElement = (options) => {
|
|
|
197
198
|
argument.properties = filtered;
|
|
198
199
|
let type = 0;
|
|
199
200
|
const extract = (input) => {
|
|
200
|
-
|
|
201
|
-
switch (input === null || input === void 0 ? void 0 : input.type) {
|
|
201
|
+
switch (input?.type) {
|
|
202
202
|
case 'BooleanLiteral':
|
|
203
203
|
type |= CONSTANTS.TYPE_BOOLEAN;
|
|
204
204
|
break;
|
|
@@ -264,8 +264,8 @@ export const customElement = (options) => {
|
|
|
264
264
|
break;
|
|
265
265
|
}
|
|
266
266
|
// TODO
|
|
267
|
-
if (
|
|
268
|
-
|
|
267
|
+
if (input?.type == 'TSParenthesizedType' &&
|
|
268
|
+
input?.typeAnnotation?.type == 'TSIntersectionType') {
|
|
269
269
|
let types = input.types || input.typeAnnotation.types;
|
|
270
270
|
if (types.length != 2)
|
|
271
271
|
return;
|
|
@@ -275,7 +275,7 @@ export const customElement = (options) => {
|
|
|
275
275
|
extract(types[0]);
|
|
276
276
|
}
|
|
277
277
|
};
|
|
278
|
-
extract(getType(context.directoryPath, ast,
|
|
278
|
+
extract(getType(context.directoryPath, ast, path.parentPath.node.typeAnnotation?.typeAnnotation));
|
|
279
279
|
argument.properties.push(t.objectProperty(t.identifier(CONSTANTS.DECORATOR_PROPERTY_TYPE), t.numericLiteral(type)));
|
|
280
280
|
}
|
|
281
281
|
});
|
|
@@ -294,12 +294,11 @@ export const customElement = (options) => {
|
|
|
294
294
|
});
|
|
295
295
|
});
|
|
296
296
|
const events = context.classEvents.map((event) => {
|
|
297
|
-
var _a;
|
|
298
297
|
const key = event.key;
|
|
299
298
|
const typeAnnotation = event.typeAnnotation;
|
|
300
299
|
return Object.assign(t.tSPropertySignature(t.identifier(camelCase('on-' + key.name)), t.tsTypeAnnotation(t.tsFunctionType(undefined, [
|
|
301
300
|
Object.assign({}, t.identifier('event'), {
|
|
302
|
-
typeAnnotation: t.tsTypeAnnotation(t.tsTypeReference(t.identifier('CustomEvent'),
|
|
301
|
+
typeAnnotation: t.tsTypeAnnotation(t.tsTypeReference(t.identifier('CustomEvent'), typeAnnotation?.['typeAnnotation']?.typeParameters))
|
|
303
302
|
})
|
|
304
303
|
], t.tsTypeAnnotation(t.tsVoidKeyword())))), {
|
|
305
304
|
optional: true,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { TransformerPlugin, TransformerPluginContext } from '../transformer.types';
|
|
1
|
+
import { TransformerPlugin, TransformerPluginContext } from '../transformer.types.js';
|
|
2
2
|
export declare const DOCUMENT_OPTIONS: Partial<DocumentOptions>;
|
|
3
3
|
export interface DocumentOptions {
|
|
4
4
|
destination: string;
|
|
@@ -11,13 +11,11 @@ export const document = (options) => {
|
|
|
11
11
|
const name = 'document';
|
|
12
12
|
options = Object.assign({}, DOCUMENT_OPTIONS, options);
|
|
13
13
|
const finish = (global) => {
|
|
14
|
-
var _a, _b;
|
|
15
14
|
const json = {
|
|
16
15
|
elements: []
|
|
17
16
|
};
|
|
18
17
|
for (const context of global.contexts) {
|
|
19
18
|
const events = context.classEvents.map((event) => {
|
|
20
|
-
var _a, _b;
|
|
21
19
|
const cancelable = (() => {
|
|
22
20
|
if (!event.decorators)
|
|
23
21
|
return false;
|
|
@@ -36,11 +34,11 @@ export const document = (options) => {
|
|
|
36
34
|
}
|
|
37
35
|
}
|
|
38
36
|
}
|
|
39
|
-
catch
|
|
37
|
+
catch { }
|
|
40
38
|
return false;
|
|
41
39
|
})();
|
|
42
|
-
const detail = print(
|
|
43
|
-
const detailReference = getTypeReference(context.fileAST,
|
|
40
|
+
const detail = print(event.typeAnnotation?.['typeAnnotation']);
|
|
41
|
+
const detailReference = getTypeReference(context.fileAST, event.typeAnnotation?.['typeAnnotation'].typeParameters.params[0]);
|
|
44
42
|
const name = event.key['name'];
|
|
45
43
|
return Object.assign({
|
|
46
44
|
cancelable,
|
|
@@ -55,36 +53,31 @@ export const document = (options) => {
|
|
|
55
53
|
.sort((a, b) => (a > b ? 1 : -1))
|
|
56
54
|
.pop();
|
|
57
55
|
const methods = context.classMethods.map((method) => {
|
|
58
|
-
var _a, _b;
|
|
59
56
|
const async = method.async;
|
|
60
57
|
const name = method.key['name'];
|
|
61
58
|
const comments = extractFromComment(method);
|
|
62
59
|
// TODO
|
|
63
|
-
const parameters = method.params.map((param) => {
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
typeReference: getTypeReference(context.fileAST, (_d = param === null || param === void 0 ? void 0 : param['typeAnnotation']) === null || _d === void 0 ? void 0 : _d.typeAnnotation)
|
|
71
|
-
});
|
|
72
|
-
});
|
|
60
|
+
const parameters = method.params.map((param) => ({
|
|
61
|
+
description: comments.params?.find((item) => item.name == param['name'])?.description,
|
|
62
|
+
required: !param['optional'],
|
|
63
|
+
name: param['name'],
|
|
64
|
+
type: print(param?.['typeAnnotation']?.typeAnnotation) || undefined,
|
|
65
|
+
typeReference: getTypeReference(context.fileAST, param?.['typeAnnotation']?.typeAnnotation)
|
|
66
|
+
}));
|
|
73
67
|
// TODO
|
|
74
68
|
delete comments.params;
|
|
75
|
-
const returns = print(
|
|
76
|
-
const returnsReference = getTypeReference(context.fileAST,
|
|
69
|
+
const returns = print(method.returnType?.['typeAnnotation']) || 'void';
|
|
70
|
+
const returnsReference = getTypeReference(context.fileAST, method.returnType?.['typeAnnotation']);
|
|
77
71
|
const signature = [
|
|
78
72
|
method.key['name'],
|
|
79
73
|
'(',
|
|
80
74
|
parameters
|
|
81
75
|
.map((parameter) => {
|
|
82
|
-
var _a;
|
|
83
76
|
let string = '';
|
|
84
77
|
string += parameter.name;
|
|
85
78
|
string += parameter.required ? '' : '?';
|
|
86
79
|
string += parameter.type ? ': ' : '';
|
|
87
|
-
string +=
|
|
80
|
+
string += parameter.type ?? '';
|
|
88
81
|
return string;
|
|
89
82
|
})
|
|
90
83
|
.join(', '),
|
|
@@ -116,7 +109,6 @@ export const document = (options) => {
|
|
|
116
109
|
});
|
|
117
110
|
});
|
|
118
111
|
const properties = context.classProperties.map((property) => {
|
|
119
|
-
var _a, _b, _c;
|
|
120
112
|
const attribute = extractAttribute(property) || kebabCase(property.key['name']);
|
|
121
113
|
// TODO
|
|
122
114
|
const initializer = getInitializer(property.value);
|
|
@@ -141,15 +133,15 @@ export const document = (options) => {
|
|
|
141
133
|
}
|
|
142
134
|
}
|
|
143
135
|
}
|
|
144
|
-
catch
|
|
136
|
+
catch { }
|
|
145
137
|
return false;
|
|
146
138
|
})();
|
|
147
139
|
const required = 'optional' in property && !property.optional;
|
|
148
140
|
// TODO
|
|
149
141
|
const type = property['returnType']
|
|
150
|
-
? print(
|
|
151
|
-
: print(
|
|
152
|
-
const typeReference = getTypeReference(context.fileAST,
|
|
142
|
+
? print(property['returnType']?.['typeAnnotation'])
|
|
143
|
+
: print(property.typeAnnotation?.['typeAnnotation']);
|
|
144
|
+
const typeReference = getTypeReference(context.fileAST, property.typeAnnotation?.['typeAnnotation']);
|
|
153
145
|
return Object.assign({
|
|
154
146
|
attribute,
|
|
155
147
|
initializer,
|
|
@@ -191,7 +183,7 @@ export const document = (options) => {
|
|
|
191
183
|
styles,
|
|
192
184
|
title
|
|
193
185
|
}, extractFromComment(context.class));
|
|
194
|
-
const transformed =
|
|
186
|
+
const transformed = options.transformer?.(context, element) || element;
|
|
195
187
|
json.elements.push(transformed);
|
|
196
188
|
}
|
|
197
189
|
json.elements = json.elements.sort((a, b) => (a.title > b.title ? 1 : -1));
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { TransformerPlugin } from '../transformer.types';
|
|
1
|
+
import { TransformerPlugin } from '../transformer.types.js';
|
|
2
2
|
export declare const extract: () => TransformerPlugin;
|
|
@@ -5,14 +5,13 @@ import { hasDecorator } from '../utils/index.js';
|
|
|
5
5
|
export const extract = () => {
|
|
6
6
|
const name = 'extract';
|
|
7
7
|
const run = (context) => {
|
|
8
|
-
|
|
9
|
-
const { declaration, leadingComments } = (_a = context.fileAST) === null || _a === void 0 ? void 0 : _a.program.body.find((child) => {
|
|
8
|
+
const { declaration, leadingComments } = context.fileAST?.program.body.find((child) => {
|
|
10
9
|
return t.isExportNamedDeclaration(child);
|
|
11
10
|
});
|
|
12
11
|
context.class = declaration;
|
|
13
12
|
context.class.leadingComments = leadingComments; // TODO
|
|
14
|
-
context.classMembers =
|
|
15
|
-
context.className =
|
|
13
|
+
context.classMembers = context.class?.body?.body || [];
|
|
14
|
+
context.className = context.class?.id?.name;
|
|
16
15
|
context.elementKey = kebabCase(context.className || '');
|
|
17
16
|
context.classEvents = context.classMembers.filter((member) => hasDecorator(member, CONSTANTS.DECORATOR_EVENT));
|
|
18
17
|
context.classMethods = context.classMembers.filter((member) => hasDecorator(member, CONSTANTS.DECORATOR_METHOD));
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ParserOptions } from '@babel/parser';
|
|
2
|
-
import { TransformerPlugin } from '../transformer.types';
|
|
2
|
+
import { TransformerPlugin } from '../transformer.types.js';
|
|
3
3
|
export declare const PARSE_OPTIONS: Partial<ParseOptions>;
|
|
4
4
|
export interface ParseOptions extends ParserOptions {
|
|
5
5
|
}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
import { TransformerPlugin } from '../transformer.types';
|
|
1
|
+
import { TransformerPlugin } from '../transformer.types.js';
|
|
3
2
|
export declare const READ_OPTIONS: Partial<ReadOptions>;
|
|
4
3
|
export interface ReadOptions {
|
|
5
|
-
encoding:
|
|
4
|
+
encoding: 'utf8' | 'ascii' | 'utf-8' | 'utf16le' | 'utf-16le' | 'ucs2' | 'ucs-2' | 'base64' | 'base64url' | 'latin1' | 'binary' | 'hex';
|
|
6
5
|
flag?: string | undefined;
|
|
7
6
|
}
|
|
8
7
|
export declare const read: (options?: ReadOptions) => TransformerPlugin;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { TransformerPlugin, TransformerPluginContext } from '../transformer.types';
|
|
1
|
+
import { TransformerPlugin, TransformerPluginContext } from '../transformer.types.js';
|
|
2
2
|
export declare const README_OPTIONS: Partial<ReadmeOptions>;
|
|
3
3
|
export interface ReadmeOptions {
|
|
4
4
|
source?: (context: TransformerPluginContext) => string;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { TransformerPlugin, TransformerPluginContext } from '../transformer.types';
|
|
1
|
+
import { TransformerPlugin, TransformerPluginContext } from '../transformer.types.js';
|
|
2
2
|
export declare const STYLE_OPTIONS: Partial<StyleOptions>;
|
|
3
3
|
export interface StyleOptions {
|
|
4
4
|
source?: (context: TransformerPluginContext) => string | string[];
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { TransformerPlugin } from '../transformer.types';
|
|
1
|
+
import { TransformerPlugin } from '../transformer.types.js';
|
|
2
2
|
export declare const validate: () => TransformerPlugin;
|
|
@@ -7,8 +7,7 @@ export const validate = () => {
|
|
|
7
7
|
context.skipped = true;
|
|
8
8
|
visitor(context.fileAST, {
|
|
9
9
|
ImportDeclaration(path) {
|
|
10
|
-
|
|
11
|
-
if (((_a = path.node.source) === null || _a === void 0 ? void 0 : _a.value) !== CONSTANTS.PACKAGE_NAME)
|
|
10
|
+
if (path.node.source?.value !== CONSTANTS.PACKAGE_NAME)
|
|
12
11
|
return;
|
|
13
12
|
for (const specifier of path.node.specifiers) {
|
|
14
13
|
if (specifier.imported.name !== CONSTANTS.DECORATOR_ELEMENT)
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { TransformerPlugin, TransformerPluginContext } from '../transformer.types';
|
|
1
|
+
import { TransformerPlugin, TransformerPluginContext } from '../transformer.types.js';
|
|
2
2
|
export declare const VISUAL_STUDIO_CODE_OPTIONS: Partial<VisualStudioCodeOptions>;
|
|
3
3
|
export interface VisualStudioCodeOptions {
|
|
4
4
|
destination?: string;
|
|
@@ -9,7 +9,6 @@ export const visualStudioCode = (options) => {
|
|
|
9
9
|
const name = 'visualStudioCode';
|
|
10
10
|
options = Object.assign({}, VISUAL_STUDIO_CODE_OPTIONS, options);
|
|
11
11
|
const finish = (global) => {
|
|
12
|
-
var _a, _b, _c, _d, _e;
|
|
13
12
|
const contexts = global.contexts.sort((a, b) => {
|
|
14
13
|
return a.elementKey.toUpperCase() > b.elementKey.toUpperCase() ? +1 : -1;
|
|
15
14
|
});
|
|
@@ -25,7 +24,7 @@ export const visualStudioCode = (options) => {
|
|
|
25
24
|
references: [
|
|
26
25
|
{
|
|
27
26
|
name: 'Source code',
|
|
28
|
-
url:
|
|
27
|
+
url: options.reference?.(context)
|
|
29
28
|
}
|
|
30
29
|
]
|
|
31
30
|
}, extractFromComment(context.class, ['description']));
|
|
@@ -34,7 +33,7 @@ export const visualStudioCode = (options) => {
|
|
|
34
33
|
name: extractAttribute(property) || kebabCase(property.key['name']),
|
|
35
34
|
values: []
|
|
36
35
|
}, extractFromComment(property, ['description']));
|
|
37
|
-
const type = print(getType(context.directoryPath, context.fileAST,
|
|
36
|
+
const type = print(getType(context.directoryPath, context.fileAST, property.typeAnnotation?.['typeAnnotation']));
|
|
38
37
|
const sections = type.split('|');
|
|
39
38
|
for (const section of sections) {
|
|
40
39
|
const trimmed = section.trim();
|
|
@@ -63,7 +62,7 @@ export const visualStudioCode = (options) => {
|
|
|
63
62
|
}
|
|
64
63
|
tag.attributes.push(attribute);
|
|
65
64
|
}
|
|
66
|
-
const transformed =
|
|
65
|
+
const transformed = options.transformer?.(context, tag) || tag;
|
|
67
66
|
json.tags.push(transformed);
|
|
68
67
|
}
|
|
69
68
|
const dirname = path.dirname(options.destination);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { TransformerPlugin, TransformerPluginContext } from '../transformer.types';
|
|
1
|
+
import { TransformerPlugin, TransformerPluginContext } from '../transformer.types.js';
|
|
2
2
|
export declare const WEB_TYPES_OPTIONS: Partial<WebTypesOptions>;
|
|
3
3
|
export interface WebTypesOptions {
|
|
4
4
|
destination?: string;
|
|
@@ -11,7 +11,6 @@ export const webTypes = (options) => {
|
|
|
11
11
|
const name = 'webTypes';
|
|
12
12
|
options = Object.assign({}, WEB_TYPES_OPTIONS, options);
|
|
13
13
|
const finish = (global) => {
|
|
14
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
15
14
|
const contexts = global.contexts.sort((a, b) => {
|
|
16
15
|
return a.elementKey.toUpperCase() > b.elementKey.toUpperCase() ? +1 : -1;
|
|
17
16
|
});
|
|
@@ -32,42 +31,39 @@ export const webTypes = (options) => {
|
|
|
32
31
|
}
|
|
33
32
|
};
|
|
34
33
|
for (const context of contexts) {
|
|
35
|
-
const attributes =
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
}, extractFromComment(property, ['description', 'deprecated', 'experimental']));
|
|
47
|
-
});
|
|
48
|
-
const events = (_b = context.classEvents) === null || _b === void 0 ? void 0 : _b.map((event) => Object.assign({
|
|
34
|
+
const attributes = context.classProperties?.map((property) => Object.assign({
|
|
35
|
+
name: extractAttribute(property) || kebabCase(property.key['name']),
|
|
36
|
+
value: {
|
|
37
|
+
// kind: TODO
|
|
38
|
+
type: print(getType(context.directoryPath, context.fileAST, property.typeAnnotation?.['typeAnnotation']))
|
|
39
|
+
// required: TODO
|
|
40
|
+
// default: TODO
|
|
41
|
+
},
|
|
42
|
+
default: getInitializer(property.value)
|
|
43
|
+
}, extractFromComment(property, ['description', 'deprecated', 'experimental'])));
|
|
44
|
+
const events = context.classEvents?.map((event) => Object.assign({
|
|
49
45
|
name: kebabCase(event.key['name']) // TODO
|
|
50
46
|
// 'value': TODO
|
|
51
47
|
}, extractFromComment(event, ['description', 'deprecated', 'experimental'])));
|
|
52
|
-
const methods =
|
|
48
|
+
const methods = context.classMethods?.map((method) => Object.assign({
|
|
53
49
|
name: method.key['name']
|
|
54
50
|
// 'value': TODO
|
|
55
51
|
}, extractFromComment(method, ['description', 'deprecated', 'experimental'])));
|
|
56
|
-
const properties =
|
|
52
|
+
const properties = context.classProperties?.map((property) => Object.assign({
|
|
57
53
|
name: property.key['name'],
|
|
58
54
|
// 'value': TODO
|
|
59
55
|
default: getInitializer(property.value)
|
|
60
56
|
}, extractFromComment(property, ['description', 'deprecated', 'experimental'])));
|
|
61
57
|
const element = Object.assign({
|
|
62
58
|
'name': context.elementKey,
|
|
63
|
-
'doc-url':
|
|
59
|
+
'doc-url': options.reference?.(context),
|
|
64
60
|
'js': {
|
|
65
61
|
events,
|
|
66
62
|
properties: [].concat(properties, methods)
|
|
67
63
|
},
|
|
68
64
|
attributes
|
|
69
65
|
}, extractFromComment(context.class, ['description', 'deprecated', 'experimental', 'slots']));
|
|
70
|
-
const transformed =
|
|
66
|
+
const transformed = options.transformer?.(context, element) || element;
|
|
71
67
|
json.contributions.html.elements.push(transformed);
|
|
72
68
|
}
|
|
73
69
|
const dirname = path.dirname(options.destination);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { TransformerPlugin, TransformerPluginContext } from './transformer.types';
|
|
1
|
+
import { TransformerPlugin, TransformerPluginContext } from './transformer.types.js';
|
|
2
2
|
export declare const transformer: (...plugins: TransformerPlugin[]) => {
|
|
3
3
|
start: () => Promise<void>;
|
|
4
4
|
run: (filePath: string) => Promise<TransformerPluginContext>;
|
|
@@ -21,13 +21,12 @@ export function addDependency(path, source, local, imported, comment) {
|
|
|
21
21
|
return {
|
|
22
22
|
node: declaration
|
|
23
23
|
};
|
|
24
|
-
let specifier = declaration
|
|
25
|
-
var _a;
|
|
24
|
+
let specifier = declaration?.specifiers.find((specifier) => {
|
|
26
25
|
if (isDefault) {
|
|
27
26
|
return specifier.type == 'ImportDefaultSpecifier';
|
|
28
27
|
}
|
|
29
28
|
else if (isImport) {
|
|
30
|
-
return
|
|
29
|
+
return specifier.imported?.name == imported;
|
|
31
30
|
}
|
|
32
31
|
});
|
|
33
32
|
if (specifier)
|
|
@@ -1,14 +1,17 @@
|
|
|
1
1
|
export const extractFromComment = (node, whitelist) => {
|
|
2
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
3
2
|
const normalized = [];
|
|
4
3
|
const result = {
|
|
5
4
|
description: ''
|
|
6
5
|
};
|
|
7
|
-
const lines =
|
|
6
|
+
const lines = node.leadingComments
|
|
7
|
+
?.map((comment) => {
|
|
8
8
|
if (comment.type == 'CommentLine')
|
|
9
9
|
return comment.value;
|
|
10
10
|
return comment.value.split('\n');
|
|
11
|
-
})
|
|
11
|
+
})
|
|
12
|
+
?.flat()
|
|
13
|
+
?.map((line) => line.trim().replace(/^\*/, '').trim())
|
|
14
|
+
?.filter((line) => line.trim());
|
|
12
15
|
for (const line of lines || []) {
|
|
13
16
|
if (line.startsWith('@')) {
|
|
14
17
|
normalized.push(line);
|
|
@@ -27,15 +30,15 @@ export const extractFromComment = (node, whitelist) => {
|
|
|
27
30
|
const groups = regex.exec(line);
|
|
28
31
|
if (!groups)
|
|
29
32
|
continue;
|
|
30
|
-
const tag =
|
|
31
|
-
const type =
|
|
32
|
-
const name =
|
|
33
|
-
const description =
|
|
33
|
+
const tag = groups[1]?.trim();
|
|
34
|
+
const type = groups[2]?.trim().slice(1, -1);
|
|
35
|
+
const name = groups[3]?.trim();
|
|
36
|
+
const description = groups[4]?.trim();
|
|
34
37
|
if (name && description) {
|
|
35
38
|
const key = tag + 's';
|
|
36
39
|
if (whitelist && !whitelist.includes(key))
|
|
37
40
|
continue;
|
|
38
|
-
(result[key]
|
|
41
|
+
(result[key] ||= []).push({ name, type, description });
|
|
39
42
|
}
|
|
40
43
|
else {
|
|
41
44
|
const key = tag;
|
|
@@ -1,4 +1,3 @@
|
|
|
1
1
|
export const getInitializer = (node) => {
|
|
2
|
-
|
|
3
|
-
return ((_a = node === null || node === void 0 ? void 0 : node.extra) === null || _a === void 0 ? void 0 : _a.raw) || (node === null || node === void 0 ? void 0 : node['value']);
|
|
2
|
+
return node?.extra?.raw || node?.['value'];
|
|
4
3
|
};
|
|
@@ -42,14 +42,14 @@ export const getType = (directory, file, node) => {
|
|
|
42
42
|
.find((reference) => fs.existsSync(reference));
|
|
43
43
|
const content = fs.readFileSync(reference, 'utf8');
|
|
44
44
|
const filePath = resolve(directory, path.node.source.value + '.ts');
|
|
45
|
-
path.$ast
|
|
45
|
+
path.$ast ||= parse(content, {
|
|
46
46
|
allowImportExportEverywhere: true,
|
|
47
47
|
plugins: ['typescript'],
|
|
48
48
|
ranges: false
|
|
49
|
-
})
|
|
49
|
+
});
|
|
50
50
|
result = getType(dirname(filePath), path.$ast, node);
|
|
51
51
|
}
|
|
52
|
-
catch
|
|
52
|
+
catch { }
|
|
53
53
|
path.stop();
|
|
54
54
|
break;
|
|
55
55
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export const hasDecorator = (node, name) => {
|
|
2
2
|
if (!node.decorators)
|
|
3
3
|
return false;
|
|
4
|
-
return !!node.decorators.some((decorator) =>
|
|
4
|
+
return !!node.decorators.some((decorator) => decorator.expression.callee?.name == name);
|
|
5
5
|
};
|