@marko/language-tools 2.0.11 → 2.1.0

package/dist/extractors/html/index.d.ts

@@ -0,0 +1,10 @@
+import { Parsed } from "../../parser";
+export declare function extractHTML(parsed: Parsed): {
+    extracted: import("../../util/extractor").Extracted;
+    nodeDetails: {
+        [id: string]: {
+            hasDynamicAttrs: boolean;
+            hasDynamicBody: boolean;
+        };
+    };
+};

package/dist/extractors/html/keywords.d.ts

@@ -0,0 +1,8 @@
+export declare function isHTMLTag(tag: string): boolean;
+export declare enum AttributeValueType {
+    True = 0,
+    Literal = 1,
+    QuotedString = 2,
+    Dynamic = 3
+}
+export declare function getAttributeValueType(value: string | undefined): AttributeValueType | undefined;

package/dist/index.d.ts

@@ -5,4 +5,5 @@ export * as Project from "./util/project";
 export * as Processors from "./processors";
 export { getExt } from "./util/get-ext";
 export { isDefinitionFile } from "./util/is-definition-file";
+export * from "./extractors/html";
 export { type Extracted } from "./util/extractor";

package/dist/index.js

@@ -35,6 +35,7 @@ __export(src_exports, {
   Project: () => project_exports,
   ScriptLang: () => ScriptLang,
   UNFINISHED: () => UNFINISHED,
+  extractHTML: () => extractHTML,
   extractScript: () => extractScript,
   extractStyle: () => extractStyle,
   getExt: () => getExt,
@@ -3319,6 +3320,170 @@ function has(fileName) {
 function isDefinitionFile(fileName) {
   return /\.d\.[^.]+$/.test(fileName);
 }
+
+// src/extractors/html/keywords.ts
+var builtinTagsRegex = /^(?:a(?:(?:bbr|cronym|ddress|pplet|r(?:ea|ticle)|side|udio))?|b(?:(?:ase(?:font)?|d[io]|gsound|ig|l(?:ink|ockquote)|ody|r|utton))?|c(?:a(?:nvas|ption)|enter|ite|o(?:de|l(?:group)?|mmand|ntent))|d(?:ata(?:list)?|d|e(?:l|tails)|fn|i(?:alog|r|v)|l|t)|e(?:lement|m(?:bed)?)|f(?:i(?:eldset|g(?:caption|ure))|o(?:nt|oter|rm)|rame(?:set)?)|h(?:1|2|3|4|5|6|ead(?:er)?|group|r|tml)|i(?:(?:frame|m(?:age|g)|n(?:put|s)|sindex))?|k(?:bd|eygen)|l(?:abel|egend|i(?:(?:nk|sting))?)|m(?:a(?:in|p|r(?:k|quee)|th)|e(?:nu(?:item)?|t(?:a|er))|ulticol)|n(?:av|extid|o(?:br|embed|frames|script))|o(?:bject|l|pt(?:group|ion)|utput)|p(?:(?:aram|icture|laintext|r(?:e|ogress)))?|q|r(?:bc?|p|tc?|uby)|s(?:(?:amp|cript|e(?:ction|lect)|hadow|lot|mall|ource|pa(?:cer|n)|t(?:r(?:ike|ong)|yle)|u(?:b|mmary|p)|vg))?|t(?:able|body|d|e(?:mplate|xtarea)|foot|h(?:ead)?|i(?:me|tle)|r(?:ack)?|t)|ul?|v(?:ar|ideo)|wbr|xmp)$/;
+function isHTMLTag(tag) {
+  return builtinTagsRegex.test(tag);
+}
+function getAttributeValueType(value) {
+  if (value === void 0 || value[0] !== "=")
+    return void 0;
+  value = value.substring(1).trim();
+  switch (value) {
+    case "NaN":
+    case "Infinity":
+    case "-Infinity":
+      return 1 /* Literal */;
+    case "null":
+    case "false":
+    case "undefined":
+      return void 0;
+    case "true":
+      return 0 /* True */;
+  }
+  if (
+    // double quote string
+    /^"(?:[^"\\]+|\\.)*"$/.test(value) || // single quote string
+    /^'(?:[^'\\]+|\\.)*'$/.test(value) || // template literal without any interpolations
+    /^`(?:[^`\\$]+|\\.|\$(?!\{))*`$/.test(value)
+  ) {
+    return 2 /* QuotedString */;
+  } else if (
+    // octal literal
+    /^-?0[oO]?[0-7](?:_?[0-7]+)*n?$/.test(value) || // hex literal
+    /^-?0[xX][0-9a-fA-F](?:_?[0-9a-fA-F]+)*n?$/.test(value) || // binary literal
+    /^-?0[bB][01](?:_?[01]+)*n?$/.test(value) || // integer or float
+    /^-?\d(?:_?\d+)*(?:[.eE]\d(?:_?\d+)*|n?|\.?)$/.test(value)
+  ) {
+    return 1 /* Literal */;
+  }
+  return 3 /* Dynamic */;
+}
+
+// src/extractors/html/index.ts
+function extractHTML(parsed) {
+  return new HTMLExtractor(parsed).end();
+}
+var HTMLExtractor = class {
+  #extractor;
+  #read;
+  #nodeDetails;
+  #nodeIdCounter;
+  #dynamicAttrValueCounter;
+  constructor(parsed) {
+    this.#extractor = new Extractor(parsed);
+    this.#read = parsed.read.bind(parsed);
+    this.#nodeDetails = {};
+    this.#nodeIdCounter = 0;
+    this.#dynamicAttrValueCounter = 0;
+    parsed.program.body.forEach((node) => this.#visitNode(node));
+  }
+  end() {
+    return { extracted: this.#extractor.end(), nodeDetails: this.#nodeDetails };
+  }
+  #visitNode(node) {
+    var _a;
+    let hasDynamicBody = false, hasDynamicAttrs = false, isDynamic = false;
+    switch (node.type) {
+      case 16 /* AttrTag */:
+        (_a = node.body) == null ? void 0 : _a.forEach((child) => {
+          if (this.#visitNode(child))
+            hasDynamicBody = true;
+        });
+        break;
+      case 1 /* Tag */: {
+        const nodeId = `${this.#nodeIdCounter++}`;
+        ({ isDynamic, hasDynamicAttrs, hasDynamicBody } = this.#writeTag(
+          node,
+          nodeId
+        ));
+        this.#nodeDetails[nodeId] = { hasDynamicAttrs, hasDynamicBody };
+        break;
+      }
+      case 17 /* Text */:
+        this.#extractor.copy(node);
+        break;
+      case 22 /* Placeholder */:
+        isDynamic = this.#read({
+          start: node.start + 1,
+          end: node.start + 2
+        }) === "!";
+    }
+    return isDynamic || hasDynamicBody;
+  }
+  #writeTag(node, id) {
+    const isDynamic = !node.nameText || !isHTMLTag(node.nameText);
+    let hasDynamicAttrs = false, hasDynamicBody = false;
+    if (!isDynamic) {
+      ({ hasDynamicAttrs, hasDynamicBody } = this.#writeHTMLTag(node, id));
+    } else {
+      this.#writeCustomTag(node);
+    }
+    return { isDynamic, hasDynamicAttrs, hasDynamicBody };
+  }
+  #writeHTMLTag(node, id) {
+    var _a, _b;
+    let hasDynamicAttrs = false, hasDynamicBody = false;
+    this.#extractor.write("<");
+    this.#extractor.copy(node.name);
+    this.#extractor.write(` data-marko-node-id="${id}"`);
+    (_a = node.attrs) == null ? void 0 : _a.forEach((attr) => {
+      if (attr.type === 10 /* AttrNamed */)
+        this.#writeAttrNamed(attr);
+      else if (attr.type === 15 /* AttrSpread */)
+        hasDynamicAttrs = true;
+    });
+    this.#extractor.write(">");
+    (_b = node.body) == null ? void 0 : _b.forEach((child) => {
+      if (this.#visitNode(child))
+        hasDynamicBody = true;
+    });
+    this.#extractor.write(`</${node.nameText}>`);
+    return { hasDynamicAttrs, hasDynamicBody };
+  }
+  #writeCustomTag(node) {
+    if (node.body) {
+      this.#extractor.write("<div>");
+      node.body.forEach((node2) => this.#visitNode(node2));
+      this.#extractor.write("</div>");
+    }
+  }
+  #writeAttrNamed(attr) {
+    this.#extractor.write(" ");
+    this.#extractor.copy(attr.name);
+    if (attr.value === void 0 || attr.name.start === attr.name.end || attr.value.type === 14 /* AttrMethod */) {
+      return;
+    }
+    const valueString = this.#read(attr.value);
+    const valueType = getAttributeValueType(valueString);
+    if (valueType === void 0)
+      return;
+    switch (valueType) {
+      case 0 /* True */:
+        break;
+      case 1 /* Literal */:
+        this.#extractor.write('="');
+        this.#extractor.copy({
+          start: attr.value.start + valueString.search(/[^=\s]/g),
+          end: attr.value.end
+        });
+        this.#extractor.write('"');
+        break;
+      case 2 /* QuotedString */:
+        this.#extractor.write('="');
+        this.#extractor.copy({
+          start: attr.value.start + valueString.search(/[^=\s]/g) + 1,
+          end: attr.value.end - 1
+        });
+        this.#extractor.write('"');
+        break;
+      case 3 /* Dynamic */:
+        this.#extractor.write(`="dynamic${this.#dynamicAttrValueCounter++}"`);
+        break;
+    }
+  }
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   NodeType,
@@ -3326,6 +3491,7 @@ function isDefinitionFile(fileName) {
   Project,
   ScriptLang,
   UNFINISHED,
+  extractHTML,
   extractScript,
   extractStyle,
   getExt,

package/dist/index.mjs

@@ -3288,12 +3288,177 @@ function has(fileName) {
 function isDefinitionFile(fileName) {
   return /\.d\.[^.]+$/.test(fileName);
 }
+
+// src/extractors/html/keywords.ts
+var builtinTagsRegex = /^(?:a(?:(?:bbr|cronym|ddress|pplet|r(?:ea|ticle)|side|udio))?|b(?:(?:ase(?:font)?|d[io]|gsound|ig|l(?:ink|ockquote)|ody|r|utton))?|c(?:a(?:nvas|ption)|enter|ite|o(?:de|l(?:group)?|mmand|ntent))|d(?:ata(?:list)?|d|e(?:l|tails)|fn|i(?:alog|r|v)|l|t)|e(?:lement|m(?:bed)?)|f(?:i(?:eldset|g(?:caption|ure))|o(?:nt|oter|rm)|rame(?:set)?)|h(?:1|2|3|4|5|6|ead(?:er)?|group|r|tml)|i(?:(?:frame|m(?:age|g)|n(?:put|s)|sindex))?|k(?:bd|eygen)|l(?:abel|egend|i(?:(?:nk|sting))?)|m(?:a(?:in|p|r(?:k|quee)|th)|e(?:nu(?:item)?|t(?:a|er))|ulticol)|n(?:av|extid|o(?:br|embed|frames|script))|o(?:bject|l|pt(?:group|ion)|utput)|p(?:(?:aram|icture|laintext|r(?:e|ogress)))?|q|r(?:bc?|p|tc?|uby)|s(?:(?:amp|cript|e(?:ction|lect)|hadow|lot|mall|ource|pa(?:cer|n)|t(?:r(?:ike|ong)|yle)|u(?:b|mmary|p)|vg))?|t(?:able|body|d|e(?:mplate|xtarea)|foot|h(?:ead)?|i(?:me|tle)|r(?:ack)?|t)|ul?|v(?:ar|ideo)|wbr|xmp)$/;
+function isHTMLTag(tag) {
+  return builtinTagsRegex.test(tag);
+}
+function getAttributeValueType(value) {
+  if (value === void 0 || value[0] !== "=")
+    return void 0;
+  value = value.substring(1).trim();
+  switch (value) {
+    case "NaN":
+    case "Infinity":
+    case "-Infinity":
+      return 1 /* Literal */;
+    case "null":
+    case "false":
+    case "undefined":
+      return void 0;
+    case "true":
+      return 0 /* True */;
+  }
+  if (
+    // double quote string
+    /^"(?:[^"\\]+|\\.)*"$/.test(value) || // single quote string
+    /^'(?:[^'\\]+|\\.)*'$/.test(value) || // template literal without any interpolations
+    /^`(?:[^`\\$]+|\\.|\$(?!\{))*`$/.test(value)
+  ) {
+    return 2 /* QuotedString */;
+  } else if (
+    // octal literal
+    /^-?0[oO]?[0-7](?:_?[0-7]+)*n?$/.test(value) || // hex literal
+    /^-?0[xX][0-9a-fA-F](?:_?[0-9a-fA-F]+)*n?$/.test(value) || // binary literal
+    /^-?0[bB][01](?:_?[01]+)*n?$/.test(value) || // integer or float
+    /^-?\d(?:_?\d+)*(?:[.eE]\d(?:_?\d+)*|n?|\.?)$/.test(value)
+  ) {
+    return 1 /* Literal */;
+  }
+  return 3 /* Dynamic */;
+}
+
+// src/extractors/html/index.ts
+function extractHTML(parsed) {
+  return new HTMLExtractor(parsed).end();
+}
+var HTMLExtractor = class {
+  #extractor;
+  #read;
+  #nodeDetails;
+  #nodeIdCounter;
+  #dynamicAttrValueCounter;
+  constructor(parsed) {
+    this.#extractor = new Extractor(parsed);
+    this.#read = parsed.read.bind(parsed);
+    this.#nodeDetails = {};
+    this.#nodeIdCounter = 0;
+    this.#dynamicAttrValueCounter = 0;
+    parsed.program.body.forEach((node) => this.#visitNode(node));
+  }
+  end() {
+    return { extracted: this.#extractor.end(), nodeDetails: this.#nodeDetails };
+  }
+  #visitNode(node) {
+    var _a;
+    let hasDynamicBody = false, hasDynamicAttrs = false, isDynamic = false;
+    switch (node.type) {
+      case 16 /* AttrTag */:
+        (_a = node.body) == null ? void 0 : _a.forEach((child) => {
+          if (this.#visitNode(child))
+            hasDynamicBody = true;
+        });
+        break;
+      case 1 /* Tag */: {
+        const nodeId = `${this.#nodeIdCounter++}`;
+        ({ isDynamic, hasDynamicAttrs, hasDynamicBody } = this.#writeTag(
+          node,
+          nodeId
+        ));
+        this.#nodeDetails[nodeId] = { hasDynamicAttrs, hasDynamicBody };
+        break;
+      }
+      case 17 /* Text */:
+        this.#extractor.copy(node);
+        break;
+      case 22 /* Placeholder */:
+        isDynamic = this.#read({
+          start: node.start + 1,
+          end: node.start + 2
+        }) === "!";
+    }
+    return isDynamic || hasDynamicBody;
+  }
+  #writeTag(node, id) {
+    const isDynamic = !node.nameText || !isHTMLTag(node.nameText);
+    let hasDynamicAttrs = false, hasDynamicBody = false;
+    if (!isDynamic) {
+      ({ hasDynamicAttrs, hasDynamicBody } = this.#writeHTMLTag(node, id));
+    } else {
+      this.#writeCustomTag(node);
+    }
+    return { isDynamic, hasDynamicAttrs, hasDynamicBody };
+  }
+  #writeHTMLTag(node, id) {
+    var _a, _b;
+    let hasDynamicAttrs = false, hasDynamicBody = false;
+    this.#extractor.write("<");
+    this.#extractor.copy(node.name);
+    this.#extractor.write(` data-marko-node-id="${id}"`);
+    (_a = node.attrs) == null ? void 0 : _a.forEach((attr) => {
+      if (attr.type === 10 /* AttrNamed */)
+        this.#writeAttrNamed(attr);
+      else if (attr.type === 15 /* AttrSpread */)
+        hasDynamicAttrs = true;
+    });
+    this.#extractor.write(">");
+    (_b = node.body) == null ? void 0 : _b.forEach((child) => {
+      if (this.#visitNode(child))
+        hasDynamicBody = true;
+    });
+    this.#extractor.write(`</${node.nameText}>`);
+    return { hasDynamicAttrs, hasDynamicBody };
+  }
+  #writeCustomTag(node) {
+    if (node.body) {
+      this.#extractor.write("<div>");
+      node.body.forEach((node2) => this.#visitNode(node2));
+      this.#extractor.write("</div>");
+    }
+  }
+  #writeAttrNamed(attr) {
+    this.#extractor.write(" ");
+    this.#extractor.copy(attr.name);
+    if (attr.value === void 0 || attr.name.start === attr.name.end || attr.value.type === 14 /* AttrMethod */) {
+      return;
+    }
+    const valueString = this.#read(attr.value);
+    const valueType = getAttributeValueType(valueString);
+    if (valueType === void 0)
+      return;
+    switch (valueType) {
+      case 0 /* True */:
+        break;
+      case 1 /* Literal */:
+        this.#extractor.write('="');
+        this.#extractor.copy({
+          start: attr.value.start + valueString.search(/[^=\s]/g),
+          end: attr.value.end
+        });
+        this.#extractor.write('"');
+        break;
+      case 2 /* QuotedString */:
+        this.#extractor.write('="');
+        this.#extractor.copy({
+          start: attr.value.start + valueString.search(/[^=\s]/g) + 1,
+          end: attr.value.end - 1
+        });
+        this.#extractor.write('"');
+        break;
+      case 3 /* Dynamic */:
+        this.#extractor.write(`="dynamic${this.#dynamicAttrValueCounter++}"`);
+        break;
+    }
+  }
+};
 export {
   NodeType,
   processors_exports as Processors,
   project_exports as Project,
   ScriptLang,
   UNFINISHED,
+  extractHTML,
   extractScript,
   extractStyle,
   getExt,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@marko/language-tools",
   "description": "Marko Language Tools",
-  "version": "2.0.11",
+  "version": "2.1.0",
   "bugs": "https://github.com/marko-js/language-server/issues/new?template=Bug_report.md",
   "dependencies": {
     "@babel/helper-validator-identifier": "^7.22.5",
@@ -51,8 +51,6 @@
   },
   "scripts": {
     "bench": "BENCH=1 mocha './src/**/__tests__/*.test.ts'",
-    "build": "tsc -b && tsx build.mts",
-    "test": "mocha './src/**/__tests__/*.test.ts'",
-    "test:update": "mocha './src/**/__tests__/*.test.ts' --update"
+    "build": "tsc -b && tsx build.mts"
   }
 }