vite - npm Package Compare versions

Comparing version 1.0.0-beta.8 to 1.0.0-beta.9

dist/client/client.js

@@ -43,3 +43,3 @@ // register service worker
 const socketProtocol = location.protocol === 'https:' ? 'wss' : 'ws';
-const socketUrl = `${socketProtocol}://${location.host}`;
+const socketUrl = `${socketProtocol}://${location.hostname}:${__PORT__}`;
 const socket = new WebSocket(socketUrl, 'vite-hmr');
@@ -93,2 +93,10 @@ function warnFailedFetch(err, path) {
         case 'style-update':
+            // check if this is referenced in html via <link>
+            const el = document.querySelector(`link[href*='${path}']`);
+            if (el) {
+                bustSwCache(path);
+                el.setAttribute('href', `${path}${path.includes('?') ? '&' : '?'}t=${timestamp}`);
+                break;
+            }
+            // imported CSS
             const importQuery = path.includes('?') ? '&import' : '?import';
@@ -95,0 +103,0 @@ bustSwCache(`${path}${importQuery}`);

dist/node/build/buildPluginCss.js

@@ -31,3 +31,3 @@ "use strict";
                         scoped: false,
-                        modules: id.endsWith('.module.css'),
+                        modules: cssUtils_1.cssModuleRE.test(id),
                         preprocessLang: id.replace(cssUtils_1.cssPreprocessLangRE, '$2'),
@@ -34,0 +34,0 @@ preprocessOptions

dist/node/build/buildPluginHtml.d.ts

@@ -7,4 +7,4 @@ import { Plugin, OutputChunk } from 'rollup';
 } | {
-    renderIndex: (bundleOutput: [OutputChunk, ...(import("rollup").OutputAsset | OutputChunk)[]], cssFileName: string) => string;
+    renderIndex: (bundleOutput: [OutputChunk, ...(import("rollup").OutputAsset | OutputChunk)[]]) => string;
     htmlPlugin: Plugin;
 }>;

dist/node/build/buildPluginHtml.js

@@ -19,3 +19,4 @@ "use strict";
     const rawHtml = await fs_extra_1.default.readFile(indexPath, 'utf-8');
-    let { html: processedHtml, js } = await compileHtml(root, rawHtml, publicBasePath, assetsDir, inlineLimit, resolver);
+    const assets = new Map();
+    let { html: processedHtml, js } = await compileHtml(root, rawHtml, publicBasePath, assetsDir, inlineLimit, resolver, assets);
     const htmlPlugin = {
@@ -27,2 +28,5 @@ name: 'vite:html',
             }
+        },
+        generateBundle(_options, bundle) {
+            buildPluginAsset_1.registerAssets(assets, bundle);
         }
@@ -63,15 +67,22 @@ };
     };
-    const renderIndex = (bundleOutput, cssFileName) => {
-        // inject css link
-        processedHtml = injectCSS(processedHtml, cssFileName);
-        // inject js entry chunks
+    const renderIndex = (bundleOutput) => {
         for (const chunk of bundleOutput) {
             if (chunk.type === 'chunk') {
                 if (chunk.isEntry) {
+                    // js entry chunk
                     processedHtml = injectScript(processedHtml, chunk.fileName);
                 }
                 else if (shouldPreload && shouldPreload(chunk)) {
+                    // async preloaded chunk
                     processedHtml = injectPreload(processedHtml, chunk.fileName);
                 }
             }
+            else {
+                // imported css chunks
+                if (chunk.fileName.endsWith('.css') &&
+                    chunk.source &&
+                    !assets.has(chunk.fileName)) {
+                    processedHtml = injectCSS(processedHtml, chunk.fileName);
+                }
+            }
         }
@@ -96,3 +107,3 @@ return processedHtml;
 // and scripts
-const compileHtml = async (root, html, publicBasePath, assetsDir, inlineLimit, resolver) => {
+const compileHtml = async (root, html, publicBasePath, assetsDir, inlineLimit, resolver, assets) => {
     const { parse, transform } = require('@vue/compiler-dom');
@@ -143,7 +154,3 @@ // @vue/compiler-core doesn't like lowercase doctypes
                         !pathUtils_1.isExternalUrl(p.value.content)) {
-                        const url = pathUtils_1.cleanUrl(p.value.content);
-                        js += `\nimport ${JSON.stringify(url)}`;
-                        if (pathUtils_1.isStaticAsset(url)) {
-                            assetUrls.push(p);
-                        }
+                        assetUrls.push(p);
                     }
@@ -161,4 +168,7 @@ }
         const value = attr.value;
-        const { url } = await buildPluginAsset_1.resolveAsset(resolver.requestToFile(value.content), root, publicBasePath, assetsDir, inlineLimit);
+        const { fileName, content, url } = await buildPluginAsset_1.resolveAsset(resolver.requestToFile(value.content), root, publicBasePath, assetsDir, pathUtils_1.cleanUrl(value.content).endsWith('.css') ? 0 : inlineLimit);
         s.overwrite(value.loc.start.offset, value.loc.end.offset, `"${url}"`);
+        if (fileName && content) {
+            assets.set(fileName, content);
+        }
     }
@@ -165,0 +175,0 @@ return {

dist/node/build/index.js

@@ -57,3 +57,3 @@ "use strict";
 async function createBaseRollupPlugins(root, resolver, options) {
-    const { rollupInputOptions = {}, transforms = [], vueCustomBlockTransforms = {}, cssPreprocessOptions } = options;
+    const { rollupInputOptions = {}, transforms = [], vueCustomBlockTransforms = {}, cssPreprocessOptions, enableEsbuild = true } = options;
     const { nodeResolve } = require('@rollup/plugin-node-resolve');
@@ -68,3 +68,5 @@ const dynamicImport = require('rollup-plugin-dynamic-import-variables');
         // vite:esbuild
-        await buildPluginEsbuild_1.createEsbuildPlugin(options.minify === 'esbuild', options.jsx),
+        enableEsbuild
+            ? await buildPluginEsbuild_1.createEsbuildPlugin(options.minify === 'esbuild', options.jsx)
+            : null,
         // vue
@@ -182,2 +184,3 @@ require('rollup-plugin-vue')({
                 'import.meta.env.PROD': String(mode === 'production'),
+                'import.meta.env.': `({}).`,
                 'process.env.NODE_ENV': JSON.stringify(mode),
@@ -225,4 +228,3 @@ 'process.env.': `({}).`,
     spinner && spinner.stop();
-    const cssFileName = output.find((a) => a.type === 'asset' && a.fileName.endsWith('.css')).fileName;
-    const indexHtml = emitIndex ? renderIndex(output, cssFileName) : '';
+    const indexHtml = emitIndex ? renderIndex(output) : '';
     if (write) {
@@ -260,2 +262,4 @@ const cwd = process.cwd();
             else if (emitAssets) {
+                if (!chunk.source)
+                    continue;
                 // write asset
@@ -262,0 +266,0 @@ const filepath = path_1.default.join(resolvedAssetsPath, chunk.fileName);

dist/node/config.d.ts

@@ -105,2 +105,7 @@ /// <reference types="node" />
     cssPreprocessOptions?: SFCStyleCompileOptions['preprocessOptions'];
+    /**
+     * Enable esbuild
+     * @default true
+     */
+    enableEsbuild?: boolean;
 }
@@ -127,11 +132,9 @@ export interface ServerConfig extends SharedConfig {
      *   proxy: {
-     *     proxy: {
-     *       // string shorthand
-     *       '/foo': 'http://localhost:4567/foo',
-     *       // with options
-     *       '/api': {
-     *         target: 'http://jsonplaceholder.typicode.com',
-     *         changeOrigin: true,
-     *         rewrite: path => path.replace(/^\/api/, '')
-     *       }
+     *     // string shorthand
+     *     '/foo': 'http://localhost:4567/foo',
+     *     // with options
+     *     '/api': {
+     *       target: 'http://jsonplaceholder.typicode.com',
+     *       changeOrigin: true,
+     *       rewrite: path => path.replace(/^\/api/, '')
      *     }
@@ -138,0 +141,0 @@ *   }

dist/node/optimizer/index.js

@@ -19,2 +19,3 @@ "use strict";
     'vite',
+    'vitepress',
     'tailwindcss',
@@ -21,0 +22,0 @@ '@tailwindcss/ui',

dist/node/server/index.d.ts

@@ -19,2 +19,3 @@ /// <reference types="node" />
     };
+    port: number;
 }
@@ -21,0 +22,0 @@ export interface State extends DefaultState {

dist/node/server/index.js

@@ -33,3 +33,3 @@ "use strict";
 function createServer(config) {
-    const { root = process.cwd(), configureServer = [], resolvers = [], alias = {}, transforms = [], vueCustomBlockTransforms = {}, optimizeDeps = {} } = config;
+    const { root = process.cwd(), configureServer = [], resolvers = [], alias = {}, transforms = [], vueCustomBlockTransforms = {}, optimizeDeps = {}, enableEsbuild = true } = config;
     const app = new koa_1.default();
@@ -47,3 +47,6 @@ const server = resolveServer(config, app.callback());
         resolver,
-        config
+        config,
+        // port is exposed on the context for hmr client connection
+        // in case the files are served under a different port
+        port: config.port || 3000
     };
@@ -74,3 +77,3 @@ // attach server context to koa context
         serverPluginCss_1.cssPlugin,
-        serverPluginEsbuild_1.esbuildPlugin,
+        enableEsbuild ? serverPluginEsbuild_1.esbuildPlugin : null,
         serverPluginJson_1.jsonPlugin,
@@ -82,9 +85,10 @@ serverPluginAssets_1.assetPathPlugin,
     ];
-    resolvedPlugins.forEach((m) => m(context));
+    resolvedPlugins.forEach((m) => m && m(context));
     const listen = server.listen.bind(server);
-    server.listen = (async (...args) => {
+    server.listen = (async (port, ...args) => {
         if (optimizeDeps.auto !== false) {
             await require('../optimizer').optimizeDeps(config);
         }
-        return listen(...args);
+        context.port = port;
+        return listen(port, ...args);
     });
@@ -91,0 +95,0 @@ return server;

dist/node/server/serverPluginCss.js

@@ -15,3 +15,2 @@ "use strict";
 exports.debugCSS = require('debug')('vite:css');
-const processedCSS = new Map();
 exports.cssPlugin = ({ root, app, watcher, resolver }) => {
@@ -26,17 +25,8 @@ app.use(async (ctx, next) => {
             if (utils_1.isImportRequest(ctx)) {
-                await processCss(root, ctx);
+                const { css, modules } = await processCss(root, ctx);
+                ctx.type = 'js';
                 // we rewrite css with `?import` to a js module that inserts a style
                 // tag linking to the actual raw url
-                ctx.type = 'js';
-                const { css, modules } = processedCSS.get(ctx.path);
                 ctx.body = codegenCss(id, css, modules);
             }
-            else {
-                // raw request, return compiled css
-                if (!processedCSS.has(ctx.path)) {
-                    await processCss(root, ctx);
-                }
-                ctx.type = 'css';
-                ctx.body = processedCSS.get(ctx.path).css;
-            }
         }
@@ -113,2 +103,5 @@ });
     }
+    // processed CSS is cached in case the user ticks "disable cache" during dev
+    // which can lead to unnecessary processing on page reload
+    const processedCSS = new Map();
     async function processCss(root, ctx) {
@@ -118,3 +111,3 @@ // source didn't change (marker added by cachedRead)
         if (ctx.__notModified && processedCSS.has(ctx.path)) {
-            return;
+            return processedCSS.get(ctx.path);
         }
@@ -132,4 +125,5 @@ const css = (await utils_1.readBody(ctx.body));
         if (typeof result === 'string') {
-            processedCSS.set(ctx.path, { css: await cssUtils_1.rewriteCssUrls(css, ctx.path) });
-            return;
+            const res = { css: await cssUtils_1.rewriteCssUrls(css, ctx.path) };
+            processedCSS.set(ctx.path, res);
+            return res;
         }
@@ -140,7 +134,8 @@ if (result.errors.length) {
         }
-        result.code = await cssUtils_1.rewriteCssUrls(result.code, ctx.path);
-        processedCSS.set(ctx.path, {
-            css: result.code,
+        const res = {
+            css: await cssUtils_1.rewriteCssUrls(result.code, ctx.path),
             modules: result.modules
-        });
+        };
+        processedCSS.set(ctx.path, res);
+        return res;
     }
@@ -147,0 +142,0 @@ };

dist/node/server/serverPluginEsbuild.js

@@ -5,3 +5,3 @@ "use strict";
 const utils_1 = require("../utils");
-exports.esbuildPlugin = ({ app, config }) => {
+exports.esbuildPlugin = ({ app, config, resolver }) => {
     const jsxConfig = esbuildService_1.resolveJsxOptions(config.jsx);
@@ -17,3 +17,3 @@ app.use(async (ctx, next) => {
             const src = await utils_1.readBody(ctx.body);
-            const { code, map } = await esbuildService_1.transform(src, ctx.url, jsxConfig, config.jsx);
+            const { code, map } = await esbuildService_1.transform(src, resolver.requestToFile(ctx.url), jsxConfig, config.jsx);
             ctx.body = code;
@@ -20,0 +20,0 @@ if (map) {

dist/node/server/serverPluginHmr.js

@@ -54,3 +54,3 @@ "use strict";
             ctx.status = 200;
-            ctx.body = hmrClient;
+            ctx.body = hmrClient.replace(`__PORT__`, ctx.port.toString());
         }
@@ -166,3 +166,7 @@ else {
     for (const importer of importers) {
-        if (importer.endsWith('.vue') || isHmrAccepted(importer, importee)) {
+        if (importer.endsWith('.vue') ||
+            // explicitly accepted by this importer
+            isHmrAccepted(importer, importee) ||
+            // importer is a self accepting module
+            isHmrAccepted(importer, importer)) {
             // vue boundaries are considered dirty for the reload
@@ -204,3 +208,2 @@ if (importer.endsWith('.vue')) {
     let hasDeclined = false;
-    let importMetaConditional;
     const registerDep = (e) => {
@@ -289,6 +292,2 @@ const deps = ensureMapEntry(exports.hmrAcceptanceMap, importer);
             const isDevBlock = isMetaHot(node.test);
-            if (isDevBlock && !importMetaConditional) {
-                // remember the first occurrence of `if (import.meta.hot)`
-                importMetaConditional = node;
-            }
             if (node.consequent.type === 'BlockStatement') {
@@ -304,7 +303,5 @@ node.consequent.body.forEach((s) => checkStatements(s, false, isDevBlock));
     ast.forEach((s) => checkStatements(s, true, false));
-    if (importMetaConditional) {
-        // inject import.meta.hot
-        s.prependLeft(importMetaConditional.start, `import { createHotContext } from "${exports.hmrClientPublicPath}"; ` +
-            `import.meta.hot = createHotContext(${JSON.stringify(importer)}); `);
-    }
+    // inject import.meta.hot
+    s.prepend(`import { createHotContext } from "${exports.hmrClientPublicPath}"; ` +
+        `import.meta.hot = createHotContext(${JSON.stringify(importer)}); `);
     // clear decline state
@@ -311,0 +308,0 @@ if (!hasDeclined) {

dist/node/server/serverPluginModuleRewrite.js

@@ -81,8 +81,8 @@ "use strict";
         }
-        if (imports.length) {
+        const hasHMR = source.includes('import.meta.hot');
+        const hasEnv = source.includes('import.meta.env');
+        if (imports.length || hasHMR || hasEnv) {
             debug(`${importer}: rewriting`);
             const s = new magic_string_1.default(source);
             let hasReplaced = false;
-            let hasInjectedEnv = false;
-            let hasRewrittenForHMR = false;
             const prevImportees = serverPluginHmr_1.importeeMap.get(importer);
@@ -123,22 +123,17 @@ const currentImportees = new Set();
                 }
-                else {
-                    if (id === 'import.meta') {
-                        if (!hasRewrittenForHMR && source.slice(end, end + 4) === '.hot') {
-                            serverPluginHmr_1.debugHmr(`rewriting ${importer} for HMR.`);
-                            serverPluginHmr_1.rewriteFileWithHMR(root, source, importer, resolver, s);
-                            hasRewrittenForHMR = true;
-                            hasReplaced = true;
-                        }
-                        if (!hasInjectedEnv && source.slice(end, end + 4) === '.env') {
-                            s.prepend(`import __VITE_ENV__ from "${serverPluginEnv_1.envPublicPath}";\n` +
-                                `import.meta.env = __VITE_ENV__;\n`);
-                            hasInjectedEnv = true;
-                            hasReplaced = true;
-                        }
-                    }
-                    else {
-                        debug(`[vite] ignored dynamic import(${id})`);
-                    }
+                else if (id !== 'import.meta') {
+                    debug(`[vite] ignored dynamic import(${id})`);
                 }
             }
+            if (hasHMR) {
+                serverPluginHmr_1.debugHmr(`rewriting ${importer} for HMR.`);
+                serverPluginHmr_1.rewriteFileWithHMR(root, source, importer, resolver, s);
+                hasReplaced = true;
+            }
+            if (hasEnv) {
+                debug(`    injecting import.meta.env for ${importer}`);
+                s.prepend(`import __VITE_ENV__ from "${serverPluginEnv_1.envPublicPath}"; ` +
+                    `import.meta.env = __VITE_ENV__; `);
+                hasReplaced = true;
+            }
             // since the importees may have changed due to edits,
@@ -157,3 +152,3 @@ // check if we need to remove this importer from certain importees
             if (!hasReplaced) {
-                debug(`    no imports rewritten.`);
+                debug(`    nothing needs rewriting.`);
             }
@@ -160,0 +155,0 @@ return hasReplaced ? s.toString() : source;

dist/node/server/serverPluginSourceMap.d.ts

 import { ServerPlugin } from '.';
-export interface SourceMap {
-    version: number | string;
-    file: string;
-    sources: string[];
-    sourcesContent: string[];
-    names: string[];
-    mappings: string;
-}
+import { ExistingRawSourceMap } from 'rollup';
+import { RawSourceMap } from 'source-map';
+export declare type SourceMap = ExistingRawSourceMap | RawSourceMap;
 export declare function mergeSourceMap(oldMap: SourceMap | null | undefined, newMap: SourceMap): SourceMap;
 export declare const sourceMapPlugin: ServerPlugin;

dist/node/utils/cssUtils.d.ts

 import { SFCAsyncStyleCompileOptions, SFCStyleCompileResults } from '@vue/compiler-sfc';
 export declare const urlRE: RegExp;
 export declare const cssPreprocessLangRE: RegExp;
+export declare const cssModuleRE: RegExp;
 export declare const isCSSRequest: (file: string) => boolean;
@@ -5,0 +6,0 @@ declare type Replacer = (url: string) => string | Promise<string>;

dist/node/utils/cssUtils.js

@@ -14,2 +14,3 @@ "use strict";
 exports.cssPreprocessLangRE = /(.+)\.(less|sass|scss|styl|stylus|postcss)$/;
+exports.cssModuleRE = /(.+)\.module\.(less|sass|scss|styl|stylus|postcss|css)$/;
 exports.isCSSRequest = (file) => file.endsWith('.css') || exports.cssPreprocessLangRE.test(file);
@@ -16,0 +17,0 @@ function rewriteCssUrls(css, replacerOrBase) {

package.json

 {
   "name": "vite",
-  "version": "1.0.0-beta.8",
+  "version": "1.0.0-beta.9",
   "license": "MIT",
@@ -5,0 +5,0 @@ "author": "Evan You",

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

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

340174

increased by0.8%

Lines of code

6010

increased by0.25%

Number of medium supply chain risk alerts

6

decreased by-14.29%

No dependency changes