Parcel 2: Runtime plugins and bundle loader support

packages/bundlers/default/src/DefaultBundler.js

@@ -32,9 +32,16 @@ export default new Bundler({
         // Start a new bundle if this is an async dependency, or entry point.
         if (dep.isAsync || dep.isEntry) {
           let isIsolated = dep.isEntry || dep.env.isIsolated();
+          let resolved = assetGraph.getDependencyResolution(dep);
+          if (!resolved) {
+            // TODO: is this right?
+            return;
+          }
+
           let bundleGroup: BundleGroup = {
             dependency: dep,
-            target: dep.target || (context && context.bundleGroup.target)
+            target: dep.target || (context && context.bundleGroup.target),
+            entryAssetId: resolved.id
           };
 
           bundleGraph.addBundleGroup(

packages/configs/default/index.json

@@ -9,6 +9,10 @@
     "*.css": ["@parcel/transformer-css"]
   },
   "namers": ["@parcel/namer-default"],
+  "runtimes": {
+    "browser": ["@parcel/runtime-js"],
+    "node": ["@parcel/runtime-js"]
+  },
   "packagers": {
     "*.js": "@parcel/packager-js"
   },

packages/core/core/src/Asset.js

@@ -28,6 +28,7 @@ type AssetOptions = {
   dependencies?: Array<IDependency>,
   connectedFiles?: Array<File>,
   output?: AssetOutput,
+  outputSize?: number,
   outputHash?: string,
   env: Environment,
   meta?: JSONObject
@@ -64,7 +65,7 @@ export default class Asset implements IAsset {
       ? options.connectedFiles.slice()
       : [];
     this.output = options.output || {code: this.code};
-    this.outputSize = this.output.code.length;
+    this.outputSize = options.outputSize || this.output.code.length;
     this.outputHash = options.outputHash || '';
     this.env = options.env;
     this.meta = options.meta || {};

packages/core/core/src/AssetGraph.js

@@ -11,8 +11,7 @@ import type {
   Target,
   Environment,
   Bundle,
-  GraphTraversalCallback,
-  DependencyResolution
+  GraphTraversalCallback
 } from '@parcel/types';
 import md5 from '@parcel/utils/md5';
 import Dependency from './Dependency';
@@ -75,8 +74,9 @@ type FileUpdates = {
 };
 
 type AssetGraphOpts = {
-  entries: Array<string>,
-  targets: Array<Target>,
+  entries?: Array<string>,
+  targets?: Array<Target>,
+  transformerRequest?: TransformerRequest,
   rootDir: string
 };
 
@@ -98,28 +98,42 @@ export default class AssetGraph extends Graph {
     this.invalidNodes = new Map();
   }
 
-  initializeGraph({entries, targets, rootDir}: AssetGraphOpts) {
+  initializeGraph({
+    entries,
+    targets,
+    transformerRequest,
+    rootDir
+  }: AssetGraphOpts) {
     let rootNode = nodeFromRootDir(rootDir);
     this.setRootNode(rootNode);
 
-    let depNodes = [];
-    for (let entry of entries) {
-      for (let target of targets) {
-        let node = nodeFromDep(
-          new Dependency({
-            moduleSpecifier: entry,
-            target: target,
-            env: target.env,
-            isEntry: true
-          })
-        );
+    let nodes = [];
+    if (entries) {
+      if (!targets) {
+        throw new Error('Targets are required when entries are specified');
+      }
 
-        depNodes.push(node);
+      for (let entry of entries) {
+        for (let target of targets) {
+          let node = nodeFromDep(
+            new Dependency({
+              moduleSpecifier: entry,
+              target: target,
+              env: target.env,
+              isEntry: true
+            })
+          );
+
+          nodes.push(node);
+        }
       }
+    } else if (transformerRequest) {
+      let node = nodeFromTransformerRequest(transformerRequest);
+      nodes.push(node);
     }
 
-    this.replaceNodesConnectedTo(rootNode, depNodes);
-    for (let depNode of depNodes) {
+    this.replaceNodesConnectedTo(rootNode, nodes);
+    for (let depNode of nodes) {
       this.incompleteNodes.set(depNode.id, depNode);
     }
   }
@@ -230,30 +244,21 @@ export default class AssetGraph extends Graph {
     return this.getNodesConnectedFrom(node).map(node => node.value);
   }
 
-  getDependencyResolution(dep: IDependency): DependencyResolution {
+  getDependencyResolution(dep: IDependency): ?Asset {
     let depNode = this.getNode(dep.id);
     if (!depNode) {
-      return {};
-    }
-
-    let node = this.getNodesConnectedFrom(depNode)[0];
-    if (!node) {
-      return {};
+      return null;
     }
 
-    if (node.type === 'transformer_request') {
-      let assetNode = this.getNodesConnectedFrom(node).find(
-        node => node.type === 'asset' || node.type === 'asset_reference'
-      );
-      if (assetNode) {
-        return {asset: assetNode.value};
+    let res = null;
+    this.traverse((node, ctx, traversal) => {
+      if (node.type === 'asset' || node.type === 'asset_reference') {
+        res = (node.value: Asset);
+        traversal.stop();
       }
-    } else if (node.type === 'bundle_group') {
-      let bundles = this.getNodesConnectedFrom(node).map(node => node.value);
-      return {bundles};
-    }
+    }, depNode);
 
-    return {};
+    return res;
   }
 
   traverseAssets(visit: GraphTraversalCallback<Asset>, startNode: ?Node) {
@@ -281,7 +286,8 @@ export default class AssetGraph extends Graph {
     return {
       id: 'bundle:' + asset.id,
       type: asset.type,
-      assetGraph: graph
+      assetGraph: graph,
+      env: asset.env
     };
   }
 
@@ -296,12 +302,13 @@ export default class AssetGraph extends Graph {
   }
 
   getEntryAssets(): Array<Asset> {
-    let root = this.getRootNode();
-    if (!root) {
-      return [];
-    }
+    let entries = [];
+    this.traverseAssets((asset, ctx, traversal) => {
+      entries.push(asset);
+      traversal.skipChildren();
+    });
 
-    return this.getNodesConnectedFrom(root).map(node => node.value);
+    return entries;
   }
 
   removeAsset(asset: Asset) {

packages/core/core/src/AssetGraphBuilder.js

@@ -0,0 +1,176 @@
+// @flow
+import type {
+  CLIOptions,
+  Dependency,
+  FilePath,
+  Target,
+  TransformerRequest
+} from '@parcel/types';
+import type {Node} from './Graph';
+import type Config from './Config';
+import EventEmitter from 'events';
+import {AbortController} from 'abortcontroller-polyfill/dist/cjs-ponyfill';
+import Watcher from '@parcel/watcher';
+import PromiseQueue from './PromiseQueue';
+import AssetGraph from './AssetGraph';
+import ResolverRunner from './ResolverRunner';
+import WorkerFarm from '@parcel/workers';
+
+const abortError = new Error('Build aborted');
+
+type Signal = {
+  aborted: boolean,
+  addEventListener?: Function
+};
+
+type BuildOpts = {
+  signal: Signal,
+  shallow?: boolean
+};
+
+type Opts = {|
+  cliOpts: CLIOptions,
+  config: Config,
+  entries?: Array<string>,
+  targets?: Array<Target>,
+  transformerRequest?: TransformerRequest,
+  rootDir: FilePath
+|};
+
+export default class AssetGraphBuilder extends EventEmitter {
+  graph: AssetGraph;
+  watcher: Watcher;
+  queue: PromiseQueue;
+  resolverRunner: ResolverRunner;
+  controller: AbortController;
+  farm: WorkerFarm;
+  runTransform: (file: TransformerRequest) => Promise<any>;
+
+  constructor(opts: Opts) {
+    super();
+
+    this.queue = new PromiseQueue();
+    this.resolverRunner = new ResolverRunner({
+      config: opts.config,
+      cliOpts: opts.cliOpts,
+      rootDir: opts.rootDir
+    });
+
+    this.graph = new AssetGraph();
+    this.graph.initializeGraph(opts);
+
+    this.controller = new AbortController();
+    if (opts.cliOpts.watch) {
+      this.watcher = new Watcher();
+      this.watcher.on('change', async filePath => {
+        if (this.graph.hasNode(filePath)) {
+          this.controller.abort();
+          this.graph.invalidateFile(filePath);
+
+          this.emit('invalidate', filePath);
+        }
+      });
+    }
+  }
+
+  async initFarm() {
+    // This expects the worker farm to already be initialized by Parcel prior to calling
+    // AssetGraphBuilder, which avoids needing to pass the options through here.
+    this.farm = await WorkerFarm.getShared();
+    this.runTransform = this.farm.mkhandle('runTransform');
+  }
+
+  async build() {
+    if (!this.farm) {
+      await this.initFarm();
+    }
+
+    this.controller = new AbortController();
+    let signal = this.controller.signal;
+
+    await this.updateGraph({signal});
+    await this.completeGraph({signal});
+    return this.graph;
+  }
+
+  async updateGraph({signal}: BuildOpts) {
+    for (let [, node] of this.graph.invalidNodes) {
+      this.queue.add(() => this.processNode(node, {signal, shallow: true}));
+    }
+    await this.queue.run();
+  }
+
+  async completeGraph({signal}: BuildOpts) {
+    for (let [, node] of this.graph.incompleteNodes) {
+      this.queue.add(() => this.processNode(node, {signal}));
+    }
+
+    await this.queue.run();
+  }
+
+  processNode(node: Node, {signal}: BuildOpts) {
+    switch (node.type) {
+      case 'dependency':
+        return this.resolve(node.value, {signal});
+      case 'transformer_request':
+        return this.transform(node.value, {signal});
+      default:
+        throw new Error(
+          `Cannot process graph node with type ${node.type || 'undefined'}`
+        );
+    }
+  }
+
+  async resolve(dep: Dependency, {signal}: BuildOpts) {
+    let resolvedPath;
+    try {
+      resolvedPath = await this.resolverRunner.resolve(dep);
+    } catch (err) {
+      if (err.code === 'MODULE_NOT_FOUND' && dep.isOptional) {
+        return;
+      }
+
+      throw err;
+    }
+
+    if (signal.aborted) {
+      throw abortError;
+    }
+
+    let req = {filePath: resolvedPath, env: dep.env};
+    let {newRequest} = this.graph.resolveDependency(dep, req);
+
+    if (newRequest) {
+      this.queue.add(() => this.transform(newRequest, {signal}));
+      if (this.watcher) this.watcher.watch(newRequest.filePath);
+    }
+  }
+
+  async transform(req: TransformerRequest, {signal, shallow}: BuildOpts) {
+    let cacheEntry = await this.runTransform(req);
+
+    if (signal.aborted) throw abortError;
+    let {
+      addedFiles,
+      removedFiles,
+      newDeps
+    } = this.graph.resolveTransformerRequest(req, cacheEntry);
+
+    if (this.watcher) {
+      for (let file of addedFiles) {
+        this.watcher.watch(file.filePath);
+      }
+
+      for (let file of removedFiles) {
+        this.watcher.unwatch(file.filePath);
+      }
+    }
+
+    // The shallow option is used during the update phase
+    if (!shallow) {
+      for (let dep of newDeps) {
+        this.queue.add(() => this.resolve(dep, {signal}));
+      }
+    }
+  }
+}