Skip to content

2.0 Upgrade Common Issues

Code Compatibility Check

  1. The find series APIs are deprecated. Please use findAsync and other interfaces instead. Example:
ts
const adapt_findAll = async (node: any, cb?: (node: any) => boolean) => {
  if (pixso.apiVersion === "1.0.0") {
    return node.findAll(cb);
  } else {
    return (await (node as any).findAllAsync()).filter(cb);
  }
};
  1. 2.0 plugin iframe has been changed to null origin iframe. When passing data from UI to plugin code, you need to explicitly specify parentOrigin as *
ts
window.parent.postMessage({ pluginMessage: "This is a message" }, "*");
  1. Upgrade @pixso/plugin-cli to 1.0.8 or later
bash
npm install @pixso/plugin-cli@latest -D
  1. localStorage etc. Web APIs are not available in null origin iframe, please use pixso.clientStorage instead, or use the compatible solution
ts
// ui.html
<!DOCTYPE html>
<html>

<head>
    <title>plugin</title>
    <script>
        // localStorage polyfill - must be executed before all other scripts
        // In data: URLs or pages injected with document.write, localStorage will throw a SecurityError
        (function() {
            let needsPolyfill = false;
            try {
                localStorage.getItem('test');
            } catch (e) {
                needsPolyfill = true;
            }

            if (needsPolyfill) {
                const memoryStorage = {};
                
                Object.defineProperty(window, 'localStorage', {
                    value: {
                        getItem: function(key) {
                            return memoryStorage[key] || null;
                        },
                        setItem: function(key, value) {
                            memoryStorage[key] = String(value);
                        },
                        removeItem: function(key) {
                            delete memoryStorage[key];
                        },
                        clear: function() {
                            for (const key in memoryStorage) {
                                delete memoryStorage[key];
                            }
                        },
                        key: function(index) {
                            const keys = Object.keys(memoryStorage);
                            return keys[index] || null;
                        },
                        get length() {
                            return Object.keys(memoryStorage).length;
                        }
                    },
                    writable: true,
                    configurable: true
                });
            }
        })();
    </script>
</head>

<body>
    <div id="app"></div>
</body>

</html>

Other Issues

  1. The host configuration in manifest has been deprecated
ts
  // Old configuration, no longer supported
  "main": {
    "sandbox": "dist/main.js",
    "host": "dist/host.js"
  }
  // New configuration
  "main": "dist/main.js"