Optional Chaining by typescript and babel compilers

[gabrielgagne]

Issue description or question

We recently upgraded our Typescript to make use of optional chaining and null coalescing, our setup works fine to generate the end-user script but we're having problems with wallaby.

In our toolchain, we use typescript with the ESNEXT target, meaning that typescript itself won't transpile optional chaining and null coalescing. We then feed typescript's output into Babel, to transpile everything with a specific config (with optional chaining and null coalescing plugins). As I said, this whole process works outside of wallaby.

We used to use Babel in our wallaby.js as a pre-processor, but that doesnt work anymore since from what I understand, wallaby fails at the instrumentalization phase (before pre-processing)

When I tried to use Babel as a compiler after typescript, but it doesnt seem to do anyting.

I attached a minimalist version of our config to reproduce our situation.

Thanks for all the great work and software!

wallaby-typescript-babel.zip

{ editorVersion: '1.36.1',
  pluginVersion: '1.0.163',
  editorType: 'VSCode',
  osVersion: 'win32 10.0.17763',
  nodeVersion: 'v10.16.0',
  coreVersion: '1.0.811',
  config:
   { files:
      [ { pattern: 'node_modules/sinon/pkg/sinon.js', instrument: false, ignore: false, trigger: true, load: true, order: 1 },
        { pattern: 'node_modules/sinon/pkg/sinon.js', instrument: false, ignore: false, trigger: true, load: true, order: 2 },
        { pattern: 'test/**/*.js', ignore: false, trigger: true, load: true, instrument: true, order: 3 },
        { pattern: 'test/**/*.ts', ignore: false, trigger: true, load: true, instrument: true, order: 4 },
        { pattern: 'src/**/*.html', ignore: false, trigger: true, load: true, instrument: true, order: 5 },
        { pattern: 'src/**/*.ts', ignore: false, trigger: true, load: true, instrument: true, order: 6 },
        { pattern: 'src/**/*.config.ts', ignore: true, trigger: true, load: true, instrument: true },
        { pattern: 'src/**/*.init.ts', ignore: true, trigger: true, load: true, instrument: true },
        { pattern: 'src/**/*.spec.ts', ignore: true, trigger: true, load: true, instrument: true } ],
     filesWithNoCoverageCalculated:
      [ 'src/**/*.directive.ts',
        'src/**/*.const.ts',
        'src/**/*.config.ts',
        'src/**/*.init.ts',
        'src/**/*.run.ts',
        'src/**/*.nocoverage.ts',
        'src/templates.ts',
        'test/**/*',
        'bower_components/**/*',
        'node_modules/**/*' ],
     tests: [ { pattern: 'src/**/*spec.js', ignore: false, trigger: true, load: true, test: true, order: 7 }, { pattern: 'src/**/*spec.ts', ignore: false, trigger: true, load: true, test: true, order: 8 } ],
     testFramework: { version: 'mocha@3.2.0', configurator: 'mocha@2.0.1', reporter: 'mocha@2.0.1', starter: 'mocha@2.0.1' },
     compilers: { 'src/**/*.js': [Function], '**/*.?(lit)coffee?(.md)': [Function] },
     preprocessors: { '**/*.html': [Function: **/*.html] },
     debug: true,
     workers: { initial: 1, regular: 1, recycle: false },
     hints:
      { ignoreCoverage: '__REGEXP /ignore coverage/',
        ignoreCoverageForFile: '__REGEXP /ignore file coverage/',
        commentAutoLog: '?',
        testFileSelection: { include: '__REGEXP /file\\.only/', exclude: '__REGEXP /file\\.skip/' } },
     env: { kind: 'chrome', type: 'browser', params: {}, viewportSize: { width: 800, height: 600 }, options: { width: 800, height: 600 }, bundle: true },
     diagnostics: {},
     runAllTestsInAffectedTestFile: false,
     maxConsoleMessagesPerTest: 100,
     autoConsoleLog: true,
     delays: { run: 0, edit: 100, update: 0 },
     teardown: undefined,
     automaticTestFileSelection: true,
     runSelectedTestsOnly: false,
     extensions: {},
     reportUnhandledPromises: false,
     throwOnBeforeUnload: true,
     slowTestThreshold: 75,
     lowCoverageThreshold: 80,
     loose: undefined,
     configCode:
      'const angularTemplatePreprocessor = require(\'wallaby-ng-html2js-preprocessor\');\r\nconst babel = require(\'@babel/core\');\r\n\r\nmodule.exports = (w) => {\r\n  const babelCfg = {\r\n    sourceMap: true,\r\n    presets: [\r\n      [\'@babel/preset-env\', {\r\n        targets: {\r\n          browsers: [\'last 1 Chrome versions\'],\r\n        },\r\n        forceAllTransforms: true,\r\n        // Allow the use of native async await despite forceAllTransforms\r\n        exclude: [\'transform-regenerator\', \'transform-async-to-generator\'],\r\n      }],\r\n    ],\r\n    plugins: [\r\n      \'@babel/plugin-proposal-nullish-coalescing-operator\',\r\n      \'@babel/plugin-proposal-optional-chaining\',\r\n      \'@babel/plugin-proposal-object-rest-spread\',\r\n    ],\r\n  };\r\n  \r\n\r\n  return {\r\n    files: [\r\n      { pattern: \'node_modules/sinon/pkg/sinon.js\', instrument: false },\r\n      { pattern: \'node_modules/sinon/pkg/sinon.js\', instrument: false },\r\n      \'test/**/*.js\',\r\n      \'test/**/*.ts\',\r\n      \'src/**/*.html\',\r\n      \'src/**/*.ts\',\r\n      \'!src/**/*.config.ts\',\r\n      \'!src/**/*.init.ts\',\r\n      \'!src/**/*.spec.ts\',\r\n    ],\r\n\r\n    filesWithNoCoverageCalculated: [\r\n      \'src/**/*.directive.ts\',\r\n      \'src/**/*.const.ts\',\r\n      \'src/**/*.config.ts\',\r\n      \'src/**/*.init.ts\',\r\n      \'src/**/*.run.ts\',\r\n      \'src/**/*.nocoverage.ts\',\r\n      \'src/templates.ts\',\r\n      \'test/**/*\',\r\n      \'bower_components/**/*\',\r\n      \'node_modules/**/*\',\r\n    ],\r\n\r\n    tests: [\r\n      \'src/**/*spec.js\',\r\n      \'src/**/*spec.ts\',\r\n    ],\r\n\r\n    testFramework: \'mocha\',\r\n\r\n    compilers: {\r\n      \'test/**/*.ts\': w.compilers.typeScript({ orderFilesByReferenceComments: false, noImplicitAny: false }),\r\n      \'src/**/*.ts\': w.compilers.typeScript({ orderFilesByReferenceComments: true, noImplicitAny: false }),\r\n      /* doesn\'t transpile ?? and ?., but this exact babel config does it outside of wallaby */\r\n      \'src/**/*.js\': w.compilers.babel(babelCfg),\r\n    },\r\n\r\n    preprocessors: {\r\n      /* Pre-processor is to late, since wallaby fails in instrumentalization phase*/\r\n      //\'src/**/*.js\': file => babel.transform(file.content, babelCfg),\r\n      //\'test/**/*.js\': file => babel.transform(file.content, babelCfg),\r\n      \'**/*.html\': (file) => {\r\n        return angularTemplatePreprocessor.transform(file, { stripPrefix: \'src/client/\', moduleName: \'app.core\' });\r\n      },\r\n    },\r\n    debug: true,\r\n    workers: {\r\n      initial: 1,\r\n      regular: 1,\r\n    },\r\n\r\n    hints: {\r\n      ignoreCoverage: /ignore coverage/,\r\n    },\r\n\r\n    env: {\r\n      kind: \'chrome\',\r\n    },\r\n  };\r\n};\r\n' },
  packageJSON:
   { dependencies:
      { '@babel/core': '^7.7.0',
        '@babel/plugin-proposal-nullish-coalescing-operator': '^7.7.0',
        '@babel/plugin-proposal-object-rest-spread': '^7.7.0',
        '@babel/plugin-proposal-optional-chaining': '^7.7.0',
        '@babel/polyfill': '^7.7.0',
        '@babel/preset-env': '^7.7.0',
        '@types/mocha': '*',
        'babel-eslint': '~10.0.2',
        eslint: '~6.8.0',
        'eslint-config-airbnb-base': '~14.0.0',
        'eslint-plugin-import': '^2.14.0',
        mocha: '^5.2.0',
        sinon: '^3.3.0',
        tslint: '^5.18.0',
        'tslint-config-airbnb': '^5.11.1',
        typescript: '^3.7.4',
        typings: '^2.1.1',
        'wallaby-ng-html2js-preprocessor': '^0.1.0',
        wiredep: '^4' },
     devDependencies: undefined },
  fs: { numberOfFiles: 3 },
  debug:
   [ '2020-01-09T18:42:30.177Z project Wallaby Node version: v10.16.0\n',
     '2020-01-09T18:42:30.178Z project Wallaby config: E:\\Projects\\wallaby-typescript-babel\\wallaby.js\n',
     '2020-01-09T18:42:30.801Z project File cache: C:\\Users\\gabriel.gagne\\.vscode\\extensions\\wallabyjs.wallaby-vscode-1.0.163\\projects\\e86074d4fb58b375\n',
     '2020-01-09T18:42:30.844Z uiService Listening port 51236\n',
     '2020-01-09T18:42:30.857Z project package.json file change detected, invalidating local cache\n',
     '2020-01-09T18:42:30.903Z workers Parallelism for initial run: 1, for regular run: 1\n',
     '2020-01-09T18:42:30.903Z workers Starting run worker instance #0\n',
     '2020-01-09T18:42:30.905Z workers Web server is listening at 59460\n',
     '2020-01-09T18:42:30.920Z project File cache requires some updates, waiting required files from IDE\n',
     '2020-01-09T18:42:31.425Z workers Started run worker instance (immediate) #0\n',
     '2020-01-09T18:42:32.160Z project Stopping process pool\n',
     '2020-01-09T18:42:32.162Z project Running postprocessor\n',
     '2020-01-09T18:42:32.164Z postprocessor New TypeScript language service is required\n',
     '2020-01-09T18:42:32.265Z project Error: Failed to instrument src/file.js\n  1 | const test = { test2: { a: 2 } };\n  2 | test.test2 = undefined;\n> 3 | test.test2?.a;\n    |            ^ SyntaxError: Unexpected token (3:11)\n  4 | undefined ?? 2;\n  5 | export default test.test2?.a;\n  6 | //# sourceMappingURL=file.js.map\n    at Object.formatInstrumentationError (C:\\Users\\gabriel.gagne\\.vscode\\extensions\\wallabyjs.wallaby-vscode-1.0.163\\wallaby\\server.js:25:14184)\n    at C:\\Users\\gabriel.gagne\\.vscode\\extensions\\wallabyjs.wallaby-vscode-1.0.163\\wallaby\\server.js:22:13415\n    at _rejected (C:\\Users\\gabriel.gagne\\.vscode\\extensions\\wallabyjs.wallaby-vscode-1.0.163\\wallaby\\node_modules\\q\\q.js:864:24)\n    at C:\\Users\\gabriel.gagne\\.vscode\\extensions\\wallabyjs.wallaby-vscode-1.0.163\\wallaby\\node_modules\\q\\q.js:890:30\n    at Promise.when (C:\\Users\\gabriel.gagne\\.vscode\\extensions\\wallabyjs.wallaby-vscode-1.0.163\\wallaby\\node_modules\\q\\q.js:1142:31)\n    at Promise.promise.promiseDispatch (C:\\Users\\gabriel.gagne\\.vscode\\extensions\\wallabyjs.wallaby-vscode-1.0.163\\wallaby\\node_modules\\q\\q.js:808:41)\n    at C:\\Users\\gabriel.gagne\\.vscode\\extensions\\wallabyjs.wallaby-vscode-1.0.163\\wallaby\\node_modules\\q\\q.js:624:44\n    at runSingle (C:\\Users\\gabriel.gagne\\.vscode\\extensions\\wallabyjs.wallaby-vscode-1.0.163\\wallaby\\node_modules\\q\\q.js:137:13)\n    at flush (C:\\Users\\gabriel.gagne\\.vscode\\extensions\\wallabyjs.wallaby-vscode-1.0.163\\wallaby\\node_modules\\q\\q.js:125:13)\n    at process._tickCallback (internal/process/next_tick.js:61:11)\n',
     '2020-01-09T18:42:32.266Z project Test run finished\n',
     '2020-01-09T18:42:32.266Z project Test run data re-queued\n' ] }

[smcenlly]

Thanks for reporting the issue and for the sample. While different to your production build, a quick fix for you to use with Wallaby should be to change your Wallaby compilers override to override the TypeScript target from esnext to es2017 (see below). Is there any reason this won't work for you? In the meantime, we'll looks at updating Wallaby to support the optional chaining operator to support this scenario.

...
compilers: {
      'test/**/*.ts': w.compilers.typeScript({ target: 'es2017', orderFilesByReferenceComments: false, noImplicitAny: false }),
      'src/**/*.ts': w.compilers.typeScript({ target: 'es2017', orderFilesByReferenceComments: true, noImplicitAny: false }),
      /* doesn't transpile ?? and ?., but this exact babel config does it outside of wallaby */
      'src/**/*.js': w.compilers.babel(babelCfg),
    },
...

[ArtemGovorov]

The issue is fixed in the latest Wallaby core version, please use Force Core Update command from your editor and then start Wallaby.