@vnejs/plugins.core.components 0.0.1 → 0.1.1

package/index.d.ts

@@ -0,0 +1,15 @@
+import * as constants from "./const/const";
+import { SUBSCRIBE_EVENTS } from "./const/events";
+import { SETTINGS_KEYS } from "./const/settings";
+
+type SubscribeEventsType = typeof SUBSCRIBE_EVENTS;
+type SettingsKeysType = typeof SETTINGS_KEYS;
+type ConstantsType = typeof constants;
+
+const PLUGIN_NAME = "COMPONENTS";
+
+declare global {
+  interface EVENTS {
+    [PLUGIN_NAME]: SubscribeEventsType;
+  }
+}

package/index.js

@@ -1,14 +1,7 @@
 import { regPlugin } from "@vnejs/shared";
-import { Module } from "@vnejs/module";
 
 import { SUBSCRIBE_EVENTS } from "./const/events";
 
 import { Components } from "./modules/components";
 
 regPlugin("COMPONENTS", { events: SUBSCRIBE_EVENTS }, [Components]);
-
-import { ModuleView } from "./extensions/view";
-import { ModuleController } from "./extensions/controller";
-
-Module.View = ModuleView;
-Module.Controller = ModuleController;

package/modules/components.js

@@ -8,8 +8,7 @@ export class Components extends Module {
   };
 
   init = async () => {
-    this.props = { emit: this.emit, on: this.on, shared: this.shared, media: this.media, options: this.options };
-    Object.assign(this.props, { SETTINGS: this.SETTINGS, CONST: this.CONST, EVENTS: this.EVENTS });
+    this.props = { emit: this.emit, shared: this.shared, SETTINGS: this.SETTINGS, CONST: this.CONST, EVENTS: this.EVENTS, PARAMS: this.PARAMS };
 
     this.shared.viewForceAnimationSources = [];
 
@@ -21,16 +20,13 @@ export class Components extends Module {
     await this.waitRender();
   };
 
-  onComponentsReg = async ({ renderFunc } = {}) => {
+  onComponentsReg = async ({ renderFunc, store } = {}) => {
     await this.waitIsReady();
 
     let comp = null;
 
-    await new Promise(async (resolve) => {
-      const root = document.createElement("div");
-
-      comp = renderFunc(this.props, root, resolve);
-      [...root.children].forEach((child) => this.elem.appendChild(child));
+    await new Promise((resolve) => {
+      comp = renderFunc({ ...this.props, onMount: resolve, store }, this.elem.appendChild(document.createElement("div")), resolve);
     });
 
     return comp;

package/package.json

@@ -1,18 +1,17 @@
 {
   "name": "@vnejs/plugins.core.components",
-  "version": "0.0.1",
+  "version": "0.1.1",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
+    "publish:major:plugin": "npm run publish:major",
+    "publish:minor:plugin": "npm run publish:minor",
+    "publish:patch:plugin": "npm run publish:patch",
     "publish:major": "npm version major && npm publish --access public",
     "publish:minor": "npm version minor && npm publish --access public",
     "publish:patch": "npm version patch && npm publish --access public"
   },
   "author": "",
   "license": "ISC",
-  "description": "",
-  "peerDependencies": {
-    "@vnejs/shared": "*",
-    "@vnejs/module": "*"
-  }
+  "description": ""
 }

package/extensions/controller.js

@@ -1,97 +0,0 @@
-import { Module } from "@vnejs/module";
-
-export class ModuleController extends Module {
-  isEmitNextAfterHide = false;
-
-  currentItem = null;
-  maxCurrentItem = 0;
-
-  beforeShow = null;
-  afterShow = null;
-  beforeHide = null;
-  afterHide = null;
-
-  bgName = null;
-  updateEvent = null;
-
-  controls = null;
-  controlsIndex = 0;
-  controlsCheckNext = false;
-
-  onHide = async ({ force = false, ...args } = {}) => {
-    if (!this.state.isShow) return;
-    this.log({ action: "hide" });
-    if (this.beforeHide) await this.beforeHide(args);
-    if (this.controls) await this.emit(this.EVENTS.CONTROLS.POP, { key: this.name });
-    await this.setShow(false, Boolean(force || this.shared.viewForceAnimationSources.length));
-    if (this.onClose) {
-      this.onClose();
-      delete this.onClose;
-    } else if (this.isEmitNextAfterHide) this.emitNext();
-    if (this.afterHide) await this.afterHide(args);
-  };
-  onShow = async ({ force = false, onClose, ...args } = {}) => {
-    if (this.state.isShow) return;
-    this.currentItem = null;
-    this.log({ action: "show" });
-    if (onClose) this.onClose = onClose;
-    if (this.beforeShow) await this.beforeShow(args);
-    await this.setShow(true, Boolean(force || this.shared.viewForceAnimationSources.length));
-    if (this.controls)
-      await this.emit(this.EVENTS.CONTROLS.PUSH, {
-        key: this.name,
-        controls: this.controls,
-        index: this.controlsIndex,
-        checkNext: this.controlsCheckNext,
-      });
-    if (this.onClose) if (this.afterShow) await this.afterShow(args);
-  };
-
-  onHideForce = (args) => this.onHide({ ...args, force: true });
-  onShowForce = (args) => this.onShow({ ...args, force: true });
-
-  setShow = async (value, force = false) => {
-    this.setState({ ...this.state, isShow: value });
-    await this.updateView(force);
-  };
-
-  onUpdateStateFromGlobalState = ({ [this.name]: state } = {}) => this.updateStateAndView(state, true);
-
-  loadImageMedia = async (name, mediaType, quality, isTmp, isConstant) => {
-    const [type, priority] = [this.CONST.MEDIA.TYPES.IMAGE, this.CONST.MEDIA.PRIORITIES.HIGH];
-    const arg = { type, priority, quality, name, mediaType, isTmp, isConstant };
-    const [img] = await this.emit(this.EVENTS.MEDIA.LOAD, arg);
-
-    return img;
-  };
-  loadBgMedia = () => {
-    const [layer, quality] = [this.CONST.CANVAS.LAYERS.BG, this.shared.settings[this.SETTINGS.CANVAS.QUALITY]];
-
-    return this.loadImageMedia(this.bgName, layer, quality, false, true);
-  };
-
-  updateView = (isForce = false, isFast = false) => this.emit(this.updateEvent, { ...this.state, isForce, isFast });
-  updateViewForce = () => this.emit(this.updateEvent, { ...this.state, isForce: true });
-  updateViewFast = () => this.emit(this.updateEvent, { ...this.state, isFast: true });
-  updateStateAndView = async (state, isForce = false, isFast = false) => {
-    this.updateState(state);
-
-    await this.updateView(isForce, isFast);
-  };
-
-  incCurrentItem = () => this.setCurrentItem(this.currentItem + 1, 0);
-  decCurrentItem = () => this.setCurrentItem(this.currentItem - 1, this.maxCurrentItem);
-  setCurrentItem = async (value, defaultValue) => {
-    if (this.currentItem === null) {
-      this.currentItem = defaultValue;
-    } else {
-      this.currentItem = value;
-      if (this.currentItem > this.maxCurrentItem) this.currentItem = 0;
-      if (this.currentItem < 0) this.currentItem = this.maxCurrentItem;
-    }
-
-    this.updateStateAndView({ currentItem: this.currentItem }, true);
-  };
-
-  getDefaultState = () => ({ isShow: false, isForce: false });
-}

package/extensions/view.js

@@ -1,59 +0,0 @@
-import { Module } from "@vnejs/module";
-
-export class ModuleView extends Module {
-  animationTime = 0;
-  renderFunc = null;
-  updateEvent = null;
-  updateHandler = null;
-  canvasInfo = null;
-  locLabel = null;
-
-  subscribe = () => {
-    if (this.updateEvent && this.updateHandler) this.on(this.updateEvent, this.updateHandler);
-  };
-
-  init = async () => {
-    if (this.renderFunc) await this.regComponent();
-    if (this.canvasInfo) await this.regCanvas();
-  };
-
-  regCanvas = async () => {
-    if (this.canvasInfo) await this.emit(this.EVENTS.CANVAS.CANVAS_REG, this.canvasInfo);
-  };
-
-  regComponent = async () => {
-    this.component = await this.emitOne(this.EVENTS.COMPONENTS.REG, { name: this.name, renderFunc: this.renderFunc });
-  };
-
-  onUpdateReactComponent = async (state = {}) => {
-    if (!this.isReady) await this.waitIsReady();
-
-    await this.insertExtraDataToState(state);
-
-    return new Promise(async (resolve) => {
-      if (state.isForce) {
-        this.component.setState(state);
-        await this.waitRerender();
-        this.component.setState({ ...state, isForce: false });
-        await this.waitRerender();
-        return resolve();
-      }
-      this.component.setState(state);
-
-      return state.isFast ? resolve() : setTimeout(resolve, this.animationTime);
-    });
-  };
-
-  setIsForceReact = async (isForce) => {
-    this.component.setState({ ...this.state, isForce });
-
-    await this.waitRerender();
-  };
-
-  insertExtraDataToState = async (state) => {
-    if (this.locLabel)
-      state.locs = await this.emitOne(this.EVENTS.LOCS.GET, { label: this.locLabel, isConstant: true });
-
-    return state;
-  };
-}