solid-panorama-polyfill v0.2.0

solid-panorama-polyfill

This library is fork from panorama-polyfill.

这个库的使用方法跟ark120202/panorama-polyfill不一样，比ark120202/panorama-polyfill复杂一些，ark120202/panorama-polyfill是通过 import lib 的方式导入全局，这样的做法在只存在一个界面作用域的情况下很好，如果存在多个界面的作用域，那么不是很理想的，我的想法是把console和计时器的函数注入到每个界面的作用域里。

在 PUI 我们都会通过custom_ui_manifest.xml来指定界面入口，而 PUI 会为给每个界面独立的作用域，目的是为了编译后重载不干扰到其它界面。

<root>
    <Panel>
        <CustomUIElement type="Hud" layoutfile="file://{resources}/layout/custom_game/Hud_A.xml" />
        <CustomUIElement type="Hud" layoutfile="file://{resources}/layout/custom_game/Hud_B.xml" />
    </Panel>
</root>

比如上面两个 Hud 界面 Hud_A 和 Hud_B，如果 Hud_A 使用了 Hud_B 的函数，Hud_B 的函数抛出错误，那么 Error 里的调用栈是缺失的，计时器的运行也是根据所处的作用域，可以理解为每个 Hud 界面都有自己的计时器管理器，比如 Hud_B 里实现了一个useTimer的函数，Hud_A 使用 Hud_B 里的useTimer，如果 Hud_A 发生改动触发重载，此时useTimer不会终止依然会继续运行，因为useTimer所使用的计时器来自 Hud_B，而 Hud_B 没有发生重载，所以计时器需要在相同作用域下才能达到良好的重载效果。

使用方法

import { bundlePanoramaPolyfill } from 'solid-panorama-polyfill';

async function run() {
    await bundlePanoramaPolyfill({
        output: '<your addon content path>/panorama/scripts/custom_game/panorama-polyfill.js',
        using: { console: true, timers: true }
    });
}

• 在global.d.ts中引入全局声明。

// example: src/global.d.ts
/// <reference path="../node_modules/solid-panorama-polyfill/console.d.ts" />
/// <reference path="../node_modules/solid-panorama-polyfill/timers.d.ts" />

• 最后在 xml 文件中使用panorama-polyfill.js，最好将该文件放在最前面。

<root>
    <scripts>
        <include src="file://{resources}/scripts/custom_game/panorama-polyfill.js" />
        <include src="file://{resources}/scripts/custom_game/hud_main.js" />
    </scripts>
</root>

关于 console

在ark120202/panorama-polyfill中是使用object-inspect这个库对 object 等参数进行格式化，由于引入了太多的代码，所以移除了object-inspect，并对 object 等参数其进行了简单的格式化，另外也加入了console.logx，跟console.log不一样的地方是打印 object 或者 array 等会垂直展开，而不是打印在同一行。

自定义

如果你有自己的需求，可以通过merges选项合并代码到output。

await bundlePanoramaPolyfill({
    output: '<your addon content path>/panorama/scripts/custom_game/panorama-polyfill.js',
    using: { console: true, timers: false },
    merges: ['./my-polyfill/timers.js']
});

建议代码用函数包裹：

(function () {
    globalThis.myFunc = function () {};
})();