chore: improve typescript support

.changeset/healthy-pans-remain.md

@@ -0,0 +1,7 @@
+---
+"@marko/compiler": patch
+"marko": patch
+"@marko/translator-default": patch
+---
+
+Improve type definitions.

packages/compiler/src/taglib/loader/loadTagFromProps.js

@@ -328,9 +328,8 @@ class TagLoader {
    * typescript / jsdoc types.
    */
   types(value) {
-    var tag = this.tag;
-    var dirname = this.dirname;
-    tag.types = nodePath.resolve(dirname, value);
+    this.tag.types =
+      value[0] === "." ? nodePath.resolve(this.dirname, value) : value;
   }
 
   /**

packages/marko/index.d.ts

@@ -78,28 +78,25 @@ declare namespace Marko {
   > {}
 
   /** Valid data types which can be passed in as a <${dynamic}/> tag name. */
-  export type DynamicTagName =
-    | {
-        renderBody?: Body<any, any> | Template | string | void | false;
-      }
+  export type Renderable =
+    | { renderBody: Body<any, any> | Template | string; }
     | Body<any, any>
     | Template
-    | string
-    | void
-    | false;
+    | string;
 
   /** Extract the return tag type from a renderBody. */
   export type BodyReturnType<B> = B extends Body<any, infer Return>
     ? Return
     : never;
 
   /** Extract the tag parameter types received by a renderBody. */
-  export type BodyParamaters<B> = B extends Body<infer Params, any>
+  export type BodyParameters<B> = B extends Body<infer Params, any>
     ? Params
     : never;
 
-  export abstract class Component<
-    Input extends Record<PropertyKey, any> = Record<PropertyKey, any>
+  export class Component<
+    Input extends Record<PropertyKey, any> = Record<PropertyKey, any>,
+    State extends undefined | null | Record<PropertyKey, any> = undefined | null | Record<PropertyKey, any>
   > implements Emitter
   {
     /** A unique id for this instance. */
@@ -111,7 +108,7 @@ declare namespace Marko {
     /** @deprecated */
     public readonly els: Element[];
     /** Mutable state that when changed causes a rerender. */
-    abstract state: undefined | null | Record<PropertyKey, any>;
+    abstract state: State;
 
     /** Returns the amount of event handlers listening to a specific event. */
     listenerCount(eventName: PropertyKey): number;
@@ -197,20 +194,20 @@ declare namespace Marko {
     /** Replaces the children of an existing DOM element with the dom for the current instance. */
     replaceChildrenOf(target: ParentNode): this;
     /** Called when the component is firsted created. */
-    abstract onCreate?(input: this["input"], out: Marko.Out): void;
+    onCreate?(input: this["input"], out: Marko.Out): void;
     /** Called every time the component receives input from it's parent. */
-    abstract onInput?(
+    onInput?(
       input: this["input"],
       out: Marko.Out
     ): void | this["input"];
     /** Called after a component has successfully rendered, but before it's update has been applied to the dom. */
-    abstract onRender?(out: Marko.Out): void;
+    onRender?(out: Marko.Out): void;
     /** Called after the first time the component renders and is attached to the dom. */
-    abstract onMount?(): void;
+    onMount?(): void;
     /** Called when a components render has been applied to the DOM (excluding when it is initially mounted). */
-    abstract onUpdate?(): void;
+    onUpdate?(): void;
     /** Called when a component is destroyed and removed from the dom. */
-    abstract onDestroy?(): void;
+    onDestroy?(): void;
   }
 
   /** The top level api for a Marko Template. */

packages/marko/src/core-tags/core/await/index.marko

@@ -1,13 +1,13 @@
 /**
  * @template T
  * @typedef {{
- *   value?: T;
- *   then?: Marko.Body<[Awaited<T>], void>;
- *   catch?: Marko.Body<[unknown], void>;
- *   placeholder?: Marko.Body<[], void>;
- *   client-reorder?: boolean;
+ *   value?: readonly [T];
+ *   then?: { renderBody: Marko.Body<[Awaited<T>], void> };
+ *   catch?: { renderBody: Marko.Body<[unknown], void> };
+ *   placeholder?: { renderBody: Marko.Body<[], void> };
+ *   "client-reorder"?: boolean;
  *   name?: string;
  *   timeout?: number;
- *   show-after?: string;
+ *   "show-after"?: string;
  * }} Input
  */

packages/marko/src/runtime/components/entry/index-browser.js

@@ -11,3 +11,7 @@ exports.register = function (id, component) {
     return component;
   });
 };
+
+window.Marko = {
+  Component: function () {}
+};

packages/marko/src/runtime/components/entry/index.js

@@ -271,3 +271,7 @@ exports.writeInitComponentsCode = writeInitComponentsCode;
 exports.getRenderedComponents = function (out) {
   return warp10.stringifyPrepare(getInitComponentsDataFromOut(out));
 };
+
+globalThis.Marko = {
+  Component: function () {}
+};