xiangjsoncraft 1.2.0 → 2.0.0

package/src/renderJson.js

@@ -0,0 +1,111 @@
+/**
+ * XiangJsonCraft 2.0 核心渲染逻辑
+ * 纯JSON驱动的前端框架核心 - Write JSON, Get a Website
+ * @version 2.0.0
+ */
+
+// 驼峰转短横线（CSS属性名转换）
+String.prototype.replaceCamelCase = function (separator = '-') {
+    return this.replace(/[A-Z]/g, (match) => `${separator}${match.toLowerCase()}`);
+};
+
+// 创建唯一样式块
+function createStyleBlock() {
+    const style = document.createElement('style');
+    style.id = 'xiangjsoncraft-styles';
+    document.head.insertBefore(style, document.head.firstChild);
+    return style;
+}
+
+// 核心渲染函数
+export function renderJsonStyles() {
+    // 配置文件路径（固定与HTML同目录）
+    const CONFIG_PATH = './config.json';
+
+    // 错误处理
+    const handleError = (msg) => {
+        console.error(chalk?.red(`❌ XiangJsonCraft 2.0 错误: ${msg}`) || `❌ XiangJsonCraft 2.0 错误: ${msg}`);
+    };
+
+    // 加载配置并渲染
+    fetch(CONFIG_PATH)
+        .then(async (res) => {
+            if (!res.ok) throw new Error('配置文件加载失败，请检查config.json是否存在');
+            return res.json();
+        })
+        .then((config) => {
+            // 配置校验
+            if (typeof config !== 'object' || config === null || Array.isArray(config)) {
+                return handleError('config.json 格式错误，必须是标准JSON对象');
+            }
+
+            // 1. 渲染样式
+            const styleBlock = document.getElementById('xiangjsoncraft-styles') || createStyleBlock();
+            const { styles = {} } = config;
+            let cssRules = '';
+
+            // 生成CSS规则
+            Object.entries(styles).forEach(([selector, styleObj]) => {
+                const selectorStr = String(selector).trim();
+                if (!selectorStr || typeof styleObj !== 'object' || styleObj === null || Array.isArray(styleObj)) return;
+
+                const styleProps = Object.entries(styleObj)
+                    .map(([prop, value]) => {
+                        const propStr = String(prop).trim();
+                        if (!propStr || value === undefined || value === null || String(value).trim() === '') return '';
+                        const cssProp = propStr.replaceCamelCase();
+                        const cssValue = String(value).trim();
+                        return `${cssProp}: ${cssValue};`;
+                    })
+                    .filter(Boolean)
+                    .join('\n    ');
+
+                if (styleProps) {
+                    cssRules += `${selectorStr} {\n    ${styleProps}\n}\n\n`;
+                }
+            });
+
+            // 注入样式
+            if (cssRules) {
+                styleBlock.innerHTML = cssRules;
+            }
+
+            // 2. 渲染内容
+            const { content = {} } = config;
+            Object.entries(content).forEach(([selector, contentObj]) => {
+                const selectorStr = String(selector).trim();
+                if (!selectorStr || typeof contentObj !== 'object' || contentObj === null || Array.isArray(contentObj)) return;
+                if (!contentObj.hasOwnProperty('value')) return;
+
+                const targetNodes = document.querySelectorAll(selectorStr);
+                if (targetNodes.length === 0) return;
+
+                const { value, isHtml = false } = contentObj;
+                const contentValue = String(value).trim();
+
+                targetNodes.forEach((node) => {
+                    if (isHtml) {
+                        node.innerHTML = contentValue;
+                    } else {
+                        node.textContent = contentValue;
+                    }
+                });
+            });
+
+            // 渲染成功提示
+            console.log(chalk?.green('✅ XiangJsonCraft 2.0 渲染成功！') || '✅ XiangJsonCraft 2.0 渲染成功！');
+            console.log(chalk?.blue('ℹ️  修改config.json后刷新页面即可生效') || 'ℹ️  修改config.json后刷新页面即可生效');
+
+        })
+        .catch((err) => {
+            handleError(err.message);
+        });
+}
+
+// 暴露全局变量（兼容非模块化环境）
+if (typeof window !== 'undefined') {
+    window.XiangJsonCraft = {
+        renderJsonStyles,
+        version: '2.0.0'
+    };
+}

package/template/config.json

@@ -0,0 +1,36 @@
+{
+    "styles": {
+        "*": {
+            "margin": 0,
+            "padding": 0,
+            "boxSizing": "border-box",
+            "fontFamily": "Segoe UI, Roboto, 微软雅黑, sans-serif"
+        },
+        "body": {
+            "backgroundColor": "#f0f4f8",
+            "color": "#334e68",
+            "lineHeight": "1.6",
+            "minHeight": "100vh",
+            "padding": "2rem 1rem"
+        },
+        ".container": {
+            "width": "300px",
+            "height": "300px",
+            "backgroundColor": "blue"
+        },
+        "#text": {
+            "padding": "20px",
+            "color": "white"
+        }
+    },
+    "content": {
+        "#text": {
+            "value": "<a href='/'>hahh</a>",
+            "isHtml": true
+        },
+        "#text2": {
+            "value": "hello world",
+            "isHtml": false
+        }
+    }
+}

package/template/index.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>XiangJsonCraft 2.0 App</title>
+    <!-- 框架样式块（自动注入） -->
+    <style id="xiangjsoncraft-styles"></style>
+    <link rel="icon"
+        href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='90' font-size='90'>🟢</text></svg>">
+</head>
+
+<body>
+    <!-- 应用容器（仅DOM骨架，样式/内容由JSON控制） -->
+    <div class="app-container">
+        <h1 class="app-title"></h1>
+        <p class="app-desc"></p>
+        <div class="app-btn-group">
+            <a href="javascript:;" class="app-btn app-btn-primary"></a>
+            <a href="javascript:;" class="app-btn app-btn-secondary"></a>
+        </div>
+    </div>
+
+    <!-- 引入框架核心逻辑 -->
+    <script type="module">
+        // 模块化引入（现代浏览器）
+        import { renderJsonStyles } from './node_modules/xiangjsoncraft/src/renderJson.js';
+        // 页面加载完成后渲染
+        document.addEventListener('DOMContentLoaded', () => {
+            renderJsonStyles();
+        });
+    </script>
+
+    <!-- 兼容非模块化环境（备用） -->
+    <script nomodule src="./node_modules/xiangjsoncraft/dist/xiangjsoncraft.umd.js"></script>
+    <script nomodule>
+        document.addEventListener('DOMContentLoaded', () => {
+            XiangJsonCraft.renderJsonStyles();
+        });
+    </script>
+</body>
+
+</html>

package/config.json

@@ -1,113 +0,0 @@
-{
-    "styles": {
-        "*": {
-            "margin": 0,
-            "padding": 0,
-            "boxSizing": "border-box",
-            "fontFamily": "Segoe UI, Roboto, 微软雅黑, sans-serif"
-        },
-        "body": {
-            "backgroundColor": "#f0f4f8",
-            "color": "#334e68",
-            "lineHeight": "1.6",
-            "minHeight": "100vh",
-            "padding": "2rem 1rem"
-        },
-        ".welcome-container": {
-            "maxWidth": "1200px",
-            "margin": "0 auto",
-            "padding": "2rem"
-        },
-        ".main-title": {
-            "fontSize": "2.2rem",
-            "color": "#2d3748",
-            "textAlign": "center",
-            "marginBottom": "1.5rem",
-            "fontWeight": 700
-        },
-        ".subtitle": {
-            "fontSize": "1.1rem",
-            "color": "#718096",
-            "textAlign": "center",
-            "maxWidth": "800px",
-            "margin": "0 auto 3rem",
-            "lineHeight": "1.8"
-        },
-        ".feature-card": {
-            "backgroundColor": "#ffffff",
-            "borderRadius": "12px",
-            "padding": "2rem",
-            "boxShadow": "0 4px 12px rgba(0,0,0,0.05)",
-            "maxWidth": "600px",
-            "margin": "0 auto 2rem",
-            "transition": "transform 0.3s ease, boxShadow 0.3s ease"
-        },
-        ".feature-card:hover": {
-            "transform": "translateY(-6px)",
-            "boxShadow": "0 8px 20px rgba(0,0,0,0.08)"
-        },
-        ".feature-title": {
-            "fontSize": "1.4rem",
-            "color": "#4299e1",
-            "marginBottom": "1rem",
-            "fontWeight": 600
-        },
-        ".feature-desc": {
-            "color": "#718096",
-            "lineHeight": "1.7"
-        },
-        ".primary-btn": {
-            "display": "block",
-            "width": "200px",
-            "height": "50px",
-            "lineHeight": "50px",
-            "textAlign": "center",
-            "backgroundColor": "#4299e1",
-            "color": "#ffffff",
-            "border": "none",
-            "borderRadius": "8px",
-            "margin": "0 auto",
-            "fontSize": "1rem",
-            "fontWeight": 600,
-            "cursor": "pointer",
-            "transition": "backgroundColor 0.3s ease, transform 0.2s ease"
-        },
-        ".primary-btn:hover": {
-            "backgroundColor": "#3182ce",
-            "transform": "translateY(-2px)"
-        },
-        "@media (max-width: 768px)": {
-            ".main-title": {
-                "fontSize": "1.8rem"
-            },
-            ".welcome-container": {
-                "padding": "1rem"
-            },
-            ".feature-card": {
-                "padding": "1.5rem"
-            }
-        }
-    },
-    "content": {
-        ".main-title": {
-            "value": "XiangJsonCraft 测试页面",
-            "isHtml": false
-        },
-        ".subtitle": {
-            "value": "基于JSON配置渲染的页面，无需手写CSS，修改JSON即可定制样式和内容！",
-            "isHtml": false
-        },
-        ".feature-title": {
-            "value": "核心特色：JSON解耦",
-            "isHtml": false
-        },
-        ".feature-desc": {
-            "value": "HTML仅负责搭建DOM骨架，样式、内容全由JSON控制，后期维护只需修改JSON，无需触碰HTML/JS代码。",
-            "isHtml": false
-        },
-        ".primary-btn": {
-            "value": "<span onclick=\"window.open('https://www.npmjs.com/package/xiangjsoncraft', '_blank')\">点我查看 NPM 包地址</span>",
-            "isHtml": true
-        }
-    }
-}

package/renderJson.js

@@ -1,133 +0,0 @@
-// 为String原型扩展驼峰转短横线方法，用于CSS属性名转换
-String.prototype.replaceCamelCase = function (separator = '-') {
-    // 容错：如果是纯数字/无驼峰的字符串，直接返回
-    return this.replace(/[A-Z]/g, (match) => `${separator}${match.toLowerCase()}`);
-};
-
-// 创建样式块并添加到文档头部，确保唯一且不重复创建
-function createStyleBlock() {
-    const style = document.createElement('style');
-    style.id = 'dynamic-styles';
-    // 把样式块插入到head最前面，避免被其他样式覆盖
-    document.head.insertBefore(style, document.head.firstChild);
-    return style;
-}
-
-// 核心渲染函数：本地config.json最高优先级，CDN配置兜底，全量容错
-export function renderJsonStyles() {
-    // 配置地址：本地自定义（最高优先级） + CDN官方兜底
-    const LOCAL_CONFIG = './config.json';
-    const CDN_CONFIG = 'https://cdn.jsdelivr.net/npm/xiangjsoncraft@1.1.1/config.json';
-
-    // 统一错误处理函数，避免单个错误中断整体渲染
-    const handleError = (msg) => {
-        console.error(`❌ XiangJsonCraft 错误: ${msg}`);
-    };
-
-    // 核心逻辑：先加载本地配置，失败则加载CDN兜底配置
-    fetch(LOCAL_CONFIG)
-        .then(async (res) => {
-            // 本地配置存在（状态码200-299），使用本地配置
-            if (res.ok) {
-                console.log('🔧 检测到本地config.json，优先加载用户自定义配置');
-                return res.json();
-            }
-            // 本地配置不存在/加载失败，切换到CDN配置
-            console.log('ℹ️  本地未检测到config.json，加载CDN官方示例配置');
-            const cdnRes = await fetch(CDN_CONFIG);
-            if (!cdnRes.ok) throw new Error('CDN官方配置加载失败，请检查网络');
-            return cdnRes.json();
-        })
-        .then((config) => {
-            // 容错：如果配置不是对象，直接终止渲染
-            if (typeof config !== 'object' || config === null || Array.isArray(config)) {
-                return handleError('配置文件格式错误，必须是标准JSON对象');
-            }
-
-            // 获取/创建样式块，确保渲染容器存在
-            const styleBlock = document.getElementById('dynamic-styles') || createStyleBlock();
-            if (!styleBlock) return handleError('样式块创建失败，无法渲染CSS');
-
-            // 生成CSS规则：处理styles节点，全量容错+格式美化
-            let cssRules = '';
-            const { styles = {} } = config; // 解构赋值，避免styles未定义
-
-            // 遍历所有CSS选择器（支持类、ID、媒体查询等所有合法选择器）
-            Object.entries(styles).forEach(([selector, styleObj]) => {
-                // 容错1：选择器为空/非字符串，跳过
-                const selectorStr = String(selector).trim();
-                if (!selectorStr) return;
-                // 容错2：选择器对应的不是样式对象，跳过
-                if (typeof styleObj !== 'object' || styleObj === null || Array.isArray(styleObj)) return;
-
-                // 处理单个选择器下的所有样式属性
-                const styleProps = Object.entries(styleObj)
-                    .map(([prop, value]) => {
-                        // 容错3：属性名强制转字符串+去空格，空属性直接跳过
-                        const propStr = String(prop).trim();
-                        if (!propStr) return '';
-                        // 容错4：属性值为空/无效，直接跳过
-                        if (value === undefined || value === null || String(value).trim() === '') return '';
-                        // 驼峰属性名转CSS标准短横线（如fontSize → font-size）
-                        const cssProp = propStr.replaceCamelCase();
-                        // 属性值强制转字符串，避免数字/布尔值渲染异常
-                        const cssValue = String(value).trim();
-                        // 返回合法的CSS属性行
-                        return `${cssProp}: ${cssValue};`;
-                    })
-                    .filter(Boolean) // 过滤所有空字符串，只留合法属性
-                    .join('\n    '); // 拼接成带缩进的整洁CSS
-
-                // 只有当有合法样式属性时，才生成CSS规则，避免空选择器
-                if (styleProps) {
-                    cssRules += `${selectorStr} {\n    ${styleProps}\n}\n\n`;
-                }
-            });
-
-            // 将生成的CSS注入到样式块，覆盖原有内容（避免重复渲染）
-            if (cssRules) {
-                styleBlock.innerHTML = cssRules;
-            }
-
-            // 渲染内容：处理content节点，向DOM注入文本/HTML
-            const { content = {} } = config; // 解构赋值，避免content未定义
-            Object.entries(content).forEach(([selector, contentObj]) => {
-                // 容错1：选择器为空/非字符串，跳过
-                const selectorStr = String(selector).trim();
-                if (!selectorStr) return;
-                // 容错2：内容配置不是对象，跳过
-                if (typeof contentObj !== 'object' || contentObj === null || Array.isArray(contentObj)) return;
-                // 容错3：缺少核心的value属性，跳过
-                if (!contentObj.hasOwnProperty('value')) return;
-
-                // 获取要注入内容的DOM节点，容错：节点不存在则跳过
-                const targetNodes = document.querySelectorAll(selectorStr);
-                if (targetNodes.length === 0) return;
-
-                // 解析内容配置：isHtml默认为false（纯文本）
-                const { value, isHtml = false } = contentObj;
-                const contentValue = String(value).trim(); // 内容强制转字符串，避免异常
-
-                // 向所有匹配的DOM节点注入内容
-                targetNodes.forEach((node) => {
-                    if (isHtml) {
-                        node.innerHTML = contentValue; // HTML片段渲染
-                    } else {
-                        node.textContent = contentValue; // 纯文本渲染（防XSS）
-                    }
-                });
-            });
-
-            // 渲染成功，打印友好提示
-            console.log('✅ XiangJsonCraft 渲染成功！样式+内容已全部加载');
-        })
-        .catch((err) => {
-            // 捕获所有异步错误，统一处理
-            handleError(err.message);
-        });
-}
-
-// 兼容UMD打包：暴露全局变量，方便CDN引入调用
-if (typeof window !== 'undefined') {
-    window.XiangJsonCraft = { renderJsonStyles };
-}