@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.
Files changed (175) hide show
  1. package/README.md +2 -2
  2. package/bundlers.d.ts +20 -0
  3. package/{bundlers/vite.js → bundlers.js} +39 -3
  4. package/client-5FqNUiuz.d.ts +309 -0
  5. package/client-Dse96R-O.js +1805 -0
  6. package/client.d.ts +1 -0
  7. package/client.js +3 -0
  8. package/constants.d.ts +48 -0
  9. package/constants.js +60 -0
  10. package/internal.d.ts +1 -0
  11. package/internal.js +3 -0
  12. package/package.json +8 -4
  13. package/transformer.d.ts +139 -0
  14. package/transformer.js +1277 -0
  15. package/bundlers/rollup.d.ts +0 -7
  16. package/bundlers/rollup.js +0 -23
  17. package/bundlers/vite.d.ts +0 -8
  18. package/client/decorators/bind.d.ts +0 -8
  19. package/client/decorators/bind.js +0 -21
  20. package/client/decorators/context.d.ts +0 -3
  21. package/client/decorators/context.js +0 -121
  22. package/client/decorators/direction.d.ts +0 -5
  23. package/client/decorators/direction.js +0 -8
  24. package/client/decorators/element.d.ts +0 -7
  25. package/client/decorators/element.js +0 -65
  26. package/client/decorators/event.d.ts +0 -35
  27. package/client/decorators/event.js +0 -53
  28. package/client/decorators/host.d.ts +0 -4
  29. package/client/decorators/host.js +0 -7
  30. package/client/decorators/index.d.ts +0 -15
  31. package/client/decorators/index.js +0 -15
  32. package/client/decorators/isRTL.d.ts +0 -4
  33. package/client/decorators/isRTL.js +0 -7
  34. package/client/decorators/listen.d.ts +0 -52
  35. package/client/decorators/listen.js +0 -37
  36. package/client/decorators/method.d.ts +0 -6
  37. package/client/decorators/method.js +0 -15
  38. package/client/decorators/property.d.ts +0 -25
  39. package/client/decorators/property.js +0 -94
  40. package/client/decorators/query.d.ts +0 -9
  41. package/client/decorators/query.js +0 -12
  42. package/client/decorators/queryAll.d.ts +0 -12
  43. package/client/decorators/queryAll.js +0 -15
  44. package/client/decorators/slots.d.ts +0 -4
  45. package/client/decorators/slots.js +0 -7
  46. package/client/decorators/state.d.ts +0 -6
  47. package/client/decorators/state.js +0 -23
  48. package/client/decorators/watch.d.ts +0 -11
  49. package/client/decorators/watch.js +0 -31
  50. package/client/index.d.ts +0 -2
  51. package/client/index.js +0 -2
  52. package/client/utils/appendToMethod.d.ts +0 -1
  53. package/client/utils/appendToMethod.js +0 -15
  54. package/client/utils/attributes.d.ts +0 -2
  55. package/client/utils/attributes.js +0 -33
  56. package/client/utils/call.d.ts +0 -1
  57. package/client/utils/call.js +0 -3
  58. package/client/utils/classes.d.ts +0 -4
  59. package/client/utils/classes.js +0 -45
  60. package/client/utils/config.d.ts +0 -39
  61. package/client/utils/config.js +0 -28
  62. package/client/utils/defineProperty.d.ts +0 -1
  63. package/client/utils/defineProperty.js +0 -1
  64. package/client/utils/direction.d.ts +0 -6
  65. package/client/utils/direction.js +0 -8
  66. package/client/utils/event.d.ts +0 -13
  67. package/client/utils/event.js +0 -48
  68. package/client/utils/getFramework.d.ts +0 -2
  69. package/client/utils/getFramework.js +0 -20
  70. package/client/utils/getStyles.d.ts +0 -2
  71. package/client/utils/getStyles.js +0 -4
  72. package/client/utils/getTag.d.ts +0 -2
  73. package/client/utils/getTag.js +0 -4
  74. package/client/utils/host.d.ts +0 -5
  75. package/client/utils/host.js +0 -12
  76. package/client/utils/index.d.ts +0 -32
  77. package/client/utils/index.js +0 -32
  78. package/client/utils/isCSSColor.d.ts +0 -5
  79. package/client/utils/isCSSColor.js +0 -9
  80. package/client/utils/isEvent.d.ts +0 -1
  81. package/client/utils/isEvent.js +0 -3
  82. package/client/utils/isRTL.d.ts +0 -5
  83. package/client/utils/isRTL.js +0 -5
  84. package/client/utils/isServer.d.ts +0 -4
  85. package/client/utils/isServer.js +0 -6
  86. package/client/utils/merge.d.ts +0 -1
  87. package/client/utils/merge.js +0 -22
  88. package/client/utils/query.d.ts +0 -5
  89. package/client/utils/query.js +0 -7
  90. package/client/utils/queryAll.d.ts +0 -5
  91. package/client/utils/queryAll.js +0 -7
  92. package/client/utils/request.d.ts +0 -9
  93. package/client/utils/request.js +0 -106
  94. package/client/utils/shadowRoot.d.ts +0 -2
  95. package/client/utils/shadowRoot.js +0 -4
  96. package/client/utils/slots.d.ts +0 -9
  97. package/client/utils/slots.js +0 -18
  98. package/client/utils/styles.d.ts +0 -4
  99. package/client/utils/styles.js +0 -10
  100. package/client/utils/task.d.ts +0 -6
  101. package/client/utils/task.js +0 -34
  102. package/client/utils/toBoolean.d.ts +0 -1
  103. package/client/utils/toBoolean.js +0 -3
  104. package/client/utils/toDecorator.d.ts +0 -2
  105. package/client/utils/toDecorator.js +0 -10
  106. package/client/utils/toEvent.d.ts +0 -1
  107. package/client/utils/toEvent.js +0 -3
  108. package/client/utils/toProperty.d.ts +0 -1
  109. package/client/utils/toProperty.js +0 -55
  110. package/client/utils/toUnit.d.ts +0 -4
  111. package/client/utils/toUnit.js +0 -10
  112. package/client/utils/typeOf.d.ts +0 -3
  113. package/client/utils/typeOf.js +0 -6
  114. package/client/utils/uhtml.d.ts +0 -22
  115. package/client/utils/uhtml.js +0 -703
  116. package/client/utils/updateAttribute.d.ts +0 -2
  117. package/client/utils/updateAttribute.js +0 -10
  118. package/constants/index.d.ts +0 -48
  119. package/constants/index.js +0 -60
  120. package/transformer/index.d.ts +0 -3
  121. package/transformer/index.js +0 -3
  122. package/transformer/plugins/assets.d.ts +0 -7
  123. package/transformer/plugins/assets.js +0 -26
  124. package/transformer/plugins/copy.d.ts +0 -9
  125. package/transformer/plugins/copy.js +0 -29
  126. package/transformer/plugins/customElement.d.ts +0 -7
  127. package/transformer/plugins/customElement.js +0 -392
  128. package/transformer/plugins/document.d.ts +0 -7
  129. package/transformer/plugins/document.js +0 -206
  130. package/transformer/plugins/extract.d.ts +0 -2
  131. package/transformer/plugins/extract.js +0 -22
  132. package/transformer/plugins/index.d.ts +0 -12
  133. package/transformer/plugins/index.js +0 -12
  134. package/transformer/plugins/parse.d.ts +0 -6
  135. package/transformer/plugins/parse.js +0 -13
  136. package/transformer/plugins/read.d.ts +0 -7
  137. package/transformer/plugins/read.js +0 -19
  138. package/transformer/plugins/readme.d.ts +0 -6
  139. package/transformer/plugins/readme.js +0 -24
  140. package/transformer/plugins/style.d.ts +0 -6
  141. package/transformer/plugins/style.js +0 -42
  142. package/transformer/plugins/validate.d.ts +0 -2
  143. package/transformer/plugins/validate.js +0 -40
  144. package/transformer/plugins/visualStudioCode.d.ts +0 -8
  145. package/transformer/plugins/visualStudioCode.js +0 -73
  146. package/transformer/plugins/webTypes.d.ts +0 -10
  147. package/transformer/plugins/webTypes.js +0 -74
  148. package/transformer/transformer.d.ts +0 -8
  149. package/transformer/transformer.js +0 -78
  150. package/transformer/transformer.types.d.ts +0 -52
  151. package/transformer/transformer.types.js +0 -1
  152. package/transformer/utils/addDependency.d.ts +0 -7
  153. package/transformer/utils/addDependency.js +0 -64
  154. package/transformer/utils/extractAttribute.d.ts +0 -2
  155. package/transformer/utils/extractAttribute.js +0 -10
  156. package/transformer/utils/extractFromComment.d.ts +0 -4
  157. package/transformer/utils/extractFromComment.js +0 -51
  158. package/transformer/utils/getInitializer.d.ts +0 -2
  159. package/transformer/utils/getInitializer.js +0 -3
  160. package/transformer/utils/getType.d.ts +0 -2
  161. package/transformer/utils/getType.js +0 -89
  162. package/transformer/utils/getTypeReference.d.ts +0 -2
  163. package/transformer/utils/getTypeReference.js +0 -33
  164. package/transformer/utils/hasDecorator.d.ts +0 -1
  165. package/transformer/utils/hasDecorator.js +0 -5
  166. package/transformer/utils/index.d.ts +0 -10
  167. package/transformer/utils/index.js +0 -10
  168. package/transformer/utils/print.d.ts +0 -2
  169. package/transformer/utils/print.js +0 -5
  170. package/transformer/utils/printType.d.ts +0 -1
  171. package/transformer/utils/printType.js +0 -69
  172. package/transformer/utils/visitor.d.ts +0 -2
  173. package/transformer/utils/visitor.js +0 -5
  174. package/types/index.d.ts +0 -2
  175. package/types/index.js +0 -1
@@ -1,2 +0,0 @@
1
- import { HTMLPlusElement } from '../../types/index.js';
2
- export declare const updateAttribute: (target: HTMLElement | HTMLPlusElement, key: string, value: any) => void;
@@ -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
- };
@@ -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";
@@ -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';
@@ -1,3 +0,0 @@
1
- export * from './transformer.js';
2
- export * from './transformer.types.js';
3
- export * from './plugins/index.js';
@@ -1,3 +0,0 @@
1
- export * from './transformer.js';
2
- export * from './transformer.types.js';
3
- export * from './plugins/index.js';
@@ -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;