cardboard js
1.0.0
Bem-vindo ao Papelão. Uma estrutura reativa extremamente leve ( cerca de 18kb ), de alto desempenho e muito simples . Oferece quase tudo que você esperaria de uma estrutura completa. Como gerenciar estado, componentes, lógica e o resto. Mas com uma diferença, você não precisa escrever nenhum HTML, CSS ou JSX se não quiser. Veja o que ele pode fazer .
É semelhante em filosofia ao VanJS, se isso lhe parece familiar, mas com muito mais recursos e uma API mais extensa.
!OBSERVAÇÃO! : O papelão está em desenvolvimento, use-o com cautela.
Você pode verificar o marco v1.0.0 para ter uma visão do estado de desenvolvimento - a ajuda é muito apreciada!
const Counter = ( ) => {
const count = state ( 0 ) ;
return button ( )
. text ( `Clicked $count times` , { count } )
. addStyle ( 'color' , 'gray' )
. stylesIf ( count , { color : 'black' } ) // If count > 0, it will make the color black
. clicked ( ( _ ) => count . value ++ ) ;
} ;
// Counter will be added to the body
tag ( '(body)' ) . append ( Counter ( ) ) ; npm install https://github.com/nombrekeff/cardboard-js
import { tag , init , allTags } from 'cardboard-js' ;
// Or
import { tag , init , allTags } from 'node_modules/cardboard-js/dist/cardboard.js' ;
const { div , p , span , b , script , button , style , a , hr } = allTags ;
const root = attach ( tag ( '(body)' ) ) ;
root . append ( div ( p ( 'Hello world!' ) ) ) ; Se quiser adicioná-lo ao seu site e começar a usar o Cardboard, você pode importar o arquivo do pacote:
< script src =" node_modules/cardboard-js/dist/bundle/cardboard.bundle.js " > </ script >
< script >
const { div , p } = Carboard . allTags ;
</ script >A filosofia é ser capaz de criar aplicativos web totalmente funcionais e de alto desempenho sem a necessidade de usar HTML, CSS ou JSX. Apenas JS ou TS. Em vez de escrever HTML e depois criar JS que interaja com o HTML e adicionar CSS para estilizar a página. Você escreve diretamente o código que representa HTML , CSS , estado e lógica .
Você também não precisa ter um processo de construção/compilação ( a menos que você use TS ou queira ). Dado que o papelão é tão leve, você pode escrever seu aplicativo como um módulo es6 ( confira este exemplo para ver um exemplo de configuração ), portanto não há necessidade de nenhum processo de construção, pelo menos para desenvolvimento.
Ele oferece uma solução robusta de gerenciamento de estado pronta para uso. O conceito é semelhante ao de reagir. Você cria um estado, depois usa-o em seu aplicativo e, sempre que o estado muda, ele é atualizado automaticamente onde quer que você o tenha usado.
Aqui está uma lista de alguns dos recursos que ele oferece ( embora haja mais ):
style e escrever o CSS diretamente como um objeto JS.properties de estilo, etc...)NOTA: Há também uma alternativa do lado do servidor ao Cardboard que também escrevi, chamada Hobo . Caso você precise de algo semelhante ao Cardboard que funcione no lado do servidor! Estou planejando fazer o Cardboard funcionar no lado do servidor também na v2.0.0. Então você pode esperar por isso ou ajudar!
Se você não gosta de escrever HTML, CSS ou JSX, como eu. Ou precisa de uma estrutura simples e leve que possa fazer a maioria das coisas que estruturas maiores podem fazer com um espaço menor e ao mesmo tempo ter muito desempenho, o Cardboard pode ser para você! O Cardboard pode ser usado para criar qualquer coisa, desde uma página estática até aplicativos mais avançados, como painéis. Deve ser capaz de fazer a maioria das coisas!
Mas é perfeito para quando você deseja criar uma página muito pequena onde você precisa de uma estrutura reativa e precisa criá-la rapidamente.
Não vou mentir, não esperava escrever isso quando comecei a escrever o Cardboard. Era para ser um pequeno experimento para outro projeto meu (Hobo) que pensei que iria falhar.
Qual foi o experimento? Eu ouço você perguntando. Bem, foi apenas para fazer o Hobo funcionar com o DOM, em vez de renderizar o HTML como uma string. É engraçado como as coisas acontecem às vezes! Nunca sabemos quando vamos construir algo de que nos orgulhar.
Você pode ler um artigo que fiz sobre como fiz o rascunho inicial do papelão!
Não vou contar a história completa, mas saiba que o Cardboard começou como um experimento destinado ao fracasso. Mas por algum motivo, cada peça passou a se encaixar perfeitamente umas nas outras, até hoje, onde o Cardboard pode ser considerado funcional. Ainda não terminei, ainda há muito trabalho antes desse ponto. Isso nos leva até você. Espero que você considere ajudar. Vamos fazer o Cardboard valer a pena ;)
Por que o nome? : História engraçada, bem, na verdade não. Chama-se Cardboard para manter a marca Hobo. Mas você poderia pensar que tem esse nome porque, assim como o papelão, é útil, leve, versátil e barato.
Bem, olá! Estou sempre aberto para ajuda em projetos, e neste em particular! Se você achar o projeto interessante, útil, divertido ou sentir algum outro tipo de emoção, e essa emoção o inclinar a talvez considerar ajudar, isso seria ótimo!
Você pode ajudar com o Wiki, usando e testando o projeto, reportando bugs, corrigindo bugs, adicionando funcionalidades, etc... Só lembre de deixar um issue se a mudança for grande ou alterar algum conceito central do papelão.
Dê uma olhada nestes guias:
