Allow regular expression for an HTML attribute value

[tinovyatkin]

Bug Report

Compiler throws an error on valid RegEx expressions in HTML5 pattern attribute for input elements.

Context

Given following code example

<input type="text" pattern="\w{2,20}" />

Expected Behavior

Compile normally, as it valid attribute value

Actual Behavior

Throws Error
'Invalid string ("\\w{1,30}"): SyntaxError: Unexpected token w in JSON at position 2'

Additional Info

Your Environment

• Version used: "marko": "^4.0.0-beta.1"
• Environment name and version: node.js 7.0
• Operating System and version (desktop or mobile): MacOS

Stack Trace

ERR! [10:40:05] [Marko] 1) [src/marko/vip-puj.marko:111:88] Invalid string ("\w{1,30}"): SyntaxError: Unexpected token w in JSON at position 2
ERR! [10:40:05] [Marko] 
ERR! [10:40:05] [Marko]     at handleErrors (/Users/tino/Sites/transfers.do/node_modules/marko/compiler/Compiler.js:72:21)
ERR! [10:40:05] [Marko]     at Compiler.compile (/Users/tino/Sites/transfers.do/node_modules/marko/compiler/Compiler.js:127:9)
ERR! [10:40:05] [Marko]     at _compile (/Users/tino/Sites/transfers.do/node_modules/marko/compiler/index.js:89:33)
ERR! [10:40:05] [Marko]     at doLoad (/Users/tino/Sites/transfers.do/node_modules/marko/runtime/loader/index.js:163:42)
ERR! [10:40:05] [Marko]     at compileMarkoFile (/Users/tino/Sites/transfers.do/tasks/marko.js:45:26)
ERR! [10:40:05] [Marko]   errors: 
ERR! [10:40:05] [Marko]    [ CompileError {
ERR! [10:40:05] [Marko]        context: [Object],
ERR! [10:40:05] [Marko]        node: undefined,
ERR! [10:40:05] [Marko]        message: 'Invalid string ("\\w{1,30}"): SyntaxError: Unexpected token w in JSON at position 2',
ERR! [10:40:05] [Marko]        code: 'INVALID_STRING',
ERR! [10:40:05] [Marko]        pos: [Object],
ERR! [10:40:05] [Marko]        endPos: [Object] } ] }

[patrick-steele-idem]

Thanks for opening the issue @tinovyatkin, but that is the expected behavior since Marko is using the JavaScript rules for parsing a String attribute value. This means that JavaScript escape sequences starting with the \ character must be valid JavaScript escape sequences. In your case you need to escape the backslash character so that the JavaScript parser doesn't treat it as a JavaScript String escape sequence:

<input type="text" pattern="\\w{2,20}" />

While this is not a bug in Marko, I admit that the escaping of those characters is less than ideal. What are your thoughts on enhancing Marko to allow a JavaScript regular expression for the attribute value?:

<input type="text" pattern=/\w{2,20}/ />

(we could update the compiler so that the output would be as expected)

[tinovyatkin]

I think accepting native RegEx as value will looks logical and very appropriate!

[tinovyatkin]

Also, I'm not sure that this pattern attribute will work in same way in all browsers after escaping \\, but can't find related spec thought...

[mlrawlings]

We should do this. It's come up before.

It should be as simple as adding the following to the escapeXmlAttr function:

if(attr instanceof RegExp) {
    let str = attr.toString();
    return str.slice(1, str.lastIndexOf('/'));
}

The only thing is that html style regex don't support flags, so I'm thinking we just drop them?