[SOLVED] How to dynamically define dependencies for a marko template being rendered in express JS route using lasso?

How to dynamically define dependencies for a marko template being rendered in express JS route using lasso?

For example: Consider a route /theme The route should render itself in the theme (read: LESS color variables) specified as a route/query param. Based on the theme parameter, a custom JS script may also need to be injected.

The scripts and styles may or may not be included depending on the provided parameter (which rules out preconfiguring a lasso or using a bower.json). This also means that the dependencies must be specified right before the route renders the template.

I am currently using Marko v4 + ExpressJS + Lasso + Less + lasso-marko + lasso-less

I am not posting code as it's a little all over the place after trying so many things out. Please let me know if the description is not clear enough. Will try putting together a sandbox for demonstration purposes.

UPDATE: Adding in Core files and Directory Structure

sandbox
|- components
|  |- app-main.marko
|- dependencies
|  |- theme1
|     |- main.js
|     |- variables.less
|  |- theme2
|     |- main.js
|     |- variables.less
|- node_modules
|- public
|- templates
|  |- base
|     |- index.marko
|     |- style.less
|     |- browser.json  
|- index.js
|- package.json



//index.js
var markoExpress = require('marko/express');
require('marko/node-require');

var express = require('express');

var app = express();

var compression = require('compression'); 
var isProduction = process.env.NODE_ENV === 'production';

var lasso = require('lasso');
lasso.configure({
    plugins: [
        'lasso-marko', 
        'lasso-less'
    ],
    outputDir: __dirname + '/public', 
    bundlingEnabled: isProduction, 
    minify: isProduction, 
    fingerprintsEnabled: isProduction,
});

app.use(express.static('public'));
app.use(markoExpress());


app.use(compression());


app.use(require('lasso/middleware').serveStatic());

var template = require('./templates/base');
app.get('/:pub', function (req, res) {
    var pub = req.params.pub || "theme1";

    res.marko(template, {
        theme:pub
    });
});

app.listen(3000, function () {
    console.log('Example app listening on port 3000!');
    if (process.send) {
        process.send('online');
    }
});


//browser.json
{
    "dependencies": [
        {
            "if-flag": "theme1",
            "dependencies": [
                "less-import: ../../dependencies/theme1/variables.less",
                "../../dependencies/theme1/main.js"            
            ]
        },
        {
            "if-flag": "theme2",
            "dependencies": [
                "less-import: ../../dependencies/theme2/variables.less",
                "../../dependencies/theme2/main.js"  
            ]
        }
    ]
}


<!-- index.marko -->
<lasso-page package-path="./browser.json" flags="['${input.theme}']"/>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
  <title>Test Template</title>

  <!-- CSS includes -->
  <lasso-head/>

</head>
<body>

 <!-- Top-level UI component: -->
<include('../../components/app-main',input) />

<lasso-body/>
</body>
</html>


//style.less
main {
    background-color: @bgcolor;
    color: @fgcolor;
    width: 100%;
    height: 100%;
}





// ~/dependencies/theme1/variables.less
@bgcolor: red;
@fgcolor: white;

// ~/dependencies/theme1/main.js
alert("theme1");



<!-- app-main.marko -->
<main>TADAAA</main>

Solution

After trying many things, I had to resort to building the stylesheet programmatically as a string and inserting it into the template inside style tags.

<style>${input.computedStyleString}</style>

This is obviously less than ideal (considering how lasso handles everything else so well) but it works.