SSR styles and content

.editorconfig

@@ -5,7 +5,7 @@ charset = utf-8
 end_of_line = lf
 insert_final_newline = true
 indent_style = space
-indent_size = 4
+indent_size = 2
 trim_trailing_whitespace = true
 
 [*.js]

app/Helpers/functions.php

@@ -773,7 +773,7 @@ function clearPageCache( $page_id ) {
   }
 
   foreach ($relations as $key => $relation) {
-    if ($relation['page_id'] === $page_id) {
+    if (isset($relation['page_id']) && $relation['page_id'] === $page_id) {
       if ( File::exists($cachePath . '/' . $relation['hash']) ) {
         File::delete($cachePath . '/' . $relation['hash']);
       }
@@ -975,6 +975,10 @@ function _extractElementsNames( $element = [],  &$elementNames ){
     return;
   }
 
+  if( isset( $element['lazySection'] ) && $element['lazySection'] ){
+    return;
+  }
+
 
   if( array_search( $element['name'], $elementNames ) === false){
     $elementNames[] = $element['name'];
@@ -984,4 +988,4 @@ function _extractElementsNames( $element = [],  &$elementNames ){
       _extractElementsNames( $child, $elementNames );
     }
   }
-}
+}

app/Http/Controllers/Admin/PagesController.php

@@ -277,11 +277,12 @@ public function clearCache( $page_id = null ){
       File::put( $cachePath . '/relations.json', '{}' );
       return true;
     }
-    
+
     if ( ! $page_id ) {
       $files = File::allFiles( $cachePath );
       File::delete( $files );
-      File::put( $cachePath . '/relations.json', '{}' );
+      File::put( $cachePath . '/relations.json', '[]' );
+      File::put( $cachePath . '/users.json', '[]' );
       return response()->json( ['success' => true], 200, [], JSON_UNESCAPED_UNICODE );
     }
 

app/Page.php

@@ -652,7 +652,10 @@ static function getPreloadPageContent($page_id)
       'content' => '',
       'important_styles' => '',
     ];
-    if (!$page_id) {
+    if (1) {
+      return $result;
+    }
+    if ( ! $page_id ) {
       return $result;
     }
     /** @var Page $page */
@@ -694,31 +697,42 @@ static function getPreloadPageContent($page_id)
     $important_styles = [];
     $client = new Client(['base_uri' => "http://localhost:9000/"]);
     try {
-
       $test_result = $client->request('GET')->getStatusCode();
+      if( $test_result === 200 ) {
+
       $postExpress = new Client([
-        'base_uri' => "http://localhost:9000/",
-        'defaults' => [
-            'headers' => ['Content-Type' => 'application/x-www-form-urlencoded'],
-        ]
+          'base_uri' => "http://localhost:9000/",
+          'defaults' => [
+              'headers' => ['Content-Type' => 'application/x-www-form-urlencoded'],
+          ]
       ]);
-    $postResult = $postExpress->request('POST', '', [
+      $postResult = $postExpress->request('POST', '', [
         'form_params' => [
-            'json' =>
-                json_encode(
-                    [
-                        'page' => static::get_areas_for_page($page_id),
-                        'page_id' => $page_id,]
-                ),
+          'json' =>
+            json_encode(
+            [
+              'page' => static::get_areas_for_page($page_id),
+              'page_id' => $page_id,
+              'altrp' => [
+                'version' => getCurrentVersion()
+                ],
+              'altrpImageLazy'=> get_altrp_setting( 'altrp_image_lazy', 'none' ),
+              'altrpSkeletonColor'=> get_altrp_setting( 'altrp_skeleton_color', '#ccc' ),
+              'altrpSkeletonHighlightColor'=> get_altrp_setting( 'altrp_skeleton_highlight_color', '#d0d0d0' ),
+            ]
+          ),
 
         ]
-    ]);
-//    dd($postResult);
-    $result['content'] = $postResult->getBody();
-    return $result;
-    } catch (\Exception $e){
-        dd($e);
+      ]);
+//        dd($postResult->getBody()->getContents());
+      $result = $postResult->getBody()->getContents();
+      $result = json_decode($result, true);
 
+      return $result;
+      }
+    } catch (\Exception $e){
+//        dd($e);
+        logger( $e->getMessage() );
     }
 
     ob_start();

config/app.php

@@ -33,7 +33,7 @@
     |
     */
 
-    'altrp_version' => '0.14.33',
+    'altrp_version' => '0.14.35',
 
 
     /*
@@ -252,4 +252,4 @@
         'CacheService' => App\Altrp\Facades\CacheService::class,
     ],
 
-];
+];

resources/modules/editor/src/js/classes/Icon.js

@@ -6,4 +6,4 @@ class Icon {
   }
 }
 
-export default Icon
+export default Icon

resources/modules/editor/src/js/components/Styles.js

@@ -6,7 +6,7 @@ class Styles extends Component {
   constructor(props){
     super(props);
     this.state = {
-      elementStyles: [],
+      elementStyles: this.props.elementStyles || [],
       fonts: [],
     };
     this.stylesContainer = React.createRef();

resources/modules/editor/src/js/components/altrp-image/AltrpImage.js

@@ -2,7 +2,7 @@ import Skeleton, {SkeletonTheme} from 'react-loading-skeleton';
 
 import {connect} from "react-redux";
 import React, {cloneElement, Component} from 'react';
-import {isEditor, renderAsset} from "../../../../../front-app/src/js/helpers";
+import {isEditor, isSSR, renderAsset} from "../../../../../front-app/src/js/helpers";
 import ImagePlaceholder from "./ImagePlaceholder";
 import {checkElementInViewBox} from "../../../../../front-app/src/js/helpers/elements";
 
@@ -11,7 +11,9 @@ class AltrpImage extends Component {
     super(props);
     this.imageRef = React.createRef();
     let visible = true;
-    if (isEditor() || props.lazy === false) {
+    if(isSSR()){
+      visible = false;
+    } else if (isEditor() || props.lazy === false) {
 
     } else if (window.altrpImageLazy
         && window.altrpImageLazy !== 'none'
@@ -65,7 +67,7 @@ class AltrpImage extends Component {
 
     let width = this.props.width;
     let height = this.props.height;
-    if (this.props.image instanceof File) {
+    if (! isSSR() && this.props.image instanceof File) {
       media = this.props.image
     } else {
       if (this.props.default) {

resources/modules/editor/src/js/components/widgets/ButtonWidget.js

@@ -4,7 +4,7 @@ let Dropbar = React.lazy(() => import("../altrp-dropbar/AltrpDropbar"));
 import {
   getComponentByElementId,
   getHTMLElementById,
-  isEditor,
+  isEditor, isSSR,
   parseURLTemplate,
   printElements,
   renderAssetIcon,
@@ -171,7 +171,7 @@ class ButtonWidget extends Component {
       "background_image",
       {}
     );
-      
+
     let modelData = this.props.element.hasCardModel()
       ? this.props.element.getCardModel().getData()
       : this.props.currentModel.getData();
@@ -218,9 +218,9 @@ class ButtonWidget extends Component {
         title={tooltip || null}
       >
         {buttonText}
-        <span className={"altrp-btn-icon "}>
+        {! isSSR() && <span className={"altrp-btn-icon "}>
           {renderAssetIcon(buttonMedia)}{" "}
-        </span>
+        </span>}
       </button>
     );
 
@@ -264,19 +264,19 @@ class ButtonWidget extends Component {
           >
             {" "}
             {buttonText || ""}
-            <span className={"altrp-btn-icon "}>
+            {! isSSR() && <span className={"altrp-btn-icon "}>
               {renderAssetIcon(buttonMedia)}{" "}
-            </span>
+            </span>}
           </a>
         );
       } else {
         link = (
           <Link to={url} onClick={this.onClick} className={classes} title={tooltip || null}>
             {" "}
             {buttonText || ""}
-            <span className={"altrp-btn-icon "}>
+            {! isSSR() && <span className={"altrp-btn-icon "}>
               {renderAssetIcon(buttonMedia)}{" "}
-            </span>
+            </span>}
           </Link>
         );
       }
@@ -291,9 +291,9 @@ class ButtonWidget extends Component {
           title={tooltip || null}
         >
           {buttonText}
-          <span className={"altrp-btn-icon "}>
+          {! isSSR() && <span className={"altrp-btn-icon "}>
             {renderAssetIcon(buttonMedia)}{" "}
-          </span>
+          </span>}
         </button>
       );
     }

resources/modules/front-app/src/FrontApp.js

@@ -4,7 +4,7 @@ import appStore from "./js/store/store";
 import AppContent from "./js/components/AppContent";
 import { Provider } from "react-redux";
 import Resource from "../../editor/src/js/classes/Resource";
-import { changeCurrentUser, setUserNotice, setUsersOnline } from "./js/store/current-user/actions";
+import { setUserNotice, setUsersOnline } from "./js/store/current-user/actions";
 import FontsManager from "./js/components/FontsManager";
 import Echo from "laravel-echo";
 import { HTML5Backend } from 'react-dnd-html5-backend'

resources/modules/front-app/src/index.js

@@ -1,6 +1,6 @@
 console.log('FIRST SCRIPT: ',performance.now());
 import './sass/front-style.scss';
-
+window.sSr = false;
 
 /**
  * Параллельно загружаем все необходимые модули

resources/modules/front-app/src/js/classes/modules/PageUpdater.js

@@ -1,6 +1,8 @@
 /**
  * @class PageUpdater
  */
+import {loadLazySections} from "../../helpers/optimization";
+
 class PagesUpdater {
   /**
    * Получить все внутренние ссылки на странице
@@ -20,21 +22,24 @@ class PagesUpdater {
     //   this.updating = false;
     //   return
     // }
+
     let pages = window.altrpPages.map(page => page.id);
     pages = pages.filter((id, idx) => ! window.pageStorage[id] && pages.indexOf(id) === idx);
-    pages = pages.map(id => window.pageLoader.loadPage(id));
-    pages = await Promise.all(pages);
+    pages = pages.map(id => async ()=>{return window.pageLoader.loadPage(id)});
+    for (const page of pages) {
+      let res = await page();
+    }
   }
   async startUpdating(){
-    if(! this.updating){
-      this.updating = true;
+    if(! this.updated){
+      loadLazySections();
+      this.updated = true;
       await this._startUpdating();
-      this.updating = false;
     }
 
   }
 }
 
 window.pageUpdater =  new PagesUpdater;
 
-export default window.pageUpdater;
+export default window.pageUpdater;

resources/modules/front-app/src/js/components/ElementWrapper.js

@@ -10,7 +10,7 @@ import CarouselComponent from "../../../../editor/src/js/components/widgets/styl
 import GalleryComponent from "../../../../editor/src/js/components/widgets/styled-components/GalleryComponent";
 import ButtonComponent from "../../../../editor/src/js/components/widgets/styled-components/ButtonComponent";
 
-class ElementWrapper extends window.Component {
+class ElementWrapper extends Component {
   constructor(props) {
     super(props);
     this.state = {