endojs / endo

Endo is a distributed secure JavaScript sandbox, based on SES
Apache License 2.0
829 stars 72 forks source link

chore: use babel@8 #1793

Closed himself65 closed 1 year ago

himself65 commented 1 year ago

closes: #XXXX refs: https://github.com/babel/babel/issues/15269

Description

I'm using esbuild to bundle an application that includes @endo/static-module-record which requires babel packages. However, there are some issues when importing the module in an ESM environment.

babel 8 use ESM as output instead of CJS

kriskowal commented 1 year ago

@himself65 Can you expand on why this is necessary for your usage? We use SMR to transform ESM to a Script grammar production, suitable for passing to eval. The output is not CJS. Is the problem that esbuild is unable to compile @endo/static-module-record because the current version of Babel is compiled down to CJS and that esbuild can’t incorporate it into an ESM dependency? It might be good for us to test that usage in an integration test.

himself65 commented 1 year ago

@himself65 Can you expand on why this is necessary for your usage? We use SMR to transform ESM to a Script grammar production, suitable for passing to eval. The output is not CJS. Is the problem that esbuild is unable to compile @endo/static-module-record because the current version of Babel is compiled down to CJS and that esbuild can’t incorporate it into an ESM dependency? It might be good for us to test that usage in an integration test.

I went through compiled code today. I found that it's not esbuild issue.

The thing is I'm using Web Test Runner and importing the code. Seems like it will just transpile code as-is, so babel is still CJS. Then it will be directly run in the browser. So the error happened.


import {StaticModuleRecord} from "/__wds-outside-root__/2/common/temp/node_modules/.pnpm/@endo+static-module-record@0.8.2/node_modules/@endo/static-module-record/index.js";
export function compile(code, fileName) {
    const record = new StaticModuleRecord(code,fileName);
    const reexports = record.__reexportMap__;
    const exports = Object.assign({}, record.__fixedExportMap__, record.__liveExportMap__);
    return {
        source: record.__syncModuleProgram__,
        metadata: {
            exports,
            imports: record.imports,
            reexports
        }
    };
}
import * as babelParser from '/__wds-outside-root__/2/common/temp/node_modules/.pnpm/@babel+parser@7.23.0/node_modules/@babel/parser/lib/index.js';
import babelGenerate from '/__wds-outside-root__/2/common/temp/node_modules/.pnpm/@agoric+babel-generator@7.17.6/node_modules/@agoric/babel-generator/lib/index.js';
import babelTraverse from '/__wds-outside-root__/2/common/temp/node_modules/.pnpm/@babel+traverse@7.23.0/node_modules/@babel/traverse/lib/index.js';
import * as babelTypes from '/__wds-outside-root__/2/common/temp/node_modules/.pnpm/@babel+types@7.23.0/node_modules/@babel/types/lib/index.js';

const parseBabel = babelParser.default
  ? babelParser.default.parse
  : babelParser.parse || babelParser;
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CodeGenerator = void 0;
exports.default = generate;

var _sourceMap = require("./source-map");

var _printer = require("./printer");

class Generator extends _printer.default {
  constructor(ast, opts = {}, code) {
    const format = normalizeOptions(code, opts);
    const map = opts.sourceMaps ? new _sourceMap.default(opts, code) : null;
    super(format, map);
    this.ast = ast;
  }

  ast;

  generate() {
    return super.generate(this.ast);
  }

}

function normalizeOptions(code, opts) {
  const format = {
    auxiliaryCommentBefore: opts.auxiliaryCommentBefore,
    auxiliaryCommentAfter: opts.auxiliaryCommentAfter,
    shouldPrintComment: opts.shouldPrintComment,
    retainLines: opts.retainLines || opts.verbatim,
    verbatim: opts.verbatim,
    retainFunctionParens: opts.retainFunctionParens || opts.verbatim,
    comments: opts.comments == null || opts.comments,
    compact: opts.compact,
    minified: opts.minified,
    concise: opts.concise,
    indent: {
      adjustMultilineComment: true,
      style: "  ",
      base: 0
    },
    decoratorsBeforeExport: !!opts.decoratorsBeforeExport,
    jsescOption: Object.assign({
      quotes: "double",
      wrap: true,
      minimal: process.env.BABEL_8_BREAKING ? true : false
    }, opts.jsescOption),
    recordAndTupleSyntaxType: opts.recordAndTupleSyntaxType,
    topicToken: opts.topicToken
  };

  if (!process.env.BABEL_8_BREAKING) {
    format.jsonCompatibleStrings = opts.jsonCompatibleStrings;
  }

  if (format.minified) {
    format.compact = true;

    format.shouldPrintComment = format.shouldPrintComment || (() => format.comments);
  } else {
    format.shouldPrintComment = format.shouldPrintComment || (value => format.comments || value.indexOf("@license") >= 0 || value.indexOf("@preserve") >= 0);
  }

  if (format.compact === "auto") {
    format.compact = code.length > 500_000;

    if (format.compact) {
      console.error("[BABEL] Note: The code generator has deoptimised the styling of " + `${opts.filename} as it exceeds the max of ${"500KB"}.`);
    }
  }

  if (format.compact) {
    format.indent.adjustMultilineComment = false;
  }

  return format;
}

class CodeGenerator {
  _generator;

  constructor(ast, opts, code) {
    this._generator = new Generator(ast, opts, code);
  }

  generate() {
    return this._generator.generate();
  }

}

exports.CodeGenerator = CodeGenerator;

function generate(ast, opts, code) {
  const gen = new Generator(ast, opts, code);
  return gen.generate();
}
himself65 commented 1 year ago

As I realized this is not this package issue, closing