Cannot build with 2 panels in cep.config.ts

adamplouff commented 11 months ago

Non-working example (Overlord 2)

I am working on an extension with a visible and invisible panel that talk to one another. When developing everything works great, but once the ZXP is built, it seems like having 2 panels defined in cep.config.ts breaks the build.

// cep.config.ts
panels: [
    {
      mainPath: "./main/index.html",
      name: "main",
      panelDisplayName: "Overlord Legacy",
      autoVisible: true,
      width: 600,
      height: 650,
      minWidth: 40,
      minHeight: 40,
    },
    {
      mainPath: "./main/index.html",
      name: "server",
      type: "Custom",
      startOnEvents: ["com.adobe.csxs.events.ApplicationInitialized", "applicationActivate"],
      autoVisible: false,
      width: 600,
      height: 650,
    },
]

Generates an index.html ending with

</script>

    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Overlord Legacy</title>

    <link rel="stylesheet" href="../assets/index-812fff56.css">
  </head>
  <body>
    <div id="root"></div>

    <script src="../assets/server-509d7a18.js"></script>
  </body>
</html>

The filename server-509d7a18.js seems to be related to the second panel name: "server", in cep.config.ts which then points to ./main-66f56e2c.js

// server-509d7a18.js
"use strict"
if (typeof exports === 'undefined') { var exports = {}; };require("./main-66f56e2c.js");
//# sourceMappingURL=server-509d7a18.js.map

When installing from the built ZXP, the panel is blank. Debugging returns the error:

Uncaught Error: Cannot find module './main-66f56e2c.js'

[!note]

Suggested solution

Generate index.html to point directly to main-xxxxxx.js rather than server-xxxxxx.js with the require().

Working setup (Rubberhose 3)

Having a single panel declared in cep.config.ts works great.

// cep.config.ts
panels: [
    {
      mainPath: "./main/index.html",
      name: "main",
      panelDisplayName: "Rubberhose 3",
      autoVisible: true,
      width: 600,
      height: 650,
    },

  ],

Generates an index.html ending with

</script>

    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Rubberhose 3</title>

    <link rel="stylesheet" href="../assets/index-fa1babaa.css">
  </head>
  <body>
    <div id="root"></div>

    <script src="../assets/main-0c1c973d.js"></script>
  </body>
</html>

The reference to main-0c1c973d.js is the real js code:

// main-0c1c973d.js
"use strict"
if (typeof exports === 'undefined') { var exports = {}; };function De(){}const bu=e=>e;function Se(e,t){for(const r in t)e[r]=t[r];return e}function Bp(e){return e()}function Pc(){return

...

justintaylor-dev commented 11 months ago

If you have 2 panels with varying code bases, then there "should" be 3 JS files generated, one for each panel and one containing all shared assets.

example:

panel-a.js
panel-b.js
shared.js

However I believe the issue you're facing is caused by using the same index.html for both panels. For multi-panel extensions, try separating them into something like:

./main/index.html
./server/index.html

and update your cep.config.ts to:

    {
      mainPath: "./settings/index.html",
      name: "server",
      type: "Custom",
      startOnEvents: ["com.adobe.csxs.events.ApplicationInitialized", "applicationActivate"],
      autoVisible: false,
      width: 600,
      height: 650,
    },

more info here

That should resolve the issue, let me know if that works. Thanks!

justintaylor-dev commented 11 months ago

That should resolve it, but if the issue pops up again, feel free to re-open this issue.

adamplouff commented 11 months ago

Confirmed: this works.

I misunderstood how panels load different html and js files –and how segmenting this data is good practice for reducing redundancies with unnecessary duplications.

Steps to fix this error

Create a new folder that matches the second panel mainPath: "./server/index.html",

├── src
│   ├── main
│   │   ├── index.html
│   │   ├── main.svelte
│   │   ├── main.ts
│   ├── server
│   │   ├── index.html
│   │   ├── main.ts

[!note] Since the server panel is headless it doesn't need the main.svelte file for UI. Even more savings. Just had to include export {} at the end of the main.ts file to load correctly as a module.

Thanks @justintaylor-dev