Third party dependencies and production build issue

[Sebastian-Nielsen]

ComputeKit seems to have a problem when you build for production (more specifically, when names are obfuscated), and you have third party dependencies that are not functions defined in your app. e.g. remoteDependencies: ["https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.18/dayjs.min.js",]

I have something like this:

const workerUtilsCode = `
  self.${myFirstFunction.name} = ${myFirstFunction.toString()}; 
  self.${mySecondFunction.name} = ${mySecondFunction.toString()};
  self.${myThirdFunction.name} = ${myThirdFunction.toString()};
`
const blob = new Blob([workerUtilsCode], { type: 'application/javascript' });
const workerUtilsUrl = URL.createObjectURL(blob);

export const kit = new ComputeKit({
        remoteDependencies: [
            "https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.18/dayjs.min.js",
            workerUtilsUrl,
        ]
    })
    .register("foo", () => {... dayjs() ...}) // Say `dayjs` gets the obfuscated name `Ke` then you can expect this error in a production build `[ComputeKit:Pool:error] Task ml8ld29e-9bc6fxcwj failed: Ke is not defined´

Note that it is important to do self.${myFirstFunction.name} so that for a production build, the obfuscated name is used. This works for the functions I defined in my app. I think computeKit lacks self.${xxxxxxx.name} logic for when it loads in third party dependencies.

[tapava]

Hello @Sebastian-Nielsen ,

Thanks for pointing this out. Let me ask you, have you tried this way?

.register("foo", () => {
  const dayjs = (self as any).dayjs;
  return dayjs().format('YYYY-MM-DD');
})

If this works then it's all about updating the documentation to describe this.

[Sebastian-Nielsen]

.register("foo", () => {
  const dayjs = (self as any).dayjs;
  return dayjs().format('YYYY-MM-DD');
})

Doesnt work. However, globalThis.dayjs() works

.register("foo", () => {
  globalThis.dayjs;
})

[tapava]

@Sebastian-Nielsen thanks again for creating this issue. I added more details to the documentation but credits to you for finding the issue and trying to solve it:
#18

=> the documented approach is to declare the variables as types instead of importing them. Using thisGlobal and (self as any) are also valid.

[tapava]

For now, the solution is to declare const

const kit = new ComputeKit({
  remoteDependencies: [
    'https://cdnjs.cloudflare.com/ajax/libs/mathjs/11.8.0/math.min.js',
  ],
});

// Declare globals for TypeScript support (and minification compatibility!)
declare const math: typeof import('mathjs');

kit.register('advancedMath', (expression: string) => {
  return math.evaluate(expression);
});