Olá pessoas queridas do TabNew !

Estou vindo aqui pra compartilhar sobre meu novo projeto opensource delicinha:
ele se chama Wed, e tem a pretenção de ser um framework para competir com o React/Vue/Angular, porém escrevendo a UI de forma declarativa e usando a linguagem Dart (usada no Flutter).

Atualmente o Wed está na versão 0.0.6, e é somente um wrapper de tags HTML que você pode criar páginas com Dart. Mas já é possível ter uma gerência de estado simples, e fazer o build para JS/wasm.

Como usar:

1 - Antes de tudo, assegure que você tem o Dart instalado no seu computador. Caso não tenha, pode seguir esse tutorial da própria equipe do Dart;

2 - Crie um projeto Dart para web:

dart create -t web <nome-do-projeto>

3 - Agora adicione o Wed nas dependencias:

cd <nome-do-projeto>
dart pub add wed

4 - Agora é só criar seus componentes no arquivo /web/main.dart. Ex:

import 'dart:html';

import 'package:wed/wed.dart';

// resgatando a tag div com id output que está em /web/index.html
final app = querySelector("#output") as DivElement;

// aqui o dart inicia sua execução
void main() {

  // adicionando nosso componente na tag principal do app
  renderApp(MyComponent(), app);
}

// nosso componente customizado, que extende `Component`
// assim como um widget no Flutter extende Stateles/StatufulWidget
class MyComponent extends Component {
  var text = 'Hello World';
  var isClicked = false;

  void toggleText() {
    isClicked = !isClicked;
    text = isClicked ? 'Clicked' : 'Hello World';
  }

  // esse método retorna o que o a classe deve rendezirar na DOM
  @override
  List<Component> build() {
    return [
      // aqui vamos adicionar uma div e passar algumas propriedades de CSS
      Div(
        props: DivProps(
          styles: CssStyle(
            width: Units.vw(100),
            height: Units.vh(100),
            backgroundColor: 'lightblue',
          ).merge(DisplayFlex.center),
        ),
        // em children podemos colocar outros componentes aninhados 
        children: [
          // só colocar um botão no meio da div pra brincarmos um pouco
          Button(
            props: ButtonProps(
              innerText: text,
              styles: CssStyle(
                backgroundColor: 'blue',
                fontSize: Units.rem(2),
                color: 'white',
                textAlign: TextAlign.center,
                padding: Padding.symmetric(horizontal: 30, vertical: 20),
                borderRadius: BorderRadius.all(12),
                borderWidth: Units.none,
                cursor: Cursor.pointer,
              ),
              onClick: (_) {
                // a função setState disponibilizada pela class Component
                // atualiza as modificações de propriedades dos componentes
                setState(() {
                  toggleText();
                });
              },
            ),
          ),
        ],
      ),
    ];
  }
}

5 - Pra iniciar o projeto é só rodar (documentação):

dart pub global activate webdev
webdev serve

ps: da primeira vez demora um pouco, mas depois vai rapidão. Quando aparecer uma mensagem com Succeeded after.. você já pode abrir no navegador em http://127.0.0.1:8080.

6 - Tudo tranquilo até agora né? Olha que massa o que o Dart gerou em HTML:

print da aplicação

<body>
  <div id="output">
      <div 
        id="" 
        title="" 
        class="" 
        style="background-color: lightblue; display: flex; height: 100vh; width: 100vw; align-items: center; justify-content: center;"
      >
        <button 
          id="" 
          title="" 
          class="" 
          style="background-color: blue; border-radius: 12px; border-width: 0px; color:white; font-size: 2rem; padding: 20px 30px; text-align: center; cursor: pointer;"
        >
          Hello World
        </button>
        </div>
    </div>
</body>

Contribuição:

Como eu disse antes, o projeto é opensource e está bem no começo. Há muito a se trabalhar ainda, criando classes/enums para as propriedades Css, novos wrappers para as tags html, documentações e várias outras coisa.

Então críticas, sugestões e comentários são extremamente bem-vindos, e se você quer saber mais sobre e contribuir no projeto, aqui estão os links para o repositório no github e pub.dev (o npm do Dart).

React + Flutter = Wed !! Um framework web Dart opensource.

Olá pessoas queridas do TabNew !

Como usar:

Contribuição: