@htmlplus/element 0.4.0 → 0.4.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.
Files changed (15) hide show
  1. package/client/decorators/element.js +4 -1
  2. package/client/decorators/property.js +4 -3
  3. package/client/decorators/state.js +3 -3
  4. package/client/decorators/watch.js +7 -10
  5. package/client/helpers/classes.d.ts +1 -1
  6. package/client/utils/event.d.ts +2 -2
  7. package/client/utils/request.d.ts +1 -1
  8. package/compiler/compiler.js +4 -1
  9. package/compiler/plugins/customElement.d.ts +1 -1
  10. package/compiler/plugins/customElementReact/templates/package.json.hbs +2 -2
  11. package/compiler/plugins/extract.d.ts +1 -1
  12. package/compiler/utils/tags.d.ts +2 -2
  13. package/constants/index.d.ts +1 -1
  14. package/constants/index.js +2 -1
  15. package/package.json +14 -16
package/client/decorators/element.js CHANGED
@@ -15,7 +15,7 @@ export function Element(tag) {
15
15
  this.plus = new constructor();
16
16
  this.plus[CONSTANTS.API_HOST] = () => this;
17
17
  this.plus['uhtml'] = uhtml;
18
- this.plus[CONSTANTS.API_READY] = true;
18
+ this.plus[CONSTANTS.API_STATUS] = 'initialize';
19
19
  }
20
20
  static get observedAttributes() {
21
21
  return Object.keys(members)
@@ -33,9 +33,11 @@ export function Element(tag) {
33
33
  this.plus[key] = parsed;
34
34
  }
35
35
  connectedCallback() {
36
+ this.plus[CONSTANTS.API_STATUS] = 'connected';
36
37
  call(this.plus, CONSTANTS.LIFECYCLE_CONNECTED);
37
38
  request(this.plus)
38
39
  .then(() => {
40
+ this.plus[CONSTANTS.API_STATUS] = 'loaded';
39
41
  call(this.plus, CONSTANTS.LIFECYCLE_LOADED);
40
42
  })
41
43
  .catch((error) => {
@@ -43,6 +45,7 @@ export function Element(tag) {
43
45
  });
44
46
  }
45
47
  disconnectedCallback() {
48
+ this.plus[CONSTANTS.API_STATUS] = 'disconnected';
46
49
  call(this.plus, CONSTANTS.LIFECYCLE_DISCONNECTED);
47
50
  }
48
51
  }
package/client/decorators/property.js CHANGED
@@ -15,8 +15,8 @@ export function Property(options) {
15
15
  if (input === value)
16
16
  return;
17
17
  values.set(this, input);
18
- const isReady = !!this[CONSTANTS.API_READY];
19
- request(this, { [name]: [input, value, !this[CONSTANTS.API_READY]] }).then(() => {
18
+ const isReady = this[CONSTANTS.API_STATUS] == 'initialize';
19
+ request(this, { [name]: [input, value] }).then(() => {
20
20
  const element = host(this);
21
21
  const has = element.hasAttribute(attribute);
22
22
  if (!isReady && has)
@@ -39,7 +39,8 @@ export function Property(options) {
39
39
  const set = (input) => {
40
40
  this[propertyKey] = input;
41
41
  };
42
- defineProperty(element, propertyKey, { get, set });
42
+ // TODO: configurable
43
+ defineProperty(element, propertyKey, { get, set, configurable: true });
43
44
  });
44
45
  };
45
46
  }
package/client/decorators/state.js CHANGED
@@ -1,4 +1,3 @@
1
- import * as CONSTANTS from '../../constants/index.js';
2
1
  import { defineProperty, request } from '../utils/index.js';
3
2
  export function State() {
4
3
  return function (target, propertyKey) {
@@ -12,12 +11,13 @@ export function State() {
12
11
  if (input === value)
13
12
  return;
14
13
  values.set(this, input);
15
- request(this, { [name]: [input, value, !this[CONSTANTS.API_READY]] })
14
+ request(this, { [name]: [input, value] })
16
15
  .then(() => undefined)
17
16
  .catch((error) => {
18
17
  throw error;
19
18
  });
20
19
  }
21
- defineProperty(target, propertyKey, { get, set });
20
+ // TODO: configurable
21
+ defineProperty(target, propertyKey, { get, set, configurable: true });
22
22
  };
23
23
  }
package/client/decorators/watch.js CHANGED
@@ -10,21 +10,18 @@ export function Watch(keys, immediate) {
10
10
  return function (target, propertyKey) {
11
11
  // Registers a lifecycle to detect changes.
12
12
  appendToMethod(target, CONSTANTS.LIFECYCLE_UPDATED, function ([states]) {
13
- // Gets all keys
14
- const keys = Object.keys(states);
15
13
  // Loops the keys
16
- for (const key of keys) {
17
- // Finds current key in keys
18
- const has = keys === null || keys === void 0 ? void 0 : keys.some((x) => x == key);
14
+ for (const key of Object.keys(states)) {
15
+ // TODO
16
+ if ((keys === null || keys === void 0 ? void 0 : keys.length) && !keys.includes(key))
17
+ continue;
19
18
  // Checks the existence of key
20
- if (!has && !!(keys === null || keys === void 0 ? void 0 : keys.length))
19
+ if ((keys === null || keys === void 0 ? void 0 : keys.length) && !(key in states))
21
20
  continue;
22
21
  // Gets the current state
23
- const state = states === null || states === void 0 ? void 0 : states[key];
24
- // Destructs the state
25
- const [next, prev, isInitial] = state;
22
+ const [next, prev] = states[key];
26
23
  // TODO
27
- if (!immediate && isInitial)
24
+ if (!immediate && this[CONSTANTS.API_STATUS] != 'loaded')
28
25
  continue;
29
26
  // Invokes the method with parameters.
30
27
  this[propertyKey](next, prev, key);
package/client/helpers/classes.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const classes: (input: any, smart?: boolean | undefined) => string;
1
+ export declare const classes: (input: any, smart?: boolean) => string;
package/client/utils/event.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  declare type Target = Window | Document | Element;
2
2
  export declare const dispatch: (target: Target, event: Event) => boolean;
3
- export declare const on: (target: Target, type: string, handler: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined) => void;
4
- export declare const off: (target: Target, type: string, handler: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined) => void;
3
+ export declare const on: (target: Target, type: string, handler: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void;
4
+ export declare const off: (target: Target, type: string, handler: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions) => void;
5
5
  export {};
package/client/utils/request.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import { PlusElement } from '../../types/index.js';
2
2
  export declare const request: (target: PlusElement, state?: {
3
- [key: string]: [any, any, (boolean | undefined)?];
3
+ [key: string]: [any, any];
4
4
  } | undefined) => Promise<boolean>;
package/compiler/compiler.js CHANGED
@@ -24,11 +24,15 @@ export default (...plugins) => {
24
24
  let context = {
25
25
  filePath
26
26
  };
27
+ let timeout;
27
28
  for (const plugin of plugins) {
28
29
  if (!plugin.next)
29
30
  continue;
31
+ clearTimeout(timeout);
30
32
  logger.start(`Plugin '${plugin.name}' executing...`);
31
33
  const output = await plugin.next(context, global);
34
+ logger.start(`Plugin '${plugin.name}' executed successfully.`);
35
+ timeout = setTimeout(() => logger.stop(), 1500);
32
36
  // TODO
33
37
  if (output) {
34
38
  context.outputs = ((_a = context.outputs) !== null && _a !== void 0 ? _a : [])
@@ -44,7 +48,6 @@ export default (...plugins) => {
44
48
  output
45
49
  });
46
50
  }
47
- logger.start(`Plugin '${plugin.name}' executed successfully.`);
48
51
  global.contexts = global.contexts.filter((current) => current.filePath != context.filePath).concat(context);
49
52
  if (context.isInvalid)
50
53
  break;
package/compiler/plugins/customElement.d.ts CHANGED
@@ -2,7 +2,7 @@ import { Context } from '../../types/index.js';
2
2
  export interface CustomElementOptions {
3
3
  typings?: boolean;
4
4
  }
5
- export declare const customElement: (options?: CustomElementOptions | undefined) => {
5
+ export declare const customElement: (options?: CustomElementOptions) => {
6
6
  name: string;
7
7
  next: (context: Context) => void;
8
8
  };
package/compiler/plugins/customElementReact/templates/package.json.hbs CHANGED
@@ -31,7 +31,7 @@
31
31
  "typescript": "^4.0.2"
32
32
  },
33
33
  "peerDependencies": {
34
- "react": "^16.0.0 || ^17.0.0",
35
- "react-dom": "^16.0.0 || ^17.0.0"
34
+ "react": "^18.0.0",
35
+ "react-dom": "^18.0.0"
36
36
  }
37
37
  }
package/compiler/plugins/extract.d.ts CHANGED
@@ -2,7 +2,7 @@ import { Context } from '../../types/index.js';
2
2
  export interface ExtractOptions {
3
3
  prefix?: string;
4
4
  }
5
- export declare const extract: (options?: ExtractOptions | undefined) => {
5
+ export declare const extract: (options?: ExtractOptions) => {
6
6
  name: string;
7
7
  next: (context: Context) => void;
8
8
  };
package/compiler/utils/tags.d.ts CHANGED
@@ -7,7 +7,7 @@ export interface TagParsed {
7
7
  name?: string;
8
8
  description?: string;
9
9
  }
10
- export declare const getTag: (node: Node, key?: string | undefined) => Tag | undefined;
11
- export declare const getTags: (node: Node, filter?: string | undefined) => Array<Tag>;
10
+ export declare const getTag: (node: Node, key?: string) => Tag | undefined;
11
+ export declare const getTags: (node: Node, filter?: string) => Array<Tag>;
12
12
  export declare const hasTag: (node: Node, name: string) => Boolean;
13
13
  export declare const parseTag: (tag: Tag, spliter?: string) => TagParsed;
package/constants/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  export declare const PACKAGE_NAME = "@htmlplus/element";
2
2
  export declare const API_HOST = "$host$";
3
- export declare const API_READY = "$ready$";
3
+ export declare const API_STATUS = "$status$";
4
4
  export declare const DECORATOR_ELEMENT = "Element";
5
5
  export declare const DECORATOR_EVENT = "Event";
6
6
  export declare const DECORATOR_PROPERTY = "Property";
package/constants/index.js CHANGED
@@ -1,7 +1,8 @@
1
1
  export const PACKAGE_NAME = '@htmlplus/element';
2
2
  // apis
3
3
  export const API_HOST = '$host$';
4
- export const API_READY = '$ready$';
4
+ // TODO
5
+ export const API_STATUS = '$status$';
5
6
  // decorators
6
7
  export const DECORATOR_ELEMENT = 'Element';
7
8
  export const DECORATOR_EVENT = 'Event';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@htmlplus/element",
3
- "version": "0.4.0",
3
+ "version": "0.4.1",
4
4
  "license": "MIT",
5
5
  "author": "Masood Abdolian <m.abdolian@gmail.com>",
6
6
  "description": "Compiler of HTMLPlus",
@@ -32,28 +32,26 @@
32
32
  },
33
33
  "homepage": "https://github.com/htmlplus/element#readme",
34
34
  "dependencies": {
35
- "@babel/generator": "^7.16.0",
36
- "@babel/parser": "^7.16.4",
37
- "@babel/traverse": "^7.16.3",
38
- "@babel/types": "^7.16.0",
39
- "@types/node": "^16.11.11",
35
+ "@babel/generator": "^7.18.9",
36
+ "@babel/parser": "^7.18.9",
37
+ "@babel/traverse": "^7.18.9",
38
+ "@babel/types": "^7.18.9",
39
+ "@types/node": "^18.6.3",
40
40
  "change-case": "^4.1.2",
41
41
  "fast-glob": "^3.2.11",
42
42
  "fs-extra": "^10.1.0",
43
43
  "handlebars": "^4.7.7",
44
- "listr2": "^4.0.5",
45
- "log-update": "^5.0.0",
46
- "ora": "^6.1.0",
47
- "typescript": "^4.5.2",
48
- "uhtml": "^3.0.1"
44
+ "listr2": "^5.0.1",
45
+ "ora": "^6.1.2",
46
+ "typescript": "^4.7.4"
49
47
  },
50
48
  "devDependencies": {
51
- "@trivago/prettier-plugin-sort-imports": "^3.1.1",
49
+ "@trivago/prettier-plugin-sort-imports": "^3.3.0",
52
50
  "cpy": "^9.0.1",
53
- "nodemon": "^2.0.16",
54
- "prettier": "^2.5.0",
51
+ "nodemon": "^2.0.19",
52
+ "prettier": "^2.7.1",
55
53
  "rimraf": "^3.0.2",
56
- "ts-node": "^10.7.0",
57
- "vite": "^2.7.10"
54
+ "ts-node": "^10.9.1",
55
+ "vite": "^3.0.4"
58
56
  }
59
57
  }