Skip to content

Commit ac426cd

Browse files
MortaroMortaro
committed
📝 underscored properties and tdc video
1 parent bbce92a commit ac426cd

15 files changed

+165
-124
lines changed

‎i18n/en-US/articles/handling-events.md‎

Lines changed: 0 additions & 30 deletions
This file was deleted.

‎i18n/en-US/articles/how-to-deploy-a-nullstack-application.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,6 @@ After you [generate a static site](/static-site-generation), all you have to do
3535

3636
## Next step
3737

38-
> 🎉 **Congratulations**. You are done with the advanced concepts!
38+
> 🎉 **Congratulations!**. You are done with the advanced concepts!
3939
4040
⚔ Learn about [server-side rendering](/server-side-rendering).

‎i18n/en-US/articles/how-to-use-facebook-pixel-with-nullstack.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,6 @@ export default Application;
101101

102102
## Next step
103103

104-
> 🎉 **Congratulations**. You are done with the documentation!
104+
> 🎉 **Congratulations!** You are done with the documentation!
105105
106106
⚔ If you want to see this more examples please [open an issue on github](https://github.com/nullstack/nullstack/issues).

‎i18n/en-US/articles/two-way-bindings.md‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -280,6 +280,4 @@ export default Form;
280280

281281
## Next step
282282

283-
> 🎉 **Congratulations!**. You are done with the core concepts!
284-
285-
⚔ Learn about the [application startup](/application-startup).
283+
⚔ Learn more about [underscored properties](/underscored-properties).

‎i18n/en-US/articles/underscored-properties.md‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
---
2+
title: Underscored Properties
3+
description: Prefix any property with an underscore to skip proxies
4+
---
5+
6+
You can create a method starting with `_`, that means you're creating vanilla JS code that ignores proxies.
7+
8+
With that you'll be able to add or remove the event listener.
9+
10+
```jsx
11+
import Nullstack from "nullstack";
12+
13+
class Application extends Nullstack {
14+
_listener() {
15+
// do something
16+
}
17+
18+
async hydrate() {
19+
window.addEventListener("resize", this._listener, false);
20+
}
21+
22+
async terminate() {
23+
window.addEventListener("resize", this._listener, false);
24+
}
25+
26+
render() {
27+
return <main>Content</main>;
28+
}
29+
}
30+
31+
export default Application;
32+
```
33+
34+
You can also use it to ignore the context
35+
36+
```jsx
37+
import Nullstack from "nullstack";
38+
39+
class Application extends Nullstack {
40+
_method(prop) {
41+
// do something
42+
}
43+
44+
async hydrate() {
45+
// notice its not passing an object as context normally requires
46+
this._method(true)
47+
}
48+
49+
}
50+
51+
export default Application;
52+
```
53+
54+
It is also useful for library integrations that do not deal well with proxies, or storing DOM elements.
55+
56+
```jsx
57+
import Nullstack from "nullstack";
58+
59+
class Application extends Nullstack {
60+
61+
async hydrate({ self }) {
62+
this._toaster = new MyCoolToasterPlugin()
63+
this._videoRef = self.element.querySelector('video')
64+
}
65+
66+
}
67+
68+
export default Application;
69+
```
70+
71+
## Next step
72+
73+
> 🎉 **Congratulations!** You are done with the core concepts!
74+
75+
⚔ Learn about the [application startup](/application-startup).

‎i18n/en-US/articles/vanilla-js.md‎

Lines changed: 0 additions & 22 deletions
This file was deleted.

‎i18n/en-US/components/Documentation.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ topics:
1717
href: "/routes-and-params"
1818
- title: "Two-way bindings"
1919
href: "/two-way-bindings"
20-
- title: "Vanilla JS"
21-
href: "/vanilla-js"
20+
- title: "Underscored Properties"
21+
href: "/underscored-properties"
2222
- title: "Advanced concepts"
2323
links:
2424
- title: "Application Startup"

‎i18n/en-US/components/Home.yml‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -67,12 +67,12 @@ playlist:
6767
slang: "Dweebs"
6868
realWord: " Experts"
6969
videos:
70-
- title: "Full-stack with Nullstack"
71-
link: "https://www.youtube.com/watch?v=l23z00GEar8&list=PL5ylYELQy1hyFbguVaShp3XujjdVXLpId"
72-
thumbnail: "/thumbnails/en-us-pokepoll.webp"
73-
- title: "Open Source no Brasil - Ajude a traduzir o Nullstack"
74-
link: "https://www.youtube.com/watch?v=ud3IF5Xtd1s"
75-
thumbnail: "/thumbnails/en-us-contribute.webp"
70+
- title: "Nullstack at TDC Future"
71+
link: "https://www.youtube.com/watch?v=77qeq6cSHG8"
72+
thumbnail: "/thumbnails/en-us-tdc.webp"
7673
- title: "What are JavaScript Components?"
7774
link: "https://www.youtube.com/watch?v=H2i5_A1txGI"
7875
thumbnail: "/thumbnails/en-us-components.webp"
76+
- title: "Open Source no Brasil - Ajude a traduzir o Nullstack"
77+
link: "https://www.youtube.com/watch?v=ud3IF5Xtd1s"
78+
thumbnail: "/thumbnails/en-us-contribute.webp"

‎i18n/pt-BR/articles/gerenciando-eventos.md‎

Lines changed: 0 additions & 30 deletions
This file was deleted.

‎i18n/pt-BR/articles/propriedades-sublinhadas.md‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
---
2+
title: Propriedades Sublinhadas
3+
description: Prefixe qualquer propriedade com um sublinhado para evitar os proxies
4+
---
5+
6+
Você pode criar um método começando com `_`, isso quer dizer que o código é vanilla JS e vai ignorar proxies.
7+
8+
Com isto você pode adicionar ou remover eventos no DOM.
9+
10+
```jsx
11+
import Nullstack from "nullstack";
12+
13+
class Application extends Nullstack {
14+
_listener() {
15+
// do something
16+
}
17+
18+
async hydrate() {
19+
window.addEventListener("resize", this._listener, false);
20+
}
21+
22+
async terminate() {
23+
window.addEventListener("resize", this._listener, false);
24+
}
25+
26+
render() {
27+
return <main>Content</main>;
28+
}
29+
}
30+
31+
export default Application;
32+
```
33+
34+
Você pode usar esta técnica para ignorar o contexto
35+
36+
```jsx
37+
import Nullstack from "nullstack";
38+
39+
class Application extends Nullstack {
40+
_method(prop) {
41+
// do something
42+
}
43+
44+
async hydrate() {
45+
// notice its not passing an object as context normally requires
46+
this._method(true)
47+
}
48+
49+
}
50+
51+
export default Application;
52+
```
53+
54+
Esta técnica pode ser util para integrações com bibliotecas que não lidam bem com proxies ou para guardar referencias de elementos do DOM.
55+
56+
```jsx
57+
import Nullstack from "nullstack";
58+
59+
class Application extends Nullstack {
60+
61+
async hydrate({ self }) {
62+
this._toaster = new MeuPluginDeToasterManeiro()
63+
this._videoRef = self.element.querySelector('video')
64+
}
65+
66+
}
67+
68+
export default Application;
69+
```
70+
71+
## Próximos passos
72+
73+
> 🎉 **Parabéns!** Você concluiu os conceitos básicos!
74+
75+
⚔ Aprenda sobre a [inicialização da aplicação](/pt-br/inicializacao-da-aplicacao).

0 commit comments

Comments
 (0)