[Master] wip-dynamic import

[yuit]

#14495

• There are small changes that not necessary related to the proposal: like change name from IncrementExpression to UpdateExpression (this is so that it is consistent with ES6 spec); small update on comment

TODO

• Address declaration emit.... Current it will be an error when emit .d.ts, users will have to explicitly specify type of the dynamic import

• Add more tests for noImplicitAny, specifier not string type, more emit tests

• Update baselines'

• Update breaking change. https://github.com/Microsoft/TypeScript/wiki/Breaking-Changes. Use term UpdateExpression instead of IncrementExpression

• Document about how dynamic import behave with webpack and browserify

Note: this PR need #14692 so that baselines can be updated correctly..See (tests/cases/conformance/es2018/dynamicImport/importCallExpressionInAMD3.ts as example) compiler will throw exception when trying to write type of extendheritageclause

Note: ImportCallExpression is simply parse as CallExpression (similar to super call)
Also dynamic import can be parsed with type argument, it doesn't do anything at the moment (we can either error or that can be used for other purpose)

[yuit]

@filipesilva thanks for the document!. For webpack users it will probably be best to have module be ES2018 so that we don't downlevel emit and webpack2 can correctly support dynamic import

Correction: it will ESNext instead of ES2018....Also even using with esnext and not downlevel emit, webpack will not allow dynamic name....The benefit of not downlevel with webpack seems to be in that webpack will do code-splitting

[filipesilva]

I did not know that was an option, and that indeed sounds like the better alternative 👍

[arackaf]

@yuit so is this going to be forthcoming in the next TypeScript release? 2.3.4 complains about import() even with target of esnext. Not sure if I'm missing something.

[mhegazy]

@yuit so is this going to be forthcoming in the next TypeScript release? 2.3.4 complains about import() even with target of esnext. Not sure if I'm missing something.

this will be in TS 2.4. you can give it a try today in typescript@next

[arackaf]

Cool - thanks!

[codepunkt]

My package-lock.json has typescript in version 2.4.0-dev.20170608, my tsconfig.json is this

{
    "compilerOptions": {
        "module": "es6",
        "target": "es6",
        "moduleResolution": "node",
        "baseUrl": "src",
        "allowJs": true,
        "allowSyntheticDefaultImports": true,
        "jsx": "preserve",
        "pretty": true,
        "removeComments": true,
        "sourceMap": true
    },
    "exclude": [
        "node_modules"
    ]
}

TS1323: Dynamic import cannot be used when targeting ECMAScript 2015 modules.
is thrown for this code

const AsyncRoutes = Loadable({
  loader: () => import('./Routes' /* webpackChunkName: "routes" */),
  LoadingComponent: () => null,
})

That seems misleading. I'm not targetting ECMAScript 2015 modules anywhere, or am i? What are the correct settings?

[trotyl]

@codepunkt , you're using "module": "es6"

Error if the module flag is ES2015.

See #14495 for more information.

[codepunkt]

@trotyl Thanks. That helps me only to the extent that i know that i actually targetted ECMAScript 2015 modules. It doesn't tell me what my tsconfig.json should look like. Simply changing the module compiler option to es2018 results in the same error.

[trotyl]

@codepunkt The option for leaving as-is is esnext, you can find it in above comment: #14774 (comment)

[codepunkt]

Thanks. That works 👍

[NN---]

Does anybody know whether there is synchronous import in ES?
Is there any way to ensure that import will be done immediately ?

[arackaf]

Synchronous import is done with regular

import X from 'x'

at the top of your file. Dynamic import() statements always return a promise and are async.

[NN---]

@arackaf I want a conditional synchronous import. If I only could have import in the middle of the file.