@crxjs/vite-plugin 1.0.8 → 1.0.11

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @crxjs/vite-plugin
 
+## 1.0.11
+
+### Patch Changes
+
+- dc479d1: Fix global constant replacement in background
+
+## 1.0.10
+
+### Patch Changes
+
+- f35c49e: Update READMEs
+
+## 1.0.9
+
+### Patch Changes
+
+- 8941353: Remove & refactor use of fs-extra
+
 ## 1.0.8
 
 ### Patch Changes

package/README.md

@@ -1,74 +1,30 @@
-# [rollup-plugin-chrome-extension](https://www.extend-chrome.dev/rollup-plugin)
+# ![CRXJS](./banner-github.png)
 
-[![npm (scoped)](https://img.shields.io/npm/v/rollup-plugin-chrome-extension/beta.svg)](https://www.npmjs.com/package/rollup-plugin-chrome-extension)
-[![GitHub last commit](https://img.shields.io/github/last-commit/crxjs/rollup-plugin-chrome-extension.svg?logo=github)](https://github.com/crxjs/rollup-plugin-chrome-extension)
-![GitHub action badge](https://github.com/crxjs/rollup-plugin-chrome-extension/actions/workflows/vite-plugin.yml/badge.svg)
-[![TypeScript Declarations Included](https://img.shields.io/badge/types-TypeScript-informational)](#typescript)
+[![npm (scoped)](https://img.shields.io/npm/v/rollup-plugin-chrome-extension.svg)](https://www.npmjs.com/package/rollup-plugin-chrome-extension)
+[![GitHub last commit](https://img.shields.io/github/last-commit/crxjs/chrome-extension-tools.svg?logo=github)](https://github.com/crxjs/rollup-plugin-chrome-extension)
+![GitHub action badge](https://github.com/crxjs/chrome-extension-tools/actions/workflows/vite-plugin.yml/badge.svg)
 
-<a href="https://www.extend-chrome.dev/rollup-plugin" rel="noopener">
-  <img width=200px height=200px src="https://imgur.com/wEXnCYK.png" alt="rollup-plugin-chrome-extension logo"></a>
+## CRXJS Vite Plugin
 
-The bundler configuration for a Chrome Extension can be pretty complex. This
-plugin makes it simple.
+> Build a Chrome Extension with [Vite](https://vitejs.dev)⚡
 
-The manifest is front and center. Import your manifest to your config file and
-RPCE will do the rest.
+CRXJS brings the Vite developer experience to Chrome Extensions:
 
-RPCE simplifies project config and supports many of Vite's features in the
-Chrome Extension environment, including HMR.
+- True HMR for extension pages and content scripts
+- Simple config - everything is in the extension manifest
+- Static asset imports with automatic web-accessible resources
 
-## Vite Usage (beta)
+## Getting Started
 
-Vite support is in beta! Check out this
-[90 second getting started guide](https://dev.to/jacksteamdev/create-a-vite-react-chrome-extension-in-90-seconds-3df7).
+See the CRXJS documentation to
+[get started in 90 seconds 🚀](https://crxjs.dev/vite-plugin)
 
-```sh
-npm i rollup-plugin-chrome-extension@beta -D
-```
+## Supporting
 
-```javascript
-// vite.config.js
-
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import { crx } from 'rollup-plugin-chrome-extension'
-import manifest from './manifest.json'
-
-export default defineConfig({
-  plugins: [react(), crx({ manifest })],
-})
-```
-
-Just add new features to your manifest, and RPCE does the rest.
-
-## [Documentation for v3](https://www.extend-chrome.dev/rollup-plugin)
-
-We have
-[v3 boilerplates](https://www.extend-chrome.dev/rollup-plugin#chrome-extension-boilerplates)
-for [React JavaScript](https://github.com/crxjs/js-react-boilerplate),
-[React TypeScript](https://github.com/crxjs/ts-react-boilerplate) and
-[Svelte](https://github.com/kyrelldixon/svelte-tailwind-extension-boilerplate),
-as well as [instructions](https://www.extend-chrome.dev/rollup-plugin#usage) for
-setting up your project.
-
-See the [documentation](https://www.extend-chrome.dev/rollup-plugin) for usage
-and how to get started.
+If these plugins have helped you ship your product faster, please consider
+[sponsoring me](https://github.com/sponsors/jacksteamdev) on GitHub.
 
 ## Contributing
 
-Your help is super welcome!
-
-🎯 Ongoing development is for v4+ only.
-
-👀 Be sure to take a look at the issues before starting to work on a new
-feature.
-
-🙏 Please update the tests to cover bug fixes or new features.
-
-📕 Documentation for v4 has not yet begun, but you can open an issue for help.
-
-✨ If you enjoy using RPCE, please help spread the word!
-
-## Development
-
-This monorepo uses [pnpm](https://pnpm.io/).
+We encourage pull requests! This is a
+[pnpm monorepo](https://pnpm.io/workspaces), so use pnpm instead of Yarn or npm.

package/dist/index.cjs

@@ -8,16 +8,16 @@ var crypto = require('crypto');
 var debug$5 = require('debug');
 var fg = require('fast-glob');
 var v8 = require('v8');
-var fsExtra = require('fs-extra');
+var fs = require('fs');
 var MagicString = require('magic-string');
 var path = require('path');
+var fsExtra = require('fs-extra');
 var perf_hooks = require('perf_hooks');
 var colors = require('picocolors');
 var vite = require('vite');
 var module$1 = require('module');
 var cheerio = require('cheerio');
 var jsesc = require('jsesc');
-var fs = require('fs');
 var injector = require('connect-injector');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -43,8 +43,8 @@ function _interopNamespace(e) {
 var debug__default = /*#__PURE__*/_interopDefaultLegacy(debug$5);
 var fg__default = /*#__PURE__*/_interopDefaultLegacy(fg);
 var v8__default = /*#__PURE__*/_interopDefaultLegacy(v8);
-var fsExtra__default = /*#__PURE__*/_interopDefaultLegacy(fsExtra);
 var MagicString__default = /*#__PURE__*/_interopDefaultLegacy(MagicString);
+var fsExtra__default = /*#__PURE__*/_interopDefaultLegacy(fsExtra);
 var colors__default = /*#__PURE__*/_interopDefaultLegacy(colors);
 var jsesc__default = /*#__PURE__*/_interopDefaultLegacy(jsesc);
 var injector__default = /*#__PURE__*/_interopDefaultLegacy(injector);
@@ -218,6 +218,7 @@ const preambleId = "/crx-client-preamble";
 const stubId = "/crx-stub";
 const workerClientId = "/crx-client-worker";
 
+const { readFile: readFile$2 } = fs.promises;
 const debug$4 = _debug("file-writer").extend("chunks");
 for (const source of [viteClientId, customElementsId]) {
   setUrlMeta(sourceToUrlMeta(source));
@@ -292,7 +293,7 @@ const pluginFileWriterChunks = () => {
             this.emitFile({
               type: "asset",
               fileName: relative(server.config.root, file),
-              source: await fsExtra.readFile(file)
+              source: await readFile$2(file)
             });
         }
         if (url)
@@ -2304,6 +2305,7 @@ const pluginFileWriterHtml = () => {
   };
 };
 
+const { readFile: readFile$1 } = fs.promises;
 const pluginFileWriterPublic = () => {
   let config;
   return {
@@ -2317,7 +2319,7 @@ const pluginFileWriterPublic = () => {
         this.addWatchFile(config.publicDir);
         const publicFiles = await fg__default["default"](`${config.publicDir}/**/*`);
         for (const file of publicFiles) {
-          const source = await fsExtra.readFile(file);
+          const source = await readFile$1(file);
           const fileName = relative(config.publicDir, file);
           this.emitFile({ type: "asset", fileName, source });
         }
@@ -2328,8 +2330,8 @@ const pluginFileWriterPublic = () => {
 
 const _require = typeof require === "undefined" ? module$1.createRequire((typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('index.cjs', document.baseURI).href))) : require;
 const customElementsPath = _require.resolve(customElementsId);
-const customElementsCode = fsExtra.readFileSync(customElementsPath, "utf8");
-const customElementsMap = fsExtra.readFileSync(`${customElementsPath}.map`, "utf8");
+const customElementsCode = fs.readFileSync(customElementsPath, "utf8");
+const customElementsMap = fs.readFileSync(`${customElementsPath}.map`, "utf8");
 const pluginFileWriterPolyfill = () => {
   return {
     name: "crx:file-writer-polyfill",
@@ -2772,6 +2774,7 @@ const pluginHtmlAuditor = () => {
   };
 };
 
+const { readFile } = fs.promises;
 const pluginManifest = (_manifest) => () => {
   let manifest;
   let plugins;
@@ -2980,7 +2983,7 @@ Public dir: "${config.publicDir}"`);
             this.emitFile({
               type: "asset",
               fileName: f,
-              source: await fsExtra.readFile(filename)
+              source: await readFile(filename)
             });
           }
         }));
@@ -3509,7 +3512,9 @@ const pluginBackground = () => {
         if (this.meta.watchMode) {
           if (typeof port === "undefined")
             throw new Error("server port is undefined in watch mode");
-          loader = `import 'http://localhost:${port}${workerClientId}';
+          loader = `import 'http:/localhost:${port}/@vite/env';
+`;
+          loader += `import 'http://localhost:${port}${workerClientId}';
 `;
           if (worker)
             loader += `import 'http://localhost:${port}/${worker}';

package/dist/index.mjs

@@ -4,16 +4,16 @@ import { createHash as createHash$1 } from 'crypto';
 import debug$5 from 'debug';
 import fg from 'fast-glob';
 import v8 from 'v8';
-import fsExtra, { readFile, readFileSync } from 'fs-extra';
+import { promises, readFileSync, existsSync } from 'fs';
 import MagicString from 'magic-string';
 import { posix } from 'path';
+import fsExtra from 'fs-extra';
 import { performance } from 'perf_hooks';
 import colors from 'picocolors';
 import { createLogger } from 'vite';
 import { createRequire } from 'module';
 import { load } from 'cheerio';
 import jsesc from 'jsesc';
-import { existsSync } from 'fs';
 import injector from 'connect-injector';
 
 const _debug = (id) => debug$5("crx").extend(id);
@@ -185,6 +185,7 @@ const preambleId = "/crx-client-preamble";
 const stubId = "/crx-stub";
 const workerClientId = "/crx-client-worker";
 
+const { readFile: readFile$2 } = promises;
 const debug$4 = _debug("file-writer").extend("chunks");
 for (const source of [viteClientId, customElementsId]) {
   setUrlMeta(sourceToUrlMeta(source));
@@ -259,7 +260,7 @@ const pluginFileWriterChunks = () => {
             this.emitFile({
               type: "asset",
               fileName: relative(server.config.root, file),
-              source: await readFile(file)
+              source: await readFile$2(file)
             });
         }
         if (url)
@@ -2271,6 +2272,7 @@ const pluginFileWriterHtml = () => {
   };
 };
 
+const { readFile: readFile$1 } = promises;
 const pluginFileWriterPublic = () => {
   let config;
   return {
@@ -2284,7 +2286,7 @@ const pluginFileWriterPublic = () => {
         this.addWatchFile(config.publicDir);
         const publicFiles = await fg(`${config.publicDir}/**/*`);
         for (const file of publicFiles) {
-          const source = await readFile(file);
+          const source = await readFile$1(file);
           const fileName = relative(config.publicDir, file);
           this.emitFile({ type: "asset", fileName, source });
         }
@@ -2739,6 +2741,7 @@ const pluginHtmlAuditor = () => {
   };
 };
 
+const { readFile } = promises;
 const pluginManifest = (_manifest) => () => {
   let manifest;
   let plugins;
@@ -3476,7 +3479,9 @@ const pluginBackground = () => {
         if (this.meta.watchMode) {
           if (typeof port === "undefined")
             throw new Error("server port is undefined in watch mode");
-          loader = `import 'http://localhost:${port}${workerClientId}';
+          loader = `import 'http:/localhost:${port}/@vite/env';
+`;
+          loader += `import 'http://localhost:${port}${workerClientId}';
 `;
           if (worker)
             loader += `import 'http://localhost:${port}/${worker}';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crxjs/vite-plugin",
-  "version": "1.0.8",
+  "version": "1.0.11",
   "description": "Build Chrome Extensions with this Vite plugin.",
   "keywords": [
     "rollup-plugin",