lasso-js / lasso-marko Goto Github PK

View Code? Open in Web Editor NEW

13.0 13.0 5.0 1.29 MB

Lasso.js plugin to support compilation of Marko template files

JavaScript 100.00%

lasso marko

lasso-marko's People

Contributors

Stargazers

Watchers

Forkers

ngocphuongnb yomed sirceljm dimichgh aganeshalingam

lasso-marko's Issues

init bundled separately, and with real file path name

I upgraded to lasso-marko 2.4.0 and can see that there is a new js file included which is not bundled with the rest of my page js. Additionally, this uses the real path name of the file on the machine, which could be a security concern. I'm not sure how much of this is expected behavior.

Page source looks like:

<script src="/static/website-home-HASH.js"></script>
<script src="/static/machine-apps-website-src-pages-home-template.marko.init-HASH.js"></script>

Seems to be from here:

lasso-marko/lasso-marko-plugin.js

Line 140 in 5241d6a

path: this.path + '.init.js',

renderToString returns undefined

Hello,
I have a problem with rendering method "renderToString" which returns "undefined", but only when using the plugin lasso-marko. If I compile marko templates from command line, everything is ok and the method returns correct value/HTML string. Maybe I do something wrong, but I think there is a problem with compiler options. Thank you

Compression not working for CSS files

compression middleware works for html and JS, however CSS files are not being compressed.

Unrecognized tag: lasso-head

Hello,

I've update my project to the latest version of marko and lasso

marko 4.7.2
lasso 3.0.0
lasso-marko 2.4.0

Now I got the errors that the lasso tags are unknown. The problem is reproducable with the marko-lasso example (https://github.com/marko-js-samples/marko-lasso). The example works with the older version but if you update to the current versions it fails with the "Unrecognized tag error".

Are there any changes how to bootstrap a application with marko + lasso?

Lasso v3 Support

Upgrade APIs to support promises

CSS bundling issue with script tags inside the markup of components

If within the browser.json of a user control / component (inside components folder) a CSS from URL is defined and <script> tags are present inside the markup file, all CSS files except those from the URL's will be bundled.

Here's a scenario:

A user control foocontrol is created. components > foocontrol contains the following files:

browser.json
component.js
index.marko
style.css
bar.js

The file browser.json contains:

{
  "dependencies": [{
      "type": "css",
      "url": "//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"
    },
    {
      "type": "js",
      "url": "//code.jquery.com/jquery-1.12.4.js"
    },
    {
      "type": "js",
      "url": "//code.jquery.com/ui/1.12.1/jquery-ui.js"
    },
    "./style.css",
    "./bar.js"
  ]
}

If the markup file index.marko contains <script> tags, for example:

<button  type="button" onclick="haveABlast()">
   Click Me!
</button>
<!-- More contents or nothing.. -->
<script>
  //anything that makes sense in js
</script>

This will cause style.css to get bundled but the CSS from jquery-ui.css will not be included.

Does lasso-marko require lasso (and other questions)?

The following code makes me think that lasso is a prerequisite dependency for using lasso-marko.

require('lasso').configure({
    "plugins": [
        ...
        "lasso-marko"
    ]
    ...
});

On the other end we have https://github.com/lasso-js-samples/lasso-marko and https://github.com/lasso-js-samples/lasso-templates which works without having lasso as a dependency.

This is confusing, I understand these are probably different ways of using this plugin, but the documentation has to explain this. I'm also scratching my head as to if I need to install marko and marko-widgets as separate dependencies to get both of those working.

lasso-page tag not compiled when lasso and/or marko installed global

I have a package which use marko and lasso as template engine. For example, package named PA.
PA was installed global:
pa.js (located at /usr/lib/node_modules/pa)

exports.render = function(data, viewFile, callback) {
    var viewObj = require(viewFile);
    viewObj.render(data, function(err, html) {
            callback(err, html);
    });
}

pb.js

var paLib = require('pa');
//some logic
paLib.render('/view/file/in/pb/directory/view.marko', {}, function(err, html) {
    console.log(html) //lasso-page not compiled
});

/view/file/in/pb/directory/view.marko

<lasso-page package-path="./browser.json"/>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test Page</title>
    <lasso-head/>
</head>
<body>
    <h1>Test Page</h1>
    <lasso-body/>
</body>
</html>

when run node pb.js, i got this error

error:  Error: Cannot find module 'marko/compiler'
at Function.Module._resolveFilename (module.js:469:15)
at module.exports (/usr/lib/node_modules/pa/node_modules/marko/node_modules/resolve-from/index.js:15:16)
at Object.markoExtension [as .marko] (/usr/lib/node_modules/pa/node_modules/marko/node-require.js:111:39)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at /usr/lib/node_modules/pa/pa.js:225:13
at process._tickCallback (internal/process/next_tick.js:103:7)

I tried install lasso and marko locally in PB package, the error gone away but lasso-page, lasso-head and lasso-body tags are not compiled, the rendered html was the same as view.marko file

Tested on windows 10: nodejs v6.9.1, npm v3.10.8
and centos 6.6: nodejs v6.9.5, npm v3.10.10
both marko and lasso were the latest version.

Please help me resolve this problem, thank you!

Marko hydrate support

Right now we have a beta branch for Marko hydrate. We need to figure out what needs to be done to get this out of beta.

https://github.com/lasso-js/lasso-marko/tree/lasso-v3-support

marko-js/marko#919

Using layouts introduces a lot of repetition in browser files

Senario:

You have a layout named default and two pages, A and B, that each use the layout. Pages A and B have resources that are common between them, so default has a browser.json. For example:

{
  "dependencies": [
    "./foo.css",
    "./bar.js"
  ]
}

Further, page A does not depend on any extra resources but page B does. Thus, page B has a browser.json:

{
  "dependencies": [ "./baz.js" ]
}

Now, if the layout were:

<lasso-page package-path="./browser.json" />
<html>
<head>
  <lasso-head />
</head>
<body>
  <layout-placeholder name="content" />
  <lasso-body />
</body>
</html>

And the template for B is:

<lasso-page package-path="./browser.json" />
<layout-use('../../layouts/default/template.marko')>
  <layout-put into="content">
    <form>some form that gets validated by `baz.js`</form>
  </layout-put>
</layout-use>

Then when we render the page baz.js will not be referenced; only the lasso-page in the default layout gets processed.

So, in order to "fix" this, we have to remove the lasso-page from the layout template and add one to each of the templates for A and B. Then each page A and B will need to include a dependency of "../../layouts/default/browser.json". Whereas before, A didn't even need a browser.json and B's only listed the additional dependency.

This is quite cumbersome. I'd like to see lasso-marko create a union of all the dependencies listed in all referenced browser.json files. I also think the inner-most dependencies should be inserted last. In this case it would be, for page B:

<script src="foo.css">
<script src="bar.js">
<script src="baz.js">

configuration problems

Hi,

We are having problems trying to get lasso-marko to work for our Koa server.
This is our current lasso setup.

If we run this file with node lasso-config.js it really works :)
However when we try to duplicate this with an identical browser.json file for the marko page, it fails - no script/dependency is inserted. We are pretty lost...

'use strict';

var lasso = require('lasso');

lasso.configure('./lasso-config.json');

lasso.lassoPage({
        name: 'registration',
        dependencies: [
            "./public/registration.js"
        ]
    },
    function(err, lassoPageResult) {
        if (err) {
          console.log(err);
        }

        console.log('lassoPageResult ', lassoPageResult);
        var headHtml = lassoPageResult.getHeadHtml();
        // headHtml will contain something similar to the following:
        // <link rel="stylesheet" type="text/css" href="static/my-page-169ab5d9.css">

        var bodyHtml = lassoPageResult.getBodyHtml();
        // bodyHtml will contain something similar to the following:
        //  <script type="text/javascript" src="static/my-page-2e3e9936.js"></script>
    });

Our marko rendering setup:

{
  "name": "registration",
  "dependencies": [
      "./public/registration.js"
  ]
}

our lasso config

{
  "plugins": [
    "lasso-marko"
  ],
  "outputDir": "static",
  "fingerprintsEnabled": true,
  "minify": false,
  "resolveCssUrls": true,
  "bundlingEnabled": true,
  "bundles": []
}

reference from server

let lasso  = require('lasso');
lasso.configure('./lasso-config.json');

In /views/pages/registration we have a registration.marko page template and a registration.browser.json file as follows:

{
  "name": "registration",
  "dependencies": [
      "./public/registration.js"
  ]
}

Our marko rendering logic

'use strict';

let marko = require('./marko-config');

function findTemplate(template) {
  console.log(template);
  return `../../views/pages/${template}/${template}.marko`
}

function resolveTemplate(templateName) {
  let templatePath = findTemplate(templateName);
  return require.resolve(templatePath);
}

module.exports =  function(response, template, data) {
  console.log('render - template', template);
  let resolvedTemplate = resolveTemplate(template);
  console.log(resolvedTemplate);
  //response.body = marko.load(resolvedTemplate).stream(data);
  //response.type = 'text/html';

  marko.load(resolvedTemplate).render({
          name: 'Frank'
      },
      function(err, output) {
          response.body = output;
          response.type = 'text/html';
      });
}

It renders the html but without the registration.js script injected. What are we missing or doing wrong?
Thanks :)

v2.4.2 package version-checking is not working in VM

We are using lasso v3.1.5 and marko v4.11.4. Using lasso-marko v2.4.2 locally works fine, but in our VM, it fails and does not register the new package types, so our bundling fails:

Downgrading to lasso-marko v2.4.1 fixes it.

My guess is that this version checking logic:
https://github.com/lasso-js/lasso-marko/blob/master/lasso-marko-plugin.js#L10-L14

Is not as portable as it appears?

not bundling supplemental JS when component.js not present

When one attempts to have a supplementary Javascript file bundled in a marko component, by referencing it in browser.json, lasso/lasso-marko does not bundle the supplementary Javascript file unless there is a [*_]component.js file in the component's folder.

Please see https://github.com/charlesread/lasso-marko-bundle-issue for a working demonstration of the possible issue.

Don't include "marko" as a dependency -- use "marko" module installed by app

When installing optimizer-marko it should not install marko. It should always use the marko module installed at the root of the developer's project.