add alias support to externals

changelog.md

@@ -25,7 +25,8 @@
   ([#61](https://github.com/feltcoop/gro/pull/61),
   [#71](https://github.com/feltcoop/gro/pull/71),
   [#76](https://github.com/feltcoop/gro/pull/76),
-  [#81](https://github.com/feltcoop/gro/pull/81))
+  [#81](https://github.com/feltcoop/gro/pull/81),
+  [#88](https://github.com/feltcoop/gro/pull/88))
 - make `createBuilder` pluggable allowing users to provide a compiler for each file
   ([#57](https://github.com/feltcoop/gro/pull/57))
 - rename `compiler` to `builder`

package.json

@@ -62,6 +62,7 @@
     "fs-extra": "^9.0.1",
     "kleur": "^4.1.3",
     "mri": "^1.1.6",
+    "path-browserify": "^1.0.1",
     "prettier": "^2.1.2",
     "prettier-plugin-svelte": "^1.4.0",
     "rollup": "^2.37.1",

src/build/Filer.ts

@@ -35,6 +35,8 @@ import {loadContents} from './load.js';
 import {isExternalBrowserModule} from '../utils/module.js';
 import {wrap} from '../utils/async.js';
 import {
+	DEFAULT_EXTERNALS_ALIASES,
+	ExternalsAliases,
 	EXTERNALS_SOURCE_ID,
 	getExternalsBuilderState,
 	getExternalsBuildState,
@@ -64,10 +66,11 @@ export type FilerFile = SourceFile | BuildFile; // TODO or `Directory`?
 export interface Options {
 	dev: boolean;
 	builder: Builder | null;
-	sourceDirs: string[];
-	servedDirs: ServedDir[];
 	buildConfigs: BuildConfig[] | null;
 	buildDir: string;
+	sourceDirs: string[];
+	servedDirs: ServedDir[];
+	externalsAliases: ExternalsAliases;
 	mapDependencyToSourceId: MapDependencyToSourceId;
 	sourceMap: boolean;
 	target: EcmaScriptTarget;
@@ -125,6 +128,7 @@ export const initOptions = (opts: InitialOptions): Options => {
 	return {
 		dev,
 		mapDependencyToSourceId,
+		externalsAliases: DEFAULT_EXTERNALS_ALIASES,
 		sourceMap: true,
 		target: DEFAULT_ECMA_SCRIPT_TARGET,
 		watch: true,
@@ -158,6 +162,7 @@ export class Filer implements BuildContext {
 	readonly sourceMap: boolean;
 	readonly target: EcmaScriptTarget; // TODO shouldn't build configs have this?
 	readonly servedDirs: readonly ServedDir[];
+	readonly externalsAliases: ExternalsAliases; // TODO should this allow aliasing anything? not just externals?
 	readonly state: BuilderState = {};
 	readonly buildingSourceFiles: Set<string> = new Set(); // needed by hacky externals code, used to check if the filer is busy
 
@@ -170,6 +175,7 @@ export class Filer implements BuildContext {
 			mapDependencyToSourceId,
 			sourceDirs,
 			servedDirs,
+			externalsAliases,
 			sourceMap,
 			target,
 			watch,
@@ -180,6 +186,7 @@ export class Filer implements BuildContext {
 		this.buildConfigs = buildConfigs;
 		this.buildDir = buildDir;
 		this.mapDependencyToSourceId = mapDependencyToSourceId;
+		this.externalsAliases = externalsAliases;
 		this.sourceMap = sourceMap;
 		this.target = target;
 		this.log = log;

src/build/builder.ts

@@ -1,7 +1,11 @@
 import {UnreachableError} from '../utils/error.js';
 import {BuildConfig} from '../config/buildConfig.js';
 import {toBuildOutPath} from '../paths.js';
-import type {ExternalsBuilderState, EXTERNALS_BUILDER_STATE_KEY} from './externalsBuildHelpers.js';
+import type {
+	ExternalsAliases,
+	ExternalsBuilderState,
+	EXTERNALS_BUILDER_STATE_KEY,
+} from './externalsBuildHelpers.js';
 import {EcmaScriptTarget} from './tsBuildHelpers.js';
 import {ServedDir} from './ServedDir.js';
 import {Logger} from '../utils/log.js';
@@ -29,13 +33,15 @@ export interface BuildResult<TBuild extends Build = Build> {
 	builds: TBuild[];
 }
 
+// For docs on these, see where they're implemented in the `Filer`.
 export interface BuildContext {
 	readonly log: Logger;
 	readonly buildDir: string;
 	readonly dev: boolean;
 	readonly sourceMap: boolean;
 	readonly target: EcmaScriptTarget;
 	readonly servedDirs: readonly ServedDir[];
+	readonly externalsAliases: ExternalsAliases;
 	readonly state: BuilderState;
 	readonly buildingSourceFiles: Set<string>;
 }

src/build/externalsBuildHelpers.ts

@@ -101,6 +101,13 @@ export const loadImportMapFromDisk = async (dest: string): Promise<ImportMap | u
 	return importMap;
 };
 
+export interface ExternalsAliases {
+	[key: string]: string;
+}
+export const DEFAULT_EXTERNALS_ALIASES: ExternalsAliases = {
+	path: 'path-browserify',
+};
+
 export interface DelayedPromise<T> {
 	promise: Promise<T>;
 	reset(): void;

src/build/externalsBuilder.ts

@@ -61,7 +61,7 @@ export const createExternalsBuilder = (opts: InitialOptions = {}): ExternalsBuil
 	const build: ExternalsBuilder['build'] = async (
 		source,
 		buildConfig,
-		{buildDir, dev, sourceMap, target, state},
+		{buildDir, dev, sourceMap, target, state, externalsAliases},
 	) => {
 		// if (sourceMap) {
 		// 	log.warn('Source maps are not yet supported by the externals builder.');
@@ -102,15 +102,14 @@ export const createExternalsBuilder = (opts: InitialOptions = {}): ExternalsBuil
 				dest,
 				rollup: {plugins},
 				polyfillNode: true, // needed for some libs - maybe make customizable?
+				alias: externalsAliases,
 			});
 			log.info('install result', installResult);
 			// log.trace('previous import map', state.importMap); maybe diff?
 			buildState.importMap = installResult.importMap;
-
-			// TODO load all of the files in the import map
 			builds = [
 				...(await Promise.all(
-					Object.keys(installResult.importMap.imports).map(
+					Array.from(buildState.specifiers).map(
 						async (specifier): Promise<TextBuild> => {
 							const id = join(dest, installResult.importMap.imports[specifier]);
 							return {

src/build/postprocess.ts

@@ -63,6 +63,9 @@ export const postprocess = (
 				} else if (isExternalImport || source.id === EXTERNALS_SOURCE_ID) {
 					// handle regular externals
 					if (isBrowser) {
+						if (mappedSpecifier in ctx.externalsAliases) {
+							mappedSpecifier = ctx.externalsAliases[mappedSpecifier];
+						}
 						if (mappedSpecifier.endsWith(JS_EXTENSION) && shouldModifyDotJs(mappedSpecifier)) {
 							mappedSpecifier = mappedSpecifier.replace(/\.js$/, 'js');
 						}

src/client/SourceMetaExpanderItem.svelte

@@ -15,7 +15,9 @@
 	$: hovered = sourceMeta === $hoveredSourceMeta;
 	$: selected = sourceMeta === $selectedSourceMeta;
 
-	const onPointerDown = () => {
+	const onPointerDown = (e: PointerEvent) => {
+		// TODO this needs to be done for all of the handlers..
+		if (e.button !== 0) return;
 		$selectedSourceMeta = selected ? null : sourceMeta;
 	};
 	const onPointerEnter = () => {

src/client/SourceMetaRawItem.svelte

@@ -54,7 +54,7 @@
 		on:pointerleave={onPointerLeave}
 		class:hovering
 	>
-		{expandedText}
+		<span class="icon">{expandedText}</span>
 		<SourceId id={sourceMeta.data.sourceId} />
 	</button>
 </div>
@@ -91,4 +91,8 @@
 	.deemphasized {
 		opacity: 0.62;
 	}
+	.icon {
+		opacity: 0.6;
+		padding-right: var(--spacing_sm);
+	}
 </style>

src/client/styles.css

@@ -1,6 +1,6 @@
 *,
-*:before,
-*:after {
+*::before,
+*::after {
 	box-sizing: border-box;
 	margin: 0;
 	overflow-wrap: break-word;

src/fs/importTs.ts

@@ -54,6 +54,7 @@ export const importTs = async (
 		target: DEFAULT_ECMA_SCRIPT_TARGET,
 		// TODO these last two aren't needed, maybe the swc compiler's type should explicitly choose which options it uses?
 		servedDirs: [],
+		externalsAliases: {},
 		state: {},
 		buildingSourceFiles: new Set(),
 	};