Skip to content

Commit

Permalink
Fix typescript issues, treeshaking adjustments, update deps (vue3 final)
Browse files Browse the repository at this point in the history
  • Loading branch information
Michael Dodge committed Oct 15, 2020
1 parent ce2e17f commit 4714291
Show file tree
Hide file tree
Showing 15 changed files with 105 additions and 95 deletions.
24 changes: 24 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,30 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).

## [4.0.0-beta.1] - 2020-10-15

### Fixed
- Typescript type declarations don't conflict anymore (Vue 3)
- Fixed treeshaking issues (Vue 2)
- package.json includes `"sideEffects": false`
- Marked appropriate functions as `/*#__PURE__*/`
- Upstream issues may still exist in [vue-runtime-helpers](https://github.com/znck/vue-runtime-helpers/pull/5), but current testing shows output should still be shakeable

### Changed/Removed
- Update template dependencies
- @babel/core 7.12.0
- @babel/preset-env 7.12.0
- @babel/preset-typescript 7.12.0
- @rollup/plugin-babel 5.2.1
- @vue/cli-plugin-babel 4.5.7
- @vue/cli-plugin-typescript 4.5.7
- @vue/cli-service 4.5.7
- @vue/compiler-sfc 3.0.0
- rollup 2.30.0
- rollup-plugin-postcss 3.1.8
- rollup-plugin-terser 7.0.2
- vue 3.0.0 (Vue 3)

## [4.0.0-beta.0] - 2020-09-04

### Added
Expand Down
2 changes: 1 addition & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"description": "Quickly generate redistributable components with Rollup",
"author": "Michael Dodge",
"license": "ISC",
"version": "4.0.0-beta.0",
"version": "4.0.0-beta.1",
"bin": {
"sfc-init": "./sfc-init.js"
},
Expand Down
27 changes: 14 additions & 13 deletions templates/library/library-package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
<% } -%>
"src/**/*.vue"
],
"sideEffects": false,

"scripts": {
"serve": "vue-cli-service serve dev/serve.<% if (ts) { %>ts<% } else { %>js<% } %>",
Expand All @@ -31,31 +32,31 @@
},

"devDependencies": {
"@babel/core": "^7.11.4",
"@babel/preset-env": "^7.11.0",
"@babel/core": "^7.12.0",
"@babel/preset-env": "^7.12.0",
<% if (ts) { -%>
"@babel/preset-typescript": "^7.10.4",
"@babel/preset-typescript": "^7.12.0",
<% } -%>
"@rollup/plugin-alias": "^3.1.1",
"@rollup/plugin-babel": "^5.2.0",
"@rollup/plugin-babel": "^5.2.1",
"@rollup/plugin-commonjs": "^14.0.0",
"@rollup/plugin-node-resolve": "^9.0.0",
"@rollup/plugin-replace": "^2.3.3",
"@vue/cli-plugin-babel": "^4.5.4",
"@vue/cli-plugin-babel": "^4.5.7",
<% if (ts) { -%>
"@vue/cli-plugin-typescript": "^4.5.4",
"@vue/cli-plugin-typescript": "^4.5.7",
<% } -%>
"@vue/cli-service": "^4.5.4",
"@vue/cli-service": "^4.5.7",
<% if (version === 3) { -%>
"@vue/compiler-sfc": "^3.0.0-rc.9",
"@vue/compiler-sfc": "^3.0.0",
<% } -%>
"cross-env": "^7.0.2",
"minimist": "^1.2.5",
"rollup": "^2.26.5",
"rollup": "^2.30.0",
<% if (version === 3) { -%>
"rollup-plugin-postcss": "^3.1.6",
"rollup-plugin-postcss": "^3.1.8",
<% } -%>
"rollup-plugin-terser": "^7.0.0",
"rollup-plugin-terser": "^7.0.2",
<% if (version === 3) { -%>
"rollup-plugin-vue": "^6.0.0-beta.10",
<% } else { -%>
Expand All @@ -65,15 +66,15 @@
"typescript": "^3.8.3",
<% } -%>
<% if (version === 3) { -%>
"vue": "^3.0.0-rc.9"
"vue": "^3.0.0"
<% } else { -%>
"vue": "^2.6.12",
"vue-template-compiler": "^2.6.12"
<% } -%>
},
"peerDependencies": {
<% if (version === 3) { -%>
"vue": "^3.0.0-rc.9"
"vue": "^3.0.0"
<% } else { -%>
"vue": "^2.6.12"
<% } -%>
Expand Down
6 changes: 3 additions & 3 deletions templates/library/library.d.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<% if (version === 3) { -%>
import { defineComponent, Plugin } from 'vue';
import { DefineComponent, Plugin } from 'vue';

<% } else { -%>
import Vue, { PluginFunction, VueConstructor } from 'vue';

<% } -%>

declare const <%-componentNamePascal%>: { install: <% if (version === 3) { %>Plugin['install']<% } else { %>PluginFunction<any><% } %> };
declare const <%-componentNamePascal%>: <% if (version === 3) { %>Exclude<Plugin['install'], undefined><% } else { %>PluginFunction<any><% } %>;
export default <%-componentNamePascal%>;

export const <%-componentNamePascal%>Sample: <% if (version === 3) { %>ReturnType<typeof defineComponent><% } else { %>VueConstructor<Vue><% } %>;
export const <%-componentNamePascal%>Sample: <% if (version === 3) { %>DefineComponent<% } else { %>VueConstructor<Vue><% } %>;
6 changes: 3 additions & 3 deletions templates/library/shims-vue.d.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
declare module '*.vue' {
<% if (version === 3) { -%>
import { defineComponent } from 'vue';
import { DefineComponent } from 'vue';

const Component: ReturnType<typeof defineComponent>
const Component: DefineComponent;
export default Component;
<% } else { -%>
import Vue from 'vue';
export default Vue
export default Vue;
<% } -%>
}
11 changes: 4 additions & 7 deletions templates/library/src/entry.esm.ts
Original file line number Diff line number Diff line change
@@ -1,18 +1,17 @@
<% if (ts) {
if (version === 3) { -%>
import { App, Plugin } from 'vue';

<% } else { -%>
import _Vue, { PluginFunction, PluginObject } from 'vue';

import _Vue, { PluginFunction } from 'vue';
<% }
} -%>

// Import vue components
import * as components from '@/lib-components/index';

// install function executed by Vue.use()
<% if (ts) { -%>
const install: <% if (version === 3) { %>Plugin['install']<% } else { %>PluginFunction<any><% } %> = function install<%-componentNamePascal%>(<% if (version === 3) { %>app: App<% } else { %>Vue: typeof _Vue<% } %>) {
const install: <% if (version === 3) { %>Exclude<Plugin['install'], undefined><% } else { %>PluginFunction<any><% } %> = function install<%-componentNamePascal%>(<% if (version === 3) { %>app: App<% } else { %>Vue: typeof _Vue<% } %>) {
<% } else { -%>
const install = function install<%-componentNamePascal%>(<% if (version === 3) { %>app<% } else { %>Vue<% } %>) {
<% } -%>
Expand All @@ -22,9 +21,7 @@ const install = function install<%-componentNamePascal%>(<% if (version === 3) {
};

// Create module definition for Vue.use()
export default {
install,
}<% if (ts) { %> as <% if (version === 3) { %>Plugin<% } else { %>PluginObject<any><% } } %>;
export default install;

// To allow individual component use, export components
// each can be registered via Vue.component()
Expand Down
26 changes: 13 additions & 13 deletions templates/library/src/entry.ts
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
<% if (ts && version === 3) { -%>
import { defineComponent, Plugin } from 'vue';

<% } -%>
// iife/cjs usage extends esm default export - so import it all
// import * as components from '@/lib-components/index';
import plugin, * as components from '@/entry.esm';

// Attach named exports directly to component. IIFE/CJS will
// only expose one global var, with named exports exposed as properties of
// that global var (eg. VivintIcon.iconList)
<% if (ts && version === 3) { -%>
type PluginObject = Plugin & { [key: string]: ReturnType<typeof defineComponent>; };
// Attach named exports directly to plugin. IIFE/CJS will
// only expose one global var, with component exports exposed as properties of
// that global var (eg. plugin.component)
<% if (ts) { -%>
type NamedExports = Exclude<typeof components, 'default'>;
type ExtendedPlugin = typeof plugin & NamedExports;
<% } -%>
Object.entries(components).forEach(([componentName, component]) => {
<% if (ts && version === 3) { -%>
if (componentName !== 'default') (plugin as PluginObject)[componentName] = component as any as ReturnType<typeof defineComponent>;
if (componentName !== 'default') {
<% if (ts) { -%>
const key = componentName as Exclude<keyof NamedExports, 'default'>;
const val = component as Exclude<ExtendedPlugin, typeof plugin>;
(plugin as ExtendedPlugin)[key] = val;
<% } else { -%>
if (componentName !== 'default') plugin[componentName] = component;
plugin[componentName] = component;
<% } -%>
}
});

export default plugin;
2 changes: 1 addition & 1 deletion templates/library/src/lib-components/component.vue
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ interface SampleData {
}
<% } -%>
export default <% if (version === 3) {%>defineComponent(<% } else if (ts) { %>Vue.extend(<% } %>{
export default /*#__PURE__*/<% if (version === 3) {%>defineComponent(<% } else if (ts) { %>Vue.extend(<% } %>{
name: '<%-componentNamePascal%>Sample', // vue component name
data()<% if (ts) { %>: SampleData<% } %> {
return {
Expand Down
6 changes: 3 additions & 3 deletions templates/single/shims-vue.d.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
declare module '*.vue' {
<% if (version === 3) { -%>
import { defineComponent } from 'vue';
import { DefineComponent } from 'vue';

const Component: ReturnType<typeof defineComponent>
const Component: DefineComponent;
export default Component;
<% } else { -%>
import Vue from 'vue';
export default Vue
export default Vue;
<% } -%>
}
10 changes: 2 additions & 8 deletions templates/single/single-component.d.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,8 @@
<% if (version === 3) { -%>
import { defineComponent, Plugin } from 'vue';

type InstallableComponent = ReturnType<typeof defineComponent> & { install: Plugin['install'] };
import { DefineComponent, Plugin } from 'vue';
<% } else { -%>
import Vue, { PluginFunction, VueConstructor } from 'vue';

export interface InstallableComponent extends VueConstructor<Vue> {
install: PluginFunction<any>;
}
<% } -%>

declare const <%-componentNamePascal%>: InstallableComponent;
declare const <%-componentNamePascal%>: <% if (version === 3) { %>DefineComponent & { install: Exclude<Plugin['install'], undefined> }<% } else { %>VueConstructor<Vue> & { install: PluginFunction<any>; }<% } %>;
export default <%-componentNamePascal%>;
27 changes: 14 additions & 13 deletions templates/single/single-package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
<% } -%>
"src/**/*.vue"
],
"sideEffects": false,

"scripts": {
"serve": "vue-cli-service serve dev/serve.<% if (ts) { %>ts<% } else { %>js<% } %>",
Expand All @@ -31,31 +32,31 @@
},

"devDependencies": {
"@babel/core": "^7.11.4",
"@babel/preset-env": "^7.11.0",
"@babel/core": "^7.12.0",
"@babel/preset-env": "^7.12.0",
<% if (ts) { -%>
"@babel/preset-typescript": "^7.10.4",
"@babel/preset-typescript": "^7.12.0",
<% } -%>
"@rollup/plugin-alias": "^3.1.1",
"@rollup/plugin-babel": "^5.2.0",
"@rollup/plugin-babel": "^5.2.1",
"@rollup/plugin-commonjs": "^14.0.0",
"@rollup/plugin-node-resolve": "^9.0.0",
"@rollup/plugin-replace": "^2.3.3",
"@vue/cli-plugin-babel": "^4.5.4",
"@vue/cli-plugin-babel": "^4.5.7",
<% if (ts) { -%>
"@vue/cli-plugin-typescript": "^4.5.4",
"@vue/cli-plugin-typescript": "^4.5.7",
<% } -%>
"@vue/cli-service": "^4.5.4",
"@vue/cli-service": "^4.5.7",
<% if (version === 3) { -%>
"@vue/compiler-sfc": "^3.0.0-rc.9",
"@vue/compiler-sfc": "^3.0.0",
<% } -%>
"cross-env": "^7.0.2",
"minimist": "^1.2.5",
"rollup": "^2.26.5",
"rollup": "^2.30.0",
<% if (version === 3) { -%>
"rollup-plugin-postcss": "^3.1.6",
"rollup-plugin-postcss": "^3.1.8",
<% } -%>
"rollup-plugin-terser": "^7.0.0",
"rollup-plugin-terser": "^7.0.2",
<% if (version === 3) { -%>
"rollup-plugin-vue": "^6.0.0-beta.10",
<% } else { -%>
Expand All @@ -65,15 +66,15 @@
"typescript": "^3.8.3",
<% } -%>
<% if (version === 3) { -%>
"vue": "^3.0.0-rc.9"
"vue": "^3.0.0"
<% } else { -%>
"vue": "^2.6.12",
"vue-template-compiler": "^2.6.12"
<% } -%>
},
"peerDependencies": {
<% if (version === 3) { -%>
"vue": "^3.0.0-rc.9"
"vue": "^3.0.0"
<% } else { -%>
"vue": "^2.6.12"
<% } -%>
Expand Down
2 changes: 1 addition & 1 deletion templates/single/src/component.vue
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ interface SampleData {
}
<% } -%>
export default <% if (version === 3) {%>defineComponent(<% } else if (ts) { %>Vue.extend(<% } %>{
export default /*#__PURE__*/<% if (version === 3) {%>defineComponent(<% } else if (ts) { %>Vue.extend(<% } %>{
name: '<%-componentNamePascal%>', // vue component name
data()<% if (ts) { %>: SampleData<% } %> {
return {
Expand Down
Loading

0 comments on commit 4714291

Please sign in to comment.