Mapas de fontes

.vscode/launch.json

@@ -4,6 +4,20 @@
     // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
     "version": "0.2.0",
     "configurations": [
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "FolEs > Menu de Ajuda",
+            "skipFiles": ["<node_internals>/**", "node_modules/**"],
+            "cwd": "${workspaceRoot}",
+            "console": "integratedTerminal",
+            "args": [
+                "${workspaceFolder}${pathSeparator}execucao.ts",
+                "-?"
+            ],
+            "runtimeExecutable": "node",
+            "runtimeArgs": ["--nolazy", "-r", "ts-node/register/transpile-only"]
+        },
         {
             "type": "node",
             "request": "launch",
@@ -13,11 +27,27 @@
             "console": "integratedTerminal",
             "args": [
                 "${workspaceFolder}${pathSeparator}execucao.ts",
+                "--console",
                 "${workspaceFolder}${pathSeparator}exemplos${pathSeparator}exemplo.foles"
             ],
             "runtimeExecutable": "node",
             "runtimeArgs": ["--nolazy", "-r", "ts-node/register/transpile-only"]
         },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "FolEs > Exemplos > exemplo.foles (com mapas)",
+            "skipFiles": ["<node_internals>/**", "node_modules/**"],
+            "cwd": "${workspaceRoot}",
+            "console": "integratedTerminal",
+            "args": [
+                "${workspaceFolder}${pathSeparator}execucao.ts",
+                "--mapas",
+                "${workspaceFolder}${pathSeparator}exemplos${pathSeparator}mapas-fontes${pathSeparator}exemplo.foles"
+            ],
+            "runtimeExecutable": "node",
+            "runtimeArgs": ["--nolazy", "-r", "ts-node/register/transpile-only"]
+        },
         {
             "type": "node",
             "request": "launch",
@@ -27,6 +57,7 @@
             "console": "integratedTerminal",
             "args": [
                 "${workspaceFolder}${pathSeparator}execucao.ts",
+                "--console",
                 "${workspaceFolder}${pathSeparator}exemplos${pathSeparator}exemplo2.foles"
             ],
             "runtimeExecutable": "node",
@@ -41,6 +72,7 @@
             "console": "integratedTerminal",
             "args": [
                 "${workspaceFolder}${pathSeparator}execucao.ts",
+                "--console",
                 "${workspaceFolder}${pathSeparator}exemplos${pathSeparator}importacao.foles"
             ],
             "runtimeExecutable": "node",
@@ -55,6 +87,7 @@
             "console": "integratedTerminal",
             "args": [
                 "${workspaceFolder}${pathSeparator}execucao.ts",
+                "--console",
                 "${workspaceFolder}${pathSeparator}exemplos${pathSeparator}reverso${pathSeparator}exemplo.css"
             ],
             "runtimeExecutable": "node",

README.md

@@ -717,3 +717,11 @@ ligacao {
 | [visibilidade-conteudo](https://github.com/DesignLiquido/FolEs/wiki/Modificador-visibilidade-conte%C3%BAdo)                   |	[content-visibility](https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility) |
 | [visibilidade-conteúdo](https://github.com/DesignLiquido/FolEs/wiki/Modificador-visibilidade-conte%C3%BAdo)                   |	[content-visibility](https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility) |
 | [visibilidade-fundo](https://github.com/DesignLiquido/FolEs/wiki/Modificador-visibilidade-fundo)                      |	[backface-visibility](https://developer.mozilla.org/pt-BR/docs/Web/CSS/backface-visibility) |
+
+# Recursos para desenvolvedores
+
+Alguns sites são fundamentais para entender a implementação feita aqui:
+
+- https://sokra.github.io/source-map-visualization/#custom
+- https://evanw.github.io/source-map-visualization
+- https://lachlan-miller.me/articles/decoding-variable-length-quantity-vlq-for-source-maps

execucao.ts

@@ -1,3 +1,4 @@
+import { Exportador } from './fontes/exportador';
 import { FolEs } from './fontes/foles';
 import { Command } from 'commander';
 
@@ -6,12 +7,23 @@ const principal = () => {
     let nomeArquivo: string;
 
     analisadorArgumentos
+        .helpOption('-?, --ajuda', 'Exibe a ajuda para o comando.')
         .argument('[arquivos...]', 'Nomes dos arquivos (opcional)')
         .option(
             '-a, --aninhamento',
             'Gera CSS com aninhamento. Não recomendado usar se o CSS executar em navegadores antigos.',
             false
         )
+        .option(
+            '-m, --mapas',
+            'Gera CSS com mapas de fontes.',
+            true
+        )
+        .option(
+            '-c, --console',
+            'Escreve a saída da tradução em console.',
+            null
+        )
         .action((arquivos) => {
             if (arquivos.length > 0) {
                 nomeArquivo = arquivos[0];
@@ -22,24 +34,36 @@ const principal = () => {
     const opcoes = analisadorArgumentos.opts();
 
     if (!nomeArquivo) {
-        console.error('Favor informar nome do arquivo a ser traduzido.', 70);
-        return;
+        console.error('Favor informar nome do arquivo a ser traduzido.');
+        process.exit(70);
     }
 
     const foles = new FolEs(opcoes.aninhamento);
+    let resultadoTraducao: string;
 
     if (nomeArquivo.endsWith("foles")) {
-        console.log(foles.converterParaCss(nomeArquivo));
-        return;
-    } 
-
-    if (nomeArquivo.endsWith("css")) {
-        const retorno = foles.converterParaFolEs(nomeArquivo);
-        console.log(retorno);
+        resultadoTraducao = foles.converterParaCss(nomeArquivo);
+    } else if (nomeArquivo.endsWith("css")) {
+        resultadoTraducao = foles.converterParaFolEs(nomeArquivo);
+    } else {
+        console.error("Formato de arquivo não reconhecido.");
+        process.exit(70);
+    }
+
+    if (opcoes.console) {
+        console.log(resultadoTraducao);
         return;
     }
 
-    throw new Error("Formato de arquivo não reconhecido.");
+    if (opcoes.mapas) {
+        const resultadoMapas = foles.converterParaCssComMapas(nomeArquivo);
+        const exportador = new Exportador();
+        if (nomeArquivo.endsWith('foles')) {
+            exportador.exportar('css', nomeArquivo, resultadoMapas[0], resultadoMapas[1]);
+        } else {
+            exportador.exportar('foles', nomeArquivo, resultadoMapas[0], resultadoMapas[1]);
+        }
+    }
 }
 
 principal();

exemplos/mapas-fontes/exemplo.foles

@@ -0,0 +1,3 @@
+lmht {
+    largura-borda-direita: 130mm;
+}

exemplos/mapas-fontes/exemplo.html

@@ -0,0 +1,8 @@
+<html>
+    <head>
+        <link rel="stylesheet" href="exemplo.css">
+    </head>
+    <body>
+        <p>Teste</p>
+    </body>
+</html>

fontes/avaliador-sintatico/avaliador-sintatico-reverso.ts

@@ -7,9 +7,10 @@
 import { SeletorEstruturasHtml } from "../estruturas/seletor-estruturas-html";
 
 import tiposDeSimbolos from "../tipos-de-simbolos/css";
-import { Seletor } from "../seletores";
+import { Seletor, SeletorEstrutura } from "../seletores";
 import { AvaliadorSintaticoInterface, ImportadorInterface } from "../interfaces";
 import { HexadecimalCor } from "../valores/metodos/hexadecimal-cor";
+import { Estrutura } from "../estruturas/estrutura";
 
 export class AvaliadorSintaticoReverso implements AvaliadorSintaticoInterface {
     simbolos: Simbolo[];
@@ -77,14 +78,17 @@
     protected seletorPorEstrutura(): Seletor {
         const simboloSeletor = this.avancarEDevolverAnterior();
         const pseudoclasse = this.resolverPseudoclasse();
-        return new SeletorEstruturasHtml(
-            simboloSeletor.lexema,
-            { 
-                linha: simboloSeletor.linha,
-                colunaInicial: simboloSeletor.colunaInicial,
-                colunaFinal: simboloSeletor.colunaFinal
-            }
-        ) as Seletor;
+        return new SeletorEstrutura(
+            new SeletorEstruturasHtml(
+                simboloSeletor.lexema,
+                { 
+                    linha: simboloSeletor.linha,
+                    colunaInicial: simboloSeletor.colunaInicial,
+                    colunaFinal: simboloSeletor.colunaFinal
+                }
+            ) as Estrutura,
+            pseudoclasse
+        );
     }
 
     protected seletorPorId(): Seletor {
@@ -165,7 +169,12 @@
             valorModificador instanceof Simbolo ? valorModificador.lexema : valorModificador,
             quantificador && quantificador.hasOwnProperty('lexema') ? 
                 quantificador.lexema :
-                quantificador
+                quantificador,
+            {
+                linha: modificador.linha,
+                colunaInicial: modificador.colunaInicial,
+                colunaFinal: modificador.colunaFinal
+            }
         );
 
         return classeModificadora as Modificador;

fontes/avaliador-sintatico/avaliador-sintatico.ts

@@ -471,11 +471,11 @@
     declaracao(): Declaracao | null {
         if (this.estaNoFinal()) return null;
         switch (this.simbolos[this.atual].tipo) {
             case tiposDeSimbolos.IMPORTAR:
                 this.avancarEDevolverAnterior();
                 const caminhoArquivo = this.simbolos[this.atual];
                 const resultadoImportacao = this.importador.importar(caminhoArquivo.literal, false);
-                this.simbolos.splice(this.atual - 1, 2, ...resultadoImportacao.simbolos);
+                this.simbolos.splice(this.atual - 1, 2, ...resultadoImportacao[1].simbolos);
                 this.atual -= 1;
                 return null;
             default:

fontes/exportador/README.md

@@ -0,0 +1,3 @@
+# Exportador
+
+A função do exportador é escrever arquivos. Por ora, este exportador fica neste projeto mesmo, mas pode ser que precisemos migrar o exportador para um projeto dedicado a Node.js, assim como foi feito com Delégua. A razão disso é que JavaScript tradicional não tem acesso a um sistema de arquivos, e execuções de FolEs em um navegador de internet têm de ser possíveis. 

fontes/exportador/index.ts

@@ -0,0 +1,38 @@
+import sistemaArquivos from 'fs';
+
+/**
+ * Classe que exporta traduções em diferentes formatos de arquivos. Como possui dependência 
+ * direta com Node.js, deve ser transferida futuramente para um projeto próprio.
+ */
+export class Exportador {
+
+    /**
+     * A exportação em si. Exporta para o mesmo diretório onde está o arquivo de origem.
+     * @param formato O formato do arquivo traduzido.
+     * @param arquivoOrigem O nome do arquivo de origem.
+     * @param conteudo O conteúdo da tradução.
+     * @param mapa Um mapa de fontes, se disponível.
+     */
+    exportar(formato: string, arquivoOrigem: string, conteudo: string, mapa?: string) {
+        let conteudoCompleto = conteudo;
+        if (mapa) {
+            conteudoCompleto += `\n/*# sourceMappingURL=data:application/json;base64,`;
+            conteudoCompleto += `${mapa} */\n`;
+        }
+
+        switch (formato) {
+            case 'css':
+                sistemaArquivos.writeFile(arquivoOrigem.replace('foles', 'css'), conteudoCompleto, (erro) => {
+                    if (erro) throw erro;
+                });
+                break;
+            case 'foles':
+                sistemaArquivos.writeFile(arquivoOrigem.replace('css', 'foles'), conteudoCompleto, (erro) => {
+                    if (erro) throw erro;
+                });
+                break;
+            default:
+                throw new Error('Formato de arquivo não reconhecido.');
+        }
+    }
+}

fontes/foles.ts

@@ -6,6 +6,9 @@
 import { SerializadorReverso } from './serializadores/serializador-reverso';
 import { Importador } from './importador';
 import { ResultadoLexadorInterface, SimboloInterface } from './interfaces';
+import { Tradutor } from "./tradutores/tradutor";
+import { TradutorReverso } from "./tradutores/tradutor-reverso";
+import { Base64 } from "./utilidades/base64";
 
 /**
  * O núcleo da linguagem FolEs.
@@ -17,8 +20,10 @@
     avaliadorSintaticoReverso: AvaliadorSintaticoReverso;
     importador: Importador;
     importadorReverso: Importador;
-    tradutor: Serializador;
-    tradutorReverso: SerializadorReverso;
+    serializador: Serializador;
+    serializadorReverso: SerializadorReverso;
+    tradutor: Tradutor;
+    tradutorReverso: TradutorReverso;
 
     constructor(traduzirComAninhamentos: boolean) {
         this.lexador = new Lexador();
@@ -28,8 +33,10 @@
         this.importadorReverso.extensaoPadrao = ".css";
         this.avaliadorSintatico = new AvaliadorSintatico(this.importador);
         this.avaliadorSintaticoReverso = new AvaliadorSintaticoReverso(this.importadorReverso);
-        this.tradutor = new Serializador(traduzirComAninhamentos);
-        this.tradutorReverso = new SerializadorReverso(traduzirComAninhamentos);
+        this.serializador = new Serializador(traduzirComAninhamentos);
+        this.serializadorReverso = new SerializadorReverso(traduzirComAninhamentos);
+        this.tradutor = new Tradutor();
+        this.tradutorReverso = new TradutorReverso();
     }
 
     /**
@@ -39,28 +46,42 @@
      */
     private converterParaCssInterno(simbolos: SimboloInterface[]): string {
         const resultadoAvaliadorSintatico = this.avaliadorSintatico.analisar(simbolos);
-        const traducao = this.tradutor.serializar(resultadoAvaliadorSintatico);
+        const traducao = this.serializador.serializar(resultadoAvaliadorSintatico);
         return traducao;
     }
 
     private converterParaFolEsInterno(simbolos: SimboloInterface[]): string {
         const resultadoAvaliadorSintaticoReverso = this.avaliadorSintaticoReverso.analisar(simbolos);
-        const traducaoReversa = this.tradutorReverso.serializar(resultadoAvaliadorSintaticoReverso);
+        const traducaoReversa = this.serializadorReverso.serializar(resultadoAvaliadorSintaticoReverso);
         return traducaoReversa;
     }
 
     converterParaCss(nomeArquivo: string): string {
-        const resultadoLexador: ResultadoLexadorInterface = 
+        const resultadoLexador: [string[], ResultadoLexadorInterface] = 
             this.importador.importar(nomeArquivo, true);
 
-        return this.converterParaCssInterno(resultadoLexador.simbolos);
+        return this.converterParaCssInterno(resultadoLexador[1].simbolos);
+    }
+
+    converterParaCssComMapas(nomeArquivo: string): [string, string] {
+        const resultadoLexador: [string[], ResultadoLexadorInterface] = 
+            this.importador.importar(nomeArquivo, true);
+        const resultadoAvaliadorSintatico = this.avaliadorSintatico.analisar(resultadoLexador[1].simbolos);
+        const traducao = this.serializador.serializar(resultadoAvaliadorSintatico);
+        const resultadoTraducao = this.tradutor.traduzir(resultadoAvaliadorSintatico);
+        const mapa = this.tradutor.gerarMapaFontes(resultadoTraducao, resultadoLexador[0].join('\n'));
+
+        return [
+            traducao, 
+            new Base64().encode(JSON.stringify(mapa))
+        ];
     }
 
     converterParaFolEs(nomeArquivo: string): string {
-        const resultadoLexador: ResultadoLexadorInterface = 
+        const resultadoLexador: [string[], ResultadoLexadorInterface] = 
             this.importadorReverso.importar(nomeArquivo);
 
-        return this.converterParaFolEsInterno(resultadoLexador.simbolos);
+        return this.converterParaFolEsInterno(resultadoLexador[1].simbolos);
     }
 
     converterTextoParaCss(texto: string): string {