Quería tener de programación, que facilitará la creación para mi proyecto de código abierto . La idea del lenguaje surgió después de que creé un concierto pago para una persona, llamémoslo Ken, que necesitaba este tipo de juego, donde el usuario interactuaba con la terminal y se le hacían un montón de preguntas y era como una aventura. juego, relacionado con . El código que escribí, que Ken necesitaba, estaba basado en datos mediante un archivo JSON. Estaba funcionando bien, Ken podía cambiar fácilmente el JSON y cambiar el juego como quisiera. Pregunté si podía compartir el código ya que era un proyecto genial y Ken estuvo de acuerdo en que podía hacerlo dos meses después de que publicara el juego. Pero después de un tiempo, me he dado cuenta de que puedo tener algo mucho mejor. Mi propio que . Una persona con un poco de conocimiento de programación como Ken podría editar fácilmente el juego, porque el lenguaje será mucho más simple que el complejo código JavaScript que se necesita para algo como esto. E incluso si me pidieran que creara un juego como el de Ken, sería mucho más fácil y rápido para mí. Así ha comenzado . mi propio lenguaje de juegos de aventuras basados en texto jQuery Terminal Crypo lenguaje DSL, simplificará la creación de juegos de aventura basados en texto el lenguaje de programación Gaiman antes, por lo que era mi elección obvia para el . Primero comencé con , lo modifiqué y luego agregué y . Cuando tuve esta primera prueba de concepto que generaba , estaba tan emocionado que tuve que escribir un artículo y compartir lo simple que es crear . Usé PEG.js generador de analizadores un ejemplo aritmético declaraciones if expresiones booleanas código JavaScript de salida su propio lenguaje de programación en JavaScript Al final, hay un campo de juegos de demostración simple, y si quieres algo más genial, mira el sitio web de Gaiman, enlace en . GitHub Así que al grano, vamos a sumergirnos. ¿Qué es un compilador? es un programa que traduce código de un lenguaje de programación a otro lenguaje. Por ejemplo, el compilador de C traduce un programa escrito en lenguaje C a código de máquina (binario que puede ser interpretado por la computadora). Pero también hay compiladores que traducen un lenguaje legible por humanos a otro lenguaje legible. Por ejemplo, ClojureScript se compila en JavaScript. Este proceso a menudo se llama transpiling y el programa que hace esto a menudo se llama transpiler. Un compilador ¿Qué es un analizador? es un programa que puede ser parte del compilador o . Toma el código de entrada como una secuencia de caracteres y produce (árbol de sintaxis abstracta), que puede ser utilizado por el generador de código (parte del compilador) para generar el código de salida o por el evaluador (parte del intérprete) para ejecutarlo. Un Parser intérprete AST ¿Qué es AST? AST es un acrónimo de Abstract Syntax Tree. Es la forma de representar el código en un formato que las herramientas pueden entender, generalmente en forma de . Usaremos AST en el formato de , que es un analizador de JavaScript que genera AST. estructura de datos de árbol Esprima ¿Qué es un generador de analizador? El generador de analizadores, como sugiere el nombre, es un programa que genera el código fuente de un analizador basado en la gramática (especificación del lenguaje). Escrito en una sintaxis específica. En este artículo, utilizaremos el generador de analizador PEG.js que genera un código JavaScript que analizará el código para su idioma y generará AST. Un generador Parser también es un compilador, por lo que puede llamarlo compilador compilador. Un compilador que puede generar un compilador para su idioma. Generación de código JavaScript Lo bueno de la sintaxis de Esprima es que existen herramientas que generan código en función de su AST. Un ejemplo es que toma Esprima AST como entrada y genera código JavaScript. Puede pensar que puede usar solo cadenas para generar código, pero esta solución no escalará. En este tutorial, solo muestro una sola instrucción if, pero se encontrará con muchos problemas si tiene un código más complejo. escodegen Analizador PEG.js para lenguaje de programación simple PEG.js es un compilador para analizar gramáticas de escritas en JavaScript. Se necesita un lenguaje PEG más simple que usa código JavaScript en línea y genera un analizador. expresiones A continuación, le mostraré cómo crear una gramática PEG.js de analizador simple para la declaración if que generará AST, que luego se transformará en código JavaScipt. La sintaxis de PEG.js no es muy complicada, consiste en el nombre de la regla, luego el bloque coincidente y opcional de JavaScript que se ejecuta y devuelve desde la regla. Aquí hay un ejemplo aritmético simple proporcionado por la documentación de PEG.js: } } additive multiplicative { function makeInteger(o) { return parseInt(o.join(""), 10 ); start = additive = left :multiplicative "+" right :additive { return left + right ; } / multiplicative = left : primary "*" right :multiplicative { return left * right ; } / primary primary = integer / "(" additive:additive ")" { return additive; } integer "integer" = digits:[ 0 -9 ] + { return makeInteger(digits); } El analizador de salida de esta gramática puede analizar y evaluar expresiones aritméticas simples, por ejemplo que evalúa a . Puede probar este analizador en . Tenga en cuenta que no maneja espacios entre tokens (para simplificar el código), con un analizador necesita manejar esto explícitamente. 10+2*3 16 PEG.js Online Tool Pero lo que necesitamos no es interpretar el código y devolver un solo valor sino devolver Esprima AST. Para ver cómo se ve Esprima AST, puede consultar , seleccionar Esprima como salida y escribir algo de JavaScript. AST Explorer Aquí hay un ejemplo de código simple como este: } if (foo == "bar" ) { 10 + 10 10 * 20 La salida en formato JSON se ve así: { ] }, ] }, ] }, { ] }, ] }, ] }, ] }, { ] }, ] }, ] }, ] } ], ] }, ] } ], ] } { "type" : "Program" , "body" : [ "type" : "IfStatement" , "test" : { "type" : "BinaryExpression" , "operator" : "==" , "left" : { "type" : "Identifier" , "name" : "foo" , "range" : [ 4 , 7 "right" : { "type" : "Literal" , "value" : "bar" , "raw" : "\"bar\"" , "range" : [ 11 , 16 "range" : [ 4 , 16 "consequent" : { "type" : "BlockStatement" , "body" : [ "type" : "ExpressionStatement" , "expression" : { "type" : "BinaryExpression" , "operator" : "+" , "left" : { "type" : "Literal" , "value" : 10 , "raw" : "10" , "range" : [ 23 , 25 "right" : { "type" : "Literal" , "value" : 10 , "raw" : "10" , "range" : [ 28 , 30 "range" : [ 23 , 30 "range" : [ 23 , 30 "type" : "ExpressionStatement" , "expression" : { "type" : "BinaryExpression" , "operator" : "*" , "left" : { "type" : "Literal" , "value" : 10 , "raw" : "10" , "range" : [ 34 , 36 "right" : { "type" : "Literal" , "value" : 20 , "raw" : "20" , "range" : [ 39 , 41 "range" : [ 34 , 41 "range" : [ 34 , 41 "range" : [ 18 , 43 "alternate" : null , "range" : [ 0 , 43 "sourceType" : "module" , "range" : [ 0 , 43 No necesita preocuparse por el "rango" y "sin procesar". Son parte de la salida del analizador. Dividamos el JSON en su parte: Si declaración La instrucción if debe tener el formato: }, }, } { "type" : "IfStatement" , "test" : { "consequent" : { "alternate" : null Donde "prueba" y "consecuente" son expresiones: si condición de declaración La condición puede ser cualquier expresión pero aquí tendremos una expresión binaria que compara dos cosas: } { "type" : "BinaryExpression" , "operator" : "==" , "left" : {}, "right" : {} Variables El uso de variables se ve así: } { "type" : "Identifier" , "name" : "foo" cadena literal Una cadena literal que se usa en nuestro código se ve así: } { "type" : "Literal" , "value" : "bar" Bloquear con llaves El bloque dentro de if se crea así: } { "type" : "BlockStatement" , "body" : [ ] Programa completo Y todo el programa se crea así: } { "type" : "Program" , "body" : [ ] PEG Parser para su propio idioma que compila en JavaScript Para nuestro lenguaje de demostración, crearemos un código que se parece a Ruby: end if foo == "bar" then 10 + 10 10 * 20 y crearemos AST, que luego creará código JavaScript. Peg gramática para si se ve así: return { }, }; } if = "if" _ expression:(comparison / expression) _ "then" body:(statements / _) _ "end" { "type" : "IfStatement" , "test" : expression, "consequent" : { "type" : "BlockStatement" , "body" : body "alternate" : null tenemos el token "si", entonces una expresión que es comparación o expresión y el cuerpo son declaraciones o espacios en blanco. _ son espacios en blanco opcionales que se ignoran. _ = [ \t\n\r]* La comparación se ve así: }; } comparison = _ left :expression _ "==" _ right :expression _ { return { "type" : "BinaryExpression" , "operator" : "==" , "left" : left , "right" : right La expresión se ve así: expression = expression :(variable / literal) { return expression ; } La variable se crea a partir de tres reglas: return { } } variable = !keywords variable:name { "type" : "Identifier" , "name" : variable keywords = "if" / "then" / "end" name = [A-Z_$az][A-Z_a-z0 -9 ]* { return text(); } Ahora veamos las declaraciones: } return { } statements = _ head:( if / expression_statement) _ tail:( ! "end" _ ( if / expression_statement))* { return [head].concat( tail.map ( function ( element ) { return element[ 2 ] ; })) ; expression_statement = expression :expression { "type" : "ExpressionStatement" , "expression" : expression } ; Y lo último son los literales: } } literal = value:( string / Integer) { return { "type" : "Literal" , "value" : value } ; string = "\"" ([^ "] / " \\\\\ "" )* "\"" { return JSON.parse( text ()) ; Integer "integer" = _ [ 0 -9 ]+ { return parseInt( text (), 10 ) ; } Y ese es todo el analizador, que genera AST. Después de tener Esprima AST, todo lo que tenemos que hacer es generar el código con escodegen. El código que genera el AST y crea el código JavaScript se ve así: const ast = parser.parse(code); const js_code = escodegen.generate(ast); la variable del analizador es el nombre que le das cuando generas el analizador usando PEG.js. Y aquí hay una demostración simple que estaba usando para escribir el analizador, puedes jugar con la gramática y generar una sintaxis diferente para tu propio lenguaje de programación que se compila en JavaScript. . Demostración del generador de analizador Esta sencilla aplicación guarda tu código en LocalStorage, si compila sin errores, en cada cambio. Así que puedes usarlo de forma segura para crear tu propio idioma. Pero no garantizo que no perderá su trabajo, por lo que puede usar algo que sea más robusto. El proyecto PEG.js original ya no se mantiene, pero hay una nueva bifurcación, , que se mantiene y es compatible con versiones anteriores de PEG.js, por lo que será fácil de cambiar. NOTA: Peggy Conclusión En este artículo, usamos un generador de analizador para crear . Como puede ver, comenzar un proyecto como este no es tan difícil. Las técnicas explicadas en este artículo deberían permitirle crear cualquier lenguaje de programación que compile en JavaScript por su cuenta. Esta puede ser una forma de crear una PoC de un idioma que desea diseñar. Hasta donde yo sé, esta es la forma más rápida de hacer que algo funcione. Pero puede usar su idioma tal como está y crear su propio DLS (Lenguaje específico del dominio), escribir código en ese idioma y hacer que JavaScript haga el trabajo duro. un lenguaje personalizado simple para el compilador de JavaScript

BUNCH

Read My Stories

Este audio es producido en el idioma original de la historia!

Demasiado Largo; Para Leer

In your car, at home, or at work — Bosch technology shapes many areas of life.

Cómo crear un lenguaje de programación que compile en JavaScript

Demasiado Largo; Para Leer

Company Mentioned

Jakub T. Jankiewicz

About Author

ETIQUETAS

Languages

ESTE ARTÍCULO FUE PRESENTADO EN...

Cómo crear un lenguaje de programación que compile en JavaScript

Demasiado Largo; Para Leer

Company Mentioned

Jakub T. Jankiewicz

About Author

ETIQUETAS

Languages

ESTE ARTÍCULO FUE PRESENTADO EN...

HISTORIAS RELACIONADAS