@wsxjs/wsx-marked-components 0.0.19 → 0.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wsxjs/wsx-marked-components",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "description": "Markdown rendering components built with WSXJS for marked library",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -19,8 +19,8 @@
   ],
   "dependencies": {
     "marked": "^12.0.0",
-    "@wsxjs/wsx-core": "0.0.19",
-    "@wsxjs/wsx-logger": "0.0.19"
+    "@wsxjs/wsx-core": "0.0.21",
+    "@wsxjs/wsx-logger": "0.0.21"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^8.37.0",
@@ -29,8 +29,8 @@
     "tsup": "^8.0.0",
     "typescript": "^5.0.0",
     "vite": "^5.4.19",
-    "@wsxjs/eslint-plugin-wsx": "0.0.19",
-    "@wsxjs/wsx-vite-plugin": "0.0.19"
+    "@wsxjs/wsx-vite-plugin": "0.0.21",
+    "@wsxjs/eslint-plugin-wsx": "0.0.21"
   },
   "keywords": [
     "wsx",

package/src/List.wsx

@@ -9,32 +9,9 @@ import { LightComponent, autoRegister, state } from "@wsxjs/wsx-core";
 @autoRegister({ tagName: "wsx-marked-list" })
 export default class List extends LightComponent {
     @state private ordered: boolean = false;
+    // internal list items
     @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 (

package/src/Markdown.wsx

@@ -15,7 +15,7 @@ import { LightComponent, autoRegister, state } from "@wsxjs/wsx-core";
 import { createLogger } from "@wsxjs/wsx-logger";
 import { marked } from "marked";
 import type { Tokens } from "marked";
-import styles from "./Markdown.css?inline";
+
 import { renderInlineTokens } from "./marked-utils";
 // Import WSX components so they're registered as custom elements
 import "./Heading.wsx";
@@ -54,26 +54,6 @@ export default class Markdown extends LightComponent {
     @state private markdown: string = "";
     private customRenderers: CustomRenderers = {};
 
-    constructor() {
-        super({
-            styles,
-            styleName: "wsx-markdown",
-            lightDOM: true,
-        });
-        logger.info("Markdown initialized");
-    }
-
-    static get observedAttributes() {
-        return ["markdown"];
-    }
-
-    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
-        if (name === "markdown") {
-            this.markdown = newValue || "";
-            this.rerender();
-        }
-    }
-
     /**
      * Set custom renderers for specific token types
      *
@@ -118,14 +98,6 @@ export default class Markdown extends LightComponent {
         }
     }
 
-    protected onConnected() {
-        // Get initial value from attribute
-        const markdownAttr = this.getAttribute("markdown");
-        if (markdownAttr) {
-            this.markdown = markdownAttr;
-        }
-    }
-
     /**
      * Convert marked tokens to WSX JSX elements
      */
@@ -223,10 +195,7 @@ export default class Markdown extends LightComponent {
                     return html;
                 });
                 return (
-                    <wsx-marked-list
-                        ordered={listToken.ordered ? "true" : "false"}
-                        items={JSON.stringify(items)}
-                    />
+                    <wsx-marked-list ordered={listToken.ordered ? "true" : "false"} items={items} />
                 );
             }