ranuts 0.1.0-alpha → 0.1.0-alpha.1

package/src/ranpack/ast/Declaration.ts

@@ -0,0 +1,120 @@
+import { keys, values } from '../utils/object';
+import type { Module } from '../module';
+import type { Statement } from '../statement';
+import { Reference } from './Reference';
+
+export class Declaration {
+  isFunctionDeclaration: boolean = false;
+  functionNode: any;
+  statement: Statement | null;
+  name: string | null = null;
+  isParam: boolean = false;
+  isUsed: boolean = false;
+  isReassigned: boolean = false;
+  constructor(node: any, isParam: boolean, statement: Statement | null) {
+    // 考虑函数和变量声明两种情况
+    if (node) {
+      if (node.type === 'FunctionDeclaration') {
+        this.isFunctionDeclaration = true;
+        this.functionNode = node;
+      } else if (
+        node.type === 'VariableDeclarator' &&
+        node.init &&
+        /FunctionExpression/.test(node.init.type)
+      ) {
+        this.isFunctionDeclaration = true;
+        this.functionNode = node.init;
+      }
+    }
+    this.statement = statement;
+    this.isParam = isParam;
+  }
+
+  addReference(reference: Reference):void {
+    reference.declaration = this;
+    this.name = reference.name;
+  }
+
+  use():void {
+    // 标记该节点被使用
+    this.isUsed = true;
+    // 对应的 statement 节点也应该被标记
+    if (this.statement) {
+      this.statement.mark();
+    }
+  }
+  // 另外，你可以加上 render 方法，便于后续代码生成的步骤
+  render():string | null {
+    return this.name;
+  }
+}
+
+export class SyntheticDefaultDeclaration extends Declaration {
+  original: Declaration | null;
+  exportName: string | null;
+  constructor(node: any, name: string, statement: Statement) {
+    super(node, false, statement);
+    this.original = null;
+    this.exportName = '';
+    this.name = name;
+  }
+
+  render():string | null {
+    return this.original?.render() || this.name;
+  }
+
+  bind(declaration: Declaration):void {
+    this.original = declaration;
+  }
+}
+
+export class SyntheticNamespaceDeclaration extends Declaration {
+  module: Module;
+  originals: Record<string, Declaration> = {};
+  needsNamespaceBlock: boolean = false;
+  constructor(module: Module) {
+    super(null, false, null);
+    this.module = module;
+    module.getExports().forEach((name) => {
+      const declaration = module.traceExport(name);
+      if (declaration) {
+        this.originals[name] = declaration;
+      }
+    });
+  }
+
+  addReference(reference: Reference): void {
+    if (!this.needsNamespaceBlock) {
+      this.needsNamespaceBlock = true;
+    }
+    if (reference.objectPaths.length) {
+      const ref = reference.objectPaths.shift();
+      reference.name = ref.name;
+      reference.start = ref.start;
+      reference.end = ref.end;
+    }
+    values(this.originals).forEach((declaration) => {
+      declaration.addReference(reference);
+    });
+    // 必须放在最后执行，因为要将 reference 和当前的 SyntheticNamespaceDeclaration 绑定
+    super.addReference(reference);
+  }
+
+  renderBlock(intentString = '  '):string {
+    const members = keys(this.originals)
+      .map((name: string) => {
+        const originDeclaration = this.originals[name];
+        return `${intentString}${name}: ${originDeclaration.render()}`;
+      })
+      .join(',\n');
+    return `const ${this.render()} = Object.freeze({\n${members}\n});`;
+  }
+
+  use():void {
+    for (const original of values(this.originals)) {
+      original.use();
+    }
+  }
+}
+
+export { Reference };

package/src/ranpack/ast/Node.ts

@@ -0,0 +1,7 @@
+import type { Node as ASTNode } from '../../astParser';
+import type { Scope } from './Scope';
+
+export interface Node extends ASTNode {
+  parent?: Node;
+  _scope?: Scope;
+}

package/src/ranpack/ast/Reference.ts

@@ -0,0 +1,32 @@
+import type { Statement } from '../statement';
+import type { Scope } from './Scope';
+import type { Declaration } from './Declaration';
+/**
+ * @description: 记录其它节点与 Declaration 节点的引用关系
+ */
+export class Reference {
+  node: any;
+  scope: Scope;
+  statement: Statement;
+  // declaration 信息在构建依赖图的部分补充
+  declaration: Declaration | null = null;
+  name: string;
+  start: number;
+  end: number;
+  objectPaths: any[] = [];
+  constructor(node: any, scope: Scope, statement: Statement) {
+    this.node = node;
+    this.scope = scope;
+    this.statement = statement;
+    this.start = node.start;
+    this.end = node.end;
+    let root = node;
+    this.objectPaths = [];
+    while (root.type === 'MemberExpression') {
+      this.objectPaths.unshift(root.property);
+      root = root.object;
+    }
+    this.objectPaths.unshift(root);
+    this.name = root.name;
+  }
+}

package/src/ranpack/ast/Scope.ts

@@ -0,0 +1,80 @@
+import type { Statement } from '../statement';
+import { keys } from '../utils/object';
+import { Declaration } from './Declaration';
+
+interface ScopeOptions {
+  parent?: Scope;
+  paramNodes?: any[];
+  block?: boolean;
+  statement: Statement;
+  isTopLevel?: boolean;
+}
+/**
+ * @description: 封装作用域相关的基本信息
+ * @return {*}
+ */
+export class Scope {
+  // 父作用域
+  parent?: Scope;
+  // 如果是函数作用域，则需要参数节点
+  paramNodes: any[];
+   // 是否为块级作用域
+  isBlockScope?: boolean;
+  // 作用域对应的语句节点
+  statement: Statement;
+   // 变量/函数 声明节点，为 Scope 的核心数据
+  declarations: Record<string, Declaration> = {};
+  constructor(options: ScopeOptions) {
+    const { parent, paramNodes, block, statement } = options;
+    this.parent = parent;
+    this.paramNodes = paramNodes || [];
+    this.statement = statement;
+    this.isBlockScope = !!block;
+    this.paramNodes.forEach(
+      (node) =>
+        (this.declarations[node.name] = new Declaration(
+          node,
+          true,
+          this.statement
+        ))
+    );
+  }
+
+  addDeclaration(node: any, isBlockDeclaration: boolean):void {
+     // block scope & var, 向上追溯，直到顶层作用域
+    if (this.isBlockScope && !isBlockDeclaration && this.parent) {
+      this.parent.addDeclaration(node, isBlockDeclaration);
+      return;
+    }
+    // 否则在当前作用域新建声明节点(Declaration)
+    // 变量声明 函数声明
+    // if (
+    //   node.type === 'VariableDeclaration' ||
+    //   node.type === 'FunctionDeclaration'
+    // ) {
+    const key = node.id && node.id.name;
+    this.declarations[key] = new Declaration(node, false, this.statement);
+    // }
+  }
+  /**
+   * @description: 遍历声明节点(Declaration)
+   * @param {function} fn
+   * @return {*}
+   */
+  eachDeclaration(fn: (name: string, dec: Declaration) => void):void {
+    keys(this.declarations).forEach((key) => {
+      fn(key, this.declarations[key]);
+    });
+  }
+
+  contains(name: string): Declaration {
+    return this.findDeclaration(name);
+  }
+
+  findDeclaration(name: string): Declaration {
+    return (
+      this.declarations[name] ||
+      (this.parent && this.parent.findDeclaration(name))
+    );
+  }
+}

package/src/ranpack/bundle.ts

@@ -0,0 +1,50 @@
+import * as MagicString from 'magic-string';
+import type { Module } from './module';
+import { Graph } from './graph';
+
+interface BundleOptions {
+  entry: string;
+}
+
+export class Bundle {
+  graph: Graph;
+  constructor(options: BundleOptions) {
+    // 初始化模块依赖图对象
+    this.graph = new Graph({
+      entry: options.entry,
+      bundle: this
+    });
+  }
+
+  async build():Promise<void> {
+    // 模块打包逻辑，完成所有的 AST 相关操作
+    return await this.graph.build();
+  }
+
+  getModuleById(id: string):Module {
+    return this.graph.getModuleById(id);
+  }
+
+  addModule(module: Module):void {
+    return this.graph.addModule(module);
+  }
+  /**
+   * @description: 代码生成逻辑，拼接模块 AST 节点，产出代码
+   * @return {*}
+   */  
+  render(): { code: string; map: MagicString.SourceMap } {
+    const msBundle = new MagicString.Bundle({ separator: '\n' });
+
+    this.graph.orderedModules.forEach((module) => {
+      msBundle.addSource({
+        content: module.render()
+      });
+    });
+
+    const map = msBundle.generateMap({ includeContent: true });
+    return {
+      code: msBundle.toString(),
+      map
+    };
+  }
+}

package/src/ranpack/graph.ts

@@ -0,0 +1,143 @@
+import { dirname, resolve } from 'node:path';
+import type { Module } from './module';
+import type { Statement } from './statement';
+import { ModuleLoader } from './moduleLoader';
+import type { Bundle } from './bundle';
+import { keys } from './utils/object';
+
+interface GraphOptions {
+  entry: string;
+  bundle: Bundle;
+}
+
+/**
+ * @description: 模块依赖图对象的实现
+ * @return {*}
+ */
+export class Graph {
+  entryPath: string;
+  basedir: string;
+  statements: Statement[] = [];
+  moduleLoader: ModuleLoader;
+  modules: Module[] = [];
+  moduleById: Record<string, Module> = {};
+  resolveIds: Record<string, string> = {};
+  orderedModules: Module[] = [];
+  bundle: Bundle;
+  constructor(options: GraphOptions) {
+    const { entry, bundle } = options;
+    this.entryPath = resolve(entry);
+    this.basedir = dirname(this.entryPath);
+    this.bundle = bundle;
+    // 初始化模块加载器对象
+    this.moduleLoader = new ModuleLoader(bundle);
+  }
+
+  async build(): Promise<void> {
+    // 1. 获取并解析模块信息，返回入口模块对象
+    const entryModule = await this.moduleLoader.fetchModule(
+      this.entryPath,
+      '',
+      true
+    );
+    // 2. 构建依赖关系图
+    this.modules.forEach((module) => module.bind());
+    // 3. 模块拓扑排序
+    this.orderedModules = this.sortModules(entryModule!);
+    // 4. Tree Shaking，标记需要包含的语句
+    entryModule!.getExports().forEach((name) => {
+      const declaration = entryModule!.traceExport(name);
+      declaration!.use();
+    });
+    // 5. 处理命名冲突
+    this.handleNameConflict();
+  }
+
+  handleNameConflict(): void {
+    const used: Record<string, true> = {};
+
+    function getSafeName(name: string) {
+      let safeName = name;
+      let count = 1;
+      while (used[safeName]) {
+        safeName = `${name}$${count++}`;
+      }
+      used[safeName] = true;
+      return safeName;
+    }
+
+    this.modules.forEach((module) => {
+      keys(module.declarations).forEach((name) => {
+        const declaration = module.declarations[name];
+        declaration.name = getSafeName(declaration.name!);
+      });
+    });
+  }
+
+  getModuleById(id: string): Module {
+    return this.moduleById[id];
+  }
+
+  addModule(module: Module): void {
+    if (!this.moduleById[module.id]) {
+      this.moduleById[module.id] = module;
+      this.modules.push(module);
+    }
+  }
+
+  sortModules(entryModule: Module): Module[] {
+    const orderedModules: Module[] = [];
+    const analysedModule: Record<string, boolean> = {};
+    const parent: Record<string, string> = {};
+    const cyclePathList: string[][] = [];
+    // 回溯，用来定位循环依赖
+    function getCyclePath(id: string, parentId: string): string[] {
+      const paths = [id];
+      let currentId = parentId;
+      while (currentId !== id) {
+        paths.push(currentId);
+        // 向前回溯
+        currentId = parent[currentId];
+      }
+      paths.push(paths[0]);
+      return paths.reverse();
+    }
+    // 拓扑排序核心逻辑，基于依赖图的后序遍历完成
+    function analyzeModule(module: Module) {
+      if (analysedModule[module.id]) {
+        return;
+      }
+      for (const dependency of module.dependencyModules) {
+        // 检测到循环依赖
+        // 如果某个模块没有被记录到 analysedModule 中，
+        // 则表示它的依赖模块并没有分析完，在这个前提下中
+        // 如果再次遍历到这个模块，说明已经出现了循环依赖，
+        // 1. 不为入口模块
+        if (parent[dependency.id]) {
+          // 2. 依赖模块还没有分析结束
+          if (!analysedModule[dependency.id]) {
+            cyclePathList.push(getCyclePath(dependency.id, module.id));
+          }
+          continue;
+        }
+        parent[dependency.id] = module.id;
+        analyzeModule(dependency);
+      }
+      // 由于 analyzeModule 函数中采用后序的方式来遍历依赖
+      // 也就是说一旦某个模块被记录到 analysedModule 表中
+      // 那么也就意味着其所有的依赖模块已经被遍历完成了:
+      analysedModule[module.id] = true;
+      orderedModules.push(module);
+    }
+    // 从入口模块开始分析
+    analyzeModule(entryModule);
+    // 如果有循环依赖，则打印循环依赖信息
+    if (cyclePathList.length) {
+      cyclePathList.forEach((paths) => {
+        console.log(paths);
+      });
+      process.exit(1);
+    }
+    return orderedModules;
+  }
+}