marko 5.25.7 → 5.25.9

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.7",
+    "version": "5.25.9",
     "license": "MIT",
     "description": "UI Components + streaming, async, high performance, HTML templating for Node.js and the browser.",
     "dependencies": {

package/tags-html.d.ts

@@ -1050,7 +1050,7 @@ declare global {
          * Specifies whether the input field should have autocomplete enabled or disabled.
          * @see https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-autocomplete
          */
-        autocomplete?: AttrOnOff;
+        autocomplete?: AttrAutoComplete;
 
         /**
          * Indicates whether a file input should use a specific capture method.
@@ -1132,7 +1132,7 @@ declare global {
          * The maximum allowed value for the input.
          * @see https://html.spec.whatwg.org/multipage/input.html#attr-input-max
          */
-        max?: AttrString;
+        max?: AttrStringOrNumber;
 
         /**
          * The maximum number of characters allowed in the input.
@@ -1144,7 +1144,7 @@ declare global {
          * The minimum allowed value for the input.
          * @see https://html.spec.whatwg.org/multipage/input.html#attr-input-min
          */
-        min?: AttrString;
+        min?: AttrStringOrNumber;
 
         /**
          * The minimum number of characters required in the input.
@@ -1175,7 +1175,7 @@ declare global {
          * A short hint to display in the input field before the user enters a value.
          * @see https://html.spec.whatwg.org/multipage/input.html#attr-input-placeholder
          */
-        placeholder?: AttrString;
+        placeholder?: AttrStringOrNumber;
 
         /**
          * Specifies the target element for the popover.
@@ -1217,7 +1217,7 @@ declare global {
          * Specifies the allowed number intervals for the input value.
          * @see https://html.spec.whatwg.org/multipage/input.html#attr-input-step
          */
-        step?: AttrString;
+        step?: AttrStringOrNumber;
 
         /**
          * Controls the data type (and associated control) of the element.
@@ -1779,7 +1779,7 @@ declare global {
          * Controls whether the browser should automatically complete the value for the select.
          * @see https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-autocomplete
          */
-        autocomplete?: AttrOnOff;
+        autocomplete?: AttrAutoComplete;
 
         /**
          * Indicates whether the select element should be disabled or not.
@@ -1987,7 +1987,7 @@ declare global {
          * Helps browsers autofill the user's input based on previous entries.
          * @see https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-autocomplete
          */
-        autocomplete?: AttrOnOff;
+        autocomplete?: AttrAutoComplete;
 
         /**
          * (Safari only). Controls the autocorrect behavior of the <textarea> element.
@@ -3749,33 +3749,60 @@ type AttrBooleanString = AttrMissing | "false" | "true";
 type AttrYesNoString = AttrMissing | "no" | "yes";
 type AttrTriState = AttrBooleanString | "mixed";
 type AttrOnOff = AttrMissing | "on" | "off";
+type AttrAutoComplete =
+  | AttrOnOff
+  | "shipping"
+  | "billing"
+  | "name"
+  | "honorific-prefix"
+  | "given-name"
+  | "additional-name"
+  | "family-name"
+  | "honorific-suffix"
+  | "nickname"
+  | "username"
+  | "new-password"
+  | "current-password"
+  | "one-time-code"
+  | "organization-title"
+  | "organization"
+  | "street-address"
+  | "address-line1"
+  | "address-line2"
+  | "address-line3"
+  | "address-level4"
+  | "address-level3"
+  | "address-level2"
+  | "address-level1"
+  | "country"
+  | "country-name"
+  | "postal-code"
+  | "cc-name"
+  | "cc-given-name"
+  | "cc-additional-name"
+  | "cc-family-name"
+  | "cc-number"
+  | "cc-exp"
+  | "cc-exp-month"
+  | "cc-exp-year"
+  | "cc-csc"
+  | "cc-type"
+  | "transaction-currency"
+  | "transaction-amount"
+  | "language"
+  | "bday"
+  | "bday-day"
+  | "bday-month"
+  | "bday-year"
+  | "sex"
+  | "url"
+  | "photo"
+  | "home"
+  | "work"
+  | "mobile"
+  | "fax"
+  | "pager"
+  | (string & {});
 type Tag<Input> = Input extends Marko.HTMLAttributes<infer Element>
   ? Marko.NativeTag<Input, Element>
   : never;
-type UpperCaseChar =
-  | "A"
-  | "B"
-  | "C"
-  | "D"
-  | "E"
-  | "F"
-  | "G"
-  | "H"
-  | "I"
-  | "J"
-  | "K"
-  | "L"
-  | "M"
-  | "N"
-  | "O"
-  | "P"
-  | "Q"
-  | "R"
-  | "S"
-  | "T"
-  | "U"
-  | "V"
-  | "W"
-  | "X"
-  | "Y"
-  | "Z";