Deprecate <lasso-resource> and replace it with <lasso-var>

lasso-js / lasso

Advanced JavaScript module bundler, asset pipeline and optimizer

580 stars 75 forks source link

Deprecate <lasso-resource> and replace it with <lasso-var> #152

Open patrick-steele-idem opened 8 years ago

patrick-steele-idem commented 8 years ago

<lasso-var favicon="./favicon.ico" foo="./foo.png">
    <html>
        <head>
            <lasso-head/>
            <link rel="shortcut icon" href=favicon.url>
        </head>
    </html>
</lasso-var>

patrick-steele-idem commented 7 years ago

@philidem, thoughts?

philidem commented 7 years ago

We should not have to nest the content of the page within the <lasso-var> tag. Was that intentional in your sample code?
If feel like lasso-var will be confusing to people so I think we should consider some alternate proposals.

patrick-steele-idem commented 7 years ago

Since invoking lasso on a resource is asynchronous we currently have to use weird magic to make the variables available for the template. That magic includes wrapping the entire compiled template and evaluating the expressions at the very beginning which can cause problems in some situations since we are changing the order of the expressions in the template. While it normally it isn't a problem I am thinking we should avoid the potential for frustrating edge cases. If we require that the developer nest within the tag then we can avoid having to change the order.

@mlrawlings and I talked about <lasso-resource-var> and <lasso-var> and were leaning towards less typing.

I created this issue to quickly capture our discussion and possible proposal. Open to suggestions...

patrick-steele-idem commented 7 years ago

/CC @mlrawlings

mlrawlings commented 7 years ago

@patrick-steele-idem with respect to nesting, I'd prefer to see our examples keep the variable close to the tag that's using it:

<html>
    <head>
        <lasso-head/>
        <lasso-var favicon="./favicon.ico">
            <link rel="shortcut icon" href=favicon.url>
        </lasso-var>
    </head>
    <body>
    ...
    </body>
</html>

@philidem I'm really not a fan of the nesting either, but I think our goal should be to not need the <lasso-var> tag except in rare circumstances and rely on things like <lasso-img> for the more common use cases.

I see this kinda as a "low-level tag" that could be targeted by transforms:

<lasso-img src="./path/to/img.png" />

could transform to

<lasso-var __img="./path/to/img.png">
   <img src=__img.url width=__img.width height=__img.height />
</lasso-var>

but it would also be able to pick up the slack for use cases that we haven't covered