search

marko-js / marko

A declarative, HTML-based language that makes building web apps fun
https://markojs.com/
MIT License
13.28k stars 641 forks source link

Use Square Bracket Notation in Templates for Angular 4 #923

Closed PascalAOMS closed 6 years ago

PascalAOMS commented 6 years ago

Bug Report

Marko Version: 4.0.1

Details

I am in the process of migrating an AngularJS app to Angular 4. MarkoJS is being used as template engine which worked fine with AngularJS.

Now NG 4 supports square bracket notation in HTML attributes which throw errors in Marko.

<div [hidden]=true></div>

Expected Behavior

The compiler should skip square bracket notation in attribute names and compile the template as usual.

Actual Behavior

The template compilation is stopped and errors are thrown. Mismatched group. A "]" character was found when " " was expected.

Additional Info ### Your Environment * Node 8.7.0 * Windows 10 ### Steps to Reproduce 1. create `.marko` file 2. write HTML tag with attribute in square brackets `
` 3. render Marko file ### Stack Trace ``` - Failed to compile "app\features\page\header\view\personalization-header.marko". Error: Error: An error occurred while trying to compile template at path "path\to\project\app\features\page\header\view\personalization-header.marko". Error(s) in template: 1) [app\features\page\header\view\personalization-header.marko:4:10] Mismatched group. A "]" character was found when " " was expected. at handleErrors (path\to\project\node_modules\marko\compiler\Compiler.js:82:21) at Compiler.compile (path\to\project\node_modules\marko\compiler\Compiler.js:151:9) at _compile (path\to\project\node_modules\marko\compiler\index.js:82:33) at
DylanPiercey commented 6 years ago

@PascalAOMS this issue has to due with how the MarkoJS parser handles expressions for attributes.

For example the following is supported:

<div class=a+b></div>
<div class=[item1, item2][0]></div>

Note spaces are valid in these expressions so the following is also supported:

<div class=a + b></div>
<div class=[item1, item2] [0]></div>

As it stands although we would like to support all valid html this particular use case is not high on our priority list to support.

We would however be interested in receiving a PR to support this use case if you are interested.

patrick-steele-idem commented 6 years ago

One possibility to support this is to add support for a new directive to change how the parser handles expressions with spaces and the rules for expression continuation. Something like the following:

<marko disallow-spaces-in-expressions/>

<div [hidden]=true></div>

If you are interested in exploring that option, please feel free to open a new issue with a proposal. Also, if you are interested in working on this, we can point you in the right direction, but here are links to the related parser code: