refactor: downgrade to with if deps not provided

Author: aidenybai

src/component.ts

@@ -1,4 +1,5 @@
-/* istanbul ignore next */
+/* istanbul ignore file */
+
 import { Directives, DirectiveProps, Watchers, State, ASTNode } from './models/structs';
 
 import { directives } from './core/directive';

src/core/utils/__test__/computeExpression.spec.ts

@@ -4,25 +4,25 @@ describe('.compute', () => {
   it('should use key-based retrieval during computation', () => {
     const el = document.createElement('div');
 
-    expect(computeExpression('count', el)({ count: 0 })).toEqual(0);
+    expect(computeExpression('count', el, true, {}, ['count'])({ count: 0 })).toEqual(0);
   });
 
   it('should compute correctly', () => {
     const el = document.createElement('div');
-    expect(computeExpression('count + 1', el)({ count: 0 })).toEqual(1);
+    expect(computeExpression('count + 1', el, true, {}, ['count'])({ count: 0 })).toEqual(1);
   });
 
   it('should not return the value', () => {
     const el = document.createElement('div');
-    expect(computeExpression('count + 1', el, false)({ count: 0 })).toEqual(undefined);
+    expect(computeExpression('count + 1', el, false, {}, ['count'])({ count: 0 })).toEqual(undefined);
   });
 
   it('should emit and access an event', () => {
     const el = document.createElement('div');
 
     expect(
       // @ts-expect-error: 'foo' cannot be passed as an Event, but good enough for our use case
-      computeExpression(`$emit('customEvent', $el); return $event`, el, false)({}, 'foo')
+      computeExpression(`$emit('customEvent', $el); return $event`, el, false, {}, [])({}, 'foo')
     ).toEqual('foo');
   });
 });

src/core/utils/computeExpression.ts

@@ -7,15 +7,20 @@ export const computeExpression = (
   el?: HTMLElement,
   returnable = true,
   refs: Refs = {},
-  deps: string[] = []
+  deps?: string[]
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
 ): ((state: UnknownKV, event?: Event) => any) => {
   // This dynamically appends `$state.` to the front of standalone props, allowing the
   // user to write less and us to compile and run faster without with() {}
   let formattedExpression = `${returnable ? `return ${expression}` : expression}`;
-  deps.forEach((dep) => {
-    formattedExpression = formattedExpression.replace(expressionPropRE(dep), `$state.${dep}`);
-  });
+  if (deps) {
+    deps.forEach((dep) => {
+      formattedExpression = formattedExpression.replace(expressionPropRE(dep), `$state.${dep}`);
+    });
+  } else {
+    formattedExpression = `with($state){${formattedExpression}}`;
+  }
+
   return (state: UnknownKV, event?: Event) => {
     try {
       const value = state[expression];