 Falo aí o Lucas Falom de Dompeval, de 29 anos, sou dinheiris de software na Ibuka. O programa é em desde a minha adolescência, nem me lembro mais. Já passei diversas em Wario, mas eu faço um programador generalista. E mais ultimamente, tenho especializado mais na área de front. Eu pulsei na cidade dos momentos de sistemas e realmente trabalhei com o dinheiro de software na Ibuka. Hoje eu vou falar sobre single file components no WordPress em compilação. Parece um monte de estrangeiros aqui que... Vamos ver, quem entendeu o que significa isso aqui? Alguém? Ah, boa galera, mas... Eu vou explicar, mas ao menos vocês vão entender o que é. Eu vou entrar em alguns assuntos de programação também, mas alguns assuntos também na parte de teoria, vocês vão conseguir aproveitar mesmo não conhecendo tanto profundamente de programação. A ideia é a gente utilizar esse framework do GES com o WordPress para poder criar esse single file component. Vou detalhar melhor isso aí. Primeiro, antes de começar qualquer coisa, a gente tem que entender o que é um componente. Um componente na GES, o software, a gente chama, que é um termo utilizado para escrever o elemento do software que encapsula uma série de funcionalidades. Um componente é uma unidade dependente que pode ser utilizada com outros componentes para formar um sistema mais completo. Aqui vocês podem ver uma foto de um carro, e vocês veem que tem vários pedacinhos, e todos esses pedacinhos que funcionam de forma independente, mas... Na full funcionalidade, por exemplo, uma roda consegue girar, porque a funcionalidade dela é girar, mas ela consegue mover o carro só assim. Ela precisa de outros componentes que, junto com ela, vão fazer o carro andar. Então, o componente é basicamente isso. É um encapçulado que consegue fazer funcionalidade aqui, que foi especificado, mas ele também depende de outros componentes para formar um sistema mais complexo. Então, é um sistema complexo feito de pedacinhos menores, menos complexos. E aí, trazendo para o mundo de front, da OEL em geral, o que seria um componente na nossa definição. Porque o componente não era um aspecto apenas visual. Vou falar isso, que trata mais da funcionalidade do que apenas um aspecto visual. Que legal, se a gente escreve uma página assim, né? Vou fazer meu TP George Pass, pa, peji, hele, componente, componente, full TP. Mas isso aqui, se você olhar, já é possível. É possível, com alguma tecnologia, sabendo que utilizar, você consegue construir coisas tão simples e abstraídas assim. A ideia, com essa palestra, é você no final entender que isso aqui é possível. Mas você pode falar isso, até que a HTML não existe. Isso aí se inventou da sua cabeça. É que eu posso criar. Tem problema? Existem APIs já, que você pode criar. Existe uma API chamada Cuscom Elamins, que você cria, no menos, até que é química. Você tem componentes seus. Não é o assunto que eu vou mandar aqui hoje. Hoje eu vou fazer uma coisa um pouco mais simples. Mas já é possível, para vocês saberem. Na parte visual, geralmente a gente vê assim. Quem era da época do fome gerado de jfw, e para lembrar que no jk você tinha os plugins, que você colocava o plugin lá, e fazia um monte de funcionalidade. Hoje, com WordPress, a gente utiliza plugins também para fazer diversas funcionalidades. Em geral, os plugins do WordPress, a gente propor a funcionalidade de back e de front. E eles podem utilizar vários, um ou nenhum componente. Aí vai o plugin que estiver utilizando, que estiver sendo usado. Mas, o propósito geral dos componentes é gerar coisas semelhantes a essa. Você vê que a gente pode fazer a analogia com o sistema com o carro. Então você tem... O que seria o carro? Seria a sua página aparecendo nos positivos logo. Poderia considerar um sistema complexo formado de pequenos outros sistemas de melhor complexidade. Então aqui são representações visuales de componentes. Lembre-se, eles não são apenas visuales, eles podem ser funcionalidades. E o que é que é o Vue.js? Essa história é toda. Hoje, WordPress, todo mundo sabe o que é. Mas o Vue.js, talvez muitos não conheçam. Ela é um framework progressivo. Essa é a definição que está na documentação. É um framework progressivo para a construção do terfácio de usuário. A ideia é você criar componentes da sua página de funcionalidades visuales que fiquem comparadas dentro de um mundo para arquivo. E que você vai escrever aquela funcionalidade. Então imagina que você tem, sei lá, um componente de mapa. Ele mostra um pino lá no mapa. Você pode criar um componente que chama mapa.vue e importar ele em qualquer lugar da tua página e utilizar a forma para você achar melhor. E dentro desse ponto Vue, e esse ponto Vue já adiantando para vocês, é o single file component. Então, é um arquivo que consegue sozinho armazenar o JavaScript, o HTML e o CSS. Você pode falar, ah, mas eu posso fazer isso, sei lá. Com plugin. Poderia. Poderia. Só que qual que é o grande diferencial do Vue.js? É que ele é reativo. E eu vou mostrar para vocês como que é isso. Você manipula as propriedades no seu JavaScript e essas propriedades já se refletem no seu HTML e o seu CSS também funciona junto com essas funcionalidades. Então isso te dá uma flexibilidade muito grande na hora de trabalhar. Mas sim. Falei, falei, falei, falei, falei e mostrei nada. Então, vamos ver uma coisa de coin. Eu vou fazer um exercício aqui com vocês hoje. A ideia é fazer uma coisa um pouco mais... vai ser demonstrativa, mas mostrando a possibilidade que pode ser feita para vocês. É como que eu consegui fazer essa integração e mandar as coisas que eu tentei focar. É tirar o máximo de barreiras possíveis para quem está começando. Para quem ainda não entende muito bem os JavaScript ou para quem não quer se adentrar e alinhar em todas as ferramentas de build, que é o pessoal que me chama de build tools, na mesma vez para você fazer falando esse tipo de coisa. É legal você saber, vai te agregar muito, sabe, como profissional, porque hoje em dia os mobile sites já não te perforam. É praticamente impossível você ter esses ferramentas de tooling, mas... Eu quero remover essa barreira para vocês entenderem primeiro por, vale a pena investir no tooling já aqui, agora sim eu sei trabalhar com componentes. E aí você vai se sentir incentivado a procurar melhor isso aí. Então, a ideia é, eu vou apresentar uma forma de fazer, não é a melhor forma possível, não é mais utilizada. Mas aí vocês, sabendo disso, vão falar, vou experimentar o BIBO, testar alguma coisa aqui e aí quando eu tiver beleza, eu vou tolhe por exemplo, vai ser o próximo passo. Então a ideia é, hoje a gente construí... mas não é alguma coisa aleatória, tive uma ideia assim, percebi alguma coisa que eu fosse fazer para apresentar e pode não ser útil, sei lá, mas eu quero te fazer uma coisa assim, mostrar como o CSS trabalha com componentes para criar uma coisa um pouco mais dinâmica na tua página. Então, você vai rolando a página do scroll ali e você vai ver que a sessão de texto, elas vão aparecendo conforme eu vou rolando. Cada um ali, esse aqui é o template de pagão, do hoje preso, do N7. E aí quando você vai rolando os posts, eles vão entrando na tua página. Como é que a gente começa pensando disso aí, eu vou tentar isso aí. Se tem tempo, talvez eu ainda mostre esse outro componente que eu integrei no hoje preso, um componente comentário simples, que já existe, eu só criei o... só vinculei ele no hoje preso e vou ver se dá tempo e se dá tempo de eu já mostro para vocês. A estrutura que a gente vai montar na pasta do hoje preso, você pode ver que é o... é o tema do N7, eu não fiz em favor o char, porque eu queria mostrar para vocês como ficaria o teu template nessa apresentação, se ele fosse mais complexo e tudo mais. Então basicamente eu criei e adicionei uma pasta chamada component, onde eu vou armazenar todos os meus single file components do vio, fazer isso aqui, os .vio. Aqui eu estou usando o vscode, o vscode já identifica e já identa para você já. Mas toda a parte grona prática, como vocês se preocupam com isso. E apresentei também um arquivo PHP chamado loader e eu vou mostrar como que é isso aqui. Ele vai pegar esses pontos vio dessa pasta e sem precisar compilar, vou dar uma navegada para você. Isso é muito massa, vocês vão ver que é muito show. Estão começando aqui, comprei o function porque o function é o primeiro arquivo do onde presta, carregado na hora do que ele cargue no tempo. E de lá ele vai decidir o que vai fazer. No caso, eu não sei se esse get parent temp file é uma função do nativo, acho que não, porque as funções são ativador de pedaços, mas não dá pra ver. Provavelmente é uma função do profilto 27 do tema, que ele declarou antes. Mas se você quer ver o que estava usando ali, eu falei bom, exato também. Então ele basicamente é um query, ele faz um query ali, o arquivo loader.php que é responsável, claro, não carregar todos os nossos componentes, que deixa eu utilizar no nosso tema. Aqui a gente vê na parte template parts, então esse tema ele coloca dentro template parts ali, os arquivos php que vão servir para renderizar o conteúdo do WordPress. E aí ele tem esse arquivo content.php que é um arquivo responsável por exibir para renderizar o conteúdo do post. Então ele tem um post, ele vai passar por esse content.php e aqui você colocar aqui ele vai renderizar uma lista de post um post específico no site. E aí o que eu fiz? Lembra das tags lá? Eu criei a minha tag lá, estou aí em post. Então é um componente e eu só fica aqui, ele não tem lugar ali a article. Então a tag é nativa do HTML para representar um post do WordPress. Não do WordPress, para representar o artigo qualquer. HTML é geral. Então basicamente é só substituir, essa estrutura é a mesma que já está lá, não mudei nada, então o article ele pega as classes do WordPress, são ativas, já coloca ali, busquei e dentro da tag, então você vê que a tag termina aqui, dentro da tag eu coloquei o conteúdo e já estava lá. Então basicamente eu fiz um wrapper do do article e vou dentro desse componente e vou dizer como que ele vai se comportar. Uma coisa importante porque eu salimentei aqui o view tem as propriedades em especial chamadas lotes. Então quando isso vem no HTML 5, eu já tenho implementado ativamente todos os navegadores mais longos. Com o slot você diz assim, está vendo esse lugar aqui, essa tag aqui, a fazenda na memória que eu vou puxar depois de ir para outro lugar. Então o view ele vai pegar essa enter header que seria o cabeçalha do post e o conteúdo do post. Então o cabeçalha ele vai ter o título tag, teoria, enfim e o content vai ter o conteúdo de fato do post. E aí ele vai jogar dentro ao nosso ponto view. Então o componente do view, ele tem essa tagzinha template, isso aqui também é nativo. Então o view tem que ser transformado o máximo possível do nativo que já existe, para você não precisar aprender coisas novas. Então esse template tem uma tag na HTML que já existe para você criar pedaços de código, HTML, e não precisa ser renderizado. Você está dizendo, eu vou usar esse template para outra coisa que eu vou fazer. Não renderizo isso aqui não. Então eu vou processar isso e vou renderizar depois. Então basicamente é isso que o template diz. Então você não vê um quadro do view, que é mais como um marcador. Então o template do meu componente, como que ele vai ser renderizado as tags que eu vou usar, estão aqui dentro. Então pode ver que eu peguei aquele art que estava lá e agora eu vou ter dentro do meu componente. Adicionei essa télisinha que eu chamo de tag, para facilitar. Mas é um componente que tem um certo componente. Adicionei esse componente transition que basicamente faz o efeito lá que eu te vi bonitinho que passa por desse lado todo. Eu vou explicar como que ele funciona melhor assim, mas por enquanto basta entender que tipo ele faz a transição e veja só, olha o slot aqui. Então eu disse aqui, é isso que eu estou dizendo. Pega aquele conteúdo que estava lá e agora ele vai jogar aqui dentro do meu componente. Ele vai puxar aquele conteúdo que é o cabeçalho que mais vai colocar aqui e o outro conteúdo que é o entry content que vai jogar aqui dentro. O legal do single file component é que ele junta o html, o JavaScript que você precisa e o estilo que você precisa dentro de um arquivo que você precisa. Tudo que você faz aqui dentro não pasa para o outro componente. Então suponhe que ele está adicionando uma classe CSS nesse componente aqui. Então eu coloque aqui no meu CSS e vou mostrar isso mais para frente. Suponhe que ele adicione que todo meu parágrafo vai aceitar. Esse estilo só se aplica a esse componente. Ele não vai vazar para todos os outros componentes da sua página mais para baixo. Então eu estou aqui e eu vou colocar no meu code do JavaScript. Para você que entende mais JavaScript vai poder falar a pouso e poder usar o xbox e xbox só que só o promo me faz falta de suporto. E por uma alimentação também está livre que a gente vai usar para fazer o xbox de forma assim para o componente. Mas, de forma geral, é a mesma coisa. A gente vai substituir o xbox por um modo do xbox que vai declarar o código do componente aqui. Eu vou explicar como é que a gente faz o declaro isso depois. E olha que legal no baixo. Você quer as partes mais importantes de se usar o componente. É o style do scope. Então qualquer CSS que colocar dentro do style, ele vai estar escopado Então, o que eu estou dizendo que meu entre-conte de p tem que ser guitarco. Então quando a gente for ver lá na renderização disse que a gente vai ver que sobra o parámetro do componente de guitarco não o restante do conteúdo das partes. E aí eu vou lembrar um pouco agora a parte do modem. Com quem que escreveu o modem para carregar esses componentes e o que é que a parte mais máxima. Então primeiro aqui é considerante qualquer onde está os assets os javascript, as libres que eu vou utilizar e não é relacionado com o componente. Então vai estar ali dentro de assets. Aqui eu carrego com a função nativa do load. Então eu registro quais são as libres que eu vou precisar utilizar. Então, a primeira delas é esse. Esse cara aqui é o cara que consegue processar o tipo de ponto view então ele vai baixar os navegadores o ponto view vai extrair o gato html extrair o estilo, extrair o javascript compilar se for necessário não é nem compilar, ele só processa e já joga. Porque o view ele funciona se você começar a ver a documentação dele ele funciona fora de single file components. Então você pode, não precisa usar com single file components não precisa usar de views nem nada. O javascript só importa a libres a livra da biblioteca registrando view importando viewport.js e ele já funciona no navegador. Aí eu só adicionei esse html de um laudo justamente para poder puxar esses arquivos com o view. Esse projetivo é muito legal, vale a pena dar uma conferida. Isso ele foi utilizado por uma humanidade não é nem nativo do view. É bem para facilitar para quem quiser usar. Então eu registrei as dependências e aqui na parte final eu vou carregar um app lembra que na palestra passada a rapaz falou que se você tem um app o que é o app.js? Você vai centralizar a loja da sopricação no front o arquivo vai estanciar os components e vai registrar o que precisa ser registrado na parte do front então ele vai pegar e vai puxar isso do back end do front o que é necessário. Em depth aqui, pode ver eu registrei o view e o htpml antes de carregar a loja tipa precisa carregar o view e o plugin que faz o carregamento dos arquivos para o view. E no meu assets você pode ver que eu coloquei na porta.js do componente o app.js que estou requisitando lá o htpml e o view.js que são os links que eu não precisar utilizar. O nosso app.js está declarado da sua forma é só isso mesmo cuida de estanciar a aplicação inteira do seu front basicamente o que ele faz ele vai estanciar um novo view e dizer qual são os componentes que vão ser usados para iniciar essa aplicação eu vou voltar aqui aquele initf aquela função lá initf eu vou chamar essa função lá no meu loader passando passando os componentes que estão disponíveis para utilizar e com essa declaração eu digo para o view em qualquer lugar dentro desse app qualquer lugar do meu template que eu estou utilizando eu vou chamar uma tecla você vai verificar se ela existe como um componente se já foi declarada antes você distancia esse componente e usa aquela tecla nesse componente então initf passa os componentes com a lista de componentes e essa lista de componentes você pode ver dentro do meu loader.php eu tenho um evento bem detalhe técnico mas se você importar esse loader você já consegue usar ele vai funcionar no final da pármida depois que renderizar o HTML e vai chamar os componentes que são apenas os arquivos que estão lá aquele gola vai lá em cima carregar o rl de todos os componentes então ele vai buscar todos os componentes que estão na tua pasta.view e vai deixar disponível ele vai deixar disponível para o view utilizar quando for necessário e aí o view ele carrega sobre demanda ele não vai puxar todos você tem uma página que precisa do post eu estou usando aqui essa tag e quando ele der matte quando dá um matte quando dá um matte do componente para o tag que você usou ele puxa e renderiza para você é claro que isso tem placações lógicas que você precisa prestar atenção você não pode chamar uma função de um componente se ele não está disponível para você usar você tem que ter esses cuidados o evento ele já faz parte desse trabalho aquele evento ele só inicializa a aplicação depois está tudo carregado vou voltar aqui outra coisa que faz essa aplicação é dizer esse l do view as propriedades me diz aonde eu vou distanciar a aplicação então basicamente como um wrap não vou usar uma parte específica eu quero que meu tema entenda o que são os componentes em qualquer lugar para eu utilizar um componente e essa eu tive mais externa ela está nesse render quando você pega a play dentro do template você pode ver que ele carrega aqui o body e logo depois do body ele carrega na play site então por esse leitão eu distancio o view naquela nesse lugarzinho então daí para dentro onde eu vou utilizar eu vou colocar uma tag de componente ele vai entender e puxar aqui no view que é referente a aquele componente deixa eu ver aqui tá, já mostrei aqui depois de ter feito tudo isso o que aconteceu lá na nossa página ele já renderizou o componente ele já está funcionando só que o nosso componente ainda não decódigo nenhum olha que coisa que ele fez aqui no estilo vou voltar aqui para o outro vídeo eu disse que o meu entrecontent p vai ser etálica então ele já aplicou esse estilo nos os pux então o pux ele está com conteúdo do etálico e você já aplicou no componente e aqui eu estou usando uma olha uma abasinha escrito view lá em cima você está todo mundo enxergando aqui é uma extensão do Promi ele entende quando você está usando view uma página e ele mostra que são os componentes que estão declarados nessa página então o extenso forte tensão do view já entendeu, ele já mendisse você tem um componente app e dentro do componente app você tem 4 posts e eles são os componentes do e-post que você está utilizando sempre clicar no outro componente eu vei todas as propriedades eu posso fazer várias coisas bem mapanas, você pode se mencionar é claro que isso é o que habilitei para o poder da publica você pode desaflitar para ele não precisar mostrar isso para os usuários se você tem uns page em elementos você vai ver um monte de divi com um código de data, não sei o que é para identificar qual é a instância do componente, mas você não consegue visualizar aquele componente daquela forma, só na extensão conseguindo a gente precisa fazer a animação então a gente precisa que quando é bole o componente ele vem aparecendo eu coloquei um título vindo da direita e os 3 que eu fiz da esquerda, vou encontrar não lembro bem, mas a gente vai ver para isso o que eu fiz vou começar a acrescentar agora no meu template eu vou fazer umas coisas especiais do view a primeira delas você pode ver que é style container style, tem 2 pontos então é uma tag com a propriedade, só que ela tem 2 pontos o que é isso, estou fazendo um data byte data byte, o seguinte você vai declarar uma variável no JavaScript então se você modificar ela ela vai renderizar de novo o seu template com os dados atualizados então toda vez que eu modificar com tender style no meu HTML renderizado ele vai estar atualizado automaticamente com todas as últimas operações que eu fiz dentro desse objeto isso aí que é a reatividade com todos os componentes tudo isso eu vou fazer aonde lembro que a gente tem lá a partida de JavaScript aí eu vou mostrar para vocês como fica a partida de JavaScript mas a ideia desse container style é o seguinte, já que eu vou sumir a minha divi de conteúdo o taster ele vai pulaxar para cima ele vai subir para isso não acontecer eu vou criar esse container style que quando a animação começar eu vou definir um edge fixo na minha divi em vez de colapsoar ela vai continuar e quando ela está no container o conteúdo de dentro ele colapsa ele vai sair fora e aí o texto não sobe vai ficar um flick que está acima aqui dentro do meu entre header e entre condoms eu adicionei essa tag bem especial do view que é verir ela diz que renderiza essa tag quando impre o port que é uma variável se o elemento está aparecendo para o usuário ou não a view port é aquela parte que é exibida para o usuário se estiver na view port exibe o conteúdo se não exibe e o transition a magia que começa a aparecer quando você vai precisar componente o transition entende se o conteúdo que está dentro está visível ou não e com base nisso ele vai aplicar css style css e aí vai aplicar sua animação ele vai adicionar uns text css automaticamente a conteúdo que vai fazer a animação funcionar e vou mostrar vocês como aqui era a parte de tatabai que eu estava explicando basicamente você tem um objeto um variável, seja lá quando você compre um objeto a parte chata que seria consultar um elemento no andom, burrar o atributo renderizar de novo agora escutava que o usuário clicou, devolta tudo isso é feito automaticamente pelo framework basicamente manipula os objetos através do tatabai esse mecanismo que eu falei ele atualiza o adio que é adom e essa adona está representada naquele cifrão e a gente vai utilizar lá na frente depois que ele renderiza ele aplica automaticamente de novo os systems então ele vai escutar eventos nessa sua viva por exemplo, se eu renderizei quando supo uma div nova e eu quero nessa div e quando eu clicar nela ela executa outra coisa então ele já modifica pra você já escuta nessa nova div esses eventos de clic e esses eventos podem modificar de volta ou de vários post porque se for de um só eu não quero clicar só isso, só para isso todos esses aqui se for de vários, aí eu aplico a animação olha que hoje o prédio agora está comunicando com o componente vou mostrar como pra vocês enquanto isso também vou declarar algumas variáveis a propriedade que a gente expõe para comprar quem for utilizar o data são variáveis inteiros o componente não quer que o usuário manipule isso quem vai manipular isso aqui é quem está desenvolvendo, é um próprio funcionário para manipular as propriedades então basicamente eu digo que em VIOCOP está true, ele começa true por que ele começa true? porque quando o componente estanciar quer pegar o tamanho dele lembra aquele tamanho que ele diz que para não relaxar eu vou pegar o tamanho dele eu peguei o height eu vou sumir ele do usuário além disso lembra-se que o componente vai renderizar depois da parte naquela esquema do progress e web app isso significa que o seu componente tem que estar visível no começo e aí quando ele carrega os apps aí ele vai sumir, por que? porque se o cara não estiver de apps ele não pode deixar de ver o que ele quer ver se o cara estiver pro algum motivo ele não estiver se importando de apps porque ele precisa ver o conteúdo prosseguindo aqui olha o single que eu falei como é que eu liguei agora o código do WordPress com o meu componente olha que legal primeiro eu peguei essa variável do PHP escrevi ela dentro da propriedade então ela tem um data body de single que vai escutar o que eu mandei lá do back end e no fonte já vai renderizar o resultado da essa chamada que é a single PHP e single retuna true se for um post a parte do post e retuna false se for uma lista de posts então o single já vai definido desde o back end existem outras formas de se comunicar com o componente que é através API eu poderia, por exemplo, não quero utilizar nada disso depois eu vejo se é um single functional poderia também um pouco mais complexo eu não vou adentrar nesta palestra mas assim é possível dizer que está misturando o código PHP e JavaScript a próxima coisa que eu vou fazer aqui é isso aqui vai aparecer mais alguns caras aqui a primeira palestra é aquele método Zali que é onde eu defino quais são as funções do componente eu vou até esconder aí que eu não vou eu vou mostrar isso depois no mounted que é um caldex que é uma função chamada automaticamente quando o componente estiver indeterminado estar e eu posso mostrar para vocês aqui então quando toda essa instantância um componente do view ele passa para uma série de caldex se ele estiver declarado no mounted o componente foi atachado na DOM ele já está disponível para você manipular se quiser é isso que Scamback faz então quando ele está disponível na DOM eu checo isso é a própria que a gente passa lá no content.php se ela é de como false e se ela for true eu configuro uma animação e essa animação você pode ver onde o view vai pegar o objeto e vai atribuir o disk a distância do view você não vai ter problema de ficar onde é que está o disk onde é que ele já tem que bindar o view já faz tudo isso então o disk basicamente me chama um disk com um set animation que é os métodos ali em cima vamos verificar aqui eu vou voltar um pouco na parte do CSS lembro que eu falei que eu preciso explicar porque quando ele transige ele faz a transição basicamente ele vai definir aquelas classes dentro do componente tem várias classes ali se você olhar a notificação você vai entender melhor mas basicamente aqui eu digo, quando estiver nesse status aqui com essa classe você aplica essa transformação, uma comunidade especial do CSS que faz animação translate x ele vai pegar e vai aplicar com o lado translate x ali embaixo vai chegar e aplicar pro outro lado então ele vai tirar e aparecer conforme eu entre e saio quando ele aplicar esses classes e aqui em cima Transition Transition Output você pode estudar mais a fruta também depois se quiser mas é bem legal porque ele permite fazer animações apenas com CSS não precisa usar nada de JavaScript a gente consegue fazer a transição daquelas propriedades embaixo ele vai fazer um pouquinho até concluir aquele valor ali embaixo o nosso set animation agora como é que funciona o que eu chamei do set animation aqui, set animation quando ele for quando ele não for um single post quando ele não for uma página de post, uma lista de post você configura animação como é que você vai fazer isso então ele pega um container style define um in-weight baseado na altura do elemento atachado na dom olha esse L aqui, lembra onde eu falei o L então o L é aquele cara nele está disponível no mountain como eu chamei isso aqui dentro do mountain o mountain ele já fez, olha isso aqui já está disponível pra você que é o elemento na dom agora você pode eu posso pegar o translate já que ele zoou, ele já está disponível posso pegar a altura dele no container style e isso aqui vira estilo lá na face no template, lembra? que a gente tem lá em cima os dois pontos de style igual a container style então isso aqui vai virar o estilo lá em cima além disso eu volto a overflow reading por que? lembra que a animação sensência ela puxa, ela é por pra direita e pra esquerda se você não for a overflow reading ele vai, parece, ensinou o barro embaixo é claro, você está puxando o elemento pro lado se ele não está na vio post visual ele vai passar pro lado então toda vez que eu der um evento scroll então eu estou escutando ali no window então se eu tiver um evento scroll pra rolar o mouse você vai executar vai checar se o elemento está na vio post se ele estiver true, senão é falsa na variável em vio post isso aqui ele vai fazer reagir lá no template no template a gente vai exibir o movimento ou não, com o máximo dessa variável algum depósito de implementação o depósito é uma função que evita que você acumule várias chamadas da mesma função como é o evento scroll ele intriga cada vez que está um pixel de modificação do scroll, ele vai se acumular muitos eventos ele vai calcular muitas vezes sem necessidade em vez de estar calculando várias vezes o resultado ele chama apenas uma vez a casa inteira de tempo aqui na parte de em vio post eu não tenho tempo de entrar em detalhes no vio post mas basicamente o que ele vai fazer é calcular o tamanho do elemento e ver se ele está visível pro usuário esse é o elemento ele vai calcular se o elemento está visível pro usuário e com base nisso ele toma essa decisão aqui embaixo vamos ver como é que isso ficou na prática vou rodar aqui um exemplo para quem conhece esse PHP é um pgps traço s um calvão de 80 tpm pode botar um sentidosinho do pgps se você acha que nada ele roda direto e como o WordPress é pgp então a gente consegue botar o WordPress se não precisar instalar nada vou ficar só mais então aqui está o tema do WordPress conforme eu rolo a gente pode ver se não conta da folha que a gente espera então vou dar um inspect aqui que eu falei pra vocês é bacana essa é a extensão do vio se você quiser a gente vai curiosidade de saber qual que é é o dev toast o coral vio dev toast vai achar a extensão e que você consegue inspecionar elemento por elemento de componentes então a gente tem o app que é aquele app.js que a gente declarou a gente tem um tpm post com as propriedades dele o que é esse aqui posso clicar aqui e mostrar quem ele é e quais são as propriedades dele lembra aquele dedo que a gente declarou que são as áreas internas dele olha o contêiner como ficou o mini style se eu sumir aqui ele já vai botar lá embaixo e se eu entrar aqui de novo e ver o post vira o true então ele está totalmente reativo é isso na verdade tem que felizmente mostrar outro componente de comentário mas quem tiver curiosidade pode me falar aí depois que eu vou mostrar pra vocês obrigado