一文打透前端研发需要了解的DSL

const calculator = {
    add: (a, b) => a + b,
    sub: (a, b) => a - b,
    mul: (a, b) => a * b,
    div: (a, b) => a / b
};

console.log(calculator.add(1, 2)); // 3
console.log(calculator.sub(3, 2)); // 1
console.log(calculator.mul(2, 3)); // 6
console.log(calculator.div(6, 2)); // 3

send_contract {
  recipient: {
    name: "customer.name"
    email: "customer.email"
    id_card: "customer.id_card"
    phone: "customer.phone"
  }
  template: "contract_template"
  signature_method: "auto"
  seal_setting: "company_seal"
  valid_period: "one_year"
  payment_terms: "monthly"
  send if customer.type in ["premium"] and customer.credit_rating >= 700 and customer.product in ["product2"]
}

/* Lexical rules */
%lex
%%
\s+                   /* skip whitespace */
"send_contract"       { return 'SEND_CONTRACT'; }
"\{"                  { return '{'; }
"\}"                  { return '}'; }
"\:"                  { return ':'; }
"\""                  { return '"'; }
[a-zA-Z_][a-zA-Z0-9_]*  { return 'IDENTIFIER'; }
"and"                 { return 'AND'; }
"or"                  { return 'OR'; }
"in"                  { return 'IN'; }
">="                  { return 'GE'; } // 这里匹配采取的是贪婪匹配，可以参考 jison 的文档
"<="                  { return 'LE'; }
"<"                   { return 'LT'; }
">"                   { return 'GT'; }
"="                   { return 'EQ'; }
[0-9]+                { return 'NUMBER'; }
.                     { return 'INVALID'; }
/lex

/* Operator precedence */
%start expressions
%left OR
%left AND
%left GE LE GT LT EQ
%left IN

%% /* language grammar */

expressions
    : contract
    ;

contract
    : SEND_CONTRACT '{' contract_body '}' { $$ = { type: 'contract', body: $3 }; }
    ;

contract_body
    : recipient template signature_method seal_setting valid_period payment_terms send_condition
    ;

recipient
    : "recipient" ':' '{' recipient_body '}' { $$ = { type: 'recipient', body: $4 }; }
    ;

recipient_body
    : IDENTIFIER ':' '"' IDENTIFIER '"' { $$ = { [$1]: $4 }; }
    ;

template
    : "template" ':' '"' IDENTIFIER '"' { $$ = { type: 'template', name: $4 }; }
    ;

signature_method
    : "signature_method" ':' '"' IDENTIFIER '"' { $$ = { type: 'signature_method', method: $4 }; }
    ;

seal_setting
    : "seal_setting" ':' '"' IDENTIFIER '"' { $$ = { type: 'seal_setting', setting: $4 }; }
    ;

valid_period
    : "valid_period" ':' '"' IDENTIFIER '"' { $$ = { type: 'valid_period', period: $4 }; }
    ;

payment_terms
    : "payment_terms" ':' '"' IDENTIFIER '"' { $$ = { type: 'payment_terms', terms: $4 }; }
    ;

send_condition
    : "send" "if" condition { $$ = { type: 'send_condition', condition: $3 }; }
    ;

condition
    : IDENTIFIER IN '[' IDENTIFIER_list ']' { $$ = { type: 'in_condition', variable: $1, values: $4 }; }
    | IDENTIFIER GE NUMBER { $$ = { type: 'ge_condition', variable: $1, value: $3 }; }
    | IDENTIFIER AND IDENTIFIER { $$ = { type: 'and_condition', left: $1, right: $3 }; }
    ;

IDENTIFIER_list
    : IDENTIFIER ',' IDENTIFIER_list { $$ = [$1].concat($3); }
    | IDENTIFIER { $$ = [$1]; }
    ;

{
  type: 'contract',
  body: {
    recipient: {
      name: 'customer.name',
      email: 'customer.email',
      id_card: 'customer.id_card',
      phone: 'customer.phone'
    },
    template: { type: 'template', name: 'contract_template' },
    signature_method: { type: 'signature_method', method: 'auto' },
    seal_setting: { type: 'seal_setting', setting: 'company_seal' },
    valid_period: { type: 'valid_period', period: 'one_year' },
    payment_terms: { type: 'payment_terms', terms: 'monthly' },
    send_condition: {
      type: 'send_condition',
      condition: {
        type: 'and_condition',
        left: {
          type: 'and_condition',
          left: { type: 'in_condition', variable: 'customer.type', values: ['premium'] },
          right: { type: 'ge_condition', variable: 'customer.credit_rating', value: 700 }
        },
        right: { type: 'in_condition', variable: 'customer.product', values: ['product2'] }
      }
    }
  }
}

class ContractSender {
  constructor() {
    this.recipient = {};
    this.template = '';
    this.signatureMethod = '';
    this.sealSetting = '';
    this.validPeriod = '';
    this.paymentTerms = '';
    this.sendCondition = null;
  }

  setRecipient(info) {
    this.recipient = info;
  }

  setTemplate(template) {
    this.template = template;
  }

  setSignatureMethod(method) {
    this.signatureMethod = method;
  }

  setSealSetting(setting) {
    this.sealSetting = setting;
  }

  setValidPeriod(period) {
    this.validPeriod = period;
  }

  setPaymentTerms(terms) {
    this.paymentTerms = terms;
  }

  setSendCondition(condition) {
    this.sendCondition = condition;
  }

  send() {
    if (this.sendCondition()) {
      console.log(`Sending contract to ${this.recipient.name}...`);
      // Here you would actually send the contract.
    } else {
      console.log(`Not sending contract to ${this.recipient.name}.`);
    }
  }
}

function execute(ast) {
  const sender = new ContractSender();

  sender.setRecipient(ast.body.recipient);
  sender.setTemplate(ast.body.template.name);
  sender.setSignatureMethod(ast.body.signature_method.method);
  sender.setSealSetting(ast.body.seal_setting.setting);
  sender.setValidPeriod(ast.body.valid_period.period);
  sender.setPaymentTerms(ast.body.payment_terms.terms);

  // Here we assume that the send condition is a simple function that returns a boolean.
  // In a real application, you would probably want to convert the send condition from the AST into a function.
  sender.setSendCondition(() => true);

  sender.send();
}

// Parse your DSL into an AST.
const ast = parse(myDSL);

// Execute the AST.
execute(ast);

const myDSL = {
  tokenizer: {
    root: [
      [/send_contract/, "keyword"],
      [/"/, "string"],
      [/:/, "delimiter"],
      [/[{}]/, "delimiter.bracket"],
      [/[a-zA-Z_][a-zA-Z0-9_]*/, "identifier"],
      [/[0-9]+/, "number"],
      [/\s+/, "white"]
    ],
  },
};

monaco.languages.register({ id: "ct" });

monaco.languages.setMonarchTokensProvider("ct", myDSL);

monaco.editor.defineTheme("ctTheme", {
  base: "vs",
  inherit: true,
  rules: [
    { token: "keyword", foreground: "880000", fontStyle: "bold" },
    { token: "string", foreground: "008800", fontStyle: "italic" },
    { token: "number", foreground: "000088" },
  ],
});

const editor = monaco.editor.create(document.getElementById("container"), {
  value: "",
  language: "ct",
  theme: "ctTheme",
});