@rollup-extras/plugin-script-loader 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Konstantin Shutkin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,313 @@
+# Plugin Script Loader
+
+Rollup plugin to mimic Webpack's `script-loader` inline behavior. Inlines raw scripts into the bundle in import order, or emits them as a separate asset file for non-module, non-strict mode execution.
+
+[Changelog](./CHANGELOG.md)
+
+## Installation
+
+Using npm:
+
+```
+npm install --save-dev @rollup-extras/plugin-script-loader
+```
+
+## The Problem
+
+In legacy codebases using libraries like d3 or AngularJS, you need to:
+
+- Load scripts in a **stable, deterministic order** (e.g., d3 before d3 plugins, AngularJS before Angular modules)
+- **Concatenate** everything into a single bundle
+- Pass all code through the **optimization layer** (terser) — not hidden inside `eval()` strings
+- Support **legacy libraries** that aren't proper ES modules
+- Optionally, run legacy code in **sloppy mode** (non-strict) outside the main ES module bundle
+
+In Webpack, this is solved with `script-loader`:
+
+```javascript
+import "script-loader!d3";
+import "script-loader!d3-plugin1";
+import "script-loader!angular";
+import "script-loader!angular-route";
+```
+
+This plugin brings the same pattern to Rollup.
+
+## How It Works
+
+The plugin intercepts imports that start with a configurable prefix (`script!` by default), resolves the underlying module, and processes it based on the `emit` option:
+
+- **`emit: 'inline'`** (default) — Inlines the raw source code directly into the bundle at the import site
+- **`emit: 'asset'`** — Collects all scripts and emits them as a separate concatenated asset file
+
+Because the code is handled as real JavaScript (not wrapped in `eval()` or `new Function()`), it:
+
+- Preserves **import order** — scripts appear exactly as imported
+- Is fully visible to **terser** and other optimization plugins
+- Gets **concatenated** into a single output
+- Is **CSP-safe** — no dynamic code evaluation
+
+## Example: Inline Mode (Default)
+
+```javascript
+import scriptLoader from "@rollup-extras/plugin-script-loader";
+
+export default {
+  input: "src/index.js",
+
+  output: {
+    format: "iife",
+    file: "dist/bundle.js",
+  },
+
+  plugins: [scriptLoader()],
+};
+```
+
+In your entry point:
+
+```javascript
+// Legacy libraries — inlined in this exact order
+import "script!d3";
+import "script!d3-tip";
+import "script!angular";
+import "script!angular-route";
+import "script!angular-sanitize";
+
+// Your application code (regular ES module imports)
+import { app } from "./app.js";
+
+app.init();
+```
+
+## Example: Asset Mode (Emit Separate File)
+
+For legacy code that must run in true sloppy (non-strict) mode, use `emit: 'asset'` to emit a separate classic script file:
+
+```javascript
+import scriptLoader from "@rollup-extras/plugin-script-loader";
+
+export default {
+  input: "src/index.js",
+
+  output: {
+    format: "es",
+    dir: "dist",
+    sourcemap: true,
+  },
+
+  plugins: [
+    scriptLoader({
+      emit: "asset",
+      name: "vendor.js",
+      sourcemap: true,
+    }),
+  ],
+};
+```
+
+This emits `vendor.js` as a separate asset file containing all concatenated scripts. Include it in your HTML before the main bundle:
+
+```html
+<script src="vendor.js"></script>
+<script src="main.js" type="module"></script>
+```
+
+### With Content Hashing
+
+To let Rollup apply its `assetFileNames` pattern for content hashing:
+
+```javascript
+scriptLoader({
+  emit: "asset",
+  name: "vendor.js",
+  exactFileName: false, // Use Rollup's assetFileNames pattern
+});
+```
+
+With `output.assetFileNames: 'assets/[name].[hash].[ext]'`, this outputs `assets/vendor.abc123.js`.
+
+### With Minification
+
+Provide a custom `minify` function to minify the concatenated output:
+
+```javascript
+import { minify } from "terser";
+
+scriptLoader({
+  emit: "asset",
+  name: "vendor.js",
+  minify: async (code, map) => {
+    const result = await minify(code, {
+      sourceMap: map ? { content: map } : false,
+    });
+    return { code: result.code, map: result.map };
+  },
+});
+```
+
+Or with oxc-minify:
+
+```javascript
+import { minify } from "oxc-minify";
+
+scriptLoader({
+  emit: "asset",
+  minify: async (code) => {
+    const result = await minify("vendor.js", code);
+    return { code: result.code, map: result.map };
+  },
+});
+```
+
+### Integration with plugin-html
+
+Use with `@rollup-extras/plugin-html` to automatically inject the vendor bundle:
+
+```javascript
+import scriptLoader from "@rollup-extras/plugin-script-loader";
+import html from "@rollup-extras/plugin-html";
+import {
+  simpleES5Script,
+  combineAssetFactories,
+} from "@rollup-extras/plugin-html/asset-factories";
+
+export default {
+  input: "src/main.js",
+  output: {
+    format: "es",
+    dir: "dist",
+    sourcemap: true,
+    assetFileNames: "assets/[name].[hash].[ext]",
+  },
+  plugins: [
+    scriptLoader({
+      emit: "asset",
+      name: "vendor.js",
+      exactFileName: false,
+      sourcemap: true,
+    }),
+
+    html({
+      template: "index.html",
+      assetsFactory: combineAssetFactories(
+        simpleES5Script(/vendor\..*\.js$/) // Inject vendor as classic script
+      ),
+    }),
+  ],
+};
+```
+
+## Configuration
+
+```typescript
+type ScriptLoaderPluginOptions = {
+  // Existing options
+  prefix?: string; // 'script!' by default
+  useStrict?: boolean; // true by default (for inline mode)
+  pluginName?: string; // '@rollup-extras/plugin-script-loader' by default
+  verbose?: boolean; // false by default
+
+  // Emit mode options
+  emit?: "inline" | "asset"; // 'inline' by default
+  name?: string; // 'vendor.js' by default
+  exactFileName?: boolean; // true by default
+  sourcemap?: boolean; // true by default when emit: 'asset'
+  minify?: (
+    code: string,
+    sourcemap?: SourceMap
+  ) => Promise<{ code: string; map?: SourceMap }>;
+};
+```
+
+### `emit`
+
+- **`'inline'`** (default) — Scripts are inlined into the main bundle (current behavior)
+- **`'asset'`** — Scripts are concatenated and emitted as a separate asset file
+
+### `name`
+
+Base name for the emitted asset file. Only used when `emit: 'asset'`.
+
+Default: `'vendor.js'`
+
+### `exactFileName`
+
+Controls how the asset filename is determined. Only used when `emit: 'asset'`.
+
+- **`true`** (default) — Uses Rollup's `fileName` property; asset emitted with exact name (e.g., `vendor.js`)
+- **`false`** — Uses Rollup's `name` property; Rollup applies `output.assetFileNames` pattern (e.g., `assets/vendor.abc123.js`)
+
+### `sourcemap`
+
+Whether to generate sourcemaps for the emitted asset. Only used when `emit: 'asset'`.
+
+Default: `true` when `emit: 'asset'`
+
+When enabled, generates a concatenated sourcemap (`vendor.js.map`) pointing back to original source files.
+
+### `minify`
+
+Optional async function to minify the concatenated code. Only used when `emit: 'asset'`.
+
+Receives the code and optionally the sourcemap, returns minified code and optionally a new sourcemap.
+
+### `useStrict`
+
+Controls whether the inlined script is parsed in strict mode or sloppy (non-strict) mode. Only applies to `emit: 'inline'` mode.
+
+- **`true`** (default) — appends `export {}` to the loaded code, which makes Rollup's parser treat the file as an ES module (strict mode)
+- **`false`** — does not append `export {}`, so the parser uses script (sloppy) mode
+
+```javascript
+// Sloppy mode for legacy libraries that break under strict parsing
+scriptLoader({ useStrict: false });
+```
+
+> **Note:** `useStrict` only controls _parse-time_ mode. For the output to actually run in non-strict mode at runtime, you also need `output.strict: false` in your Rollup config (applies to `iife`, `cjs`, and `umd` formats). The `es` format is always strict per spec. For true sloppy mode at runtime, use `emit: 'asset'` instead.
+
+### `prefix`
+
+The import prefix that triggers script loading.
+
+Default: `'script!'`
+
+For Webpack migration compatibility:
+
+```javascript
+scriptLoader({ prefix: "script-loader!" });
+```
+
+### `verbose`
+
+Enables detailed logging of processed scripts.
+
+Default: `false`
+
+## Notes
+
+### Global Scope
+
+With `format: 'iife'`, all inlined code shares the same function scope. Libraries that explicitly assign to `window` (e.g., `window.d3 = ...`, `window.angular = ...`) work correctly.
+
+With `emit: 'asset'`, the emitted file runs as a classic script in true global scope — ideal for legacy libraries.
+
+### Works With node-resolve
+
+The plugin delegates module resolution to other plugins via Rollup's `this.resolve()`. This means `script!d3` will be resolved by `@rollup/plugin-node-resolve` (if present) just like a regular import — picking up the file from `node_modules`.
+
+### Works With terser
+
+Since the code is handled as real JavaScript, `@rollup/plugin-terser` can process inline mode output. For asset mode, use the `minify` option to apply minification to the concatenated output.
+
+### Watch Mode
+
+The plugin properly clears its state between builds, fully supporting Rollup's watch mode.
+
+## Prior Art
+
+- [script-loader](https://github.com/webpack-contrib/script-loader) (Webpack, deprecated)
+
+# License
+
+[MIT](https://github.com/kshutkin/rollup-extras/blob/main/LICENSE)

package/index.d.ts

@@ -0,0 +1,27 @@
+declare module '@rollup-extras/plugin-script-loader' {
+	import type { Plugin, SourceMap } from 'rollup';
+	export default function _default(options?: ScriptLoaderPluginOptions): Plugin;
+	export type ScriptLoaderPluginOptions = {
+		prefix?: string;
+		useStrict?: boolean;
+		pluginName?: string;
+		verbose?: boolean;
+		emit?: "inline" | "asset";
+		name?: string;
+		exactFileName?: boolean;
+		sourcemap?: boolean;
+		minify?: (code: string, sourcemap?: SourceMap) => Promise<{
+			code: string;
+			map?: SourceMap;
+		}>;
+	};
+	export type ScriptEntry = {
+		filePath: string;
+		code: string;
+		originalMap?: SourceMap;
+	};
+
+	export {};
+}
+
+//# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -0,0 +1,9 @@
+{
+  "version": 3,
+  "file": "index.d.ts",
+  "names": [],
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "ignoreList": []
+}

package/index.js

@@ -0,0 +1,267 @@
+import { readFile } from 'node:fs/promises';
+import { basename } from 'node:path';
+
+import MagicString, { Bundle } from 'magic-string';
+
+import { LogLevel } from '@niceties/logger';
+import logger from '@rollup-extras/utils/logger';
+import { getOptionsObject } from '@rollup-extras/utils/options';
+import statistics from '@rollup-extras/utils/statistics';
+
+const scriptPrefix = '\0script-loader:';
+
+const factories = { logger };
+
+export default function (options = {}) {
+    const normalizedOptions = getOptionsObject(
+        options,
+        {
+            pluginName: '@rollup-extras/plugin-script-loader',
+            prefix: 'script!',
+            useStrict:  (true),
+            verbose:  (false),
+            emit:  ('inline'),
+            name: 'vendor.js',
+            exactFileName:  (true),
+            sourcemap:  (undefined),
+            minify:  (
+                undefined
+            ),
+        },
+        factories
+    );
+
+    const { pluginName, prefix, useStrict, verbose, logger, emit, name, exactFileName, minify } = normalizedOptions;
+
+    const sourcemap = normalizedOptions.sourcemap ?? emit === 'asset';
+
+    const statisticsCollector = statistics(
+        false,
+        ( result) => `inlined ${typeof result === 'number' ? `${result} scripts` : result.join(', ')}`
+    );
+
+    const scripts = new Map();
+
+    const importOrder = [];
+
+    async function tryReadSourcemap(filePath, code) {
+
+        const inlineMatch = code.match(
+            /\/\/[#@]\s*sourceMappingURL=data:application\/json;(?:charset=utf-8;)?base64,([A-Za-z0-9+/=]+)\s*$/
+        );
+        if (inlineMatch) {
+            try {
+                const decoded = Buffer.from(inlineMatch[1], 'base64').toString('utf8');
+                return JSON.parse(decoded);
+            } catch {
+
+            }
+        }
+
+        const externalMatch = code.match(/\/\/[#@]\s*sourceMappingURL=(.+?)\s*$/);
+        if (externalMatch && !externalMatch[1].startsWith('data:')) {
+            try {
+                const mapPath = `${filePath}.map`;
+                const mapContent = await readFile(mapPath, 'utf8');
+                return JSON.parse(mapContent);
+            } catch {
+
+            }
+        }
+
+        return undefined;
+    }
+
+    function stripSourcemapComment(code) {
+        return code.replace(/\n?\/\/[#@]\s*sourceMappingURL=.+?\s*$/, '');
+    }
+
+    return  ({
+        name: pluginName,
+
+        async resolveId(source, importer, resolveOptions) {
+            if (!source.startsWith(prefix)) {
+                return null;
+            }
+
+            const bareSpecifier = source.slice(prefix.length);
+
+            const resolved = await this.resolve(bareSpecifier, importer, { ...resolveOptions, skipSelf: true });
+
+            if (!resolved) {
+                this.warn(`Could not resolve "${bareSpecifier}" (from "${source}")`);
+                return null;
+            }
+
+            let resolvedPath = resolved.id;
+            if (resolvedPath.startsWith('\0')) {
+                resolvedPath = resolvedPath.slice(1);
+            }
+            const queryIndex = resolvedPath.indexOf('?');
+            if (queryIndex !== -1) {
+                resolvedPath = resolvedPath.slice(0, queryIndex);
+            }
+
+            const virtualId = scriptPrefix + resolvedPath;
+
+            return {
+                id: virtualId,
+                moduleSideEffects: true,
+            };
+        },
+
+        moduleParsed(moduleInfo) {
+            if (emit !== 'asset') {
+                return;
+            }
+
+            for (const importedId of moduleInfo.importedIds) {
+                if (importedId.startsWith(scriptPrefix) && !importOrder.includes(importedId)) {
+                    importOrder.push(importedId);
+                }
+            }
+        },
+
+        async load(id) {
+            if (!id.startsWith(scriptPrefix)) {
+                return null;
+            }
+
+            const realPath = id.slice(scriptPrefix.length);
+
+            this.addWatchFile(realPath);
+
+            logger.start('inlining scripts', verbose ? LogLevel.info : LogLevel.verbose);
+
+            const code = (await readFile(realPath)).toString();
+
+            const shortName =  (realPath.split('/').pop());
+            if (verbose) {
+                logger(`\t${realPath}`, LogLevel.info);
+            }
+            statisticsCollector(shortName);
+
+            logger.finish( (statisticsCollector()));
+
+            if (emit === 'asset') {
+
+                const originalMap = sourcemap ? await tryReadSourcemap(realPath, code) : undefined;
+                const cleanCode = stripSourcemapComment(code);
+
+                scripts.set(id, {
+                    filePath: realPath,
+                    code: cleanCode,
+                    originalMap,
+                });
+
+                return {
+                    code: `/* [script-loader] externalized: ${realPath} */\n`,
+                    map: null,
+                    moduleSideEffects: true,
+                };
+            }
+
+            return {
+                code: useStrict ? `${code}\nexport {}\n` : code,
+                map: null,
+                moduleSideEffects: true,
+            };
+        },
+
+        async generateBundle(_outputOptions, bundle) {
+            if (emit !== 'asset' || scripts.size === 0) {
+                return;
+            }
+
+            const sortedEntries = Array.from(scripts.entries())
+                .sort(([idA], [idB]) => {
+                    const orderA = importOrder.indexOf(idA);
+                    const orderB = importOrder.indexOf(idB);
+
+                    if (orderA !== -1 && orderB !== -1) {
+                        return orderA - orderB;
+                    }
+                    if (orderA !== -1) return -1;
+                    if (orderB !== -1) return 1;
+                    return 0;
+                })
+                .map(([, entry]) => entry);
+
+            const magicBundle = new Bundle({ separator: '\n' });
+
+            for (const entry of sortedEntries) {
+                const ms = new MagicString(entry.code, {
+                    filename: entry.filePath,
+                });
+
+                magicBundle.addSource({
+                    filename: entry.filePath,
+                    content: ms,
+                });
+            }
+
+            let concatenatedCode = magicBundle.toString();
+
+            let generatedMap;
+
+            if (sourcemap) {
+                generatedMap =  (
+                    magicBundle.generateMap({
+                        file: name,
+                        source: name,
+                        includeContent: true,
+                        hires: true,
+                    })
+                );
+            }
+
+            if (minify) {
+                try {
+                    const minified = await minify(concatenatedCode, generatedMap);
+                    concatenatedCode = minified.code;
+                    if (minified.map) {
+                        generatedMap = minified.map;
+                    }
+                } catch (err) {
+                    this.error(`Minification failed: ${err instanceof Error ? err.message : String(err)}`);
+                }
+            }
+
+            const assetRefId = this.emitFile({
+                type: 'asset',
+                [exactFileName ? 'fileName' : 'name']: name,
+                source: concatenatedCode,
+            });
+
+            const finalFileName = this.getFileName(assetRefId);
+
+            if (sourcemap && generatedMap) {
+
+                const mapFileName = `${finalFileName}.map`;
+
+                generatedMap.file = basename(finalFileName);
+
+                this.emitFile({
+                    type: 'asset',
+                    fileName: mapFileName,
+                    source: JSON.stringify(generatedMap),
+                });
+
+                const bundleEntry = bundle[finalFileName];
+                if (bundleEntry && bundleEntry.type === 'asset' && typeof bundleEntry.source === 'string') {
+                    bundleEntry.source += `\n//# sourceMappingURL=${basename(mapFileName)}`;
+                }
+            }
+
+            if (verbose) {
+                const fileList = sortedEntries.map(e => basename(e.filePath)).join(', ');
+                logger(`emitted ${name} containing: ${fileList}`, LogLevel.info);
+            }
+        },
+
+        closeBundle() {
+            scripts.clear();
+            importOrder.length = 0;
+        },
+    });
+}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "version": "0.1.0",
+  "license": "MIT",
+  "name": "@rollup-extras/plugin-script-loader",
+  "author": "Konstantin Shutkin",
+  "type": "module",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./index.js",
+  "module": "./index.js",
+  "engines": {
+    "node": ">=22"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kshutkin/rollup-extras.git",
+    "directory": "plugin-script-loader"
+  },
+  "bugs": "https://github.com/kshutkin/rollup-extras/issues",
+  "homepage": "https://github.com/kshutkin/rollup-extras/blob/main/plugin-script-loader/README.md",
+  "readme": "README.md",
+  "description": "Rollup plugin to mimic Webpack's script-loader inline behavior. Inlines raw scripts into the bundle in import order, enabling legacy library loading with stable ordering, terser optimization and concatenation.",
+  "keywords": [
+    "rollup-plugin",
+    "script-loader",
+    "legacy",
+    "inline",
+    "concatenation"
+  ],
+  "dependencies": {
+    "@niceties/logger": "^2.1.0",
+    "magic-string": "^0.30.21",
+    "@rollup-extras/utils": "^2.0.0"
+  },
+  "peerDependencies": {
+    "rollup": "^4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "rollup": {
+      "optional": true
+    }
+  }
+}