vue-sfc-rollup - npm Package Compare versions

Comparing version 3.0.1 to 4.0.0-beta.0

CHANGELOG.md

@@ -7,2 +7,35 @@ # Changelog
 
+## [4.0.0-beta.0] - 2020-09-04
+- **NEW**: Vue 3 support! Select target version of Vue - components compiled for Vue 3 are not compatible with Vue 2
+- Update cli dependencies
+  - chalk 4.1.0
+  - ejs 3.1.5
+  - eslint 7.7.0
+  - eslint-config-airbnb-base 14.2.0
+  - eslint-plugin-import 2.22.0
+- Update templates depending on Vue version selected
+  - **BREAKING CHANGE**: Remove auto-install logic/output entirely
+    - Auto-install has become an anti-pattern, since Vue 3 will not allow registering components/libraries globally
+  - **BREAKING CHANGE**: Non-esm builds now attach named exports as properties of the default export
+    - Nodejs/browser usage is now registered via `Vue.use(globalVar)` instead of `Vue.use(globalVar.default)`, with named exports still accessed as `globalVar.named1`, `globalVar.named2` etc.
+- Update template dependencies
+  - @babel/core 7.11.0
+  - @babel/preset-env 7.11.0
+  - @babel/preset-typescript 7.10.4
+  - @rollup/plugin-alias 3.1.1
+  - @rollup/plugin-babel 5.2.0
+  - @rollup/plugin-commonjs 14.0.0
+  - **NEW** @rollup/node-resolve 9.0.0
+  - @rollup/plugin-replace 2.3.3
+  - @vue/cli-plugin-babel 4.5.4
+  - @vue/cli-plugin-typescript 4.5.4
+  - @vue/cli-service 4.5.4
+  - @vue/compiler-sfc 3.0.0-rc.9 (Vue 3 only)
+  - rollup 2.26.5
+  - **NEW** rollup-plugin-postcss 3.1.6 (Vue 3 only)
+  - rollup-plugin-terser 7.0.0
+  - rollup-plugin-vue 5.1.9 (Vue 2) / 6.0.0-beta.10 (Vue 3)
+  - vue 2.6.12 (Vue 2) / 3.0.0-rc.9 (Vue 3)
+  - vue-template-compiler 2.6.12 (Vue 2 only)
+
 ## [3.0.1] - 2020-06-05
@@ -9,0 +42,0 @@

package.json

@@ -6,3 +6,3 @@ {
   "license": "ISC",
-  "version": "3.0.1",
+  "version": "4.0.0-beta.0",
   "bin": {
@@ -27,3 +27,3 @@ "sfc-init": "./sfc-init.js"
   "scripts": {
-    "lint": "eslint ./**/*.js"
+    "lint": "eslint ./**/*.js ./**/.*.js"
   },
@@ -37,4 +37,4 @@ "husky": {
   "dependencies": {
-    "chalk": "^4.0.0",
-    "ejs": "^3.1.2",
+    "chalk": "^4.1.0",
+    "ejs": "^3.1.5",
     "prompts": "^2.3.2",
@@ -44,5 +44,5 @@ "update-check": "^1.5.4"
   "devDependencies": {
-    "eslint": "^6.8.0",
-    "eslint-config-airbnb-base": "^14.1.0",
-    "eslint-plugin-import": "^2.20.2",
+    "eslint": "^7.7.0",
+    "eslint-config-airbnb-base": "^14.2.0",
+    "eslint-plugin-import": "^2.22.0",
     "husky": "^4.2.5"
@@ -49,0 +49,0 @@ },

README.md

@@ -37,7 +37,7 @@ # vue-sfc-rollup
 
-The vue-sfc-rollup utility scaffolds 8-13 files (depending on whether you choose library mode and/or typescript support) for you to kick of your SFC development. These files include:
+The vue-sfc-rollup utility scaffolds the essential files you need to kick of your SFC development. These files include:
 - a minimal [rollup](https://rollupjs.org) config
 - a corresponding package.json file with build/dev scripts and dependencies
 - a minimal babel.config.js and .browserslistrc file for transpiling
-- a wrapper used by rollup when packaging your SFC
+- two wrappers used by rollup when packaging your SFC
 - a sample SFC to kick-start development
@@ -50,3 +50,3 @@ - a sample usage file which can be used to load/test your component/library during development
 - A basic typescript declaration file for your component/library
-- Two basic typescript shim declaration files common to vue-typescript development
+- The basic typescript shim declaration file(s) common to vue-typescript development
 - A basic tsconfig.json file
@@ -77,2 +77,3 @@
 
+  - *select vue version*: Declare whether you are writing a component for Vue 2 or Vue 3
   - *select mode*: Declare whether you want to scaffold a single component or a library of components.
@@ -88,3 +89,3 @@ - *npm name*: This is how people will find your component/library in npm. Please refer to [the official npm docs](https://docs.npmjs.com/files/package.json#name) for details of what to enter here
 
-vue-sfc-rollup is focused on packaging your SFC for distribution via npm. The [Vue CLI](https://cli.vuejs.org/) is excellent for the actual development process of your SFC, and vue-sfc-rollup comes pre-wired to use this process. With v3 of the Vue CLI installed, you can truly develop your SFC with zero configuration just by entering the following commands:
+vue-sfc-rollup is focused on packaging your SFC for distribution via npm. The [Vue CLI](https://cli.vuejs.org/) is excellent for the actual development process of your SFC, and vue-sfc-rollup comes pre-wired to use this process. With the Vue CLI installed, you can truly develop your SFC with zero configuration just by entering the following commands:
 
@@ -117,2 +118,2 @@ ```bash
 
-Running the build script results in 3 compiled files in the `dist` directory, one for each of the `main`, `module`, and `unpkg` properties listed in your package.json file. With these files are generated, you're ready to go!
+Running the build script results in 3 compiled files in the `dist` directory, one for each of the `main`, `module`, and `unpkg` properties listed in your package.json file. With these files generated, you're ready to go!

sfc-init.js

@@ -16,2 +16,3 @@ #! /usr/bin/env node
   update: false,
+  version: '',
   mode: '',
@@ -58,2 +59,19 @@ npmName: '',
 }
+async function getVersion() {
+  const question = {
+    type: 'select',
+    name: 'version',
+    message: 'Which version of Vue are you writing for?',
+    choices: [
+      { title: 'Vue 2', value: 2 },
+      { title: 'Vue 3', value: 3 },
+    ],
+    initial: 0,
+  };
+  const response = await prompts(
+    question,
+    { onCancel },
+  );
+  responses.version = response.version;
+}
 async function getMode() {
@@ -170,2 +188,3 @@ const question = {
     componentName: data.componentName,
+    version: data.version,
     ts: data.language === 'ts',
@@ -176,2 +195,3 @@ };
       'build/rollup.config.js',
+      { 'src/entry.esm.ts': `src/entry.esm.${data.language}` },
       { 'src/entry.ts': `src/entry.${data.language}` },
@@ -182,3 +202,3 @@ { 'dev/serve.ts': `dev/serve.${data.language}` },
       'babel.config.js',
-      (data.language === 'ts') ? 'shims-tsx.d.ts' : null,
+      (data.language === 'ts' && data.version === 2) ? 'shims-tsx.d.ts' : null,
       (data.language === 'ts') ? 'shims-vue.d.ts' : null,
@@ -268,2 +288,3 @@ (data.language === 'ts') ? 'tsconfig.json' : null,
 checkForUpdates()
+  .then(getVersion)
   .then(getMode)
@@ -270,0 +291,0 @@ .then(getName)

templates/library/build/rollup.config.js

@@ -7,4 +7,8 @@ // rollup.config.js
 import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
 import replace from '@rollup/plugin-replace';
-import babel from 'rollup-plugin-babel';
+import babel from '@rollup/plugin-babel';
+<% if (version === 3) { -%>
+import PostCSS from 'rollup-plugin-postcss';
+<% } -%>
 import { terser } from 'rollup-plugin-terser';
@@ -28,6 +32,11 @@ import minimist from 'minimist';
       alias({
-        resolve: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
-        entries: {
-          '@': path.resolve(projectRoot, 'src'),
-        },
+        entries: [
+          {
+            find: '@',
+            replacement: `${path.resolve(projectRoot, 'src')}`,
+          },
+        ],
+        customResolver: resolve({
+          extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
+        }),
       }),
@@ -37,5 +46,5 @@ ],
       'process.env.NODE_ENV': JSON.stringify('production'),
-      'process.env.ES_BUILD': JSON.stringify('false'),
     },
     vue: {
+<% if (version === 2) { -%>
       css: true,
@@ -45,6 +54,21 @@ template: {
       },
+<% } -%>
     },
+    postVue: [
+<% if (version === 3) { -%>
+      // Process only `<style module>` blocks.
+      PostCSS({
+        modules: {
+          generateScopedName: '[local]___[hash:base64:5]',
+        },
+        include: /&module=.*\.css$/,
+      }),
+      // Process all `<style>` blocks except `<style module>`.
+      PostCSS({ include: /(?<!&module=.*)\.css$/ }),
+<% } -%>
+    ],
     babel: {
       exclude: 'node_modules/**',
       extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
+      babelHelpers: 'bundled',
     },
@@ -75,2 +99,3 @@ },
     ...baseConfig,
+    input: 'src/entry.esm.<% if (ts) {%>ts<% } else { %>js<% } %>',
     external,
@@ -83,8 +108,6 @@ output: {
     plugins: [
-      replace({
-        ...baseConfig.plugins.replace,
-        'process.env.ES_BUILD': JSON.stringify('true'),
-      }),
+      replace(baseConfig.plugins.replace),
       ...baseConfig.plugins.preVue,
       vue(baseConfig.plugins.vue),
+      ...baseConfig.plugins.postVue,
       babel({
@@ -116,3 +139,3 @@ ...baseConfig.plugins.babel,
       name: '<%-componentNamePascal%>',
-      exports: 'named',
+      exports: 'auto',
       globals,
@@ -123,2 +146,3 @@ },
       ...baseConfig.plugins.preVue,
+<% if (version === 2) { -%>
       vue({
@@ -131,2 +155,6 @@ ...baseConfig.plugins.vue,
       }),
+<% } else { -%>
+      vue(baseConfig.plugins.vue),
+<% } -%>
+      ...baseConfig.plugins.postVue,
       babel(baseConfig.plugins.babel),
@@ -148,3 +176,3 @@ commonjs(),
       name: '<%-componentNamePascal%>',
-      exports: 'named',
+      exports: 'auto',
       globals,
@@ -156,2 +184,3 @@ },
       vue(baseConfig.plugins.vue),
+      ...baseConfig.plugins.postVue,
       babel(baseConfig.plugins.babel),
@@ -158,0 +187,0 @@ commonjs(),

templates/library/dev/serve.ts

@@ -1,2 +0,14 @@
-<% if (ts) { -%>
+<% if (version === 3) { -%>
+import { createApp } from 'vue';
+import Dev from './serve.vue';
+// To register individual components where they are used (serve.vue) instead of using the
+// library as a whole, comment/remove this import and it's corresponding "app.use" call
+import <%-componentNamePascal%> from '@/entry.esm';
+
+const app = createApp(Dev);
+app.use(<%-componentNamePascal%>);
+
+app.mount('#app');
+<% } else {
+if (ts) { -%>
 import Vue, { VNode } from 'vue';
@@ -7,2 +19,6 @@ <% } else { -%>
 import Dev from './serve.vue';
+// To register individual components where they are used (serve.vue) instead of using the
+// library as a whole, comment/remove this import and it's corresponding "Vue.use" call
+import <%-componentNamePascal%> from '@/entry.esm';
+Vue.use(<%-componentNamePascal%>);
 
@@ -18,1 +34,2 @@ Vue.config.productionTip = false;
 }).$mount('#app');
+<% } -%>

templates/library/library-package.json

@@ -34,29 +34,48 @@ {
   "devDependencies": {
-    "@babel/core": "^7.9.0",
-    "@babel/preset-env": "^7.9.5",
+    "@babel/core": "^7.11.4",
+    "@babel/preset-env": "^7.11.0",
 <% if (ts) { -%>
-    "@babel/preset-typescript": "^7.9.0",
+    "@babel/preset-typescript": "^7.10.4",
 <% } -%>
-    "@rollup/plugin-alias": "^2.2.0",
-    "@rollup/plugin-commonjs": "^11.1.0",
-    "@rollup/plugin-replace": "^2.3.2",
-    "@vue/cli-plugin-babel": "^4.3.1",
+    "@rollup/plugin-alias": "^3.1.1",
+    "@rollup/plugin-babel": "^5.2.0",
+    "@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",
 <% if (ts) { -%>
-    "@vue/cli-plugin-typescript": "^4.3.1",
+    "@vue/cli-plugin-typescript": "^4.5.4",
 <% } -%>
-    "@vue/cli-service": "^4.3.1",
+    "@vue/cli-service": "^4.5.4",
+<% if (version === 3) { -%>
+    "@vue/compiler-sfc": "^3.0.0-rc.9",
+<% } -%>
     "cross-env": "^7.0.2",
     "minimist": "^1.2.5",
-    "rollup": "^2.7.3",
-    "rollup-plugin-babel": "^4.4.0",
-    "rollup-plugin-terser": "^5.3.0",
-    "rollup-plugin-vue": "^5.1.6",
+    "rollup": "^2.26.5",
+<% if (version === 3) { -%>
+    "rollup-plugin-postcss": "^3.1.6",
+<% } -%>
+    "rollup-plugin-terser": "^7.0.0",
+<% if (version === 3) { -%>
+    "rollup-plugin-vue": "^6.0.0-beta.10",
+<% } else { -%>
+    "rollup-plugin-vue": "^5.1.9",
+<% } -%>
 <% if (ts) { -%>
     "typescript": "^3.8.3",
 <% } -%>
-    "vue": "^2.6.11",
-    "vue-template-compiler": "^2.6.11"
+<% if (version === 3) { -%>
+    "vue": "^3.0.0-rc.9"
+<% } else { -%>
+    "vue": "^2.6.12",
+    "vue-template-compiler": "^2.6.12"
+<% } -%>
   },
   "peerDependencies": {
-    "vue": "^2.6.11"
+<% if (version === 3) { -%>
+    "vue": "^3.0.0-rc.9"
+<% } else { -%>
+    "vue": "^2.6.12"
+<% } -%>
   },
@@ -63,0 +82,0 @@ "engines": {

templates/library/library.d.ts

@@ -0,11 +1,12 @@
+<% if (version === 3) { -%>
+import { defineComponent, Plugin } from 'vue';
+
+<% } else { -%>
 import Vue, { PluginFunction, VueConstructor } from 'vue';
 
+<% } -%>
 
-interface InstallFunction extends PluginFunction<any> {
-  installed?: boolean;
-}
-
-declare const <%-componentNamePascal%>: { install: InstallFunction };
+declare const <%-componentNamePascal%>: { install: <% if (version === 3) { %>Plugin['install']<% } else { %>PluginFunction<any><% } %> };
 export default <%-componentNamePascal%>;
 
-export const <%-componentNamePascal%>Sample: VueConstructor<Vue>;
+export const <%-componentNamePascal%>Sample: <% if (version === 3) { %>ReturnType<typeof defineComponent><% } else { %>VueConstructor<Vue><% } %>;

templates/library/shims-vue.d.ts

 declare module '*.vue' {
+<% if (version === 3) { -%>
+  import { defineComponent } from 'vue';
+
+  const Component: ReturnType<typeof defineComponent>
+  export default Component;
+<% } else { -%>
   import Vue from 'vue';
   export default Vue
+<% } -%>
 }

templates/library/src/entry.ts

@@ -1,62 +0,23 @@
-<% if (ts) { -%>
-import _Vue, { PluginFunction } from 'vue';
+<% if (ts && version === 3) { -%>
+import { defineComponent, Plugin } from 'vue';
 
 <% } -%>
-// Import vue components
-import * as components from '@/lib-components/index';
+// 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';
 
-<% if (ts) { -%>
-// Define typescript interfaces for autoinstaller
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-interface InstallFunction extends PluginFunction<any> {
-  installed?: boolean;
-}
-
+// 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>; };
 <% } -%>
-// install function executed by Vue.use()
-<% if (ts) { -%>
-const install: InstallFunction = function install<%-componentNamePascal%>(Vue: typeof _Vue) {
+Object.entries(components).forEach(([componentName, component]) => {
+<% if (ts && version === 3) { -%>
+  if (componentName !== 'default') (plugin as PluginObject)[componentName] = component as any as ReturnType<typeof defineComponent>;
 <% } else { -%>
-const install = function install<%-componentNamePascal%>(Vue) {
+  if (componentName !== 'default') plugin[componentName] = component;
 <% } -%>
-  if (install.installed) return;
-  install.installed = true;
-  Object.entries(components).forEach(([componentName, component]) => {
-    Vue.component(componentName, component);
-  });
-};
+});
 
-// Create module definition for Vue.use()
-const plugin = {
-  install,
-};
-
-// To auto-install on non-es builds, when vue is found
-// eslint-disable-next-line no-redeclare
-/* global window, global */
-if ('false' === process.env.ES_BUILD) {
-  let GlobalVue = null;
-  if (typeof window !== 'undefined') {
-    GlobalVue = window.Vue;
-  } else if (typeof global !== 'undefined') {
-<% if (ts) { -%>
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    GlobalVue = (global as any).Vue;
-<% } else { -%>
-    GlobalVue = global.Vue;
-<% } -%>
-  }
-  if (GlobalVue) {
-<% if (ts) { -%>
-    (GlobalVue as typeof _Vue).use(plugin);
-<% } else { -%>
-    GlobalVue.use(plugin);
-<% } -%>
-  }
-}
-// Default export is library as a whole, registered via Vue.use()
 export default plugin;
-
-// To allow individual component use, export components
-// each can be registered via Vue.component()
-export * from '@/lib-components/index';

templates/single/build/rollup.config.js

@@ -7,4 +7,8 @@ // rollup.config.js
 import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
 import replace from '@rollup/plugin-replace';
-import babel from 'rollup-plugin-babel';
+import babel from '@rollup/plugin-babel';
+<% if (version === 3) { -%>
+import PostCSS from 'rollup-plugin-postcss';
+<% } -%>
 import { terser } from 'rollup-plugin-terser';
@@ -28,6 +32,11 @@ import minimist from 'minimist';
       alias({
-        resolve: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
-        entries: {
-          '@': path.resolve(projectRoot, 'src'),
-        },
+        entries: [
+          {
+            find: '@',
+            replacement: `${path.resolve(projectRoot, 'src')}`,
+          },
+        ],
+        customResolver: resolve({
+          extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
+        }),
       }),
@@ -37,5 +46,5 @@ ],
       'process.env.NODE_ENV': JSON.stringify('production'),
-      'process.env.ES_BUILD': JSON.stringify('false'),
     },
     vue: {
+<% if (version === 2) { -%>
       css: true,
@@ -45,6 +54,21 @@ template: {
       },
+<% } -%>
     },
+    postVue: [
+<% if (version === 3) { -%>
+      // Process only `<style module>` blocks.
+      PostCSS({
+        modules: {
+          generateScopedName: '[local]___[hash:base64:5]',
+        },
+        include: /&module=.*\.css$/,
+      }),
+      // Process all `<style>` blocks except `<style module>`.
+      PostCSS({ include: /(?<!&module=.*)\.css$/ }),
+<% } -%>
+    ],
     babel: {
       exclude: 'node_modules/**',
       extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
+      babelHelpers: 'bundled',
     },
@@ -75,2 +99,3 @@ },
     ...baseConfig,
+    input: 'src/entry.esm.<% if (ts) {%>ts<% } else { %>js<% } %>',
     external,
@@ -83,8 +108,6 @@ output: {
     plugins: [
-      replace({
-        ...baseConfig.plugins.replace,
-        'process.env.ES_BUILD': JSON.stringify('true'),
-      }),
+      replace(baseConfig.plugins.replace),
       ...baseConfig.plugins.preVue,
       vue(baseConfig.plugins.vue),
+      ...baseConfig.plugins.postVue,
       babel({
@@ -116,3 +139,3 @@ ...baseConfig.plugins.babel,
       name: '<%-componentNamePascal%>',
-      exports: 'named',
+      exports: 'auto',
       globals,
@@ -123,2 +146,3 @@ },
       ...baseConfig.plugins.preVue,
+<% if (version === 2) { -%>
       vue({
@@ -131,2 +155,6 @@ ...baseConfig.plugins.vue,
       }),
+<% } else { -%>
+      vue(baseConfig.plugins.vue),
+<% } -%>
+      ...baseConfig.plugins.postVue,
       babel(baseConfig.plugins.babel),
@@ -148,3 +176,3 @@ commonjs(),
       name: '<%-componentNamePascal%>',
-      exports: 'named',
+      exports: 'auto',
       globals,
@@ -156,2 +184,3 @@ },
       vue(baseConfig.plugins.vue),
+      ...baseConfig.plugins.postVue,
       babel(baseConfig.plugins.babel),
@@ -158,0 +187,0 @@ commonjs(),

templates/single/dev/serve.ts

@@ -1,2 +0,9 @@
-<% if (ts) { -%>
+<% if (version === 3) { -%>
+import { createApp } from 'vue';
+import Dev from './serve.vue';
+
+const app = createApp(Dev);
+app.mount('#app');
+<% } else {
+if (ts) { -%>
 import Vue, { VNode } from 'vue';
@@ -17,1 +24,2 @@ <% } else { -%>
 }).$mount('#app');
+<% } -%>

templates/single/shims-vue.d.ts

 declare module '*.vue' {
+<% if (version === 3) { -%>
+  import { defineComponent } from 'vue';
+
+  const Component: ReturnType<typeof defineComponent>
+  export default Component;
+<% } else { -%>
   import Vue from 'vue';
   export default Vue
+<% } -%>
 }

templates/single/single-component.d.ts

@@ -0,12 +1,14 @@
+<% if (version === 3) { -%>
+import { defineComponent, Plugin } from 'vue';
+
+type InstallableComponent = ReturnType<typeof defineComponent> & { install: Plugin['install'] };
+<% } else { -%>
 import Vue, { PluginFunction, VueConstructor } from 'vue';
 
-
-interface InstallFunction extends PluginFunction<any> {
-  installed?: boolean;
-}
 export interface InstallableComponent extends VueConstructor<Vue> {
-  install: InstallFunction;
+  install: PluginFunction<any>;
 }
+<% } -%>
 
 declare const <%-componentNamePascal%>: InstallableComponent;
 export default <%-componentNamePascal%>;

templates/single/single-package.json

@@ -34,29 +34,48 @@ {
   "devDependencies": {
-    "@babel/core": "^7.9.0",
-    "@babel/preset-env": "^7.9.5",
+    "@babel/core": "^7.11.4",
+    "@babel/preset-env": "^7.11.0",
 <% if (ts) { -%>
-    "@babel/preset-typescript": "^7.9.0",
+    "@babel/preset-typescript": "^7.10.4",
 <% } -%>
-    "@rollup/plugin-alias": "^2.2.0",
-    "@rollup/plugin-commonjs": "^11.1.0",
-    "@rollup/plugin-replace": "^2.3.2",
-    "@vue/cli-plugin-babel": "^4.3.1",
+    "@rollup/plugin-alias": "^3.1.1",
+    "@rollup/plugin-babel": "^5.2.0",
+    "@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",
 <% if (ts) { -%>
-    "@vue/cli-plugin-typescript": "^4.3.1",
+    "@vue/cli-plugin-typescript": "^4.5.4",
 <% } -%>
-    "@vue/cli-service": "^4.3.1",
+    "@vue/cli-service": "^4.5.4",
+<% if (version === 3) { -%>
+    "@vue/compiler-sfc": "^3.0.0-rc.9",
+<% } -%>
     "cross-env": "^7.0.2",
     "minimist": "^1.2.5",
-    "rollup": "^2.7.3",
-    "rollup-plugin-babel": "^4.4.0",
-    "rollup-plugin-terser": "^5.3.0",
-    "rollup-plugin-vue": "^5.1.6",
+    "rollup": "^2.26.5",
+<% if (version === 3) { -%>
+    "rollup-plugin-postcss": "^3.1.6",
+<% } -%>
+    "rollup-plugin-terser": "^7.0.0",
+<% if (version === 3) { -%>
+    "rollup-plugin-vue": "^6.0.0-beta.10",
+<% } else { -%>
+    "rollup-plugin-vue": "^5.1.9",
+<% } -%>
 <% if (ts) { -%>
     "typescript": "^3.8.3",
 <% } -%>
-    "vue": "^2.6.11",
-    "vue-template-compiler": "^2.6.11"
+<% if (version === 3) { -%>
+    "vue": "^3.0.0-rc.9"
+<% } else { -%>
+    "vue": "^2.6.12",
+    "vue-template-compiler": "^2.6.12"
+<% } -%>
   },
   "peerDependencies": {
-    "vue": "^2.6.11"
+<% if (version === 3) { -%>
+    "vue": "^3.0.0-rc.9"
+<% } else { -%>
+    "vue": "^2.6.12"
+<% } -%>
   },
@@ -63,0 +82,0 @@ "engines": {

templates/single/src/entry.ts

@@ -1,73 +0,11 @@
-<% if (ts) { -%>
-import _Vue, { PluginFunction, VueConstructor } from 'vue';
+// iife/cjs usage extends esm default export - so import it all
+import component, * as namedExports from '@/entry.esm';
 
-<% } -%>
-// Import vue component
-import component from '@/<%-componentName%>.vue';
+// 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)
+Object.entries(namedExports).forEach(([exportName, exported]) => {
+  if (exportName !== 'default') component[exportName] = exported;
+});
 
-<% if (ts) { -%>
-// Define typescript interfaces for autoinstaller
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-interface InstallFunction extends PluginFunction<any> {
-  installed?: boolean;
-}
-interface InstallableComponent extends VueConstructor<_Vue> {
-  install: InstallFunction;
-}
-
-<% } -%>
-// install function executed by Vue.use()
-<% if (ts) { -%>
-const install: InstallFunction = function install<%-componentNamePascal%>(Vue: typeof _Vue) {
-<% } else { -%>
-const install = function install<%-componentNamePascal%>(Vue) {
-<% } -%>
-  if (install.installed) return;
-  install.installed = true;
-  Vue.component('<%-componentNamePascal%>', component);
-};
-
-// Create module definition for Vue.use()
-const plugin = {
-  install,
-};
-
-// To auto-install on non-es builds, when vue is found
-// eslint-disable-next-line no-redeclare
-/* global window, global */
-if ('false' === process.env.ES_BUILD) {
-  let GlobalVue = null;
-  if (typeof window !== 'undefined') {
-    GlobalVue = window.Vue;
-  } else if (typeof global !== 'undefined') {
-<% if (ts) { -%>
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    GlobalVue = (global as any).Vue;
-<% } else { -%>
-    GlobalVue = global.Vue;
-<% } -%>
-  }
-  if (GlobalVue) {
-<% if (ts) { -%>
-    (GlobalVue as typeof _Vue).use(plugin);
-<% } else { -%>
-    GlobalVue.use(plugin);
-<% } -%>
-  }
-}
-
-// Inject install function into component - allows component
-// to be registered via Vue.use() as well as Vue.component()
-<% if (ts) { -%>
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-(component as any as InstallableComponent).install = install;
-<% } else { -%>
-component.install = install;
-<% } -%>
-
-// Export component by default
 export default component;
-
-// It's possible to expose named exports when writing components that can
-// also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';
-// export const RollupDemoDirective = component;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

55972

increased by15.03%

Number of package files

33

increased by6.45%

Lines of code

945

increased by10.27%

Number of medium maintenance alerts

0

decreased by-100%

Number of lines in readme file

115

increased by0.88%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• Updatedchalk@^4.1.0

• Updatedejs@^3.1.5