SYREN ~ a beautiful mermaid baby with magical powers
---
a scripting language which, alongside css, compiles into rainmeter skins.

Q: why?
mainly for fun, in the long term i want to make rainmeter a more accessible and flexible platform, and to speed up writing skins like visualizers or settings menus

Q: how?
by consolidating generator code and the skin itself into one codebase, as well as allowing styling with css to set properties on several components at once, the footprint of your rainmeter skin's source code is (hopefully) reduced and more organized making it easier to conceptualize.

EXAMPLE
---
a basic syren application consists of a .syren file which defines at least one Application object, and a .css file (optional)

-> test.syren
    // create a new syren application
    new Application testapp

    // create a new string meter and make it a component of testapp
    new StringMeter meter1 -> testapp
    // set the content field of the meter1 object
    meter1.content = "Hello, World!"

    // same as above
    new StringMeter meter2 -> testapp
    meter2.content = "pee pee poo poo"

    // outputs: <array: <object: StringMeter>, <object: StringMeter>>
    echo "${testapp.components}"

in the corresponding css file, we set the colors of the string meters, and move the second one down. this file would apply to all Application objects created by the corresponding syren file.

-> test.css
    #meter1 {
        color: #ff00ff;
    }

    #meter2 {
        color: #ffff00;
        y: 20;
    }

these files would "compile" into an .ini file for each Application.

-> testapp.ini
    [rainmeter]
    update = 1000
    accurateText = 1

    [meter1]
    meter = string
    text = Hello, World!
    antiAlias = 1
    fontColor = ff00ff

    [meter2]
    meter = string
    y = 20
    text = pee pee poo poo
    antiAlias = 1
    fontColor = ffff00

GETTING STARTED
---
you will need:
->  node.js
!   tested with node.js v16.15.0 (lts)
    you can check with `node -v` in cmd

->  npm
!   tested with npm v8.5.5
    you can check with `npm -v` in cmd

->  rainmeter
!   tested with rainmeter v4.5.13
    you can check with right-click tray icon > About

~>  git
*   optional
    used to update repositories in @Sources\ and syren itself

~>  knowledge of rainmeter, css, and any programming language
*   rainmeter resource: https://docs.rainmeter.net/manual/
*   css resource: https://developer.mozilla.org/en-US/docs/Web/CSS
*   for the last one, try learning lua! it's quite simple and you would need to
    learn it eventually anyway for rainmeter

steps:
1)  install syren (git clone into My Documents\Rainmeter\Skins\)
*   alternatively download repository as .zip and extract syren\ into Skins\

2)  cd @Resources

3) npm i
*  install the css parser

4)  compile.bat
*   this will make @Sources\ in the syren\ folder
*   this is where you place all your .syren and .css files, they are included
    in to your compilation automagically when running the compiler

ARCHITECTURE
---
the main folder which contains the source code for all your syren applications
is Skins\syren\@Sources. the "compiler" will include all files ending in .css
and .syren in this folder and its subfolders in the 'compilation'.

i put compiler in quotes as it is not much of a compiler. instead it is more of
a preprocessor. it runs in the following steps:

1.  interpret all the scripts
*   all the scripts (.syren files) will be ran in order of global1st.syren, to
    all other .syren files in alphabetical order, to global2nd.syren

2. application, meter, and measure objects are extracted from the closed runtime

3. parse all css files, and apply properties to the extracted objects

4. serialize all the objects into .ini files of their corresponding application


SYNTAX (CSS)
---
syren css files are essentially just a quicker way to set properties of objects.

-> setting position in syren
    object.x = 100
    object.y = 50
    object.z = 0
    object.w = 0

-> setting position in css
    #object {
        x: 100;
        y: 50;
        z: 0;
        w: 0;
    }

notice how the selector (#object) begins with a hash, or what normally represents an id in css. in syren's flavor of css, every

    new StringMeter meter -> testapp
    meter.classes += "alice"
    // you could visualize this as <StringMeter id="meter" class="alice">

some selectors that would affect this component:

    .alice
    #meter
    StringMeter#meter
    StringMeter.alice
    #testapp #meter.alice
    Application#testapp StringMeter#meter.alice