@huawei-ide/codearts 0.0.9 → 1.0.1

package/README.md

@@ -1,5 +1,6 @@
 # @huawei-ide/codearts
-用于集成CodeArts IDE Web
+
+用于集成 CodeArts IDE Web
 
 ## 如何使用
 
@@ -9,15 +10,16 @@
 2. 引入 @huawei-ide/codearts  
    `const ide = require('@huawei-ide/codearts');`
 
-3. 预加载IDE, 返回Promise：     
+3. 预加载 IDE, 返回 Promise：  
    `await ide.preload();`
 
-4. 展示IDE  
-   其中id参数为挂载节点id,返回Promise：
+4. 展示 IDE  
+   其中 id 参数为挂载节点 id, 返回 Promise：
    `ide.show(id: string, {width：string,height: string}).then(() => {});`
 
-5. 打开文件  
-   参数content为文件内容，类型为string，path是工程内文件的唯一路径，例如'src', 'src/tool', name为带后缀的文件名：
+5. 打开文件，默认可编辑  
+   参数 content 为文件内容，类型为 string，path 是工程内文件的唯一路径，例如'src', 'src/tool', name 为带后缀的文件名：
+
    ```
    ide.openFile({
         content: '## ReadME',
@@ -26,5 +28,22 @@
     });
    ```
 
-6. 销毁IDE  
-   `ide.dispose();`
+6. 设置文件是否为预览(只读)状态  
+   `ide.setPreview(preview: boolean)`
+
+7. 获取当前文件最新内容，返回 Promise：  
+   `await ide.getContent();`
+
+8. 设置 Token：  
+   `ide.setToken();`
+
+9. 监听当前文件变化
+
+   ```
+   const event = ide.onDidChange(listener: (content: string) => {});
+   // 销毁监听
+   event.dispose();
+   ```
+
+10. 销毁 IDE  
+    `ide.dispose();`

package/index.js

@@ -1,40 +1,75 @@
-var iframe = document.createElement('iframe');
+import { EventEmitter } from './util'
+
+const hcOrigin = 'https://res.hc-cdn.com';
+const iframe = document.createElement('iframe');
 iframe.id = 'codeartside';
-iframe.src = 'https://res.hc-cdn.com/codearts-core-web-static/1.0.15/resources/server/gitcode.html';
+iframe.src = hcOrigin + '/codearts-core-web-static/1.0.17/resources/server/gitcode.html';
 iframe.width = '1px';
 iframe.height = '1px';
 iframe.style.opacity = 0;
 iframe.style.zIndex = -1;
 
-export function preload() {
-    document.body.appendChild(iframe);
+const ON_DID_CHANGE = 'onDidChange';
+const eventEmitter = new EventEmitter();
+
+function ideLoading() {
     return new Promise((resolve) => {
-        window.addEventListener('message', function(event) {
-			console.log('-gitcode--receive message---', event.data);
+        function handleMessage(event) {
+            console.log('-gitcode--receive message---', event.data);
+            if (event.origin !== hcOrigin) {
+                return;
+            }
             if (event.data === 'ide-loaded') {
                 resolve();
+                window.removeEventListener('message', handleMessage);
+            }
+        }
+        window.addEventListener('message', handleMessage);
+    });
+}
+
+function ideContent() {
+    return new Promise((resolve) => {
+        function handleMessage(event) {
+            const { type, data } = event.data;
+            console.log('-gitcode--receive message---', event.data);
+            if (event.origin !== hcOrigin) {
+                return;
             }
-        });
+            if (type === 'ide-content') {
+                resolve(data);
+                window.removeEventListener('message', handleMessage);
+            }
+        }
+        window.addEventListener('message', handleMessage);
     });
 }
 
+function onDidRecieveMessage(event) {
+    const { type, data } = event.data;
+    if (event.origin !== hcOrigin) {
+        return;
+    }
+    if (type === 'ide-on-did-change-file') {
+        eventEmitter.emit(ON_DID_CHANGE, data);
+    }
+}
+
+export function preload() {
+    document.body.appendChild(iframe);
+    return ideLoading();
+}
+
 // style: { width: string, height: string }
 export function show(id, style) {
     var targetNode = document.getElementById(id);
     targetNode.appendChild(iframe);
-    const {width, height} = style;
-    iframe.width = width; 
-    iframe.height = height; 
+    const { width, height } = style;
+    iframe.width = width;
+    iframe.height = height;
     iframe.style.opacity = 1;
     iframe.style.zIndex = 1;
-    return new Promise((resolve) => {
-        window.addEventListener('message', function(event) {
-			console.log('-gitcode--receive message---', event.data);
-            if (event.data === 'ide-loaded') {
-                resolve();
-            }
-        });
-    });
+    return ideLoading();
 }
 
 // file: { content: string, path: string, name: string }
@@ -47,9 +82,49 @@ export function openFile(file) {
 }
 
 export function dispose() {
-    iframe.parentNode.removeChild(iframe);
+    window.removeEventListener('message', onDidRecieveMessage);
+    eventEmitter.clear();
+    iframe.remove();
+}
+
+export function setPreview(preview) {
+    const message = {
+        type: 'setPreview',
+        data: preview
+    };
+    postMessage(message);
+}
+
+export function getContent() {
+    const message = {
+        type: 'getContent'
+    };
+    postMessage(message);
+    return ideContent();
+}
+
+export function setToken(token) {
+    const message = {
+        type: 'setToken',
+        data: token
+    };
+    postMessage(message);
 }
 
 function postMessage(message) {
-    iframe.contentWindow.postMessage(message, '*');
+    iframe.contentWindow.postMessage(message, hcOrigin);
+}
+
+let isRegisteredListener = false;
+export function onDidChange(listener) {
+    if (!isRegisteredListener) {
+        window.addEventListener('message', onDidRecieveMessage);
+        isRegisteredListener = true;
+    }
+    eventEmitter.on(ON_DID_CHANGE, listener);
+    return {
+        dispose: () => {
+            eventEmitter.off(ON_DID_CHANGE, listener);
+        }
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huawei-ide/codearts",
-  "version": "0.0.9",
+  "version": "1.0.1",
   "description": "",
   "main": "index.js",
   "scripts": {

package/util.js

@@ -0,0 +1,30 @@
+export class EventEmitter {
+    constructor() {
+        this.events = {};
+    }
+
+    on(event, listener) {
+        if (!this.events[event]) {
+            this.events[event] = [];
+        }
+        this.events[event].push(listener);
+    }
+
+    emit(event, ...args) {
+        if (this.events[event]) {
+            this.events[event].forEach(listener => {
+                listener(...args);
+            });
+        }
+    }
+
+    off(event, listener) {
+        if (this.events[event]) {
+            this.events[event] = this.events[event].filter(l => l !== listener);
+        }
+    }
+
+    clear() {
+        this.events = {};
+    }
+}