Definir fluxo inicial de utilização do FrontPress via npm

[teles]

Pensei em criar um pacote npm para que o FrontPress possa ser instalado, iniciado e utilizado por interessados.

Inicialmente pensei que seria bom ter um fluxo de utilização parecido com o jekyll e/ou o npm. Quer dizer, seria bom ter comandos como:

$ frontpress init // mostra perguntas que criam o frontpress.json
$ frontpress serve {numero da porta} // abre o frontpress numa porta tal

Perguntas sobre o frontpress via npm:

Critério de pronto dessa issue não é código, apenas a resposta para essas perguntas (marcar ok nas respondidas):

• 1. Faz sentido ter um comando frontpress new {nome do projeto} que gera um arquivo como esse config e um index.html - arquivos que não devem fazer parte do core do FrontPress.
• 2. Que arquivos js devem fazer parte do core do FrontPress?
• 3. Como adicionar ao frontpress.min.js apenas a api que estiver sendo usada?
• 4. Como adicionar ao frontpress.min.js os templates cacheados (lembrando que os templates podem ser ) ?
• 5. Faz sentido ter além do npm, pacote bower e outros similares?
• 6. Quantos comandos um usuário precisará rodar para ter um frontpress básico rodando?
• 7. Vai ser necessário retirar o gulp do projeto?
• 8. Existirão comandos para editar conteúdo do frontpress.json ?

cc @alisonmonteiro @woliveiras @taciogt

[alisonmonteiro]

@teles

Comentarei sobre alguns itens que acho relevante eu falar sobre. Talvez depois comente sobre mais alguns. Vamos vendo os detalhes juntos.

5 - Acho que podemos focar no npm, por enquanto.
6 - Acho que apenas fronpress init (onde o usuário poderá responder algumas perguntas básicas) e frontpress serve.
7 - Acredito que não. Depende do nível do pacote global que você quer criar.
8 - Acho bem válido. Assim como no init, penso em termos as perguntas para preencher esses itens (acho que até já temos atualmente), acho válido termos comandos para setar os itens de configuração.

[teles]

Valeu, @alisonmonteiro. Acredito que a 5, 7 e 8 são 100% como você sugeriu, ainda estou pensando sobre as outras.

Vou anotar aqui um pouco do fluxo como ele é hoje e isso pode nos ajudar a pensar nas respostas:

Fluxo básico da aplicação hoje:

• Usuário clona o repositório;
• Roda um npm install;
• Rodar um gulp init;
• O arquivo frontpress.json é gerado com as respostas do gulp init;

Fluxo dependente de gulp init e frontpress.json:

• Usuário responde perguntas sobre (1) url base da api wordpress dele, (2) qual versão da api wordpress que ele está usando, (3) se ele quer usar disqus e se sim, qual o usuário.
• A versão da api - item (2) acima- vai impactar diretamente na task de copy, onde só será copiado para o arquivo main.js o diretório com a versão da api passada. O repositório tem dois diretórios para descrição de api;
• Quando o usuário rodar gulp, será rodada a task ngConfig -> essa task vai usar todo o frontpress.json para gerar um novo arquivo no caminho ./tasks/ngConfig.js. Esse arquivo faz parte do .gitignore e terá uma estrutura como essa:

// file generated using ngConfig

angular.module("frontpress.components.frontpress-provider")
.constant("FrontpressConfigurationFile", {
    "restApiUrl": "https://www.vivadecora.com.br/revista/wp-json",
    "apiVersion": "v2",
    "pageSize": "5",
    "disqusShortname": "frontpress",
    "overrides": {
        "title": "Frontpress - This title is overwritten by frontpress.json configuration file."
    }
});

• Os dados desse arquivo de constante angular são usados pelo provider principal do FrontPress
• O FrontPressProvider ou $FrontPress é usado várias e várias vezes na aplicação. É ele que conhece especificidades de caminhos json das apis wordpress, por exemplo.

Problema dos templates cacheados:

• Durante a execução do gulp é rodada a task de templateCache que vai transformar todos os templates html do projeto em um arquivo de caches angular, similar a isso:

(function() {
"use strict";

angular.module("frontpress.template-cache", []);
angular.module("frontpress.template-cache").run(["$templateCache", function($templateCache) {$templateCache.put('components/featured-image/templates/featured-image.template.html','<img ng-src="{[{vc.post.featured_image}]}">');
$templateCache.put('components/full-post/templates/full-post-categories-list.template.html','<div>\n\t<p ng-if="vc.post.isLoadingCategories">carregando categorias...</p>\n\t<p ng-if="vc.post.isLoadingCategories === false">\n\t\t<span><strong>categorias:</strong></span>\t\n\t\t<span ng-if="vc.post.categories.length == 1" rel="tag">{[{vc.post.categories[0].name}]} </span>\t\t\n\t\t<span ng-if="vc.post.categories.length > 1" \n\t\t\tng-repeat="category in vc.post.categories" \n\t\t\trel="tag">{[{category.name}]}{{$last ? "" : ", "}}\t\t\n\t\t</span>\t\t\n\t</p>\n</div>');
$templateCache.put('components/full-post/templates/full-post-content-v1.template.html','<div ng-bind-html="vc.post.content | trustAsHtml"></div>');
$templateCache.put('components/full-post/templates/full-post-content-v2.template.html','<div ng-bind-html="vc.post.content.rendered | trustAsHtml"></div>');
$templateCache.put('components/full-post/templates/full-post-tags-list.template.html','<div>\n\t<p ng-if="vc.post.isLoadingTags">carregando tags...</p>\n\t<p ng-if="vc.post.isLoadingTags === false">\n\t\t<span><strong>tags:</strong></span>\t\n\t\t<span ng-if="vc.post.tags.length == 1" rel="tag">{[{vc.post.tags[0].name}]} </span>\t\t\n\t\t<span ng-if="vc.post.tags.length > 1" \n\t\t\tng-repeat="tag in vc.post.tags" \n\t\t\trel="tag">{[{tag.name}]}{{$last ? "" : ", "}}\t\t\n\t\t</span>\t\t\n\t</p>\n</div>');
$templateCache.put('components/full-post/templates/full-post-title-v1.template.html','<h1 ng-bind-html="vc.post.title | trustAsHtml" ui-sref="post({postSlug:vc.post.slug})"></h1>');
$templateCache.put('components/full-post/templates/full-post-title-v2.template.html','<h1 ng-bind="vc.post.title.rendered" ui-sref="post({postSlug:vc.post.slug})"></h1>');
$templateCache.put('components/full-post/templates/full-post.template.html','<div>\t\n\t<p ng-if="vc.vm.isLoadingFullPost">carregando...</p>\n\t<div ng-if="vc.vm.isLoadingFullPost === false">\t\t\n\t\t<full-post-title post="vc.vm"></full-post-title>\t\t\t\t\n\t\t<post-date post="vc.vm"></post-date>\t\t\n\t\t<featured-image post="vc.vm"></featured-image>\t\t\t\t\n\t\t<full-post-content post="vc.vm"></full-post-content>\t\t                \n        <share post="vc.vm"></share>\n        <full-post-categories-list post="vc.vm"></full-post-categories-list>        \n        <full-post-tags-list post="vc.vm"></full-post-tags-list>       \n\t</div>\n</div>');
$templateCache.put('components/list-posts/templates/list-posts-excerpt-v1.template.html','<p ng-bind-html="vc.post.excerpt | trustAsHtml "></p>');
$templateCache.put('components/list-posts/templates/list-posts-excerpt-v2.template.html','<p ng-bind-html="vc.post.excerpt.rendered | trustAsHtml "></p>');
$templateCache.put('components/list-posts/templates/list-posts-title-v1.template.html','<h2><a ng-bind-html="vc.post.title | trustAsHtml " ui-sref="post({postSlug:vc.post.slug})"></a></h2>');
$templateCache.put('components/list-posts/templates/list-posts-title-v2.template.html','<h2><a ng-bind="vc.post.title.rendered" ui-sref="post({postSlug:vc.post.slug})"></a></h2>');
$templateCache.put('components/list-posts/templates/list-posts.template.html','<div>\n\t<p ng-if="vc.vm.isLoadingPosts">Carregando posts</p>\n\t<div ng-repeat="post in vc.vm.postsList">\t\n\t\t<list-posts-title post="post"></list-posts-title>\t\n\t\t<post-date post="post"></post-date>\n\t\t<featured-image post="post"></featured-image>\t\n\t\t<list-posts-excerpt post="post"></list-posts-excerpt>\n        <share post="post"></share>\n\t</div>\n</div>\n');
$templateCache.put('components/page-head/templates/page-head.template.html','<title ng-bind="vc.vm.pageTitle"></title>\n<meta name="title" content="{[{vc.vm.pageTitle}]}">\n<meta name="description" content="{[{vc.vm.pageDescription}]}">\n<meta name="robots" content="{[{vc.vm.pageRobots}]}">\t\n\n<link rel="canonical" href="{[{vc.vm.pageCanonical}]}">\n\n<link rel="prev" ui-sref="home-pagination({pageNumber:vc.vm.relPrevNumber})" ng-if="vc.vm.relPrevNumber">\n<link rel="next" ui-sref="home-pagination({pageNumber:vc.vm.relNextNumber})" ng-if="vc.vm.relNextNumber">\n<ng-transclude></ng-transclude>');
$templateCache.put('components/page-head/templates/pagination.template.html','<div>\n\n\n</div>\n');
$templateCache.put('components/pagination/templates/pagination.template.html','<div>\n\t<a ui-sref="home-pagination({pageNumber:vc.vm.prevPageNumber})" ng-if="vc.vm.prevPageNumber">&lt;&lt;</a>\n\t\n\t<a ng-repeat="page in vc.vm.pages" ng-bind="page.number" ui-sref="home-pagination({pageNumber:page.number})"></a>\t\t\n\n\t<a ui-sref="home-pagination({pageNumber:vc.vm.nextPageNumber})" ng-if="vc.vm.nextPageNumber">&gt;&gt;</a>\n</div>');
$templateCache.put('components/post-date/templates/post-date.template.html','<p ng-bind="vc.post.date | date :  \'dd/MM/y\' "></p>');
$templateCache.put('components/share/templates/share.template.html','<div>\n    Share:\n    <span href ng-click="vc.vm.openShareWindow(\'twitter\', vc.post)">Twitter</span>\n    <span href ng-click="vc.vm.openShareWindow(\'facebook\', vc.post)">Facebook</span>\n    <span href ng-click="vc.vm.openShareWindow(\'gplus\', vc.post)">Google+</span>\n</div>\n');
$templateCache.put('views/home/templates/home.template.html','<div> \n\t<div infinite-scroll="vc.loadMorePostsAndPaginate()" infinite-scroll-immediate-check="false" infinite-scroll-disabled="vc.vm.isLoadingPosts">\n\t\t<list-posts></list-posts>\n\t\t<span ng-if="vc.vm.isLoadingPosts">Carregando posts novos ...</span>\n\t\t<pagination></pagination>\n\t</div>\n</div>');
$templateCache.put('views/post/templates/post.template.html','<div>\n\t<full-post></full-post>\n\t<div disqus="\'{[{ vc.disqusId }]}\'" ng-if="vc.vm.isLoadingFullPost === false"></div>\n</div>');}]);
}());

Esses templates juntos tem 6.1kb e são adicionados ao main.js como parte do projeto.
Esses templates formam um tema inicial do FrontPress e provavelmente devem ser substituídos pelo usuário. Isso já pode ser feito hoje adicionando novas entradas automaticamente no frontpress.json. Exemplo:

{
  "restApiUrl": "https://www.vivadecora.com.br/revista/wp-json",
  "apiVersion": "v2",
  "pageSize": "5",
  "disqusShortname": "frontpress",
  "overrides": {
    "title": "FrontPress - This title is overwritten by frontpress.json configuration file."
  },
  "templateUrl": {
    "views.home": "./minha-nova-home.template.html"
  }
}

Problema: Lembrando que novos templates podem ser adicionados para todas as views e componentes logo os 6.1kb de template iniciais podem não ser usados pelo usuário.

(já já levanto mais questões referentes a esse fluxo)

[teles]

Adicionando mais dúvidas baseadas no meu último comentário (com fluxo de uso):

• 9. Vamos precisar de um arquivo minificado separado para qual desses itens:
• a) arquivo de constante angular gerado a partir do frontpress.json
• b) arquivo javascript de definição da api
• c) arquivo com templates cacheados do frontpress
• 10. É uma boa ideia remover da aplicação alguma das seguintes dependências:
• a) ng-infinite-scroll.min.js
• b) defiant.min.js
• c) angular-disqus.js
• 11 . Tem a ver com a 9: que arquivos o usuário precisará importar para utilizar o frontpress.json?

[teles]

Só para testes eu criei um pacote npm para o frontpress.
Ele adiciona o comando frontpress ao bash do usuário.
No momento esse comando só dá um console.log.

Ainda tenho muito o que estudar de npm para saber como funciona a publicação de pacotes, versionamento em paralelo com github (npm não aceita semver, aparentemente).

Também precisarei entender melhor quais dependências do package.json são devDependencies e quais são dependencies.

Para criar a linha de comando frontpress to usando esse tutorial.

Agora já dá para rodar um :

npm install frontpress

cc @alisonmonteiro @woliveiras @taciogt

[teles]

Pensei nessa estrutura para os primeiros comandos do FrontPress CLI.

Observações:

• Comando new contém init que contém build, no entanto deve ser possível rodar qualquer um deles sozinho em determinado contexto.
• Vou oferecer o FrontPress como biblioteca importável (ver tarefa Gerar arquivos de build do FrontPress e commitá-los no repositório  #93) e o CLI vai ser um algo a mais no projeto
• Já estou organizando dependências em outras issues como Remover o bower do projeto e usar apenas npm #89 Tornar o infinite scroll opcional #90 Tornar o ngDisqus opcional #91 Re-organizar dependências do package.json #92 Remover biblioteca defiant.js #88
• O arquivo principal do FrontPress deve ter as dependências + o core do projeto + uma das apis (vão ser dois arquivos gerados) + templates básicos
• Também deve existir um comando frontpress server [port]

[teles]

O que acham dos comandos que descreví no comentário de cima: @alisonmonteiro @woliveiras @taciogt ?

[alisonmonteiro]

@teles acho que é bem nesse caminho mesmo.
Única opnião que é um pouco diferente aí, é que acho que deveria ser um repositório separado ao invés de ter as duas coisas juntas. 🤔

[teles]

Hmmm, algo a se pensar hein, @alisonmonteiro !
Aí seria um repositório diferente e um pacote node também separado.

Como será que é o padrão de mercado nesse caso? Bower, NPM, jekyll vem com cli embutido, mas eles praticamente não existem sem cli.

O ember-cli já é um pacote a parte do ember, por exemplo.
Tem outros exemplos parecidos com o do ember-cli ?

Estou pensando em seguir esse caminho de ter dois repositórios.
Aí colocaria esses repositórios nessa organização frontpressorg.

[alisonmonteiro]

@teles na verdade o foco do bower e npm são na CLI. hahah

Acho que para responder essa pergunta podemos ver: você pretende fazer a CLI parte obrigatória do frontpress? Ex.: para usar o frontpress o usuário vai precisar da CLI ou vai ser apenas uma tool para facilitar a vida?

[teles]

Não vai precisar da CLI, a ideia é possibilitar o uso sem CLI e mesmo sem o arquivo frontpress.json.
Aí terão duas formas de usar o frontpress, sem cli ou com cli. rs

FrontPress sem cli

• Roda um npm install frontpress
• Adiciona frontpress.min.js ou frontpress.v1.min.js no seu html;
• Importa o módulo $FrontPressProvider no config da sua app;
• Usa uma função do $FrontPressProvider para configurar sua app como seria feito com o frontpress.json

FrontPress com cli

• Roda um npm install frontpress-cli
• Roda frontpress new ou frontpress init ou frontpress build (Aqui ainda vão existir uma particularidades descritas nesse comentário

Vou criar o repositório e o pacote node para o frontpress-cli.

[alisonmonteiro]

@teles massa!

Nesse caso, como disse, particularmente acho interessante manter separado mesmo, separando as responsabilidades. Vi que você criou o repositório. Vou dar um watch lá e ajudar. Curto trabalhar em CLIs. :)

[alisonmonteiro]

@teles como podemos dividir esta estrutura em issues no frontpress-cli?

Estou usando esta estrutura como base para ir criando o MVP (não encontrei um nome melhor. Talvez versão beta - hahaha).

Ps.: Estou trabalhando no projeto, aos poucos, mas tá indo! 😅