less - How to dynamically define dependencies for a marko template being rendered in express JS route using lasso? -
for example: consider route /theme route should render in theme (read: less color variables) specified route/query param. based on theme parameter, custom js script may need injected.
the scripts , styles may or may not included depending on provided parameter (which rules out preconfiguring lasso or using bower.json). means dependencies must specified right before route renders template.
i using marko v4 + expressjs + lasso + less + lasso-marko + lasso-less
i not posting code it's little on place after trying many things out. please let me know if description not clear enough. try putting sandbox demonstration purposes.
update: adding in core files , 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>
lasso supports conditional dependencies based on "flags": https://github.com/lasso-js/lasso#conditional-dependencies
if make theme 1 of flags use flag conditionally pull in less variables or other dependencies in browser.json:
{ "dependencies": [ { "if-flag": "theme1", "dependencies": [ "less-import: ./theme1/variables.less" ] }, { "if-flag": "theme2", "dependencies": [ "less-import: ./theme2/variables.less" ] } ] } you prebuild of of themes or use lasso @ runtime dynamically build page js/css.
hope solves problem.
Comments
Post a Comment