How to compare variables between matches?

[wmertens]

One of the most complex ESLint rules we have in qwik.dev goes as follows:

• if you're using a () => obj function inside a useSerializer$() call
• and in the obj there's an update() function
• then all the scope it accesses must equal the scope accessed by the deserialize() function, for every identifier that is used as an object for reading

We implement it by detecting the conditions, listing up the identifiers used that aren't function parameters, and then comparing the list.

Is it possible to express this with GritQL?

[morgante]

Yes this should be doable. Here's a basic example:

engine marzano(0.1)
language js

`useSerializer($s)` where{
    $s <: contains `($_) => $obj`,
    $obj <: contains `update() { $_}`
}

[wmertens]

Right but the difficult part is comparing the used-as-objects identifiers

[morgante]

It's doable. I am not familiar with Qwik, so can you please give sample code for both a "good" (passing case) and a "bad" case.

[wmertens]

Thank you for looking at it!

Valid case:

import { component$, useSignal, useSerializer$ } from '@qwik.dev/core';

class MyClass {
  constructor(public count: number) {}
}

export default component$(() => {
  const countSignal = useSignal(0);

  const out = useSerializer$(() => ({
    deserialize: () => {
      return new MyClass(countSignal.value);
    },
    update: (myClass) => {
      myClass.count = countSignal.value;
      return myClass;
    },
  }));

  return <div>{out.value.count}</div>;
});

invalid:

import { component$, useSignal, useSerializer$ } from '@qwik.dev/core';

class MyClass {
  constructor(
    public count: number,
    public name: string
  ) {}
}

export default component$(() => {
  const countSignal = useSignal(0);
  const nameSignal = useSignal('John');

  const out = useSerializer$(() => ({
    deserialize: () => {
      return new MyClass(countSignal.value, 'Fred');
    },
    update: (myClass) => {
      myClass.count++; // countSignal not used here
      myClass.name = nameSignal.value; // nameSignal used here but not in deserialize
      return myClass;
    },
  }));

  return (
    <div>
      {out.value.count} {out.value.name}
    </div>
  );
});