shuidi.sharepublic.sdk 0.1.0

package/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "shuidi.sharepublic.sdk",
+  "version": "0.1.0",
+  "description": "SDK for initializing shared public components into a container",
+  "main": "sharepublicsdk.js",
+  "browser": "sharepublicsdk.js",
+  "keywords": [
+    "sharepublic",
+    "components",
+    "sdk",
+    "iframe"
+  ],
+  "license": "MIT"
+}
+
+

package/sharepublicsdk.js

@@ -0,0 +1,160 @@
+// SharePublic SDK
+;(function (global) {
+  'use strict'
+
+  const BASE_URL = 'http://127.0.0.1:9001'
+
+  function init(options) {
+    const { containerId, componentId, token, props = {}, baseUrl = BASE_URL } = options || {}
+
+    if (!componentId) throw new Error('缺少 componentId')
+
+    const container = typeof containerId === 'string'
+      ? document.getElementById(containerId)
+      : containerId
+    if (!container) throw new Error('找不到容器：' + containerId)
+
+    const url = baseUrl.replace(/\/+$/, '') + '/api/v1/components/' + componentId
+
+    return fetch(url)
+      .then(r => {
+        if (!r.ok) throw new Error('获取组件失败')
+        return r.json()
+      })
+      .then(component => {
+        if (component.component_type !== 'iframe' || !component.iframe_url) {
+          throw new Error('不支持的组件类型')
+        }
+
+        // 将 props 编码成 URL 参数
+        const queryParams = []
+        
+        // 处理 props，将对象和数组序列化为 JSON 字符串
+        if (props && typeof props === 'object') {
+          Object.keys(props).forEach(key => {
+            const value = props[key]
+            if (value !== undefined && value !== null) {
+              // 如果是对象或数组，序列化为 JSON 字符串
+              const encodedValue = typeof value === 'object' 
+                ? encodeURIComponent(JSON.stringify(value))
+                : encodeURIComponent(String(value))
+              queryParams.push(encodeURIComponent(key) + '=' + encodedValue)
+            }
+          })
+        }
+        
+        // 添加 token
+        if (token) {
+          queryParams.push('token=' + encodeURIComponent(token))
+        }
+        
+        // 构建完整的 iframe URL
+        const qs = queryParams.join('&')
+        const separator = component.iframe_url.includes('?') ? '&' : '?'
+        const src = component.iframe_url + (qs ? separator + qs : '')
+
+        container.innerHTML = ''
+        const iframe = document.createElement('iframe')
+        iframe.src = src
+        iframe.width = '100%'
+        iframe.height = '100%'
+        iframe.style.border = 'none'
+        iframe.setAttribute('frameborder', '0')
+        container.appendChild(iframe)
+
+        // 创建组件实例对象，提供调用方法的功能
+        const componentInstance = {
+          iframe: iframe,
+          componentId: componentId,
+          methods: component.methods || {},
+          
+          /**
+           * 调用组件的公共方法
+           * @param {string} methodName - 方法名
+           * @param {object} params - 方法参数对象
+           * @returns {Promise} - 返回 Promise，如果组件有响应则 resolve
+           */
+          callMethod: function(methodName, params = {}) {
+            if (!methodName || typeof methodName !== 'string') {
+              return Promise.reject(new Error('方法名必须是字符串'))
+            }
+
+            // 检查方法是否存在
+            if (!this.methods[methodName]) {
+              return Promise.reject(new Error(`方法 "${methodName}" 不存在`))
+            }
+
+            // 通过 postMessage 向 iframe 发送消息
+            const message = {
+              type: 'callMethod',
+              method: methodName,
+              params: params
+            }
+
+            // 发送消息到 iframe
+            if (iframe.contentWindow) {
+              iframe.contentWindow.postMessage(message, '*')
+              
+              // 返回 Promise，可以用于处理响应（如果组件有响应的话）
+              return Promise.resolve({
+                method: methodName,
+                params: params,
+                sent: true
+              })
+            } else {
+              return Promise.reject(new Error('iframe 尚未加载完成'))
+            }
+          },
+
+          /**
+           * 监听来自组件的消息（事件）
+           * @param {string} eventName - 事件名
+           * @param {function} callback - 回调函数
+           */
+          on: function(eventName, callback) {
+            if (typeof callback !== 'function') {
+              throw new Error('回调函数必须是函数')
+            }
+
+            const messageHandler = (event) => {
+              // 验证消息来源（可选，根据实际需求调整）
+              if (event.data && event.data.type === 'event' && event.data.event === eventName) {
+                callback(event.data.params || {})
+              }
+            }
+
+            window.addEventListener('message', messageHandler)
+            
+            // 返回取消监听的函数
+            return () => {
+              window.removeEventListener('message', messageHandler)
+            }
+          }
+        }
+
+        // 等待 iframe 加载完成后返回组件实例
+        return new Promise((resolve, reject) => {
+          iframe.onload = () => {
+            resolve(componentInstance)
+          }
+          iframe.onerror = () => {
+            reject(new Error('iframe 加载失败'))
+          }
+          // 如果 iframe 已经加载完成
+          if (iframe.contentDocument && iframe.contentDocument.readyState === 'complete') {
+            resolve(componentInstance)
+          }
+        })
+      })
+  }
+
+  const api = { init }
+
+  if (typeof module !== 'undefined' && module.exports) {
+    module.exports = api
+  } else if (typeof define === 'function' && define.amd) {
+    define([], () => api)
+  } else {
+    global.SharePublicSDK = api
+  }
+})(typeof window !== 'undefined' ? window : this)