feat: Reactivity mechanism prototype

.github/workflows/tests.yml

@@ -35,5 +35,5 @@ jobs:
       - name: Install dependencies
         run: yarn install
 
-      - name: Run lint
-        run: yarn lint
+      - name: Run eslint
+        run: yarn eslint

.gitignore

@@ -1,5 +1,6 @@
 .idea
 .vscode
+dist
 node_modules
 
 .npmrc

.npmignore

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

docker-compose.yml

@@ -0,0 +1,7 @@
+services:
+  node:
+    image: node:22
+    user: node
+    volumes:
+      - ./:/project
+    working_dir: /project

eslint.config.js

@@ -0,0 +1,46 @@
+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',
+    },
+  },
+  { ignores: ['dist/*'] },
+]

package.json

@@ -3,37 +3,58 @@
   "type": "module",
   "version": "0.1.0",
   "description": "API and components for creating RetailCRM UI extensions",
-  "main": "index.js",
   "repository": "[email protected]:retailcrm/embed-ui.git",
   "author": "RetailDriverLLC <[email protected]>",
   "license": "MIT",
   "contributors": [
     "Kirill Zaytsev <[email protected]>"
   ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.mjs"
+    }
+  },
   "scripts": {
-    "lint": "eslint .",
+    "build": "vite build",
+    "eslint": "eslint .",
     "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",
+    "vue": "^3.5"
+  },
   "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",
+    "vite-plugin-dts": "^4.3.0",
+    "vitest": "^2.1.2",
+    "vue": "^3.5.12"
   },
   "publishConfig": {
     "access": "public"

src/index.ts

@@ -0,0 +1,57 @@
+import type {
+  CreateEndpointOptions,
+  MessageEndpoint,
+} from '@remote-ui/rpc'
+
+import type {
+  Endpoint,
+  EndpointApi,
+} from '~types/endpoint'
+
+import {
+  createEndpoint,
+  release,
+  retain,
+} from '@remote-ui/rpc'
+
+import type { AnyFunction, None } from '~types/scaffolding'
+
+export const createWidgetEndpoint = <
+  M extends Record<string, AnyFunction> = None,
+  E extends Record<string, unknown> = None
+>(
+    api: EndpointApi<M, E>,
+    messenger: MessageEndpoint,
+    options: CreateEndpointOptions<EndpointApi<M, E>>
+  ): Endpoint<M, E> => {
+  const endpoint = createEndpoint(messenger, options)
+
+  let onRelease = () => {}
+
+  endpoint.expose({
+    async run (channel, target, methods) {
+      retain(channel)
+      retain(methods)
+
+      onRelease = () => {
+        release(channel)
+        release(methods)
+      }
+
+      await api.run(channel, target, methods)
+    },
+
+    release () {
+      api.release()
+
+      onRelease()
+      onRelease = () => {}
+    },
+
+    on (event, payload) {
+      api.on(event, payload)
+    },
+  } as EndpointApi<M, E> as unknown as Record<string, AnyFunction | undefined>)
+
+  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)
+      }
+    },
+  },
+})