marko 5.25.8 → 5.25.10

package/README.md

@@ -9,6 +9,7 @@
 [![Continuous Integration status](https://github.com/marko-js/marko/actions/workflows/ci.yml/badge.svg)](https://github.com/marko-js/marko/actions/workflows/ci.yml)
 [![Code coverage %](https://codecov.io/gh/marko-js/marko/branch/master/graph/badge.svg)](https://codecov.io/gh/marko-js/marko)
 [![# of monthly downloads](https://img.shields.io/npm/dm/marko.svg)](https://npm-stat.com/charts.html?package=marko)
+[![OpenSSF Best Practices](https://bestpractices.coreinfrastructure.org/projects/7029/badge)](https://bestpractices.coreinfrastructure.org/projects/7029)
 
 [Docs](https://markojs.com/docs/getting-started/) ∙ [Try Online](https://markojs.com/try-online/) ∙ [Contribute](#contributors) ∙ [Get Support](#community--support)
 

package/docs/syntax.md

@@ -419,7 +419,7 @@ import componentB from "<component-b>";
 > </>
 > ```
 
-> **Note:** You cannot reference a Marko custom tag using a name string:
+> **Note:** You **cannot** reference a Marko custom tag or macro using a name string:
 >
 > _Marko Source:_
 >

package/docs/typescript.md

@@ -200,9 +200,9 @@ _index.marko_
 </for-by-two>
 ```
 
-### Extending a native tag type
+### Extending native tag types within a Marko tag
 
-The types for native tags are accessed via the global `Marko.NativeTags` type. Here's an example of a component that adds a feature to the `button` element:
+The types for native tags are accessed via the global `Marko.Input` type. Here's an example of a component that extends the `button` html tag:
 
 _color-button.marko_
 
@@ -219,6 +219,49 @@ $ const { color, renderBody, ...restOfInput } = input;
 </button>
 ```
 
+### Registering a new native tag (eg for custom elements).
+
+```ts
+interface MyCustomElementAttributes {
+  // ...
+}
+
+declare global {
+  namespace Marko {
+    namespace NativeTags {
+      // By adding this entry, you can now use `my-custom-element` as a native html tag.
+      "my-custom-element": MyCustomElementAttributes
+    }
+  }
+}
+```
+
+### Registering new "global" HTML Attributes
+
+```ts
+declare global {
+  namespace Marko {
+    interface HTMLAttributes {
+      "my-non-standard-attribute"?: string; // Adds this attribute as available on all HTML tags.
+    }
+  }
+}
+```
+
+### Registering CSS Properties (eg for custom properties)
+
+```ts
+declare global {
+  namespace Marko {
+    namespace CSS {
+      interface Properties {
+        "--foo"?: string; // adds a support for a custom `--foo` css property.
+      }
+    }
+  }
+}
+```
+
 ## TypeScript Syntax in `.marko`
 
 Any [JavaScript expression in Marko](./syntax.md#inline-javascript) can also be written as a TypeScript expression.
@@ -358,45 +401,7 @@ _components/color-rotate-button/index.marko_
 </button>
 ```
 
-## Extend Native Tags (for custom elements)
-
-```ts
-interface MyCustomElementAttributes {
-  // ...
-}
-
-declare global {
-  namespace Marko {
-    namespace NativeTags {
-      // By adding this entry, you can now use `my-custom-element` as a native html tag.
-      "my-custom-element": MyCustomElementAttributes
-    }
-  }
-}
-```
-
-## Extending the "global" HTML Attributes
+# CI Type Checking
 
-```ts
-declare global {
-  namespace Marko {
-    interface HTMLAttributes {
-      "my-non-standard-attribute"?: string; // Adds this attribute as available on all HTML tags.
-    }
-  }
-}
-```
-
-## Extending CSS Properties (for custom properties)
-
-```ts
-declare global {
-  namespace Marko {
-    namespace CSS {
-      interface Properties {
-        "--foo"?: string; // adds a support for a custom `--foo` css property.
-      }
-    }
-  }
-}
-```
+For type checking Marko files outside of your editor there is the ["@marko/type-check" cli](https://github.com/marko-js/language-server/tree/main/packages/type-check).
+Check out the CLI documentation for more information.

package/index.d.ts

@@ -364,5 +364,12 @@ declare global {
           | Body<any, infer Return>
       ? Return
       : never;
+
+    /** @deprecated @see {@link Marko.Input} */
+    export type NativeTagInput<Name extends keyof NativeTags> =
+      NativeTags[Name]["input"];
+    /** @deprecated @see {@link Marko.Return} */
+    export type NativeTagReturn<Name extends keyof NativeTags> =
+      NativeTags[Name]["return"];
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "marko",
-    "version": "5.25.8",
+    "version": "5.25.10",
     "license": "MIT",
     "description": "UI Components + streaming, async, high performance, HTML templating for Node.js and the browser.",
     "dependencies": {

package/tags-html.d.ts

@@ -2303,14 +2303,25 @@ declare global {
       key?: AttrString;
 
       /**
-       * Tells Marko to avoid updating the element or it's contents (excluding custom tags which may rerender independently).
+       * Tells Marko to avoid updating the element or its contents (excluding custom tags which may rerender independently).
        */
       "no-update"?: AttrBoolean;
 
       /**
-       * Tells Marko to avoid updating an elements contents (excluding custom tags which may rerender independently).
+       * Tells Marko to avoid updating an element's contents (excluding custom tags which may rerender independently). Used instead of no-update when runtime functionality is needed.
        */
       "no-update-if"?: AttrBoolean;
+
+      /**
+       * Tells Marko to avoid updating an element's body.
+       */
+      "no-update-body"?: AttrBoolean;
+
+      /**
+       * Tells Marko to avoid updating an element's body. Used instead of no-update-body when runtime functionality is needed.
+       * @see https://markojs.com/docs/syntax/#conditional-rendering
+       */
+      "no-update-body-if"?: AttrBoolean;
     }
 
     interface HTMLAttributes<T extends Element = Element>