Creating New Page

To build SSR SPA in Yugal you have to make .php files in ./src directory. File save in this directory as index.php will be treated as root file, and other files will be indexed as per their name. Example file in ./src with name about.php will be indexed as ./about

You have to return string which contains HTML code in different tags. Example, in HTML string to define code that should be injected in body tag of DOM should be written in <body>, for page specific head tag, use <head>

Lifecycle Methods

From Version 8.9, Yugal only supports two lifecycle methods, which are below. Use script tag and define lifecycle method in its use tag to define these methods.

  1. willmount : This event will be called when page is about to be injected to DOM.

  2. didmount: This event is called when page is injected to DOM.

Defining CSS in Yugal

Mainly, CSS can be defined in Yugal using three ways.

  1. Adding external CSS file to global head of the project.

  2. Defining CSS in <style> in .php file of respective page, you can use use attribute to tell Yugal, the way it should be processed. Use onpage value of use attribute to add CSS inline in DOM, and other way is use external as value of use attribute of style tag, Yugal will process and create a new file for the page and link it with the respective page, so you don't have to take care for it.

Example

<?php
return <<<HTML
    <head>
    <!-- Page Specific Header -->
        <title>
        Home Page
        </title>
    </head>
    <body>
        <h1>Hello World</h1>
        <p>HELLO HELLO</p>
    </body>
    <script use="willmount">
        console.log('WILL MOUNT LIFECYCLE METHOD');
    </script>
    <script use="didmount">
        console.log('DID MOUNT LIFECYCLE METHOD');
    </script>
    <style use="onpage">
    /*THIS STYLE WILL BE INJECTED WITH HTML CODE*/
        background:#000000;
    </style>
    <style use="external">
        /*YUGAL WILL CREATE NEW CSS FILE FOR THIS CODE AND WILL LINK IT WITH THIS PAGE */
        *{
            color:#ffffff;
        }
    </style>
    <!-- ANY TAG APART FROM THESE TAG IN THIS STRING'S ROOT WILL BE IGNORED -->
HTML;
?>

Yugal will remove all comments and compress the code, ie no comment in JavaScript, CSS or HTML will be sent to browser.

Always use ; when writing JavaScript code in Yugal, or the app may crash.

Previous./src/@assetsNextFallback for Page

Last updated