A questão é: sobre o que é meu projeto? Mas eu não sei. Os planos estão mudando. Há muitas idéias. Mas sempre há uma funcionalidade básica comum. Até agora, estou falando sobre isso. Já 5 meses. Após a exacerbação da primavera, em um ataque de solidão, quero compartilhar alguns dos desenvolvimentos.
A primeira etapa foi implantar o aplicativo Create React. Terá que ser finalizado com um arquivo. Há muito que é possível contornar o assustador comando de ejeção com o react-app-rewired. Sinful, config-overrides.js é completamente meu; Acabou desajeitadamente, quero reescrevê-lo em lentes funcionais. Mas tudo funciona: espaços de trabalho de fios, plugins babel, menos carregador (para personalização do Ant-Design), caminhos de importação absolutos.
Prettier configurado de forma que o projeto tenha uma configuração para o VSCode e confirma (o .prettierrc está na raiz). Em algum momento, as etapas pararam de satisfazer, não me lembro o porquê. Foi muito rápido substituí-lo (para saber como se conectar, consulte package.json). E foi muito irritante que mais bonito reformatou os arquivos json de serviço. Adicionadas exceções ao .prettierignore para package.json e tsconfig.json - um pouco menos de lixo nas confirmações.
Algumas palavras sobre o utilitário nvm. Na raiz está .nvmrc com a versão especificada do nó + pacote npm, no meu caso "estável". O suficiente para $ nvm use para mudar o ambiente. Muito confortável
Lerna parecia uma vez um monstro assustador. Como resultado, eu uso explicitamente apenas um $ lerna publish . Os pacotes no meu mono-repositório são publicados no npmjs.com com uma atualização de sua própria versão, que você escolhe no modo interativo. Em combinação com os espaços de trabalho do yarn, é possível decompor o projeto em pacotes e desenvolvê-los ao mesmo tempo (o hot-reload funciona para todo o código). A incorporação prática de conexão e conexão. Google se você não sabe o que é; ajuda muito a gerenciar a complexidade do código. Ele também estragou o pacote cumulativo para compilar pacotes e usa as configurações gerais de texto datilografado do aplicativo host do mono-repositório.
Sobre o Ant-Design. É incrível quantos gerentes e desenvolvedores não entendem os benefícios de construir uma casa com tijolos acabados e se apressam para produzir seus próprios tijolos. É realmente necessário reinventar a implementação da janela modal? Aprender a personalizar e compor é uma prática reaplicada; este é o próximo nível de abstração na construção da complexidade tecnológica. Só é preciso mudar um pouco a abordagem do design, dadas as restrições. Tem que dançar do fogão, em vez do habitual "eu vejo". Mas o benefício me parece óbvio e substancial.
Dentro do Ant-Design, menos é usado - o pré-processador css. Cerca de 700 variáveis estão disponíveis. Personalizar - eu não quero. No entanto, minha escolha é css-in-js. Então você precisa extrair as variáveis necessárias em javascript - dentro do less-loader, há uma opção modifyVars. Para reutilizar o mesmo theme.js no NodeJS e ES, usei esm: const requireForES = require('esm')(module /*, options*/) . Mas muitas variáveis são derivadas de outras, por exemplo, @primary-color: @blue-6 . O proxy ajudou nos campos do tema: primaryColor: (theme) => theme.blue6 ; se o campo no tema for uma função, chame a função e, assim, recursivamente para o próximo campo, até chegarmos ao campo com o valor final. E há menos mixins - esse é o código js compactado em menos; por exemplo, copiei a função colorPalette: primaryColor5: (theme) => colorPalette(theme.primaryColor, 5) novamente em javascript. Fontes theme.js .
Oh, eu comi o cachorro em componentes estilizados. Mas você não deve perder tempo com histórias, porque o lançamento do reshadow está chegando (eu realmente quero acreditar). Uma apresentação muito inspiradora na React Russia 2019. Em antecipação ao feriado, este será um nível diferente de conveniência de desenvolvimento. Enquanto isso, apenas cerca de um ponto geral, incluí nas configurações do VSCode "editor.foldingStrategy": "indentation" para recolher normalmente o código css dentro da string do modelo. Irritado que o editor não se lembre minimizado. Seria necessário procurar um plugin.
Os projetos nos meus planos são diferentes, mas invariavelmente, que os projetos são para participantes ativos. Então você precisa da funcionalidade de autorização. De preferência sem senhas. Resposta: Kit de conta do Facebook. Um código digital curto para o login é fornecido por carta ou SMS (gratuito) ou uma mensagem no WhatsApp. Ele escreveu seu invólucro no topo da API enquanto ele vive dentro do projeto como um componente de reação. Isso funciona muito bem. Agora eu quero colocá-lo em um pacote npm, naquela época eu não sabia como usar os espaços de trabalho do lerna + yarn.
Muitos projetos sobre conteúdo de texto. Precisa de um editor de texto. Apenas remarcação - não é suficiente. Sim, dentro do formato de remarcação, você pode adicionar inserções HTML, mas este não é um editor para o consumidor em massa, mas para hackers. A saída é um editor de blocos. E para os blocos, você precisa armazenar metadados. Por exemplo, um widget de galeria de imagens - alguns cliques do mouse e pronto. E também quero reorganizar os blocos, também com o mouse. Eu gosto do koenig-editor dentro do Ghost e ainda do EditorJS doméstico. É claro que o medium.com é o progenitor. Mas não estou satisfeito com a funcionalidade de 100%. E não se trata de React. Pode levar o DraftJS pelo Facebook? Infelizmente, vomitou. SlateJS inspirado por ele ganha comparativamente o momento. Mas SlateJS é um construtor de plugins. Deve haver montagens prontas com base nela. Sob o spoiler, há uma longa lista de prós e contras de alguns.
Texto ocultoeditor de conservas
[+] não mostra o menu pairando quando um mouse seleciona um cabeçalho ou texto dentro de um bloco com código
[-] quando a operação de arrastar e soltar for concluída para a imagem, um cursor não desenhado é observado
[+] sinal de adição com um menu de contexto quando o cursor está em uma linha vazia fora do bloco de código (como no Ghost, mas também há um sinal de adição quando você coloca o mouse no final do texto)
[+] Um sinal de adição com um menu de contexto aparece no final da linha (mas se a linha estiver decorada como "H2", o sinal de adição não aparecerá mais - isso não é um bug, mas um recurso)
[+] animação de sinal de adição com menu de contexto (não existe no Ghost); e o sinal de mais se transforma em uma cruz quando o menu é aberto
[-] no menu de contexto, existem botões para formatar o texto (no Ghost, existem apenas widgets)
[+] aplicação de componentes antd para ferramentas dentro do editor
[+] rica funcionalidade para carregar fotos: arrastar e soltar, url, abrir arquivo
[-] As imagens podem ser baixadas apenas uma por vez (sem widget da galeria)
[+] há alinhamento de imagens e outros blocos
[+] editar o tamanho da imagem (mas seria mais fácil, como nos modos normal branco-cheio do Ghost)
[+] aplicativo de formatação de redução
[-] falta de arrastar e soltar para cartões (na terminologia do Ghost)
[+] widget de tabela, como no bom e velho MS Word
[-] por url, você pode inserir apenas vídeo (no Ghost, esse é o widget "Other ...", que suporta muitas outras coisas - "conteúdo incorporado")
O widget de link [-] não permite editá-lo (no Ghost é possível)
[-] Menu flutuante e links de pop-up de url são exibidos ao mesmo tempo (no Ghost, a seleção de texto oculta os links pop-up de url)
[-] O Menu suspenso desliza sobre a borda da área editada (no Ghost, ele está alinhado com a borda)
página de reação (editor de ory)
modo [+] para alterar a composição dos blocos via arrastar e soltar
[+] modo de redimensionamento de imagens e outros blocos, se houver vários deles na mesma linha (mas apenas via arrastar e soltar)
modo [+] para adicionar widgets (mas apenas através de arrastar e soltar)
[+] o modo "resultado da visualização" altera o comportamento dos widgets (por exemplo: a imagem fica clicável)
[+] no modo de alterar a composição dos blocos, um bloco com uma imagem pode ser inserido em um bloco com texto via arrastar e soltar - para que o texto enquadre a imagem; Além disso, existe uma "proteção contra o tolo": para que você possa inserir apenas uma imagem
[-] sem um mouse, a funcionalidade é muito limitada
[-] sem alongamento do tamanho da imagem (como nos modos Ghost normal branco-cheio)
[-] não existe formatação de redução (existem dois modos no Ghost: no texto, em um widget separado)
[-] não é óbvio como remover um bloco de figuras (você precisa arrastá-lo para a cesta via arrastar e soltar) - você precisa mover o ícone da cesta para fora do texto
[-] não há quadro de foco para o widget de imagem no modo de edição de propriedades (embora exista um widget de vídeo HTML5, provavelmente a indicação do navegador define a indicação de foco)
[+] a barra de ferramentas para editar o elemento atual (barra de ferramentas para texto ou uma caixa de diálogo para imagens etc.) aparece no porão e fica encaixada lá
[-] o modo de adicionar widgets retorna ao estado inicial da seleção de widgets após a inserção de qualquer widget, mas eu gostaria de prosseguir com a edição do widget adicionado; Provavelmente é isso que se pretendia: primeiro, jogue blocos e só depois edite-os
[-] a URL do link é estupidamente excluída quando o botão é clicado, mas eu gostaria de aparecer com a exibição da URL do link e a caixa de diálogo de edição do link (o Ghost também não tem edição, apenas um campo de entrada vazio para um novo link); é claro que as compensações devidas a um possível conflito de adicionar um link a um link devem ser resolvidas; na sanidade, uma caixa de diálogo serve para editar o link (e exibi-lo) e seguir este link
[-] não há arrastar e soltar na ferramenta de edição de imagem para adicionar a imagem original
[-] nenhum widget para código
[-] drag'n'drop não está implementado para carregar imagens
[-] a caixa de diálogo de seleção de arquivo do sistema para baixar imagens não filtra arquivos válidos (somente imagens devem ser exibidas)
[-] no Ghost, no modo arrastar e soltar, outros elementos são deslocados animadamente para a barra indicadora onde o drop será executado
[-] no modo de alterar a composição dos blocos através de arrastar e soltar, um ponteiro parasita de tira é exibido em duplicado (aparentemente devido a elementos div adicionais)
netlify-cms-widget-markdown
[+] Você pode ver como se casar com o slate e comentar (commentSlate.js, slateRemark.js)
[+] plug-ins slate-edit-list embutidos e slate-edit-table
[+] duas implementações de editor: RawEditor e VisualEditor
sanidade
[+] seleção de corte para fotos (ver anexo) - não se aplica a slate-js
[+] colar remarcação (?)
Ok, eu tenho que mexer com a minha muito, muito melhor compilação no SlateJS. Então o habr.com vai estragar tudo sozinho. Pense por que você precisa do VueJS (piada). Portanto, primeiro você precisa de uma composição de controles para controlar o editor: adicionar novos blocos, controlar o bloco selecionado, alterar as configurações do bloco, formatar o texto selecionado. Eu copiei várias vezes, parece ter resolvido, enquanto eu gosto. Controles baseados em Ant-Design. Publicado o pacote npm slate-controls. Não julgue estritamente - este é um filho amado.
Fotos elegantes no telefone Fontes do projeto futuro .