fix(expressions): watchers

packages/core/expressions/sandbox/App.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="sandbox-container">
     <main>
-      <p class="schema-selector">
-        <span>Schema preset:</span>
+      <p class="presets">
+        <span>Schema presets:</span>
         <button @click="schema = EMPTY_SCHEMA">
           EMPTY_SCHEMA
         </button>
@@ -14,6 +14,17 @@
         </button>
       </p>
 
+      <p class="presets">
+        <span>Expression presets:</span>
+        <button
+          v-for="e in expressionPresets"
+          :key="btoa(e)"
+          @click="expression = e"
+        >
+          <code>{{ e }}</code>
+        </button>
+      </p>
+
       <ExpressionsEditor
         v-model="expression"
         inactive-until-focused
@@ -34,6 +45,14 @@
 import { ref } from 'vue'
 import { EMPTY_SCHEMA, ExpressionsEditor, HTTP_SCHEMA, STREAM_SCHEMA } from '../src'
 
+const expressionPresets = [
+  'http.host == "localhost"',
+  'net.protocol ~ "^https?$"',
+  'net.protocol ~ "^https?$" && net.src.port == 80',
+]
+
+const btoa = (s: string) => window.btoa(s)
+
 const expression = ref('http.method == "GET"')
 const schema = ref(EMPTY_SCHEMA)
 const parseResult = ref('')
@@ -44,7 +63,7 @@ const onParseResultUpdate = (result: any) => {
 </script>
 
 <style lang="scss" scoped>
-.schema-selector {
+.presets {
   display: flex;
   flex-direction: row;
   align-items: center;

packages/core/expressions/src/components/ExpressionsEditor.vue

@@ -89,6 +89,14 @@ onBeforeUnmount(() => {
   editor?.dispose()
 })
 
+watch(expression, (newExpression) => {
+  if (!isParsingActive.value) {
+    isParsingActive.value = true
+  }
+
+  editor?.setValue(newExpression)
+})
+
 watch([expression, () => props.schema], (() => {
   const cb = () => {
     parseResult.value = parse(expression.value, props.schema)
@@ -103,7 +111,6 @@ watch([expression, () => props.schema], (() => {
 
 watch(() => parseResult.value, (result?: ParseResult) => {
   if (!isParsingActive.value) {
-    console.warn('Parsing is inactive, skipping parse result update')
     return
   }