@shijiu/jsview-vue 0.0.1-beta.0

package/docs/IMPORT_CHANGE_LOG.txt

@@ -0,0 +1,3 @@
+2021.9.1
+====================================
+1. 代码从jsview-export-react-sample分离后出版上传

package/docs/git_commit.md

@@ -0,0 +1,15 @@
+提交规范：
+
+主模块:子模块:改动点
+
+主模块: react_js 或者 java_app
+
+子模块: 
+	react_js
+		红包雨
+		Video播放
+		简易Simplewidget
+		...
+	java_app: DemoApp
+	
+例如: react_js:红包雨:提交XXXX修改

package/docs/test_version_up.txt

@@ -0,0 +1 @@
++8332

package/dom/browser-root-style.css

@@ -0,0 +1,21 @@
+*{
+  margin:0px;
+}
+div{
+  position: absolute;
+  background-size: 100% 100%;
+  white-space: pre-wrap;
+  pointer-events: none;
+}
+
+video {
+  position: absolute;
+  background-size: 100% 100%;
+}
+
+img{
+  position: absolute;
+  pointer-events: none;
+}
+
+

package/dom/jsv-browser-debug-dom.js

@@ -0,0 +1,8 @@
+import "./browser-root-style.css"
+
+// Release entry
+export * from "jsview-dom/jsview-browser-debug-dom.min"
+
+// Debug entry
+// TODO: 进行编译(yarn build)时，需要关闭掉此require
+// export * from "./code/src/dom-browser-hook/index"

package/dom/jsv-dom.js

@@ -0,0 +1,6 @@
+// Release entry
+export * from "jsview-dom/jsview-dom.min"
+
+// Debug entry
+// TODO: 进行编译(yarn build)时，需要关闭掉此require
+// export * from "./code/src/dom-wrapper/index"

package/dom/jsv-forge-define.js

@@ -0,0 +1,6 @@
+// Release entry
+export * from "jsview-dom/jsview-forge-define.min"
+
+// Debug entry
+// TODO: 进行编译(yarn build)时，需要关闭掉此require
+// export * from "./code/src/forge/index"

package/dom/target_core_revision.js

@@ -0,0 +1,14 @@
+/**
+ * Created by ludl on 1/27/21.
+ */
+
+const TargetRevision = {
+  "CoreRevision": 810895,
+  "JseRevision": "1.0.772",
+  "JseUrl":
+	"http://cdn.release.qcast.cn/forge_js/master/JsViewES6_react_r772.jsv.91a55796.js"
+};
+
+// 不要用export default，update-env脚本不能解析
+// export default TargetRevision;
+module.exports = TargetRevision;

package/load/header_script_loader.js

@@ -0,0 +1,134 @@
+/**
+ * Created by ludl on 3/30/20.
+ */
+
+function alterUrl(origin_url, js_sub_path) {
+  console.log(`++++++++ origin_url=${origin_url} js_sub_path = ${js_sub_path}`);
+  let schema_idx = origin_url.indexOf("://");
+  if (schema_idx < 0 || schema_idx > 10) {
+    // 非schema打头方式，认为是相对路径
+    if (!origin_url.startsWith('./') && !origin_url.startsWith('/')) {
+      origin_url = "./" + origin_url; // 补充相对路径头信息
+    }
+  }
+
+  if (origin_url.startsWith('./') || origin_url.startsWith('/')) {
+    const main_js_path = window.JsView.getAppUrl();
+    let idx = main_js_path.indexOf('?');
+    const host_path = (idx > 0 ? main_js_path.substring(0, idx) : main_js_path);
+    idx = host_path.lastIndexOf(js_sub_path);
+    const path_header = host_path.substring(0, idx);
+
+    let ret;
+    if (origin_url.startsWith('./')) {
+      ret = path_header + origin_url.substring(1);
+    } else {
+      // start with '/'
+      // remove protocal
+      let host_parser = main_js_path;
+      idx = host_parser.indexOf('://');
+      const protocol = (idx > 0 ? host_parser.substring(0, idx) : "");
+      host_parser = (idx > 1 ? host_parser.substring(idx + 3) : "");
+
+      // Get host
+      idx = host_parser.indexOf('/');
+      const host = (idx > 0 ? host_parser.substring(0, idx) : "");
+
+      ret = `${protocol}://${host}${origin_url}`;
+    }
+
+    return ret;
+  }
+  return origin_url;
+}
+
+class LoadingScriptElement {
+  constructor(js_sub_path) {
+    console.log(`++++++++ js_sub_path=${js_sub_path}`);
+    this.src = null;
+    this.onerror = null;
+    this.onload = null;
+    this.charset = null;
+    this.timeout = 120;
+    this._JsSubPath = js_sub_path;
+  }
+
+  setAttribute(name, value) {
+    console.log(`ScriptElement.setAttribute() name=${name}, value=`, value);
+    this[name] = value;
+  }
+
+  jsvActiveScript() {
+    if (this.src !== null) {
+      const url_href = alterUrl(this.src, this._JsSubPath);
+      console.log(`load script with url=${url_href}`);
+      const _this = this;
+      window.JsView.runJsWithUrl(url_href, false, (is_success, err_code) => {
+        _this.onLoadResult(is_success, err_code);
+      });
+    }
+  }
+
+  onLoadResult(is_success, err_code) {
+    console.log(`[Head]onLoadResult ${is_success} ${err_code}`);
+    if (is_success) {
+      if (this.onload) {
+        this.onload();
+      }
+    } else {
+      if (this.onerror) {
+        this.onerror({ type: `[Head]jsvErr_${err_code}`, target: this });
+      }
+    }
+  }
+}
+
+class LoadingHeader {
+  constructor() {
+    console.log("Document header construct");
+  }
+
+  appendChild(node) {
+    if (node instanceof LoadingScriptElement) {
+      console.log("Found append script in head.");
+      node.jsvActiveScript();
+    }
+  }
+}
+
+class LoadingDocument {
+  constructor(js_sub_path) {
+    this.head = new LoadingHeader();
+    this._JsSubPath = js_sub_path;
+  }
+
+  createElement(name) {
+    console.log(`HeaderDocument.createElement() name=${name}`);
+    switch (name) {
+      case "script":
+        return new LoadingScriptElement(this._JsSubPath);
+      default:
+        console.warn(`HeaderDocument.createElement() name=${name}`);
+        return null;
+    }
+  }
+
+  getElementsByTagName(name) {
+    if (name.toLowerCase() === "head") {
+      return [this.head];
+    }
+    if (name.toLowerCase() === "link"
+      || name.toLowerCase() === "script"
+      || name.toLowerCase() === "style") {
+      return [];
+    }
+
+    throw Error("LoadingDocument.getElementsByTagName() name=" + name + " is UNIMPLEMENTED.");
+  }
+}
+
+function initHeaderScriptLoader(js_sub_path) {
+  window.document = new LoadingDocument(js_sub_path);
+}
+
+export default initHeaderScriptLoader;

package/load/jsview-main.js

@@ -0,0 +1,42 @@
+import JsViewDefConfig from "./jsview.default.config"
+import JsViewVendorConfig from "/src/appConfig/jsview.config"
+import { loadJsViewEnv } from './loader'
+
+function deepMerge(target, source) {
+  const isObject = (obj) => obj && typeof obj === 'object';
+
+  if (!isObject(target) || !isObject(source)) {
+    return source;
+  }
+
+  Object.keys(source).forEach(key => {
+    const targetValue = target[key];
+    const sourceValue = source[key];
+
+    if (Array.isArray(targetValue) && Array.isArray(sourceValue)) {
+      target[key] = targetValue.concat(sourceValue);
+    } else if (isObject(targetValue) && isObject(sourceValue)) {
+      target[key] = deepMerge(Object.assign({}, targetValue), sourceValue);
+    } else {
+      target[key] = sourceValue;
+    }
+  });
+
+  return target;
+}
+
+function main() {
+    // 使用vendor配置值覆盖默认配置。
+    let config = JsViewDefConfig;
+    deepMerge(config, JsViewVendorConfig);
+    console.log("JsView config: " + JSON.stringify(config));
+
+    // 加载jsview运行环境。
+    loadJsViewEnv(config, () => {
+        // JsView环境加载完毕后，加载vue的main.js文件。
+        import('/src/main.ts');
+    })
+}
+
+// webpack运行入口
+main();

package/load/jsview.config.default.js

@@ -0,0 +1,37 @@
+export default {
+    jsviewConfig: {
+        // (可选配置)localStorage支持
+        // domain可以为任意字符串，各Domain的localStorage互相隔离, 默认值是hostname
+        // presetKeys为预置key，可以直接使用localStorage.xxx的形式，避免undefined错误
+        localStorage: {
+            domain: "default",
+            presetKeys: [
+                "value1",
+                "value2"
+            ],
+        },
+
+        // (可选配置)填写main.js或者bundle.js相对于index.html的相对位置，
+        // 用于image/import.then的相对寻址, vue3默认值是/js/
+        jsSubPath: "/js/",
+    },
+
+    vendorConfig: {
+        // (可选配置)设置屏幕坐标映射值，screenWidth为屏幕画布定义的宽度，displayScale为清晰度，
+        // 默认值是画布宽度1280px, 清晰度为1.0
+        designedMap: {
+            screenWidth: 1280,
+            displayScale: 1.0
+        },
+
+        // (可选配置)按键接受的扩展，例如将静音按键(JAVA键值为164)映射为JS键值20001，
+        // PS:注意"164"的引号
+        bindKeys: {
+            keys: {
+                164: 20001
+            },
+            syncKeys: {
+            }
+        },
+    }
+}

package/load/jsview.default.config.js

@@ -0,0 +1,37 @@
+export default {
+    jsviewConfig: {
+        // (可选配置)localStorage支持
+        // domain可以为任意字符串，各Domain的localStorage互相隔离, 默认值是hostname
+        // presetKeys为预置key，可以直接使用localStorage.xxx的形式，避免undefined错误
+        localStorage: {
+            domain: "default",
+            presetKeys: [
+                "value1",
+                "value2"
+            ],
+        },
+
+        // (可选配置)填写main.js或者bundle.js相对于index.html的相对位置，
+        // 用于image/import.then的相对寻址, vue3默认值是/js/
+        jsSubPath: "/js/",
+    },
+
+    vendorConfig: {
+        // (可选配置)设置屏幕坐标映射值，screenWidth为屏幕画布定义的宽度，displayScale为清晰度，
+        // 默认值是画布宽度1280px, 清晰度为1.0
+        designedMap: {
+            screenWidth: 1280,
+            displayScale: 1.0
+        },
+
+        // (可选配置)按键接受的扩展，例如将静音按键(JAVA键值为164)映射为JS键值20001，
+        // PS:注意"164"的引号
+        bindKeys: {
+            keys: {
+                164: 20001
+            },
+            syncKeys: {
+            }
+        },
+    }
+}

package/load/loader.js

@@ -0,0 +1,172 @@
+import initHeaderScriptLoader from "./header_script_loader";
+import TargetRevision from "../dom/target_core_revision"
+import AppData from '/src/appConfig/app_config.json'
+
+// Forge define
+if (typeof window.Forge === 'undefined') { window.Forge = {}; }
+const Forge = window.Forge;
+
+function initDesignedMap(input_designed_map) {
+  window.Forge.DesignMap = function () {
+    let designMap = { width: 1280, displayScale: 1.0 };
+    try {
+      if (input_designed_map) {
+        const new_designed_map = {
+          width: input_designed_map.screenWidth,
+          displayScale: input_designed_map.displayScale
+        };
+        designMap = new_designed_map;
+      }
+    } catch (e) {
+      console.error("load designed map failed");
+    }
+
+    // 设置播放器的屏幕坐标尺寸
+    if (window.JsView && window.JsView.setVideoDesignMapWidth) {
+      window.JsView.setVideoDesignMapWidth(designMap.width);
+    } else {
+      // 借助Audio标签设置基类BaseMedia的屏幕尺寸配置，绕开react的unref语法检测
+      if (Audio.setDesignMapWidth) {
+        Audio.setDesignMapWidth(designMap.width);
+      }
+    }
+
+    return designMap;
+  };
+}
+
+// eslint-disable-next-line no-unused-vars
+let sJsViewForgeAppDefine = null;
+async function selectJsViewRuntime(js_sub_path, input_designed_map, app_name) {
+  // 初始Forge的启动入口
+  initEntry();
+
+  initDesignedMap(input_designed_map);
+  if (window.JsView) {
+    if (app_name && window.JsView.notifyAppName) {
+      window.JsView.notifyAppName(app_name);
+    }
+    initHeaderScriptLoader(js_sub_path);
+    const app_define = await import("../dom/jsv-dom.js");
+    sJsViewForgeAppDefine = app_define.JsViewForgeApp;
+    window.JsView.ForgeExt = app_define.ForgeExtension;
+    window.JsView.Dom.JsSubPath = js_sub_path;
+  } else {
+    await import("../dom/jsv-browser-debug-dom.js");
+  }
+}
+
+// 当confirmEntry和Forge.RunApp都被调用完成后，才会进行JsViewForgeApp运行
+// eslint-disable-next-line no-var
+let sActivityManager = null;
+// eslint-disable-next-line no-var
+let sEntryConfirmed = false;
+let sJsViewApp = null;
+
+function startForgeApp() {
+  if (sActivityManager !== null && sEntryConfirmed) {
+    console.log("Forge.RunApp().");
+    // eslint-disable-next-line new-cap
+    sJsViewApp = new sJsViewForgeAppDefine(sActivityManager);
+    console.log(sJsViewApp);
+  }
+}
+
+function confirmEntry() {
+  sEntryConfirmed = true;
+  if (window.JsView) {
+    checkEngineVersion();
+  }
+  startForgeApp();
+}
+
+function initEntry() {
+  Forge.RunApp = function (activity_manager) {
+    console.log("Call from Forge.Run");
+    sActivityManager = activity_manager;
+    startForgeApp();
+  };
+}
+
+async function runMain() {
+  console.log("main.js loaded...");
+
+  // 确定并进行Forge模块的启动
+  confirmEntry();
+
+  console.log("main.js done...");
+}
+
+function checkEngineVersion() {
+  // 检查配套引擎的版本
+  if (
+    window.JsView.CodeRevision !== TargetRevision.CoreRevision /* Native引擎版本(由APK启动参数 CORE 决定) */ ||
+    window.Forge.Version !== TargetRevision.JseRevision /* JS引擎版本(由APK启动参数 ENGINEJS 决定) */
+  ) {
+    console.warn(
+      `Warning: JsView Engine version miss matched, some effect will be lost. url should be ${TargetRevision.JseUrl}`
+    );
+  }
+}
+
+function getHostName() {
+  const full_url = window.location.href;
+  let idx = full_url.indexOf("://");
+  // const protocol = (idx > 0 ? full_url.substring(0, idx + 1) : "");
+  const host_path = idx > 1 ? full_url.substring(idx + 3) : "";
+
+  idx = host_path.indexOf("/");
+  const host = idx > 0 ? host_path.substring(0, idx) : "";
+
+  return host;
+}
+
+async function startApp(config, onLoaded) {
+  console.log("StartApp...");
+  if (window.JsView) {
+    // 运行在JsView引擎中
+
+    // (可选配置)按键接受的扩展，例如将静音按键(JAVA键值为164)映射为JS键值20001，PS:注意"164"的引号
+    window.JsView.addKeysMap(config.vendorConfig.bindKeys);
+
+    // (可选配置)localStorage支持
+    let storageDomain = config.jsviewConfig.localStorage.domain;
+    if(storageDomain == "default") {
+      storageDomain = getHostName();
+    }
+    window.JsView.setStorageDomain(storageDomain); // Domain可以为任意字符串，各Domain的localStorage互相隔离
+    window.JsView.enableStorageNames(...config.jsviewConfig.localStorage.presetKeys);
+
+    // JsView Dom相关配置
+    window.JsView.Dom.Render = function () {
+      onLoaded()
+    };
+  } else {
+      await onLoaded()
+  }
+}
+
+async function loadJsViewEnv(config, onLoaded) {
+  // 参数说明：
+  // /static/js/: (可选配置)填写main.js或者bundle.js相对于index.html的相对位置，用于image/import.then的相对寻址
+  // {screenWidth:1280, displayScale:1.0}: (可选配置)设置屏幕坐标映射值，前者为屏幕画布定义的宽度，后者为清晰度，
+  //                                     默认值是画布宽度1280px, 清晰度为1.0
+  await selectJsViewRuntime(config.jsviewConfig.jsSubPath,
+                            config.vendorConfig.designedMap,
+                            AppData.AppName);
+                            
+  if (!window.JsView) {
+    await import("../utils/JsViewVueWidget/BrowserDebugWidget/WidgetLoader");
+  }
+  
+  await startApp(config, onLoaded);
+
+  // 环境启动后，动态加载React框架和main
+  runMain();
+
+  console.log("index.js loaded AppName=" + AppData.AppName);
+}
+
+export {
+  loadJsViewEnv,
+};

package/load/loader_webkit.js

@@ -0,0 +1,40 @@
+window.JsvDisableReactWrapper = true; // 设置标识位，有部分高阶组件根据此标识位决定元素的搭建方式
+
+// Forge define
+if (typeof window.Forge === 'undefined') { window.Forge = {}; }
+const Forge = window.Forge;
+
+// const sForgeReactAppDefine = null;
+function loadJsViewProxy(callback, js_sub_path) {
+  callback();
+}
+
+// 当confirmEntry和Forge.RunApp都被调用完成后，才会进行ForgeReactApp运行
+let sActivityManager = null;
+let sEntryConfirmed = false;
+// let sReactApp = null;
+
+function startForgeApp() {
+  if (sActivityManager !== null && sEntryConfirmed) {
+    console.log("Forge.RunApp().");
+    // sReactApp = new sForgeReactAppDefine(sActivityManager);
+  }
+}
+
+function confirmEntry() {
+  sEntryConfirmed = true;
+  startForgeApp();
+}
+
+function initEntry() {
+  Forge.RunApp = function (activity_manager) {
+    sActivityManager = activity_manager;
+    startForgeApp();
+  };
+}
+
+export {
+  loadJsViewProxy,
+  initEntry,
+  confirmEntry
+};

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@shijiu/jsview-vue",
+  "version": "0.0.1-beta.0",
+  "bin": {
+    "jsview-post-build": "./scripts/post-build.js",
+    "jsview-post-install": "./scripts/post-install.js",
+    "jsview-install-local-packages": "./scripts/install-local-packages.js"
+  },
+  "scripts": {
+  },
+  "repository": "system/jsview-vue",
+  "bugs": "http://gitlab.qcast.cn/system/jsview-vue/issues",
+  "keywords": [
+    "jsview",
+    "vue",
+    "jsview-vue",
+    "jsview-dom",
+    "jsview-utils",
+    "jsview-docs"
+  ],
+  "author": "mengxk",
+  "homepage": "http://gitlab.qcast.cn/system/jsview-vue",
+  "license": "MIT",
+  "engines": {
+    "node": ">=14.0.0"
+  }
+}