Socket
Socket
Sign inDemoInstall

@web/dev-server-rollup

Package Overview
Dependencies
Maintainers
7
Versions
81
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@web/dev-server-rollup - npm Package Compare versions

Comparing version 0.2.3 to 0.2.4

9

CHANGELOG.md
# @web/dev-server-rollup
## 0.2.4
### Patch Changes
- cd1213e: improved logging of resolving outside root dir
- Updated dependencies [cd1213e]
- @web/dev-server-core@0.2.6
- @web/test-runner-core@0.7.5
## 0.2.3

@@ -4,0 +13,0 @@

17

dist/rollupAdapter.js

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

},
async resolveImport({ source, context }) {
async resolveImport({ source, context, code, column, line }) {
var _a;

@@ -108,6 +108,13 @@ // if we just transformed this file and the import is an absolute file path

if (!path_1.default.normalize(resolvedImportPath).startsWith(rootDir)) {
throw new dev_server_core_1.PluginError(chalk_1.red(`Resolved an import to ${chalk_1.yellow(resolvedImportPath)}`) +
chalk_1.red('. This path is not reachable from the browser because') +
chalk_1.red(` it is outside root directory ${chalk_1.yellow(rootDir)}`) +
chalk_1.red(`. Configure the root directory using the ${chalk_1.yellow('--root-dir')} or ${chalk_1.yellow('rootDir')} option.`));
const errorMessage = chalk_1.red(`\n\nResolved ${chalk_1.cyanBright(source)} to ${chalk_1.cyanBright(resolvedImportPath)}.\n\n`) +
chalk_1.red('This path is not reachable from the browser because') +
chalk_1.red(` it is outside root directory ${chalk_1.cyanBright(rootDir)}\n\n`) +
chalk_1.red(`Configure the root directory using the ${chalk_1.cyanBright('--root-dir')}`) +
chalk_1.red(` flag or ${chalk_1.cyanBright('rootDir')} option.\n`);
if (typeof code === 'string' && typeof column === 'number' && typeof line === 'number') {
throw new dev_server_core_1.PluginSyntaxError(errorMessage, filePath, code, column, line);
}
else {
throw new dev_server_core_1.PluginError(errorMessage);
}
}

@@ -114,0 +121,0 @@ const resolveRelativeTo = path_1.default.extname(filePath) ? path_1.default.dirname(filePath) : filePath;

{
"name": "@web/dev-server-rollup",
"version": "0.2.3",
"version": "0.2.4",
"publishConfig": {

@@ -44,5 +44,5 @@ "access": "public"

"dependencies": {
"@web/dev-server-core": "^0.2.2",
"@web/dev-server-core": "^0.2.6",
"@web/test-runner-chrome": "^0.6.4",
"@web/test-runner-core": "^0.7.4",
"@web/test-runner-core": "^0.7.5",
"chalk": "^4.1.0",

@@ -49,0 +49,0 @@ "parse5": "^6.0.1",

# Dev Server Rollup
Use rollup plugins in web dev server and web test runner.
Adapter for using rollup plugins in web dev server and web test runner.
Web dev server plugins and rollup plugins share a very similar API, making it possible to reuse rollup plugins inside web dev server with an adapter.
Since the dev server doesn't run an actal rollup build, only rollup plugins which do single file transformations can be reused.
## Installation
```bash
npm i --save-dev @web/dev-server-rollup
```
## Usage
Import the rollup plugin and the `fromRollup` function in your configuration file. Then, wrap the rollup plugin with the adapter function:
```js
const rollupReplace = require('@rollup/plugin-replace');
const { fromRollup } = require('@web/dev-server-rollup');
const replace = fromRollup(rollupReplace);
module.exports = {
plugins: [replace({ include: ['src/**/*.js'], __environment__: '"development"' })],
};
```
## Performance
Some rollup plugins do expensive operations. During development, this matters a lot more than during a production build. You are therefore required to always set the `include` and/or `exclude` options on rollup plugins.
## non-standard file types
The rollup build process assumes that any imported files are are meant to be compiled to JS, web dev server serves many different kinds of files to the browser. If you are transforming a non-standard filetype to JS, for example .json files, you need to instruct the server to handle it as a JS file:
```js
const json = require('@rollup/plugin-json');
const { rollupAdapter } = require('@web/dev-server-rollup');
module.exports = {
mimeTypes: {
// serve all json files as js
'**/*.json': 'js',
// serve .module.css files as js
'**/*.module.css': 'js',
},
plugins: [rollupAdapter(json())],
};
```
## Compatibility with rollup plugins
Since es-dev-server doesn't do any bundling, only the following lifecycle hooks from rollup are called:
- options
- buildStart
- resolveId
- load
- transform
Plugins that use other lifecycle hooks are mostly build optimizations and are not interesting during development.
The following rollup plugins have been tested to work correctly:
- [@rollup/plugin-alias](https://github.com/rollup/plugins/tree/master/packages/alias)
- [@rollup/plugin-inject](https://github.com/rollup/plugins/tree/master/packages/inject)
- [@rollup/plugin-commonjs](https://github.com/rollup/plugins/tree/master/packages/commonjs)
- [@rollup/plugin-dsv](https://github.com/rollup/plugins/tree/master/packages/dsv)
- [@rollup/plugin-image](https://github.com/rollup/plugins/tree/master/packages/image)
- [@rollup/plugin-json](https://github.com/rollup/plugins/tree/master/packages/json)
- [@rollup/plugin-node-resolve](https://github.com/rollup/plugins/tree/master/packages/node-resolve)
- [@rollup/plugin-replace](https://github.com/rollup/plugins/tree/master/packages/replace)
- [@rollup/plugin-sucrase](https://github.com/rollup/plugins/tree/master/packages/sucrase)
The following rollup plugins don't work correctly at the moment:
- [@rollup/plugin-typescript](https://github.com/rollup/plugins/tree/master/packages/typescript). For compiling typescript we recommend [@web/dev-server-esbuild](https://github.com/modernweb-dev/web/tree/master/packages/dev-server-esbuild)
See [our website](https://modern-web.dev/docs/dev-server/plugins/rollup/) for full documentation.

@@ -22,3 +22,3 @@ /* eslint-disable no-control-regex */

import { InputOptions } from 'rollup';
import { red, yellow } from 'chalk';
import { red, cyanBright } from 'chalk';

@@ -79,3 +79,3 @@ import { toBrowserPath, isAbsoluteFilePath } from './utils';

async resolveImport({ source, context }) {
async resolveImport({ source, context, code, column, line }) {
// if we just transformed this file and the import is an absolute file path

@@ -152,12 +152,14 @@ // we need to rewrite it to a browser path

if (!path.normalize(resolvedImportPath).startsWith(rootDir)) {
throw new PluginError(
red(`Resolved an import to ${yellow(resolvedImportPath)}`) +
red('. This path is not reachable from the browser because') +
red(` it is outside root directory ${yellow(rootDir)}`) +
red(
`. Configure the root directory using the ${yellow('--root-dir')} or ${yellow(
'rootDir',
)} option.`,
),
);
const errorMessage =
red(`\n\nResolved ${cyanBright(source)} to ${cyanBright(resolvedImportPath)}.\n\n`) +
red('This path is not reachable from the browser because') +
red(` it is outside root directory ${cyanBright(rootDir)}\n\n`) +
red(`Configure the root directory using the ${cyanBright('--root-dir')}`) +
red(` flag or ${cyanBright('rootDir')} option.\n`);
if (typeof code === 'string' && typeof column === 'number' && typeof line === 'number') {
throw new PluginSyntaxError(errorMessage, filePath, code, column, line);
} else {
throw new PluginError(errorMessage);
}
}

@@ -164,0 +166,0 @@

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