Change JSDoc comments to use consistent TypeScript syntax

Author: efoken

jsx-runtime.js

@@ -6,7 +6,6 @@ export { Fragment } from "./src/core.js";
  * @param {any} type
  * @param {any} props
  * @param {any} [key]
- * @returns
  */
 export const jsx = (type, props, key) => {
     if (props == undefined) {

src/css.js

@@ -4,14 +4,14 @@ import { options } from "./options.js";
 /**
  * It is used only if the browser supports adoptedStyleSheets.
  * caches the CSSStyleSheet using the css as a reference to the instance
- * @type {{[id:string]:import("core").Sheet}}
+ * @type {{ [id: string]: import("core").Sheet }}
  */
 const SHEETS = {};
 
 /**
  * Create a Style from a string
  * @param {TemplateStringsArray} template
- * @param {...any} args
+ * @param {any[]} args
  */
 export function css(template, ...args) {
     const cssText = (template.raw || template).reduce(

src/element/custom-element.js

@@ -8,8 +8,8 @@ export { Any, createType } from "./set-prototype.js";
 let ID = 0;
 
 /**
- * @param {Element & {dataset?:object}} node
- * @returns {string|number}
+ * @param {Element & { dataset?: object }} node
+ * @returns {string | number}
  */
 const getHydrateId = (node) => {
     const id = (node?.dataset || {})?.hydrate || "";
@@ -24,11 +24,11 @@ const getHydrateId = (node) => {
  */
 export const c = (component, base) => {
     /**
-     * @type {import("./set-prototype").Attrs}
+     * @type {import("./set-prototype.js").Attrs}
      */
     const attrs = {};
     /**
-     * @type {import("./set-prototype").Values}
+     * @type {import("./set-prototype.js").Values}
      */
     const values = {};
 
@@ -194,8 +194,8 @@ export const c = (component, base) => {
             /**
              * @this {import("dom").AtomicoThisInternal}
              * @param {string} attr
-             * @param {(string|null)} oldValue
-             * @param {(string|null)} value
+             * @param {string | null} oldValue
+             * @param {string | null} value
              */
             attributeChangedCallback(attr, oldValue, value) {
                 if (attrs[attr]) {

src/element/set-prototype.js

@@ -2,6 +2,7 @@ import { isFunction, isObject } from "../utils.js";
 import { PropError } from "./errors.js";
 
 export const CUSTOM_TYPE_NAME = "Custom";
+
 /**
  * The Any type avoids the validation of prop types
  * @type {null}
@@ -16,11 +17,11 @@ const TRUE_VALUES = { true: 1, "": 1, 1: 1 };
 /**
  * Constructs the setter and getter of the associated property
  * only if it is not defined in the prototype
- * @param {Object} prototype - CustomElement prototype
- * @param {string} prop - Name of the reactive property to associate with the customElement
- * @param {any} schema - Structure to be evaluated for the definition of the property
- * @param {Attrs} attrs - Dictionary of attributes to properties
- * @param {Values} values - Values to initialize the customElements
+ * @param {object} prototype CustomElement prototype
+ * @param {string} prop Name of the reactive property to associate with the customElement
+ * @param {any} schema Structure to be evaluated for the definition of the property
+ * @param {Attrs} attrs Dictionary of attributes to properties
+ * @param {Values} values Values to initialize the customElements
  */
 export function setPrototype(prototype, prop, schema, attrs, values) {
     /** @type {Schema} */
@@ -103,8 +104,8 @@ export function setPrototype(prototype, prop, schema, attrs, values) {
 
 /**
  * Dispatch an event
- * @param {Element} node - DOM node to dispatch the event
- * @param {InternalEvent & InternalEventInit} event - Event to dispatch on node
+ * @param {Element} node DOM node to dispatch the event
+ * @param {InternalEvent & InternalEventInit} event Event to dispatch on node
  */
 export const dispatchEvent = (
     node,
@@ -113,7 +114,7 @@ export const dispatchEvent = (
 
 /**
  * Transform a Camel Case string to a Kebab case
- * @param {string} prop - string to apply the format
+ * @param {string} prop string to apply the format
  * @returns {string}
  */
 export const getAttr = (prop) => prop.replace(/([A-Z])/g, "-$1").toLowerCase();
@@ -160,9 +161,8 @@ export const transformValue = (type, value) =>
           new type(value);
 
 /**
- * @param {import("schema").TypeCustom<(...args:any)=>any>} TypeCustom
- * @param {*} value
- * @returns
+ * @param {import("schema").TypeCustom<(...args: any[]) => any>} TypeCustom
+ * @param {any} value
  */
 export const mapValue = ({ map }, value) => {
     try {
@@ -176,7 +176,7 @@ export const mapValue = ({ map }, value) => {
  * Filter the values based on their type
  * @param {any} type
  * @param {any} value
- * @returns {{error?:boolean,value:any}}
+ * @returns {{ error?: boolean, value: any }}
  */
 export const filterValue = (type, value) =>
     type == null || value == null
@@ -202,9 +202,9 @@ export const filterValue = (type, value) =>
         : { value, error: true };
 
 /**
- * @param {(...args:any[])=>any} map
- * @param {(...args:any[])=>any} [serialize]
- * @returns {import("schema").TypeCustom<(...args:any)=>any>}
+ * @param {(...args: any[]) => any} map
+ * @param {(...args: any[]) => any} [serialize]
+ * @returns {import("schema").TypeCustom<(...args: any[]) => any>}
  */
 export const createType = (map, serialize) => ({
     name: CUSTOM_TYPE_NAME,
@@ -218,33 +218,33 @@ export const createType = (map, serialize) => ({
  */
 
 /**
- * @typedef {Object} InternalEventInit
- * @property {typeof CustomEvent|typeof Event} [base] - Optional constructor to initialize the event
- * @property {boolean} [bubbles] - indicating whether the event bubbles. The default is false.
- * @property {boolean} [cancelable] - indicating whether the event will trigger listeners outside of a shadow root.
- * @property {boolean} [composed] - indicating whether the event will trigger listeners outside of a shadow root.
- * @property {any} [detail] - indicating whether the event will trigger listeners outside of a shadow root.
+ * @typedef {object} InternalEventInit
+ * @property {typeof CustomEvent | typeof Event} [base] Optional constructor to initialize the event
+ * @property {boolean} [bubbles] indicating whether the event bubbles. The default is false.
+ * @property {boolean} [cancelable] indicating whether the event will trigger listeners outside of a shadow root.
+ * @property {boolean} [composed] indicating whether the event will trigger listeners outside of a shadow root.
+ * @property {any} [detail] indicating whether the event will trigger listeners outside of a shadow root.
  */
 
 /**
  * Interface used by dispatchEvent to automate event firing
- * @typedef {Object} InternalEvent
- * @property {string} type - type of event to dispatch.
+ * @typedef {object} InternalEvent
+ * @property {string} type type of event to dispatch.
  */
 
 /**
- * @typedef {Object<string, {prop:string,type:Function}>} Attrs
+ * @typedef {{ [attr: string]: { prop: string, type: Function } }} Attrs
  */
 
 /**
- * @typedef {Object<string, any>} Values
+ * @typedef {{ [prop: string]: any }} Values
  */
 
 /**
- * @typedef {Object} Schema
- * @property {any} [type] - data type to be worked as property and attribute
- * @property {string} [attr] - allows customizing the name as an attribute by skipping the camelCase format
- * @property {boolean} [reflect] - reflects property as attribute of node
- * @property {InternalEvent & InternalEventInit} [event] - Allows to emit an event every time the property changes
- * @property {any} [value] - defines a default value when instantiating the component
+ * @typedef {object} Schema
+ * @property {any} [type] data type to be worked as property and attribute
+ * @property {string} [attr] allows customizing the name as an attribute by skipping the camelCase format
+ * @property {boolean} [reflect] reflects property as attribute of node
+ * @property {InternalEvent & InternalEventInit} [event] Allows to emit an event every time the property changes
+ * @property {any} [value] defines a default value when instantiating the component
  */

src/hooks/create-hooks.js

@@ -5,7 +5,7 @@ const ID = Symbol.for("atomico.hooks");
 globalThis[ID] = globalThis[ID] || {};
 
 /**
- * @type {{c:import("internal/hooks").SCOPE}}
+ * @type {{ c: import("internal/hooks").SCOPE }}
  */
 let SCOPE = globalThis[ID];
 

src/hooks/custom-hooks/use-suspense.js

@@ -58,7 +58,7 @@ export const useSuspense = (fps = 8) => {
     const [status, setStatus] = useState({ pending: true });
 
     /**
-     * @param {()=>any} callback
+     * @param {() => any} callback
      * @param {number} deep
      */
     const delay = (callback, deep) =>

src/hooks/use-effect.js

@@ -9,7 +9,7 @@ import { isEqualArray, isFunction } from "../utils.js";
 /**
  * useLayoutEffect and useEffect have a similar algorithm
  * in that the position of the callback varies.
- * @param {IdLayoutEffect|IdEffect|IdInsertionEffect} type
+ * @param {IdLayoutEffect | IdEffect | IdInsertionEffect} type
  * @return {import("internal/hooks").UseAnyEffect}
  */
 const createEffect = (type) => (currentEffect, currentArgs) => {

src/render.js

@@ -56,6 +56,7 @@ export const Fragment = () => {};
 export function RENDER(node, id, hydrate) {
     return diff(this, node, id, hydrate);
 }
+
 /**
  * @type {import("vnode").H}
  */
@@ -226,7 +227,7 @@ function diff(newVnode, node, id = ID, hydrate = false, isSvg = false) {
     return node;
 }
 /**
- * @param {Element|ShadowRoot} parent
+ * @param {Element | ShadowRoot} parent
  * @param {boolean} [hydrate]
  * @return {import("vnode").Fragment}
  */
@@ -269,7 +270,7 @@ function createFragment(parent, hydrate) {
  * it allows rendering the children of the virtual-dom
  * @param {any} children
  * @param {import("vnode").Fragment} fragment
- * @param {Element|ShadowRoot} parent
+ * @param {Element | ShadowRoot} parent
  * @param {any} id
  * @param {boolean} [hydrate]
  * @param {boolean} [isSvg]
@@ -379,8 +380,8 @@ export function renderChildren(children, fragment, parent, id, hydrate, isSvg) {
 
 /**
  * @param {Element} node
- * @param {Object} props
- * @param {Object} nextProps
+ * @param {object} props
+ * @param {object} nextProps
  * @param {boolean} isSvg
  * @param {import("vnode").Handlers} handlers
  */
@@ -515,7 +516,7 @@ export function setEvent(node, type, nextHandler, handlers) {
 }
 
 /**
- * @param {*} style
+ * @param {any} style
  * @param {string} key
  * @param {string} value
  */

src/tests/internal/set-prototype.test.js

@@ -151,7 +151,7 @@ describe("internal: setPrototype", () => {
     it("declare basic", () => {
         class MyElement extends HTMLElement {}
         /**
-         * @type {Object<string,string>}
+         * @type {import("../../element/set-prototype.js").Attrs}
          */
         const attrs = {};
         const values = {};
@@ -164,7 +164,7 @@ describe("internal: setPrototype", () => {
     it("declare shema", () => {
         class MyElement extends HTMLElement {}
         /**
-         * @type {Object<string,string>}
+         * @type {import("../../element/set-prototype.js").Attrs}
          */
         const attrs = {};
         const values = {};

src/tests/render-children.test.js

@@ -2,7 +2,7 @@ import { expect } from "@esm-bundle/chai";
 import { renderChildren } from "../render.js";
 import { html } from "../../html.js";
 /**
- * @param {import("../render").Fragment} fragment
+ * @param {import("vnode").Fragment} fragment
  * @returns {Node[]}
  */
 const fragmentToChildNodes = ({ markStart, markEnd }) => {
@@ -13,14 +13,12 @@ const fragmentToChildNodes = ({ markStart, markEnd }) => {
     return list;
 };
 /**
- *
  * @param {number} min
  * @param {number} max
  * @returns {number}
  */
 const random = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
 /**
- *
  * @param {number} size
  * @returns {number[]}
  */
@@ -79,7 +77,6 @@ describe("src/render#children", () => {
         const id = Symbol("id");
         let fragment;
         /**
-         *
          * @param {number} size
          */
         let update = (size) => {