marko 6.0.0-3.8 → 6.0.0-next.3.15

package/dist/translator/index.js

@@ -33,6 +33,8 @@ __export(translator_exports, {
   analyze: () => analyze,
   getRuntimeEntryFiles: () => getRuntimeEntryFiles,
   internalEntryBuilder: () => entry_builder_default,
+  preferAPI: () => preferAPI,
+  tagDiscoveryDirs: () => tagDiscoveryDirs,
   taglibs: () => taglibs,
   transform: () => transform,
   translate: () => translate
@@ -669,6 +671,7 @@ function analyzeTagNameType(tag) {
       } else if (childFile.ast.program.extra.featureType === "class") {
         extra.tagNameType = 2 /* DynamicTag */;
         extra.featureType = "class";
+        (currentProgramPath.node.extra ??= {}).needsCompat = true;
       }
     }
   }
@@ -765,7 +768,7 @@ function startSection(path4) {
       "name"
     );
     const sectionName = path4.isProgram() ? "" : currentProgramPath.scope.generateUid(
-      sectionNamePath.toString() + "Body"
+      sectionNamePath.toString() + "_content"
     );
     const programExtra = path4.hub.file.path.node.extra ??= {};
     const sections = programExtra.sections ??= [];
@@ -1586,9 +1589,6 @@ function isRegisteredFnExtra(extra) {
   return isReferencedExtra(extra) && extra.registerId !== void 0;
 }
 
-// src/translator/visitors/program/dom.ts
-var import_compiler20 = require("@marko/compiler");
-
 // src/translator/util/runtime.ts
 var import_compiler8 = require("@marko/compiler");
 var import_babel_utils8 = require("@marko/compiler/babel-utils");
@@ -2038,6 +2038,13 @@ function filterArguments(args) {
   }
   return filteredArgs;
 }
+function getCompatRuntimeFile() {
+  const markoOpts = getMarkoOpts();
+  return `marko/src/runtime/helpers/tags-compat/${isOutputHTML() ? "html" : "dom"}${markoOpts.optimize ? "" : "-debug"}.${markoOpts.modules === "esm" ? "mjs" : "js"}`;
+}
+
+// src/translator/visitors/program/dom.ts
+var import_compiler20 = require("@marko/compiler");
 
 // src/translator/util/signals.ts
 var import_compiler19 = require("@marko/compiler");
@@ -3815,6 +3822,19 @@ var program_default = {
       } else {
         dom_default.translate.exit(program);
       }
+      if (program.node.extra?.needsCompat) {
+        const compatFile = getCompatRuntimeFile();
+        const body = [void 0];
+        for (const child of program.node.body) {
+          if (child.type === "ImportDeclaration" && child.source.value === compatFile) {
+            body[0] = child;
+          } else {
+            body.push(child);
+          }
+        }
+        body[0] ??= import_compiler22.types.importDeclaration([], import_compiler22.types.stringLiteral(compatFile));
+        program.node.body = body;
+      }
       currentProgramPath = previousProgramPath.get(currentProgramPath);
     }
   }
@@ -5234,8 +5254,8 @@ function getConditionRoot(tag) {
 }
 
 // src/translator/util/translate-attrs.ts
-var renderBodyProps = /* @__PURE__ */ new WeakSet();
-function translateAttrs(tag, templateExports, statements = []) {
+var contentProps = /* @__PURE__ */ new WeakSet();
+function translateAttrs(tag, templateExports, statements = [], contentKey = "content") {
   const seen = /* @__PURE__ */ new Set();
   const properties = [];
   const attrTagLookup = tag.node.extra?.attributeTags;
@@ -5271,13 +5291,15 @@ function translateAttrs(tag, templateExports, statements = []) {
               i,
               attrTagLookup,
               statements,
-              templateExports
+              templateExports,
+              contentKey
             );
           } else {
             const translatedAttrTag = translateAttrs(
               child,
               templateExports?.[attrTagMeta.name]?.props,
-              statements
+              statements,
+              contentKey
             );
             if (attrTagMeta.repeated) {
               const prevProp = findObjectProperty(attrTagMeta.name, properties);
@@ -5316,22 +5338,23 @@ function translateAttrs(tag, templateExports, statements = []) {
             i,
             attrTagLookup,
             statements,
-            templateExports
+            templateExports,
+            contentKey
           );
         }
       }
     }
   }
-  if (!seen.has("renderBody") && usesExport(templateExports, "renderBody")) {
-    seen.add("renderBody");
-    const renderBodyExpression = buildRenderBody(tag.get("body"));
-    if (renderBodyExpression) {
-      const renderBodyProp = import_compiler29.types.objectProperty(
-        import_compiler29.types.identifier("renderBody"),
-        renderBodyExpression
+  if (!seen.has(contentKey) && usesExport(templateExports, contentKey)) {
+    seen.add(contentKey);
+    const contentExpression = buildContent(tag.get("body"));
+    if (contentExpression) {
+      const contentProp = import_compiler29.types.objectProperty(
+        import_compiler29.types.identifier(contentKey),
+        contentExpression
       );
-      renderBodyProps.add(renderBodyProp);
-      properties.push(renderBodyProp);
+      contentProps.add(contentProp);
+      properties.push(contentProp);
     }
   }
   const { attributes } = tag.node;
@@ -5348,14 +5371,14 @@ function translateAttrs(tag, templateExports, statements = []) {
   properties.reverse();
   return { properties, statements };
 }
-function getTranslatedRenderBodyProperty(props) {
+function getTranslatedBodyContentProperty(props) {
   for (const prop of props) {
-    if (renderBodyProps.has(prop)) {
+    if (contentProps.has(prop)) {
       return prop;
     }
   }
 }
-function addDynamicAttrTagStatements(attrTags2, index, attrTagLookup, statements, templateExports) {
+function addDynamicAttrTagStatements(attrTags2, index, attrTagLookup, statements, templateExports, contentKey = "content") {
   const tag = attrTags2[index];
   if (tag.isMarkoTag()) {
     if ((0, import_babel_utils17.isAttributeTag)(tag)) {
@@ -5364,7 +5387,8 @@ function addDynamicAttrTagStatements(attrTags2, index, attrTagLookup, statements
         const translatedAttrTag = translateAttrs(
           tag,
           templateExports?.[attrTagMeta.name]?.props,
-          statements
+          statements,
+          contentKey
         );
         if (attrTagMeta.repeated) {
           statements.push(
@@ -5403,7 +5427,8 @@ function addDynamicAttrTagStatements(attrTags2, index, attrTagLookup, statements
             index,
             attrTagLookup,
             statements,
-            templateExports
+            templateExports,
+            contentKey
           );
         case "for": {
           return translateForAttrTag(
@@ -5411,7 +5436,8 @@ function addDynamicAttrTagStatements(attrTags2, index, attrTagLookup, statements
             index,
             attrTagLookup,
             statements,
-            templateExports
+            templateExports,
+            contentKey
           );
         }
       }
@@ -5422,14 +5448,15 @@ function addDynamicAttrTagStatements(attrTags2, index, attrTagLookup, statements
 function propsToExpression(props) {
   return props.length === 1 && import_compiler29.types.isSpreadElement(props[0]) ? props[0].argument : import_compiler29.types.objectExpression(props);
 }
-function translateForAttrTag(attrTags2, index, attrTagLookup, statements, templateExports) {
+function translateForAttrTag(attrTags2, index, attrTagLookup, statements, templateExports, contentKey) {
   const forTag = attrTags2[index];
   const bodyStatements = [];
   addAllAttrTagsAsDynamic(
     forTag,
     attrTagLookup,
     bodyStatements,
-    templateExports
+    templateExports,
+    contentKey
   );
   statements.push(
     buildForRuntimeCall(
@@ -5441,7 +5468,7 @@ function translateForAttrTag(attrTags2, index, attrTagLookup, statements, templa
   );
   return index;
 }
-function translateIfAttrTag(attrTags2, index, attrTagLookup, statements, templateExports) {
+function translateIfAttrTag(attrTags2, index, attrTagLookup, statements, templateExports, contentKey) {
   const ifTag = attrTags2[index];
   const consequentStatements = [];
   let ifStatement = import_compiler29.types.ifStatement(
@@ -5453,7 +5480,8 @@ function translateIfAttrTag(attrTags2, index, attrTagLookup, statements, templat
     ifTag,
     attrTagLookup,
     consequentStatements,
-    templateExports
+    templateExports,
+    contentKey
   );
   let nextIndex = index + 1;
   while (nextIndex < attrTags2.length) {
@@ -5468,7 +5496,8 @@ function translateIfAttrTag(attrTags2, index, attrTagLookup, statements, templat
             nextTag,
             attrTagLookup,
             alternateStatements,
-            templateExports
+            templateExports,
+            contentKey
           );
           if (testValue) {
             ifStatement.alternate = ifStatement = import_compiler29.types.ifStatement(
@@ -5488,7 +5517,7 @@ function translateIfAttrTag(attrTags2, index, attrTagLookup, statements, templat
   }
   return nextIndex - 1;
 }
-function addAllAttrTagsAsDynamic(tag, attrTagLookup, statements, templateExports) {
+function addAllAttrTagsAsDynamic(tag, attrTagLookup, statements, templateExports, contentKey) {
   const attrTags2 = tag.node.body.attributeTags ? tag.get("body").get("body") : tag.get("attributeTags");
   for (let i = 0; i < attrTags2.length; i++) {
     i = addDynamicAttrTagStatements(
@@ -5496,7 +5525,8 @@ function addAllAttrTagsAsDynamic(tag, attrTagLookup, statements, templateExports
       i,
       attrTagLookup,
       statements,
-      templateExports
+      templateExports,
+      contentKey
     );
   }
 }
@@ -5527,7 +5557,7 @@ function getConditionTestValue({
 }) {
   return attributes.length === 1 ? attributes[0].value : void 0;
 }
-function buildRenderBody(body) {
+function buildContent(body) {
   const bodySection = body.node.extra?.section;
   if (bodySection) {
     if (isOutputHTML()) {
@@ -7329,9 +7359,7 @@ var script_default = {
     const { node } = tag;
     const { body } = node.body;
     if (body.length) {
-      const codePrefix = "async ()=>{";
-      const codeSuffix = "}";
-      let code = codePrefix;
+      let code = "";
       for (const child of body) {
         if (child.type !== "MarkoText") {
           throw tag.hub.file.hub.buildError(
@@ -7342,22 +7370,15 @@ var script_default = {
         }
         code += child.value;
       }
-      code += codeSuffix;
       const start = body[0]?.start;
       const end = body[body.length - 1]?.end;
-      const bodyExpression = (0, import_babel_utils30.parseExpression)(
-        tag.hub.file,
-        code,
-        start,
-        end,
-        codePrefix.length
-      );
-      bodyExpression.async = traverseContains(
-        bodyExpression.body,
-        isAwaitExpression
+      const bodyStatements = (0, import_babel_utils30.parseStatements)(tag.hub.file, code, start, end);
+      const valueFn = import_compiler41.types.arrowFunctionExpression(
+        [],
+        import_compiler41.types.blockStatement(bodyStatements),
+        traverseContains(bodyStatements, isAwaitExpression)
       );
-      bodyExpression.fromBody = true;
-      node.attributes.push(import_compiler41.types.markoAttribute("value", bodyExpression));
+      node.attributes.push(import_compiler41.types.markoAttribute("value", valueFn));
       node.body.body = [];
     }
   },
@@ -8190,21 +8211,21 @@ function translateHTML(tag) {
     statements: []
   };
   if (node.extra.tagNameNullable) {
-    const renderBodyProp = getTranslatedRenderBodyProperty(properties);
-    let renderBodyId = void 0;
-    if (renderBodyProp) {
-      const renderBodyExpression = renderBodyProp.value;
-      renderBodyProp.value = renderBodyId = tag.scope.generateUidIdentifier("renderBody");
-      const [renderBodyPath] = tag.insertBefore(
+    const contentProp = getTranslatedBodyContentProperty(properties);
+    let contentId = void 0;
+    if (contentProp) {
+      const contentExpression = contentProp.value;
+      contentProp.value = contentId = tag.scope.generateUidIdentifier("content");
+      const [contentPath] = tag.insertBefore(
         import_compiler49.types.variableDeclaration("const", [
           import_compiler49.types.variableDeclarator(
-            renderBodyId,
+            contentId,
             // TODO: only register if needed (child template analysis)
-            renderBodyExpression
+            contentExpression
           )
         ])
       );
-      renderBodyPath.skip();
+      contentPath.skip();
     }
     let renderTagExpr = callExpression(
       tagIdentifier,
@@ -8218,7 +8239,7 @@ function translateHTML(tag) {
       import_compiler49.types.ifStatement(
         tagIdentifier,
         import_compiler49.types.expressionStatement(renderTagExpr),
-        renderBodyId && callStatement(renderBodyId)
+        contentId && callStatement(contentId)
       )
     );
   } else if (tagVar) {
@@ -8577,26 +8598,26 @@ function writeAttrsToExports(tag, templateExport, importAlias, info) {
     }
   }
   const bodySection = tag.node.body.extra?.section;
-  if (bodySection && !seen.has("renderBody")) {
-    seen.add("renderBody");
-    if (templateExport.props.renderBody) {
-      const renderBodyExportIdentifier = (0, import_babel_utils37.importNamed)(
+  if (bodySection && !seen.has("content")) {
+    seen.add("content");
+    if (templateExport.props.content) {
+      const contentExportIdentifier = (0, import_babel_utils37.importNamed)(
         tag.hub.file,
         info.relativePath,
-        templateExport.props.renderBody.id,
-        `${importAlias}_renderBody`
+        templateExport.props.content.id,
+        `${importAlias}_content`
       );
       addValue(
         info.tagSection,
         void 0,
-        // TODO: pretty sure renderBody needs to have the reference group of it's param defaults.
-        identifierToSignal(renderBodyExportIdentifier),
+        // TODO: pretty sure content needs to have the reference group of it's param defaults.
+        identifierToSignal(contentExportIdentifier),
         import_compiler49.types.callExpression(import_compiler49.types.identifier(bodySection.name), [scopeIdentifier]),
         createScopeReadExpression(info.tagSection, info.childScopeBinding),
         callRuntime(
           "inChild",
           getScopeAccessorLiteral(info.childScopeBinding),
-          import_compiler49.types.identifier(renderBodyExportIdentifier.name)
+          import_compiler49.types.identifier(contentExportIdentifier.name)
         )
       );
     }
@@ -8748,6 +8769,7 @@ var dynamic_tag_default = {
       const extra = node.extra;
       const nodeRef2 = extra[kDOMBinding];
       const section = getSection(tag);
+      const isClassAPI = extra.featureType === "class";
       let tagExpression = node.name;
       if (import_compiler50.types.isStringLiteral(tagExpression)) {
         tagExpression = (0, import_babel_utils38.importDefault)(
@@ -8756,15 +8778,13 @@ var dynamic_tag_default = {
           tagExpression.value
         );
       }
-      if (extra.featureType === "class") {
-        const compatRuntimeFile = getCompatRuntimeFile(tag.hub.file.markoOpts);
-        (0, import_babel_utils38.importDefault)(tag.hub.file, compatRuntimeFile);
+      if (isClassAPI) {
         if (isOutputHTML()) {
           currentProgramPath.pushContainer(
             "body",
             import_compiler50.types.expressionStatement(
               import_compiler50.types.callExpression(
-                (0, import_babel_utils38.importNamed)(tag.hub.file, compatRuntimeFile, "s"),
+                (0, import_babel_utils38.importNamed)(tag.hub.file, getCompatRuntimeFile(), "s"),
                 [
                   import_compiler50.types.identifier(tagExpression.name),
                   import_compiler50.types.stringLiteral((0, import_babel_utils38.loadFileForTag)(tag).metadata.marko.id)
@@ -8785,7 +8805,12 @@ var dynamic_tag_default = {
           );
         }
       }
-      const { properties, statements } = translateAttrs(tag);
+      const { properties, statements } = translateAttrs(
+        tag,
+        void 0,
+        void 0,
+        isClassAPI ? "renderBody" : "content"
+      );
       const args = [];
       let hasMultipleArgs = false;
       if (node.arguments?.length) {
@@ -8797,10 +8822,10 @@ var dynamic_tag_default = {
           hasMultipleArgs = node.arguments.length > 1 || import_compiler50.types.isSpreadElement(node.arguments[0]);
         }
       } else {
-        const renderBodyProp = getTranslatedRenderBodyProperty(properties);
-        if (renderBodyProp) {
-          properties.splice(properties.indexOf(renderBodyProp), 1);
-          args.push(propsToExpression(properties), renderBodyProp.value);
+        const contentProp = getTranslatedBodyContentProperty(properties);
+        if (contentProp) {
+          properties.splice(properties.indexOf(contentProp), 1);
+          args.push(propsToExpression(properties), contentProp.value);
         } else {
           args.push(propsToExpression(properties));
         }
@@ -8981,9 +9006,6 @@ var dynamic_tag_default = {
     }
   }
 };
-function getCompatRuntimeFile(markoOpts) {
-  return `marko/src/runtime/helpers/tags-compat/${isOutputHTML() ? "html" : "dom"}${markoOpts.optimize ? "" : "-debug"}.${markoOpts.modules === "esm" ? "mjs" : "js"}`;
-}
 
 // src/translator/visitors/tag/index.ts
 var tag_default = {
@@ -9179,6 +9201,8 @@ var visitors = extractVisitors({
   MarkoScriptlet: scriptlet_default,
   MarkoComment: comment_default
 });
+var tagDiscoveryDirs = ["tags"];
+var preferAPI = "tags";
 var { transform, analyze, translate } = visitors;
 var taglibs = [
   [
@@ -9199,6 +9223,8 @@ function getRuntimeEntryFiles(output, optimize) {
   analyze,
   getRuntimeEntryFiles,
   internalEntryBuilder,
+  preferAPI,
+  tagDiscoveryDirs,
   taglibs,
   transform,
   translate

package/dist/translator/util/entry-builder.d.ts

@@ -1,6 +1,7 @@
 import { types as t } from "@marko/compiler";
 declare module "@marko/compiler/dist/types" {
     interface ProgramExtra {
+        needsCompat?: boolean;
         isInteractive?: boolean;
         hasInteractiveChild?: boolean;
     }

package/dist/translator/util/runtime.d.ts

@@ -12,4 +12,5 @@ export declare function getHTMLRuntime(): {
     escapeScript: typeof escapeScript;
     escapeStyle: typeof escapeStyle;
 };
+export declare function getCompatRuntimeFile(): string;
 export {};

package/dist/translator/util/translate-attrs.d.ts

@@ -1,12 +1,14 @@
 import { types as t } from "@marko/compiler";
 import { type TemplateExports } from "../visitors/program";
 import { type AttrTagLookup } from "./nested-attribute-tags";
-export declare function translateAttrs(tag: t.NodePath<t.MarkoTag>, templateExports?: TemplateExports, statements?: t.Statement[]): {
+type ContentKey = "renderBody" | "content";
+export declare function translateAttrs(tag: t.NodePath<t.MarkoTag>, templateExports?: TemplateExports, statements?: t.Statement[], contentKey?: ContentKey): {
     properties: (t.ObjectMethod | t.ObjectProperty | t.SpreadElement)[];
     statements: t.Statement[];
 };
-export declare function getTranslatedRenderBodyProperty(props: t.ObjectExpression["properties"]): (t.ObjectProperty & {
+export declare function getTranslatedBodyContentProperty(props: t.ObjectExpression["properties"]): (t.ObjectProperty & {
     value: t.Expression;
 }) | undefined;
-export declare function addDynamicAttrTagStatements(attrTags: t.NodePath<t.MarkoTag["attributeTags"][number]>[], index: number, attrTagLookup: AttrTagLookup, statements: t.Statement[], templateExports: TemplateExports): number;
+export declare function addDynamicAttrTagStatements(attrTags: t.NodePath<t.MarkoTag["attributeTags"][number]>[], index: number, attrTagLookup: AttrTagLookup, statements: t.Statement[], templateExports: TemplateExports, contentKey?: ContentKey): number;
 export declare function propsToExpression(props: t.ObjectExpression["properties"]): t.Expression;
+export {};

package/index.d.ts

@@ -0,0 +1,144 @@
+import "./tags-html";
+
+declare module "*.marko" {
+  const template: Marko.Template;
+  export default template;
+}
+
+declare global {
+  namespace NodeJS {
+    interface ReadableStream {}
+  }
+
+  namespace Marko {
+    /** A mutable global object for the current render. */
+    export interface Global {
+      [x: PropertyKey]: unknown;
+      /** An AbortSignal instance that, when aborted, stops further streamed content. */
+      signal?: AbortSignal;
+      /** A CSP Nonce to add to each script output from Marko. */
+      cspNonce?: string;
+      /** Used for rendering multiple Marko templates in a single hydrated page. */
+      renderId?: string;
+      /** Used to uniquely identify a instance of a Marko runtime. */
+      runtimeId?: string;
+      /** A list of globals that should be serialized to the browser. */
+      serializedGlobals?:
+        | (string | number)[]
+        | Record<string | number, boolean>;
+    }
+
+    export type TemplateInput<Input> = Input & {
+      /**  Data available within all rendered templates as `$global`. */
+      $global?: Global;
+    };
+
+    /** Body content created by a template. */
+    export interface Body<
+      in Params extends readonly any[] = [],
+      out Return = void,
+    > {}
+
+    /** Valid data types which can be passed in as a <${dynamic}/> tag name. */
+    export type Renderable =
+      | { content: Body<any, any> | Template | string }
+      | Body<any, any>
+      | Template
+      | string;
+
+    /** Extract the return tag type from body content. */
+    export type BodyReturnType<B> =
+      B extends Body<any, infer Return> ? Return : never;
+
+    /** Extract the tag parameter types received by body content. */
+    export type BodyParameters<B> =
+      B extends Body<infer Params, any> ? Params : never;
+
+    /** The top level api for a Marko Template. */
+    export abstract class Template<Input = unknown, Return = unknown> {
+      /**
+       * The folowing types are processed up by the @marko/language-tools
+       * and inlined into the compiled template.
+       *
+       * This is done to support generics on each of these methods
+       * until TypeScript supports higher kinded types.
+       *
+       * https://github.com/microsoft/TypeScript/issues/1213
+       */
+
+      /** @marko-overload-start */
+      /** Render the template to a string. */
+      abstract render(input: Marko.TemplateInput<Input>): Promise<string> &
+        AsyncIterable<string> & {
+          toReadable(): ReadableStream;
+          pipe(stream: {
+            write(chunk: string): unknown;
+            end(): unknown;
+            flush?(): void;
+          }): void;
+          toString(): string;
+        };
+
+      /** Render and attach the template to a DOM node. */
+      abstract mount(
+        input: Marko.TemplateInput<Input>,
+        reference: ParentNode & Node,
+        position?: "afterbegin" | "afterend" | "beforebegin" | "beforeend",
+      ): {
+        update(input: Marko.TemplateInput<Input>): void;
+        destroy(): void;
+      };
+      /** @marko-overload-end */
+    }
+
+    export type AttrTag<T> = T & {
+      [Symbol.iterator](): Iterator<T>;
+    };
+
+    export interface NativeTag<
+      Input extends Record<string, any>,
+      Return extends Element,
+    > {
+      input: Input;
+      return: { value: () => Return };
+    }
+    export interface NativeTags {
+      [name: string]: NativeTag<Record<string, any>, Element>;
+    }
+
+    export type Input<Name> = 0 extends 1 & Name
+      ? any
+      : Name extends string
+        ? Name extends keyof NativeTags
+          ? NativeTags[Name]["input"]
+          : Record<string, unknown>
+        : Name extends
+              | Template<infer Input, any>
+              | { _(): () => (input: infer Input) => any }
+          ? Input
+          : Name extends Body<infer Args, any>
+            ? Args extends {
+                length: infer Length;
+              }
+              ? number extends Length
+                ? Args[0] | undefined
+                : 0 extends Length
+                  ? undefined
+                  : Args[0]
+              : never
+            : never;
+
+    export type Return<Name> = 0 extends 1 & Name
+      ? any
+      : Name extends string
+        ? Name extends keyof NativeTags
+          ? NativeTags[Name]["return"]
+          : () => Element
+        : Name extends
+              | { _(): () => (input: any) => { return: infer Return } }
+              | Template<any, infer Return>
+              | Body<any, infer Return>
+          ? Return
+          : never;
+  }
+}