diff --git a/src/parse/read/expression.ts b/src/parse/read/expression.ts
index 938009d816..0c7ee2ac31 100644
--- a/src/parse/read/expression.ts
+++ b/src/parse/read/expression.ts
@@ -34,6 +34,9 @@ export default function readExpression(parser: Parser) {
const node = parseExpressionAt(parser.template, parser.index, {
ecmaVersion: 9,
preserveParens: true,
+ plugins: {
+ dynamicImport: true
+ }
});
parser.index = node.end;
diff --git a/test/js/samples/dynamic-import/expected-bundle.js b/test/js/samples/dynamic-import/expected-bundle.js
new file mode 100644
index 0000000000..7283c2cf17
--- /dev/null
+++ b/test/js/samples/dynamic-import/expected-bundle.js
@@ -0,0 +1,186 @@
+function noop() {}
+
+function assign(tar, src) {
+ for (var k in src) tar[k] = src[k];
+ return tar;
+}
+
+function blankObject() {
+ return Object.create(null);
+}
+
+function destroy(detach) {
+ this.destroy = noop;
+ this.fire('destroy');
+ this.set = noop;
+
+ this._fragment.d(detach !== false);
+ this._fragment = null;
+ this._state = {};
+}
+
+function _differs(a, b) {
+ return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
+}
+
+function fire(eventName, data) {
+ var handlers =
+ eventName in this._handlers && this._handlers[eventName].slice();
+ if (!handlers) return;
+
+ for (var i = 0; i < handlers.length; i += 1) {
+ var handler = handlers[i];
+
+ if (!handler.__calling) {
+ try {
+ handler.__calling = true;
+ handler.call(this, data);
+ } finally {
+ handler.__calling = false;
+ }
+ }
+ }
+}
+
+function flush(component) {
+ component._lock = true;
+ callAll(component._beforecreate);
+ callAll(component._oncreate);
+ callAll(component._aftercreate);
+ component._lock = false;
+}
+
+function get() {
+ return this._state;
+}
+
+function init(component, options) {
+ component._handlers = blankObject();
+ component._slots = blankObject();
+ component._bind = options._bind;
+ component._staged = {};
+
+ component.options = options;
+ component.root = options.root || component;
+ component.store = options.store || component.root.store;
+
+ if (!options.root) {
+ component._beforecreate = [];
+ component._oncreate = [];
+ component._aftercreate = [];
+ }
+}
+
+function on(eventName, handler) {
+ var handlers = this._handlers[eventName] || (this._handlers[eventName] = []);
+ handlers.push(handler);
+
+ return {
+ cancel: function() {
+ var index = handlers.indexOf(handler);
+ if (~index) handlers.splice(index, 1);
+ }
+ };
+}
+
+function set(newState) {
+ this._set(assign({}, newState));
+ if (this.root._lock) return;
+ flush(this.root);
+}
+
+function _set(newState) {
+ var oldState = this._state,
+ changed = {},
+ dirty = false;
+
+ newState = assign(this._staged, newState);
+ this._staged = {};
+
+ for (var key in newState) {
+ if (this._differs(newState[key], oldState[key])) changed[key] = dirty = true;
+ }
+ if (!dirty) return;
+
+ this._state = assign(assign({}, oldState), newState);
+ this._recompute(changed, this._state);
+ if (this._bind) this._bind(changed, this._state);
+
+ if (this._fragment) {
+ this.fire("state", { changed: changed, current: this._state, previous: oldState });
+ this._fragment.p(changed, this._state);
+ this.fire("update", { changed: changed, current: this._state, previous: oldState });
+ }
+}
+
+function _stage(newState) {
+ assign(this._staged, newState);
+}
+
+function callAll(fns) {
+ while (fns && fns.length) fns.shift()();
+}
+
+function _mount(target, anchor) {
+ this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+}
+
+var proto = {
+ destroy,
+ get,
+ fire,
+ on,
+ set,
+ _recompute: noop,
+ _set,
+ _stage,
+ _mount,
+ _differs
+};
+
+/* generated by Svelte vX.Y.Z */
+
+function create_main_fragment(component, ctx) {
+
+ var lazyload_initial_data = { load: () => import('./Foo.html') };
+ var lazyload = new LazyLoad({
+ root: component.root,
+ store: component.store,
+ data: lazyload_initial_data
+ });
+
+ return {
+ c() {
+ lazyload._fragment.c();
+ },
+
+ m(target, anchor) {
+ lazyload._mount(target, anchor);
+ },
+
+ p: noop,
+
+ d(detach) {
+ lazyload.destroy(detach);
+ }
+ };
+}
+
+function SvelteComponent(options) {
+ init(this, options);
+ this._state = assign({}, options.data);
+ this._intro = true;
+
+ this._fragment = create_main_fragment(this, this._state);
+
+ if (options.target) {
+ this._fragment.c();
+ this._mount(options.target, options.anchor);
+
+ flush(this);
+ }
+}
+
+assign(SvelteComponent.prototype, proto);
+
+export default SvelteComponent;
diff --git a/test/js/samples/dynamic-import/expected.js b/test/js/samples/dynamic-import/expected.js
new file mode 100644
index 0000000000..c30b82a9bb
--- /dev/null
+++ b/test/js/samples/dynamic-import/expected.js
@@ -0,0 +1,46 @@
+/* generated by Svelte vX.Y.Z */
+import { assign, flush, init, noop, proto } from "svelte/shared.js";
+
+function create_main_fragment(component, ctx) {
+
+ var lazyload_initial_data = { load: () => import('./Foo.html') };
+ var lazyload = new LazyLoad({
+ root: component.root,
+ store: component.store,
+ data: lazyload_initial_data
+ });
+
+ return {
+ c() {
+ lazyload._fragment.c();
+ },
+
+ m(target, anchor) {
+ lazyload._mount(target, anchor);
+ },
+
+ p: noop,
+
+ d(detach) {
+ lazyload.destroy(detach);
+ }
+ };
+}
+
+function SvelteComponent(options) {
+ init(this, options);
+ this._state = assign({}, options.data);
+ this._intro = true;
+
+ this._fragment = create_main_fragment(this, this._state);
+
+ if (options.target) {
+ this._fragment.c();
+ this._mount(options.target, options.anchor);
+
+ flush(this);
+ }
+}
+
+assign(SvelteComponent.prototype, proto);
+export default SvelteComponent;
\ No newline at end of file
diff --git a/test/js/samples/dynamic-import/input.html b/test/js/samples/dynamic-import/input.html
new file mode 100644
index 0000000000..cda0dbfbaf
--- /dev/null
+++ b/test/js/samples/dynamic-import/input.html
@@ -0,0 +1,9 @@
+
+
+
\ No newline at end of file