La pregunta es, ¿de qué trata mi proyecto? Pero no lo se. Los planes están cambiando. Hay muchas ideas Pero siempre hay una funcionalidad básica común. Hasta ahora, estoy hablando de esto. Ya 5 meses. Después de la exacerbación de la primavera, en un ataque de soledad, quiero compartir algunos de los desarrollos.
El primer paso fue implementar la aplicación Create React. Tendrá que finalizar con un archivo. Durante mucho tiempo ha sido posible evitar el comando de expulsión de miedo con react-app-rewired. Pecaminoso, config-overrides.js es completamente mío; Resultó torpemente, quiero reescribirlo en lentes funcionales. Pero funciona: espacios de trabajo de hilo, complementos de babel, menos cargador (para personalizar Ant-Design), rutas de importación absolutas.
Prettier configurado de tal manera que el proyecto tiene una configuración para VSCode y commits (.prettierrc está en la raíz). En algún momento, la pelusa dejó de ser satisfactoria, no recuerdo por qué. Bastante rápido vino a reemplazarlo (para saber cómo conectarse, consulte package.json). Y fue muy molesto que más bonito reformateara los archivos json del servicio. Se agregaron excepciones a .prettierignore para package.json y para tsconfig.json, un poco menos basura en commits.
Algunas palabras sobre la utilidad nvm. En la raíz está .nvmrc con la versión especificada del nodo + paquete npm, en mi caso "estable". Lo suficiente como para $ nvm use para cambiar el entorno. Muy comodo
Lerna una vez parecía un monstruo aterrador. Como resultado, utilizo explícitamente solo un $ lerna publish . Los paquetes en mi mono-repositorio se publican en npmjs.com con una actualización de su propia versión, que usted elige en el modo interactivo. En combinación con espacios de trabajo de hilo, es posible descomponer el proyecto en paquetes y desarrollarlos al mismo tiempo (la recarga en caliente funciona para todo el código). La realización práctica de la conectividad y la conectividad. Google si no sabes lo que es; Ayuda mucho a gestionar la complejidad del código. También arruinó el paquete acumulativo para crear paquetes, y utiliza la configuración general de mecanografía de la aplicación de host mono-repositorio.
Sobre Ant-Design. Es sorprendente la cantidad de gerentes y desarrolladores que no entienden los beneficios de construir una casa con ladrillos terminados y se apresuran a producir sus propios ladrillos. ¿Es realmente necesario reinventar la implementación de la ventana modal? Aprender a personalizar y componer es una práctica que se vuelve a aplicar; este es el siguiente nivel de abstracción en la construcción de la complejidad tecnológica. Solo necesito cambiar ligeramente el enfoque del diseño, dadas las restricciones. Hay que bailar desde la estufa, en lugar del habitual "lo veo". Pero el beneficio me parece obvio y sustancial.
Dentro de Ant-Design, se usa menos: el preprocesador css. Cerca de 700 variables están disponibles. Personalizar - No quiero Sin embargo, mi elección es css-in-js. Luego, debe extraer las variables requeridas en javascript: dentro de menos cargador hay una opción modifyVars. Para reutilizar el mismo theme.js en NodeJS y ES, utilicé esm: const requireForES = require('esm')(module /*, options*/) . Pero muchas variables se derivan de otras, por ejemplo @primary-color: @blue-6 . Proxy ayudó para los campos del tema: primaryColor: (theme) => theme.blue6 ; si el campo en el tema es una función, llame a la función, y así recursivamente al siguiente campo, hasta que lleguemos al campo con el valor final. Y hay menos mixins: este es el código js empaquetado en menos; por ejemplo, copié la función colorPalette: primaryColor5: (theme) => colorPalette(theme.primaryColor, 5) nuevamente en javascript. Fuentes theme.js .
Oh, me comí el perro en componentes con estilo. Pero no debe perder el tiempo en las historias, porque se acerca el lanzamiento de la reestructuración (realmente quiero creer). Una presentación muy inspiradora en React Russia 2019. En previsión de las vacaciones, este será un nivel diferente de conveniencia de desarrollo. Mientras tanto, solo sobre un punto general, incluí en la configuración de "editor.foldingStrategy": "indentation" para contraer normalmente el código CSS dentro de la cadena de plantilla. Molesto porque el editor no recuerda minimizado. Sería necesario buscar un complemento.
Los proyectos en mis planes son diferentes, pero invariablemente, que los proyectos son para participantes activos. Entonces necesita funcionalidad de autorización. Preferiblemente sin contraseñas. Respuesta: Kit de cuenta de Facebook. Un breve código digital para el inicio de sesión viene por carta, SMS (gratis) o un mensaje en WhatsApp. Escribió su contenedor en la parte superior de la API mientras vive dentro del proyecto como un componente de reacción. Funciona muy bien Ahora quiero ponerlo en un paquete npm, en ese momento no sabía cómo usar espacios de trabajo de hilo + lerna.
Muchos proyectos sobre contenido de texto. Necesito un editor de texto. Solo rebaja, no es suficiente. Sí, dentro del formato de descuento, puede agregar inserciones HTML, pero este no es un editor para el consumidor masivo, sino para hackers. La salida es un editor de bloques. Y para los bloques necesitas almacenar metadatos. Por ejemplo, un widget de galería de imágenes: un par de clics del mouse y listo. Y también quiero reorganizar los bloques, también con el mouse. Me gusta koenig-editor dentro de Ghost y todavía editor doméstico JS . Está claro que medium.com es el progenitor. Pero no estoy contento con la funcionalidad al 100%. Y no se trata de reaccionar. ¿Puede tomar DraftJS por Facebook? Lamentablemente, vomitado. SlateJS inspirado en él gana el momento comparativamente. Pero SlateJS es un constructor de complementos. Debe haber ensamblajes ya preparados basados en él. Debajo del spoiler hay una larga lista de los pros y los contras de algunos.
Texto ocultocanner-slate-editor
[+] no muestra el menú flotante cuando un mouse selecciona un encabezado o texto dentro de un bloque con código
[-] cuando se completa la operación de arrastrar y soltar para la imagen, se observa un cursor sin dibujar
[+] signo más con un menú contextual cuando el cursor está en una línea vacía fuera del bloque de código (como en Ghost, pero también hay un signo más cuando lleva el mouse al final del texto)
[+] Un signo más con un menú contextual aparece al final de la línea (pero si la línea está decorada como "H2", el signo más ya no aparece; esto no es un error, sino una función)
[+] animación de signo más con menú contextual (no hay tal cosa en Ghost); y el signo más se convierte en una cruz cuando el menú está abierto
[-] en el menú contextual hay botones para formatear el texto (en Ghost solo hay widgets)
[+] aplicación de componentes antd para herramientas dentro del editor
[+] funcionalidad completa para cargar imágenes: arrastrar y soltar, url, abrir archivo
[-] Las imágenes se pueden descargar solo una a la vez (sin widget de galería)
[+] hay alineación de imágenes y otros bloques
[+] editar el tamaño de la imagen (pero sería más fácil, como en los modos Ghost regular-white-full)
[+] aplicación de formato de descuento
[-] faltan arrastrar y soltar para las tarjetas (en terminología fantasma)
[+] widget de tabla, como en el viejo MS Word
[-] por url, puede insertar solo video (en Ghost, este es el widget "Otro ...", que admite muchas otras cosas - "contenido incrustado")
El widget de enlace [-] no permite editarlo (en Ghost es posible)
[-] Los menús emergentes y los enlaces de url-popup aparecen al mismo tiempo (en Ghost, la selección de texto oculta los enlaces de url-popup)
[-] El menú flotante se arrastra sobre el borde del área editada (en Ghost está alineado con el borde)
reaccionar-página (ory-editor)
[+] modo para cambiar la composición de bloques mediante arrastrar y soltar
[+] modo de cambio de tamaño para imágenes y otros bloques, si hay varios de ellos en la misma fila (pero solo mediante arrastrar y soltar)
[+] modo para agregar widgets (pero solo mediante arrastrar y soltar)
[+] el modo "resultado de vista previa" cambia el comportamiento de los widgets (por ejemplo: la imagen se puede hacer clic)
[+] en el modo de cambiar la composición de los bloques, se puede insertar un bloque con una imagen en un bloque con texto mediante arrastrar y soltar, para que el texto enmarque la imagen; Además, hay una "protección contra el tonto": por lo que puede insertar solo una imagen
[-] sin mouse la funcionalidad es muy limitada
[-] sin estiramiento del tamaño de la imagen (como en los modos Ghost regular-white-full)
[-] no hay formato de descuento en absoluto (hay dos modos en Ghost: en el texto, en un widget separado)
[-] no es obvio cómo eliminar un bloque de imágenes (debe arrastrarlo a la cesta mediante arrastrar y soltar); debe mover el icono de la cesta fuera del texto
[-] no hay marco de enfoque para el widget de imagen en el modo de edición de propiedades (aunque hay un widget de video HTML5, probablemente la indicación del navegador establece la indicación de enfoque)
[+] la barra de herramientas para editar el elemento actual (barra de herramientas para texto o un cuadro de diálogo para imágenes, etc.) aparece en el sótano y se acopla allí
[-] el modo de agregar widgets vuelve al estado inicial de la selección de widgets después de insertar cualquier widget, pero me gustaría proceder a editar el widget agregado; Esto es probablemente lo que se pretendía: primero, lanzar bloques, y solo luego editarlos por turnos
[-] la url del enlace se elimina estúpidamente cuando se hace clic en el botón, pero me gustaría aparecer con la visualización de la url del enlace y el diálogo de edición de enlace (Ghost tampoco tiene edición, solo un campo de entrada vacío para un nuevo enlace); está claro que las compensaciones debidas a un posible conflicto de agregar un enlace a un enlace deben resolverse; en la cordura, un diálogo sirve para editar el enlace (y mostrarlo) y para seguir este enlace
[-] no hay arrastrar y soltar en la herramienta de edición de imágenes para agregar la imagen original
[-] no hay widget para el código
[-] drag'n'drop no está implementado para cargar imágenes
[-] el cuadro de diálogo de selección de archivos del sistema para descargar imágenes no filtra archivos válidos (solo se deben mostrar imágenes)
[-] en Ghost, en modo arrastrar y soltar, otros elementos se desplazan animadamente para la barra de puntero donde se ejecutará soltar
[-] en el modo de cambiar la composición de los bloques mediante arrastrar y soltar, se muestra un puntero de tira parásita por duplicado (aparentemente debido a elementos div adicionales)
netlify-cms-widget-markdown
[+] Puede ver cómo casarse con pizarra y comentario (commentSlate.js, slateRemark.js)
[+] complementos slate-edit-list y slate-edit-table
[+] dos implementaciones de editor: RawEditor y VisualEditor
cordura
[+] selección de recorte para imágenes (ver archivo adjunto): no se aplica a slate-js
[+] pegar rebajas (?)
De acuerdo, tengo que jugar con mi mejor versión de SlateJS. Entonces habr.com lo atornillará sobre sí mismo. Piensa por qué necesitas VueJS (broma). Entonces, primero necesita una composición de controles para controlar el editor: agregar nuevos bloques, controlar el bloque seleccionado, cambiar la configuración del bloque, formatear el texto seleccionado. Copié varias veces, parece haberse asentado, mientras me gusta. Controles basados en Ant-Design. Se publicaron los controles de pizarra del paquete npm. No juzgues estrictamente, este es un niño amado.
Imágenes elegantes en el teléfono Fuentes del futuro proyecto .