Update Inter to v2.2.3

DenisPower1 · DenisPower1 · commit de3848337fc4 · 2024-02-17T00:12:34.000+01:00
diff --git a/index.html b/index.html
@@ -131,7 +131,7 @@ <h4>Sem configurações complexas</h4>
             <section class="lib">
                 <h3>Inter</h3>
                 <ul>
-                    <li><a href="https://github.com/interjs/inter/releases/tag/v2.2.2">Versão: 2.2.2</a></li>
+                    <li><a href="https://github.com/interjs/inter/releases/tag/v2.2.3">Versão: 2.2.3</a></li>
                     <li><a href="https://github.com/interjs/inter/blob/main/LICENSE">Licensa: MIT</a></li>
                     <li><a href="https://github.com/interjs/inter">2021 - 2024</a></li>
                 </ul>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "inter-docs",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "description": "The docs for Interjs",
   "author": "Denis Power",
   "license": "MIT",
diff --git a/script/inter.js b/script/inter.js
diff --git a/v2/tutorial/pt/instalacao/index.html b/v2/tutorial/pt/instalacao/index.html
@@ -106,7 +106,7 @@ <h3><a href="#cdn" id="cdn" class="hash">CDN</a></h3>
     <h3><a href="#localmente" id="localmente" class="hash">Localmente</a></h3>
     <p>
         Queres usar o Inter directamente em sua máquina? É super simples, baixa
-        ele clicando em <a href="https://github.com/interjs/inter/releases/download/v2.2.2/inter.min.js" title="Vai baixar a versão 2.2.2(A última versão)">Baixar - v2.2.2</a>, e agora é só importar ele em uma tag script.
+        ele clicando em <a href="https://github.com/interjs/inter/releases/download/v2.2.3/inter.min.js" title="Vai baixar a versão 2.2.3(A última versão)">Baixar - v2.2.3</a>, e agora é só importar ele em uma tag script.
     </p>
 
 <textarea id="Editor2">
@@ -175,7 +175,7 @@ <h3><a href="#cdn2" id="cdn2" class="hash">CDN</a></h3>
 
 <h3><a href="#localmente1" id="localmente1" class="hash">Localmente</a></h3>
 <p>Para instalar a versão modular localmente, basta baixar o Inter clicando em:
-<a href="https://github.com/interjs/inter/releases/download/v2.2.2/inter.m.js" title="Vai baixar a versão 2.2.2(A última versão)">Baixar - v2.2.2</a>,
+<a href="https://github.com/interjs/inter/releases/download/v2.2.3/inter.m.js" title="Vai baixar a versão 2.2.3(A última versão)">Baixar - v2.2.3</a>,
 e depois é só importar a função que pretenderes usar.
 </p>
 <textarea>
diff --git a/v2/tutorial/pt/lista/index.html b/v2/tutorial/pt/lista/index.html
@@ -25,8 +25,8 @@
     height: auto;
   }
 img {
-    width: 30vw;
-    height: 30vh;
+    width: 20vw;
+    height: 20vh;
 }
 
 #lingsDeProgramacao {
@@ -107,6 +107,11 @@ <h1><a href="#lista" id="lista" class="hash">Lista</a></h1>
                        <span class="hl">in</span> - Deve ser uma string que vai indicar o valor do atributo id do elemento onde a lista
                         será renderizada.
                     </li>
+                    <li>
+                        <span class="hl">optimize</span> - Essa propriedade foi adicionada desde a versão
+                        <a href="https://github.com/interjs/inter/releases/tag/v2.2.3" target="_blank" class="hash">2.2.3</a>, ela serve para optimizar a performance da lista, vai até a parte
+                        que fala sobre a <a href="#opcao-optimize" class="hash">opção optimize</a> nessa matéria para uma explicação mais detalhada.
+                     </li>
                     <li>
                        <span class="hl">each</span>  - Representa os dados em que a lista será baseada, o valor dessa propriedade pode
 					   ser uma <span class="hl">Array</span> , um <span class="hl">objecto</span>, <span class="hl">Set</span>,
@@ -407,6 +412,97 @@ <h3>Lista dos teus amigos</h3>
     
 <div class="space"></div>          
 </div>
+<h3 id="opcao-optimize"><a href="#opcao-optimize" id="opcao-optimize" class="hash"> Opção optimize</a> </h3>
+<div class="warning">
+    <p>Essa propriedade(opção) faz parte do Inter dese a versão
+        <span class="hl">2.2.3</span>
+    </p>
+</div>
+<p>
+    Quando a lista for super grande, de milhares de itens e os containeres correspondentes
+    à cada item tiverem inúmeros elementos aninhados, você vai notar uma certa queda de performance
+    ao atualisar a lista, com a propriedade <span class="hl">optimize</span> definida para <span class="hl">true</span>
+    a performance da lista no Inter vai até às nuvens! Mas esse ganho de performance tem uma desvantagem. Vê o exemplo:
+</p>
+
+<textarea >
+
+  <div id="estudantes"></div>
+ <script>
+ 
+    const estudantes = [
+        { nome: "Alberto Sampaio", nota: 14, professor: "João Costa", novoProf: false },
+        { nome: "Angelina Guilherme", nota: 8}
+    ]
+
+    renderList({
+        in: "estudantes",
+        each: estudantes,
+        optimize: true,
+        do(estudante) {
+
+            const { nome, nota, professor, novoProf} = estudante
+            const buttonEvents = { onclick: () => estudante.novoProf = true };
+            const done = { onclick: () => estudante.novoProf = false };
+            const inputAttrs = { type: "text", value: professor, placeholder: "Digite" };
+            const inputEvents = { oninput: (e) => estudante.professor = e.target.value }
+			const h4Text = `Estudante: ${nome} ${nota > 10 ? "passou de ano" : "vai repetir"}`
+
+            return template({
+                tag: "div", children: [{
+                    tag: "h4", text: h4Text
+                },{
+                    tag: "p", text: `O professor: ${this[0].professor}`
+                },{
+                    tag: "button", text: "novo Prof", renderIf: novoProf == false,
+					events: buttonEvents
+                },{
+                    tag: "div", renderIf: novoProf, children: [{
+                        tag: "input", attrs: inputAttrs, events: inputEvents
+                    },{
+                        tag: "button", text: "Feito", events: done
+                    }]
+                }]
+            })
+        }
+    })
+
+
+</script>
+</textarea>
+<div class="demo">
+    <div id="estudantes"></div>
+	<div class="space"></div>
+</div>
+
+<p>No exemplo anterior, nós usamos a opção <span class="hl">optimize</span> para optimizar a listar,
+que particularmente nesse caso é disnecessário só foi usado para exemplificar a desvantagem.
+Nós temos a Array estudantes que vai ser usado como os dados da nossa lista, mas um detalhe curioso é que, 
+apenas o primeiro item(objecto) da lista tem as propriedades <span class="hl">professor</span> e
+<span class="hl">novoProf</span>, tecnicamente não tinha como nós apresentarmos o valor da propriedade
+professor no segundo elemento HTML da lista, baseando-se nas propriedades do segundo objecto, então nós usamos a
+professor do primeiro objecto, até aí tudo bem, o outro porém, é que quando se usa a propriedade
+<span class="hl">optimize</span> por exemplo, se uma das propriedades
+do  primeiro item(objecto) da lista for alterada, o sistema
+de renderização da lista vai atualizar apenas o elemento correspondente(o primeiro container),
+já que o primeiro item da lista representa o primeiro elemento HTML da lista, assim
+o sistema de renderização evita trabalho desnecessário ao procurar alterações em outros elementos HTML 
+da lista. No nosso exemplo, quando uma das propriedades do primeiro objecto da Array for alterada,
+o Inter vai supor que apenas o primeiro elemento da lista foi atualizado, já que seu reator(objecto correspondente) foi atualizado,
+então não vai procurar alterações no segundo elemento HTML da lista, já que as propriedades do segundo objecto da lista estão intáctas.
+
+</p>
+
+<p>A lição é: Quando você utilizar essa opção para optimizar a lista, certifique-se que cada container(elemento da lista)
+    use apenas os dados dos objectos correspondentes, por exemplo, o segundo elemento da lista use apenas os dados do segundo objecto da lista.
+</p>
+
+<p>Eu disse que no nosso exemplo, o uso da referida propriedade não faz diferença, não é?
+Queres um exemplo em que ela faz a diferença(aumenta a performance)?
+clica em <a href="https://codepen.io/Denis-Power/pen/ZEPwvrJ?editors=0010" target="_blank">optimização
+da lista </a>
+ </p>
+
 <h3><a href="#observe" id="observe" class="hash">Método observe</a></h3>
 <div class="warning">
     <p>Esse método faz parte do Inter desde a versão <span class="hl">2.1.0</span>.</p>
@@ -700,7 +796,7 @@ <h3><a href="#listaAninhada" id="listaAninhada" class="hash">Lista aninhada</a><
 
             return template({
                 tag: "div", children: [{
-                    tag: "h4", text: `Encarregad(a): ${nome}`
+                    tag: "h4", text: `Encarregado(a): ${nome}`
                 },{
                     tag: "p", text: `${nome} tem ${filhos.length} filhos`
                 },{
@@ -737,7 +833,7 @@ <h3>
 </h3>
 <p>Essa propriedade funciona como a <a href="#reactor-setProps">setProps do reator da lista</a>, 
     mas só que, as propriedades do objecto que estamos a nos referir é que serão atualizadas, ou seja, ela(setProps)
-    é usada para atualizar os valores das proprieades do objecto de uma maneira elegante e performática. A setProps aceita apenas um objecto
+    é usada para atualizar os valores das propriedades do objecto de uma maneira elegante e performática. A setProps aceita apenas um objecto
     como o seu valor, e as propriedades do referido objecto devem indicar o nome das propriedades que os seus
     valores serão alterados, e os valores, serão os novos valores para as respectivas propriedades.
 </p>
@@ -909,8 +1005,8 @@ <h4 _if="temTarefas">Tens { numeroDeTarefas } tarefas agendadas.</h4>
 })
 
 ref1.observe((nome, valor) => {
-    if(nome == "texto") _if.temValorNoInput = valor.trim().length > 0;
-    if(nome == "numeroDeTarefas") _if.temTarefas = valor > 0;
+    if (nome == "texto") _if.temValorNoInput = valor.trim().length > 0;
+    if (nome == "numeroDeTarefas") _if.temTarefas = valor > 0;
 })
 
 const reatorDaLista = renderList({
@@ -1386,7 +1482,7 @@ <h4 _if="temTarefas">Tens { numeroDeTarefas } tarefas agendadas.</h4>
 
             return template({
                 tag: "div", children: [{
-                    tag: "h4", text: `Encarregad(a): ${nome}`
+                    tag: "h4", text: `Encarregado(a): ${nome}`
                 },{
                     tag: "p", text: `${nome} tem ${filhos.length} filhos`
                 },{
@@ -1395,6 +1491,41 @@ <h4 _if="temTarefas">Tens { numeroDeTarefas } tarefas agendadas.</h4>
             })
         }
     })
+    const estudantes = [
+        { nome: "Alberto Sampaio", nota: 14, professor: "João Costa", novoProf: false },
+        { nome: "Angelina Guilherme", nota: 8}
+    ]
+
+    renderList({
+        in: "estudantes",
+        each: estudantes,
+        optimize: true,
+        do(estudante) {
+
+            const { nome, nota, professor, novoProf} = estudante
+            const buttonEvents = { onclick: () => estudante.novoProf = true };
+            const done = { onclick: () => estudante.novoProf = false };
+            const inputAttrs = { type: "text", value: professor, placeholder: "Digite novo professor " };
+            const inputEvents = { oninput: (e) => estudante.professor = e.target.value }
+			const h4Text = `Estudante: ${nome} ${nota > 10 ? "passou de ano" : "vai repetir"}`
+
+            return template({
+                tag: "div", children: [{
+                    tag: "h4", text: h4Text
+                },{
+                    tag: "p", text: `O professor: ${this[0].professor}`
+                },{
+                    tag: "button", text: "novo Prof", renderIf: novoProf == false ,events: buttonEvents
+                },{
+                    tag: "div", renderIf: novoProf, children: [{
+                        tag: "input", attrs: inputAttrs, events: inputEvents
+                    },{
+                        tag: "button", text: "Feito", events: done
+                    }]
+                }]
+            })
+        }
+    })
 
 
 </script>
diff --git a/v2/tutorial/pt/referencia/index.html b/v2/tutorial/pt/referencia/index.html
@@ -19,8 +19,8 @@
         <title>Referência</title>
         <style>
             img{
-                width: 40vw;
-                height: 40vh;
+                width: 20vw;
+                height: 20vh;
             }
             .CodeMirror {
     border: 1px solid #eee;
@@ -122,7 +122,15 @@ <h1><a href="#referencia" id="referencia" class="hash">Referência</a></h1>
 
   </div>
   <span class="space"></span>
+  
                 </div>
+	<p>
+	Antes de explicarmos o código, preparei
+	um editor de código online(codePen) para você acompanhar melhor
+	o tutorial, clica em <a href="https://codepen.io/Denis-Power/pen/poYGpyy" target="_blank">
+	Aprendendo o Interjs
+	</a> o editor vai abrir em outra aba, assim poderás editar e criar códigos usando o Inter.
+	</p>
 
                 <p>Lá na tag script, você vê a função <span class="hl">Ref</span> não é? Essa função é usada
                     para analisar o template alvo em busca de referências, e ela deve receber apenas um objecto como o seu argumento,

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "inter-docs",`
`3`		`- "version": "2.2.2",`
	`3`	`+ "version": "2.2.3",`
`4`	`4`	`"description": "The docs for Interjs",`
`5`	`5`	`"author": "Denis Power",`
`6`	`6`	`"license": "MIT",`