wapplr 1.0.68 → 1.0.70

package/dist/client/createClient.js

@@ -29,7 +29,7 @@ var _config = _interopRequireDefault(require("./config"));
 
 var _utils = require("../common/utils");
 
-var _excluded = ["disableUseDefaultMiddlewares"];
+var _excluded = ["disableUseDefaultMiddlewares", "styles"];
 
 function createClient() {
   var p = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -41,7 +41,11 @@ function createClient() {
   var clientConfig = config.client || {};
   var _clientConfig$disable = clientConfig.disableUseDefaultMiddlewares,
       disableUseDefaultMiddlewares = _clientConfig$disable === void 0 ? false : _clientConfig$disable,
+      _clientConfig$styles = clientConfig.styles,
+      styles = _clientConfig$styles === void 0 ? {} : _clientConfig$styles,
       rest = (0, _objectWithoutProperties2["default"])(clientConfig, _excluded);
+  var _styles$disableClearM = styles.disableClearMainStyle,
+      disableClearMainStyle = _styles$disableClearM === void 0 ? false : _styles$disableClearM;
   var defaultConfig = Object.create(Object.prototype, {
     disableUseDefaultMiddlewares: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _utils.defaultDescriptor), {}, {
       value: disableUseDefaultMiddlewares
@@ -85,13 +89,16 @@ function createClient() {
     }, {}, function out() {
       var globals = wapp.globals;
       var WAPP = globals.WAPP;
-      setTimeout(function () {
-        var elem = document.getElementById("css_" + WAPP);
 
-        if (elem) {
-          elem.parentNode.removeChild(elem);
-        }
-      }, 2000);
+      if (!disableClearMainStyle) {
+        setTimeout(function () {
+          var elem = document.getElementById("css_" + WAPP);
+
+          if (elem) {
+            elem.parentNode.removeChild(elem);
+          }
+        }, 2000);
+      }
     });
   }
 

package/dist/common/styles.js

@@ -188,12 +188,20 @@ function createStyleManager() {
       styleManager = _p$styleManager === void 0 ? createDefaultStyleManager(p) : _p$styleManager;
 
   function defaultHandle(req, res, next) {
+    var _targetObject$config2, _targetObject$config3, _targetObject$config4, _targetObject$config5, _targetObject$config6;
+
     var targetObject = wapp.getTargetObject ? wapp.getTargetObject() : wapp;
 
-    if (!targetObject.config || targetObject.config && !targetObject.config.styles || targetObject.config && targetObject.config.styles && !targetObject.config.styles.disableClearStyles) {
+    if (!(targetObject !== null && targetObject !== void 0 && (_targetObject$config2 = targetObject.config) !== null && _targetObject$config2 !== void 0 && (_targetObject$config3 = _targetObject$config2.styles) !== null && _targetObject$config3 !== void 0 && _targetObject$config3.disableClearStyles)) {
       stylesMiddleware.styleManager.clear();
     }
 
+    if (targetObject !== null && targetObject !== void 0 && (_targetObject$config4 = targetObject.config) !== null && _targetObject$config4 !== void 0 && (_targetObject$config5 = _targetObject$config4.assets) !== null && _targetObject$config5 !== void 0 && (_targetObject$config6 = _targetObject$config5.cssToInlineStyle) !== null && _targetObject$config6 !== void 0 && _targetObject$config6._getCss) {
+      wapp.styles.add({
+        _getCss: targetObject.config.assets.cssToInlineStyle._getCss
+      });
+    }
+
     next();
   }
 

package/dist/server/createServer.js

@@ -19,9 +19,13 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/obje
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _http = _interopRequireDefault(require("http"));
+var _nodeHttp = _interopRequireDefault(require("node:http"));
 
-var _http2 = _interopRequireDefault(require("http2"));
+var _nodeHttp2 = _interopRequireDefault(require("node:http2"));
+
+var _nodeFs = _interopRequireDefault(require("node:fs"));
+
+var _nodePath = _interopRequireDefault(require("node:path"));
 
 var _common = _interopRequireDefault(require("../common"));
 
@@ -74,11 +78,13 @@ function createServer() {
 
         if (assets && assets.chunks) {
           Object.keys(assets.chunks).forEach(function (key) {
-            assets.chunks[key].forEach(function (script) {
-              if (script.match(".js") && chunks.indexOf(script) === -1) {
-                chunks.push(script);
-              }
-            });
+            if (key === 'client') {
+              assets.chunks[key].forEach(function (script) {
+                if (script && script.match(".js") && chunks.indexOf(script) === -1) {
+                  chunks.push(script);
+                }
+              });
+            }
           });
         }
 
@@ -87,7 +93,7 @@ function createServer() {
         if (assets) {
           Object.keys(assets).forEach(function (key) {
             if (key !== "chunks" && scripts.indexOf(assets[key]) === -1) {
-              if (assets[key].match(".js")) {
+              if (assets[key] && assets[key].match(".js")) {
                 scripts.push(assets[key]);
               }
             }
@@ -96,7 +102,101 @@ function createServer() {
 
         return scripts;
       }
-    })
+    }),
+    cssToInlineStyle: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _utils.defaultDescriptor), {}, {
+      enumerable: false,
+      value: {
+        loadCssToStyle: function loadCssToStyle(a) {
+          if (Array.isArray(a) && a.length) {
+            var getThemeCss = function getThemeCss() {
+              var themeCss = [];
+
+              if (assets && assets.chunks) {
+                Object.keys(assets.chunks).forEach(function (key) {
+                  if (key === 'client') {
+                    var files = assets.chunks[key].sort();
+                    files.forEach(function (style) {
+                      if (style && style.match(".css") && a.indexOf(style) > -1 && !(themeCss.indexOf(style) > -1)) {
+                        themeCss.push(style);
+                      }
+                    });
+                  }
+                });
+              }
+
+              return themeCss;
+            };
+
+            var intersection = a.filter(function (x) {
+              return assets.cssToInlineStyle.css.includes(x);
+            });
+
+            if (intersection.length === a.length) {
+              return;
+            }
+
+            var themeCss = getThemeCss();
+            var text = "";
+            var css = [];
+            themeCss.forEach(function (cssPath) {
+              if (_nodeFs["default"].existsSync(_nodePath["default"].join(publicPath, cssPath))) {
+                var cssContent = _nodeFs["default"].readFileSync(_nodePath["default"].join(publicPath, cssPath));
+
+                if (cssContent) {
+                  text = [text, cssContent].filter(function (t) {
+                    return t;
+                  }).join(" ");
+                  css.push(cssPath);
+                }
+              }
+            });
+            assets.cssToInlineStyle.text = text;
+            assets.cssToInlineStyle.css = css;
+          }
+        },
+        _getCss: function _getCss() {
+          return assets.cssToInlineStyle.cssText || "";
+        },
+        text: '',
+        css: []
+      }
+    }),
+    getCsStyles: {
+      value: function value() {
+        var chunks = [];
+
+        if (assets && assets.chunks) {
+          Object.keys(assets.chunks).forEach(function (key) {
+            if (key === 'client') {
+              var files = assets.chunks[key].sort();
+              files.forEach(function (style) {
+                var _assets$cssToInlineSt;
+
+                if (style && style.match(".css") && chunks.indexOf(style) === -1 && !(((_assets$cssToInlineSt = assets.cssToInlineStyle.css) === null || _assets$cssToInlineSt === void 0 ? void 0 : _assets$cssToInlineSt.indexOf(style)) > -1)) {
+                  chunks.push(style);
+                }
+              });
+            }
+          });
+        }
+
+        var styles = [].concat(chunks);
+
+        if (assets) {
+          Object.keys(assets).forEach(function (key) {
+            if (key !== "chunks" && styles.indexOf(assets[key]) === -1) {
+              var _assets$cssToInlineSt2;
+
+              if (assets[key] && assets[key].match(".css") && !(((_assets$cssToInlineSt2 = assets.cssToInlineStyle.css) === null || _assets$cssToInlineSt2 === void 0 ? void 0 : _assets$cssToInlineSt2.indexOf(assets[key])) > -1)) {
+                styles.push(assets[key]);
+              }
+            }
+          });
+        }
+
+        return styles;
+      }
+    }
   });
   var defaultCredentials = Object.create(Object.prototype, {
     key: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _utils.defaultDescriptor), {}, {
@@ -132,7 +232,7 @@ function createServer() {
   (0, _utils.mergeProperties)(defaultConfig, rest);
   var defaultServers = Object.create(Object.prototype, {
     "80": (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _utils.defaultDescriptor), {}, {
-      value: _http["default"].createServer(app)
+      value: _nodeHttp["default"].createServer(app)
     })
   });
 
@@ -160,7 +260,7 @@ function createServer() {
 
     if (port) {
       if (!httpServer) {
-        httpServer = _http["default"].createServer(app);
+        httpServer = _nodeHttp["default"].createServer(app);
         wapplrServer.servers[port] = httpServer;
       }
 
@@ -197,7 +297,7 @@ function createServer() {
 
     if (key && cert && portSSL) {
       if (!httpsServer) {
-        httpsServer = _http2["default"].createSecureServer({
+        httpsServer = _nodeHttp2["default"].createSecureServer({
           key: key,
           cert: cert,
           allowHTTP1: true

package/dist/server/html.js

@@ -87,22 +87,26 @@ function html(_ref) {
     });
   }
 
+  wapp.styles.use(appStyle);
+  var styles = wapp.styles.getCssText();
+  var styleText = styles.map(function (style) {
+    return "<style id=\"".concat(style.id, "\">").concat(style.cssText, "</style>");
+  }).join("");
+  var csStyles = assets.getCsStyles();
+  var cssText = csStyles.map(function (css) {
+    return "<link rel=\"stylesheet\" as=\"style\" type=\"text/css\" href=\"".concat(css, "\" />");
+  }).join("");
+  var stateText = "<script>window[\"".concat(appStateName, "\"] = ").concat(JSON.stringify(state || {}), "</script>");
   var scripts = assets.getScripts();
   var scriptText = scripts.map(function (script) {
     if (script) {
-      return "<script key=\"".concat(script, "\" src=\"").concat(script, "\" ></script>");
+      return "<script src=\"".concat(script, "\" ></script>");
     }
 
     return "";
   }).join(" ");
-  var stateText = "<script>window[\"".concat(appStateName, "\"] = ").concat(JSON.stringify(state || {}), "</script>");
-  wapp.styles.use(appStyle);
-  var styles = wapp.styles.getCssText();
-  var styleText = styles.map(function (style) {
-    return "<style id=\"".concat(style.id, "\">").concat(style.cssText, "</style>");
-  }).join("");
   var headComponent = wapp.contents.getComponent("head");
   var headText = headComponent ? headComponent.render(wapp) : "";
   var htmlLang = lang.split("_")[0];
-  return "<!DOCTYPE html>\n<html lang=\"".concat(htmlLang, "\">\n    <head>\n        <meta charset=\"utf-8\">\n        <title>").concat(title, "</title>\n        <meta name=\"description\" content=\"").concat(description, "\">\n        <meta name=\"author\" content=\"").concat(author, "\">\n        <meta name=\"viewport\" content=\"").concat(viewport, "\">\n        <meta name=\"theme-color\" content=\"").concat(themeColor, "\">\n        <link rel=\"manifest\" href=\"").concat(manifest, "\" />\n        <link rel=\"icon\" href=").concat(icon, ">\n        <link rel=\"apple-touch-icon\" href=\"").concat(appleTouchIcon || icon, "\">\n        ").concat(styleText, "\n        ").concat(headText, "\n    </head>\n    <body>\n        <div class=\"").concat(appStyle.app, "\" id=\"").concat(containerElementId, "\">").concat(render, "</div>\n        ").concat(stateText, "\n        ").concat(scriptText, "\n    </body>\n</html>\n");
+  return "<!DOCTYPE html>\n<html lang=\"".concat(htmlLang, "\">\n    <head>\n        <meta charset=\"utf-8\">\n        <title>").concat(title, "</title>\n        <meta name=\"description\" content=\"").concat(description, "\">\n        <meta name=\"author\" content=\"").concat(author, "\">\n        <meta name=\"viewport\" content=\"").concat(viewport, "\">\n        <meta name=\"theme-color\" content=\"").concat(themeColor, "\">\n        <link rel=\"manifest\" href=\"").concat(manifest, "\" />\n        <link rel=\"icon\" href=").concat(icon, ">\n        <link rel=\"apple-touch-icon\" href=\"").concat(appleTouchIcon || icon, "\">\n        ").concat(styleText, "\n        ").concat(cssText, "\n        ").concat(headText, "\n    </head>\n    <body>\n        <div class=\"").concat(appStyle.app, "\" id=\"").concat(containerElementId, "\">").concat(render, "</div>\n        ").concat(stateText, "\n        ").concat(scriptText, "\n    </body>\n</html>\n");
 }

package/package.json

@@ -22,7 +22,7 @@
     "files": [
         "dist/*"
     ],
-    "version": "1.0.68",
+    "version": "1.0.70",
     "main": "dist/server",
     "browser": "dist/client",
     "repository": {