JSS Animations

JSS Animations is a new feature that will be added to JSS in the upcoming release. This feature will allow developers to create dynamic and interactive animations using JSS syntax. With JSS Animations, you can easily define animations for elements on your web page, such as fading in and out, sliding, rotating, and more. This feature will provide a simple and intuitive way to create animations without the need for complex CSS or JavaScript code.

We will be looking at something like this :

    @keyframes loading {
        from {
            transform = rotate(0deg);
        }
        to {
            transform = rotate(360deg);
        }
    }
    #btn:click {
        animationName = loading;
    }
                        

@keyframes loading {
    from {
        transform = rotate(0deg);
    }
    to {
        transform = rotate(360deg);
    }
}
#btn:click {
    animationName = loading;
}
                        

More Propreties

JSS will be adding more properties to its syntax in the upcoming release. These properties will provide developers with additional options for styling elements on their web pages. Some of the new properties that will be added include innerHTML, textContent, and more. These properties will allow developers to manipulate the content of elements directly from their JSS code, making it easier to create dynamic and interactive web applications.

Here is a list of new propreties that will be included in JSS :

    #example {
        innerHTML = `<h1> JSS </h1>`;
        outerHTML = `<h1> JSS </h1>`;
        innerText =  "JSS" ;
        textContent =  "JSS" ;
        value =  "example@email.com" ;
        src =  "https://example.com/image.jpg" ;
        href = "https://example.com";
        classes = 'bi bi-x-lg';
        disabled = true;
        checked = false;
        +('any HTML attribute') = 'any value';
    }
    //Some for readonly properties
    if ( (#example)->liveWidth > 100px  ) {
        ... code here;
    }
    if ( (#example)->liveHeight < 5rem  ) {
        ... code here;
    }
    //And More...
                        

#example {
    innerHTML = `...`;
    outerHTML = `...`;
    innerText =  "JSS" ;
    textContent =  "JSS" ;
    value =  "..." ;
    src =  "..." ;
    href = "...";
    classes = '...';
    disabled = true;
    checked = false;
    +('any HTML attribute') = 'any value';
}
//Some for readonly properties
if ( (#example)->liveWidth > 100px  ) {
    ... code here;
}
if ( (#example)->liveHeight < 5rem  ) {
    ... code here;
}
//And More...
                        

Those propreties can be used in any block like conditionals, events or functions.

Media Queries

This feature will allow developers to create responsive designs that adapt to different screen sizes and devices. With JSS Media Queries, you can define styles for specific screen sizes, orientations, and resolutions, ensuring that your web applications look great on any device. This feature will provide a simple and intuitive way to create responsive designs without the need for complex CSS or JavaScript code.

We will be looking at something like this

    @media screen and (max-width: 600px) {
        #example {
            color = (#div15)->color;
        }
    }
                        

@media screen and (max-width: 600px) {
    #example {
        color = (#div15)->color;
    }
}
                        

Development Server

This will make debugging and testing your JSS code much easier. The development server will provide a live preview of your JSS styles and JavaScript functionalities, allowing you to see the changes in real-time as you make them. This will help you identify and fix any issues with your code quickly and efficiently, making the development process smoother and more productive.
This server is designed to enhance development speed and performance by transpiling only the newly written JSS code, while leaving the unchanged portions of the code intact.

By running this :

    npm run jss:server