Socket
Socket
Sign inDemoInstall

vite

Package Overview
Dependencies
Maintainers
1
Versions
562
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vite - npm Package Compare versions

Comparing version 0.10.1 to 0.10.2

dist/vueResolver.d.ts
dist/vueResolver.js

16

CHANGELOG.md

@@ -0,1 +1,17 @@

## [0.10.2](https://github.com/vuejs/vite/compare/v0.10.1...v0.10.2) (2020-05-04)
### Bug Fixes
* fix build index asset injection ([ccce482](https://github.com/vuejs/vite/commit/ccce48228d8220de4312585c716c1c27ea9ef1c2))
* properly handle absolute asset urls ([5ca0ec4](https://github.com/vuejs/vite/commit/5ca0ec4abc183a3942ef169b39034ff403dd9eae)), closes [#45](https://github.com/vuejs/vite/issues/45)
* **moduleResolve:** do not rewrite external imports ([dd7af0a](https://github.com/vuejs/vite/commit/dd7af0a9b3e77fcbdec6fe7fcda26443f1e2c8fa)), closes [#42](https://github.com/vuejs/vite/issues/42)
### Features
* support CSS modules for *.module.css ([1782f83](https://github.com/vuejs/vite/commit/1782f831c62e73d961fcf71de4d1024a1f8acaf7))
## [0.10.1](https://github.com/vuejs/vite/compare/v1.0.1...v0.10.1) (2020-05-04)

@@ -2,0 +18,0 @@

69

dist/build.js

@@ -7,4 +7,4 @@ "use strict";

const path_1 = __importDefault(require("path"));
const fs_1 = require("fs");
const resolveVue_1 = require("./resolveVue");
const fs_extra_1 = __importDefault(require("fs-extra"));
const vueResolver_1 = require("./vueResolver");
const resolve_from_1 = __importDefault(require("resolve-from"));

@@ -17,6 +17,7 @@ const chalk_1 = __importDefault(require("chalk"));

const buildPluginAsset_1 = require("./buildPluginAsset");
const utils_1 = require("./utils");
async function build(options = {}) {
process.env.NODE_ENV = 'production';
const start = Date.now();
const { root = process.cwd(), cdn = !resolveVue_1.resolveVue(root).hasLocalVue, outDir = path_1.default.resolve(root, 'dist'), assetsDir = '.', resolvers = [], srcRoots = [], rollupInputOptions = {}, rollupOutputOptions = {}, rollupPluginVueOptions = {}, emitAssets = true, write = true, minify = true, silent = false } = options;
const { root = process.cwd(), cdn = !vueResolver_1.resolveVue(root).hasLocalVue, outDir = path_1.default.resolve(root, 'dist'), assetsDir = 'assets', resolvers = [], srcRoots = [], rollupInputOptions = {}, rollupOutputOptions = {}, rollupPluginVueOptions = {}, emitAssets = true, write = true, minify = true, silent = false } = options;
// lazy require rollup so that we don't load it when only using the dev server

@@ -30,3 +31,3 @@ // importing it just for the types

try {
indexContent = await fs_1.promises.readFile(indexPath, 'utf-8');
indexContent = await fs_extra_1.default.readFile(indexPath, 'utf-8');
}

@@ -50,3 +51,5 @@ catch (e) {

require('rollup-plugin-vue')({
transformAssetUrls: true,
transformAssetUrls: {
includeAbsolute: true
},
// TODO: for now we directly handle pre-processors in rollup-plugin-vue

@@ -88,2 +91,23 @@ // so that we don't need to install dedicated rollup plugins.

let generatedIndex = indexContent && indexContent.replace(buildPluginHtml_1.scriptRE, '').trim();
const injectCSS = (html, filename) => {
const tag = `<link rel="stylesheet" href="/${path_1.default.posix.join(assetsDir, filename)}">`;
if (/<\/head>/.test(html)) {
return html.replace(/<\/head>/, `${tag}\n</head>`);
}
else {
return tag + '\n' + html;
}
};
const injectScript = (html, filename) => {
filename = utils_1.isExternalUrl(filename)
? filename
: `/${path_1.default.posix.join(assetsDir, filename)}`;
const tag = `<script type="module" src="${filename}"></script>`;
if (/<\/body>/.test(html)) {
return html.replace(/<\/body>/, `${tag}\n</body>`);
}
else {
return html + '\n' + tag;
}
};
// TODO handle public path for injections?

@@ -96,8 +120,8 @@ // this would also affect paths in templates and css.

// if not inlining vue, inject cdn link so it can start the fetch early
generatedIndex = injectScript(generatedIndex, resolveVue_1.resolveVue(root).cdnLink);
generatedIndex = injectScript(generatedIndex, vueResolver_1.resolveVue(root).cdnLink);
}
}
if (write) {
await fs_1.promises.rmdir(outDir, { recursive: true });
await fs_1.promises.mkdir(outDir, { recursive: true });
await fs_extra_1.default.remove(outDir);
await fs_extra_1.default.ensureDir(outDir);
}

@@ -116,4 +140,4 @@ // inject / write bundle

console.log(`write ${chalk_1.default.cyan(path_1.default.relative(process.cwd(), filepath))}`);
await fs_1.promises.mkdir(path_1.default.dirname(filepath), { recursive: true });
await fs_1.promises.writeFile(filepath, chunk.code);
await fs_extra_1.default.ensureDir(path_1.default.dirname(filepath));
await fs_extra_1.default.writeFile(filepath, chunk.code);
}

@@ -126,4 +150,4 @@ }

console.log(`write ${chalk_1.default.magenta(path_1.default.relative(process.cwd(), filepath))}`);
await fs_1.promises.mkdir(path_1.default.dirname(filepath), { recursive: true });
await fs_1.promises.writeFile(filepath, chunk.source);
await fs_extra_1.default.ensureDir(path_1.default.dirname(filepath));
await fs_extra_1.default.writeFile(filepath, chunk.source);
}

@@ -137,3 +161,3 @@ }

console.log(`write ${chalk_1.default.green(path_1.default.relative(process.cwd(), indexOutPath))}`);
await fs_1.promises.writeFile(indexOutPath, generatedIndex);
await fs_extra_1.default.writeFile(indexOutPath, generatedIndex);
}

@@ -149,20 +173,1 @@ }

exports.build = build;
function injectCSS(html, filename) {
const tag = `<link rel="stylesheet" href="./${filename}">`;
if (/<\/head>/.test(html)) {
return html.replace(/<\/head>/, `${tag}\n</head>`);
}
else {
return tag + '\n' + html;
}
}
function injectScript(html, filename) {
filename = /^https?:\/\//.test(filename) ? filename : `./${filename}`;
const tag = `<script type="module" src="${filename}"></script>`;
if (/<\/body>/.test(html)) {
return html.replace(/<\/body>/, `${tag}\n</body>`);
}
else {
return html + '\n' + tag;
}
}

4

dist/buildPluginAsset.js

@@ -7,3 +7,3 @@ "use strict";

const path_1 = __importDefault(require("path"));
const fs_1 = require("fs");
const fs_extra_1 = __importDefault(require("fs-extra"));
const utils_1 = require("./utils");

@@ -21,3 +21,3 @@ const hash_sum_1 = __importDefault(require("hash-sum"));

let url = slash_1.default(path_1.default.join('/', assetsDir, resolvedFileName));
const content = await fs_1.promises.readFile(id);
const content = await fs_extra_1.default.readFile(id);
if (!id.endsWith(`.svg`)) {

@@ -24,0 +24,0 @@ if (content.length < inlineThreshold) {

46

dist/buildPluginCss.js

@@ -9,4 +9,5 @@ "use strict";

const config_1 = require("./config");
const utils_1 = require("./utils");
const debug = require('debug')('vite:css');
const urlRE = /(url\(\s*['"]?)([^"')]+)(["']?\s*\))/g;
const urlRE = /(url\(\s*['"]?)([^"')]+)(["']?\s*\))/;
exports.createBuildCssPlugin = (root, assetsDir, cssFileName, minify) => {

@@ -17,11 +18,10 @@ const styles = new Map();

name: 'vite:css',
async transform(code, id) {
async transform(css, id) {
if (id.endsWith('.css')) {
// process url() - register referenced files as assets
// and rewrite the url to the resolved public path
if (urlRE.test(code)) {
if (urlRE.test(css)) {
const fileDir = path_1.default.dirname(id);
urlRE.lastIndex = 0;
let match;
let remaining = code;
let remaining = css;
let rewritten = '';

@@ -31,3 +31,8 @@ while ((match = urlRE.exec(remaining))) {

const [matched, before, rawUrl, after] = match;
const file = path_1.default.resolve(fileDir, rawUrl);
if (utils_1.isExternalUrl(rawUrl)) {
rewritten += matched;
remaining = remaining.slice(match.index + matched.length);
return;
}
const file = path_1.default.join(fileDir, rawUrl);
const { fileName, content, url } = await buildPluginAsset_1.getAssetPublicPath(file, assetsDir);

@@ -39,13 +44,26 @@ assets.set(fileName, content);

}
code = rewritten + remaining;
css = rewritten + remaining;
}
// postcss
let modules;
const postcssConfig = await config_1.loadPostcssConfig(root);
if (postcssConfig) {
const expectsModule = id.endsWith('.module.css');
if (postcssConfig || expectsModule) {
try {
const result = await require('postcss')(postcssConfig.plugins).process(code, {
...postcssConfig.options,
const result = await require('postcss')([
...((postcssConfig && postcssConfig.plugins) || []),
...(expectsModule
? [
require('postcss-modules')({
getJSON(_, json) {
modules = json;
}
})
]
: [])
]).process(css, {
...(postcssConfig && postcssConfig.options),
from: id
});
code = result.css;
css = result.css;
}

@@ -56,4 +74,6 @@ catch (e) {

}
styles.set(id, code);
return '/* css extracted by vite */';
styles.set(id, css);
return modules
? `export default ${JSON.stringify(modules)}`
: '/* css extracted by vite */';
}

@@ -60,0 +80,0 @@ },

6

dist/buildPluginResolve.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const serverPluginHmr_1 = require("./serverPluginHmr");
const resolveVue_1 = require("./resolveVue");
const vueResolver_1 = require("./vueResolver");
const debug = require('debug')('vite:build:resolve');

@@ -24,7 +24,7 @@ exports.createBuildResolvePlugin = (root, cdn, srcRoots, resolver) => {

if (!cdn) {
return resolveVue_1.resolveVue(root).bundler;
return vueResolver_1.resolveVue(root).bundler;
}
else {
return {
id: resolveVue_1.resolveVue(root).cdnLink,
id: vueResolver_1.resolveVue(root).cdnLink,
external: true

@@ -31,0 +31,0 @@ };

84

dist/serverPluginCss.js

@@ -10,2 +10,3 @@ "use strict";

const config_1 = require("./config");
const processedCSS = new Map();
exports.cssPlugin = ({ root, app, watcher, resolver }) => {

@@ -20,3 +21,4 @@ app.use(async (ctx, next) => {

// skip raw requests
!ctx.query.raw) {
ctx.query.raw == null) {
await processCss(ctx);
// we rewrite it to JS that injects a <style> tag pointing to the same url

@@ -27,23 +29,15 @@ // but with a `?raw` query which returns the actual css

const rawPath = JSON.stringify(ctx.path + '?raw');
ctx.body = `
import { updateStyle } from "${serverPluginHmr_1.hmrClientId}"\n
updateStyle(${id}, ${rawPath})
`.trim();
let code = `import { updateStyle } from "${serverPluginHmr_1.hmrClientId}"\n` +
`updateStyle(${id}, ${rawPath})\n`;
if (ctx.path.endsWith('.module.css')) {
code += `export default ${JSON.stringify(processedCSS.get(ctx.path).modules)}`;
}
ctx.body = code.trim();
}
else {
// plain css request, apply postcss transform
const postcssConfig = await config_1.loadPostcssConfig(root);
if (postcssConfig) {
const css = await utils_1.readBody(ctx.body);
try {
const result = await require('postcss')(postcssConfig.plugins).process(css, {
...postcssConfig.options,
from: resolver.requestToFile(ctx.path)
});
ctx.body = result.css;
}
catch (e) {
console.error(`[vite] error applying postcss transforms: `, e);
}
// raw request, return compiled css
if (!processedCSS.has(ctx.path)) {
await processCss(ctx);
}
ctx.body = processedCSS.get(ctx.path).css;
}

@@ -57,10 +51,50 @@ }

const id = hash_sum_1.default(publicPath);
watcher.send({
type: 'style-update',
id,
path: publicPath,
timestamp: Date.now()
});
// bust process cache
processedCSS.delete(publicPath);
if (file.endsWith('.module.css')) {
watcher.handleJSReload(file);
}
else {
watcher.send({
type: 'style-update',
id,
path: publicPath,
timestamp: Date.now()
});
}
}
});
async function processCss(ctx) {
let css = (await utils_1.readBody(ctx.body));
let modules;
const postcssConfig = await config_1.loadPostcssConfig(root);
const expectsModule = ctx.path.endsWith('.module.css');
// postcss processing
if (postcssConfig || expectsModule) {
try {
css = (await require('postcss')([
...((postcssConfig && postcssConfig.plugins) || []),
...(expectsModule
? [
require('postcss-modules')({
getJSON(_, json) {
modules = json;
}
})
]
: [])
]).process(css, {
...(postcssConfig && postcssConfig.options),
from: resolver.requestToFile(ctx.path)
})).css;
}
catch (e) {
console.error(`[vite] error applying postcss transforms: `, e);
}
}
processedCSS.set(ctx.path, {
css,
modules
});
}
};

8

dist/serverPluginModuleResolve.js

@@ -7,6 +7,6 @@ "use strict";

const path_1 = __importDefault(require("path"));
const fs_extra_1 = __importDefault(require("fs-extra"));
const chalk_1 = __importDefault(require("chalk"));
const resolve_from_1 = __importDefault(require("resolve-from"));
const fs_1 = require("fs");
const resolveVue_1 = require("./resolveVue");
const vueResolver_1 = require("./vueResolver");
const utils_1 = require("./utils");

@@ -39,3 +39,3 @@ const debug = require('debug')('vite:resolve');

if (id === 'vue') {
return serve(id, resolveVue_1.resolveVue(root).browser, 'vue');
return serve(id, vueResolver_1.resolveVue(root).browser, 'vue');
}

@@ -90,3 +90,3 @@ // already resolved and cached

const importMapPath = path_1.default.join(root, 'web_modules', 'import-map.json');
if (await fs_1.promises.stat(importMapPath).catch((e) => false)) {
if (await fs_extra_1.default.pathExists(importMapPath)) {
const importMap = require(importMapPath);

@@ -93,0 +93,0 @@ if (importMap.imports) {

4

dist/serverPluginModuleRewrite.js

@@ -109,2 +109,6 @@ "use strict";

if (dynamicIndex === -1 || hasLiteralDynamicId) {
// do not rewrite external imports
if (utils_1.isExternalUrl(id)) {
return;
}
let resolved;

@@ -111,0 +115,0 @@ if (/^[^\/\.]/.test(id)) {

13

dist/serverPluginVue.js

@@ -7,3 +7,3 @@ "use strict";

const path_1 = __importDefault(require("path"));
const resolveVue_1 = require("./resolveVue");
const vueResolver_1 = require("./vueResolver");
const hash_sum_1 = __importDefault(require("hash-sum"));

@@ -84,3 +84,3 @@ const lru_cache_1 = __importDefault(require("lru-cache"));

const start = Date.now();
const { descriptor, errors } = resolveVue_1.resolveCompiler(root).parse(content, {
const { descriptor, errors } = vueResolver_1.resolveCompiler(root).parse(content, {
filename,

@@ -162,7 +162,10 @@ sourceMap: true

const start = Date.now();
const { code, map, errors } = resolveVue_1.resolveCompiler(root).compileTemplate({
const { code, map, errors } = vueResolver_1.resolveCompiler(root).compileTemplate({
source: template.content,
filename: filePath,
inMap: template.map,
transformAssetUrlsBase: path_1.default.posix.dirname(publicPath),
transformAssetUrls: {
// @ts-ignore
base: path_1.default.posix.dirname(publicPath)
},
compilerOptions: {

@@ -196,3 +199,3 @@ scopeId: scoped ? `data-v-${hash_sum_1.default(publicPath)}` : null,

const postcssConfig = await config_1.loadPostcssConfig(root);
const result = await resolveVue_1.resolveCompiler(root).compileStyleAsync({
const result = await vueResolver_1.resolveCompiler(root).compileStyleAsync({
source: style.content,

@@ -199,0 +202,0 @@ filename: filePath,

1

dist/utils.d.ts
/// <reference types="node" />
import { Context } from 'koa';
import { Readable } from 'stream';
export declare const isExternalUrl: (url: string) => boolean;
/**

@@ -5,0 +6,0 @@ * Check if a file is a static asset that vite can process.

8

dist/utils.js

@@ -7,6 +7,8 @@ "use strict";

const path_1 = __importDefault(require("path"));
const fs_1 = require("fs");
const fs_extra_1 = __importDefault(require("fs-extra"));
const lru_cache_1 = __importDefault(require("lru-cache"));
const stream_1 = require("stream");
const getETag = require('etag');
const httpRE = /^https?:\/\//;
exports.isExternalUrl = (url) => httpRE.test(url);
const imageRE = /\.(png|jpe?g|gif|svg)(\?.*)?$/;

@@ -42,3 +44,3 @@ const mediaRE = /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/;

async function cachedRead(ctx, file) {
const lastModified = (await fs_1.promises.stat(file)).mtimeMs;
const lastModified = (await fs_extra_1.default.stat(file)).mtimeMs;
const cached = moduleReadCache.get(file);

@@ -61,3 +63,3 @@ if (ctx) {

}
const content = await fs_1.promises.readFile(file, 'utf-8');
const content = await fs_extra_1.default.readFile(file, 'utf-8');
const etag = getETag(content);

@@ -64,0 +66,0 @@ moduleReadCache.set(file, {

14

package.json
{
"name": "vite",
"version": "0.10.1",
"version": "0.10.2",
"license": "MIT",

@@ -16,3 +16,3 @@ "author": "Evan You",

"engines": {
"node": ">=12.0.0"
"node": ">=10.0.0"
},

@@ -35,3 +35,4 @@ "repository": {

"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
"prepublishOnly": "yarn build && yarn changelog"
"prepublishOnly": "yarn build && yarn changelog",
"postpublish": "git add CHANGELOG.md && git commit -m 'chore: changelog [ci skip]' && git push"
},

@@ -61,3 +62,3 @@ "gitHooks": {

"@types/koa": "^2.11.3",
"@vue/compiler-sfc": "^3.0.0-beta.8",
"@vue/compiler-sfc": "^3.0.0-beta.9",
"chalk": "^4.0.0",

@@ -68,2 +69,3 @@ "chokidar": "^3.3.1",

"es-module-lexer": "^0.3.18",
"fs-extra": "^9.0.0",
"hash-sum": "^2.0.0",

@@ -80,2 +82,3 @@ "koa": "^2.11.0",

"postcss-load-config": "^2.1.0",
"postcss-modules": "^2.0.0",
"resolve-from": "^5.0.0",

@@ -86,3 +89,3 @@ "rollup": "^2.7.2",

"slash": "^3.0.0",
"vue": "^3.0.0-beta.8",
"vue": "^3.0.0-beta.9",
"ws": "^7.2.3"

@@ -92,2 +95,3 @@ },

"@types/es-module-lexer": "^0.3.0",
"@types/fs-extra": "^8.1.0",
"@types/hash-sum": "^1.0.0",

@@ -94,0 +98,0 @@ "@types/lru-cache": "^5.1.0",

4

README.md

@@ -133,4 +133,6 @@ # vite ⚡

Note that you do **not** need to configure PostCSS if you want to use `<style module>` in `*vue` files: it's supported out of the box.
### CSS Modules
Note that you do **not** need to configure PostCSS if you want to use CSS Modules: it works out of the box. Inside `*.vue` components you can use `<style module>`, and for plain `.css` files, you need name CSS modules files as `*.module.css` which allows you to import the naming hash from it.
### CSS Pre-Processors

@@ -137,0 +139,0 @@ 

dist/resolveVue.d.ts
dist/resolveVue.js
SocketSocket SOC 2 Logo

Product

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

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc