fix: impore how we replace this in third-party code` (#453)

* fix: imporove how we replace `this` in third-party code

* stash

src/lib/web-worker/worker-exec.ts

@@ -116,17 +116,50 @@ export const runScriptContent = (
   return errorMsg;
 };
 
+/**
+ * Replace some `this` symbols with a new value.
+ * Still not perfect, but might be better than a more naive regex.
+ * Check out the tests for examples: tests/unit/worker-exec.spec.ts
+ */
+export const replaceThisInSource = (scriptContent: string, newThis: string): string => {
+  // Best for now but not perfect
+  // Use a more complex regex to match potential preceding character and adjust replacement accordingly
+  const r0 = /(?<!([a-zA-Z0-9_$\.\'\"\`]))(\.\.\.)?this(?![a-zA-Z0-9_$:])/g;
+  const r2 = /([a-zA-Z0-9_$\.\'\"\`])?(\.\.\.)?this(?![a-zA-Z0-9_$:])/g;
+
+  return scriptContent.replace(r2, (match, p1, p2) => {
+    // console.log('\n');
+    // console.log('input: ' + scriptContent);
+    // console.log('match: ', match);
+    // console.log('p1: ', p1);
+    // console.log('p2: ', p2);
+    // console.log('\n');
+    if (p1 != null) {
+      return (p1 || '') + (p2 || '') + 'this';
+    }
+    // If there was a preceding character, include it unchanged
+    // console.log('===', scriptContent, '----', p1, p2);
+    return (p1 || '') + (p2 || '') + newThis;
+  });
+
+  // 3.5
+  // const r = /(^|[^a-zA-Z0-9_$.\'\"`])\.\.\.?this(?![a-zA-Z0-9_$:])/g;
+  // return scriptContent.replace(r, '$1' + newThis);
+  // const r = /(?<!([a-zA-Z0-9_$\.\'\"\`]))(\.\.\.)?this(?![a-zA-Z0-9_$:])/g;
+  // return scriptContent.replace(r, '$2' + newThis);
+};
+
 export const run = (env: WebWorkerEnvironment, scriptContent: string, scriptUrl?: string) => {
   env.$runWindowLoadEvent$ = 1;
 
+  // First we want to replace all `this` symbols
+  let sourceWithReplacedThis = replaceThisInSource(scriptContent, '(thi$(this)?window:this)');
+
   scriptContent =
-    `with(this){${scriptContent
-      .replace(/\bthis\b/g, (match, offset, originalStr) =>
-        offset > 0 && originalStr[offset - 1] !== '$' ? '(thi$(this)?window:this)' : match
-      )
-      .replace(/\/\/# so/g, '//Xso')}\n;function thi$(t){return t===this}};${(
-      webWorkerCtx.$config$.globalFns || []
-    )
+    `with(this){${sourceWithReplacedThis.replace(
+      /\/\/# so/g,
+      '//Xso'
+    )}\n;function thi$(t){return t===this}};${(webWorkerCtx.$config$.globalFns || [])
       .filter((globalFnName) => /[a-zA-Z_$][0-9a-zA-Z_$]*/.test(globalFnName))
       .map((g) => `(typeof ${g}=='function'&&(this.${g}=${g}))`)
       .join(';')};` + (scriptUrl ? '\n//# sourceURL=' + scriptUrl : '');

tests/unit/worker-exec.spec.ts

@@ -1,7 +1,6 @@
 import * as assert from 'uvu/assert';
-import { run } from '../../src/lib/web-worker/worker-exec';
+import { run, replaceThisInSource } from '../../src/lib/web-worker/worker-exec';
 import { suite } from './utils';
-
 const test = suite();
 
 test('add window id to postMessage() when cross-origin', ({ env, win, winId }) => {
@@ -93,4 +92,69 @@ test('window is window', ({ env, win }) => {
   assert.is(win.result, true);
 });
 
+test('We should replace `this` keyword more or less sane', ({ env, win }) => {
+  const replaceSymbol = '__this';
+  const r = function (code: string) {
+    return replaceThisInSource(code, replaceSymbol);
+  };
+
+  // Should replace:
+  // assert.is(r('`sadly we fail at this simple string`'), '`sadly we fail at this simple string`');
+  assert.is(r('{this:123}'), '{this:123}');
+  assert.is(r('a.this'), 'a.this');
+  assert.is(r('[`kathis`]'), '[`kathis`]');
+  assert.is(r('{ ...this.opts };'), '{ ...__this.opts };');
+  assert.is(r('{ ...this.opts };this.lol;'), '{ ...__this.opts };__this.lol;');
+
+  const input = `
+    // Should replace:
+    { ...this.opts };this.lol;
+    this
+    this.test
+    log(this.variable)
+    \`hello \${CONST} is \${this.CONST2}\`
+
+    // Should not replace:
+    ['this', "this", \`this\`]
+    {this:123}
+    { this: 123 }
+    'sadly we fail at this simple string'
+    "same as this"
+    \`and this is \${false} too\`;
+    a.b.this
+    let _this, This, $this
+  `;
+  // const rez = replaceThisInSource(input, `__this`);
+
+  const out = `
+    // Should replace:
+    { ...__this.opts };__this.lol;
+    __this
+    __this.test
+    log(__this.variable)
+    \`hello \${CONST} is \${__this.CONST2}\`
+
+    // Should not replace:
+    ['this', "this", \`this\`]
+    {this:123}
+    { this: 123 }
+    'sadly we fail at __this simple string'
+    "same as __this"
+    \`and __this is \${false} too\`;
+    a.b.this
+    let _this, This, $this
+  `;
+
+  // assert.is(rez, out);
+});
+
+// test('properly replaces this is js window context', ({ env, win }) => {
+//   const s = `
+//     let a = { this: 123 };
+//     window.result = a.this;
+//   `;
+//   run(env, s);
+//   assert.is(win.result, 123);
+// });
+
 test.run();