feat: add more native effect support into vue

api/package.json

@@ -58,11 +58,11 @@
     "@azure/cosmos": "^4.1.1",
     "@azure/service-bus": "^7.9.5",
     "@azure/storage-blob": "^12.25.0",
-    "@effect-app/core": "^1.17.0",
-    "@effect-app/infra": "1.42.1",
-    "@effect-app/infra-adapters": "^1.20.1",
-    "@effect-app/schema": "^1.19.0",
-    "effect-app": "^1.30.0",
+    "@effect-app/core": "^1.17.1",
+    "@effect-app/infra": "1.43.4",
+    "@effect-app/infra-adapters": "^1.20.4",
+    "@effect-app/schema": "^1.19.1",
+    "effect-app": "^1.30.3",
     "@effect/platform": "^0.68.6",
     "@effect/opentelemetry": "^0.38.2",
     "@effect/platform-node": "0.63.6",
@@ -75,7 +75,7 @@
     "@opentelemetry/auto-instrumentations-node": "^0.51.0",
     "@opentelemetry/context-async-hooks": "^1.26.0",
     "@opentelemetry/sdk-node": "^0.53.0",
-    "@sendgrid/mail": "^8.1.3",
+    "@sendgrid/mail": "^8.1.4",
     "@sentry/node": "^8.2.1",
     "@sentry/opentelemetry": "^8.2.1",
     "connect": "^3.7.0",

api/src/lib/observability.ts

@@ -109,6 +109,7 @@ const setupSentry = (options?: Sentry.NodeOptions) => {
       environment: appConfig.env,
       enabled: isRemote,
       release: appConfig.apiVersion,
+      normalizeDepth: 5, // default 3
       // Set tracesSampleRate to 1.0 to capture 100%
       // of transactions for performance monitoring.
       // We recommend adjusting this value in production

e2e/package.json

@@ -51,9 +51,9 @@
   "dependencies": {
     "@effect-app-boilerplate/api": "workspace:*",
     "@effect/platform-node": "0.63.6",
-    "effect-app": "^1.30.0",
-    "@effect-app/core": "^1.17.0",
-    "@effect-app/schema": "^1.19.0",
+    "effect-app": "^1.30.3",
+    "@effect-app/core": "^1.17.1",
+    "@effect-app/schema": "^1.19.1",
     "@effect/platform": "^0.68.6",
     "effect": "^3.9.2",
     "cross-fetch": "^4.0.0",

frontend/composables/client.ts

@@ -1,9 +1,9 @@
-import { makeClient, makeMutation, makeQuery } from "@effect-app/vue"
-
+import { makeQuery2 } from "@effect-app/vue/query2"
+import { makeClient2 } from "@effect-app/vue/makeClient2"
+import { makeMutation2 } from "@effect-app/vue/mutate2"
 import { useToast } from "vue-toastification"
 import { useIntl } from "./intl"
-import { runtime, type RT } from "~/plugins/runtime"
-import type { Runtime } from "effect-app"
+import { runtime } from "~/plugins/runtime"
 
 export { useToast } from "vue-toastification"
 
@@ -17,15 +17,14 @@ export {
   composeQueries,
   SuppressErrors,
   mapHandler,
-} from "@effect-app/vue/makeClient"
+} from "@effect-app/vue"
 
-// sue me
-const rt = computed(() => runtime.value?.runtime as Runtime.Runtime<RT>)
-export const useSafeQuery = makeQuery(rt)
-export const useSafeMutation = makeMutation(rt)
+const rt = computed(() => runtime.value?.runtime)
+export const useSafeQuery = makeQuery2(rt)
+export const useSafeMutation = makeMutation2()
 
 export const {
   makeUseAndHandleMutation,
   useAndHandleMutation,
   useSafeMutationWithState,
-} = makeClient(useIntl, useToast, useSafeMutation)
+} = makeClient2(useIntl, useToast, useSafeMutation)

frontend/layouts/default.vue

@@ -4,6 +4,8 @@ import { onMounted } from "vue"
 import { useRouter } from "vue-router"
 import { VueQueryDevtools } from "@tanstack/vue-query-devtools"
 import { Result } from "~/composables/client"
+import { Console } from "effect"
+import { runFork, runPromise } from "~/plugins/runtime"
 
 const meClient = clientFor(MeRsc)
 const [userResult, currentUser, getCurrentUser] = useSafeQuery(meClient.GetMe)
@@ -18,9 +20,11 @@ useHead({
 
 const router = useRouter()
 
+const test = () => runPromise(Console.log("test"))
+
 onMounted(() => {
   if (getUserId()) {
-    void getCurrentUser()
+    runFork(getCurrentUser())
   }
 })
 </script>
@@ -30,6 +34,19 @@ onMounted(() => {
     <v-app-bar app>
       <v-app-bar-title>
         <NuxtLink :to="{ name: 'index' }">Home</NuxtLink>
+        <v-btn @click="$run(Console.log('test'))">Explicit test</v-btn>
+        <v-btn @click="Console.log('test')">Test</v-btn>
+        <v-btn @click="() => Console.log('test')">Test cb</v-btn>
+        <v-btn @click="test()">classic</v-btn>
+        <v-btn
+          @click="
+            // eslint-disable-next-line prettier-vue/prettier
+            console.log('123');
+            console.log('2,3,4')
+          "
+        >
+          Test block still works
+        </v-btn>
       </v-app-bar-title>
 
       <div>{{ router.currentRoute.value.name }}</div>

frontend/package.json

@@ -18,10 +18,10 @@
   },
   "dependencies": {
     "@effect-app-boilerplate/api": "workspace:*",
-    "@effect-app/core": "^1.17.0",
+    "@effect-app/core": "^1.17.1",
     "@effect-app/fluent-extensions": "^1.14.1",
-    "@effect-app/schema": "^1.19.0",
-    "@effect-app/vue": "^1.25.2",
+    "@effect-app/schema": "^1.19.1",
+    "@effect-app/vue": "^1.26.9",
     "@effect/platform": "^0.68.6",
     "@effect/platform-browser": "^0.47.6",
     "@effect/rpc": "^0.43.5",
@@ -47,7 +47,7 @@
     "cookie": "^1.0.1",
     "date-fns": "^4.1.0",
     "effect": "^3.9.2",
-    "effect-app": "^1.30.0",
+    "effect-app": "^1.30.3",
     "highcharts": "^11.4.8",
     "http-proxy-node16": "^1.0.5",
     "mitt": "^3.0.1",
@@ -67,7 +67,7 @@
     "eslint-plugin-vue": "^9.29.0",
     "h3": "^1.13.0",
     "nuxt": "~3.13.2",
-    "sass": "^1.80.1",
+    "sass": "^1.80.2",
     "vue-tsc": "^2.1.6"
   }
 }

frontend/plugins/runtime.ts

@@ -11,7 +11,7 @@ import { HttpClient } from "effect-app/http"
 
 export const versionMatch = ref(true)
 
-export const runtime = ref<ReturnType<typeof makeRuntime>>()
+export const runtime = shallowRef<ReturnType<typeof makeRuntime>>()
 
 function makeRuntime(feVersion: string, disableTracing: boolean) {
   const apiLayers = Layer.mergeAll(
@@ -63,10 +63,36 @@ function makeRuntime(feVersion: string, disableTracing: boolean) {
 // TODO: make sure the runtime provides these
 export type RT = ApiConfig | HttpClient.HttpClient
 
-export default defineNuxtPlugin(_ => {
+export default defineNuxtPlugin(nuxtApp => {
   const config = useRuntimeConfig()
-  runtime.value = makeRuntime(
+
+  const rt = makeRuntime(
     config.public.feVersion,
     config.public.env !== "local-dev" || !config.public.telemetry,
   )
+  nuxtApp.vueApp.config.globalProperties.$run = rt.runFork
+  ;(nuxtApp.vueApp.config.globalProperties as any).$runIfEffect = (a: any) => {
+    console.log("run if effect", a)
+    return a && Effect.isEffect(a) ? rt.runFork(a as any) : a
+  }
+  runtime.value = rt
 })
+
+export const runFork = <A, E>(
+  self: Effect.Effect<A, E, RT>,
+  options?: Runtime.RunForkOptions,
+) => runtime.value!.runFork(self, options)
+export const runPromise = <A, E>(
+  effect: Effect.Effect<A, E, RT>,
+  options?:
+    | {
+        readonly signal?: AbortSignal
+      }
+    | undefined,
+) => runtime.value!.runPromise(effect, options)
+
+declare module "vue" {
+  export interface ComponentCustomProperties {
+    $run: ReturnType<typeof makeRuntime>["runFork"]
+  }
+}

frontend/plugins/sentry.ts

@@ -6,6 +6,7 @@ export default defineNuxtPlugin(nuxtApp => {
   Sentry.init({
     app: nuxtApp.vueApp,
     release: config.public.feVersion,
+    normalizeDepth: 5, // default 3
     enabled: config.public.env !== "local-dev",
     dsn: "???",
     integrations: [

package.json

@@ -10,7 +10,8 @@
       "@hebilicious/[email protected]": "patches/@[email protected]",
       "typescript": "patches/typescript.patch",
       "@effect/platform": "patches/@effect__platform.patch",
-      "typescript-transform-paths": "patches/typescript-transform-paths.patch"
+      "typescript-transform-paths": "patches/typescript-transform-paths.patch",
+      "@vue/compiler-core": "patches/@vue__compiler-core.patch"
     }
   },
   "engines": {
@@ -95,19 +96,19 @@
   },
   "devDependencies": {
     "@dprint/typescript": "^0.93.0",
-    "@effect-app/cli": "^0.87.0",
-    "@effect-app/core": "^1.17.0",
-    "@effect-app/eslint-codegen-model": "^1.18.0",
+    "@effect-app/cli": "^0.87.1",
+    "@effect-app/core": "^1.17.1",
+    "@effect-app/eslint-codegen-model": "^1.18.1",
     "@phaphoso/eslint-plugin-dprint": "^0.5.2",
     "@tsconfig/strictest": "^2.0.5",
     "@types/lodash": "^4.17.10",
     "@types/node": "~22.7.6",
-    "@typescript-eslint/eslint-plugin": "^8.9.0",
-    "@typescript-eslint/parser": "^8.9.0",
-    "@typescript-eslint/scope-manager": "^8.9.0",
+    "@typescript-eslint/eslint-plugin": "^8.10.0",
+    "@typescript-eslint/parser": "^8.10.0",
+    "@typescript-eslint/scope-manager": "^8.10.0",
     "concurrently": "^9.0.1",
     "dprint": "^0.47.2",
-    "effect-app": "^1.30.0",
+    "effect-app": "^1.30.3",
     "enhanced-resolve": "^5.17.1",
     "eslint": "^8.57.0",
     "eslint-import-resolver-typescript": "^3.6.3",

patches/@vue__compiler-core.patch

@@ -0,0 +1,69 @@
+diff --git a/dist/compiler-core.cjs.js b/dist/compiler-core.cjs.js
+index 82db1049612f62ed6d50e7002094b56f5e388a0e..d903085c893e1805894265a2abdec5cdcec74375 100644
+--- a/dist/compiler-core.cjs.js
++++ b/dist/compiler-core.cjs.js
+@@ -6198,10 +6198,17 @@ const transformOn = (dir, node, context, augmentor) => {
+       exp = createCompoundExpression([
+         `${isInlineStatement ? context.isTS ? `($event: any)` : `$event` : `${context.isTS ? `
+ //@ts-ignore
+-` : ``}(...args)`} => ${hasMultipleStatements ? `{` : `(`}`,
++` : ``}(...args)`} => ${hasMultipleStatements ? `{` : `_ctx.$runIfEffect(`}`,
+         exp,
+         hasMultipleStatements ? `}` : `)`
+       ]);
++    } else {
++      exp = createCompoundExpression([
++        `(...args) => _ctx.$runIfEffect((`,
++        exp,
++        // () => Console.log("hi")
++        `)(...args))`
++      ]);
+     }
+   }
+   let ret = {
+diff --git a/dist/compiler-core.cjs.prod.js b/dist/compiler-core.cjs.prod.js
+index d0c48efd1a1931f3b0dc9b74acd86130bf6de72a..2e04ed2ab6aedc6f02fc782c3089a2b087a6d03c 100644
+--- a/dist/compiler-core.cjs.prod.js
++++ b/dist/compiler-core.cjs.prod.js
+@@ -6080,10 +6080,17 @@ const transformOn = (dir, node, context, augmentor) => {
+       exp = createCompoundExpression([
+         `${isInlineStatement ? context.isTS ? `($event: any)` : `$event` : `${context.isTS ? `
+ //@ts-ignore
+-` : ``}(...args)`} => ${hasMultipleStatements ? `{` : `(`}`,
++` : ``}(...args)`} => ${hasMultipleStatements ? `{` : `_ctx.$runIfEffect(`}`,
+         exp,
+         hasMultipleStatements ? `}` : `)`
+       ]);
++    } else {
++      exp = createCompoundExpression([
++        `(...args) => _ctx.$runIfEffect((`,
++        exp,
++        // () => Console.log("hi")
++        `)(...args))`
++      ]);
+     }
+   }
+   let ret = {
+diff --git a/dist/compiler-core.esm-bundler.js b/dist/compiler-core.esm-bundler.js
+index f7fb746c4faf842cd00b873f18324f6e4dabc7f1..a9c695fde1077c5d5113ab48bb69f5d1560b71dd 100644
+--- a/dist/compiler-core.esm-bundler.js
++++ b/dist/compiler-core.esm-bundler.js
+@@ -5348,10 +5348,17 @@ const transformOn = (dir, node, context, augmentor) => {
+     }
+     if (isInlineStatement || shouldCache && isMemberExp) {
+       exp = createCompoundExpression([
+-        `${isInlineStatement ? `$event` : `${``}(...args)`} => ${hasMultipleStatements ? `{` : `(`}`,
++        `${isInlineStatement ? `$event` : `${``}(...args)`} => ${hasMultipleStatements ? `{` : `_ctx.$runIfEffect(`}`,
+         exp,
+         hasMultipleStatements ? `}` : `)`
+       ]);
++    } else {
++      exp = createCompoundExpression([
++        `(...args) => _ctx.$runIfEffect((`,
++        exp,
++        // () => Console.log("hi")
++        `)(...args))`
++      ]);
+     }
+   }
+   let ret = {