@htmlplus/element 0.5.0 → 0.5.1
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 +19 -20
- package/client/decorators/element.js +6 -5
- package/client/decorators/listen.d.ts +13 -3
- package/client/decorators/listen.js +15 -5
- package/client/decorators/property.js +13 -3
- package/client/decorators/watch.d.ts +5 -5
- package/client/decorators/watch.js +10 -8
- package/client/utils/config.d.ts +9 -2
- package/client/utils/config.js +28 -4
- package/client/utils/getMembers.d.ts +8 -0
- package/client/utils/getMembers.js +5 -0
- package/client/utils/getTag.d.ts +2 -0
- package/client/utils/getTag.js +5 -0
- package/client/utils/index.d.ts +2 -2
- package/client/utils/index.js +2 -2
- package/client/utils/request.js +2 -2
- package/client/vendors/uhtml.js +1 -2
- package/compiler/plugins/assets.d.ts +1 -0
- package/compiler/plugins/assets.js +2 -2
- package/compiler/plugins/copy.d.ts +1 -0
- package/compiler/plugins/copy.js +2 -2
- package/compiler/plugins/customElement.d.ts +1 -0
- package/compiler/plugins/customElement.js +23 -11
- package/compiler/plugins/customElementReact/customElementReact.d.ts +1 -0
- package/compiler/plugins/customElementReact/customElementReact.js +2 -2
- package/compiler/plugins/customElementReact/templates/src/components/{{fileName}}.ts.hbs +1 -2
- package/compiler/plugins/customElementReact/templates/src/proxy.ts.hbs +29 -38
- package/compiler/plugins/document.d.ts +1 -0
- package/compiler/plugins/document.js +2 -2
- package/compiler/plugins/extract.d.ts +1 -0
- package/compiler/plugins/extract.js +2 -2
- package/compiler/plugins/parse.d.ts +1 -0
- package/compiler/plugins/parse.js +2 -2
- package/compiler/plugins/read.d.ts +7 -1
- package/compiler/plugins/read.js +6 -2
- package/compiler/plugins/readme.d.ts +1 -0
- package/compiler/plugins/readme.js +2 -2
- package/compiler/plugins/style.d.ts +1 -0
- package/compiler/plugins/style.js +3 -3
- package/compiler/plugins/visualStudioCode.d.ts +1 -0
- package/compiler/plugins/visualStudioCode.js +2 -2
- package/compiler/plugins/webTypes.d.ts +1 -0
- package/compiler/plugins/webTypes.js +2 -2
- package/constants/index.d.ts +12 -11
- package/constants/index.js +15 -12
- package/package.json +18 -13
- package/client/utils/getMemberType.d.ts +0 -2
- package/client/utils/getMemberType.js +0 -5
- package/client/utils/getMembersKey.d.ts +0 -2
- package/client/utils/getMembersKey.js +0 -4
package/README.md
CHANGED
|
@@ -1,16 +1,6 @@
|
|
|
1
1
|
# Create Custom HTML Element
|
|
2
2
|
|
|
3
|
-
[
|
|
4
|
-
[](https://github.com/htmlplus/element/network/members)
|
|
5
|
-
[](https://github.com/htmlplus/element/stargazers)
|
|
6
|
-
[](https://github.com/htmlplus/core/blob/main/LICENSE)
|
|
7
|
-
[](https://www.linkedin.com/company/htmlplus)
|
|
8
|
-
[](https://coveralls.io/r/htmlplus/element/)
|
|
9
|
-
[](https://packagephobia.now.sh/result?p=element)
|
|
10
|
-
|
|
11
|
-
Element is powerful library for building scalable, reusable design system for any technology.
|
|
12
|
-
It is one of the fastest and most testable libraries for building web components on the web.
|
|
13
|
-
Completely compatible for Typescript and tsx.
|
|
3
|
+
A powerful library for building scalable, reusable, fast, tastable and lightweight design system for any web technologies. Powerd by [Web Component](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements).
|
|
14
4
|
|
|
15
5
|
## Table of content
|
|
16
6
|
|
|
@@ -47,7 +37,7 @@ pnpm create @htmlplus/element
|
|
|
47
37
|
cd htmlplus-project
|
|
48
38
|
```
|
|
49
39
|
|
|
50
|
-
To start
|
|
40
|
+
To start the project, run:
|
|
51
41
|
|
|
52
42
|
```bash
|
|
53
43
|
# with npm
|
|
@@ -69,7 +59,7 @@ Element is based on classes, so all components are based on `decorator`.
|
|
|
69
59
|
The decorator converts the next component code based on it's properties during the build.
|
|
70
60
|
|
|
71
61
|
```tsx
|
|
72
|
-
// my-element
|
|
62
|
+
// my-element.tsx
|
|
73
63
|
|
|
74
64
|
import { Element } from '@htmlplus/element';
|
|
75
65
|
|
|
@@ -92,7 +82,7 @@ The result of this component after build is provide `my-element` web component.
|
|
|
92
82
|
The element automatically adds a same name style file to this component. Create `my-element.scss` file for style.
|
|
93
83
|
|
|
94
84
|
```scss
|
|
95
|
-
// my-element
|
|
85
|
+
// my-element.scss
|
|
96
86
|
|
|
97
87
|
:host {
|
|
98
88
|
display: block;
|
|
@@ -103,10 +93,10 @@ The element automatically adds a same name style file to this component. Create
|
|
|
103
93
|
|
|
104
94
|
## Development Environment
|
|
105
95
|
|
|
106
|
-
For run any of the component, you must write element name tag into the `
|
|
96
|
+
For run any of the component, you must write element name tag into the `index.html`
|
|
107
97
|
|
|
108
98
|
```html
|
|
109
|
-
<!--
|
|
99
|
+
<!-- index.html -->
|
|
110
100
|
|
|
111
101
|
<body>
|
|
112
102
|
<my-element></my-element>
|
|
@@ -289,16 +279,25 @@ export class MyButton {
|
|
|
289
279
|
</details>
|
|
290
280
|
|
|
291
281
|
<details>
|
|
292
|
-
|
|
282
|
+
<summary>Watch</summary>
|
|
293
283
|
|
|
294
|
-
|
|
284
|
+
Monitors `@Property` and `@State` to catch changes.
|
|
285
|
+
The decorated method will be invoked after any
|
|
286
|
+
changes with the `key`, `newValue`, and `oldValue` as parameters.
|
|
287
|
+
If the arguments aren't defined, all of the `@Property` and `@State` are considered.
|
|
295
288
|
|
|
296
|
-
|
|
289
|
+
Parameters:
|
|
290
|
+
|
|
291
|
+
- **keys**: Collection of `@Property` and `@State` names.
|
|
292
|
+
- **type**: string | string[]
|
|
293
|
+
- **default**: undefined
|
|
294
|
+
- **immediate**: Triggers the callback immediately after initialization.
|
|
295
|
+
- **type**: boolean
|
|
296
|
+
- **default**: undefined
|
|
297
297
|
|
|
298
298
|
```tsx
|
|
299
299
|
import { Element, Property, Watch } from '@htmlplus/element';
|
|
300
300
|
|
|
301
|
-
|
|
302
301
|
@Element()
|
|
303
302
|
export class MyElement {
|
|
304
303
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { camelCase, paramCase } from 'change-case';
|
|
2
2
|
import * as CONSTANTS from '../../constants/index.js';
|
|
3
|
-
import { call,
|
|
3
|
+
import { call, getMembers, isServer, parseValue, request } from '../utils/index.js';
|
|
4
4
|
export function Element(tag) {
|
|
5
5
|
return function (constructor) {
|
|
6
6
|
if (isServer())
|
|
@@ -16,17 +16,18 @@ export function Element(tag) {
|
|
|
16
16
|
}
|
|
17
17
|
// TODO: ignore functions
|
|
18
18
|
static get observedAttributes() {
|
|
19
|
-
return
|
|
19
|
+
return Object.keys(getMembers(constructor)).map((key) => paramCase(key));
|
|
20
20
|
}
|
|
21
21
|
adoptedCallback() {
|
|
22
22
|
call(this[CONSTANTS.API_INSTANCE], CONSTANTS.LIFECYCLE_ADOPTED);
|
|
23
23
|
}
|
|
24
24
|
attributeChangedCallback(attribute, prev, next) {
|
|
25
|
+
var _a;
|
|
25
26
|
const instance = this[CONSTANTS.API_INSTANCE];
|
|
26
|
-
if (instance[CONSTANTS.
|
|
27
|
+
if (instance[CONSTANTS.API_LOCKED])
|
|
27
28
|
return;
|
|
28
29
|
const name = camelCase(attribute);
|
|
29
|
-
const type =
|
|
30
|
+
const type = (_a = getMembers(instance)[name]) === null || _a === void 0 ? void 0 : _a.type;
|
|
30
31
|
const value = parseValue(next, type);
|
|
31
32
|
if (instance[name] === value)
|
|
32
33
|
return;
|
|
@@ -34,7 +35,7 @@ export function Element(tag) {
|
|
|
34
35
|
}
|
|
35
36
|
connectedCallback() {
|
|
36
37
|
const instance = this[CONSTANTS.API_INSTANCE];
|
|
37
|
-
instance[CONSTANTS.
|
|
38
|
+
instance[CONSTANTS.API_CONNECTED] = true;
|
|
38
39
|
call(instance, CONSTANTS.LIFECYCLE_CONNECTED);
|
|
39
40
|
request(instance, undefined, undefined, () => {
|
|
40
41
|
call(instance, CONSTANTS.LIFECYCLE_LOADED);
|
|
@@ -1,12 +1,22 @@
|
|
|
1
1
|
import { PlusElement } from '../../types';
|
|
2
2
|
export interface ListenOptions {
|
|
3
|
-
|
|
3
|
+
capture?: boolean;
|
|
4
4
|
once?: boolean;
|
|
5
5
|
passive?: boolean;
|
|
6
6
|
signal?: AbortSignal;
|
|
7
|
-
|
|
7
|
+
target?: 'host' | 'body' | 'document' | 'window';
|
|
8
8
|
}
|
|
9
|
-
|
|
9
|
+
/**
|
|
10
|
+
* The default options.
|
|
11
|
+
*/
|
|
12
|
+
export declare const ListenOptionsDefault: ListenOptions;
|
|
13
|
+
/**
|
|
14
|
+
* Will be called whenever the specified event is delivered to the target.
|
|
15
|
+
* [More](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener).
|
|
16
|
+
* @param type TODO
|
|
17
|
+
* @param options TODO
|
|
18
|
+
*/
|
|
19
|
+
export declare function Listen(type: string, options?: ListenOptions): (target: PlusElement, propertyKey: PropertyKey, descriptor: PropertyDescriptor) => {
|
|
10
20
|
configurable: boolean;
|
|
11
21
|
get(): any;
|
|
12
22
|
};
|
|
@@ -1,13 +1,23 @@
|
|
|
1
1
|
import * as CONSTANTS from '../../constants/index.js';
|
|
2
2
|
import { appendToMethod, host, on, off } from '../utils/index.js';
|
|
3
3
|
import { Bind } from './bind.js';
|
|
4
|
-
|
|
4
|
+
/**
|
|
5
|
+
* The default options.
|
|
6
|
+
*/
|
|
7
|
+
export const ListenOptionsDefault = {
|
|
5
8
|
target: 'host'
|
|
6
9
|
};
|
|
7
|
-
|
|
10
|
+
/**
|
|
11
|
+
* Will be called whenever the specified event is delivered to the target.
|
|
12
|
+
* [More](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener).
|
|
13
|
+
* @param type TODO
|
|
14
|
+
* @param options TODO
|
|
15
|
+
*/
|
|
16
|
+
export function Listen(type, options) {
|
|
8
17
|
return function (target, propertyKey, descriptor) {
|
|
18
|
+
options = Object.assign({}, ListenOptionsDefault, options);
|
|
9
19
|
const element = (instance) => {
|
|
10
|
-
switch (options.target) {
|
|
20
|
+
switch (options === null || options === void 0 ? void 0 : options.target) {
|
|
11
21
|
case 'body':
|
|
12
22
|
return window.document.body;
|
|
13
23
|
case 'document':
|
|
@@ -21,10 +31,10 @@ export function Listen(name, options = defaults) {
|
|
|
21
31
|
}
|
|
22
32
|
};
|
|
23
33
|
appendToMethod(target, CONSTANTS.LIFECYCLE_CONNECTED, function () {
|
|
24
|
-
on(element(this),
|
|
34
|
+
on(element(this), type, this[propertyKey], options);
|
|
25
35
|
});
|
|
26
36
|
appendToMethod(target, CONSTANTS.LIFECYCLE_DISCONNECTED, function () {
|
|
27
|
-
off(element(this),
|
|
37
|
+
off(element(this), type, this[propertyKey], options);
|
|
28
38
|
});
|
|
29
39
|
return Bind()(target, propertyKey, descriptor);
|
|
30
40
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as CONSTANTS from '../../constants/index.js';
|
|
2
|
-
import { defineProperty, host, request, appendToMethod, updateAttribute } from '../utils/index.js';
|
|
2
|
+
import { defineProperty, host, request, appendToMethod, updateAttribute, getConfig, getMembers, getTag } from '../utils/index.js';
|
|
3
3
|
export function Property(options) {
|
|
4
4
|
return function (target, propertyKey) {
|
|
5
5
|
const name = String(propertyKey);
|
|
@@ -15,14 +15,24 @@ export function Property(options) {
|
|
|
15
15
|
request(this, name, previous, (skip) => {
|
|
16
16
|
if (!(options === null || options === void 0 ? void 0 : options.reflect) || skip)
|
|
17
17
|
return;
|
|
18
|
-
target[CONSTANTS.
|
|
18
|
+
target[CONSTANTS.API_LOCKED] = true;
|
|
19
19
|
updateAttribute(host(this), name, next);
|
|
20
|
-
target[CONSTANTS.
|
|
20
|
+
target[CONSTANTS.API_LOCKED] = false;
|
|
21
21
|
});
|
|
22
22
|
}
|
|
23
23
|
defineProperty(target, propertyKey, { get, set });
|
|
24
24
|
appendToMethod(target, CONSTANTS.LIFECYCLE_CONNECTED, function () {
|
|
25
|
+
var _a;
|
|
25
26
|
const element = host(this);
|
|
27
|
+
// TODO: experimental for global config
|
|
28
|
+
if (((_a = getMembers(this)[name]) === null || _a === void 0 ? void 0 : _a.default) === this[name]) {
|
|
29
|
+
const config = getConfig('component', getTag(target), 'property', name);
|
|
30
|
+
if (typeof config != 'undefined')
|
|
31
|
+
this[name] = config;
|
|
32
|
+
}
|
|
33
|
+
// TODO: experimental for isolated options
|
|
34
|
+
if (element === this)
|
|
35
|
+
return;
|
|
26
36
|
const get = () => {
|
|
27
37
|
return this[propertyKey];
|
|
28
38
|
};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { PlusElement } from '../../types';
|
|
2
2
|
/**
|
|
3
|
-
* Monitors
|
|
3
|
+
* Monitors `@Property` and `@State` to catch changes.
|
|
4
4
|
* The decorated method will be invoked after any
|
|
5
|
-
* changes with the key
|
|
6
|
-
* If the arguments aren't defined, all of the
|
|
7
|
-
* @param keys Collection of Property
|
|
5
|
+
* changes with the `key`, `newValue`, and `oldValue` as parameters.
|
|
6
|
+
* If the arguments aren't defined, all of the `@Property` and `@State` are considered.
|
|
7
|
+
* @param keys Collection of `@Property` and `@State` names.
|
|
8
8
|
* @param immediate Triggers the callback immediately after initialization.
|
|
9
9
|
*/
|
|
10
|
-
export declare function Watch(keys?:
|
|
10
|
+
export declare function Watch(keys?: string | string[], immediate?: boolean): (target: PlusElement, propertyKey: PropertyKey) => void;
|
|
@@ -1,24 +1,26 @@
|
|
|
1
1
|
import * as CONSTANTS from '../../constants/index.js';
|
|
2
2
|
import { appendToMethod } from '../utils/index.js';
|
|
3
3
|
/**
|
|
4
|
-
* Monitors
|
|
4
|
+
* Monitors `@Property` and `@State` to catch changes.
|
|
5
5
|
* The decorated method will be invoked after any
|
|
6
|
-
* changes with the key
|
|
7
|
-
* If the arguments aren't defined, all of the
|
|
8
|
-
* @param keys Collection of Property
|
|
6
|
+
* changes with the `key`, `newValue`, and `oldValue` as parameters.
|
|
7
|
+
* If the arguments aren't defined, all of the `@Property` and `@State` are considered.
|
|
8
|
+
* @param keys Collection of `@Property` and `@State` names.
|
|
9
9
|
* @param immediate Triggers the callback immediately after initialization.
|
|
10
10
|
*/
|
|
11
11
|
export function Watch(keys, immediate) {
|
|
12
12
|
return function (target, propertyKey) {
|
|
13
|
+
// Gets all keys
|
|
14
|
+
const all = [keys].flat().filter((key) => key);
|
|
13
15
|
// Registers a lifecycle to detect changes.
|
|
14
16
|
appendToMethod(target, CONSTANTS.LIFECYCLE_UPDATED, function (states) {
|
|
15
17
|
// Skips the logic if 'immediate' wasn't passed.
|
|
16
|
-
if (!immediate && !this[CONSTANTS.
|
|
18
|
+
if (!immediate && !this[CONSTANTS.API_LOADED])
|
|
17
19
|
return;
|
|
18
|
-
// Loops the keys
|
|
20
|
+
// Loops the keys.
|
|
19
21
|
states.forEach((prev, key) => {
|
|
20
|
-
//
|
|
21
|
-
if (
|
|
22
|
+
// Skips the current key.
|
|
23
|
+
if (all.length && !all.includes(key))
|
|
22
24
|
return;
|
|
23
25
|
// Invokes the method with parameters.
|
|
24
26
|
this[propertyKey](this[key], prev, key);
|
package/client/utils/config.d.ts
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
interface Options {
|
|
2
|
+
component?: {
|
|
3
|
+
[key: string]: {
|
|
4
|
+
property?: {
|
|
5
|
+
[key: string]: any;
|
|
6
|
+
};
|
|
7
|
+
};
|
|
8
|
+
};
|
|
2
9
|
}
|
|
3
|
-
export declare const getConfig: () =>
|
|
4
|
-
export declare const setConfig: (config: Options) => void;
|
|
10
|
+
export declare const getConfig: (...parameters: string[]) => any;
|
|
11
|
+
export declare const setConfig: (config: Options, override?: boolean) => void;
|
|
5
12
|
export {};
|
package/client/utils/config.js
CHANGED
|
@@ -1,7 +1,31 @@
|
|
|
1
|
+
let defaults = {
|
|
2
|
+
component: {}
|
|
3
|
+
};
|
|
1
4
|
let options = {};
|
|
2
|
-
export const getConfig = () => {
|
|
3
|
-
|
|
5
|
+
export const getConfig = (...parameters) => {
|
|
6
|
+
let config = options;
|
|
7
|
+
for (const parameter of parameters) {
|
|
8
|
+
if (!config)
|
|
9
|
+
break;
|
|
10
|
+
config = config[parameter];
|
|
11
|
+
}
|
|
12
|
+
return config;
|
|
13
|
+
};
|
|
14
|
+
export const setConfig = (config, override) => {
|
|
15
|
+
options = override ? merge({}, defaults, config) : merge({}, defaults, options, config);
|
|
4
16
|
};
|
|
5
|
-
|
|
6
|
-
|
|
17
|
+
const merge = (target, ...sources) => {
|
|
18
|
+
for (const source of sources) {
|
|
19
|
+
if (!source)
|
|
20
|
+
continue;
|
|
21
|
+
for (const key of Object.keys(source)) {
|
|
22
|
+
if (source[key] instanceof Object) {
|
|
23
|
+
target[key] = merge(target[key] || {}, source[key]);
|
|
24
|
+
}
|
|
25
|
+
else {
|
|
26
|
+
target[key] = source[key];
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
return target;
|
|
7
31
|
};
|
package/client/utils/index.d.ts
CHANGED
|
@@ -3,9 +3,9 @@ export * from './call.js';
|
|
|
3
3
|
export * from './config.js';
|
|
4
4
|
export * from './defineProperty.js';
|
|
5
5
|
export * from './getFramework.js';
|
|
6
|
-
export * from './
|
|
7
|
-
export * from './getMemberType.js';
|
|
6
|
+
export * from './getMembers.js';
|
|
8
7
|
export * from './getStyles.js';
|
|
8
|
+
export * from './getTag.js';
|
|
9
9
|
export * from './host.js';
|
|
10
10
|
export * from './isEvent.js';
|
|
11
11
|
export * from './isServer.js';
|
package/client/utils/index.js
CHANGED
|
@@ -3,9 +3,9 @@ export * from './call.js';
|
|
|
3
3
|
export * from './config.js';
|
|
4
4
|
export * from './defineProperty.js';
|
|
5
5
|
export * from './getFramework.js';
|
|
6
|
-
export * from './
|
|
7
|
-
export * from './getMemberType.js';
|
|
6
|
+
export * from './getMembers.js';
|
|
8
7
|
export * from './getStyles.js';
|
|
8
|
+
export * from './getTag.js';
|
|
9
9
|
export * from './host.js';
|
|
10
10
|
export * from './isEvent.js';
|
|
11
11
|
export * from './isServer.js';
|
package/client/utils/request.js
CHANGED
|
@@ -25,7 +25,7 @@ export const request = (target, name, previous, callback) => {
|
|
|
25
25
|
target[_b = CONSTANTS.API_REQUEST] || (target[_b] = task({
|
|
26
26
|
run: () => {
|
|
27
27
|
// Skips the rendering phase if DOM isn't ready.
|
|
28
|
-
if (!target[CONSTANTS.
|
|
28
|
+
if (!target[CONSTANTS.API_CONNECTED])
|
|
29
29
|
return;
|
|
30
30
|
// Calculates the states to pass into lifecycles' callbacks.
|
|
31
31
|
const states = new Map(Array.from(stacks)
|
|
@@ -56,7 +56,7 @@ export const request = (target, name, previous, callback) => {
|
|
|
56
56
|
// Calls the lifecycle's callback after the rendering phase.
|
|
57
57
|
call(target, CONSTANTS.LIFECYCLE_UPDATED, states);
|
|
58
58
|
// TODO: releated to the @Watch decorator.
|
|
59
|
-
target[CONSTANTS.
|
|
59
|
+
target[CONSTANTS.API_LOADED] = true;
|
|
60
60
|
// Clears stacks.
|
|
61
61
|
stacks.clear();
|
|
62
62
|
}
|
package/client/vendors/uhtml.js
CHANGED
|
@@ -319,8 +319,7 @@ var udomdiff = (parentNode, a, b, get, before) => {
|
|
|
319
319
|
};
|
|
320
320
|
const { isArray, prototype } = Array;
|
|
321
321
|
const { indexOf } = prototype;
|
|
322
|
-
const
|
|
323
|
-
const { createDocumentFragment, createElement, createElementNS, createTextNode, createTreeWalker, importNode } = new Proxy(document, {
|
|
322
|
+
const { createDocumentFragment, createElement, createElementNS, createTextNode, createTreeWalker, importNode } = new Proxy(typeof window == 'undefined' ? {} : window.document, {
|
|
324
323
|
get: (target, method) => (target[method] || function () { }).bind(target)
|
|
325
324
|
});
|
|
326
325
|
const createHTML = (html) => {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import fs from 'fs-extra';
|
|
2
2
|
import path from 'path';
|
|
3
|
-
const
|
|
3
|
+
export const ASSETS_OPTIONS = {
|
|
4
4
|
once: true,
|
|
5
5
|
destination(context) {
|
|
6
6
|
return `assets/${context.fileName}`;
|
|
@@ -11,7 +11,7 @@ const defaults = {
|
|
|
11
11
|
};
|
|
12
12
|
export const assets = (options) => {
|
|
13
13
|
const name = 'assets';
|
|
14
|
-
options = Object.assign({},
|
|
14
|
+
options = Object.assign({}, ASSETS_OPTIONS, options);
|
|
15
15
|
const sources = new Set();
|
|
16
16
|
const next = (context) => {
|
|
17
17
|
var _a, _b;
|
package/compiler/plugins/copy.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import fs from 'fs-extra';
|
|
2
2
|
import path from 'path';
|
|
3
|
-
const
|
|
3
|
+
export const COPY_OPTIONS = {
|
|
4
4
|
at: 'start'
|
|
5
5
|
};
|
|
6
6
|
export const copy = (options) => {
|
|
7
7
|
const name = 'copy';
|
|
8
|
-
options = Object.assign({},
|
|
8
|
+
options = Object.assign({}, COPY_OPTIONS, options);
|
|
9
9
|
const copy = (caller) => {
|
|
10
10
|
if (options.at != caller)
|
|
11
11
|
return;
|
|
@@ -2,17 +2,28 @@ import t from '@babel/types';
|
|
|
2
2
|
import { pascalCase } from 'change-case';
|
|
3
3
|
import * as CONSTANTS from '../../constants/index.js';
|
|
4
4
|
import { addDependency, print, visitor } from '../utils/index.js';
|
|
5
|
-
const
|
|
5
|
+
export const CUSTOM_ELEMENT_OPTIONS = {
|
|
6
6
|
// prefix: undefined,
|
|
7
7
|
typings: true
|
|
8
8
|
};
|
|
9
9
|
// TODO: support {variable && jsxElement}
|
|
10
10
|
export const customElement = (options) => {
|
|
11
11
|
const name = 'customElement';
|
|
12
|
-
options = Object.assign({},
|
|
12
|
+
options = Object.assign({}, CUSTOM_ELEMENT_OPTIONS, options);
|
|
13
13
|
const next = (context) => {
|
|
14
14
|
const ast = t.cloneNode(context.fileAST, true);
|
|
15
|
-
//
|
|
15
|
+
// attaches name
|
|
16
|
+
visitor(ast, {
|
|
17
|
+
ClassDeclaration(path) {
|
|
18
|
+
const { body, id } = path.node;
|
|
19
|
+
if (id.name != context.className)
|
|
20
|
+
return;
|
|
21
|
+
const node = t.classProperty(t.identifier(CONSTANTS.STATIC_TAG), t.stringLiteral(context.componentTag), undefined, undefined, undefined, true);
|
|
22
|
+
t.addComment(node, 'leading', CONSTANTS.COMMENT_AUTO_ADDED_PROPERTY, true);
|
|
23
|
+
body.body.unshift(node);
|
|
24
|
+
}
|
|
25
|
+
});
|
|
26
|
+
// attaches style mapper for 'style' attribute
|
|
16
27
|
visitor(ast, {
|
|
17
28
|
JSXAttribute(path) {
|
|
18
29
|
const { name, value } = path.node;
|
|
@@ -22,16 +33,13 @@ export const customElement = (options) => {
|
|
|
22
33
|
return;
|
|
23
34
|
if (value.type != 'JSXExpressionContainer')
|
|
24
35
|
return;
|
|
25
|
-
const { local } = addDependency(path, CONSTANTS.PACKAGE_NAME, CONSTANTS.
|
|
36
|
+
const { local } = addDependency(path, CONSTANTS.PACKAGE_NAME, CONSTANTS.UTIL_STYLE_MAPPER, CONSTANTS.UTIL_STYLE_MAPPER);
|
|
26
37
|
// TODO: remove 'local!'
|
|
27
38
|
path.replaceWith(t.jsxAttribute(t.jsxIdentifier('style'), t.jsxExpressionContainer(t.callExpression(t.identifier(local), [value.expression]))));
|
|
28
39
|
path.skip();
|
|
29
40
|
}
|
|
30
41
|
});
|
|
31
|
-
//
|
|
32
|
-
const { node } = addDependency(ast, CONSTANTS.VENDOR_UHTML, 'uhtml');
|
|
33
|
-
t.addComment(node, 'leading', CONSTANTS.COMMENT_AUTO_ADDED_DEPENDENCY, true);
|
|
34
|
-
// replace 'className' attribute to 'class'
|
|
42
|
+
// replaces 'className' attribute with 'class'
|
|
35
43
|
visitor(ast, {
|
|
36
44
|
JSXAttribute(path) {
|
|
37
45
|
const { name, value } = path.node;
|
|
@@ -43,7 +51,7 @@ export const customElement = (options) => {
|
|
|
43
51
|
path.replaceWith(t.jsxAttribute(t.jsxIdentifier('class'), value));
|
|
44
52
|
}
|
|
45
53
|
});
|
|
46
|
-
//
|
|
54
|
+
// converts 'jsx' to 'uhtml' syntax
|
|
47
55
|
visitor(ast, {
|
|
48
56
|
JSXAttribute: {
|
|
49
57
|
exit(path) {
|
|
@@ -87,9 +95,13 @@ export const customElement = (options) => {
|
|
|
87
95
|
// TODO
|
|
88
96
|
path.replaceWith(t.jsxAttribute(t.jsxIdentifier('.dataset'), t.jsxExpressionContainer(path.node.argument)));
|
|
89
97
|
}
|
|
98
|
+
},
|
|
99
|
+
Program(path) {
|
|
100
|
+
const { node } = addDependency(path, CONSTANTS.VENDOR_UHTML_PATH, 'uhtml');
|
|
101
|
+
t.addComment(node, 'leading', CONSTANTS.COMMENT_AUTO_ADDED_DEPENDENCY, true);
|
|
90
102
|
}
|
|
91
103
|
});
|
|
92
|
-
//
|
|
104
|
+
// attaches members
|
|
93
105
|
visitor(ast, {
|
|
94
106
|
ClassDeclaration(path) {
|
|
95
107
|
const { body, id } = path.node;
|
|
@@ -132,7 +144,7 @@ export const customElement = (options) => {
|
|
|
132
144
|
body.body.unshift(node);
|
|
133
145
|
}
|
|
134
146
|
});
|
|
135
|
-
//
|
|
147
|
+
// attaches typings
|
|
136
148
|
if (options === null || options === void 0 ? void 0 : options.typings) {
|
|
137
149
|
visitor(ast, {
|
|
138
150
|
Program(path) {
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { pascalCase } from 'change-case';
|
|
2
2
|
import { __dirname, isDirectoryEmpty, renderTemplate } from '../../utils/index.js';
|
|
3
|
-
const
|
|
3
|
+
export const CUSTOM_ELEMENT_REACT_OPTIONS = {};
|
|
4
4
|
export const customElementReact = (options) => {
|
|
5
5
|
const name = 'customElementReact';
|
|
6
|
-
options = Object.assign({},
|
|
6
|
+
options = Object.assign({}, CUSTOM_ELEMENT_REACT_OPTIONS, options);
|
|
7
7
|
const finish = (global) => {
|
|
8
8
|
// TODO
|
|
9
9
|
const globalNew = {
|
|
@@ -3,12 +3,11 @@
|
|
|
3
3
|
**************************************************/
|
|
4
4
|
|
|
5
5
|
import { proxy } from '../proxy';
|
|
6
|
+
import type { Rename } from '../proxy';
|
|
6
7
|
|
|
7
8
|
import '{{importerComponent.source}}';
|
|
8
9
|
import type { {{importerComponentType.imported}} as {{importerComponentType.local}} } from '{{importerComponentType.source}}';
|
|
9
10
|
|
|
10
|
-
type Rename<T, R extends { [K in keyof R]: K extends keyof T ? PropertyKey : "Error: key not in T" }> = { [P in keyof T as P extends keyof R ? R[P] : P]: T[P] }
|
|
11
|
-
|
|
12
11
|
type Renamed = Rename<{{importerComponentType.local}}, {
|
|
13
12
|
{{#each classEvents}}
|
|
14
13
|
{{from}}: '{{to}}',
|
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
/**************************************************
|
|
2
2
|
* THIS FILE IS AUTO-GENERATED, DO NOT EDIT MANUALY
|
|
3
3
|
**************************************************/
|
|
4
|
-
|
|
5
|
-
import { camelCase, paramCase, pascalCase } from 'change-case';
|
|
6
4
|
import React from 'react';
|
|
7
5
|
|
|
6
|
+
import { camelCase, paramCase, pascalCase } from 'change-case';
|
|
7
|
+
|
|
8
|
+
export type Rename<T, R extends { [K in keyof R]: K extends keyof T ? PropertyKey : 'Error: key not in T' }> = {
|
|
9
|
+
[P in keyof T as P extends keyof R ? R[P] : P]: T[P];
|
|
10
|
+
};
|
|
11
|
+
|
|
8
12
|
type EventHandlerType = (event: Event) => any;
|
|
9
13
|
|
|
10
14
|
type FinalPropsType<ElementType> = Omit<PropsType<ElementType>, 'forwardedRef'>;
|
|
@@ -90,22 +94,22 @@ const getProps = <ElementType>(ref: React.Ref<ElementType>, props: PropsType<Ele
|
|
|
90
94
|
Object.keys(props).forEach((name) => {
|
|
91
95
|
if (name === 'children' || name === 'className' || name === 'forwardedRef' || name === 'ref') return;
|
|
92
96
|
|
|
93
|
-
const value = props[name];
|
|
97
|
+
const value = (props as any)[name];
|
|
94
98
|
|
|
95
99
|
if (isEvent(name)) {
|
|
96
100
|
if (typeof document === 'undefined') return;
|
|
97
101
|
|
|
98
|
-
const event = getCustomEvent(name, extra.events);
|
|
102
|
+
const event = getCustomEvent(name, extra.events || []);
|
|
99
103
|
|
|
100
104
|
if (event) return;
|
|
101
105
|
|
|
102
|
-
result[name] = value;
|
|
103
|
-
} else if (extra.props
|
|
106
|
+
(result as any)[name] = value;
|
|
107
|
+
} else if (extra.props?.includes(name)) {
|
|
104
108
|
if (!isPrimitive(value)) return;
|
|
105
109
|
|
|
106
|
-
result[paramCase(name)] = value;
|
|
110
|
+
(result as any)[paramCase(name)] = value;
|
|
107
111
|
} else {
|
|
108
|
-
result[name] = value;
|
|
112
|
+
(result as any)[name] = value;
|
|
109
113
|
}
|
|
110
114
|
});
|
|
111
115
|
|
|
@@ -129,7 +133,7 @@ const setClass = <ElementType>(element: ElementType, props: PropsType<ElementTyp
|
|
|
129
133
|
|
|
130
134
|
const current = arrayToMap((element as any).classList);
|
|
131
135
|
|
|
132
|
-
const prev: string = element['$class'];
|
|
136
|
+
const prev: string = (element as any)['$class'];
|
|
133
137
|
const next: string = props.className || (props as any).class;
|
|
134
138
|
|
|
135
139
|
const prevClass = arrayToMap(prev ? prev.split(' ') : []);
|
|
@@ -151,21 +155,22 @@ const setClass = <ElementType>(element: ElementType, props: PropsType<ElementTyp
|
|
|
151
155
|
|
|
152
156
|
(element as any).className = className;
|
|
153
157
|
|
|
154
|
-
element['$class'] = className;
|
|
158
|
+
(element as any)['$class'] = className;
|
|
155
159
|
};
|
|
156
160
|
|
|
157
161
|
const setEvent = (element: Element, name: string, handler: EventHandlerType) => {
|
|
158
|
-
const events = element['$events'] || (element['$events'] = {});
|
|
162
|
+
const events = (element as any)['$events'] || ((element as any)['$events'] = {});
|
|
159
163
|
|
|
160
164
|
const previous = events[name];
|
|
161
165
|
|
|
162
166
|
previous && element.removeEventListener(paramCase(name), previous);
|
|
163
167
|
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
168
|
+
element.addEventListener(
|
|
169
|
+
paramCase(name),
|
|
170
|
+
(events[name] = function callback(event: Event) {
|
|
171
|
+
handler && handler.call(this, event);
|
|
172
|
+
})
|
|
173
|
+
);
|
|
169
174
|
};
|
|
170
175
|
|
|
171
176
|
const setProps = <ElementType>(element: ElementType, props: PropsType<ElementType>, extra: ExtraType) => {
|
|
@@ -184,24 +189,24 @@ const setProps = <ElementType>(element: ElementType, props: PropsType<ElementTyp
|
|
|
184
189
|
)
|
|
185
190
|
return;
|
|
186
191
|
|
|
187
|
-
const value = props[name];
|
|
192
|
+
const value = (props as any)[name];
|
|
188
193
|
|
|
189
194
|
if (isEvent(name)) {
|
|
190
195
|
if (typeof document === 'undefined') return;
|
|
191
196
|
|
|
192
|
-
const event = getCustomEvent(name, extra.events);
|
|
197
|
+
const event = getCustomEvent(name, extra.events || []);
|
|
193
198
|
|
|
194
199
|
if (!event) return;
|
|
195
200
|
|
|
196
201
|
setEvent(element, event, value);
|
|
197
|
-
} else if (extra.props
|
|
202
|
+
} else if (extra.props?.includes(name)) {
|
|
198
203
|
if (isPrimitive(value)) {
|
|
199
204
|
element.setAttribute(paramCase(name), value);
|
|
200
205
|
} else {
|
|
201
|
-
element[name] = value;
|
|
206
|
+
(element as any)[name] = value;
|
|
202
207
|
}
|
|
203
208
|
} else {
|
|
204
|
-
element[name] = value;
|
|
209
|
+
(element as any)[name] = value;
|
|
205
210
|
}
|
|
206
211
|
});
|
|
207
212
|
};
|
|
@@ -238,7 +243,7 @@ export const proxy = <ElementType, PropType>(
|
|
|
238
243
|
componentWillUnmount() {
|
|
239
244
|
if (!this.element) return;
|
|
240
245
|
|
|
241
|
-
const events = this.element['$events'] || {};
|
|
246
|
+
const events = (this.element as any)['$events'] || {};
|
|
242
247
|
|
|
243
248
|
Object.keys(events).forEach((name) => {
|
|
244
249
|
const handler = events[name];
|
|
@@ -246,7 +251,7 @@ export const proxy = <ElementType, PropType>(
|
|
|
246
251
|
(this.element as any).removeEventListener(paramCase(name), handler);
|
|
247
252
|
});
|
|
248
253
|
|
|
249
|
-
delete this.element['$events'];
|
|
254
|
+
delete (this.element as any)['$events'];
|
|
250
255
|
}
|
|
251
256
|
|
|
252
257
|
render() {
|
|
@@ -258,21 +263,7 @@ export const proxy = <ElementType, PropType>(
|
|
|
258
263
|
}
|
|
259
264
|
};
|
|
260
265
|
|
|
261
|
-
|
|
262
|
-
// const ReactComponentNew = (props: InternalPropsType<ElementType>) => {
|
|
263
|
-
|
|
264
|
-
// const { children } = props;
|
|
265
|
-
|
|
266
|
-
// const ref = useRef(null);
|
|
267
|
-
|
|
268
|
-
// const newProps: FinalPropsType<ElementType> = getProps(ref, props, events);
|
|
269
|
-
|
|
270
|
-
// useEffect(() => setProps(ref.current, props, events));
|
|
271
|
-
|
|
272
|
-
// return React.createElement(tagName, newProps, children);
|
|
273
|
-
// }
|
|
274
|
-
|
|
275
|
-
ReactComponent['displayName'] = pascalCase(tagName);
|
|
266
|
+
(ReactComponent as any)['displayName'] = pascalCase(tagName);
|
|
276
267
|
|
|
277
268
|
return forwardRef<ElementType, PropType>(ReactComponent);
|
|
278
269
|
};
|
|
@@ -3,10 +3,10 @@ import fs from 'fs-extra';
|
|
|
3
3
|
import glob from 'glob';
|
|
4
4
|
import path from 'path';
|
|
5
5
|
import { getInitializer, getTag, getTags, getTypeReference, hasTag, parseTag, print } from '../utils/index.js';
|
|
6
|
-
const
|
|
6
|
+
export const DOCUMENT_OPTIONS = {};
|
|
7
7
|
export const document = (options) => {
|
|
8
8
|
const name = 'document';
|
|
9
|
-
options = Object.assign({},
|
|
9
|
+
options = Object.assign({}, DOCUMENT_OPTIONS, options);
|
|
10
10
|
const finish = (global) => {
|
|
11
11
|
var _a, _b, _c;
|
|
12
12
|
const json = {
|
|
@@ -3,10 +3,10 @@ import { pascalCase, paramCase } from 'change-case';
|
|
|
3
3
|
import path from 'path';
|
|
4
4
|
import * as CONSTANTS from '../../constants/index.js';
|
|
5
5
|
import { hasDecorator, visitor } from '../utils/index.js';
|
|
6
|
-
const
|
|
6
|
+
export const EXTRACT_OPTIONS = {};
|
|
7
7
|
export const extract = (options) => {
|
|
8
8
|
const name = 'extract';
|
|
9
|
-
options = Object.assign({},
|
|
9
|
+
options = Object.assign({}, EXTRACT_OPTIONS, options);
|
|
10
10
|
const next = (context) => {
|
|
11
11
|
var _a, _b;
|
|
12
12
|
visitor(context.fileAST, {
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { ParserOptions } from '@babel/parser';
|
|
2
2
|
import { Context } from '../../types';
|
|
3
|
+
export declare const PARSE_OPTIONS: Partial<ParseOptions>;
|
|
3
4
|
export declare type ParseOptions = ParserOptions;
|
|
4
5
|
export declare const parse: (options?: ParseOptions) => {
|
|
5
6
|
name: string;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { parse as parser } from '@babel/parser';
|
|
2
|
-
const
|
|
2
|
+
export const PARSE_OPTIONS = {
|
|
3
3
|
allowImportExportEverywhere: true,
|
|
4
4
|
plugins: ['jsx', 'typescript', 'decorators-legacy']
|
|
5
5
|
};
|
|
6
6
|
export const parse = (options) => {
|
|
7
7
|
const name = 'parse';
|
|
8
|
-
options = Object.assign({},
|
|
8
|
+
options = Object.assign({}, PARSE_OPTIONS, options);
|
|
9
9
|
const next = (context) => {
|
|
10
10
|
var _a;
|
|
11
11
|
context.fileAST = (_a = context.fileAST) !== null && _a !== void 0 ? _a : parser(context.fileContent, options);
|
|
@@ -1,5 +1,11 @@
|
|
|
1
|
+
/// <reference types="node" />
|
|
1
2
|
import { Context } from '../../types';
|
|
2
|
-
export declare const
|
|
3
|
+
export declare const READ_OPTIONS: Partial<ReadOptions>;
|
|
4
|
+
export declare type ReadOptions = {
|
|
5
|
+
encoding: BufferEncoding;
|
|
6
|
+
flag?: string | undefined;
|
|
7
|
+
};
|
|
8
|
+
export declare const read: (options?: ReadOptions) => {
|
|
3
9
|
name: string;
|
|
4
10
|
next: (context: Context) => void;
|
|
5
11
|
};
|
package/compiler/plugins/read.js
CHANGED
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
import fs from 'fs-extra';
|
|
2
|
-
export const
|
|
2
|
+
export const READ_OPTIONS = {
|
|
3
|
+
encoding: 'utf8'
|
|
4
|
+
};
|
|
5
|
+
export const read = (options) => {
|
|
3
6
|
const name = 'read';
|
|
7
|
+
options = Object.assign({}, READ_OPTIONS, options);
|
|
4
8
|
const next = (context) => {
|
|
5
9
|
var _a;
|
|
6
|
-
context.fileContent = (_a = context.fileContent) !== null && _a !== void 0 ? _a : fs.readFileSync(context.filePath,
|
|
10
|
+
context.fileContent = (_a = context.fileContent) !== null && _a !== void 0 ? _a : fs.readFileSync(context.filePath, options);
|
|
7
11
|
};
|
|
8
12
|
return { name, next };
|
|
9
13
|
};
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import fs from 'fs-extra';
|
|
2
2
|
import path from 'path';
|
|
3
|
-
const
|
|
3
|
+
export const README_OPTIONS = {
|
|
4
4
|
source(context) {
|
|
5
5
|
return path.join(context.directoryPath, `${context.fileName}.md`);
|
|
6
6
|
}
|
|
7
7
|
};
|
|
8
8
|
export const readme = (options) => {
|
|
9
9
|
const name = 'readme';
|
|
10
|
-
options = Object.assign({},
|
|
10
|
+
options = Object.assign({}, README_OPTIONS, options);
|
|
11
11
|
const finish = (global) => {
|
|
12
12
|
var _a;
|
|
13
13
|
for (const context of global.contexts) {
|
|
@@ -3,7 +3,7 @@ import fs from 'fs-extra';
|
|
|
3
3
|
import path from 'path';
|
|
4
4
|
import * as CONSTANTS from '../../constants/index.js';
|
|
5
5
|
import { addDependency } from '../utils/index.js';
|
|
6
|
-
const
|
|
6
|
+
export const STYLE_OPTIONS = {
|
|
7
7
|
source(context) {
|
|
8
8
|
return [
|
|
9
9
|
path.join(context.directoryPath, `${context.fileName}.css`),
|
|
@@ -16,7 +16,7 @@ const defaults = {
|
|
|
16
16
|
};
|
|
17
17
|
export const style = (options) => {
|
|
18
18
|
const name = 'style';
|
|
19
|
-
options = Object.assign({},
|
|
19
|
+
options = Object.assign({}, STYLE_OPTIONS, options);
|
|
20
20
|
const next = (context) => {
|
|
21
21
|
var _a;
|
|
22
22
|
const sources = [(_a = options === null || options === void 0 ? void 0 : options.source) === null || _a === void 0 ? void 0 : _a.call(options, context)].flat();
|
|
@@ -30,7 +30,7 @@ export const style = (options) => {
|
|
|
30
30
|
}
|
|
31
31
|
if (!context.stylePath)
|
|
32
32
|
return;
|
|
33
|
-
const { local, node } = addDependency(context.fileAST, context.stylePath, CONSTANTS.
|
|
33
|
+
const { local, node } = addDependency(context.fileAST, context.stylePath, CONSTANTS.STYLE_IMPORTED);
|
|
34
34
|
t.addComment(node, 'leading', CONSTANTS.COMMENT_AUTO_ADDED_DEPENDENCY, true);
|
|
35
35
|
// TODO: remove 'local!'
|
|
36
36
|
const property = t.classProperty(t.identifier(CONSTANTS.STATIC_STYLES), t.identifier(local), undefined, null, undefined, true);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
const
|
|
1
|
+
export const VISUAL_STUDIO_CODE_OPTIONS = {};
|
|
2
2
|
export const visualStudioCode = (options) => {
|
|
3
3
|
const name = 'visualStudioCode';
|
|
4
|
-
options = Object.assign({},
|
|
4
|
+
options = Object.assign({}, VISUAL_STUDIO_CODE_OPTIONS, options);
|
|
5
5
|
const finish = (global) => {
|
|
6
6
|
// TODO
|
|
7
7
|
// {
|
|
@@ -2,10 +2,10 @@ import { paramCase } from 'change-case';
|
|
|
2
2
|
import fs from 'fs-extra';
|
|
3
3
|
import path from 'path';
|
|
4
4
|
import { getInitializer, getTags, hasTag, parseTag, print } from '../utils/index.js';
|
|
5
|
-
const
|
|
5
|
+
export const WEB_TYPES_OPTIONS = {};
|
|
6
6
|
export const webTypes = (options) => {
|
|
7
7
|
const name = 'webTypes';
|
|
8
|
-
options = Object.assign({},
|
|
8
|
+
options = Object.assign({}, WEB_TYPES_OPTIONS, options);
|
|
9
9
|
const finish = (global) => {
|
|
10
10
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
11
11
|
const json = {
|
package/constants/index.d.ts
CHANGED
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
export declare const PACKAGE_NAME = "@htmlplus/element";
|
|
2
|
+
export declare const API_ATTRIBUTES_SYNCER: unique symbol;
|
|
3
|
+
export declare const API_CONNECTED: unique symbol;
|
|
2
4
|
export declare const API_HOST: unique symbol;
|
|
3
5
|
export declare const API_INSTANCE: unique symbol;
|
|
4
|
-
export declare const
|
|
5
|
-
export declare const
|
|
6
|
-
export declare const API_IS_LOADED: unique symbol;
|
|
7
|
-
export declare const API_ATTRIBUTES_SYNCER: unique symbol;
|
|
6
|
+
export declare const API_LOADED: unique symbol;
|
|
7
|
+
export declare const API_LOCKED: unique symbol;
|
|
8
8
|
export declare const API_REQUEST: unique symbol;
|
|
9
9
|
export declare const API_STACKS: unique symbol;
|
|
10
|
+
export declare const COMMENT_AUTO_ADDED_DEPENDENCY = " THIS DEPENDENCY IS AUTO-ADDED, DO NOT EDIT MANUALY";
|
|
11
|
+
export declare const COMMENT_AUTO_ADDED_PROPERTY = " THIS PROPERTY IS AUTO-ADDED, DO NOT EDIT MANUALY";
|
|
10
12
|
export declare const DECORATOR_ELEMENT = "Element";
|
|
11
13
|
export declare const DECORATOR_EVENT = "Event";
|
|
12
14
|
export declare const DECORATOR_PROPERTY = "Property";
|
|
@@ -19,17 +21,16 @@ export declare const LIFECYCLE_LOADED = "loadedCallback";
|
|
|
19
21
|
export declare const LIFECYCLE_UPDATE = "updateCallback";
|
|
20
22
|
export declare const LIFECYCLE_UPDATED = "updatedCallback";
|
|
21
23
|
export declare const METHOD_RENDER = "render";
|
|
22
|
-
export declare const STATIC_MEMBERS = "
|
|
24
|
+
export declare const STATIC_MEMBERS = "MEMBERS";
|
|
23
25
|
export declare const STATIC_MEMBERS_INITIALIZER = "default";
|
|
24
26
|
export declare const STATIC_MEMBERS_TYPE = "type";
|
|
25
|
-
export declare const STATIC_STYLES = "
|
|
27
|
+
export declare const STATIC_STYLES = "STYLES";
|
|
28
|
+
export declare const STATIC_TAG = "TAG";
|
|
29
|
+
export declare const STYLE_IMPORTED = "STYLE_IMPORTED";
|
|
26
30
|
export declare const TYPE_BOOLEAN = "Boolean";
|
|
27
31
|
export declare const TYPE_DATE = "Date";
|
|
28
32
|
export declare const TYPE_FUNCTION = "Function";
|
|
29
33
|
export declare const TYPE_STRING = "String";
|
|
30
34
|
export declare const TYPE_NUMBER = "Number";
|
|
31
|
-
export declare const
|
|
32
|
-
export declare const
|
|
33
|
-
export declare const AUTO_IMPORT_STYLE = "AUTO_IMPORT_STYLE";
|
|
34
|
-
export declare const COMMENT_AUTO_ADDED_DEPENDENCY = " THIS DEPENDENCY IS AUTO-ADDED, DO NOT EDIT MANUALY";
|
|
35
|
-
export declare const COMMENT_AUTO_ADDED_PROPERTY = " THIS PROPERTY IS AUTO-ADDED, DO NOT EDIT MANUALY";
|
|
35
|
+
export declare const UTIL_STYLE_MAPPER = "styles";
|
|
36
|
+
export declare const VENDOR_UHTML_PATH = "@htmlplus/element/client/vendors/uhtml.js";
|
package/constants/index.js
CHANGED
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
export const PACKAGE_NAME = '@htmlplus/element';
|
|
2
2
|
// apis
|
|
3
|
+
export const API_ATTRIBUTES_SYNCER = Symbol();
|
|
4
|
+
export const API_CONNECTED = Symbol();
|
|
3
5
|
export const API_HOST = Symbol();
|
|
4
6
|
export const API_INSTANCE = Symbol();
|
|
5
|
-
export const
|
|
6
|
-
export const
|
|
7
|
-
export const API_IS_LOADED = Symbol();
|
|
8
|
-
export const API_ATTRIBUTES_SYNCER = Symbol();
|
|
7
|
+
export const API_LOADED = Symbol();
|
|
8
|
+
export const API_LOCKED = Symbol();
|
|
9
9
|
export const API_REQUEST = Symbol();
|
|
10
10
|
export const API_STACKS = Symbol();
|
|
11
|
+
// comments
|
|
12
|
+
export const COMMENT_AUTO_ADDED_DEPENDENCY = ' THIS DEPENDENCY IS AUTO-ADDED, DO NOT EDIT MANUALY';
|
|
13
|
+
export const COMMENT_AUTO_ADDED_PROPERTY = ' THIS PROPERTY IS AUTO-ADDED, DO NOT EDIT MANUALY';
|
|
11
14
|
// decorators
|
|
12
15
|
export const DECORATOR_ELEMENT = 'Element';
|
|
13
16
|
export const DECORATOR_EVENT = 'Event';
|
|
@@ -24,10 +27,13 @@ export const LIFECYCLE_UPDATED = 'updatedCallback';
|
|
|
24
27
|
// methods
|
|
25
28
|
export const METHOD_RENDER = 'render';
|
|
26
29
|
// statics
|
|
27
|
-
export const STATIC_MEMBERS = '
|
|
30
|
+
export const STATIC_MEMBERS = 'MEMBERS';
|
|
28
31
|
export const STATIC_MEMBERS_INITIALIZER = 'default';
|
|
29
32
|
export const STATIC_MEMBERS_TYPE = 'type';
|
|
30
|
-
export const STATIC_STYLES = '
|
|
33
|
+
export const STATIC_STYLES = 'STYLES';
|
|
34
|
+
export const STATIC_TAG = 'TAG';
|
|
35
|
+
// style
|
|
36
|
+
export const STYLE_IMPORTED = 'STYLE_IMPORTED';
|
|
31
37
|
// types
|
|
32
38
|
export const TYPE_BOOLEAN = 'Boolean';
|
|
33
39
|
export const TYPE_DATE = 'Date';
|
|
@@ -35,9 +41,6 @@ export const TYPE_FUNCTION = 'Function';
|
|
|
35
41
|
export const TYPE_STRING = 'String';
|
|
36
42
|
export const TYPE_NUMBER = 'Number';
|
|
37
43
|
// utils
|
|
38
|
-
export const
|
|
39
|
-
//
|
|
40
|
-
export const
|
|
41
|
-
export const AUTO_IMPORT_STYLE = 'AUTO_IMPORT_STYLE';
|
|
42
|
-
export const COMMENT_AUTO_ADDED_DEPENDENCY = ' THIS DEPENDENCY IS AUTO-ADDED, DO NOT EDIT MANUALY';
|
|
43
|
-
export const COMMENT_AUTO_ADDED_PROPERTY = ' THIS PROPERTY IS AUTO-ADDED, DO NOT EDIT MANUALY';
|
|
44
|
+
export const UTIL_STYLE_MAPPER = 'styles';
|
|
45
|
+
// vendors
|
|
46
|
+
export const VENDOR_UHTML_PATH = '@htmlplus/element/client/vendors/uhtml.js';
|
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@htmlplus/element",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Masood Abdolian <m.abdolian@gmail.com>",
|
|
6
|
-
"description": "
|
|
6
|
+
"description": "A powerful library for building scalable, reusable, fast, tastable and lightweight design system for any web technologies.",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "client/index.js",
|
|
9
9
|
"types": "client/index.d.ts",
|
|
@@ -16,7 +16,12 @@
|
|
|
16
16
|
"engines": {
|
|
17
17
|
"node": ">= 12.7.0"
|
|
18
18
|
},
|
|
19
|
-
"keywords": [
|
|
19
|
+
"keywords": [
|
|
20
|
+
"components",
|
|
21
|
+
"custom elements",
|
|
22
|
+
"design systems",
|
|
23
|
+
"web components"
|
|
24
|
+
],
|
|
20
25
|
"repository": {
|
|
21
26
|
"type": "git",
|
|
22
27
|
"url": "git+https://github.com/htmlplus/htmlplus.git"
|
|
@@ -26,25 +31,25 @@
|
|
|
26
31
|
},
|
|
27
32
|
"homepage": "https://github.com/htmlplus/htmlplus#readme",
|
|
28
33
|
"dependencies": {
|
|
29
|
-
"@babel/generator": "^7.
|
|
30
|
-
"@babel/parser": "^7.
|
|
31
|
-
"@babel/traverse": "^7.
|
|
32
|
-
"@babel/types": "^7.
|
|
33
|
-
"@types/node": "^18.
|
|
34
|
+
"@babel/generator": "^7.20.1",
|
|
35
|
+
"@babel/parser": "^7.20.1",
|
|
36
|
+
"@babel/traverse": "^7.20.1",
|
|
37
|
+
"@babel/types": "^7.20.0",
|
|
38
|
+
"@types/node": "^18.11.9",
|
|
34
39
|
"change-case": "^4.1.2",
|
|
35
|
-
"fast-glob": "^3.2.
|
|
40
|
+
"fast-glob": "^3.2.12",
|
|
36
41
|
"fs-extra": "^10.1.0",
|
|
37
42
|
"handlebars": "^4.7.7",
|
|
38
43
|
"ora": "^6.1.2",
|
|
39
|
-
"typescript": "^4.
|
|
44
|
+
"typescript": "^4.8.4"
|
|
40
45
|
},
|
|
41
46
|
"devDependencies": {
|
|
42
|
-
"@trivago/prettier-plugin-sort-imports": "^3.
|
|
47
|
+
"@trivago/prettier-plugin-sort-imports": "^3.4.0",
|
|
43
48
|
"cpy": "^9.0.1",
|
|
44
|
-
"nodemon": "^2.0.
|
|
49
|
+
"nodemon": "^2.0.20",
|
|
45
50
|
"prettier": "^2.7.1",
|
|
46
51
|
"rimraf": "^3.0.2",
|
|
47
52
|
"ts-node": "^10.9.1",
|
|
48
|
-
"vite": "^3.
|
|
53
|
+
"vite": "^3.2.2"
|
|
49
54
|
}
|
|
50
55
|
}
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import * as CONSTANTS from '../../constants/index.js';
|
|
2
|
-
export const getMemberType = (target, key) => {
|
|
3
|
-
var _a, _b;
|
|
4
|
-
return (_b = (_a = (target.constructor[CONSTANTS.STATIC_MEMBERS] || target[CONSTANTS.STATIC_MEMBERS])) === null || _a === void 0 ? void 0 : _a[key]) === null || _b === void 0 ? void 0 : _b[CONSTANTS.STATIC_MEMBERS_TYPE];
|
|
5
|
-
};
|