Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

vue-sfc-rollup

Package Overview
Dependencies
Maintainers
1
Versions
31
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-sfc-rollup - npm Package Compare versions

Comparing version 2.1.0 to 2.2.0

templates/library/.browserslistrc

31

CHANGELOG.md

@@ -7,2 +7,31 @@ # Changelog

## [2.2.0] - 2019-12-28
### Added
- Add ability to generate typescript-based components/libraries
- Generated components/libraries now both use `npm run serve` for rapid development (via `vue-cli-service`)
- Generate default `.browserslistrc` file
- Replace buble with babel - seeing this more ecosystem-wide
- Allows optional chaining, nullish coalescing support, and other modern language features
- Allows better browser targeting via `.browserslistrc` file
- Output isn't necessarily larger with proper configuration via `.browserslistrc`
### Changed
- Update template dependencies
- **NEW** @babel/core 7.7.7
- **NEW** @babel/plugin-proposal-nullish-coalescing-operator 7.7.4
- **NEW** @babel/plugin-proposal-optional-chaining 7.7.5
- **NEW** @babel/preset-env 7.7.7
- **NEW** @vue/cli-plugin-babel 4.1.0
- **NEW** @vue/cli-service 4.1.0
- **NEW** rollup-plugin-babel 4.3.3
- rollup 1.27.13
- rollup-plugin-terser 5.1.3
- Added new template dependencies for typescript-based projects
- @babel/preset-typescript 7.7.7
- @vue/cli-plugin-typescript 4.1.0
- typescript 3.7.3
- Cli development code refactor/cleanup
## [2.1.0] - 2019-11-07

@@ -14,3 +43,3 @@

### Changed
- Do not minify esm build - upstream bundlers should handle this
- Do not minify esm build - upstream bundlers should handle this
- Update template dependencies

@@ -17,0 +46,0 @@ - **NEW** @rollup/plugin-alias 2.2.0

2

package.json

@@ -6,3 +6,3 @@ {

"license": "ISC",
"version": "2.1.0",
"version": "2.2.0",
"bin": {

@@ -9,0 +9,0 @@ "sfc-init": "./sfc-init.js"

@@ -23,8 +23,6 @@ # vue-sfc-rollup

cd path/to/my-component-or-lib
npm install
# Do dev stuff using @vue/cli or other live-refresh coding
# - If single component
vue serve ./src/my-component.vue
# - If library
vue serve ./src/lib-dev.vue
# Do dev stuff
npm run serve

@@ -40,4 +38,17 @@ # Run build process

The vue-sfc-rollup utility scaffolds 4 files (6 in library mode) for you to kick of your SFC development. These files include a minimal [rollup](https://rollupjs.org) config, a corresponding package.json file with build script and dependencies, a wrapper used by rollup when packaging your SFC, and a sample SFC to kick-start development. In library mode, there is also an 'index' which declares the components exposed as part of your library, and a sample library usage file which can be used to load/test your library during development.
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:
- 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
- a sample SFC to kick-start development
- a sample usage file which can be used to load/test your component/library during development
In library mode, there is also an 'index' which declares the components exposed as part of your library.
When developing typescript-based components/libraries, the following supporting files will also be created:
- A basic typescript declaration file for your component/library
- Two basic typescript shim declaration files common to vue-typescript development
- A basic tsconfig.json file
If you wish to integrate this into an existing SFC, please check out [the vue-sfc-rollup source](https://github.com/team-innovation/vue-sfc-rollup). The files generated by this utility are located inside the `templates` directory of the repository. Merge the important bits of those file with your existing code, and you'll be good to go.

@@ -69,2 +80,3 @@

- *component name* (Single Component Mode Only): This is the kebab-case version of your SFC component name - what your component's tag would be if you were to use this in an HTML page or another component. Since any kebab-case tag name would also be a safe file name, this will also be the name of the generated files.
- *javascript/typescript*: Do you wish to use typescript to develop your component/library?
- *save path*: Where do you want to save this component? By default, the wizard will use your current directory and create a new folder with the kebab-case name as your component/library (eg. ./my-component-or-library).

@@ -76,3 +88,3 @@

vue-sfc-rollup is currently 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 it is recommended you use the official tooling. With v3 of the Vue CLI installed globally, 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 v3 of the Vue CLI installed, you can truly develop your SFC with zero configuration just by entering the following commands:

@@ -82,8 +94,6 @@ ```bash

cd path/to/my-component-or-lib
npm install
# Do dev stuff using @vue/cli or other live-refresh coding
# - If single component
vue serve ./src/my-component.vue
# - If library
vue serve ./src/lib-dev.vue
# Do dev stuff
npm run serve
```

@@ -90,0 +100,0 @@

@@ -8,24 +8,4 @@ #! /usr/bin/env node

// Helpers for creating kebab-case/PascalCase versions of string
const pascalify = (str) => {
const camelized = str.replace(/-([a-z])/g, (c) => c[1].toUpperCase());
return camelized.charAt(0).toUpperCase() + camelized.slice(1);
};
const kebabcase = (string) => string.replace(/([a-z])([A-Z])/g, '$1-$2').replace(/\s+/g, '-').toLowerCase();
const helpers = require('./lib/helpers');
// Helper to replace vars in files
const replaceVars = function replaceVars(str, vars) {
return ejs.render(str, vars);
};
// Helper to ensure directory exists before writing file to it
const ensureDirectoryExists = (filePath) => {
const dirname = path.dirname(filePath);
if (fs.existsSync(dirname)) {
return true;
}
ensureDirectoryExists(dirname);
return fs.mkdirSync(dirname);
};
// Create cancel function to exit the process

@@ -37,2 +17,3 @@ function onCancel() {

}
// Prepare container for response data

@@ -43,2 +24,3 @@ const responses = {

componentName: '',
language: '',
savePath: '',

@@ -64,8 +46,7 @@ };

responses.mode = response.mode;
return response.mode;
}
async function getName(mode) {
async function getName() {
const { mode } = responses;
let tmpKebabName = '';
let tmpSavePath = '';
const questions = [

@@ -77,3 +58,3 @@ {

validate(val) {
const kebabName = kebabcase(val).trim();
const kebabName = helpers.kebabcase(val).trim();
return (kebabName !== '');

@@ -90,3 +71,3 @@ },

validate(val) {
const kebabName = kebabcase(val).trim();
const kebabName = helpers.kebabcase(val).trim();
return (kebabName !== '');

@@ -96,13 +77,2 @@ },

}
questions.push({
type: 'text',
name: 'savePath',
message: `Enter a location to save the ${mode} files:`,
initial() { return `./${tmpSavePath}`; },
validate: (val) => {
// Validate path does not exist, then create directory
const pathExists = fs.existsSync(val);
return !pathExists;
},
});
const response = await prompts(

@@ -112,5 +82,4 @@ questions,

onSubmit(prompt, answer) {
if (prompt.name === 'npmName') tmpKebabName = kebabcase(answer).trim();
if (prompt.name === 'componentName') tmpKebabName = kebabcase(answer).trim();
tmpSavePath = tmpKebabName;
if (prompt.name === 'npmName') tmpKebabName = helpers.kebabcase(answer).trim();
if (prompt.name === 'componentName') tmpKebabName = helpers.kebabcase(answer).trim();
},

@@ -122,2 +91,45 @@ onCancel,

responses.componentName = response.componentName ? response.componentName : tmpKebabName;
responses.savePath = `./${tmpKebabName}`;
}
async function getLanguage() {
const { mode } = responses;
const question = {
type: 'select',
name: 'language',
message: `Will this ${mode} be written in JavaScript or TypeScript?`,
choices: [
{ title: 'JavaScript', value: 'js' },
{ title: 'TypeScript', value: 'ts' },
],
initial: 0,
};
const response = await prompts(
question,
{ onCancel },
);
responses.language = response.language;
}
async function getSavePath() {
const { mode, savePath } = responses;
const questions = [
{
type: 'text',
name: 'savePath',
message: `Enter a location to save the ${mode} files:`,
initial() { return savePath; },
validate: (val) => {
// Validate path does not exist, then create directory
const pathExists = fs.existsSync(val);
return !pathExists;
},
},
];
const response = await prompts(
questions,
{
onCancel,
},
);
responses.savePath = path.resolve(response.savePath);

@@ -130,3 +142,3 @@ return response;

// Stop prompting for input, start processing
const componentNamePascal = pascalify(data.componentName);
const componentNamePascal = helpers.pascalify(data.componentName);
const vars = {

@@ -136,79 +148,60 @@ npmName: data.npmName,

componentName: data.componentName,
ts: data.language === 'ts',
};
const newFiles = {
package: '',
rollupConfig: '',
entryjs: '',
libDev: '',
libExports: '',
component: '',
const files = {
common: [
'build/rollup.config.js',
{ 'src/entry.ts': `src/entry.${data.language}` },
{ 'src/serve-dev.ts': `src/serve-dev.${data.language}` },
'src/serve-dev.vue',
'.browserslistrc',
'babel.config.js',
(data.language === 'ts') ? 'shims-tsx.d.ts' : null,
(data.language === 'ts') ? 'shims-vue.d.ts' : null,
(data.language === 'ts') ? 'tsconfig.json' : null,
],
single: [
{ 'src/component.vue': `src/${data.componentName}.vue` },
{ 'single-package.json': 'package.json' },
(data.language === 'ts') ? { 'single-component.d.ts': `${data.componentName}.d.ts` } : null,
],
library: [
{ 'src/lib-components/component.vue': `src/lib-components/${data.componentName}-sample.vue` },
{ 'src/lib-components/index.ts': `src/lib-components/index.${data.language}` },
{ 'library-package.json': 'package.json' },
(data.language === 'ts') ? { 'library.d.ts': `${data.componentName}.d.ts` } : null,
],
};
const paths = {
package: path.join(data.savePath, 'package.json'),
rollupConfig: path.join(data.savePath, 'build', 'rollup.config.js'),
entryjs: path.join(data.savePath, 'src', 'entry.js'),
libDev: null,
libExports: null,
component: null,
};
// Single component mode
if (data.mode === 'component') {
newFiles.package = replaceVars(
fs.readFileSync(path.join(__dirname, 'templates', 'single', 'single-package.json')).toString(),
vars,
);
newFiles.rollupConfig = replaceVars(
fs.readFileSync(path.join(__dirname, 'templates', 'single', 'build', 'rollup.config.js')).toString(),
vars,
);
newFiles.entryjs = replaceVars(
fs.readFileSync(path.join(__dirname, 'templates', 'single', 'src', 'entry.js')).toString(),
vars,
);
delete newFiles.libDev;
delete newFiles.libExports;
newFiles.component = replaceVars(
fs.readFileSync(path.join(__dirname, 'templates', 'single', 'src', 'component.vue')).toString(),
vars,
);
delete paths.libDev;
delete paths.libExports;
paths.component = path.join(data.savePath, 'src', `${data.componentName}.vue`);
}
const fileActions = [
...files.common.filter((entry) => entry), // remove null entries
...files[data.mode === 'component' ? 'single' : 'library'].filter((entry) => entry), // remove null entries
];
// Library mode
if (data.mode === 'library') {
newFiles.package = replaceVars(
fs.readFileSync(path.join(__dirname, 'templates', 'library', 'library-package.json')).toString(),
vars,
fileActions.forEach((entry) => {
// If action is just a string, copy directly. If object,
// rename from key to value
let srcPath;
let destPath;
if (typeof entry === 'string') {
srcPath = entry;
destPath = entry;
} else {
[[srcPath, destPath]] = Object.entries(entry);
}
srcPath = path.join.apply(null, [
__dirname,
'templates',
data.mode === 'component' ? 'single' : 'library',
...srcPath.split('/'),
]);
destPath = path.join.apply(null, [
data.savePath,
...destPath.split('/'),
]);
helpers.ensureDirectoryExists(destPath);
fs.writeFileSync(
destPath,
ejs.render(fs.readFileSync(srcPath).toString(), vars),
);
newFiles.rollupConfig = replaceVars(
fs.readFileSync(path.join(__dirname, 'templates', 'library', 'build', 'rollup.config.js')).toString(),
vars,
);
newFiles.entryjs = replaceVars(
fs.readFileSync(path.join(__dirname, 'templates', 'library', 'src', 'entry.js')).toString(),
vars,
);
newFiles.libDev = replaceVars(
fs.readFileSync(path.join(__dirname, 'templates', 'library', 'src', 'lib-dev.vue')).toString(),
vars,
);
newFiles.libExports = replaceVars(
fs.readFileSync(path.join(__dirname, 'templates', 'library', 'src', 'lib-components', 'index.js')).toString(),
vars,
);
newFiles.component = replaceVars(
fs.readFileSync(path.join(__dirname, 'templates', 'library', 'src', 'lib-components', 'component.vue')).toString(),
vars,
);
paths.libDev = path.join(data.savePath, 'src', 'lib-dev.vue');
paths.libExports = path.join(data.savePath, 'src', 'lib-components', 'index.js');
paths.component = path.join(data.savePath, 'src', 'lib-components', `${data.componentName}-sample.vue`);
}
Object.keys(paths).forEach((key) => {
ensureDirectoryExists(paths[key]);
fs.writeFileSync(paths[key], newFiles[key]);
});

@@ -222,5 +215,8 @@

Within that directory, use src/${data.componentName}.vue as a starting point for your SFC.
When you're ready, run \`npm run build\` to generate the redistributable versions.
`;
When you're ready, run \`npm run build\` to generate the redistributable versions.`;
if (data.language === 'ts') {
completeMessage = `${completeMessage}
**NOTE** The default ${data.componentName}.d.ts is not automatically updated. Be sure to keep this
file up to date!`;
}
}

@@ -231,7 +227,13 @@ if (data.mode === 'library') {

Within that directory, you will find a sample SFC at src/lib-components/${data.componentName}-sample.vue.
Any components you wish to expose as part of your library should be saved in that directory, and
an entry must be added to src/lib-components/index.js so that rollup is aware of it. When you're
ready, run \`npm run build\` to generate the redistributable versions.
**NOTE** Any components you wish to expose as part of your library should be saved in that directory, and
an entry must be added to src/lib-components/index.${data.language}`;
`;
if (data.language === 'ts') {
completeMessage = `${completeMessage} and ${data.componentName}.d.ts so rollup is aware of it
and typescript users can receive proper support.`;
} else {
completeMessage = `${completeMessage} so that rollup is aware of it.`;
}
completeMessage = `${completeMessage}
When you're ready, run npm run build to generate the redistributable versions.`;
}

@@ -245,4 +247,6 @@ // eslint-disable-next-line no-console

.then(getName)
.then(getLanguage)
.then(getSavePath)
.then(() => {
scaffold(responses);
});
// rollup.config.js
import fs from 'fs';
import path from 'path';
import vue from 'rollup-plugin-vue';
import alias from '@rollup/plugin-alias';
import buble from '@rollup/plugin-buble';
import commonjs from 'rollup-plugin-commonjs';
import replace from '@rollup/plugin-replace';
import babel from 'rollup-plugin-babel';
import { terser } from 'rollup-plugin-terser';
import minimist from 'minimist';
// Get browserslist config and remove ie from es build targets
const esbrowserslist = fs.readFileSync('./.browserslistrc')
.toString()
.split('\n')
.filter((entry) => entry && entry.substring(0, 2) !== 'ie');
const argv = minimist(process.argv.slice(2));

@@ -16,3 +23,3 @@

const baseConfig = {
input: 'src/entry.js',
input: 'src/entry.<% if (ts) {%>ts<% } else { %>js<% } %>',
plugins: {

@@ -25,3 +32,3 @@ preVue: [

alias({
resolve: ['.jsx', '.js', '.vue'],
resolve: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
entries: {

@@ -38,5 +45,6 @@ '@': path.resolve(projectRoot, 'src'),

},
postVue: [
buble(),
],
babel: {
exclude: 'node_modules/**',
extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
},
},

@@ -50,2 +58,3 @@ };

// eg. 'jquery'
'vue',
];

@@ -58,2 +67,3 @@

// eg. jquery: '$'
vue: 'Vue',
};

@@ -75,3 +85,13 @@

vue(baseConfig.plugins.vue),
...baseConfig.plugins.postVue,
babel({
...baseConfig.plugins.babel,
presets: [
[
'@babel/preset-env',
{
targets: esbrowserslist,
},
],
],
}),
],

@@ -103,3 +123,3 @@ };

}),
...baseConfig.plugins.postVue,
babel(baseConfig.plugins.babel),
],

@@ -125,3 +145,3 @@ };

vue(baseConfig.plugins.vue),
...baseConfig.plugins.postVue,
babel(baseConfig.plugins.babel),
terser({

@@ -128,0 +148,0 @@ output: {

@@ -9,10 +9,17 @@ {

"unpkg": "dist/<%-componentName%>.min.js",
<% if (ts) { -%>
"types": "<%-componentName%>.d.ts",
<% } -%>
"files": [
"dist/*",
<% if (ts) { -%>
"<%-componentName%>.d.ts",
<% } -%>
"src/**/*.vue",
"!src/lib-dev.vue"
"!src/serve-dev.*"
],
"scripts": {
"serve": "vue-cli-service serve src/serve-dev.<% if (ts) { %>ts<% } else { %>js<% } %>",
"build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js",

@@ -28,14 +35,32 @@ "build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs",

"devDependencies": {
"@babel/core": "^7.7.7",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.7.4",
"@babel/plugin-proposal-optional-chaining": "^7.7.5",
"@babel/preset-env": "^7.7.7",
<% if (ts) { -%>
"@babel/preset-typescript": "^7.7.7",
<% } -%>
"@rollup/plugin-alias": "^2.2.0",
"@rollup/plugin-buble": "^0.20.0",
"@rollup/plugin-replace": "^2.2.1",
"@vue/cli-plugin-babel": "^4.1.0",
<% if (ts) { -%>
"@vue/cli-plugin-typescript": "^4.1.0",
<% } -%>
"@vue/cli-service": "^4.1.0",
"cross-env": "^6.0.3",
"minimist": "^1.2.0",
"rollup": "^1.26.3",
"rollup": "^1.27.13",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-terser": "^5.1.2",
"rollup-plugin-babel": "^4.3.3",
"rollup-plugin-terser": "^5.1.3",
"rollup-plugin-vue": "5.1.1",
<% if (ts) { -%>
"typescript": "^3.7.3",
<% } -%>
"vue": "^2.6.10",
"vue-template-compiler": "^2.6.10"
},
"peerDependencies": {
"vue": "^2.6.10"
},
"engines": {

@@ -42,0 +67,0 @@ "node": ">=8"

// rollup.config.js
import fs from 'fs';
import path from 'path';
import vue from 'rollup-plugin-vue';
import alias from '@rollup/plugin-alias';
import buble from '@rollup/plugin-buble';
import commonjs from 'rollup-plugin-commonjs';
import replace from '@rollup/plugin-replace';
import babel from 'rollup-plugin-babel';
import { terser } from 'rollup-plugin-terser';
import minimist from 'minimist';
// Get browserslist config and remove ie from es build targets
const esbrowserslist = fs.readFileSync('./.browserslistrc')
.toString()
.split('\n')
.filter((entry) => entry && entry.substring(0, 2) !== 'ie');
const argv = minimist(process.argv.slice(2));

@@ -16,3 +23,3 @@

const baseConfig = {
input: 'src/entry.js',
input: 'src/entry.<% if (ts) {%>ts<% } else { %>js<% } %>',
plugins: {

@@ -25,3 +32,3 @@ preVue: [

alias({
resolve: ['.jsx', '.js', '.vue'],
resolve: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
entries: {

@@ -38,5 +45,6 @@ '@': path.resolve(projectRoot, 'src'),

},
postVue: [
buble(),
],
babel: {
exclude: 'node_modules/**',
extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
},
},

@@ -50,2 +58,3 @@ };

// eg. 'jquery'
'vue',
];

@@ -58,2 +67,3 @@

// eg. jquery: '$'
vue: 'Vue',
};

@@ -75,3 +85,13 @@

vue(baseConfig.plugins.vue),
...baseConfig.plugins.postVue,
babel({
...baseConfig.plugins.babel,
presets: [
[
'@babel/preset-env',
{
targets: esbrowserslist,
},
],
],
}),
],

@@ -103,3 +123,3 @@ };

}),
...baseConfig.plugins.postVue,
babel(baseConfig.plugins.babel),
],

@@ -125,3 +145,3 @@ };

vue(baseConfig.plugins.vue),
...baseConfig.plugins.postVue,
babel(baseConfig.plugins.babel),
terser({

@@ -128,0 +148,0 @@ output: {

@@ -9,9 +9,17 @@ {

"unpkg": "dist/<%-componentName%>.min.js",
<% if (ts) { -%>
"types": "<%-componentName%>.d.ts",
<% } -%>
"files": [
"dist/*",
"src/**/*.vue"
<% if (ts) { -%>
"<%-componentName%>.d.ts",
<% } -%>
"src/**/*.vue",
"!src/serve-dev.*"
],
"scripts": {
"serve": "vue-cli-service serve src/serve-dev.<% if (ts) { %>ts<% } else { %>js<% } %>",
"build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js",

@@ -27,14 +35,32 @@ "build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs",

"devDependencies": {
"@babel/core": "^7.7.7",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.7.4",
"@babel/plugin-proposal-optional-chaining": "^7.7.5",
"@babel/preset-env": "^7.7.7",
<% if (ts) { -%>
"@babel/preset-typescript": "^7.7.7",
<% } -%>
"@rollup/plugin-alias": "^2.2.0",
"@rollup/plugin-buble": "^0.20.0",
"@rollup/plugin-replace": "^2.2.1",
"@vue/cli-plugin-babel": "^4.1.0",
<% if (ts) { -%>
"@vue/cli-plugin-typescript": "^4.1.0",
<% } -%>
"@vue/cli-service": "^4.1.0",
"cross-env": "^6.0.3",
"minimist": "^1.2.0",
"rollup": "^1.26.3",
"rollup": "^1.27.13",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-terser": "^5.1.2",
"rollup-plugin-babel": "^4.3.3",
"rollup-plugin-terser": "^5.1.3",
"rollup-plugin-vue": "5.1.1",
<% if (ts) { -%>
"typescript": "^3.7.3",
<% } -%>
"vue": "^2.6.10",
"vue-template-compiler": "^2.6.10"
},
"peerDependencies": {
"vue": "^2.6.10"
},
"engines": {

@@ -41,0 +67,0 @@ "node": ">=8"

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc