docs: update README; ci/cd: add build;feat: add mobx-view-model other package name

Author: js2me

.github/workflows/build.yaml

@@ -0,0 +1,31 @@
+name: Build
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  job:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+        with:
+          version: 9
+          run_install: false
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build the project
+        run: pnpm build

README.md

@@ -1,11 +1,46 @@
-# mobx-vm-entities   
-
 MobX ViewModel power for ReactJS  
 
+## What package has   
+
+### [`ViewModelImpl`](src/view-model/view-model.impl.ts), [`AbstractViewModel`](src/view-model/abstract-view-model.ts), [`ViewModel` ](src/view-model/view-model.ts) 
+It is a class that helps to manage state and lifecycle of a component in **React**.  
+
+
+### [`ViewModelStoreImpl`](src/view-model/view-model.store.impl.ts), [`AbstractViewModelStore`](src/view-model/abstract-view-model.store.ts), [`ViewModelStore`](src/view-model/view-model.store.ts)  
+It is store for managing view models.  
+P.S not required entity for targeted usage of this package, but can be helpful for accessing view models from everywhere by view model id or view model class name.   
+
+
+### [`useViewModel()`](src/hooks/use-view-model.ts)  
+Hook that helps to get access to your view model in **React**.  
+  Possible usage:   
+    - `useViewModel<YourViewModel>()` - using generic to define type of returning view model instance  
+    - `useViewModel<YourViewModel>(id)` - using `id` to define specific identifier of returning view model instance and generic for the same as above usage    
+
+
+### [`withViewModel()`](src/hoc/with-view-model.tsx)  
+Required for usage HOC that connects your `ViewModel` class with `View` (**React** Component)  
+  Possible usage:   
+    - `withViewModel(ViewModel)(View)` - simple usage   
+    - `withViewModel(ViewModel, { factory })(View)` -  advanced usage that needed to create your own implementations of `withViewModel` HOC, `ViewModelStore` and `ViewModel` classes.Example below:
+```tsx
+withViewModel(ViewModel, {
+  factory: (config) => {
+    // also you can achieve this your view model store implementation
+    return new config.VM(rootStore, config);
+  }
+})(View)
+```  
+
+
+### [`withLazyViewModel()`](src/hoc/with-lazy-view-model.tsx)  
+Optional for usage HOC that doing the same thing as `withViewModel`, but fetching `ViewModel` and `View` "lazy"  
+
 ## Simple usage  
 
 ```tsx
 import { ViewModelProps, ViewModelImpl, withViewModel } from 'mobx-vm-entities';
+
 export class MyPageVM extends ViewModelImpl<{ payloadA: string }> {
   @observable
   accessor state = '';
@@ -30,7 +65,8 @@ const MyPageView = observer(({ model }: ViewModelProps<MyPageVM>) => {
 export const MyPage = withViewModel(MyPageVM)(MyPageView);
 
 <MyPage payload={{ payloadA: '1' }} />
-```
+
+```  
 
 ## Detailed Configuration  
 
@@ -132,9 +168,9 @@ export class MyPageVM extends ViewModelImpl {
   accessor state = '';
 
   async mount() {
-    super.mount();
-
-    await this.rootStore.myApi.load()
+    // this.isMounted = false;
+    await this.rootStore.beerApi.takeBeer();
+    super.mount(); // this.isMounted = true
   }
 
   didMount() {

package.json

@@ -18,7 +18,9 @@
   "keywords": [
     "mobx",
     "react",
-    "view-model"
+    "view-model",
+    "view",
+    "model"
   ],
   "author": "js2me",
   "license": "MIT",
@@ -50,7 +52,7 @@
     "@vitest/coverage-istanbul": "2.1.6",
     "eslint": "8.57.0",
     "js2me-eslint-config": "1.0.4",
-    "js2me-exports-post-build-script": "2.0.14",
+    "js2me-exports-post-build-script": "2.0.16",
     "jsdom": "25.0.1",
     "rimraf": "6.0.1",
     "typescript": "5.4.5",

pnpm-lock.yaml

@@ -6,7 +6,7 @@ postBuildScript({
   srcDirName: 'src',
   filesToCopy: ['LICENSE', 'README.md'],
   updateVersion: process.env.PUBLISH_VERSION,
-  onDone: (versionsDiff, _, packageJson) => {
+  onDone: (versionsDiff, _, packageJson, { targetPackageJson}) => {
     if (process.env.PUBLISH) {
       publishScript({
         nextVersion: versionsDiff?.next ?? packageJson.version,
@@ -16,6 +16,8 @@ postBuildScript({
         createTag: true,
         githubRepoLink: 'https://github.com/js2me/mobx-vm-entities',
         cleanupCommand: 'pnpm clean', 
+        targetPackageJson,
+        otherNames: ['mobx-view-model']
       })
     }
   }

post-build.mjs

@@ -3,18 +3,18 @@ import { AnyObject } from './types';
 
 declare const process: { env: { NODE_ENV?: string } };
 
-export const generateVMId = (context: AnyObject) => {
-  if (!context.generateId) {
+export const generateVMId = (ctx: AnyObject) => {
+  if (!ctx.generateId) {
     const staticId = internalCounter().toString(16);
     const counter = createCounter();
 
-    context.generateId = () =>
+    ctx.generateId = () =>
       `${staticId}_${counter().toString().padStart(5, '0')}`;
   }
 
   if (process.env.NODE_ENV === 'production') {
-    return context.generateId();
+    return ctx.generateId();
   } else {
-    return `${context.VM?.name}_${context.generateId()}`;
+    return `${ctx.VM?.name}_${ctx.generateId()}`;
   }
 };