Support allowSyntheticDefaultImports

[ryanelian]

The latest Vue.js brings about a deadly change: https://medium.com/the-vue-point/upcoming-typescript-changes-in-vue-2-5-e9bd7e2ecf08

The Catalyst

Normally, you'd import Vue.js like this:

import * as Vue from 'vue';

This also applies to most other frameworks, like React, AngularJS, etc.

However, the latest Vue.js 2.5 updated the typings so that you must do this:

import Vue from 'vue';

vuejs/vue#5887
vuejs/vue#6391

The Explanation

Normally this is called an ES module default export / import. For example:

export function x(){}
export function y(){}
export function z(){}
export default function a(){}

Is actually an object:

{
  x: function(){},
  y: function(){},
  z: function(){},
  default: function(){},
}

Therefore when you do this:

import { x, y, z } from './myModule';
import a from './myModule';

You are actually plucking the properties from the exported object!

The Problem

Now you see, by forcing Vue.js default import, you are to expect that the exported Vue.js object has a default property.

However, that is not the case!

The typing is NOT the same as the exported object, which looks somewhat like this: (not default-exported)

{
  component: function(){},
  filter: function(){}
}

When imported using the normal import * as Vue from 'vue' or import Vue = require('vue') syntax, this is correct...

However, this is causing a huge mess when the app code is being forced to use default import syntax.

The Solution

Unlike Browserify; WebPack and Rollup appears to magically convert default imports into star import for libraries which are not default-exported ES module...

Now, we can solve this issue either with the easy way or the hard way:

The easy way would be to simply replace Browserify module bundler with WebPack or Rollup.

The hard way would be to somehow write a transform that emulates this behavior. No idea how for now...

If this feature is completed, allowSyntheticDefaultImports flag in tsconfig.json in projects can be enabled.

The Workaround

Stay on these package versions, for now:

• vue 2.4.4
• vue-class-component 5.0.2
• vue-router 2.7.0
• vuex 2.4.1

Templates will be updated to exact semver for those packages, until the feature is completed.

[ryanelian]

Successfully solved this problem by changing Browserify to Webpack.

I am truly grateful to Browserify team for their solution being used in Accelist for the past few years. However, it's time to move on to a more future-proof solution. 🌹

This update will probably land as instapack version 5.0.0. It will be rigorously tested with an on-going pilot project using Vue.js before landing in stable (later this month or next month).

5.0.0 will also bump supported NodeJS version to Version 8 LTS and normalize input / output file for consistency #10.

[ryanelian]

A sneak peek of version 5.0.0 of instapack. Get it now at the webpack branch. To be published in beta channel soon.

Will skip 4.3.0 release today.

[ryanelian]

Looks stable enough. 🎉
Released beta builds. 🎆
Grab the latest beta: npm install -g instapack@beta or yarn global add instapack@beta
Will release stable build next week if no showstoppers are discovered.