hellonevaehworld-sdk
Version:
Universal Hello World SDK for web and mobile applications
224 lines (217 loc) • 7.93 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.HelloWorldSDK = {}));
})(this, (function (exports) { 'use strict';
// Hello World SDK 入口文件
// 多语言文本内容
const TEXT_CONTENT = {
en: {
greeting: "Hello, World!",
subtitle: "A simple component built with TypeScript",
},
zh: {
greeting: "你好，世界！",
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-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');
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);
};
exports.HelloWorldSDK = HelloWorldSDK;
exports.createHelloWorld = createHelloWorld;
exports.createReactComponent = createReactComponent;
exports.default = HelloWorldSDK;
exports.renderHelloWorld = renderHelloWorld;
exports.utils = utils;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=index.umd.js.map