hellonevaehworld-sdk/dist/index.esm.js

Universal Hello World SDK for web and mobile applications

// Hello World SDK 入口文件
// 多语言文本内容
const TEXT_CONTENT = {
    en: {
        greeting: "Hello, web's World!",
        subtitle: "A simple component built with TypeScript",
    },
    zh: {
        greeting: "你好，web的世界！",
        subtitle: "这是一个用TypeScript编写的简单组件",
    }
};
// 主题样式
const THEMES = {
    light: {
        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        textColor: '#ffffff',
        shadowColor: 'rgba(0, 0, 0, 0.3)',
    },
    dark: {
        background: 'linear-gradient(135deg, #2c3e50 0%, #34495e 100%)',
        textColor: '#ecf0f1',
        shadowColor: 'rgba(0, 0, 0, 0.5)',
    }
};
// 核心SDK类
class HelloWorldSDK {
    constructor(config = {}) {
        this.config = {
            greeting: '',
            subtitle: '',
            theme: 'light',
            language: 'en',
            ...config
        };
    }
    // 获取文本内容
    getTextContent() {
        const defaultText = TEXT_CONTENT[this.config.language];
        return {
            greeting: this.config.greeting || defaultText.greeting,
            subtitle: this.config.subtitle || defaultText.subtitle,
        };
    }
    // 获取主题样式
    getThemeStyles() {
        return THEMES[this.config.theme];
    }
    // 生成内联样式（适用于React Native）
    getInlineStyles() {
        const theme = this.getThemeStyles();
        return {
            container: {
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                justifyContent: 'center',
                minHeight: 200,
                padding: 32,
                background: theme.background,
                borderRadius: 12,
                shadowColor: theme.shadowColor,
                shadowOffset: { width: 0, height: 4 },
                shadowOpacity: 0.1,
                shadowRadius: 6,
                elevation: 4, // Android shadow
            },
            title: {
                fontSize: 40,
                fontWeight: 'bold',
                color: theme.textColor,
                margin: 0,
                marginBottom: 16,
                textShadowColor: theme.shadowColor,
                textShadowOffset: { width: 2, height: 2 },
                textShadowRadius: 4,
                textAlign: 'center',
            },
            subtitle: {
                fontSize: 18,
                color: theme.textColor,
                margin: 0,
                textAlign: 'center',
                maxWidth: 400,
                opacity: 0.9,
            }
        };
    }
    // 生成CSS样式字符串（适用于Web）
    getCSSStyles() {
        const theme = this.getThemeStyles();
        return `
      .hello-world-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 200px;
        padding: 2rem;
        background: ${theme.background};
        border-radius: 12px;
        box-shadow: 0 4px 6px ${theme.shadowColor};
      }
      
      .hello-world-title {
        font-size: 2.5rem;
        font-weight: bold;
        color: ${theme.textColor};
        margin: 0 0 1rem 0;
        text-shadow: 2px 2px 4px ${theme.shadowColor};
        text-align: center;
      }
      
      .hello-world-subtitle {
        font-size: 1.1rem;
        color: ${theme.textColor};
        margin: 0;
        text-align: center;
        max-width: 400px;
        opacity: 0.9;
      }
    `;
    }
    // 生成HTML字符串（适用于Web）
    generateHTML() {
        const { greeting, subtitle } = this.getTextContent();
        return `
      <div class="hello-world-container">
        <h1 class="hello-world-title">${greeting}</h1>
        <p class="hello-world-subtitle">${subtitle}</p>
      </div>
    `;
    }
    // 更新配置
    updateConfig(newConfig) {
        this.config = { ...this.config, ...newConfig };
    }
    // 获取当前配置
    getConfig() {
        return { ...this.config };
    }
}
// 工具函数
const utils = {
    // 环境检测
    isWeb: () => typeof window !== 'undefined',
    isReactNative: () => typeof navigator !== 'undefined' && navigator.product === 'ReactNative',
    // 创建样式标签（Web端）
    injectStyles: (css) => {
        if (!utils.isWeb())
            return;
        const styleId = 'hello-world-sdk-styles';
        let styleElement = document.getElementById(styleId);
        if (!styleElement) {
            styleElement = document.createElement('style');
            styleElement.id = styleId;
            document.head.appendChild(styleElement);
        }
        styleElement.textContent = css;
    },
    // 渲染到DOM（Web端）
    renderToDOM: (sdk, containerId) => {
        if (!utils.isWeb())
            return;
        const container = document.getElementById(containerId);
        if (!container) {
            console.error(`Container with id "${containerId}" not found`);
            return;
        }
        // 注入样式
        utils.injectStyles(sdk.getCSSStyles());
        // 渲染HTML
        container.innerHTML = sdk.generateHTML();
    }
};
// React组件工厂（适用于React/React Native）
const createReactComponent = (sdk) => {
    return function HelloWorldComponent(props) {
        const { greeting, subtitle } = sdk.getTextContent();
        const styles = sdk.getInlineStyles();
        // 检测是否为React Native环境
        if (utils.isReactNative()) {
            const React = require('react');
            const { View, Text } = require('react-native-web');
            return React.createElement(View, { style: [styles.container, props.style] }, React.createElement(Text, { style: styles.title }, greeting), React.createElement(Text, { style: styles.subtitle }, subtitle));
        }
        else {
            // Web React
            const React = require('react');
            console.log('走的是web端');
            return React.createElement('div', {
                style: styles.container,
                className: props.style
            }, React.createElement('h1', { style: styles.title }, greeting), React.createElement('p', { style: styles.subtitle }, subtitle));
        }
    };
};
// 便捷的创建函数
const createHelloWorld = (config) => {
    return new HelloWorldSDK(config);
};
// 快速渲染函数
const renderHelloWorld = (containerId, config) => {
    const sdk = createHelloWorld(config);
    utils.renderToDOM(sdk, containerId);
};

export { HelloWorldSDK, createHelloWorld, createReactComponent, HelloWorldSDK as default, renderHelloWorld, utils };
//# sourceMappingURL=index.esm.js.map