@htmlplus/element 2.12.0 → 2.13.0
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 +2 -2
- package/bundlers.d.ts +20 -0
- package/{bundlers/vite.js → bundlers.js} +39 -3
- package/client-5FqNUiuz.d.ts +309 -0
- package/client-Dse96R-O.js +1805 -0
- package/client.d.ts +1 -0
- package/client.js +3 -0
- package/constants.d.ts +48 -0
- package/constants.js +60 -0
- package/internal.d.ts +1 -0
- package/internal.js +3 -0
- package/package.json +8 -4
- package/transformer.d.ts +139 -0
- package/transformer.js +1277 -0
- package/bundlers/rollup.d.ts +0 -7
- package/bundlers/rollup.js +0 -23
- package/bundlers/vite.d.ts +0 -8
- package/client/decorators/bind.d.ts +0 -8
- package/client/decorators/bind.js +0 -21
- package/client/decorators/context.d.ts +0 -3
- package/client/decorators/context.js +0 -121
- package/client/decorators/direction.d.ts +0 -5
- package/client/decorators/direction.js +0 -8
- package/client/decorators/element.d.ts +0 -7
- package/client/decorators/element.js +0 -65
- package/client/decorators/event.d.ts +0 -35
- package/client/decorators/event.js +0 -53
- package/client/decorators/host.d.ts +0 -4
- package/client/decorators/host.js +0 -7
- package/client/decorators/index.d.ts +0 -15
- package/client/decorators/index.js +0 -15
- package/client/decorators/isRTL.d.ts +0 -4
- package/client/decorators/isRTL.js +0 -7
- package/client/decorators/listen.d.ts +0 -52
- package/client/decorators/listen.js +0 -37
- package/client/decorators/method.d.ts +0 -6
- package/client/decorators/method.js +0 -15
- package/client/decorators/property.d.ts +0 -25
- package/client/decorators/property.js +0 -94
- package/client/decorators/query.d.ts +0 -9
- package/client/decorators/query.js +0 -12
- package/client/decorators/queryAll.d.ts +0 -12
- package/client/decorators/queryAll.js +0 -15
- package/client/decorators/slots.d.ts +0 -4
- package/client/decorators/slots.js +0 -7
- package/client/decorators/state.d.ts +0 -6
- package/client/decorators/state.js +0 -23
- package/client/decorators/watch.d.ts +0 -11
- package/client/decorators/watch.js +0 -31
- package/client/index.d.ts +0 -2
- package/client/index.js +0 -2
- package/client/utils/appendToMethod.d.ts +0 -1
- package/client/utils/appendToMethod.js +0 -15
- package/client/utils/attributes.d.ts +0 -2
- package/client/utils/attributes.js +0 -33
- package/client/utils/call.d.ts +0 -1
- package/client/utils/call.js +0 -3
- package/client/utils/classes.d.ts +0 -4
- package/client/utils/classes.js +0 -45
- package/client/utils/config.d.ts +0 -39
- package/client/utils/config.js +0 -28
- package/client/utils/defineProperty.d.ts +0 -1
- package/client/utils/defineProperty.js +0 -1
- package/client/utils/direction.d.ts +0 -6
- package/client/utils/direction.js +0 -8
- package/client/utils/event.d.ts +0 -13
- package/client/utils/event.js +0 -48
- package/client/utils/getFramework.d.ts +0 -2
- package/client/utils/getFramework.js +0 -20
- package/client/utils/getStyles.d.ts +0 -2
- package/client/utils/getStyles.js +0 -4
- package/client/utils/getTag.d.ts +0 -2
- package/client/utils/getTag.js +0 -4
- package/client/utils/host.d.ts +0 -5
- package/client/utils/host.js +0 -12
- package/client/utils/index.d.ts +0 -32
- package/client/utils/index.js +0 -32
- package/client/utils/isCSSColor.d.ts +0 -5
- package/client/utils/isCSSColor.js +0 -9
- package/client/utils/isEvent.d.ts +0 -1
- package/client/utils/isEvent.js +0 -3
- package/client/utils/isRTL.d.ts +0 -5
- package/client/utils/isRTL.js +0 -5
- package/client/utils/isServer.d.ts +0 -4
- package/client/utils/isServer.js +0 -6
- package/client/utils/merge.d.ts +0 -1
- package/client/utils/merge.js +0 -22
- package/client/utils/query.d.ts +0 -5
- package/client/utils/query.js +0 -7
- package/client/utils/queryAll.d.ts +0 -5
- package/client/utils/queryAll.js +0 -7
- package/client/utils/request.d.ts +0 -9
- package/client/utils/request.js +0 -106
- package/client/utils/shadowRoot.d.ts +0 -2
- package/client/utils/shadowRoot.js +0 -4
- package/client/utils/slots.d.ts +0 -9
- package/client/utils/slots.js +0 -18
- package/client/utils/styles.d.ts +0 -4
- package/client/utils/styles.js +0 -10
- package/client/utils/task.d.ts +0 -6
- package/client/utils/task.js +0 -34
- package/client/utils/toBoolean.d.ts +0 -1
- package/client/utils/toBoolean.js +0 -3
- package/client/utils/toDecorator.d.ts +0 -2
- package/client/utils/toDecorator.js +0 -10
- package/client/utils/toEvent.d.ts +0 -1
- package/client/utils/toEvent.js +0 -3
- package/client/utils/toProperty.d.ts +0 -1
- package/client/utils/toProperty.js +0 -55
- package/client/utils/toUnit.d.ts +0 -4
- package/client/utils/toUnit.js +0 -10
- package/client/utils/typeOf.d.ts +0 -3
- package/client/utils/typeOf.js +0 -6
- package/client/utils/uhtml.d.ts +0 -22
- package/client/utils/uhtml.js +0 -703
- package/client/utils/updateAttribute.d.ts +0 -2
- package/client/utils/updateAttribute.js +0 -10
- package/constants/index.d.ts +0 -48
- package/constants/index.js +0 -60
- package/transformer/index.d.ts +0 -3
- package/transformer/index.js +0 -3
- package/transformer/plugins/assets.d.ts +0 -7
- package/transformer/plugins/assets.js +0 -26
- package/transformer/plugins/copy.d.ts +0 -9
- package/transformer/plugins/copy.js +0 -29
- package/transformer/plugins/customElement.d.ts +0 -7
- package/transformer/plugins/customElement.js +0 -392
- package/transformer/plugins/document.d.ts +0 -7
- package/transformer/plugins/document.js +0 -206
- package/transformer/plugins/extract.d.ts +0 -2
- package/transformer/plugins/extract.js +0 -22
- package/transformer/plugins/index.d.ts +0 -12
- package/transformer/plugins/index.js +0 -12
- package/transformer/plugins/parse.d.ts +0 -6
- package/transformer/plugins/parse.js +0 -13
- package/transformer/plugins/read.d.ts +0 -7
- package/transformer/plugins/read.js +0 -19
- package/transformer/plugins/readme.d.ts +0 -6
- package/transformer/plugins/readme.js +0 -24
- package/transformer/plugins/style.d.ts +0 -6
- package/transformer/plugins/style.js +0 -42
- package/transformer/plugins/validate.d.ts +0 -2
- package/transformer/plugins/validate.js +0 -40
- package/transformer/plugins/visualStudioCode.d.ts +0 -8
- package/transformer/plugins/visualStudioCode.js +0 -73
- package/transformer/plugins/webTypes.d.ts +0 -10
- package/transformer/plugins/webTypes.js +0 -74
- package/transformer/transformer.d.ts +0 -8
- package/transformer/transformer.js +0 -78
- package/transformer/transformer.types.d.ts +0 -52
- package/transformer/transformer.types.js +0 -1
- package/transformer/utils/addDependency.d.ts +0 -7
- package/transformer/utils/addDependency.js +0 -64
- package/transformer/utils/extractAttribute.d.ts +0 -2
- package/transformer/utils/extractAttribute.js +0 -10
- package/transformer/utils/extractFromComment.d.ts +0 -4
- package/transformer/utils/extractFromComment.js +0 -51
- package/transformer/utils/getInitializer.d.ts +0 -2
- package/transformer/utils/getInitializer.js +0 -3
- package/transformer/utils/getType.d.ts +0 -2
- package/transformer/utils/getType.js +0 -89
- package/transformer/utils/getTypeReference.d.ts +0 -2
- package/transformer/utils/getTypeReference.js +0 -33
- package/transformer/utils/hasDecorator.d.ts +0 -1
- package/transformer/utils/hasDecorator.js +0 -5
- package/transformer/utils/index.d.ts +0 -10
- package/transformer/utils/index.js +0 -10
- package/transformer/utils/print.d.ts +0 -2
- package/transformer/utils/print.js +0 -5
- package/transformer/utils/printType.d.ts +0 -1
- package/transformer/utils/printType.js +0 -69
- package/transformer/utils/visitor.d.ts +0 -2
- package/transformer/utils/visitor.js +0 -5
- package/types/index.d.ts +0 -2
- package/types/index.js +0 -1
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { kebabCase } from 'change-case';
|
|
2
|
-
import { host } from './host.js';
|
|
3
|
-
export const updateAttribute = (target, key, value) => {
|
|
4
|
-
const element = host(target);
|
|
5
|
-
const name = kebabCase(key);
|
|
6
|
-
if ([undefined, null, false].includes(value)) {
|
|
7
|
-
return element.removeAttribute(name);
|
|
8
|
-
}
|
|
9
|
-
element.setAttribute(name, value === true ? '' : value);
|
|
10
|
-
};
|
package/constants/index.d.ts
DELETED
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
export declare const PACKAGE_NAME = "@htmlplus/element";
|
|
2
|
-
export declare const MAPPER: unique symbol;
|
|
3
|
-
export declare const API_CONNECTED: unique symbol;
|
|
4
|
-
export declare const API_HOST: unique symbol;
|
|
5
|
-
export declare const API_INSTANCE: unique symbol;
|
|
6
|
-
export declare const API_REQUEST: unique symbol;
|
|
7
|
-
export declare const API_RENDER_COMPLETED: unique symbol;
|
|
8
|
-
export declare const API_STACKS: unique symbol;
|
|
9
|
-
export declare const API_STYLE: unique symbol;
|
|
10
|
-
export declare const COMMENT_AUTO_ADDED = " THIS IS AUTO-ADDED, DO NOT EDIT MANUALY";
|
|
11
|
-
export declare const DECORATOR_CSS_VARIABLE = "@Property()";
|
|
12
|
-
export declare const DECORATOR_ELEMENT = "Element";
|
|
13
|
-
export declare const DECORATOR_EVENT = "Event";
|
|
14
|
-
export declare const DECORATOR_PROPERTY = "Property";
|
|
15
|
-
export declare const DECORATOR_PROPERTY_TYPE = "type";
|
|
16
|
-
export declare const DECORATOR_STATE = "State";
|
|
17
|
-
export declare const DECORATOR_METHOD = "Method";
|
|
18
|
-
export declare const ELEMENT_HOST_NAME = "host";
|
|
19
|
-
export declare const LIFECYCLE_ADOPTED = "adoptedCallback";
|
|
20
|
-
export declare const LIFECYCLE_CONNECTED = "connectedCallback";
|
|
21
|
-
export declare const LIFECYCLE_CONSTRUCTED = "constructedCallback";
|
|
22
|
-
export declare const LIFECYCLE_DISCONNECTED = "disconnectedCallback";
|
|
23
|
-
export declare const LIFECYCLE_LOADED = "loadedCallback";
|
|
24
|
-
export declare const LIFECYCLE_UPDATE = "updateCallback";
|
|
25
|
-
export declare const LIFECYCLE_UPDATED = "updatedCallback";
|
|
26
|
-
export declare const METHOD_RENDER = "render";
|
|
27
|
-
export declare const STATIC_STYLE = "style";
|
|
28
|
-
export declare const STATIC_TAG = "tag";
|
|
29
|
-
export declare const STYLE_IMPORTED = "STYLE_IMPORTED";
|
|
30
|
-
export declare const TYPE_ARRAY: number;
|
|
31
|
-
export declare const TYPE_BOOLEAN: number;
|
|
32
|
-
export declare const TYPE_DATE: number;
|
|
33
|
-
export declare const TYPE_ENUM: number;
|
|
34
|
-
export declare const TYPE_FUNCTION: number;
|
|
35
|
-
export declare const TYPE_NULL: number;
|
|
36
|
-
export declare const TYPE_NUMBER: number;
|
|
37
|
-
export declare const TYPE_OBJECT: number;
|
|
38
|
-
export declare const TYPE_STRING: number;
|
|
39
|
-
export declare const TYPE_UNDEFINED: number;
|
|
40
|
-
export declare const UTILS_ATTRIBUTES_IMPORTED = "attributes";
|
|
41
|
-
export declare const UTILS_ATTRIBUTES_LOCAL = "UTILS_ATTRIBUTES";
|
|
42
|
-
export declare const UTILS_HOST_IMPORTED = "host";
|
|
43
|
-
export declare const UTILS_HOST_LOCAL = "UTILS_HOST";
|
|
44
|
-
export declare const UTILS_HTML_IMPORTED = "html";
|
|
45
|
-
export declare const UTILS_HTML_LOCAL = "UTILS_HTML";
|
|
46
|
-
export declare const UTILS_STYLES_IMPORTED = "styles";
|
|
47
|
-
export declare const UTILS_STYLES_LOCAL = "UTILS_STYLES";
|
|
48
|
-
export declare const UTILS_PATH = "@htmlplus/element/client/utils/index.js";
|
package/constants/index.js
DELETED
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
export const PACKAGE_NAME = '@htmlplus/element';
|
|
2
|
-
// TODO
|
|
3
|
-
export const MAPPER = Symbol();
|
|
4
|
-
// APIs
|
|
5
|
-
export const API_CONNECTED = Symbol();
|
|
6
|
-
export const API_HOST = Symbol();
|
|
7
|
-
export const API_INSTANCE = Symbol();
|
|
8
|
-
export const API_REQUEST = Symbol();
|
|
9
|
-
export const API_RENDER_COMPLETED = Symbol();
|
|
10
|
-
export const API_STACKS = Symbol();
|
|
11
|
-
export const API_STYLE = Symbol();
|
|
12
|
-
// comments
|
|
13
|
-
export const COMMENT_AUTO_ADDED = ' THIS IS AUTO-ADDED, DO NOT EDIT MANUALY';
|
|
14
|
-
// CSS decorators
|
|
15
|
-
export const DECORATOR_CSS_VARIABLE = '@Property()';
|
|
16
|
-
// decorators
|
|
17
|
-
export const DECORATOR_ELEMENT = 'Element';
|
|
18
|
-
export const DECORATOR_EVENT = 'Event';
|
|
19
|
-
export const DECORATOR_PROPERTY = 'Property';
|
|
20
|
-
export const DECORATOR_PROPERTY_TYPE = 'type';
|
|
21
|
-
export const DECORATOR_STATE = 'State';
|
|
22
|
-
export const DECORATOR_METHOD = 'Method';
|
|
23
|
-
// element
|
|
24
|
-
export const ELEMENT_HOST_NAME = 'host';
|
|
25
|
-
// lifecycle
|
|
26
|
-
export const LIFECYCLE_ADOPTED = 'adoptedCallback';
|
|
27
|
-
export const LIFECYCLE_CONNECTED = 'connectedCallback';
|
|
28
|
-
export const LIFECYCLE_CONSTRUCTED = 'constructedCallback';
|
|
29
|
-
export const LIFECYCLE_DISCONNECTED = 'disconnectedCallback';
|
|
30
|
-
export const LIFECYCLE_LOADED = 'loadedCallback';
|
|
31
|
-
export const LIFECYCLE_UPDATE = 'updateCallback';
|
|
32
|
-
export const LIFECYCLE_UPDATED = 'updatedCallback';
|
|
33
|
-
// methods
|
|
34
|
-
export const METHOD_RENDER = 'render';
|
|
35
|
-
// statics
|
|
36
|
-
export const STATIC_STYLE = 'style';
|
|
37
|
-
export const STATIC_TAG = 'tag';
|
|
38
|
-
// style
|
|
39
|
-
export const STYLE_IMPORTED = 'STYLE_IMPORTED';
|
|
40
|
-
// types
|
|
41
|
-
export const TYPE_ARRAY = 2 ** 0;
|
|
42
|
-
export const TYPE_BOOLEAN = 2 ** 1;
|
|
43
|
-
export const TYPE_DATE = 2 ** 2;
|
|
44
|
-
export const TYPE_ENUM = 2 ** 3;
|
|
45
|
-
export const TYPE_FUNCTION = 2 ** 4;
|
|
46
|
-
export const TYPE_NULL = 2 ** 5;
|
|
47
|
-
export const TYPE_NUMBER = 2 ** 6;
|
|
48
|
-
export const TYPE_OBJECT = 2 ** 7;
|
|
49
|
-
export const TYPE_STRING = 2 ** 8;
|
|
50
|
-
export const TYPE_UNDEFINED = 2 ** 9;
|
|
51
|
-
// utils
|
|
52
|
-
export const UTILS_ATTRIBUTES_IMPORTED = 'attributes';
|
|
53
|
-
export const UTILS_ATTRIBUTES_LOCAL = 'UTILS_ATTRIBUTES';
|
|
54
|
-
export const UTILS_HOST_IMPORTED = 'host';
|
|
55
|
-
export const UTILS_HOST_LOCAL = 'UTILS_HOST';
|
|
56
|
-
export const UTILS_HTML_IMPORTED = 'html';
|
|
57
|
-
export const UTILS_HTML_LOCAL = 'UTILS_HTML';
|
|
58
|
-
export const UTILS_STYLES_IMPORTED = 'styles';
|
|
59
|
-
export const UTILS_STYLES_LOCAL = 'UTILS_STYLES';
|
|
60
|
-
export const UTILS_PATH = '@htmlplus/element/client/utils/index.js';
|
package/transformer/index.d.ts
DELETED
package/transformer/index.js
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { TransformerPlugin, TransformerPluginContext } from '../transformer.types.js';
|
|
2
|
-
export declare const ASSETS_OPTIONS: Partial<AssetsOptions>;
|
|
3
|
-
export interface AssetsOptions {
|
|
4
|
-
destination?: (context: TransformerPluginContext) => string;
|
|
5
|
-
source?: (context: TransformerPluginContext) => string;
|
|
6
|
-
}
|
|
7
|
-
export declare const assets: (options?: AssetsOptions) => TransformerPlugin;
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import fs from 'fs-extra';
|
|
2
|
-
import path from 'path';
|
|
3
|
-
export const ASSETS_OPTIONS = {
|
|
4
|
-
destination(context) {
|
|
5
|
-
return path.join('dist', 'assets', context.fileName);
|
|
6
|
-
},
|
|
7
|
-
source(context) {
|
|
8
|
-
return path.join(context.directoryPath, 'assets');
|
|
9
|
-
}
|
|
10
|
-
};
|
|
11
|
-
export const assets = (options) => {
|
|
12
|
-
const name = 'assets';
|
|
13
|
-
options = Object.assign({}, ASSETS_OPTIONS, options);
|
|
14
|
-
const finish = (global) => {
|
|
15
|
-
for (const context of global.contexts) {
|
|
16
|
-
context.assetsDestination = options.destination(context);
|
|
17
|
-
context.assetsSource = options.source(context);
|
|
18
|
-
if (!context.assetsSource)
|
|
19
|
-
continue;
|
|
20
|
-
if (!fs.existsSync(context.assetsSource))
|
|
21
|
-
continue;
|
|
22
|
-
fs.copySync(context.assetsSource, context.assetsDestination);
|
|
23
|
-
}
|
|
24
|
-
};
|
|
25
|
-
return { name, finish };
|
|
26
|
-
};
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { TransformerPlugin } from '../transformer.types.js';
|
|
2
|
-
export declare const COPY_OPTIONS: Partial<CopyOptions>;
|
|
3
|
-
export interface CopyOptions {
|
|
4
|
-
at?: 'start' | 'run' | 'finish';
|
|
5
|
-
destination: string;
|
|
6
|
-
source: string;
|
|
7
|
-
transformer?: (content: string) => string;
|
|
8
|
-
}
|
|
9
|
-
export declare const copy: (options: CopyOptions) => TransformerPlugin;
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import fs from 'fs-extra';
|
|
2
|
-
import path from 'path';
|
|
3
|
-
export const COPY_OPTIONS = {
|
|
4
|
-
at: 'start'
|
|
5
|
-
};
|
|
6
|
-
export const copy = (options) => {
|
|
7
|
-
const name = 'copy';
|
|
8
|
-
options = Object.assign({}, COPY_OPTIONS, options);
|
|
9
|
-
const copy = (caller) => {
|
|
10
|
-
if (options.at != caller)
|
|
11
|
-
return;
|
|
12
|
-
let content;
|
|
13
|
-
content = fs.readFileSync(options.source, 'utf8');
|
|
14
|
-
if (options.transformer)
|
|
15
|
-
content = options.transformer(content);
|
|
16
|
-
fs.ensureDirSync(path.dirname(options.destination));
|
|
17
|
-
fs.writeFileSync(options.destination, content, 'utf8');
|
|
18
|
-
};
|
|
19
|
-
const start = () => {
|
|
20
|
-
copy('start');
|
|
21
|
-
};
|
|
22
|
-
const run = () => {
|
|
23
|
-
copy('run');
|
|
24
|
-
};
|
|
25
|
-
const finish = () => {
|
|
26
|
-
copy('finish');
|
|
27
|
-
};
|
|
28
|
-
return { name, start, run, finish };
|
|
29
|
-
};
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { TransformerPlugin } from '../transformer.types.js';
|
|
2
|
-
export declare const CUSTOM_ELEMENT_OPTIONS: Partial<CustomElementOptions>;
|
|
3
|
-
export interface CustomElementOptions {
|
|
4
|
-
prefix?: string;
|
|
5
|
-
typings?: boolean;
|
|
6
|
-
}
|
|
7
|
-
export declare const customElement: (options?: CustomElementOptions) => TransformerPlugin;
|
|
@@ -1,392 +0,0 @@
|
|
|
1
|
-
import template from '@babel/template';
|
|
2
|
-
import t from '@babel/types';
|
|
3
|
-
import { camelCase, kebabCase, pascalCase } from 'change-case';
|
|
4
|
-
import * as CONSTANTS from '../../constants/index.js';
|
|
5
|
-
import { addDependency, extractAttribute, getType, print, visitor } from '../utils/index.js';
|
|
6
|
-
export const CUSTOM_ELEMENT_OPTIONS = {
|
|
7
|
-
prefix: undefined,
|
|
8
|
-
typings: true
|
|
9
|
-
};
|
|
10
|
-
// TODO: support {variable && jsxElement}
|
|
11
|
-
export const customElement = (options) => {
|
|
12
|
-
const name = 'customElement';
|
|
13
|
-
options = Object.assign({}, CUSTOM_ELEMENT_OPTIONS, options);
|
|
14
|
-
const run = (context) => {
|
|
15
|
-
const ast = t.cloneNode(context.fileAST, true);
|
|
16
|
-
context.elementTagName = `${options.prefix || ''}${context.elementKey}`;
|
|
17
|
-
context.elementInterfaceName = `HTML${pascalCase(context.elementTagName)}Element`;
|
|
18
|
-
// attach tag name
|
|
19
|
-
visitor(ast, {
|
|
20
|
-
ClassDeclaration(path) {
|
|
21
|
-
const { body, id } = path.node;
|
|
22
|
-
if (id.name != context.className)
|
|
23
|
-
return;
|
|
24
|
-
const node = t.classProperty(t.identifier(CONSTANTS.STATIC_TAG), t.stringLiteral(context.elementTagName), undefined, undefined, undefined, true);
|
|
25
|
-
t.addComment(node, 'leading', CONSTANTS.COMMENT_AUTO_ADDED, true);
|
|
26
|
-
body.body.unshift(node);
|
|
27
|
-
}
|
|
28
|
-
});
|
|
29
|
-
// attach style mapper for 'style' attribute
|
|
30
|
-
visitor(ast, {
|
|
31
|
-
JSXAttribute(path) {
|
|
32
|
-
const { name, value } = path.node;
|
|
33
|
-
if (name.name != 'style')
|
|
34
|
-
return;
|
|
35
|
-
if (!value)
|
|
36
|
-
return;
|
|
37
|
-
if (value.type != 'JSXExpressionContainer')
|
|
38
|
-
return;
|
|
39
|
-
const { local } = addDependency(path, CONSTANTS.UTILS_PATH, CONSTANTS.UTILS_STYLES_LOCAL, CONSTANTS.UTILS_STYLES_IMPORTED);
|
|
40
|
-
// TODO: remove 'local!'
|
|
41
|
-
path.replaceWith(t.jsxAttribute(t.jsxIdentifier('style'), t.jsxExpressionContainer(t.callExpression(t.identifier(local), [value.expression]))));
|
|
42
|
-
path.skip();
|
|
43
|
-
}
|
|
44
|
-
});
|
|
45
|
-
// replace 'className' attribute with 'class'
|
|
46
|
-
visitor(ast, {
|
|
47
|
-
JSXAttribute(path) {
|
|
48
|
-
const { name, value } = path.node;
|
|
49
|
-
if (name.name != 'className')
|
|
50
|
-
return;
|
|
51
|
-
const hasClass = path.parentPath.node.attributes.some((attribute) => {
|
|
52
|
-
return attribute.name?.name == 'class';
|
|
53
|
-
});
|
|
54
|
-
if (hasClass)
|
|
55
|
-
return path.remove();
|
|
56
|
-
path.replaceWith(t.jsxAttribute(t.jsxIdentifier('class'), value));
|
|
57
|
-
}
|
|
58
|
-
});
|
|
59
|
-
// TODO
|
|
60
|
-
visitor(ast, {
|
|
61
|
-
JSXAttribute(path) {
|
|
62
|
-
const { name, value } = path.node;
|
|
63
|
-
if (name.name == 'value') {
|
|
64
|
-
name.name = '.' + name.name;
|
|
65
|
-
return;
|
|
66
|
-
}
|
|
67
|
-
const key = ['tabIndex', 'viewBox'];
|
|
68
|
-
if (!key.includes(name.name))
|
|
69
|
-
return;
|
|
70
|
-
path.replaceWith(t.jsxAttribute(t.jsxIdentifier(name.name.toLowerCase()), value));
|
|
71
|
-
}
|
|
72
|
-
});
|
|
73
|
-
// TODO
|
|
74
|
-
// convert 'jsx' to 'uhtml' syntax
|
|
75
|
-
visitor(ast, {
|
|
76
|
-
enter(path) {
|
|
77
|
-
const { type } = path.node;
|
|
78
|
-
if (!['JSXElement', 'JSXFragment'].includes(type))
|
|
79
|
-
return;
|
|
80
|
-
const TODO = (node, attributes) => {
|
|
81
|
-
const { local } = addDependency(path, CONSTANTS.UTILS_PATH, CONSTANTS.UTILS_ATTRIBUTES_LOCAL, CONSTANTS.UTILS_ATTRIBUTES_IMPORTED);
|
|
82
|
-
return t.callExpression(t.identifier(local), [
|
|
83
|
-
node,
|
|
84
|
-
t.arrayExpression(attributes.map((attribute) => {
|
|
85
|
-
switch (attribute.type) {
|
|
86
|
-
case 'JSXSpreadAttribute':
|
|
87
|
-
return attribute.argument;
|
|
88
|
-
default:
|
|
89
|
-
return t.objectExpression([
|
|
90
|
-
t.objectProperty(t.stringLiteral(attribute.name.name), attribute.value?.type == 'JSXExpressionContainer'
|
|
91
|
-
? attribute.value.expression
|
|
92
|
-
: attribute.value || t.booleanLiteral(true))
|
|
93
|
-
]);
|
|
94
|
-
}
|
|
95
|
-
}))
|
|
96
|
-
]);
|
|
97
|
-
};
|
|
98
|
-
const render = (node) => {
|
|
99
|
-
switch (node.type) {
|
|
100
|
-
case 'JSXElement':
|
|
101
|
-
const attributes = node.openingElement.attributes;
|
|
102
|
-
const isHost = node.openingElement.name.name == CONSTANTS.ELEMENT_HOST_NAME;
|
|
103
|
-
// TODO
|
|
104
|
-
if (isHost) {
|
|
105
|
-
const children = node.children.map(render).flat();
|
|
106
|
-
if (!attributes.length)
|
|
107
|
-
return children;
|
|
108
|
-
return [TODO(t.thisExpression(), attributes), ...children];
|
|
109
|
-
}
|
|
110
|
-
const name = node.openingElement.name.name;
|
|
111
|
-
const children = node.children.map(render).flat();
|
|
112
|
-
const parts = [];
|
|
113
|
-
parts.push('<', name);
|
|
114
|
-
const hasSpreadAttribute = attributes.some((attribute) => {
|
|
115
|
-
return attribute.type == 'JSXSpreadAttribute';
|
|
116
|
-
});
|
|
117
|
-
if (hasSpreadAttribute) {
|
|
118
|
-
parts.push(' ', TODO(t.identifier('TODO'), attributes));
|
|
119
|
-
}
|
|
120
|
-
else {
|
|
121
|
-
for (const attribute of attributes) {
|
|
122
|
-
switch (attribute.type) {
|
|
123
|
-
case 'JSXAttribute':
|
|
124
|
-
if (attribute.name.name == 'dangerouslySetInnerHTML') {
|
|
125
|
-
try {
|
|
126
|
-
parts.push(' ', '.innerHTML');
|
|
127
|
-
parts.push('=');
|
|
128
|
-
parts.push(attribute.value.expression.properties.at(0).value);
|
|
129
|
-
}
|
|
130
|
-
catch { }
|
|
131
|
-
continue;
|
|
132
|
-
}
|
|
133
|
-
parts.push(' ', attribute.name.name);
|
|
134
|
-
if (!attribute.value)
|
|
135
|
-
continue;
|
|
136
|
-
parts.push('=');
|
|
137
|
-
switch (attribute.value.type) {
|
|
138
|
-
case 'JSXExpressionContainer':
|
|
139
|
-
parts.push(attribute.value.expression);
|
|
140
|
-
break;
|
|
141
|
-
default:
|
|
142
|
-
parts.push(attribute.value.extra.raw);
|
|
143
|
-
break;
|
|
144
|
-
}
|
|
145
|
-
break;
|
|
146
|
-
default:
|
|
147
|
-
parts.push(' ', attribute);
|
|
148
|
-
break;
|
|
149
|
-
}
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
parts.push(node.closingElement ? '>' : ' />');
|
|
153
|
-
parts.push(...children);
|
|
154
|
-
if (node.closingElement) {
|
|
155
|
-
parts.push('<', '/', name, '>');
|
|
156
|
-
}
|
|
157
|
-
return parts;
|
|
158
|
-
case 'JSXFragment':
|
|
159
|
-
return node.children.map(render).flat();
|
|
160
|
-
case 'JSXText':
|
|
161
|
-
return [node.extra.raw];
|
|
162
|
-
case 'JSXExpressionContainer':
|
|
163
|
-
if (node.expression.type == 'JSXEmptyExpression')
|
|
164
|
-
return [];
|
|
165
|
-
return [node.expression];
|
|
166
|
-
}
|
|
167
|
-
};
|
|
168
|
-
const transform = (parts) => {
|
|
169
|
-
const quasis = [];
|
|
170
|
-
const expressions = [];
|
|
171
|
-
let i = 0;
|
|
172
|
-
while (i < parts.length + 1) {
|
|
173
|
-
let quasi = '';
|
|
174
|
-
while (typeof parts[i] == 'string') {
|
|
175
|
-
quasi += parts[i].replace(/[\\`]/g, (s) => `\\${s}`);
|
|
176
|
-
i += 1;
|
|
177
|
-
}
|
|
178
|
-
quasis.push(t.templateElement({ raw: quasi }));
|
|
179
|
-
if (parts[i] != null)
|
|
180
|
-
expressions.push(parts[i]);
|
|
181
|
-
i += 1;
|
|
182
|
-
}
|
|
183
|
-
const templateLiteral = t.templateLiteral(quasis, expressions);
|
|
184
|
-
// TODO
|
|
185
|
-
// if (!expressions.length) return template;
|
|
186
|
-
const { local } = addDependency(path, CONSTANTS.UTILS_PATH, CONSTANTS.UTILS_HTML_LOCAL, CONSTANTS.UTILS_HTML_IMPORTED, true);
|
|
187
|
-
return t.taggedTemplateExpression(t.identifier(local), templateLiteral);
|
|
188
|
-
};
|
|
189
|
-
path.replaceWith(transform(render(path.node)));
|
|
190
|
-
}
|
|
191
|
-
});
|
|
192
|
-
// add type to properties
|
|
193
|
-
visitor(ast, {
|
|
194
|
-
Decorator(path) {
|
|
195
|
-
const { expression } = path.node;
|
|
196
|
-
if (expression.callee?.name != CONSTANTS.DECORATOR_PROPERTY)
|
|
197
|
-
return;
|
|
198
|
-
if (!expression.arguments.length) {
|
|
199
|
-
expression.arguments.push(t.objectExpression([]));
|
|
200
|
-
}
|
|
201
|
-
const [argument] = expression.arguments;
|
|
202
|
-
const filtered = argument.properties.filter((property) => {
|
|
203
|
-
return property.key.name != CONSTANTS.DECORATOR_PROPERTY_TYPE;
|
|
204
|
-
});
|
|
205
|
-
if (argument.properties.length != filtered.length)
|
|
206
|
-
return;
|
|
207
|
-
argument.properties = filtered;
|
|
208
|
-
let type = 0;
|
|
209
|
-
const extract = (input) => {
|
|
210
|
-
switch (input?.type) {
|
|
211
|
-
case 'BooleanLiteral':
|
|
212
|
-
type |= CONSTANTS.TYPE_BOOLEAN;
|
|
213
|
-
break;
|
|
214
|
-
case 'NumericLiteral':
|
|
215
|
-
type |= CONSTANTS.TYPE_NUMBER;
|
|
216
|
-
break;
|
|
217
|
-
case 'StringLiteral':
|
|
218
|
-
type |= CONSTANTS.TYPE_ENUM;
|
|
219
|
-
break;
|
|
220
|
-
case 'TSArrayType':
|
|
221
|
-
type |= CONSTANTS.TYPE_ARRAY;
|
|
222
|
-
break;
|
|
223
|
-
case 'TSBooleanKeyword':
|
|
224
|
-
type |= CONSTANTS.TYPE_BOOLEAN;
|
|
225
|
-
break;
|
|
226
|
-
case 'TSLiteralType':
|
|
227
|
-
extract(input.literal);
|
|
228
|
-
break;
|
|
229
|
-
case 'TSNullKeyword':
|
|
230
|
-
type |= CONSTANTS.TYPE_NULL;
|
|
231
|
-
break;
|
|
232
|
-
case 'TSNumberKeyword':
|
|
233
|
-
type |= CONSTANTS.TYPE_NUMBER;
|
|
234
|
-
break;
|
|
235
|
-
case 'TSObjectKeyword':
|
|
236
|
-
type |= CONSTANTS.TYPE_OBJECT;
|
|
237
|
-
break;
|
|
238
|
-
case 'TSStringKeyword':
|
|
239
|
-
type |= CONSTANTS.TYPE_STRING;
|
|
240
|
-
break;
|
|
241
|
-
case 'TSTupleType':
|
|
242
|
-
type |= CONSTANTS.TYPE_ARRAY;
|
|
243
|
-
break;
|
|
244
|
-
case 'TSTypeLiteral':
|
|
245
|
-
type |= CONSTANTS.TYPE_OBJECT;
|
|
246
|
-
break;
|
|
247
|
-
case 'TSTypeReference':
|
|
248
|
-
if (!input.typeName)
|
|
249
|
-
break;
|
|
250
|
-
switch (input.typeName.name) {
|
|
251
|
-
case 'Array':
|
|
252
|
-
type |= CONSTANTS.TYPE_ARRAY;
|
|
253
|
-
break;
|
|
254
|
-
case 'Boolean':
|
|
255
|
-
type |= CONSTANTS.TYPE_BOOLEAN;
|
|
256
|
-
break;
|
|
257
|
-
case 'bool':
|
|
258
|
-
type |= CONSTANTS.TYPE_BOOLEAN;
|
|
259
|
-
break;
|
|
260
|
-
case 'Date':
|
|
261
|
-
type |= CONSTANTS.TYPE_DATE;
|
|
262
|
-
break;
|
|
263
|
-
case 'Number':
|
|
264
|
-
type |= CONSTANTS.TYPE_NUMBER;
|
|
265
|
-
break;
|
|
266
|
-
case 'Object':
|
|
267
|
-
type |= CONSTANTS.TYPE_OBJECT;
|
|
268
|
-
break;
|
|
269
|
-
}
|
|
270
|
-
break;
|
|
271
|
-
case 'TSUnionType':
|
|
272
|
-
input.types.forEach(extract);
|
|
273
|
-
break;
|
|
274
|
-
}
|
|
275
|
-
// TODO
|
|
276
|
-
if (input?.type == 'TSParenthesizedType' &&
|
|
277
|
-
input?.typeAnnotation?.type == 'TSIntersectionType') {
|
|
278
|
-
let types = input.types || input.typeAnnotation.types;
|
|
279
|
-
if (types.length != 2)
|
|
280
|
-
return;
|
|
281
|
-
types = types.filter((type) => type.type != 'TSTypeLiteral');
|
|
282
|
-
if (types.length != 1)
|
|
283
|
-
return;
|
|
284
|
-
extract(types[0]);
|
|
285
|
-
}
|
|
286
|
-
};
|
|
287
|
-
extract(getType(context.directoryPath, ast, path.parentPath.node.typeAnnotation?.typeAnnotation));
|
|
288
|
-
argument.properties.push(t.objectProperty(t.identifier(CONSTANTS.DECORATOR_PROPERTY_TYPE), t.numericLiteral(type)));
|
|
289
|
-
}
|
|
290
|
-
});
|
|
291
|
-
// attach typings
|
|
292
|
-
if (options.typings) {
|
|
293
|
-
visitor(ast, {
|
|
294
|
-
Program(path) {
|
|
295
|
-
const attributes = context
|
|
296
|
-
.classProperties.filter((property) => !t.isClassMethod(property))
|
|
297
|
-
.map((property) => {
|
|
298
|
-
const key = extractAttribute(property) || kebabCase(property.key['name']);
|
|
299
|
-
const typeAnnotation = property.typeAnnotation;
|
|
300
|
-
return Object.assign(t.tSPropertySignature(t.stringLiteral(kebabCase(key)), typeAnnotation), {
|
|
301
|
-
optional: property.optional,
|
|
302
|
-
leadingComments: t.cloneNode(property, true).leadingComments
|
|
303
|
-
});
|
|
304
|
-
});
|
|
305
|
-
const events = context.classEvents.map((event) => {
|
|
306
|
-
const key = event.key;
|
|
307
|
-
const typeAnnotation = event.typeAnnotation;
|
|
308
|
-
return Object.assign(t.tSPropertySignature(t.identifier(camelCase('on-' + key.name)), t.tsTypeAnnotation(t.tsFunctionType(undefined, [
|
|
309
|
-
Object.assign({}, t.identifier('event'), {
|
|
310
|
-
typeAnnotation: t.tsTypeAnnotation(t.tsTypeReference(t.identifier('CustomEvent'), typeAnnotation?.['typeAnnotation']?.typeParameters))
|
|
311
|
-
})
|
|
312
|
-
], t.tsTypeAnnotation(t.tsVoidKeyword())))), {
|
|
313
|
-
optional: true,
|
|
314
|
-
leadingComments: t.cloneNode(event, true).leadingComments
|
|
315
|
-
});
|
|
316
|
-
});
|
|
317
|
-
const methods = context.classMethods.map((method) => {
|
|
318
|
-
return Object.assign(t.tsMethodSignature(method.key, undefined, method.params, // TODO
|
|
319
|
-
method.returnType // TODO
|
|
320
|
-
), {
|
|
321
|
-
leadingComments: t.cloneNode(method, true).leadingComments
|
|
322
|
-
});
|
|
323
|
-
});
|
|
324
|
-
const properties = context.classProperties.map((property) => {
|
|
325
|
-
const key = property.key;
|
|
326
|
-
// TODO
|
|
327
|
-
const readonly = property.readonly || !!property['returnType'];
|
|
328
|
-
// TODO
|
|
329
|
-
const typeAnnotation = (property.typeAnnotation ||
|
|
330
|
-
property['returnType']);
|
|
331
|
-
return Object.assign(t.tsPropertySignature(t.identifier(key.name), typeAnnotation), {
|
|
332
|
-
readonly,
|
|
333
|
-
optional: property.optional,
|
|
334
|
-
leadingComments: t.cloneNode(property, true).leadingComments
|
|
335
|
-
});
|
|
336
|
-
});
|
|
337
|
-
// prettier-ignore
|
|
338
|
-
const ast = template.default.ast(`
|
|
339
|
-
// THE FOLLOWING TYPES HAVE BEEN ADDED AUTOMATICALLY
|
|
340
|
-
|
|
341
|
-
export interface ${context.className}Attributes {
|
|
342
|
-
${attributes.map(print).join('')}
|
|
343
|
-
}
|
|
344
|
-
|
|
345
|
-
export interface ${context.className}Events {
|
|
346
|
-
${events.map(print).join('')}
|
|
347
|
-
}
|
|
348
|
-
|
|
349
|
-
export interface ${context.className}Methods {
|
|
350
|
-
${methods.map(print).join('')}
|
|
351
|
-
}
|
|
352
|
-
|
|
353
|
-
export interface ${context.className}Properties {
|
|
354
|
-
${properties.map(print).join('')}
|
|
355
|
-
}
|
|
356
|
-
|
|
357
|
-
export interface ${context.className}JSX extends ${context.className}Events, ${context.className}Properties { }
|
|
358
|
-
|
|
359
|
-
declare global {
|
|
360
|
-
interface ${context.elementInterfaceName} extends HTMLElement, ${context.className}Methods, ${context.className}Properties { }
|
|
361
|
-
|
|
362
|
-
var ${context.elementInterfaceName}: {
|
|
363
|
-
prototype: ${context.elementInterfaceName};
|
|
364
|
-
new (): ${context.elementInterfaceName};
|
|
365
|
-
};
|
|
366
|
-
|
|
367
|
-
interface HTMLElementTagNameMap {
|
|
368
|
-
"${context.elementTagName}": ${context.elementInterfaceName};
|
|
369
|
-
}
|
|
370
|
-
|
|
371
|
-
namespace JSX {
|
|
372
|
-
interface IntrinsicElements {
|
|
373
|
-
"${context.elementTagName}": ${context.className}Events & ${context.className}Attributes & {
|
|
374
|
-
[key: string]: any;
|
|
375
|
-
};
|
|
376
|
-
}
|
|
377
|
-
}
|
|
378
|
-
}
|
|
379
|
-
|
|
380
|
-
export type ${context.className}Element = globalThis.${context.elementInterfaceName}
|
|
381
|
-
`, {
|
|
382
|
-
plugins: ['typescript'],
|
|
383
|
-
preserveComments: true
|
|
384
|
-
});
|
|
385
|
-
path.node.body.push(...ast);
|
|
386
|
-
}
|
|
387
|
-
});
|
|
388
|
-
}
|
|
389
|
-
context.script = print(ast);
|
|
390
|
-
};
|
|
391
|
-
return { name, run };
|
|
392
|
-
};
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { TransformerPlugin, TransformerPluginContext } from '../transformer.types.js';
|
|
2
|
-
export declare const DOCUMENT_OPTIONS: Partial<DocumentOptions>;
|
|
3
|
-
export interface DocumentOptions {
|
|
4
|
-
destination: string;
|
|
5
|
-
transformer?: (context: TransformerPluginContext, element: any) => any;
|
|
6
|
-
}
|
|
7
|
-
export declare const document: (options?: DocumentOptions) => TransformerPlugin;
|