paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 32 Packages Projects Releases Wiki Activity

Merge pull request #2704 from spotify/rugvip/files

Browse Source 
cli: add new rollup plugin for forwarding file imports
This commit is contained in:
Patrik Oldsberg
2020-10-02 18:27:38 +02:00
committed by GitHub
parent e3b602f961 978c98403f
commit 3af33eb045
5 changed files with 318 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/cli/package.json
+2 -1
View File
@@ -78,10 +78,10 @@
"rollup": "2.23.x",
"rollup-plugin-dts": "1.4.11",
"rollup-plugin-esbuild": "^2.0.0",
"rollup-plugin-image-files": "^1.4.2",
"rollup-plugin-peer-deps-external": "^2.2.2",
"rollup-plugin-postcss": "^3.1.1",
"rollup-plugin-typescript2": "^0.27.3",
"rollup-pluginutils": "^2.8.2",
"start-server-webpack-plugin": "^2.2.5",
"style-loader": "^1.2.1",
"sucrase": "^3.14.1",
@@ -114,6 +114,7 @@
"@types/webpack": "^4.41.7",
"@types/webpack-dev-server": "^3.10.0",
"del": "^5.1.0",
"mock-fs": "^4.13.0",
"nodemon": "^2.0.2",
"ts-node": "^8.6.2"
},
packages/cli/src/lib/builder/config.ts
+2 -2
View File
@@ -22,13 +22,13 @@ import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import postcss from 'rollup-plugin-postcss';
import esbuild from 'rollup-plugin-esbuild';
import imageFiles from 'rollup-plugin-image-files';
import svgr from '@svgr/rollup';
import dts from 'rollup-plugin-dts';
import json from '@rollup/plugin-json';
import yaml from '@rollup/plugin-yaml';
import { RollupOptions, OutputOptions } from 'rollup';
import { forwardFileImports } from './plugins';
import { BuildOptions, Output } from './types';
import { paths } from '../paths';
import { svgrTemplate } from '../svgrTemplate';
@@ -92,7 +92,7 @@ export const makeConfigs = async (
exclude: [/\/[^/]+\.(?:stories|test)\.[^/]+$/],
}),
postcss(),
imageFiles({
forwardFileImports({
exclude: /\.icon\.svg$/,
include: [/\.svg$/, /\.png$/, /\.gif$/, /\.jpg$/, /\.jpeg$/],
}),
packages/cli/src/lib/builder/plugins.test.ts
+178
View File
@@ -0,0 +1,178 @@
/*
* Copyright 2020 Spotify AB
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import fs from 'fs-extra';
import mockFs from 'mock-fs';
import {
NormalizedOutputOptions,
OutputAsset,
OutputChunk,
PluginContext,
} from 'rollup';
import { forwardFileImports } from './plugins';
const context = {
meta: {
rollupVersion: '0.0.0',
watchMode: false,
},
} as PluginContext;
describe('forwardFileImports', () => {
it('should be created', () => {
const plugin = forwardFileImports({ include: /\.png$/ });
expect(plugin.name).toBe('forward-file-imports');
});
it('should call through to original external option', () => {
const plugin = forwardFileImports({ include: /\.png$/ });
const external = jest.fn((id: string) => id.endsWith('external'));
const options = plugin.options?.call(context, { external })!;
if (typeof options.external !== 'function') {
throw new Error('options.external is not a function');
}
expect(external).toHaveBeenCalledTimes(0);
expect(options.external('./my-module', '/dev/src/index.ts', false)).toBe(
false,
);
expect(external).toHaveBeenCalledTimes(1);
expect(options.external('./my-external', '/dev/src/index.ts', false)).toBe(
true,
);
expect(external).toHaveBeenCalledTimes(2);
expect(options.external('./my-image.png', '/dev/src/index.ts', false)).toBe(
true,
);
expect(external).toHaveBeenCalledTimes(3);
expect(options.external('./my-image.png', '/dev/src/index.ts', true)).toBe(
true,
);
expect(external).toHaveBeenCalledTimes(4);
expect(() =>
(options as any).external('./my-image.png', undefined, false),
).toThrow('Unknown importer of file module ./my-image.png');
});
it('should handle original external array', () => {
const plugin = forwardFileImports({ include: /\.png$/ });
const options = plugin.options?.call(context, {
external: ['my-external'],
})!;
if (typeof options.external !== 'function') {
throw new Error('options.external is not a function');
}
expect(options.external('my-module', '/dev/src/index.ts', false)).toBe(
false,
);
expect(options.external('my-external', '/dev/src/index.ts', false)).toBe(
true,
);
expect(options.external('my-image.png', '/dev/src/index.ts', false)).toBe(
true,
);
});
describe('with mock fs', () => {
beforeEach(() => {
mockFs({
'/dev/src/my-module.ts': '',
'/dev/src/dir/my-image.png': 'my-image',
});
});
afterEach(() => {
mockFs.restore();
});
it('should extract files', async () => {
const plugin = forwardFileImports({ include: /\.png$/ });
const options = plugin.options?.call(context, {})!;
if (typeof options.external !== 'function') {
throw new Error('options.external is not a function');
}
expect(options.external('./my-module', '/dev/src/index.ts', false)).toBe(
false,
);
expect(
options.external('./my-image.png', '/dev/src/dir/index.ts', false),
).toBe(true);
const outPath = '/dev/dist/dir/my-image.png';
await expect(fs.pathExists(outPath)).resolves.toBe(false);
await plugin.generateBundle?.call(
context,
{ dir: '/dev/dist' } as NormalizedOutputOptions,
{
['index.js']: {
type: 'chunk',
facadeModuleId: '/dev/src/index.ts',
} as OutputChunk,
},
false, // isWrite = false -> no write
);
await expect(fs.pathExists(outPath)).resolves.toBe(false);
await plugin.generateBundle?.call(
context,
{ dir: '/dev/dist' } as NormalizedOutputOptions,
{
// output assets should not cause a write
['index.js']: { type: 'asset' } as OutputAsset,
// missing facadeModuleId should not cause a write either
['index2.js']: { type: 'chunk' } as OutputChunk,
},
true,
);
await expect(fs.pathExists(outPath)).resolves.toBe(false);
// output chunk + isWrite -> generate files
await plugin.generateBundle?.call(
context,
{ dir: '/dev/dist' } as NormalizedOutputOptions,
{
['index.js']: {
type: 'chunk',
facadeModuleId: '/dev/src/index.ts',
} as OutputChunk,
},
true,
);
await expect(fs.pathExists(outPath)).resolves.toBe(true);
// should not break when triggering another write
await plugin.generateBundle?.call(
context,
{ file: '/dev/dist/my-output.js' } as NormalizedOutputOptions,
{
['index.js']: {
type: 'chunk',
facadeModuleId: '/dev/src/index.ts',
} as OutputChunk,
},
true,
);
});
});
});
packages/cli/src/lib/builder/plugins.ts
+135
View File
@@ -0,0 +1,135 @@
/*
* Copyright 2020 Spotify AB
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import fs from 'fs-extra';
import {
dirname,
resolve as resolvePath,
relative as relativePath,
} from 'path';
import { createFilter } from 'rollup-pluginutils';
import { Plugin, InputOptions, OutputChunk } from 'rollup';
type ForwardFileImportsOptions = {
include: Array<string | RegExp> | string | RegExp | null;
exclude?: Array<string | RegExp> | string | RegExp | null;
};
/**
* This rollup plugin leaves all encountered asset imports as-is, but
* copies the imported files into the output directory.
*
* For example `import ImageUrl from './my-image.png'` inside `src/MyComponent` will
* cause `src/MyComponent/my-image.png` to be copied to the output directory at the
* path `dist/MyComponent/my-image.png`. The import itself will stay, but be resolved,
* resulting in something like `import ImageUrl from './MyComponent/my-image.png'`
*/
export function forwardFileImports(options: ForwardFileImportsOptions): Plugin {
const filter = createFilter(options.include, options.exclude);
// We collect the absolute paths to all files we want to bundle into the
// output dir here. Resolving to relative paths in the output dir happens later.
const exportedFiles = new Set<string>();
// We keep track of output directories that we've already copied files
// into, so that we don't duplicate that work
const generatedFor = new Set<string>();
return {
name: 'forward-file-imports',
async generateBundle(outputOptions, bundle, isWrite) {
if (!isWrite) {
return;
}
const dir = outputOptions.dir || dirname(outputOptions.file!);
if (generatedFor.has(dir)) {
return;
}
for (const output of Object.values(bundle)) {
if (output.type !== 'chunk') {
continue;
}
const chunk = output as OutputChunk;
// This'll be an absolute path pointing to the initial index file of the
// build, and we use it to find the location of the `src` dir
if (!chunk.facadeModuleId) {
continue;
}
generatedFor.add(dir);
// We're assuming that the index file is at the root of the source dir, and
// that all assets exist within that dir.
const srcRoot = dirname(chunk.facadeModuleId);
// Copy all the files we found into the dist dir
await Promise.all(
Array.from(exportedFiles).map(async exportedFile => {
const outputPath = relativePath(srcRoot, exportedFile);
const targetFile = resolvePath(dir, outputPath);
await fs.ensureDir(dirname(targetFile));
await fs.copyFile(exportedFile, targetFile);
}),
);
return;
}
},
options(inputOptions) {
const origExternal = inputOptions.external;
// We decorate any existing `external` option with our own way of determining
// if a module should be external. The can't use `resolveId`, since asset files
// aren't passed there, might be some better way to do this though.
const external: InputOptions['external'] = (id, importer, isResolved) => {
// Call to inner external option
if (
typeof origExternal === 'function' &&
origExternal(id, importer, isResolved)
) {
return true;
}
if (Array.isArray(origExternal) && origExternal.includes(id)) {
return true;
}
// The piece that we're adding
if (!filter(id)) {
return false;
}
// Sanity check, dunno if this can happen
if (!importer) {
throw new Error(`Unknown importer of file module ${id}`);
}
// Resolve relative imports to the full file URL, for deduping and copying later
const fullId = isResolved ? id : resolvePath(dirname(importer), id);
exportedFiles.add(fullId);
// Treating this module as external from here, meaning rollup won't try to
// put it in the output bundle, but still keep track of the relative imports
// as needed in the output code.
return true;
};
return { ...inputOptions, external };
},
};
}