feat: Reactivity mechanism prototype

.npmignore

@@ -1,9 +1,10 @@
 .idea
 .vscode
 node_modules
+src
 
 .gitignore
 .npmrc
-eslint.config.mjs
+eslint.config.js
 tsconfig.json
 yarn.lock

eslint.config.js

@@ -0,0 +1,45 @@
+import globals from 'globals'
+
+import pluginJs from '@eslint/js'
+import pluginTs from 'typescript-eslint'
+import pluginVue from 'eslint-plugin-vue'
+
+export default [
+  { files: ['**/*.{js,mjs,cjs,ts,vue}'] },
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+    },
+  },
+  pluginJs.configs.recommended,
+  ...pluginTs.configs.recommended,
+  ...pluginVue.configs['flat/essential'],
+  {
+    files: ['**/*.vue'],
+    languageOptions: {
+      parserOptions: { parser: pluginTs.parser },
+    },
+  },
+  {
+    rules: {
+      'comma-dangle': ['error', {
+        arrays: 'always-multiline',
+        exports: 'always-multiline',
+        functions: 'never',
+        imports: 'always-multiline',
+        objects: 'always-multiline',
+      }],
+      'indent': ['error', 2, {
+        'ignoreComments': true,
+        'SwitchCase': 1,
+      }],
+      'quotes': ['error', 'single'],
+      'semi': ['error', 'never'],
+
+      '@typescript-eslint/naming-convention': 'off',
+    },
+  },
+]

package.json

@@ -15,25 +15,37 @@
     "release": "standard-version",
     "release:major": "standard-version --release-as major",
     "release:minor": "standard-version --release-as minor",
-    "release:patch": "standard-version --release-as patch"
+    "release:patch": "standard-version --release-as patch",
+    "test": "vitest --run"
   },
   "dependencies": {
     "@omnicajs/vue-remote": "^0.1.3",
     "@remote-ui/rpc": "^1.4.5"
   },
+  "peerDependencies": {
+    "pinia": "^2.2.4",
+    "vue": "^3.5.12"
+  },
   "devDependencies": {
     "@eslint/eslintrc": "^3.0.2",
-    "@eslint/js": "^9.1.1",
+    "@eslint/js": "^9.13.0",
     "@stylistic/eslint-plugin": "^1.7.2",
-    "eslint": "^9.1.1",
-    "eslint-config-standard-with-typescript": "^43.0.1",
-    "eslint-plugin-import": "^2.25.2",
-    "eslint-plugin-n": "^17.3.1",
-    "eslint-plugin-promise": "^6.1.1",
-    "globals": "^15.0.0",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "@vue/test-utils": "^2.4.6",
+    "eslint": "^9.13.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-n": "^17.11.1",
+    "eslint-plugin-promise": "^6.6.0",
+    "eslint-plugin-vue": "^9.29.1",
+    "globals": "^15.11.0",
+    "jsdom": "^25.0.1",
+    "pinia": "^2.2.4",
     "standard-version": "^9.5.0",
     "typescript": "^5.4.5",
-    "typescript-eslint": "^7.7.1"
+    "typescript-eslint": "^8.11.0",
+    "vite": "^5.4.8",
+    "vitest": "^2.1.2",
+    "vue": "^3.5.12"
   },
   "publishConfig": {
     "access": "public"

src/index.ts

@@ -0,0 +1,52 @@
+import type {
+  CreateEndpointOptions,
+  MessageEndpoint,
+} from '@remote-ui/rpc'
+
+import type {
+  Endpoint,
+  EndpointApi,
+} from '~types/endpoint'
+
+import {
+  createEndpoint,
+  release,
+  retain,
+} from '@remote-ui/rpc'
+
+export const createWidgetEndpoint = <API extends EndpointApi, T>(
+  api: API,
+  messenger: MessageEndpoint,
+  options: CreateEndpointOptions<T>
+): Endpoint<API> => {
+  const endpoint = createEndpoint(messenger, options)
+
+  let onRelease = () => {}
+
+  endpoint.expose({
+    async run (channel, placement, methods) {
+      retain(channel)
+      retain(methods)
+
+      onRelease = () => {
+        release(channel)
+        release(methods)
+      }
+
+      await api.run(channel, placement, methods)
+    },
+
+    release () {
+      api.release()
+
+      onRelease()
+      onRelease = () => {}
+    },
+
+    on (event, payload) {
+      api.on(event, payload)
+    },
+  } as API)
+
+  return endpoint
+}

src/order/card.ts

@@ -0,0 +1,52 @@
+import type {
+  FieldSchema,
+  EventSchema,
+  RemoteMethods,
+} from '~types/context/order'
+
+import { defineStore } from 'pinia'
+
+export type State = FieldSchema & {
+  api: RemoteMethods | null;
+}
+
+export const useStore = defineStore('order', {
+  state (): State {
+    return {
+      api: null,
+      'customer.email': null,
+      'customer.phone': null,
+      'delivery.address': null,
+    }
+  },
+
+  actions: {
+    async initialize (api: RemoteMethods) {
+      this.api = api
+
+      await api.get('~').then(state => {
+        this['customer.email'] = state['customer.email']
+        this['customer.phone'] = state['customer.phone']
+        this['delivery.address'] = state['delivery.address']
+      })
+    },
+
+    set <F extends keyof FieldSchema> (name: F, value: FieldSchema[F], synchronize = true) {
+      this[name] = value
+      if (synchronize) {
+        this.api?.set(name, value)
+      }
+    },
+
+    on <K extends keyof EventSchema>(event: K, payload: EventSchema[K]) {
+      switch (event) {
+        case 'change:customer.email':
+          return this.set('customer.email', payload as string | null, false)
+        case 'change:customer.phone':
+          return this.set('customer.phone', payload as string | null, false)
+        case 'change:delivery.address':
+          return this.set('delivery.address', payload as string | null, false)
+      }
+    },
+  },
+})