@import-meta-env/unplugin - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

dist/index.js

@@ -486,3 +486,3 @@ var __create = Object.create;
 // package.json
-var version = "0.1.0";
+var version = "0.1.1";
 
@@ -647,10 +647,38 @@ // ../shared/constant.ts
 // src/index.ts
+var import_path2 = require("path");
+
+// src/webpack/import-meta-env-plugin.ts
+var import_webpack = require("webpack");
+var ImportMetaPlugin = class {
+  apply(compiler) {
+    const parserHandler = (parser) => {
+      parser.hooks.expression.for("import.meta.env").tap("ImportMetaPlugin", (expr) => {
+        const dep = new import_webpack.dependencies.ConstDependency(placeholder, expr.range);
+        dep.loc = expr.loc;
+        parser.state.module.addPresentationalDependency(dep);
+        return true;
+      });
+    };
+    compiler.hooks.compilation.tap({
+      name: "ImportMetaEnvPlugin",
+      before: "ImportMetaPlugin"
+    }, (_, { normalModuleFactory }) => {
+      normalModuleFactory.hooks.parser.for("javascript/auto").tap("ImportMetaPlugin", parserHandler);
+      normalModuleFactory.hooks.parser.for("javascript/esm").tap("ImportMetaPlugin", parserHandler);
+    });
+  }
+};
+
+// src/index.ts
 var createPlugin = (0, import_unplugin.createUnplugin)((options, meta) => {
   var _a, _b;
+  const debug = false;
+  debug && console.debug(options, meta);
   const envFilePath2 = (_a = options == null ? void 0 : options.env) != null ? _a : envFilePath;
   const envExampleFilePath2 = (_b = options == null ? void 0 : options.envExample) != null ? _b : envExampleFilePath;
   let env = {};
-  let isDev = false;
+  let shouldInlineEnv = options == null ? void 0 : options.shouldInlineEnv;
   let viteConfig;
   function loadProd(id) {
+    debug && console.debug("loadProd: ", id);
     if (id === virtualFile) {
@@ -682,2 +710,3 @@ const parsedExample = (() => {
   function transformDev(code, id) {
+    debug && console.debug("transformDev: ", id);
     if (id !== virtualFile && id.includes("node_modules") === false) {
@@ -697,2 +726,6 @@ switch (meta.framework) {
   function transformProd(code, id) {
+    debug && console.debug("transformProd: ", id);
+    debug && console.debug("=== code before ===");
+    debug && console.debug(code);
+    debug && console.debug("==================");
     if (id !== virtualFile && id.includes("node_modules") === false) {
@@ -710,2 +743,5 @@ if (isTransformingJs(code, id) || isTransformingSvelte(code, id)) {
     }
+    debug && console.debug("=== code after ===");
+    debug && console.debug(code);
+    debug && console.debug("==================");
     return code;
@@ -718,7 +754,9 @@ }
       apply(_, env2) {
-        isDev = env2.command === "serve";
+        debug && console.debug("apply");
+        shouldInlineEnv = shouldInlineEnv != null ? shouldInlineEnv : env2.command === "serve";
         return true;
       },
       config(config2) {
-        if (isDev) {
+        debug && console.debug("config:", config2);
+        if (shouldInlineEnv) {
         } else {
@@ -729,2 +767,3 @@ return mergeManualChunks2(config2);
       configResolved(_config) {
+        debug && console.debug("configResolved");
         if (_config.isProduction) {
@@ -740,2 +779,3 @@ } else {
       transformIndexHtml(html) {
+        debug && console.debug("transformIndexHtml");
         html = html.replace(new RegExp(uniqueVariableName, "g"), "import.meta.env");
@@ -747,3 +787,4 @@ return html;
       outputOptions(options2) {
-        if (isDev) {
+        debug && console.debug("rollup::outputOptions");
+        if (shouldInlineEnv) {
         } else {
@@ -754,4 +795,5 @@ return mergeManualChunks(options2);
       buildStart() {
-        isDev = process.env.NODE_ENV !== "production";
-        if (isDev) {
+        debug && console.debug("rollup::buildStart");
+        shouldInlineEnv = shouldInlineEnv != null ? shouldInlineEnv : process.env.NODE_ENV !== "production";
+        if (shouldInlineEnv) {
           env = resolveEnv({
@@ -764,6 +806,23 @@ envFilePath: envFilePath2,
     },
+    webpack: (compiler) => {
+      var _a2;
+      if (process.env.npm_package_devDependencies__vue_cli_service) {
+        compiler.options.plugins.push(new ImportMetaPlugin());
+      }
+      const mode = (_a2 = compiler.options.mode) != null ? _a2 : "production";
+      shouldInlineEnv = shouldInlineEnv != null ? shouldInlineEnv : mode !== "production";
+      if (shouldInlineEnv) {
+        env = resolveEnv({
+          envFilePath: envFilePath2,
+          envExampleFilePath: envExampleFilePath2
+        });
+      }
+    },
     buildStart() {
+      debug && console.debug("buildStart");
+      debug && console.debug("env:", env);
     },
     resolveId(id, importer) {
-      if (isDev) {
+      debug && console.debug("resolveId: ", id, importer);
+      if (shouldInlineEnv) {
       } else {
@@ -776,3 +835,4 @@ if (id === virtualFile) {
     load(id) {
-      if (isDev) {
+      debug && console.debug("load: ", id);
+      if (shouldInlineEnv) {
         return null;
@@ -784,6 +844,19 @@ } else {
     transformInclude(id) {
-      return true;
+      debug && console.debug("transformIncludes: ", id);
+      const allowExtensions = [
+        ".js",
+        ".ts",
+        ".jsx",
+        ".tsx",
+        ".vue",
+        ".svelte",
+        ".mjs",
+        ".cjs",
+        meta.framework !== "webpack" && ".html"
+      ].filter(Boolean);
+      return id.includes("node_modules") === false && allowExtensions.includes((0, import_path2.extname)(id));
     },
     transform(code, id) {
-      if (isDev) {
+      debug && console.debug("transform: ", id);
+      if (shouldInlineEnv) {
         return transformDev(code, id);
@@ -795,4 +868,5 @@ } else {
     buildEnd() {
+      debug && console.debug("buildEnd");
       const execCommand = getPackageManagerExecCommand();
-      if (isDev) {
+      if (shouldInlineEnv) {
       } else {
@@ -799,0 +873,0 @@ console.info([

dist/unplugin/src/types.d.ts

@@ -14,2 +14,16 @@ export interface PluginOptions {
     envExample?: string;
+    /**
+     * Explicity set whether to inline current environment variables into the code,
+     * instead of inject environment variables via `import-meta-env` later.
+     *
+     * This is useful if you want to use the plugin in unknown dev server environments
+     *
+     * @default
+     *
+     * true, "if running with `vite` or `vite dev`"
+     * true, "if webpack mode is NOT `production` or `undefined`"
+     * true, "if `NODE_ENV` is NOT `production`"
+     * false, "otherwise"
+     */
+    shouldInlineEnv?: boolean;
 }

package.json

 {
   "name": "@import-meta-env/unplugin",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Load environment variables into import.meta.env object",
@@ -52,3 +52,3 @@ "license": "MIT",
     "build": "rimraf dist bin && pnpm build-types && pnpm build-bundle",
-    "build-bundle": "esbuild src/index.ts --bundle --platform=node --target=node12 --external:unplugin --external:dotenv --outfile=dist/index.js && pnpm run patch-dist",
+    "build-bundle": "esbuild src/index.ts --bundle --platform=node --target=node12 --external:unplugin --external:dotenv --external:webpack --outfile=dist/index.js && pnpm run patch-dist",
     "build-types": "tsc -p . --emitDeclarationOnly --outDir dist",
@@ -59,3 +59,3 @@ "patch-dist": "ts-node ../../scripts/patchEsbuildDist.ts dist/index.js createPlugin",
   },
-  "readme": "# @import-meta-env/unplugin\n\n[![CI](https://github.com/iendeavor/import-meta-env/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/iendeavor/import-meta-env/actions/workflows/ci.yml)\n[![NPM version](https://img.shields.io/npm/v/@import-meta-env/unplugin.svg)](https://www.npmjs.com/package/@import-meta-env/unplugin)\n[![PRs Welcome](https://img.shields.io/badge/PRs-Welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)\n\nThis plugin helps us inject environment variables into the `import.meta.env` object **_after_** building the application instead of statically replacing it during production.\n\n<br>\n\nThis project use [SemVer](https://semver.org/) for versioning. For the versions available, see the tags on this repository.\n\n## Motivation\n\nEnvironment variables should be easy to change between deployments **_without_** rebuilding the application or even changing any code, so we should set environment variables on the system instead of checking them into a repository with `.env` files.\n\nDuring production, this plugin generates chunks with placeholders, which allow us to statically replace environment variables **_after_** building the application (don't worry, we provide an executable for this, you don't need to write them yourself) .\n\n## 🚀 Quick Start\n\nInstall and register the plugin:\n\n```sh\n$ npm i dotenv @import-meta-env/unplugin @import-meta-env/cli\n```\n\n<details>\n<summary>Vite</summary>\n\n```ts\n// vite.config.ts\nimport ImportMetaEnvPlugin from \"./@import-meta-env/unplugin\";\n\nexport default {\n  plugins: [\n    ImportMetaEnvPlugin.vite({\n      /* options */\n    }),\n  ],\n};\n```\n\n</details>\n\n<details>\n<summary>Rollup</summary>\n\n```js\n// rollup.config.js\nimport ImportMetaEnvPlugin from \"./@import-meta-env/unplugin\";\n\nexport default {\n  plugins: [\n    ImportMetaEnvPlugin.rollup({\n      /* options */\n    }),\n  ],\n};\n```\n\n</details>\n\n<details>\n<summary>Webpack</summary>\n\n```js\n// webpack.config.js\nmodule.exports = {\n  plugins: [\n    require(\"./@import-meta-env/unplugin\").webpack({\n      /* options */\n    }),\n  ],\n};\n```\n\n</details>\n\n<details>\n<summary>Esbuild</summary>\n\n```js\n// esbuild.config.js\nimport { build } from \"esbuild\";\n\nbuild({\n  plugins: [\n    require(\"./@import-meta-env/unplugin\").esbuild({\n      /* options */\n    }),\n  ],\n});\n```\n\n</details>\n\nCreate a `.env.example` file in the root of your project:\n\n```sh\n# .env.example\n# To prevent exposure of sensitive credentials to clients,\n# only the keys defined in this file can be accessed.\nS3_BUCKET=\n```\n\nAdd `.env` file to .gitignore, and create a `.env` file in the project's root directory:\n\n(⚠ This step is completely optional, you should set environment variables directly on your system if you can.)\n\n```sh\n# .env\nS3_BUCKET=\"YOURS3BUCKET\"\nSECRET_KEY=\"YOURSECRETKEYGOESHERE\"\n```\n\n`import.meta.env` now has the keys and values you defined on your system:\n\n```ts\nconsole.log(import.meta.env.S3_BUCKET); // \"YOURS3BUCKET\"\nconsole.log(import.meta.env[\"S3_BUCKET\"]); // \"YOURS3BUCKET\", dynamic key also works\nconsole.log(import.meta.env.SECRET_KEY); // undefined\n```\n\nFinally, before serving your application, remember to execute [`import-meta-env`](https://github.com/iendeavor/import-meta-env/tree/main/packages/cli#readme) binary to inject environment variables.\n\nAdjust the preview script in your package.json:\n\n```json\n{\n  \"scripts\": {\n    // If you have a `.env` file:\n    \"preview\": \"import-meta-env && vite preview\",\n    // If you don't have a `.env` file:\n    \"preview\": \"cross-env S3_BUCKET=YOURS3BUCKET import-meta-env && vite preview\"\n  }\n}\n```\n\nSee also:\n\n- [examples](./examples)\n- [@import-meta-env/babel](https://github.com/iendeavor/import-meta-env/tree/main/packages/babel) - Provide an approximation of this plugin's specific transformations when running the code in other environments, for example, running tests with a NodeJS based test runner.\n- [@import-meta-env/cli](https://github.com/iendeavor/import-meta-env/tree/main/packages/cli) - A binary package is used to inject environment variables into those placeholders.\n\n## 📖 API\n\nPlease see [types.ts](./src/types.ts)\n\n## 📝 License\n\nThis project is licensed under the MIT License - see the [LICENSE](./LICENSE) file for details\n"
+  "readme": "# @import-meta-env/unplugin\n\n[![CI](https://github.com/iendeavor/import-meta-env/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/iendeavor/import-meta-env/actions/workflows/ci.yml)\n[![NPM version](https://img.shields.io/npm/v/@import-meta-env/unplugin.svg)](https://www.npmjs.com/package/@import-meta-env/unplugin)\n[![PRs Welcome](https://img.shields.io/badge/PRs-Welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)\n\nThis plugin helps us inject environment variables into the `import.meta.env` object **_after_** building the application instead of statically replacing it during production.\n\n<br>\n\nThis project use [SemVer](https://semver.org/) for versioning. For the versions available, see the tags on this repository.\n\n## Motivation\n\nEnvironment variables should be easy to change between deployments **_without_** rebuilding the application or even changing any code, so we should set environment variables on the system instead of checking them into a repository with `.env` files.\n\nDuring production, this plugin generates chunks with placeholders, which allow us to statically replace environment variables **_after_** building the application (don't worry, we provide an executable for this, you don't need to write them yourself) .\n\n## 🚀 Quick Start\n\nInstall and register the plugin:\n\n```sh\n$ npm i dotenv @import-meta-env/unplugin @import-meta-env/cli\n```\n\n<details>\n<summary>Vite</summary>\n\n```ts\n// vite.config.ts\nimport ImportMetaEnvPlugin from \"./@import-meta-env/unplugin\";\n\nexport default {\n  plugins: [\n    ImportMetaEnvPlugin.vite({\n      /* options */\n    }),\n  ],\n};\n```\n\n</details>\n\n<details>\n<summary>Rollup</summary>\n\n```js\n// rollup.config.js\nimport ImportMetaEnvPlugin from \"./@import-meta-env/unplugin\";\n\nexport default {\n  plugins: [\n    ImportMetaEnvPlugin.rollup({\n      /* options */\n    }),\n  ],\n};\n```\n\n</details>\n\n<details>\n<summary>Webpack</summary>\n\n```js\n// webpack.config.js\nmodule.exports = {\n  plugins: [\n    require(\"./@import-meta-env/unplugin\").webpack({\n      /* options */\n    }),\n  ],\n};\n```\n\n</details>\n\n<details>\n<summary>Esbuild</summary>\n\n```js\n// esbuild.config.js\nimport { build } from \"esbuild\";\n\nbuild({\n  plugins: [\n    require(\"./@import-meta-env/unplugin\").esbuild({\n      /* options */\n    }),\n  ],\n});\n```\n\n</details>\n\nCreate a `.env.example` file in the root of your project:\n\n```sh\n# .env.example\n# To prevent exposure of sensitive credentials to clients,\n# only the keys defined in this file can be accessed.\nS3_BUCKET=\n```\n\nAdd `.env` file to .gitignore, and create a `.env` file in the project's root directory:\n\n(⚠ This step is completely optional, you should set environment variables directly on your system if you can.)\n\n```sh\n# .env\nS3_BUCKET=\"YOURS3BUCKET\"\nSECRET_KEY=\"YOURSECRETKEYGOESHERE\"\n```\n\n`import.meta.env` now has the keys and values you defined on your system:\n\n```ts\nconsole.log(import.meta.env.S3_BUCKET); // \"YOURS3BUCKET\"\nconsole.log(import.meta.env[\"S3_BUCKET\"]); // \"YOURS3BUCKET\", dynamic key also works\nconsole.log(import.meta.env.SECRET_KEY); // undefined\n```\n\nFinally, before serving your application, remember to execute [`import-meta-env`](https://github.com/iendeavor/import-meta-env/tree/main/packages/cli#readme) binary to inject environment variables, for example:\n\n```sh\n$ cross-env S3_BUCKET=YOURS3BUCKET import-meta-env && your-serve-script\n```\n\nSee also:\n\n- [examples](./examples)\n- [@import-meta-env/babel](https://github.com/iendeavor/import-meta-env/tree/main/packages/babel) - Provide an approximation of this plugin's specific transformations when running the code in other environments, for example, running tests with a NodeJS based test runner.\n- [@import-meta-env/cli](https://github.com/iendeavor/import-meta-env/tree/main/packages/cli) - A binary package is used to inject environment variables into those placeholders.\n\n## 📖 API\n\nPlease see [types.ts](./src/types.ts)\n\n## 📝 License\n\nThis project is licensed under the MIT License - see the [LICENSE](./LICENSE) file for details\n"
 }

README.md

@@ -124,15 +124,6 @@ # @import-meta-env/unplugin
 
-Finally, before serving your application, remember to execute [`import-meta-env`](https://github.com/iendeavor/import-meta-env/tree/main/packages/cli#readme) binary to inject environment variables.
+Finally, before serving your application, remember to execute [`import-meta-env`](https://github.com/iendeavor/import-meta-env/tree/main/packages/cli#readme) binary to inject environment variables, for example:
 
-Adjust the preview script in your package.json:
-
-```json
-{
-  "scripts": {
-    // If you have a `.env` file:
-    "preview": "import-meta-env && vite preview",
-    // If you don't have a `.env` file:
-    "preview": "cross-env S3_BUCKET=YOURS3BUCKET import-meta-env && vite preview"
-  }
-}
+```sh
+$ cross-env S3_BUCKET=YOURS3BUCKET import-meta-env && your-serve-script
 ```
@@ -139,0 +130,0 @@

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

46187

increased by7.85%

Number of package files

15

increased by7.14%

Lines of code

926

increased by10.77%

Worsened metrics

Number of lines in readme file

143

decreased by-5.92%

Number of low supply chain risk alerts

9

increased by12.5%

No dependency changes