pack-test-yanmengs 1.0.0

package/components.ts

@@ -0,0 +1,219 @@
+customElements.define(
+  "doc-tab",
+  class extends HTMLElement {
+    constructor() {
+      super();
+      this.attachShadow({ mode: "open" });
+    }
+
+    set active(visible: boolean) {
+      // 使用 style.setProperty 避免覆盖用户原本的 display 逻辑（如果用户也写了 display）
+      this.style.display = visible ? "block" : "none";
+    }
+
+    connectedCallback() {
+      this.render();
+    }
+
+    render() {
+      this.shadowRoot!.innerHTML = `
+        <style>
+          /* :host 的样式会被外部 style 属性覆盖 */
+          :host {
+            display: none; 
+            box-sizing: border-box;
+          }
+          .content-wrapper {
+            padding: 16px;
+          }
+        </style>
+        <div class="content-wrapper">
+          <slot></slot>
+        </div>
+      `;
+    }
+  },
+);
+customElements.define(
+  "doc-tabs",
+  class extends HTMLElement {
+    constructor() {
+      super();
+      this.attachShadow({ mode: "open" });
+    }
+
+    // 监听属性变化，如果 active-key 改变，刷新显示
+    static get observedAttributes() {
+      return ["active-key"];
+    }
+
+    attributeChangedCallback(name: string, oldVal: string, newVal: string) {
+      if (name === "active-key" && oldVal !== newVal) {
+        this.syncTabs();
+      }
+    }
+
+    connectedCallback() {
+      this.render();
+      this.syncTabs();
+      // 监听插槽内容变化（比如动态增删 tab）
+      this.shadowRoot!.querySelector("slot")!.addEventListener(
+        "slotchange",
+        () => this.syncTabs(),
+      );
+    }
+
+    private syncTabs() {
+      const header = this.shadowRoot!.querySelector(".tabs-nav");
+      if (!header) return;
+
+      const activeKey = this.getAttribute("active-key");
+      const children = Array.from(this.querySelectorAll("doc-tab"));
+
+      header.innerHTML = "";
+
+      children.forEach((tab: any) => {
+        const key = tab.getAttribute("key");
+        const title = tab.getAttribute("title") || "Untitled";
+        const isActive = key === activeKey;
+
+        const navItem = document.createElement("div");
+        // 这里的 class 是内部组件 UI 专用的
+        navItem.className = `nav-item ${isActive ? "active" : ""}`;
+        navItem.textContent = title;
+        navItem.onclick = () => {
+          this.setAttribute("active-key", key);
+        };
+        header.appendChild(navItem);
+
+        // 同步子组件显隐
+        tab.active = isActive;
+      });
+    }
+
+    render() {
+      this.shadowRoot!.innerHTML = `
+        <style>
+          /* 内部基础样式 */
+          :host {
+            display: block;
+            box-sizing: border-box;
+          }
+          .tabs-nav {
+            display: flex;
+            background: #fafafa;
+            border-bottom: 1px solid #e8e8e8;
+            padding: 0 8px;
+          }
+          .nav-item {
+            padding: 10px 16px;
+            cursor: pointer;
+            font-size: 14px;
+            transition: all 0.2s;
+            border-bottom: 2px solid transparent;
+            color: #666;
+          }
+          .nav-item.active {
+            color: #1890ff;
+            border-bottom-color: #1890ff;
+          }
+        </style>
+        <div class="tabs-nav"></div>
+        <div class="tabs-body">
+          <slot></slot>
+        </div>
+      `;
+    }
+  },
+);
+
+customElements.define(
+  "doc-card",
+  class extends HTMLElement {
+    constructor() {
+      super();
+      this.attachShadow({ mode: "open" });
+    }
+
+    static get observedAttributes() {
+      return ["title", "bg-color", "slide-color"];
+    }
+
+    attributeChangedCallback() {
+      this.render();
+    }
+
+    connectedCallback() {
+      this.render();
+    }
+
+    render() {
+      const title = this.getAttribute("title") || "Tip";
+      // 默认颜色（参考你提供的图片）
+      const defaultBg = "#154d24";
+      const defaultBorder = "#4ade80";
+
+      const bgColor = this.getAttribute("bg-color") || defaultBg;
+      const borderColor = this.getAttribute("slide-color") || defaultBorder;
+
+      this.shadowRoot!.innerHTML = `
+        <style>
+          /* 1. :host 承载用户写的 class 和 style */
+          :host {
+            display: block;
+            margin: 16px 0;
+            box-sizing: border-box;
+            /* 将颜色存入变量，方便内部引用，也方便用户通过 style="--bg: ..." 覆盖 */
+            --internal-bg: ${bgColor};
+            --internal-border: ${borderColor};
+          }
+
+          .card-container {
+            /* 优先级：用户内联变量 > 属性传值 > 默认值 */
+            background-color: var(--doc-card-bg, var(--internal-bg));
+            border-left: 4px solid var(--doc-card-border, var(--internal-border));
+            
+            padding: 16px 20px;
+            border-radius: 0 4px 4px 0;
+            color: #ffffff;
+            font-family: sans-serif;
+            transition: all 0.3s ease;
+          }
+
+          .card-header {
+            display: flex;
+            align-items: center;
+            font-weight: bold;
+            margin-bottom: 8px;
+            font-size: 1.1em;
+          }
+
+          .card-icon {
+            margin-right: 8px;
+          }
+
+          .card-content {
+            line-height: 1.6;
+            font-size: 0.95em;
+            opacity: 0.9;
+          }
+
+          /* 允许外部样式通过插槽影响内容 */
+          ::slotted(*) {
+            margin: 0;
+          }
+        </style>
+
+        <div class="card-container">
+          <div class="card-header">
+            <span class="card-icon">💡</span>
+            <span class="card-title">${title}</span>
+          </div>
+          <div class="card-content">
+            <slot></slot>
+          </div>
+        </div>
+      `;
+    }
+  },
+);

package/index.ts

@@ -0,0 +1,2 @@
+import "./components";
+export * from "./utils";

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "pack-test-yanmengs",
+  "version": "1.0.0",
+  "description": "",
+  "private": false,
+  "main": "index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "mdast": "^3.0.0",
+    "mdast-util-directive": "^3.1.0",
+    "remark-directive": "^4.0.0",
+    "remark-parse": "^11.0.0",
+    "typescript": "^5.9.3",
+    "unified": "^11.0.5"
+  },
+  "devDependencies": {
+    "@types/mdast": "^4.0.4"
+  }
+}

package/utils.ts

@@ -0,0 +1,115 @@
+import { unified } from "unified";
+import remarkParse from "remark-parse";
+import remarkDirective from "remark-directive";
+import type { Root, Content, Text, Parent, Code } from "mdast";
+import type { ContainerDirective } from "mdast-util-directive";
+
+/**
+ * 获取 Markdown AST (抽象语法树)
+ */
+function getAST(content: string): Root {
+  const processor = unified().use(remarkParse).use(remarkDirective);
+  console.log(processor.parse(content), "processor.parse(content)", content);
+  return processor.parse(content) as Root;
+}
+
+/**
+ * 递归转换 AST
+ * 将 containerDirective 转换为包含自定义 HTML 标签的文本节点
+ */
+const parseAST = (
+  ast: Root | Parent,
+  map: Map<number, boolean> = new Map(),
+): Content[] => {
+  if (!ast.children) return [];
+
+  const newChildren: Content[] = [];
+
+  ast.children.forEach((node: any) => {
+    // 判断是否为容器指令 (::: name)
+    if (node.type === "containerDirective") {
+      // console.log(node, "containerDirective");
+      const directiveNode = node as ContainerDirective;
+      const column = directiveNode.position?.start.column ?? 0;
+      const isClosing = map.has(column);
+
+      // 1. 构造属性字符串
+      const attributes = directiveNode.attributes || {};
+      const attrString = Object.entries(attributes)
+        .map(([k, v]) => `${k}="${v}"`)
+        .join(" ");
+
+      // 2. 生成标签名
+      const tagName = isClosing
+        ? `</doc-${directiveNode.name}>`
+        : `<doc-${directiveNode.name}${attrString ? " " + attrString : ""}>`;
+
+      // 3. 创建替换文本节点
+      const textNode: Text = {
+        type: "text",
+        value: tagName,
+      };
+
+      // 4. 状态切换逻辑
+      if (isClosing) {
+        map.delete(column);
+      } else {
+        map.set(column, true);
+      }
+
+      newChildren.push(textNode);
+
+      // 5. 递归处理子节点并将结果展开（平铺化）
+      if (directiveNode.children) {
+        const processedInner = parseAST(directiveNode, map);
+        newChildren.push(...processedInner);
+      }
+    } else if (node.type === "code") {
+      const processedInner = parseAST(getAST(String(node.value)));
+      newChildren.push(...processedInner);
+    } else {
+      // 普通节点递归处理（如果存在子节点）
+      if ("children" in node) {
+        node.children = parseAST(node as Parent, map) as any;
+      }
+      newChildren.push(node);
+    }
+  });
+
+  return newChildren;
+};
+
+/**
+ * 将 AST 节点拍平并提取文本内容 (HTML 字符串)
+ */
+const parseHtml = (nodes: Content[], currentStr: string = ""): string => {
+  let result = currentStr;
+
+  nodes.forEach((node) => {
+    if ("children" in node && node.children) {
+      result = parseHtml(node.children as Content[], result);
+    } else if ("value" in node) {
+      result += node.value + "\n";
+    }
+  });
+
+  return result;
+};
+const MarkdownToHtml = (markdownContent: string): string => {
+  const ast = getAST(markdownContent);
+  const transformedChildren = parseAST(ast);
+  return parseHtml(transformedChildren);
+};
+/**
+ * 主导出函数
+ */
+export const transformMarkdownToHtml = (markdownContent: string): string => {
+  let result = MarkdownToHtml(markdownContent);
+  // while (result.includes(":::")) {
+  //   result = MarkdownToHtml(result);
+  //   console.log(result);
+  // }
+
+  console.log(result);
+  return result;
+};