@wsxjs/wsx-marked-components 0.0.18

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@wsxjs/wsx-marked-components",
+  "version": "0.0.18",
+  "description": "Markdown rendering components built with WSXJS for marked library",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "!**/__tests__",
+    "!**/test"
+  ],
+  "dependencies": {
+    "marked": "^12.0.0",
+    "@wsxjs/wsx-core": "0.0.18",
+    "@wsxjs/wsx-logger": "0.0.18"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^8.37.0",
+    "@typescript-eslint/parser": "^8.37.0",
+    "eslint": "^9.31.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.4.19",
+    "@wsxjs/eslint-plugin-wsx": "0.0.18",
+    "@wsxjs/wsx-vite-plugin": "0.0.18"
+  },
+  "keywords": [
+    "wsx",
+    "web-components",
+    "markdown",
+    "marked",
+    "typescript",
+    "jsx"
+  ],
+  "author": "WSXJS Team",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wsxjs/wsxjs.git",
+    "directory": "packages/marked-components"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build",
+    "build:dev": "NODE_ENV=development vite build",
+    "dev": "NODE_ENV=development vite build --watch",
+    "clean": "rm -rf dist",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
+  }
+}

package/src/Blockquote.css

@@ -0,0 +1,12 @@
+/* WSX Marked Blockquote Component Styles */
+wsx-marked-blockquote {
+    display: block;
+    margin: 1rem 0;
+    padding: 1rem 1.5rem;
+    border-left: 4px solid var(--primary-red, #dc2626);
+    background: var(--bg-secondary, #f9f9f9);
+    border-radius: 4px;
+    font-style: italic;
+    color: var(--text-secondary, #666);
+}
+

package/src/Blockquote.wsx

@@ -0,0 +1,26 @@
+/** @jsxImportSource @wsxjs/wsx-core */
+/**
+ * WSX Blockquote Component
+ * Custom blockquote component for markdown rendering
+ */
+
+import { LightComponent, autoRegister } from "@wsxjs/wsx-core";
+import styles from "./Blockquote.css?inline";
+
+@autoRegister({ tagName: "wsx-marked-blockquote" })
+export default class Blockquote extends LightComponent {
+    constructor() {
+        super({
+            styles,
+            styleName: "wsx-marked-blockquote",
+        });
+    }
+
+    render() {
+        return (
+            <blockquote>
+                <slot />
+            </blockquote>
+        );
+    }
+}

package/src/Code.css

@@ -0,0 +1,34 @@
+/* WSX Marked Code Component Styles */
+wsx-marked-code {
+    display: block;
+    margin: 1rem 0;
+}
+
+wsx-marked-code pre {
+    background: var(--bg-secondary, #f5f5f5);
+    border: 1px solid var(--border-color, #e0e0e0);
+    border-radius: 8px;
+    padding: 1rem;
+    overflow-x: auto;
+    font-family: "Courier New", monospace;
+    font-size: 0.9rem;
+    line-height: 1.5;
+}
+
+wsx-marked-code code {
+    background: transparent;
+    padding: 0;
+    border: none;
+    font-family: inherit;
+}
+
+wsx-marked-code .language-label {
+    display: inline-block;
+    background: var(--primary-red, #dc2626);
+    color: white;
+    padding: 0.25rem 0.5rem;
+    font-size: 0.75rem;
+    border-radius: 4px 4px 0 0;
+    margin-bottom: -1px;
+}
+

package/src/Code.wsx

@@ -0,0 +1,46 @@
+/** @jsxImportSource @wsxjs/wsx-core */
+/**
+ * WSX Code Component
+ * Custom code block component for markdown rendering
+ */
+
+import { LightComponent, autoRegister } from "@wsxjs/wsx-core";
+import styles from "./Code.css?inline";
+
+@autoRegister({ tagName: "wsx-marked-code" })
+export default class Code extends LightComponent {
+    private code: string = "";
+    private language: string = "";
+
+    constructor() {
+        super({
+            styles,
+            styleName: "wsx-marked-code",
+        });
+    }
+
+    static get observedAttributes() {
+        return ["code", "language"];
+    }
+
+    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+        if (name === "code") {
+            this.code = newValue || "";
+        } else if (name === "language") {
+            this.language = newValue || "";
+        }
+        this.rerender();
+    }
+
+    render() {
+        return (
+            <div>
+                {this.language && <span class="language-label">{this.language}</span>}
+                <pre>
+                    <code>{this.code}</code>
+                </pre>
+            </div>
+        );
+    }
+}
+

package/src/Error.wsx

@@ -0,0 +1,34 @@
+/** @jsxImportSource @wsxjs/wsx-core */
+/**
+ * WSX Error Component
+ * Custom error component for markdown rendering
+ */
+
+import { LightComponent, autoRegister } from "@wsxjs/wsx-core";
+
+@autoRegister({ tagName: "wsx-marked-error" })
+export default class Error extends LightComponent {
+    private message: string = "";
+
+    constructor() {
+        super({
+            styleName: "wsx-marked-error",
+        });
+    }
+
+    static get observedAttributes() {
+        return ["message"];
+    }
+
+    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+        if (name === "message") {
+            this.message = newValue || "";
+            this.rerender();
+        }
+    }
+
+    render() {
+        return <div class="error">{this.message}</div>;
+    }
+}
+

package/src/Heading.css

@@ -0,0 +1,37 @@
+/* WSX Marked Heading Component Styles */
+wsx-marked-heading {
+    display: block;
+}
+
+wsx-marked-heading h1 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    margin: 1.5rem 0 1rem 0;
+    color: var(--text-primary, #2c3e50);
+    border-bottom: 2px solid var(--primary-red, #dc2626);
+    padding-bottom: 0.5rem;
+}
+
+wsx-marked-heading h2 {
+    font-size: 2rem;
+    font-weight: 600;
+    margin: 1.25rem 0 0.75rem 0;
+    color: var(--text-primary, #2c3e50);
+}
+
+wsx-marked-heading h3 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin: 1rem 0 0.5rem 0;
+    color: var(--text-primary, #2c3e50);
+}
+
+wsx-marked-heading h4,
+wsx-marked-heading h5,
+wsx-marked-heading h6 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin: 0.75rem 0 0.5rem 0;
+    color: var(--text-primary, #2c3e50);
+}
+

package/src/Heading.wsx

@@ -0,0 +1,44 @@
+/** @jsxImportSource @wsxjs/wsx-core */
+/**
+ * WSX Heading Component
+ * Custom heading component for markdown rendering
+ */
+
+import { LightComponent, autoRegister } from "@wsxjs/wsx-core";
+import styles from "./Heading.css?inline";
+
+@autoRegister({ tagName: "wsx-marked-heading" })
+export default class Heading extends LightComponent {
+    private level: number = 1;
+    private text: string = "";
+
+    constructor() {
+        super({
+            styles,
+            styleName: "wsx-marked-heading",
+        });
+    }
+
+    static get observedAttributes() {
+        return ["level", "text"];
+    }
+
+    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+        if (name === "level") {
+            this.level = parseInt(newValue, 10) || 1;
+        } else if (name === "text") {
+            this.text = newValue;
+        }
+        this.rerender();
+    }
+
+    render() {
+        // 使用 WSX JSX 语法，根据 level 渲染对应的标题
+        if (this.level === 1) return <h1>{this.text}</h1>;
+        if (this.level === 2) return <h2>{this.text}</h2>;
+        if (this.level === 3) return <h3>{this.text}</h3>;
+        if (this.level === 4) return <h4>{this.text}</h4>;
+        if (this.level === 5) return <h5>{this.text}</h5>;
+        return <h6>{this.text}</h6>;
+    }
+}

package/src/List.wsx

@@ -0,0 +1,67 @@
+/** @jsxImportSource @wsxjs/wsx-core */
+/**
+ * WSX List Component
+ * Custom list component for markdown rendering
+ */
+
+import { LightComponent, autoRegister, state } from "@wsxjs/wsx-core";
+
+@autoRegister({ tagName: "wsx-marked-list" })
+export default class List extends LightComponent {
+    @state private ordered: boolean = false;
+    @state private items: string[] = [];
+
+    constructor() {
+        super({
+            styleName: "wsx-marked-list",
+        });
+    }
+
+    static get observedAttributes() {
+        return ["ordered", "items"];
+    }
+
+    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+        if (name === "ordered") {
+            this.ordered = newValue === "true";
+        } else if (name === "items") {
+            try {
+                // HTML 属性值会被浏览器自动解码，所以这里得到的是原始的 JSON 字符串
+                // JSON.parse 会解析出包含 HTML 字符串的数组
+                this.items = JSON.parse(newValue || "[]");
+            } catch {
+                this.items = [];
+            }
+        }
+    }
+
+    render() {
+        if (this.ordered) {
+            return (
+                <ol class="marked-list">
+                    {this.items.map((item, index) => {
+                        // JSX factory automatically detects HTML strings and converts them to DOM nodes
+                        return (
+                            <li key={index} class="marked-list-item">
+                                {item}
+                            </li>
+                        );
+                    })}
+                </ol>
+            );
+        } else {
+            return (
+                <ul class="marked-list">
+                    {this.items.map((item, index) => {
+                        // JSX factory automatically detects HTML strings and converts them to DOM nodes
+                        return (
+                            <li key={index} class="marked-list-item">
+                                {item}
+                            </li>
+                        );
+                    })}
+                </ul>
+            );
+        }
+    }
+}

package/src/Markdown.css

@@ -0,0 +1,66 @@
+/* WSX Markdown Component Styles */
+wsx-markdown {
+    display: block;
+}
+
+.marked-content {
+    line-height: 1.7;
+    color: var(--text-primary, #2c3e50);
+}
+
+.marked-content .marked-paragraph {
+    margin: 1rem 0;
+    line-height: 1.7;
+}
+
+.marked-content .marked-list {
+    margin: 1rem 0;
+    padding-left: 2rem;
+}
+
+.marked-content .marked-list-item {
+    margin: 0.5rem 0;
+    line-height: 1.6;
+}
+
+.marked-content a {
+    color: var(--primary-red, #dc2626);
+    text-decoration: none;
+    border-bottom: 1px solid transparent;
+    transition: border-color 0.2s ease;
+}
+
+.marked-content a:hover {
+    border-bottom-color: var(--primary-red, #dc2626);
+}
+
+.marked-content strong {
+    font-weight: 600;
+    color: var(--text-primary, #2c3e50);
+}
+
+.marked-content em {
+    font-style: italic;
+}
+
+.marked-content hr {
+    border: none;
+    border-top: 2px solid var(--border-color, #e0e0e0);
+    margin: 2rem 0;
+}
+
+.marked-content img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 8px;
+    margin: 1rem 0;
+}
+
+.error {
+    color: #dc2626;
+    padding: 1rem;
+    background: #fee2e2;
+    border-radius: 6px;
+    border: 1px solid #fecaca;
+}
+