@variousjs/various 5.0.1 → 5.1.0

package/dist/index.dev.js

@@ -45,6 +45,7 @@ function _extends() {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   BASE_DEPENDENCIES: function() { return /* binding */ BASE_DEPENDENCIES; },
 /* harmony export */   CONFIG_KEY: function() { return /* binding */ CONFIG_KEY; },
 /* harmony export */   DEPENDENCIES_KEY: function() { return /* binding */ DEPENDENCIES_KEY; },
 /* harmony export */   MESSAGE_KEY: function() { return /* binding */ MESSAGE_KEY; },
@@ -60,6 +61,7 @@ const DEPENDENCIES_KEY = Symbol('DEPENDENCIES');
 const ROOT = '#root';
 const VUE_FUNCTION_OPTIONS = ['beforeCreate', 'created', 'beforeMount', 'mounted', 'beforeUpdate', 'updated', 'beforeUnmount', 'unmounted', 'errorCaptured', 'renderTracked', 'renderTriggered', 'activated', 'deactivated', 'setup', 'data', 'render'];
 const VUE_VERSION = 3;
+const BASE_DEPENDENCIES = ['react', 'react-dom', '@variousjs/various', 'app'];
 
 /***/ }),
 
@@ -77,8 +79,8 @@ __webpack_require__.r(__webpack_exports__);
 
 class Connector {
   constructor() {
-    this.loaderComponent = _default_component__WEBPACK_IMPORTED_MODULE_0__.Loader;
-    this.errorComponent = _default_component__WEBPACK_IMPORTED_MODULE_0__.Error;
+    this.fallbackComponent = _default_component__WEBPACK_IMPORTED_MODULE_0__.Fallback;
+    this.errorFallbackComponent = _default_component__WEBPACK_IMPORTED_MODULE_0__.ErrorFallback;
     this.storeActions = {};
     this.componentActions = {};
     this.i18nConfigs = {};
@@ -128,17 +130,17 @@ class Connector {
   getStoreActions() {
     return this.storeActions;
   }
-  setLoaderComponent(loaderComponent) {
-    this.loaderComponent = loaderComponent;
+  setFallbackComponent(fallbackComponent) {
+    this.fallbackComponent = fallbackComponent;
   }
-  getLoaderComponent() {
-    return this.loaderComponent;
+  getFallbackComponent() {
+    return this.fallbackComponent;
   }
-  setErrorComponent(errorComponent) {
-    this.errorComponent = errorComponent;
+  setErrorFallbackComponent(errorFallbackComponent) {
+    this.errorFallbackComponent = errorFallbackComponent;
   }
-  getErrorComponent() {
-    return this.errorComponent;
+  getErrorFallbackComponent() {
+    return this.errorFallbackComponent;
   }
 }
 /* harmony default export */ __webpack_exports__["default"] = (new Connector());
@@ -188,7 +190,8 @@ const createComponent = (config, storeKeys) => {
     };
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_error_boundary__WEBPACK_IMPORTED_MODULE_3__["default"], {
       name: name,
-      module: module
+      module: module,
+      url: url
     }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(C, nextProps));
   };
   component.displayName = 'various-creator';
@@ -232,7 +235,7 @@ const createModule = (config, logError = true) => {
     (0,_helper__WEBPACK_IMPORTED_MODULE_3__.resetDependencyConfig)(name, url);
   }
   return new Promise((resolve, reject) => {
-    if (!url && !dependencies[name]) {
+    if (!url && !dependencies[name] && !(0,_helper__WEBPACK_IMPORTED_MODULE_3__.isModuleSpecified)(name)) {
       const error = new _helper__WEBPACK_IMPORTED_MODULE_3__.VariousError({
         name,
         module,
@@ -314,22 +317,35 @@ const createModule = (config, logError = true) => {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   Container: function() { return /* binding */ Container; },
-/* harmony export */   Error: function() { return /* binding */ Error; },
-/* harmony export */   Loader: function() { return /* binding */ Loader; }
+/* harmony export */   ErrorFallback: function() { return /* binding */ ErrorFallback; },
+/* harmony export */   Fallback: function() { return /* binding */ Fallback; },
+/* harmony export */   Root: function() { return /* binding */ Root; }
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _helper__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./helper */ "./src/core/helper.ts");
+
 
-const Loader = () => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, "Loading");
-const Error = ({
+const Fallback = props => {
+  const className = (0,_helper__WEBPACK_IMPORTED_MODULE_1__.getClassNameWithModule)(props.$self, 'various-component-fallback');
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: className
+  }, "Loading");
+};
+const ErrorFallback = ({
   $error,
-  $reload
-}) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, `[${$error.type}] ${$error.message}`), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
-  type: "button",
-  onClick: $reload
-}, "Reload"));
-const Container = () => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, "App Container is not defined");
+  $reload,
+  $self
+}) => {
+  const className = (0,_helper__WEBPACK_IMPORTED_MODULE_1__.getClassNameWithModule)($self, 'various-component-error_fallback');
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: className
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", null, $error.type), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", null, $error.message), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
+    type: "button",
+    onClick: $reload
+  }, "Reload"));
+};
+const Root = () => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, "App Container is not defined");
 
 /***/ }),
 
@@ -469,6 +485,7 @@ class ErrorBoundary extends react__WEBPACK_IMPORTED_MODULE_0__.Component {
       module
     });
   }
+  $self = (0,_helper__WEBPACK_IMPORTED_MODULE_1__.getSelfInfo)(this.props);
   reload = () => {
     this.error = undefined;
     this.setState({
@@ -476,16 +493,11 @@ class ErrorBoundary extends react__WEBPACK_IMPORTED_MODULE_0__.Component {
     });
   };
   render() {
-    const {
-      name,
-      module
-    } = this.props;
-    const ErrorNode = _connector__WEBPACK_IMPORTED_MODULE_2__["default"].getErrorComponent();
+    const ErrorFallbackNode = _connector__WEBPACK_IMPORTED_MODULE_2__["default"].getErrorFallbackComponent();
     const store = (0,_store__WEBPACK_IMPORTED_MODULE_3__.getUserStore)();
     if (this.state.hasError) {
-      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(ErrorNode, {
-        $name: name,
-        $module: module,
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(ErrorFallbackNode, {
+        $self: this.$self,
         $reload: this.reload,
         $store: store,
         $error: this.error
@@ -511,15 +523,19 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   checkReactComponent: function() { return /* binding */ checkReactComponent; },
 /* harmony export */   checkVueComponent: function() { return /* binding */ checkVueComponent; },
 /* harmony export */   defineDependencies: function() { return /* binding */ defineDependencies; },
+/* harmony export */   getClassNameWithModule: function() { return /* binding */ getClassNameWithModule; },
 /* harmony export */   getConfig: function() { return /* binding */ getConfig; },
 /* harmony export */   getMountedComponents: function() { return /* binding */ getMountedComponents; },
 /* harmony export */   getNameWithModule: function() { return /* binding */ getNameWithModule; },
+/* harmony export */   getSelfInfo: function() { return /* binding */ getSelfInfo; },
 /* harmony export */   isModuleLoaded: function() { return /* binding */ isModuleLoaded; },
+/* harmony export */   isModuleSpecified: function() { return /* binding */ isModuleSpecified; },
 /* harmony export */   isPromiseLike: function() { return /* binding */ isPromiseLike; },
 /* harmony export */   onComponentMounted: function() { return /* binding */ onComponentMounted; },
 /* harmony export */   onError: function() { return /* binding */ onError; },
 /* harmony export */   parseComponentActions: function() { return /* binding */ parseComponentActions; },
 /* harmony export */   preloadModules: function() { return /* binding */ preloadModules; },
+/* harmony export */   removeLoadedModules: function() { return /* binding */ removeLoadedModules; },
 /* harmony export */   resetDependencyConfig: function() { return /* binding */ resetDependencyConfig; },
 /* harmony export */   updateMountedComponent: function() { return /* binding */ updateMountedComponent; },
 /* harmony export */   updateUnMountComponent: function() { return /* binding */ updateUnMountComponent; }
@@ -538,16 +554,24 @@ __webpack_require__.r(__webpack_exports__);
 
 const getUrlHash = url => `${url}?${+new Date()}`;
 const hasModule = (modules, module) => modules.some(c => c.name === module.name && c.module === module.module);
-const preloadModules = name => new Promise((resolve, reject) => {
-  const names = typeof name === 'string' ? [name] : name;
+const preloadModules = names => new Promise((resolve, reject) => {
   window.requirejs(names, resolve, reject);
 });
+const removeLoadedModules = names => {
+  names.forEach(name => {
+    if (!_config__WEBPACK_IMPORTED_MODULE_2__.BASE_DEPENDENCIES.includes(name)) {
+      window.requirejs.undef(name);
+    }
+  });
+};
 const defineDependencies = deps => {
   const dependencies = (0,_store__WEBPACK_IMPORTED_MODULE_0__.getStore)(_config__WEBPACK_IMPORTED_MODULE_2__.DEPENDENCIES_KEY);
   const next = {};
   Object.keys(deps).forEach(name => {
-    next[name] = `${deps[name]}#${name}`;
-    window.requirejs.undef(name);
+    if (!_config__WEBPACK_IMPORTED_MODULE_2__.BASE_DEPENDENCIES.includes(name)) {
+      next[name] = `${deps[name]}#${name}`;
+      window.requirejs.undef(name);
+    }
   });
   window.requirejs.config({
     paths: next
@@ -559,7 +583,8 @@ const defineDependencies = deps => {
     }
   }, true);
 };
-const isModuleLoaded = name => window.requirejs.specified(name) && !!window.requirejs.s.contexts._.defined[name];
+const isModuleLoaded = name => window.requirejs.defined(name);
+const isModuleSpecified = name => window.requirejs.specified(name);
 const getMountedComponents = () => (0,_store__WEBPACK_IMPORTED_MODULE_0__.getStore)(_config__WEBPACK_IMPORTED_MODULE_2__.MOUNTED_COMPONENTS_KEY);
 const onComponentMounted = (module, callback) => {
   const modules = Array.isArray(module) ? module : [module];
@@ -743,6 +768,26 @@ function updateUnMountComponent(moduleDefined) {
     module
   });
 }
+function getSelfInfo(params) {
+  const {
+    name,
+    module,
+    url
+  } = params;
+  const dependencies = (0,_store__WEBPACK_IMPORTED_MODULE_0__.getStore)(_config__WEBPACK_IMPORTED_MODULE_2__.DEPENDENCIES_KEY);
+  return {
+    name,
+    module,
+    url: url || dependencies[name]
+  };
+}
+function getClassNameWithModule(self, prefix) {
+  const {
+    name,
+    module
+  } = self;
+  return `${prefix} ${[name, module].filter(Boolean).join('-')}`;
+}
 
 /***/ }),
 
@@ -1156,8 +1201,13 @@ function reactComponent(config) {
       name,
       module
     });
+    $self = (0,_helper__WEBPACK_IMPORTED_MODULE_2__.getSelfInfo)({
+      name,
+      module,
+      url
+    });
     render() {
-      const LoaderNode = _connector__WEBPACK_IMPORTED_MODULE_4__["default"].getLoaderComponent();
+      const Fallback = _connector__WEBPACK_IMPORTED_MODULE_4__["default"].getFallbackComponent();
       const {
         $silent,
         $componentProps,
@@ -1176,13 +1226,13 @@ function reactComponent(config) {
         if ($silent || (0,_helper__WEBPACK_IMPORTED_MODULE_2__.isModuleLoaded)(name)) {
           return null;
         }
-        return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(LoaderNode, {
-          $name: name,
-          $module: module,
+        return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Fallback, {
+          $self: this.$self,
           $store: store
         });
       }
       return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(ComponentNode, (0,_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__["default"])({}, $componentProps, {
+        $self: this.$self,
         $dispatch: this.$dispatch,
         $store: store,
         $postMessage: this.$postMessage,
@@ -1215,6 +1265,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _react_component__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./react-component */ "./src/core/react-component.tsx");
 /* harmony import */ var _vue_component__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./vue-component */ "./src/core/vue-component.tsx");
 /* harmony import */ var _helper__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./helper */ "./src/core/helper.ts");
+/* harmony import */ var _error_boundary__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./error-boundary */ "./src/core/error-boundary.tsx");
+
 
 
 
@@ -1248,7 +1300,11 @@ const renderComponent = ({
       $silent,
       $ref
     };
-    const node = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(C, nextProps);
+    const node = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_error_boundary__WEBPACK_IMPORTED_MODULE_5__["default"], {
+      name: name,
+      module: module,
+      url: url
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(C, nextProps));
     root.render(renderNode ? renderNode(node) : node);
     return () => new Promise(resolve => {
       setTimeout(() => {
@@ -1355,6 +1411,11 @@ function vueComponent(config) {
     const errorRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)();
     const isUnMountedRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(false);
     const ComponentNodeRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)();
+    const selfRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)((0,_helper__WEBPACK_IMPORTED_MODULE_4__.getSelfInfo)({
+      name,
+      module,
+      url
+    }));
     const containerDivRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
     const propsReactiveRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)();
     const storeReactiveRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)();
@@ -1363,7 +1424,7 @@ function vueComponent(config) {
     const updateVueComponentRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)();
     const [componentReady, setComponentReady] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
     const [isError, setIsError] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
-    const LoaderNode = _connector__WEBPACK_IMPORTED_MODULE_1__["default"].getLoaderComponent();
+    const Fallback = _connector__WEBPACK_IMPORTED_MODULE_1__["default"].getFallbackComponent();
     const {
       $silent,
       $componentProps
@@ -1421,7 +1482,8 @@ function vueComponent(config) {
               $logger,
               $postMessage,
               $t,
-              $store: storeReactiveRef.current.value
+              $store: storeReactiveRef.current.value,
+              $self: selfRef.current
             },
             // eslint-disable-next-line react/no-this-in-sfc
             key: this.key
@@ -1511,15 +1573,14 @@ function vueComponent(config) {
     if (isError) {
       throw errorRef.current;
     }
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, !componentReady && !$silent && !(0,_helper__WEBPACK_IMPORTED_MODULE_4__.isModuleLoaded)(name) ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(LoaderNode, {
-      $name: name,
-      $module: module,
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, !componentReady && !$silent && !(0,_helper__WEBPACK_IMPORTED_MODULE_4__.isModuleLoaded)(name) ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Fallback, {
+      $self: selfRef.current,
       $store: store
     }) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-      className: `various-component-${(0,_helper__WEBPACK_IMPORTED_MODULE_4__.getNameWithModule)({
+      className: (0,_helper__WEBPACK_IMPORTED_MODULE_4__.getClassNameWithModule)({
         name,
         module
-      })}`,
+      }, 'various-vue-component'),
       ref: containerDivRef
     }));
   };
@@ -1647,6 +1708,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   isModuleLoaded: function() { return /* reexport safe */ _helper__WEBPACK_IMPORTED_MODULE_12__.isModuleLoaded; },
 /* harmony export */   onComponentMounted: function() { return /* reexport safe */ _helper__WEBPACK_IMPORTED_MODULE_12__.onComponentMounted; },
 /* harmony export */   preloadModules: function() { return /* reexport safe */ _helper__WEBPACK_IMPORTED_MODULE_12__.preloadModules; },
+/* harmony export */   removeLoadedModules: function() { return /* reexport safe */ _helper__WEBPACK_IMPORTED_MODULE_12__.removeLoadedModules; },
 /* harmony export */   renderComponent: function() { return /* reexport safe */ _render_component__WEBPACK_IMPORTED_MODULE_15__["default"]; },
 /* harmony export */   version: function() { return /* binding */ version; }
 /* harmony export */ });
@@ -1688,16 +1750,16 @@ __webpack_require__.r(__webpack_exports__);
 
 
 // eslint-disable-next-line no-undef
-const version = "5.0.1";
+const version = "5.1.0";
 /* harmony default export */ __webpack_exports__["default"] = (config => {
   const {
     dependencies,
     root,
     store = {},
     actions = {},
-    Loader: LoaderComponent,
-    Error: ErrorComponent,
-    Container: ContainerComponent = _default_component__WEBPACK_IMPORTED_MODULE_6__.Container,
+    Fallback,
+    ErrorFallback,
+    Root = _default_component__WEBPACK_IMPORTED_MODULE_6__.Root,
     middlewares,
     i18n,
     ...rest
@@ -1706,11 +1768,11 @@ const version = "5.0.1";
     _connector__WEBPACK_IMPORTED_MODULE_4__["default"].setMiddlewares(middlewares);
   }
   _connector__WEBPACK_IMPORTED_MODULE_4__["default"].setStoreActions(actions);
-  if (LoaderComponent) {
-    _connector__WEBPACK_IMPORTED_MODULE_4__["default"].setLoaderComponent(LoaderComponent);
+  if (Fallback) {
+    _connector__WEBPACK_IMPORTED_MODULE_4__["default"].setFallbackComponent(Fallback);
   }
-  if (ErrorComponent) {
-    _connector__WEBPACK_IMPORTED_MODULE_4__["default"].setErrorComponent(ErrorComponent);
+  if (ErrorFallback) {
+    _connector__WEBPACK_IMPORTED_MODULE_4__["default"].setErrorFallbackComponent(ErrorFallback);
   }
   (0,_store__WEBPACK_IMPORTED_MODULE_2__.createStore)({
     ...store,
@@ -1719,7 +1781,7 @@ const version = "5.0.1";
     [_config__WEBPACK_IMPORTED_MODULE_3__.DEPENDENCIES_KEY]: dependencies,
     [_config__WEBPACK_IMPORTED_MODULE_3__.MESSAGE_KEY]: null
   });
-  ContainerComponent.displayName = 'various-container';
+  Root.displayName = 'various-app-root';
   class R extends react__WEBPACK_IMPORTED_MODULE_0__.Component {
     static displayName = 'various-app';
     componentDidMount() {
@@ -1727,8 +1789,9 @@ const version = "5.0.1";
     }
     render() {
       return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_error_boundary__WEBPACK_IMPORTED_MODULE_7__["default"], {
-        name: "app"
-      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(ContainerComponent, null));
+        name: "app",
+        url: dependencies.app
+      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Root, null));
     }
   }
   (0,react_dom_client__WEBPACK_IMPORTED_MODULE_1__.createRoot)(document.querySelector(root || _config__WEBPACK_IMPORTED_MODULE_3__.ROOT)).render( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(R, null));