Skip to content

Latest commit

 

History

History
265 lines (214 loc) · 6.04 KB

README.pt_BR.md

File metadata and controls

265 lines (214 loc) · 6.04 KB

GIMP
Lua WPP | Baixar

"Um jeito legal de criar Web Apps e páginas estáticas"

Crie um fork no github GitHub Repo stars Dependency free

Um pequeno mas poderoso Framework Lua para criar Web Apps e páginas estáticas, usando uma sintaxe muito mais limpa Lua WPP vai te fazer esquecer o HTML o clássico Olá mundo vai de:

<!doctype html>
<html>
  <head>
    <meta charset="utf8" />
    <title>Demonstração</title>
    <meta content="width=device-width,initial-scale=1.0" name="viewport" />
  </head>
  <body>
    <h1>Olá mundo</h1>
  </body>
</html>

Para:

html {
  head {
    title 'Demonstração'
  };
  body {
    h1 'Olá mundo'
  }
}

Com custo zero de abstração já que a página final será um HTML puro

Como se instala?

Com um interpretador Lua instalado e configurado no seu computador, adicione o lua-wpp:

  1. Clique em baixar
  2. Extraia o conteúdo do zip para alguma pasta

Simples assim, a instalação é tão simples quanto baixar e extraír um arquivo zip :)

Como se usa?

Na pasta que você extraiu:

  1. Crie um arquivo por exemplo Project.lua contendo:
Language = "pt_BR" -- Define o idioma padrão das páginas

Pages = {
  sources = "lua",
  output = "www",

  'index'
}

require "lua-wpp-framework"

Agora crie uma pasta chamada "lua" e nela um arquivo index.lua com o conteúdo:

html {
  head {
    title 'Demonstração'
  };
  body {
    h1 {
      style = "padding:9pt; background-color: #3498db; color: #ecf0f1";
      'Olá mundo'
    } * 7
  }
}

Ao rodar lua5.4 Project.lua você vai ter uma página construída em www com o nome "index.html" onde o texto Olá mundo irá aparecer 7 vezes com um fundo roxo e com a letra branca

Recursos

Só a sintaxe mais limpa não é suficiente, Lua WPP trás outros recursos chave (veja a documentação para mais detalhes):

Zero dependências

Não possuindo dependências, qualquer interpretador Lua padrão suportado é capaz de fazer o Lua WPP funcionar

Minificação

Gera rcódigo HTML minificado reduz o tamanho do projeto final

Autoseparação de código de evento

Separar o código das propriedades de evento (onclick por exemplo) facilita a manutenção (caso necessário) nas páginas renderizadas

Operadores mágicos

Repetição
p 'Esse texto irá aparecer 5x' * 5
Intercalação
ol {
  li ^ {'Item 1','Item 2','Item 3','Item 4'}
}

Interação com tabelas 2D

A essa altura você deve estar pensando que é necessário usar a clássica estrutura HTML para fazer tabelas:

table {
  tr {
    td 'A1', td 'B1', td 'C1',
  },
  tr {
    td 'A2', td 'B2', td 'C2',
  },
  tr {
    td 'A3', td 'B3', td 'C3',
  },
}

Mas não, com Lua WPP você pode simplesmente:

table {
  {'A1', 'B1', 'C1'},
  {'A2', 'B2', 'C2'},
  {'A3', 'B3', 'C3'},
}

Isso trás a possibilidade de criar tabelas diretamente de CSVs por exemplo

Componentes reutilizáveis

Um dos recursos mais poderosos de Lua WPP permite que você crie componentes e reutilize, é o fim das cadeias gigantes de tags gerando códigos confusos:

card = div:extends {
  style = 'box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); max-width:320px;',
  childrens = {
    first = {
       {
          element = img {
             style="width:100%"
          },
          bindings = {
             ['src'] = 'picture',
          }
       },
       {
          element = div:extends {
             style='padding: 2px 16px;',
             childrens = {
                first = {
                   {
                      element = h4,
                      bindings = {
                         [1] = 'title'
                      }
                   },
                   {
                      element = p,
                      bindings = {
                         [1] = 'description'
                      }
                   },
                }
             }
          },
          bindings = {
             ['title'] = 'title',
             ['description'] = 'description',
          }
       },
    }
  }
}

Apesar de que de início parça muito código para pouco resultado, o código para usar o componente fica muito mais legível:

Antes:

html {
  head {
    title 'Demonstração'
  },
  body {
    div {
      style = 'box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); max-width:320px;',
      img {
        style = 'width:100%;',
        src = "https://www.w3schools.com/howto/img_avatar.png"
      },
      div {
        style = "padding: 2px 16px;",
        h4 'John Doe',
        p 'Architect & Engineer',
      }
    },

    div {
      style = 'box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); max-width:320px;',
      img {
        style = 'width:100%;',
        src = "https://www.w3schools.com/howto/img_avatar2.png"
      },
      div {
        style = "padding: 2px 16px;",
        h4 'Jane Doe',
        p 'Interior Designer',
      }
    },
  }
}

Depois:

html {
  head {
    title 'Demonstração'
  },
  body {
    card {
      picture     = "https://www.w3schools.com/howto/img_avatar.png",
      title       = "John Doe",
      description = "Architect & Engineer"
    },
    card {
      picture     = "https://www.w3schools.com/howto/img_avatar2.png",
      title       = "Jane Doe",
      description = "Interior Designer"
    },
  }
}

Além disso basta alterar o componente uma vez para que todos sejam alterados, reutilização de código em HTML!