@wsxjs/wsx-core 0.0.6 → 0.0.7

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 WSX Framework Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.js

@@ -721,9 +721,24 @@ var LightComponent = class extends HTMLElement {
       return;
     }
     this.innerHTML = "";
+    if (this.config.styles) {
+      const styleName = this.config.styleName || this.constructor.name;
+      const styleElement = document.createElement("style");
+      styleElement.setAttribute("data-wsx-light-component", styleName);
+      styleElement.textContent = this.config.styles;
+      this.appendChild(styleElement);
+    }
     try {
       const content = this.render();
       this.appendChild(content);
+      if (this.config.styles && this.children.length > 1) {
+        const styleElement = this.querySelector(
+          `style[data-wsx-light-component="${this.config.styleName || this.constructor.name}"]`
+        );
+        if (styleElement && styleElement !== this.firstChild) {
+          this.insertBefore(styleElement, this.firstChild);
+        }
+      }
     } catch (error) {
       logger3.error(`[${this.constructor.name}] Error in rerender:`, error);
       this.renderError(error);

package/dist/index.mjs

@@ -490,9 +490,24 @@ var LightComponent = class extends HTMLElement {
       return;
     }
     this.innerHTML = "";
+    if (this.config.styles) {
+      const styleName = this.config.styleName || this.constructor.name;
+      const styleElement = document.createElement("style");
+      styleElement.setAttribute("data-wsx-light-component", styleName);
+      styleElement.textContent = this.config.styles;
+      this.appendChild(styleElement);
+    }
     try {
       const content = this.render();
       this.appendChild(content);
+      if (this.config.styles && this.children.length > 1) {
+        const styleElement = this.querySelector(
+          `style[data-wsx-light-component="${this.config.styleName || this.constructor.name}"]`
+        );
+        if (styleElement && styleElement !== this.firstChild) {
+          this.insertBefore(styleElement, this.firstChild);
+        }
+      }
     } catch (error) {
       logger3.error(`[${this.constructor.name}] Error in rerender:`, error);
       this.renderError(error);

package/package.json

@@ -1,49 +1,49 @@
 {
-    "name": "@wsxjs/wsx-core",
-    "version": "0.0.6",
-    "description": "Core WSX Framework - Web Components with JSX syntax",
-    "main": "./dist/index.js",
-    "module": "./dist/index.mjs",
-    "types": "./types/index.d.ts",
-    "exports": {
-        ".": {
-            "types": "./types/index.d.ts",
-            "import": "./dist/index.mjs",
-            "require": "./dist/index.js"
-        },
-        "./jsx-runtime": {
-            "types": "./types/jsx-runtime.d.ts",
-            "import": "./dist/jsx-runtime.mjs",
-            "require": "./dist/jsx-runtime.js"
-        }
+  "name": "@wsxjs/wsx-core",
+  "version": "0.0.7",
+  "description": "Core WSX Framework - Web Components with JSX syntax",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
     },
-    "files": [
-        "dist",
-        "src",
-        "types",
-        "!**/__tests__",
-        "!**/test"
-    ],
-    "scripts": {
-        "build": "tsup src/index.ts src/jsx.ts src/jsx-runtime.ts --format cjs,esm",
-        "build:dev": "NODE_ENV=development tsup src/index.ts src/jsx.ts src/jsx-runtime.ts --format cjs,esm --sourcemap",
-        "dev": "NODE_ENV=development tsup src/index.ts src/jsx.ts src/jsx-runtime.ts --format cjs,esm --watch --sourcemap",
-        "test": "jest",
-        "typecheck": "tsc --noEmit",
-        "clean": "rm -rf dist"
-    },
-    "keywords": [
-        "web-components",
-        "jsx",
-        "typescript",
-        "custom-elements"
-    ],
-    "devDependencies": {
-        "tsup": "^8.0.0",
-        "typescript": "^5.0.0",
-        "@types/node": "^20.0.0"
-    },
-    "peerDependencies": {
-        "typescript": ">=4.7.0"
+    "./jsx-runtime": {
+      "types": "./types/jsx-runtime.d.ts",
+      "import": "./dist/jsx-runtime.mjs",
+      "require": "./dist/jsx-runtime.js"
     }
-}
+  },
+  "files": [
+    "dist",
+    "src",
+    "types",
+    "!**/__tests__",
+    "!**/test"
+  ],
+  "keywords": [
+    "web-components",
+    "jsx",
+    "typescript",
+    "custom-elements"
+  ],
+  "devDependencies": {
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "@types/node": "^20.0.0"
+  },
+  "peerDependencies": {
+    "typescript": ">=4.7.0"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts src/jsx.ts src/jsx-runtime.ts --format cjs,esm",
+    "build:dev": "NODE_ENV=development tsup src/index.ts src/jsx.ts src/jsx-runtime.ts --format cjs,esm --sourcemap",
+    "dev": "NODE_ENV=development tsup src/index.ts src/jsx.ts src/jsx-runtime.ts --format cjs,esm --watch --sourcemap",
+    "test": "jest",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  }
+}

package/src/light-component.ts

@@ -187,13 +187,36 @@ export abstract class LightComponent extends HTMLElement {
             return;
         }
 
-        // 清空现有内容
+        // 清空现有内容（包括样式元素）
         this.innerHTML = "";
 
-        // 重新渲染JSX
+        // 重新应用样式（必须在内容之前添加，确保样式优先）
+        if (this.config.styles) {
+            const styleName = this.config.styleName || this.constructor.name;
+            // 直接创建并添加样式元素，不检查是否存在（因为 innerHTML = "" 已经清空了）
+            const styleElement = document.createElement("style");
+            styleElement.setAttribute("data-wsx-light-component", styleName);
+            styleElement.textContent = this.config.styles;
+            // 使用 prepend 或 insertBefore 确保样式在第一个位置
+            // 由于 innerHTML = "" 后 firstChild 是 null，使用 appendChild 然后调整顺序
+            this.appendChild(styleElement);
+        }
+
+        // 重新渲染JSX内容
         try {
             const content = this.render();
             this.appendChild(content);
+
+            // 确保样式元素在内容之前（如果样式存在）
+            if (this.config.styles && this.children.length > 1) {
+                const styleElement = this.querySelector(
+                    `style[data-wsx-light-component="${this.config.styleName || this.constructor.name}"]`
+                );
+                if (styleElement && styleElement !== this.firstChild) {
+                    // 将样式元素移到第一个位置
+                    this.insertBefore(styleElement, this.firstChild);
+                }
+            }
         } catch (error) {
             logger.error(`[${this.constructor.name}] Error in rerender:`, error);
             this.renderError(error);

package/types/wsx-types.d.ts

@@ -2,10 +2,12 @@
  * WSX TypeScript 声明文件
  * 支持 JSX 语法和其他 WSX 特性
  */
-
+import { WebComponent, LightComponent } from "../src/index";
 // WSX 文件支持 - 将 .wsx 文件视为 TypeScript 模块
+// 标准类型声明：支持 WebComponent 和 LightComponent
 declare module "*.wsx" {
-    const Component: unknown;
+    // Allow any class that extends WebComponent or LightComponent
+    const Component: new (...args: unknown[]) => WebComponent | LightComponent;
     export default Component;
 }