DmitrySoshnikov / babel-plugin-transform-modern-regexp

Babel plugin for modern RegExp features in JavaScript
MIT License
81 stars 8 forks source link

Named group is not transformed #7

Open dotnetCarpenter opened 6 years ago

dotnetCarpenter commented 6 years ago

Code:

'use strict'

let testString = 'foo:napp2019'
const regex = /(?<p>\w+):(?<name>\w+)(?<year>\d+)/ui

let res = regex.exec(testString)

console.log(res.groups.year)
console.log(res.groups.p)
console.log(res.groups.name)

console.log(regex.test(testString))

Result:

> babel-plugin-transform-modern-regexp@1.0.0 test /Users/nappdev/projects/bugz/babel-plugin-transform-modern-regexp
> babel --plugins transform-modern-regexp -o compiled.js script.js && node compiled.js

/Users/nappdev/projects/bugz/babel-plugin-transform-modern-regexp/compiled.js:8
console.log(res.groups.year);
                       ^

TypeError: Cannot read property 'year' of undefined
    at Object.<anonymous> (/Users/nappdev/projects/bugz/babel-plugin-transform-modern-regexp/compiled.js:8:24)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Function.Module.runMain (module.js:693:10)
    at startup (bootstrap_node.js:191:16)
    at bootstrap_node.js:612:3
npm ERR! Test failed.  See above for more details.

An example project for this issue is available here: https://github.com/dotnetCarpenter/bug-babel-plugin-transform-modern-regexp

dotnetCarpenter commented 6 years ago

node -v v8.11.3 yarn -v 1.7.0 babel -v 6.26.0 (babel-core 6.26.3)

DmitrySoshnikov commented 6 years ago

Yeah, it depends on the runtime support from #3. We should build the runtime in this repo, and also in the generic Babel plugin @nicolo-ribaudo is working on in https://github.com/babel/babel/pull/7105.

dotnetCarpenter commented 6 years ago

After reading babel/babel#7105, I understand that babel doesn't support changing regExp.exec, which there is a patch for in zloirock/core-js/#411.

In other words, babel-plugin-transform-modern-regexp doesn't work until #411 and #7105 land.

Please update the README.

DmitrySoshnikov commented 6 years ago

Yeah, it's in the README.

But we'll add the implementation to this plugin in parallel with the Babel plugin. A lightweight runtime already exists in the regexp-tree, it just needs to be published as the regexp-tree-runtime module (as written in #3), and added to the transform.

Alternatively we could embed the code of the runtime directly to a transforming file, but that would make the code bloated.

Eventually, both new RegExp('/ .. named groups ... /'), and / .. named groups ... / have to be translated into new RegExpTree( ... ), which will have wrappers for the exec, and other methods.

The class itself should be defined as extending RegExp (to support instanceof, etc).

I'll appreciate a PR for any of these parts in case, or I'll try to reach it at some point.

dotnetCarpenter commented 6 years ago

Fair enough. I will keep it in the back of my head ~ in case I get some free time to help out.

On Tue, Jul 3, 2018 at 7:22 AM Dmitry Soshnikov notifications@github.com wrote:

Yeah, it's in the README https://github.com/DmitrySoshnikov/babel-plugin-transform-modern-regexp#useruntime-option .

But we'll add the implementation to this plugin in parallel with the Babel plugin. A lightweight runtime already exists https://github.com/DmitrySoshnikov/regexp-tree/blob/master/src/compat-transpiler/runtime/index.js in the regexp-tree, it just needs to be published as the regexp-tree-runtime module (as written in #3 https://github.com/DmitrySoshnikov/babel-plugin-transform-modern-regexp/issues/3), and added to the transform.

Alternatively we could embed the code of the runtime directly to a transforming file, but that would make the code bloated.

Eventually, both new RegExp('/ .. named groups ... /'), and / .. named groups ... / have to be translated into new RegExpTree( ... ), which will have wrappers for the exec, and other methods.

The class itself should be defined as extending RegExp (to support instanceof, etc).

I'll appreciate a PR for any of these parts in case, or I'll try to reach it at some point.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/DmitrySoshnikov/babel-plugin-transform-modern-regexp/issues/7#issuecomment-402016462, or mute the thread https://github.com/notifications/unsubscribe-auth/AACq82LjR_uwOBXVSWWw6OCSEcbL6GXiks5uCv-HgaJpZM4U9hMO .

liudonghua123 commented 5 years ago

I have the similar issue, I write my regexp and tested it ok on https://regex101.com, and the group info also exist on the console of devtools of Chrome, but in my script it always lost the group info. In the end, I found that my project used babel, and the babel-plugin-transform-named-capturing-groups-regex which is some similar to this plugin is used, and the regexp is not the original native one. Hope it could be fixed soon.

liudonghua123 commented 5 years ago

In my project, I could use yarn upgrade or ncu -u && yarn to update the dependences and then fixed this problem.

However I could not find the key packages to fix this problem because so many packages updated.

DmitrySoshnikov commented 5 years ago

Yes, for named capturing groups we've been working on plugin-transform-named-capturing-groups-regex to make it standard Babel transform. For now you can apply that transform on top as a workaround, and we can probably port it into this repo as well.